/* Документация: /docs/features/support-tickets.md */
.support-root [hidden], .support-section [hidden] { display: none !important; }
.support-launcher { position: fixed; right: 24px; bottom: max(var(--support-launcher-inset, 24px), var(--support-obstacle-inset, 0px), env(safe-area-inset-bottom)); z-index: 65; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #dbe3ef; border-radius: 12px; background: white; color: #0f2d5b; box-shadow: 0 3px 12px #0f2d5b1a; font-size: 13px; font-weight: 600; }
.app-layout:has([data-agent-chat-target="fab"]) .support-launcher { --support-launcher-inset: 100px; }
.app-layout:has([data-agent-chat-target="sidebar"][aria-hidden="false"]:not(.landing-agent-chat-preview)) .support-launcher { visibility: hidden; }
.support-unread { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 10px; padding: 0 5px; background: #2563eb; color: white; font-size: 11px; }
.support-backdrop { position: fixed; inset: 0; background: #0f172a33; z-index: 79; }
.support-panel { position: fixed; top: 0; right: 0; width: min(480px, 100vw); height: 100dvh; z-index: 80; display: flex; flex-direction: column; background: white; box-shadow: -8px 0 32px #0f172a26; color: #111827; }
.support-panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 20px; border-bottom: 1px solid #e2e8f0; }
.support-back, .support-form-footer a, .support-pagination a { color: #2563eb; }
.support-nav .ui-tab:focus-visible, .support-launcher:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.support-panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.support-panel .support-section { padding: 0; }
.support-page { width: 100%; max-width: 960px; margin-inline: auto; }
.support-section { padding: 24px 0; min-width: 0; color: #111827; }
.support-heading-row { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin: 8px 0 14px; }
.support-heading { font-size: 22px; line-height: 1.3; font-weight: 700; }
.support-subheading { font-size: 16px; font-weight: 600; margin: 24px 0 12px; }
.support-muted { font-size: 12px; line-height: 1.5; color: #64748b; overflow-wrap: anywhere; }
.support-welcome { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 16px; text-align: center; color: #64748b; font-size: 13px; }
.support-welcome h2 { color: #0f172a; font-size: 17px; font-weight: 600; }
.support-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.support-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.support-field label { font-size: 13px; font-weight: 600; }
.support-field textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; font-size: 14px; line-height: 1.5; }
.support-field input[type="file"] { font-size: 12px; max-width: 100%; }
.support-field input[type="file"]::file-selector-button { margin-right: 8px; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; cursor: pointer; }
.support-file-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.support-upload:focus-within .ui-btn { outline: 2px solid #2563eb; outline-offset: 2px; }
.support-upload .ui-btn { cursor: pointer; font-weight: 500; }
.support-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.support-form-grid select { width: 100%; padding: 8px; font-size: 12px; }
.support-form-footer { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 8px 0 16px; font-size: 13px; }
.support-error { padding: 12px; margin: 12px 0; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 13px; }
.support-ticket-list { border-block: 1px solid #e2e8f0; margin: 20px 0; }
.support-ticket-row { display: block; padding: 13px 4px; border-bottom: 1px solid #e2e8f0; }
.support-ticket-row:last-child { border-bottom: 0; }
.support-ticket-row:hover { background: #f8fbff; }
.support-ticket-title { display: block; color: #0f2d5b; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 5px; font-size: 12px; color: #64748b; }
.support-new-answer { color: #2563eb; }
.support-status { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 5px 8px; background: #eff6ff; color: #1d4ed8; white-space: nowrap; }
.support-original { display: flex; flex-direction: column; gap: 14px; padding: 18px; margin: 16px 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.support-original h2 { font-size: 12px; color: #64748b; margin-bottom: 4px; font-weight: 600; }
.support-message-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
.support-messages { display: flex; flex-direction: column; gap: 12px; }
.support-entry { padding: 14px 0; border-bottom: 1px solid #e2e8f0; }
.support-entry-header { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: #64748b; margin-bottom: 6px; }
.support-entry-header strong { color: #0f2d5b; }
.support-entry-internal, .support-note-form { background: #fffbeb; border-radius: 10px; padding: 14px; }
.support-status-change { color: #2563eb; font-size: 12px; margin-bottom: 5px; font-weight: 600; }
.support-attachments { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.support-attachments a { display: flex; flex-direction: column; gap: 5px; max-width: 170px; font-size: 11px; color: #2563eb; }
.support-attachments img { width: 170px; height: 112px; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 7px; background: white; }
.support-pagination { display: flex; gap: 20px; font-size: 13px; padding: 16px 0; }
.support-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.support-filters .ui-control { min-width: 0; max-width: 200px; padding: 8px 10px; font-size: 13px; }
.support-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.support-admin-table th { background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 600; text-align: left; }
.support-admin-table td, .support-admin-table th { padding: 9px 10px; border-bottom: 1px solid #e2e8f0; overflow: hidden; text-overflow: ellipsis; }
.support-admin-table th:first-child { width: 28%; }
.support-admin-table th:nth-child(2) { width: 17%; }
.support-admin-table a { color: #2563eb; }
.support-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
.support-admin-aside { min-width: 0; }
.support-details { margin-top: 20px; font-size: 12px; }
.support-details summary { cursor: pointer; font-weight: 600; color: #0f2d5b; }
.support-details pre { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 10px; padding: 12px; background: #f1f5f9; border-radius: 8px; }
.support-delivery { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
@media (max-width: 1000px) { .support-admin-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .support-launcher { right: 16px; --support-launcher-inset: 16px; }
  .support-panel-body { padding: 16px; }
  .support-heading { font-size: 20px; }
  .support-form-grid { grid-template-columns: 1fr; }
  .support-heading-row { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
}
@media print { .support-root { display: none !important; } }

.support-report-form { gap: 12px; margin-top: 14px; }
.support-report-form .support-field textarea { min-height: 64px; }
.support-report-form p:empty { display: none; }
.support-report-options { margin-top: 0; }
.support-report-options .support-form-grid { margin: 12px 0; }
.support-report-form .support-form-footer { position: sticky; bottom: -20px; z-index: 3; margin-inline: -20px; margin-bottom: -20px; padding: 12px 20px; background: white; border-top: 1px solid var(--color-border, #e2e8f0); }
.support-upload { border: 1px dashed var(--color-border, #e2e8f0); border-radius: 8px; padding: 12px; }
.support-upload-dragging { border-color: var(--color-primary, #2563eb); background: #eff6ff; }
.support-file-list { display: flex; flex-direction: column; gap: 8px; }
.support-file-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; }
.support-file-name { font-size: 12px; overflow-wrap: anywhere; }
.support-file-row .ui-btn { padding: 6px 8px; font-size: 12px; }
.support-upload .support-error { margin: 0; }
.support-upload .support-muted:empty, .support-file-list:empty { display: none; }
.support-image-editor { width: min(1280px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; margin: auto; border: 1px solid #e2e8f0; border-radius: 14px; background: white; color: #0f172a; box-shadow: 0 16px 64px #0f172a33; }
.support-image-editor[open] { display: flex; flex-direction: column; }
.support-image-editor::backdrop { background: #0f172a80; }
.support-image-editor-header, .support-image-editor-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.support-image-editor-header strong { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.support-image-editor-footer { border-bottom: 0; border-top: 1px solid #e2e8f0; justify-content: flex-end; }
.support-image-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.support-image-tools .ui-btn, .support-image-tools select { font-size: 12px; }
.support-image-tools [aria-pressed="true"] { color: #1d4ed8; border-color: #2563eb; background: #eff6ff; }
.support-image-message { padding: 0 16px 12px; }
.support-image-viewport { flex: 1; min-height: 100px; overflow: auto; padding: 12px; background: #f1f5f9; overscroll-behavior: contain; }
.support-image-stage { position: relative; margin: 0 auto; }
.support-image-stage img { display: block; width: 100%; height: 100%; max-width: none; }
.support-image-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.support-image-stage[data-mode="view"] svg { pointer-events: none; }
.support-image-stage:not([data-mode="view"]) svg { touch-action: none; cursor: crosshair; }
@media (max-width: 520px) {
  .support-report-form .support-form-footer { bottom: -16px; margin-inline: -16px; margin-bottom: -16px; padding: 12px 16px; }
  .support-image-editor { width: 100vw; height: 100dvh; border-radius: 0; }
  .support-image-tools { padding: 8px; gap: 6px; }
  .support-image-tools .ui-btn { padding: 7px 8px; }
}

/* Общая помощь: разговор и источник меняются в одной панели, черновик вопроса сохраняется. */
.support-chat-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.support-knowledge-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.support-panel-status { padding: 0 20px 12px; }
.support-panel-status:empty { display: none; }

.support-panel-actions { display: flex; gap: 8px; }
.support-resize-handle { position: absolute; inset: 0 auto 0 0; width: 8px; z-index: 2; cursor: ew-resize; touch-action: none; }
.support-resize-handle:hover, .support-resize-handle:focus-visible { background: #93c5fd66; outline: none; }
@media (max-width: 640px) { .support-resize-handle, .support-expand { display: none; } }

/* Shared navigation uses the product underline tabs in both existing panels. */
.support-nav.ui-tabs { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; padding: 0 16px; border-bottom: 1px solid #e2e8f0; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; }
.support-nav.ui-tabs--underline .ui-tab { flex: 0 0 auto; min-height: 44px; padding: 10px 8px; border-color: transparent; white-space: nowrap; cursor: pointer; }
.support-nav [hidden] { display: none !important; }
.support-context-sidebar { max-width: 100vw; }
@media (max-width: 640px) {
  .support-context-sidebar [data-agent-chat-target="resizeHandle"], .support-context-sidebar [data-agent-chat-target="expandButton"] { display: none; }
}