/* Поддержка msapps.ru — общий стиль в духе МойСклад UIKit (norm.msapps.ru/uikit) */

/* Токены @moysklad/uikit */
:root {
    --text-primary: #091739;
    --text-secondary: #5f6d79;
    --text-tertiary: #9fa7af;
    --text-accent: #036ce5;
    --text-positive: #0d8a56;
    --text-critical: #e50347;
    --text-attention: #db5202;
    /* Три уровня, как в МойСклад: фон страницы → блок → белое поле ввода */
    --bgd-page: #f2f4f9;
    --bgd-block: #e4e6ee;
    --divider: #0917391a;
    --bgd-hover: #0917390f;
    --bgd-white: #fff;
    --bgd-grey: #f6f6f6;
    --bgd-secondary: #f1f4f9;
    --bgd-selected: #dff0fe;
    --border-light: #e7eaf0;
    --border-normal: #d1d6df;
    --border-hover: #5f6d79;
    --border-focused: #091739;
    --primary-normal: #036ce5;
    --primary-hover: #0b7cff;
    --primary-focus: #2f8fff;
    --primary-pressed: #005dc9;
    --disabled-bgd: #d3d8ddb3;
    --chip-normal: #e4e6ee;
    --chip-hover: #d8dbe5;
    --chip-current: #bfddf7bf;
    --badge-green-bgd: #beeeddd9;
    --badge-orange-bgd: #fadac0d9;
    --badge-blue-bgd: #bfddf7bf;
    --badge-grey-bgd: #d3d8ddb3;
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "ALS Hauss", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-feature-settings: "tnum" on, "lnum" on;
    -webkit-font-smoothing: antialiased;
    color: var(--text-primary);
    background: var(--bgd-page);
    /* Подвал прижат к низу даже на короткой странице */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--primary-hover); }
a:focus-visible { outline: 1px solid var(--border-focused); outline-offset: 1px; border-radius: 2px; }
p { margin: 0 0 12px; }
.container { max-width: 1024px; margin: 0 auto; padding: 0 24px; }

/* Типографика: H2 / H3 / H4 кита */
h1, h2, h3 { margin: 0; font-weight: 700; color: var(--text-primary); }
h1 { font-size: 24px; line-height: 28px; margin-bottom: 20px; }
h2 { font-size: 20px; line-height: 24px; margin: 24px 0 12px; }
h3 { font-size: 16px; line-height: 18px; margin: 16px 0 8px; }
.muted { color: var(--text-secondary); }
.mt { margin-top: 16px; }

/* Шапка */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bgd-white); border-bottom: 1px solid var(--border-light); }
/* Три колонки: лого слева, «Написать тикет» по центру, меню справа */
.topbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 56px; }
.topbar-inner > .brand { grid-column: 1; justify-self: start; min-width: 0; }
.topbar-center { grid-column: 2; display: flex; justify-content: center; }
.topbar-inner > nav { grid-column: 3; justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.brand-home, .brand-home:hover { color: var(--text-primary); }
.brand-site { color: var(--text-accent); }
.brand-site:hover { color: var(--primary-hover); text-decoration: underline; }
.brand-text { display: flex; flex-direction: column; }
.brand-slogan { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-secondary); }
.brand-mark { display: block; flex: none; width: 28px; height: 28px; }
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.topbar nav a:not(.btn) { color: var(--text-primary); }
.topbar nav a:not(.btn):hover { color: var(--primary-hover); }
/* Меню пользователя: имя + аккаунт, по стрелке — «Выйти» */
.user-menu { position: relative; }
.user-menu summary { display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; user-select: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:focus-visible { outline: 1px solid var(--border-focused); outline-offset: 2px; border-radius: 2px; }
.user-menu-text { display: flex; flex-direction: column; text-align: right; }
.user-name { color: var(--text-primary); }
.user-subtitle { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.user-menu-arrow { flex: none; color: var(--text-secondary); transition: transform .15s; }
.user-menu summary:hover .user-menu-arrow { color: var(--text-primary); }
.user-menu[open] .user-menu-arrow { transform: rotate(180deg); }
.user-menu-list { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; padding: 4px 0; background: var(--bgd-white); border: 1px solid var(--border-light); border-radius: var(--radius-m); box-shadow: 0 4px 16px rgba(9, 23, 57, .12); }
.topbar nav .user-menu-list a { display: block; padding: 8px 16px; color: var(--text-primary); }
.topbar nav .user-menu-list a:hover { color: var(--text-primary); background: var(--bgd-grey); }

main.container { flex: 1 0 auto; width: 100%; padding-top: 32px; padding-bottom: 64px; }

/* Подвал */
.footer { background: var(--bgd-white); border-top: 1px solid var(--border-light); }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 56px; }
.footer a { color: var(--text-secondary); }
.footer a:hover { color: var(--primary-hover); }

/* Кнопки: Primary / Secondary / Accent, размеры M / L / XL */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 32px; padding: 0 16px; border: 0; border-radius: var(--radius-m);
    font: inherit; white-space: nowrap; cursor: pointer;
    background: var(--primary-normal); color: #fff;
    transition: background-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--primary-hover); color: #fff; }
.btn:focus-visible { outline: none; background: var(--primary-focus); }
.btn:active { background: var(--primary-pressed); }
.btn-small { height: 28px; padding: 0 12px; border-radius: var(--radius-s); }
.btn-wide { height: 40px; padding: 0 32px; font-size: 16px; line-height: 24px; }
.btn-secondary { background: var(--bgd-white); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-normal); }
.btn-secondary:hover { background: var(--bgd-grey); color: var(--text-primary); }
.btn-secondary:focus-visible { background: var(--bgd-grey); box-shadow: inset 0 0 0 1px var(--border-focused); }
.btn-secondary:active { background: var(--bgd-secondary); }
.btn-accent { background: linear-gradient(271.79deg, #fe4b1d 1.52%, #ff7732 98.48%); }
.btn-accent:hover { background: #ee4317; }
.btn-accent:focus-visible, .btn-accent:active { background: #fe5924; }
.btn:disabled, .btn:disabled:hover { background: var(--disabled-bgd); color: var(--text-tertiary); box-shadow: none; cursor: default; }

/* Поля ввода */
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], textarea, select {
    display: block; width: 100%; height: 32px; margin: 0; padding: 0 12px;
    border: 1px solid var(--border-normal); border-radius: var(--radius-m); outline: none;
    background: var(--bgd-white); color: var(--text-primary);
    font: inherit; transition: border-color .15s;
}
input:hover, textarea:hover, select:hover { border-color: var(--border-hover); }
input:focus, textarea:focus, select:focus { border-color: var(--border-focused); }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
textarea { height: auto; min-height: 112px; padding: 8px 12px; resize: vertical; }
select {
    appearance: none; padding-right: 36px; cursor: pointer;
    background: var(--bgd-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235f6d79' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
}
label { display: block; margin: 16px 0 4px; color: var(--text-primary); }
input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-normal); cursor: pointer; }
label.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
form .submit { margin-top: 20px; }

/* Выбор решения: «Решение: [иконка] Название ▾» + выпадающий список */
.solution-picker { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 16px; }
.solution-picker-label { color: var(--text-secondary); }
.solution-trigger {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 8px;
    border: 0; border-radius: var(--radius-m); background: none; font: inherit; color: var(--text-primary); cursor: pointer;
}
.solution-trigger:hover, .solution-trigger[aria-expanded=true] { background: var(--bgd-hover); }
.solution-trigger:focus-visible { outline: 1px solid var(--border-focused); }
.solution-picker.invalid .solution-trigger { box-shadow: inset 0 0 0 1px var(--text-critical); }
.solution-current { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.solution-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solution-placeholder { color: var(--text-accent); font-weight: 400; }
.solution-chevron { flex: none; color: var(--text-secondary); transition: transform .15s; }
.solution-trigger[aria-expanded=true] .solution-chevron { transform: rotate(180deg); }
.solution-icon { flex: none; width: 20px; height: 20px; border-radius: var(--radius-s); object-fit: contain; }
.solution-icon-empty { display: flex; align-items: center; justify-content: center; background: var(--bgd-secondary); color: var(--text-tertiary); }
/* Решение в строке данных тикета: иконка по высоте строки, затем название */
.solution-inline { display: inline-flex; align-items: center; gap: 6px; vertical-align: top; }
.solution-inline .solution-icon { width: 16px; height: 16px; border-radius: 4px; }
.solution-inline .solution-icon-empty svg { width: 12px; height: 12px; }
.solution-menu {
    position: absolute; top: 100%; left: 0; z-index: 20; width: 340px; max-width: 100%; max-height: 360px;
    margin-top: 4px; padding: 4px 0; overflow-y: auto;
    background: var(--bgd-white); border: 1px solid var(--border-light); border-radius: var(--radius-m); box-shadow: 0 4px 16px #0917392e;
}
.solution-menu[hidden] { display: none; }
.solution-group { padding: 8px 12px 4px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.solution-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px; border: 0; background: none; font: inherit; color: var(--text-primary); text-align: left; cursor: pointer; }
.solution-option .solution-icon { width: 24px; height: 24px; }
.solution-option:hover, .solution-option:focus-visible { outline: none; background: var(--bgd-secondary); }
.solution-option[aria-selected=true] { background: var(--chip-current); }
.solution-select { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }

/* Загрузка файлов (FileUploader) */
label.file-field { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.file-field input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-field .file-names { min-width: 0; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-field .file-names.chosen { color: var(--text-primary); }
.file-field:hover .btn-secondary { background: var(--bgd-grey); }
.file-field:focus-within .btn-secondary { box-shadow: inset 0 0 0 1px var(--border-focused); }
.file-drop-overlay {
    position: fixed; inset: 12px; z-index: 100; display: none; align-items: center; justify-content: center;
    padding: 24px; border: 3px dashed var(--primary-normal); border-radius: var(--radius-l);
    background: #dff0feee; color: var(--text-accent); font-size: 22px; font-weight: 700; text-align: center;
    pointer-events: none;
}
.file-drop-overlay.visible { display: flex; }
/* Строка под формой: «Отправить» слева, прикрепление файлов справа */
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; }
.form-actions .file-field { min-width: 0; }

/* Карточки */
.card { background: var(--bgd-block); border: 1px solid transparent; border-radius: var(--radius-l); padding: 24px; margin-bottom: 16px; }
.card > :last-child { margin-bottom: 0; }
.card > form:first-child > label:first-of-type { margin-top: 0; }
.card-narrow { max-width: 400px; margin: 48px auto; padding: 32px; }
.card-narrow h1 { margin-bottom: 8px; }
.card-narrow .submit .btn { width: 100%; }
.card-narrow p.mt { padding-top: 16px; border-top: 1px solid var(--divider); }

/* Flash-сообщения (Banner) */
.message {
    position: relative; margin-bottom: 20px; padding: 14px 20px 14px 48px;
    background: var(--bgd-white); border: 1px solid var(--primary-normal); border-radius: var(--radius-m);
    cursor: pointer;
}
.message::before {
    content: ""; position: absolute; left: 16px; top: 14px; width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23036ce5' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 9v5M10 6.2v.1'/%3E%3C/svg%3E") no-repeat center;
}
.message.success { border-color: var(--text-positive); }
.message.success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%230d8a56' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='m6.8 10.2 2.2 2.2 4.2-4.6'/%3E%3C/svg%3E"); }
.message.error { border-color: var(--text-critical); }
.message.error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23e50347' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3 2.5 16.5h15z'/%3E%3Cpath d='M10 8.5v3.5M10 14.3v.1'/%3E%3C/svg%3E"); }
.message.warning { border-color: var(--text-attention); }
.message.warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23db5202' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3 2.5 16.5h15z'/%3E%3Cpath d='M10 8.5v3.5M10 14.3v.1'/%3E%3C/svg%3E"); }
.message.hidden { display: none; }

/* Статусы (Badge) */
.status { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 14px; font-weight: 400; white-space: nowrap; }
.status-open { background: var(--badge-orange-bgd); color: var(--text-attention); }
.status-pending { background: var(--badge-blue-bgd); color: var(--text-accent); }
.status-answered { background: var(--badge-green-bgd); color: var(--text-positive); }
.status-closed { background: var(--badge-grey-bgd); color: var(--text-secondary); }
h1 .status { margin-left: 8px; vertical-align: middle; }

/* Фильтры (Chip) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filters a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-m); background: var(--chip-normal); color: var(--text-primary); }
.filters a:hover { background: var(--chip-hover); color: var(--text-primary); }
.filters a.active { background: var(--chip-current); }

/* Список обращений (админ) */
.chat-list { display: flex; flex-direction: column; gap: 8px; }
.chat-item {
    display: block; padding: 14px 20px; color: var(--text-primary);
    background: var(--bgd-block); border: 1px solid transparent; border-radius: var(--radius-l);
    transition: border-color .15s, box-shadow .15s;
}
.chat-item:hover { color: var(--text-primary); border-color: var(--border-normal); box-shadow: 0 2px 8px #0917390f; }
.chat-item .subject { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; line-height: 24px; color: var(--text-accent); }
.chat-meta { margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
h1 + .chat-meta { margin: -12px 0 16px; font-size: 14px; line-height: 20px; }

/* Хлебные крошки (Breadcrumbs) */
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; color: var(--text-secondary); }
.breadcrumbs-sep { flex: none; color: var(--text-tertiary); }

/* Панель действий чата */
.chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.chat-actions form { display: inline-flex; align-items: center; gap: 8px; }
.chat-actions select { width: auto; min-width: 180px; }

/* Сообщения чата */
.messages { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
.msg { align-self: flex-start; max-width: 75%; padding: 12px 16px; background: var(--bgd-block); border: 1px solid transparent; border-radius: var(--radius-l); }
.msg.mine { align-self: flex-end; background: var(--bgd-selected); border-color: #bfddf7; }
.msg.internal { background: #fff7ef; border-color: #f7b985; }
.msg .author { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; font-weight: 700; }
.msg .body { white-space: pre-wrap; word-break: break-word; }
/* Разметка сообщений (RichText): код, цитата, скрытый текст, ссылки */
.msg .body code { padding: 1px 4px; border-radius: 4px; background: var(--bgd-hover); font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.msg .body pre { margin: 4px 0; padding: 8px 12px; border-radius: var(--radius-m); background: var(--bgd-hover); font-family: ui-monospace, Menlo, monospace; font-size: 13px; white-space: pre-wrap; }
.msg .body blockquote { margin: 4px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--primary-normal); }
.msg .body .spoiler { border-radius: 4px; background: var(--text-secondary); color: transparent; cursor: pointer; transition: background-color .15s, color .15s; }
.msg .body .spoiler:hover, .msg .body .spoiler:focus { background: var(--bgd-hover); color: inherit; }
.msg .body a { word-break: break-all; }
.msg img, .msg video { display: block; max-width: 100%; max-height: 420px; margin-top: 8px; border-radius: var(--radius-m); }
.msg .time { margin-top: 6px; color: var(--text-tertiary); font-size: 12px; line-height: 16px; }
.msg-event { align-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 90%; color: var(--text-secondary); font-size: 12px; line-height: 16px; text-align: center; }
.msg-event .status { height: 18px; font-size: 12px; }
.internal-note { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: var(--badge-orange-bgd); color: var(--text-attention); font-size: 12px; font-weight: 400; }
.attachment-deleted { margin-top: 6px; color: var(--text-tertiary); font-size: 12px; line-height: 16px; font-style: italic; }
#reply-form { scroll-margin-top: 72px; }

/* Главная сотрудника: вкладки (Tabs) */
.tabs { display: flex; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--divider); }
.tabs a { flex: none; margin-bottom: -1px; padding: 8px 0 12px; font-size: 16px; line-height: 24px; white-space: nowrap; color: var(--text-primary); border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--text-primary); border-bottom-color: var(--primary-hover); }
.tabs a.active { border-bottom-color: var(--primary-normal); }

/* Подсказка перед формой (Banner info) */
.hint { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding: 14px 48px 14px 16px; background: var(--bgd-white); border: 1px solid var(--primary-normal); border-radius: var(--radius-m); }
.hint[hidden] { display: none; }
.hint-icon { flex: 0 0 20px; color: var(--text-accent); }
.hint-close { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-s); background: none; color: var(--text-secondary); cursor: pointer; }
.hint-close:hover { background: var(--bgd-secondary); color: var(--text-primary); }

/* Скрытое скриптом не показываем, даже если у класса свой display (.btn и т. п.) */
[hidden] { display: none !important; }

/* Уведомления: карточки настроек, переключатель (Toggle) */
.settings-card { max-width: 640px; }
.settings-card h2 { margin: 0 0 8px; }
.install-steps { margin: 0; padding-left: 20px; }
.install-steps li + li { margin-top: 6px; }
.inline-icon { vertical-align: -4px; color: var(--text-accent); }
label.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 0; font-size: 16px; line-height: 24px; cursor: pointer; }
.switch input[type=checkbox] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: relative; flex: 0 0 36px; height: 20px; border-radius: 999px; background: var(--border-normal); transition: background-color .15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bgd-white); box-shadow: 0 1px 2px rgba(9, 23, 57, .24); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--primary-normal); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 1px solid var(--border-focused); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: .6; }
.switch-hint { margin: 4px 0 16px 48px; }

/* Профиль сотрудника */
.login-ways { margin: 0; padding-left: 20px; }
.login-ways li + li { margin-top: 8px; }
.profile-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.field-hint { margin: 4px 0 0; }

/* Настройки: состояние бота Telegram, подсказка по группе */
.settings-status { margin: 0 0 16px; padding: 0; list-style: none; }
.settings-status li + li { margin-top: 6px; }
.settings-card .field-hint { margin-bottom: 16px; }
.settings-help { margin-top: 16px; }
.settings-help summary { cursor: pointer; color: var(--text-accent); }
.settings-help ol { margin: 8px 0; padding-left: 20px; }
.push-note { margin: 12px 0 0; color: var(--text-positive); }
.push-note:empty { display: none; }
.push-note.error { color: var(--text-critical); }

/* Форма тикета */
.ticket-form { margin-bottom: 40px; padding: 8px 24px 24px; background: var(--bgd-block); border: 1px solid transparent; border-radius: var(--radius-l); }
.ticket-form textarea { min-height: 140px; }

/* Список тикетов */
.tickets-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tickets-head h2 { flex: 1; margin: 0; }
.sort-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-m); color: var(--text-secondary); }
.sort-toggle:hover { background: var(--disabled-bgd); color: var(--text-primary); }
.ticket-search { width: 280px; max-width: 45%; }
.ticket-search input {
    padding-right: 36px;
    background: var(--bgd-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239fa7af' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.ticket-list { display: flex; flex-direction: column; gap: 8px; }
.ticket { display: flex; gap: 12px; padding: 16px 20px; background: var(--bgd-block); border: 1px solid transparent; border-radius: var(--radius-l); transition: border-color .15s, box-shadow .15s; }
.ticket:hover { border-color: var(--border-normal); box-shadow: 0 2px 8px #0917390f; }
.ticket-icon { flex: 0 0 20px; margin-top: 2px; color: var(--text-tertiary); }
.ticket.unread .ticket-icon { color: var(--text-accent); }
.ticket-body { flex: 1; min-width: 0; }
.ticket-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; line-height: 24px; }
.ticket.unread .ticket-title a { font-weight: 700; }
.unread-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--text-critical); color: #fff; font-size: 12px; line-height: 16px; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.ticket-meta b { font-weight: 400; color: var(--text-tertiary); }

/* Пустое состояние (EmptyState) */
.empty-state { padding: 40px 24px; text-align: center; background: var(--bgd-block); border: 1px solid transparent; border-radius: var(--radius-l); }
.empty-state-title { font-size: 16px; line-height: 20px; font-weight: 700; }
.empty-state p { margin: 4px 0 0; }

/* Пагинация */
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 24px 0 0; padding: 0; list-style: none; }
.pager li { list-style: none; }
.pager a { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-m); color: var(--text-primary); }
.pager a:hover { background: var(--bgd-hover); color: var(--text-primary); }
.pager .active a { background: var(--bgd-selected); font-weight: 700; }
.pager .disabled a { color: var(--border-normal); pointer-events: none; }

/* API-токены: таблица (Table), поле с кнопкой, выпущенный токен */
.page-lead { margin: -8px 0 24px; }
.field-row { display: flex; gap: 8px; }
.field-row input { flex: 1; min-width: 0; }
.field-row .btn { flex: none; }
.token-issued { border-color: var(--text-positive); }
.token-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.table-wrap { overflow-x: auto; background: var(--bgd-block); border: 1px solid transparent; border-radius: var(--radius-l); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 16px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--divider); }
.data-table th { color: var(--text-secondary); font-size: 12px; line-height: 16px; font-weight: 400; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--bgd-hover); }
.data-table .token-name { min-width: 160px; white-space: normal; font-weight: 700; }
.data-table tr.inactive .token-name { color: var(--text-secondary); }
.row-actions { display: flex; justify-content: flex-end; gap: 8px; }
.btn-critical, .btn-critical:hover { color: var(--text-critical); }

/* Статус: плитки с цифрами, графики */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-tile { padding: 16px 20px; background: var(--bgd-block); border: 1px solid transparent; border-radius: var(--radius-l); }
.stat-label { color: var(--text-secondary); }
/* Крупные цифры — пропорциональные, моноширинные тут выглядят разреженно */
.stat-value { margin-top: 4px; font-size: 28px; line-height: 36px; font-weight: 700; font-feature-settings: "tnum" off, "lnum" on; }
.stat-note { margin-top: 2px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.chart-card h2 { margin: 0; }
.chart-card > h2 + p { margin: 4px 0 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--text-secondary); font-size: 12px; line-height: 16px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.seg-answered { background: var(--primary-normal); }
.seg-waiting { background: var(--border-normal); }
/* Столбцы по неделям: слева шкала, под столбцами — даты */
.column-chart { position: relative; padding: 8px 0 0 28px; }
.column-chart-axis { position: absolute; top: 8px; left: 28px; right: 0; height: 160px; }
.column-chart-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--divider); }
.column-chart-tick:first-child { border-top-color: var(--border-normal); }
.column-chart-tick span { position: absolute; right: calc(100% + 8px); top: -8px; color: var(--text-tertiary); font-size: 12px; line-height: 16px; }
.column-chart-plot { position: relative; display: flex; gap: 4px; }
.column { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; border-radius: var(--radius-s); outline: none; }
.column:hover, .column:focus-visible { background: #0917390a; }
.column:focus-visible { box-shadow: inset 0 0 0 1px var(--border-focused); }
.column-area { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 160px; }
.column-bar { display: flex; flex-direction: column; gap: 2px; width: 60%; max-width: 24px; border-radius: 4px 4px 0 0; overflow: hidden; }
.column-seg { flex: 1 1 0; min-height: 1px; }
.column-label { padding-top: 6px; color: var(--text-secondary); font-size: 12px; line-height: 16px; white-space: nowrap; }
.chart-tooltip { position: absolute; top: 8px; z-index: 5; min-width: 150px; padding: 8px 12px; background: var(--bgd-white); border: 1px solid var(--border-light); border-radius: var(--radius-m); box-shadow: 0 4px 16px #0917392e; pointer-events: none; font-size: 12px; line-height: 16px; }
.tip-title { margin-bottom: 4px; color: var(--text-secondary); }
.tip-row { display: flex; align-items: center; gap: 8px; }
.tip-row b { min-width: 20px; font-size: 14px; line-height: 20px; }
.tip-key { flex: none; width: 12px; height: 2px; border-radius: 1px; }
.chart-table { margin-top: 16px; }
.chart-table summary { display: inline-block; color: var(--text-accent); cursor: pointer; }
.chart-table summary:hover { color: var(--primary-hover); }
.chart-table .table-wrap { margin-top: 12px; }
/* Горизонтальные полосы: подпись, полоса, значение сразу за её концом */
.bar-chart { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 10px 16px; margin-top: 16px; }
.bar-label { color: var(--text-secondary); }
.bar-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-fill { flex: none; width: calc((100% - 96px) * var(--value)); height: 20px; border-radius: 0 4px 4px 0; background: var(--primary-normal); }
.bar-value { white-space: nowrap; color: var(--text-secondary); }
.bar-value b { color: var(--text-primary); }

@media (max-width: 640px) {
    .container { padding: 0 16px; }
    main.container { padding-top: 20px; }
    /* iOS Safari увеличивает страницу при фокусе на поле со шрифтом меньше 16px. */
    input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], textarea, select { font-size: 16px; }
    #reply-form { scroll-margin-top: 120px; }
    .topbar-inner { grid-template-columns: 1fr auto; row-gap: 8px; padding-top: 10px; padding-bottom: 10px; }
    .topbar-inner > nav { grid-column: 2; }
    .topbar-center { grid-column: 1 / -1; grid-row: 2; }
    .topbar nav { gap: 12px; }
    /* Вкладки не переносятся, а листаются вбок; линия — тенью, чтобы подчёркивание активной не обрезалось */
    .tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--divider); }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs a { margin-bottom: 0; }
    .tickets-head { flex-wrap: wrap; }
    .ticket-search { width: 100%; max-width: none; }
    .ticket-form { padding: 4px 16px 16px; }
    .btn-wide { width: 100%; }
    /* Узкий экран: прикрепление над кнопкой, кнопка во всю ширину */
    .form-actions { flex-direction: column-reverse; align-items: stretch; }
    .form-actions .file-field { justify-content: space-between; }
    .msg { max-width: 90%; }
    .card-narrow { margin: 24px auto; padding: 24px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .stat-tile { padding: 12px 16px; }
    .stat-value { font-size: 24px; line-height: 32px; }
    .column-chart-plot { gap: 2px; }
    /* На узком экране подписываем через неделю, иначе даты налезают */
    .column:nth-child(even) .column-label { visibility: hidden; }
}