/* Стили страниц «Тикеты»: список (.sys-tickets), новое обращение
   (.sys-ticket-new) и переписка по тикету (.sys-ticket-chat-page).
   Загружается глобально из index.html, все правила — под корневыми классами. */

/* ── Список ──────────────────────────────────────────────────────────── */

.sys-tickets .sys-tickets__counters {
    display: inline-flex;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.sys-tickets .sys-tickets__counter {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.sys-tickets .sys-tickets__counter svg {
    width: 12px;
    height: 12px;
}

/* ── Общее для формы и переписки ─────────────────────────────────────── */

/* Select — читаемость в тёмной теме. */

.sys-ticket-new .sys-ticket-new__alert,
.sys-ticket-chat-page .sys-ticket-chat-page__alerts:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.sys-ticket-new select.form__select,
.sys-ticket-chat-page select.form__select {
    width: 100%;
    color: var(--color-text-primary);
    background-color: var(--form-input-bg, var(--color-surface));
    border: 1px solid var(--form-input-border, var(--color-border));
}

.sys-ticket-new select.form__select option,
.sys-ticket-chat-page select.form__select option {
    color: var(--color-text-primary);
    background-color: var(--color-surface);
}

/* ── Лоток файлов (форма и строка ввода) ─────────────────────────────── */

.sys-ticket-new .sys-ticket-tray,
.sys-ticket-chat-page .sys-ticket-tray {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.sys-ticket-chat-page .sys-ticket-tray--compact {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
}

.sys-ticket-new .sys-ticket-tray--dragover,
.sys-ticket-chat-page .sys-ticket-tray--dragover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.sys-ticket-new .sys-ticket-tray__actions,
.sys-ticket-chat-page .sys-ticket-tray__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
}

.sys-ticket-new .sys-ticket-tray__hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.sys-ticket-new .sys-ticket-tray__input,
.sys-ticket-chat-page .sys-ticket-tray__input {
    display: none;
}

.sys-ticket-new .sys-ticket-tray__items,
.sys-ticket-chat-page .sys-ticket-tray__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-xs);
}

.sys-ticket-new .sys-ticket-tray__item,
.sys-ticket-chat-page .sys-ticket-tray__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    padding: var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
}

.sys-ticket-new .sys-ticket-tray__thumb,
.sys-ticket-chat-page .sys-ticket-tray__thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.sys-ticket-new .sys-ticket-tray__thumb--file,
.sys-ticket-chat-page .sys-ticket-tray__thumb--file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    cursor: default;
}

.sys-ticket-new .sys-ticket-tray__item-info,
.sys-ticket-chat-page .sys-ticket-tray__item-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    font-size: var(--font-size-sm);
    line-height: 1.3;
}

.sys-ticket-new .sys-ticket-tray__item-name,
.sys-ticket-chat-page .sys-ticket-tray__item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
}

.sys-ticket-new .sys-ticket-tray__item-size,
.sys-ticket-chat-page .sys-ticket-tray__item-size {
    color: var(--color-text-secondary);
}

.sys-ticket-new .sys-ticket-tray__item-action,
.sys-ticket-chat-page .sys-ticket-tray__item-action {
    flex: 0 0 auto;
    display: inline-flex;
    padding: var(--spacing-xs);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.sys-ticket-new .sys-ticket-tray__item-action:hover,
.sys-ticket-chat-page .sys-ticket-tray__item-action:hover {
    color: var(--color-primary);
    background: var(--color-hover-bg);
}

.sys-ticket-new .sys-ticket-tray__item-action--remove:hover,
.sys-ticket-chat-page .sys-ticket-tray__item-action--remove:hover {
    color: var(--color-error);
}

.sys-ticket-new .sys-ticket-tray__item-action svg,
.sys-ticket-chat-page .sys-ticket-tray__item-action svg {
    width: 14px;
    height: 14px;
}

/* ── Новое обращение ─────────────────────────────────────────────────── */

.sys-ticket-new .page__content {
    overflow-y: auto;
    padding: var(--spacing-md);
}

.sys-ticket-new .sys-ticket-new__form {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.sys-ticket-new .sys-ticket-new__block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sys-ticket-new .sys-ticket-new__kinds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--spacing-sm);
}

.sys-ticket-new .sys-ticket-new__kind {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.sys-ticket-new .sys-ticket-new__kind:hover:not(:disabled) {
    border-color: var(--color-primary);
}

.sys-ticket-new .sys-ticket-new__kind--active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.sys-ticket-new .sys-ticket-new__kind:disabled {
    cursor: default;
    opacity: 0.7;
}

.sys-ticket-new .sys-ticket-new__kind-name {
    font-weight: 600;
}

.sys-ticket-new .sys-ticket-new__kind-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.sys-ticket-new .sys-ticket-new__required {
    color: var(--color-error);
}

.sys-ticket-new .sys-ticket-new__description {
    min-height: 160px;
}

.sys-ticket-new .sys-ticket-new__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.sys-ticket-new .sys-ticket-new__footnote {
    margin: var(--spacing-xs) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ── Переписка по тикету ─────────────────────────────────────────────── */

.sys-ticket-chat-page .sys-ticket-chat-page__content {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.sys-ticket-chat-page .sys-ticket-chat__subject {
    min-width: 0;
    max-width: 60ch;
}

.sys-ticket-chat-page .sys-ticket-chat-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--spacing-md);
    flex: 1 1 auto;
    min-height: 0;
}

.sys-ticket-chat-page .sys-ticket-chat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    overflow: hidden;
}

.sys-ticket-chat-page .sys-ticket-chat__thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    scrollbar-width: thin;
    scrollbar-color: var(--list-scrollbar-thumb) var(--list-scrollbar-track);
}

.sys-ticket-chat-page .sys-ticket-chat__msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    max-width: min(760px, 85%);
}

.sys-ticket-chat-page .sys-ticket-chat__msg--own {
    align-self: flex-end;
    align-items: flex-end;
}

.sys-ticket-chat-page .sys-ticket-chat__msg--opening {
    max-width: min(860px, 100%);
}

.sys-ticket-chat-page .sys-ticket-chat__msg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.sys-ticket-chat-page .sys-ticket-chat__author {
    font-weight: 600;
    color: var(--color-text-primary);
}

.sys-ticket-chat-page .sys-ticket-chat__tag {
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.sys-ticket-chat-page .sys-ticket-chat__time {
    color: var(--color-text-secondary);
}

.sys-ticket-chat-page .sys-ticket-chat__bubble {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-top-left-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    box-sizing: border-box;
}

.sys-ticket-chat-page .sys-ticket-chat__msg--own .sys-ticket-chat__bubble {
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--card-bg));
}

.sys-ticket-chat-page .sys-ticket-chat__msg--opening .sys-ticket-chat__bubble {
    border-left: 3px solid var(--color-primary);
}

.sys-ticket-chat-page .sys-ticket-chat__text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.sys-ticket-chat-page .sys-ticket-chat__text--empty {
    color: var(--color-text-secondary);
    font-style: italic;
}

.sys-ticket-chat-page .sys-ticket-chat__edit {
    min-width: min(560px, 70vw);
}

.sys-ticket-chat-page .sys-ticket-chat__edit-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.sys-ticket-chat-page .sys-ticket-chat__msg-action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 2px var(--spacing-xs);
    border: 0;
    background: none;
    color: var(--color-link);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.sys-ticket-chat-page .sys-ticket-chat__msg-action:hover {
    color: var(--color-link-hover);
}

.sys-ticket-chat-page .sys-ticket-chat__msg-action svg {
    width: 12px;
    height: 12px;
}

.sys-ticket-chat-page .sys-ticket-chat__files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.sys-ticket-chat-page .sys-ticket-chat__file {
    display: inline-flex;
    max-width: 100%;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: inherit;
    font: inherit;
    overflow: hidden;
    cursor: pointer;
}

.sys-ticket-chat-page .sys-ticket-chat__file:hover {
    border-color: var(--color-primary);
}

.sys-ticket-chat-page .sys-ticket-chat__file-image {
    display: block;
    max-width: 240px;
    max-height: 160px;
    object-fit: contain;
    background: var(--color-surface);
}

.sys-ticket-chat-page .sys-ticket-chat__file-card {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 280px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.sys-ticket-chat-page .sys-ticket-chat__file-card svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--color-text-secondary);
}

.sys-ticket-chat-page .sys-ticket-chat__file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sys-ticket-chat-page .sys-ticket-chat__file-size {
    flex: 0 0 auto;
    color: var(--color-text-secondary);
}

.sys-ticket-chat-page .sys-ticket-chat__event {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    align-self: center;
}

.sys-ticket-chat-page .sys-ticket-chat__event-label,
.sys-ticket-chat-page .sys-ticket-chat__empty {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.sys-ticket-chat-page .sys-ticket-chat__empty {
    max-width: 520px;
    margin: var(--spacing-sm) auto 0;
}

.sys-ticket-chat-page .sys-ticket-chat__composer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    border-top: 1px solid var(--color-border);
    background: var(--card-bg);
}

.sys-ticket-chat-page .sys-ticket-chat__composer-note {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.sys-ticket-chat-page .sys-ticket-chat__input {
    resize: vertical;
    min-height: 64px;
    max-height: 40vh;
}

.sys-ticket-chat-page .sys-ticket-chat__composer-bar {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.sys-ticket-chat-page .sys-ticket-chat__send {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.sys-ticket-chat-page .sys-ticket-chat__send-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Боковая панель */

.sys-ticket-chat-page .sys-ticket-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--list-scrollbar-thumb) var(--list-scrollbar-track);
}

.sys-ticket-chat-page .sys-ticket-info__block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sys-ticket-chat-page .sys-ticket-info__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.sys-ticket-chat-page .sys-ticket-info__status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.sys-ticket-chat-page .sys-ticket-info__note {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.sys-ticket-chat-page .sys-ticket-info__save {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-xs);
}

.sys-ticket-chat-page .sys-ticket-info__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.sys-ticket-chat-page .sys-ticket-info__label {
    color: var(--color-text-secondary);
}

.sys-ticket-chat-page .sys-ticket-info__value {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Переход к связанному объекту — выглядит ссылкой, но открывает вкладку. */
.sys-ticket-chat-page .sys-ticket-info__link {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-link);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.sys-ticket-chat-page .sys-ticket-info__link:hover {
    color: var(--color-link-hover);
}

.sys-ticket-chat-page .sys-ticket-info__files {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sys-ticket-chat-page .sys-ticket-info__file {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name actions" "meta actions";
    column-gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
}

.sys-ticket-chat-page .sys-ticket-info__file:hover {
    background: var(--color-hover-bg);
}

.sys-ticket-chat-page .sys-ticket-info__file-name {
    grid-area: name;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-link);
    font: inherit;
    font-size: var(--font-size-base);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.sys-ticket-chat-page .sys-ticket-info__file-meta {
    grid-area: meta;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.sys-ticket-chat-page .sys-ticket-info__file-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
}

.sys-ticket-chat-page .sys-ticket-info__file-action {
    display: inline-flex;
    padding: var(--spacing-xs);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0.6;
}

.sys-ticket-chat-page .sys-ticket-info__file:hover .sys-ticket-info__file-action,
.sys-ticket-chat-page .sys-ticket-info__file-action:focus-visible {
    opacity: 1;
}

.sys-ticket-chat-page .sys-ticket-info__file-action:hover {
    color: var(--color-primary);
}

.sys-ticket-chat-page .sys-ticket-info__file-action--delete:hover {
    color: var(--color-error);
}

.sys-ticket-chat-page .sys-ticket-info__file-action svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 1100px) {
    .sys-ticket-chat-page .sys-ticket-chat-page__layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(420px, 1fr) auto;
        overflow-y: auto;
    }

    .sys-ticket-chat-page .sys-ticket-info {
        overflow: visible;
    }
}