.site-chat { overflow: hidden; width: 100vw; }
.site-chat .wrapper { height: var(--viewport-height); }
.site-chat .header {
    background: linear-gradient(110deg, #292337, var(--color-canvas) 75%);
    border: 0;
}
.site-chat .header-wrapper {
    max-width: none;
    height: calc(var(--header-height) + env(safe-area-inset-top));
    min-height: 0;
    padding: env(safe-area-inset-top) var(--space-5) 0;
}
.site-chat .brand-name { display: none; }
.site-chat .header-mobile-toggle { display: var(--mobile-display); }
.site-chat .brand-mark { width: var(--font-title); height: var(--font-title); }
.site-chat .header-btns { flex-direction: row-reverse; gap: var(--space-1); }
.site-chat .header-btns .icon-button, .site-chat .auth-btn {
    width: calc(var(--space-8) + 2px);
    min-height: calc(var(--space-8) + 2px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(233,229,255,.4);
    font-size: var(--font-lg);
}
.site-chat .auth-btn-label { display: none; }
.site-chat .auth-btn-icon { display: inline-block; }
.account-link-banner {
    position: absolute;
    left: 50%;
    top: var(--space-3);
    transform: translateX(-50%);
    border: 0;
    border-radius: var(--radius-sm);
    background: rgba(167,139,250,.24);
    color: var(--color-text);
    padding: var(--space-1) var(--space-3);
    font: 500 var(--font-xs)/1.6 var(--font-body);
    white-space: nowrap;
}
.site-chat .footer, .site-chat .footer-btns { display: none; }
.chat-shell {
    display: grid;
    grid-template-columns: var(--rail-width) calc(var(--sidebar-width) + 1px) minmax(0, 1fr);
    grid-template-rows: var(--app-topbar-height) minmax(0, 1fr);
    height: calc(var(--viewport-height) - var(--header-height) - var(--app-banner-height) - env(safe-area-inset-top));
    min-height: 0;
    overflow: hidden;
}
.chat-shell-topbar {
    grid-column: 2 / -1;
    grid-row: 1;
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: var(--app-corner) 0 0 0;
}
.chat-rail {
    grid-column: 1;
    grid-row: 1 / -1;
    display: var(--rail-display);
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
}
.rail-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    min-height: var(--app-rail-item-height);
    border: 0;
    border-radius: var(--rail-radius);
    background: transparent;
    color: var(--color-muted);
    font: 500 var(--rail-label-size)/1.2 var(--font-body);
    padding: 0;
}
.rail-item > .ui-icon { width: var(--rail-icon-size); height: var(--rail-icon-size); }
.rail-item:hover { background: var(--settings-surface); color: var(--color-text); }
/* Метка у края панели вырастает у выбранного раздела и сжимается у прежнего. */
.rail-item::before {
    content: '';
    position: absolute;
    left: calc(var(--space-2) * -1);
    top: 50%;
    width: 3px;
    height: var(--space-6);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--mode-accent);
    transform: translateY(-50%) scaleY(0);
    transition: transform var(--motion-normal) var(--motion-ease);
}
/* Выбранный раздел — та же иконка, залитая, в цвете режима; детали вырезаны цветом фона. */
.rail-item-active { --i-fill: 1; --i-detail: var(--color-page); color: var(--mode-accent); }
.rail-item-active::before { transform: translateY(-50%) scaleY(1); }
.rail-item-active:hover { color: var(--mode-accent); }
.rail-profile::before { content: none; }
.rail-item-bottom { margin-top: auto; }
.rail-profile { position: relative; }
.rail-profile img { border-radius: 50%; width: var(--space-8); height: var(--space-8); }
.profile-online-dot {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    width: var(--space-3);
    height: var(--space-3);
    background: #23c865;
    border: 1px solid var(--color-shell);
    border-radius: 50%;
}
.chat-sidebar {
    grid-column: 2;
    grid-row: 2;
    position: var(--sidebar-position);
    top: var(--sidebar-top);
    bottom: 0;
    left: 0;
    width: calc(var(--sidebar-width) + 1px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-4);
    background: var(--color-panel);
    border-left: 1px solid var(--color-border);
    transform: var(--sidebar-transform);
    transition: transform var(--motion-normal) var(--motion-ease);
    z-index: var(--sidebar-layer);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sidebar-heading {
    display: var(--mobile-display);
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    font-weight: 600;
}
.sidebar-heading .icon-button { width: var(--space-8); min-height: var(--space-8); }
.sidebar-action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: calc(var(--control-height) - 2px);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-control);
    background: rgba(255,255,255,.055);
    color: var(--color-text);
    font: 500 var(--font-md)/1.4 var(--font-body);
    text-align: left;
}
.sidebar-action .ui-icon { color: var(--color-muted); }
.sidebar-action strong { font-weight: 600; overflow-wrap: anywhere; }
.sidebar-action:hover { background: rgba(255,255,255,.08); }
.sidebar-action:hover .ui-icon { color: var(--color-text); }
/* «Новый чат» — главное действие панели, в цвете режима. */
.sidebar-new { background: color-mix(in srgb, var(--mode-accent) 16%, transparent); }
.sidebar-new:hover { background: color-mix(in srgb, var(--mode-accent) 24%, transparent); }
.sidebar-new .ui-icon, .sidebar-new:hover .ui-icon { color: var(--mode-accent); }
.sidebar-section-label {
    margin: var(--space-3) var(--space-2) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font: 700 var(--font-xs)/1.6 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
}
/* Карточка текущего диалога: точки во время поиска, собеседник и его статус в диалоге, итог после завершения. */
.sidebar-current { display: none; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-control); background: var(--settings-surface); }
.sidebar-current-visual { position: relative; display: grid; place-items: center; flex: none; width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; background: color-mix(in srgb, var(--mode-accent) 16%, transparent); color: var(--mode-accent); }
.sidebar-current-visual img { width: 100%; height: 100%; border-radius: 50%; transition: opacity var(--motion-normal), filter var(--motion-normal); }
.sidebar-current-visual .waiting-dots { margin: 0; }
.sidebar-current-text { display: grid; gap: 2px; min-width: 0; }
.sidebar-current-text strong { font-size: var(--font-md); font-weight: 600; overflow-wrap: anywhere; }
.sidebar-current-text > span { color: var(--color-muted); font-size: var(--font-sm); }
body[data-chat-state='search'] .sidebar-current,
body[data-chat-state='dialog'] .sidebar-current,
body[data-chat-state='ended'] .sidebar-current { display: flex; animation: enter-up var(--motion-enter) var(--motion-ease) both; }
body[data-chat-state='search'] .sidebar-current-visual img,
body:not([data-chat-state='search']) .sidebar-current-visual .waiting-dots,
body[data-chat-state='search'] #sidebar_peer_name,
body:not([data-chat-state='dialog']) .sidebar-current .chat-peer-status,
body[data-chat-state='dialog'] .sidebar-current .sidebar-state { display: none; }
body[data-chat-state='ended'] .sidebar-current-visual img { opacity: .55; filter: grayscale(.5); }
.sidebar-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--space-8);
    text-align: center;
    text-wrap: balance;
    color: var(--color-subtle);
}
.sidebar-empty img { width: var(--space-20); height: var(--space-20); object-fit: contain; margin-bottom: var(--space-3); }
.sidebar-empty p { margin: 0 0 var(--space-2); font-size: var(--font-base); font-weight: 600; color: var(--color-muted); }
.sidebar-empty > span { font-size: var(--font-md); }
.sidebar-dialog-actions { display: none; gap: var(--space-2); margin-top: auto; }
body[data-chat-state='search'] .sidebar-empty,
body[data-chat-state='dialog'] .sidebar-empty,
body[data-chat-state='ended'] .sidebar-empty { display: none; }
body[data-chat-state='dialog'] .sidebar-dialog-actions { display: grid; }
.sidebar-mobile-profile {
    display: var(--mobile-display);
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
}
.sidebar-mobile-profile > img { border-radius: 50%; }
.sidebar-mobile-profile > div { flex: 1; min-width: 0; }
.sidebar-mobile-profile strong, .sidebar-mobile-profile span { display: block; overflow-wrap: anywhere; }
.sidebar-mobile-profile strong { font-size: var(--font-md); }
.sidebar-mobile-profile span { font-size: var(--font-xs); color: var(--color-muted); }
.chat-avatar {
    display: grid;
    place-items: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex: none;
    border-radius: 50%;
    overflow: hidden;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-panel-backdrop { display: none; }
.chat-sidebar-open .chat-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    display: var(--mobile-display);
    border: 0;
    background: var(--color-scrim);
}
.chat {
    position: relative;
    isolation: isolate;
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    height: 100%;
    width: 100%;
    background: var(--color-canvas);
    overflow: hidden;
}
.chat-lobby {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    text-align: center;
    overflow-y: auto;
}
.lobby-intro {
    flex: 1;
    min-height: min-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    animation: enter-up var(--motion-enter) var(--motion-ease) both;
}
.lobby-intro > img { width: var(--lobby-avatar-width); height: auto; }
.lobby-intro #lobby_description { white-space: pre-line; }
.lobby-voice-tip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: min(100%, var(--lobby-controls-width));
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--settings-surface);
    color: var(--color-muted);
    font-size: var(--font-sm);
    line-height: 1.5;
    text-align: left;
}
.lobby-voice-tip .ui-icon { color: var(--color-lilac); }
.lobby-intro h1 { font-size: var(--font-title); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; margin: 0 0 var(--space-2); }
.lobby-intro p { color: var(--color-muted); font-size: var(--font-base); line-height: 1.5; margin-bottom: var(--space-3); }
.lobby-slide-dots { display: flex; gap: var(--space-1); }
.lobby-slide-dots i { width: var(--scrollbar-width); height: var(--scrollbar-width); border-radius: var(--hero-cta-radius); background: rgba(255,255,255,.08); }
.lobby-slide-dots .active { width: var(--font-md); background: var(--mode-accent); }
.lobby-controls {
    flex: none;
    width: min(calc(100% - var(--space-12)), var(--lobby-controls-width));
    margin-inline: auto;
}
.lobby-preference { margin-bottom: var(--space-6); }
.lobby-preference-label { margin-bottom: var(--space-3); font-size: var(--font-base); font-weight: 600; color: var(--color-subtle); }
.lobby-preference-label { line-height: 1.35; }
.lobby-preference-label > span { font-size: var(--font-sm); font-weight: 500; }
.lobby-preference-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.lobby-preference-heading .lobby-preference-label { margin: 0; text-align: left; }
.lobby-preference-heading .lobby-filter { width: var(--space-10); min-height: var(--space-10); border: 0; background: transparent; border-radius: var(--radius-control); color: var(--color-subtle); }
.lobby-preference-heading .lobby-filter:hover { color: var(--color-text); background: var(--settings-surface); }
.lobby-preference .search-filter-btn > span {
    min-height: calc(var(--space-20) + var(--scrollbar-width));
    padding: var(--space-3);
    flex-direction: column;
    gap: var(--space-2);
    border: 0;
    border-radius: var(--radius-card);
    background: rgba(255,255,255,.04);
    font-size: var(--font-md);
    font-weight: 500;
    line-height: 1.2;
}
.lobby-preference .search-filter-btn:nth-child(1) > span { color: #93c5fd; }
.lobby-preference .search-filter-btn:nth-child(2) > span { color: var(--color-lilac); }
.lobby-preference .search-filter-btn:nth-child(3) > span { color: #f9a8d4; }
.lobby-preference .search-filter-btn input:checked + span { background: var(--color-selected); }
.lobby-footer {
    padding-top: var(--space-4);
    padding-bottom: calc(var(--space-4) + var(--chat-typing-slot-height) + var(--chat-compose-gap) + env(safe-area-inset-bottom));
}
.lobby-start-actions {
    position: relative;
    display: grid;
    grid-template-columns: var(--chat-compose-height) minmax(0, 1fr);
    grid-template-rows: var(--chat-compose-height);
    gap: var(--chat-compose-gap);
}
.lobby-start-actions .lobby-mode-toggle {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 50%;
    background: var(--settings-surface);
    color: var(--color-text);
}
.lobby-start-actions .lobby-mode-toggle:hover { background: var(--color-hover); }
.lobby-start-actions .lobby-mode-toggle[aria-pressed='true'] { color: var(--mode-accent); background: color-mix(in srgb, var(--mode-accent) 18%, transparent); }
.lobby-start-actions #lobby_start {
    position: relative;
    min-width: 0;
    height: 100%;
    min-height: 0;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border: 0;
    background: var(--mode-accent);
    font-size: var(--font-base);
    overflow: hidden;
}
.lobby-start-actions #lobby_start:hover { background: color-mix(in srgb, var(--mode-accent), white 12%); }
#lobby_start_label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Иконка режима перестраивается из пузыря в микрофон; до запуска сценария в ней стоит обычная иконка набора. */
.mode-glyph { flex: none; width: var(--lobby-mode-icon-size); height: var(--lobby-mode-icon-size); overflow: visible; }
/* Перекат подписи: уходящий текст лежит поверх кнопки и не меняет её размер. */
.roll-out { position: absolute; left: 50%; top: 50%; white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%); }
/* Блик проходит по кнопке, пока она перекрашивается в цвет нового режима. */
.mode-sweep { position: absolute; inset: 0 auto 0 0; width: 32%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); pointer-events: none; }
.lobby-mode-availability { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; margin: 0; color: var(--color-subtle); font-size: var(--font-xs); line-height: 1.4; }
.chat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 100%;
    height: 100%;
    text-align: center;
    overflow-y: auto;
    animation: enter-up var(--motion-enter) var(--motion-ease) both;
}
.search-main, .notice-main { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6); }
.state-ghost { width: var(--lobby-avatar-width); }
#chat_loader .state-ghost { animation: soft-float var(--motion-float) ease-in-out infinite; }
.chat-info h1, .chat-info h3 { margin: 0 0 var(--space-2); font-size: var(--font-title); font-weight: 700; }
.search-subtitle { color: var(--color-muted); font-size: var(--font-base); margin: 0; }
.search-limit { color: var(--color-subtle); font-size: var(--font-xs); margin: var(--space-4) 0 0; }
#search_limit { color: var(--color-muted); }
.search-footer, .state-actions { display: flex; align-items: center; justify-content: center; gap: var(--chat-compose-gap); padding: var(--space-4) var(--chat-compose-inset); padding-bottom: calc(var(--space-4) + var(--chat-typing-slot-height) + var(--chat-compose-gap) + env(safe-area-inset-bottom)); width: 100%; }
#stop_search { width: min(100%, var(--lobby-controls-width)); min-height: var(--chat-compose-height); }
.search-footer .icon-button { width: var(--chat-compose-height); height: var(--chat-compose-height); }
.state-actions { flex-wrap: wrap; }
.chat-info-desc { display: block; color: var(--color-muted); font-size: var(--font-md); }
.chat-info-attempts { color: var(--color-muted); font-size: var(--font-sm); }
.chat-area { display: none; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; overflow: hidden; }
.chat-header-user-info { margin-left: var(--space-2); color: var(--color-muted); }
.chat-messages {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: var(--chat-inset) var(--chat-inset) var(--space-12);
    overflow: hidden auto;
    overscroll-behavior: contain;
    gap: var(--space-4);
}
.chat-message {
    display: none;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
    width: 100%;
    flex: none;
    padding: 0 var(--space-4);
    animation: enter-up var(--motion-enter) var(--motion-ease);
}
.chat-message-self, .chat-message-peer { width: fit-content; max-width: calc(100% - var(--avatar-size) - var(--space-4)); }
.chat-message-self { align-self: flex-end; flex-direction: row-reverse; animation-name: message-from-right; animation-timing-function: var(--motion-spring); }
.chat-message-peer { align-self: flex-start; animation-name: message-from-left; animation-timing-function: var(--motion-spring); }
.chat-message-self .chat-message-author { text-align: right; }
.chat-message-avatar { margin-top: var(--space-1); }
.chat-message-body { min-width: 0; flex: 1; }
.chat-message-author { color: var(--color-text); font-size: var(--font-base); font-weight: 600; line-height: var(--chat-message-line); }
.chat-message-time { margin-left: var(--space-2); color: var(--color-subtle); font-size: var(--font-xs); font-weight: 400; }
.chat-message-content { overflow-wrap: anywhere; white-space: pre-wrap; color: var(--color-text); font-size: var(--font-base); font-weight: 400; line-height: var(--chat-message-line); }
.chat-message-system { text-align: center; justify-content: center; color: var(--color-muted); padding: 0; }
.chat-message-system .chat-message-content { color: var(--color-muted); font-size: var(--font-sm); width: 100%; white-space: normal; }
.chat-message-content-image { position: relative; width: fit-content; max-width: min(100%, var(--image-width)); overflow: hidden; border-radius: var(--radius-control); }
.chat-message-img { position: relative; }
.chat-message-removed { color: var(--color-muted); font-style: italic; }
.chat-message-img > img { display: block; width: auto; max-width: 100%; max-height: min(var(--image-height), var(--image-viewport-height)); object-fit: contain; }
.chat-image-need-vip { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-4); background: var(--color-scrim); text-align: center; }
.chat-image-need-vip p { color: var(--color-text); font-size: var(--font-md); margin: 0; }
.chat-image-need-vip-blur { filter: blur(var(--image-blur)); }
.chat-delivery { display: inline-flex; align-items: center; gap: var(--chat-dot-size); margin-left: var(--space-2); width: var(--chat-indicator-width); vertical-align: middle; color: var(--color-muted); }
.chat-delivery i, .waiting-dots i { display: block; width: var(--chat-dot-size); height: var(--chat-dot-size); background: currentColor; border-radius: 50%; animation: delivery-pulse var(--motion-pulse) ease-in-out infinite; }
.chat-delivery i:nth-child(2), .waiting-dots i:nth-child(2) { animation-delay: var(--motion-step); }
.chat-delivery i:nth-child(3), .waiting-dots i:nth-child(3) { animation-delay: calc(var(--motion-step) * 2); }
.chat-delivery[data-delivery='delivered'] i { display: none; }
.chat-delivery[data-delivery='delivered']::after { content: '✓'; color: var(--color-lilac); }
.chat-message-content-image .chat-delivery { position: absolute; right: var(--space-2); bottom: var(--space-2); background: var(--color-panel); padding: var(--space-1); width: auto; border-radius: var(--radius-sm); }
.waiting-dots { display: inline-flex; gap: var(--space-1); margin-left: var(--space-2); vertical-align: middle; }
@keyframes delivery-pulse {
    0%, 80%, 100% { opacity: .4; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(calc(var(--chat-dot-size) * -1)); }
}
.chat-composer {
    padding: var(--space-4) var(--chat-compose-inset);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    background: var(--color-canvas);
    animation: enter-up var(--motion-enter) var(--motion-ease) both;
}
.chat-bottom { display: flex; align-items: flex-end; gap: var(--chat-compose-gap); min-width: 0; }
.chat-skip { width: var(--chat-skip-width); flex-shrink: 0; min-width: var(--chat-skip-width); min-height: var(--chat-compose-height); border: 0; border-radius: var(--radius-control); padding: 0 var(--space-4); font-size: var(--font-base); }
.chat-compose-form { flex: 1; min-width: 0; margin: 0; }
#input_chat_message { display: block; height: var(--chat-compose-height); min-height: var(--chat-compose-height); max-height: var(--chat-max-compose-height); border: 1px solid transparent; border-radius: var(--radius-control); padding: var(--space-4) var(--space-5); background: var(--color-field); line-height: 1.45; resize: none; }
#input_chat_message:focus { border-color: var(--color-border-hover); box-shadow: none; outline: 0; }
/* Подсказка «Сообщение @имя» держится в одну строку и сокращается многоточием, если имя не помещается в узкое поле.
   Многоточие задаётся полю и передаётся подсказке: заданное самой подсказке браузер не применяет. */
#input_chat_message:placeholder-shown { text-overflow: ellipsis; }
#input_chat_message::placeholder { white-space: nowrap; overflow: hidden; text-overflow: inherit; }
.chat-bottom-attach, #send { width: var(--chat-compose-height); height: var(--chat-compose-height); min-height: var(--chat-compose-height); flex: none; border: 0; background: var(--color-field); color: #8f8982; }
.chat-bottom-attach { position: relative; overflow: hidden; }
.chat-bottom-attach input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chat-bottom-attach:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.chat-bottom-attach:hover { color: var(--color-lilac); background: var(--color-hover); }
.chat-send-slot { width: var(--chat-send-width); min-width: var(--chat-send-width); margin-left: calc((var(--chat-send-opacity) - 1) * var(--chat-compose-gap)); overflow: hidden; transition: width var(--motion-normal) var(--motion-ease), min-width var(--motion-normal) var(--motion-ease), margin var(--motion-normal) var(--motion-ease); }
#send { opacity: var(--chat-send-opacity); transform: translateX(calc((var(--chat-send-opacity) - 1) * var(--space-4))); transition: opacity var(--motion-fast), transform var(--motion-normal) var(--motion-ease), background var(--motion-normal); }
#send:not(:disabled) { background: var(--color-accent); color: var(--color-text); }
#send:not(:disabled):hover { background: var(--color-accent-hover); }
#send:disabled { background: var(--color-field); color: var(--color-subtle); }
.chat-typing-slot { height: var(--chat-typing-slot-height); margin-top: var(--chat-compose-gap); color: var(--color-muted); font-size: var(--font-xs); display: flex; align-items: center; gap: var(--space-2); }
.send-message-anim { animation: delivery-pulse var(--motion-pulse) ease-in-out infinite; }
.chat-system-block { justify-content: center; padding: var(--space-4); text-align: center; border: 0; }
.chat-system-block > .chat-message-content { white-space: normal; }
.chat-system-block h3 { margin: 0 0 var(--space-3); font-size: var(--font-base); font-weight: 500; color: var(--color-muted); }
.chat-system-block-abuse { display: inline-block; color: var(--color-muted); font-size: var(--font-sm); cursor: pointer; background: transparent; border: 0; padding: var(--space-2); }
.chat-system-block-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.chat-system-block-btns a { color: inherit; }
#welcome_message {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-control);
    background: url('/assets/img/stars.svg') center / cover, var(--gradient-welcome);
    box-shadow: inset 0 1px rgba(167,139,250,.12), inset 0 -1px rgba(167,139,250,.08);
    justify-content: flex-start;
    text-align: left;
}
#welcome_message .chat-message-content { display: flex; align-items: center; gap: var(--space-3); }
.welcome-avatar { width: calc(var(--avatar-size) + var(--space-1)); height: calc(var(--avatar-size) + var(--space-1)); border-radius: 50%; flex: none; }
.welcome-name { font-size: var(--font-base); font-weight: 700; color: #fff; }
.welcome-message-title { font-size: var(--font-sm); color: rgba(233,229,255,.85); margin-top: var(--space-1); }
.welcome-message-btns { display: none; }
.chat-search-info > div { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--color-muted); }
.abuse-list { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.abuse-list li { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-field); text-align: left; cursor: pointer; font-size: var(--font-md); }
.abuse-list li .ui-icon { color: var(--color-muted); margin-right: var(--space-2); }
.abuse-list label { display: flex; align-items: center; cursor: pointer; position: relative; }
.abuse-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.abuse-list li:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.abuse-list li:hover, .abuse-list .abuse-target { background: var(--color-selected); border-color: var(--color-focus); }
.abuse-other h4 { margin-top: var(--space-4); }
.abuse-other > div { font-size: var(--font-xs); color: var(--color-muted); }
.abuse-other textarea { min-height: var(--chat-max-compose-height); margin-top: var(--space-3); resize: vertical; }
.abuse-btn { width: 100%; margin-top: var(--space-4); }
.chat-page { max-width: var(--page-width); padding: var(--space-8) var(--space-6); margin: auto; }
/* Оформление «Эфир»: голосовой режим плавно перекрашивает акцент, выведенный из акцента сайта. */
@property --voice-mix {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
body.site-chat {
    --voice-mix: 0;
    --mode-accent: color-mix(in oklch, var(--color-accent), #ff5fa8 calc(var(--voice-mix) * 50%));
    transition: --voice-mix 700ms var(--motion-ease);
}
body.site-chat[data-chat-mode='voice'] { --voice-mix: 1; }
.site-chat .brand-mark { color: color-mix(in srgb, var(--color-text), var(--mode-accent) calc(var(--voice-mix) * 85%)); }
/* Свечение под лобби: видно, пока открыто лобби, и «вдыхает» при смене режима. */
.lobby-glow {
    position: absolute;
    left: 50%;
    bottom: -45%;
    z-index: -1;
    width: min(960px, 150%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--mode-accent) 24%, transparent), transparent 72%);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity var(--motion-enter) var(--motion-ease);
    pointer-events: none;
}
.chat:has(> #chat_lobby:not([hidden])) .lobby-glow { opacity: 1; }
/* Перетекание панели: слой повторяет прежнюю кнопку и переливается в новую. */
.dock-morph { position: fixed; z-index: 5; pointer-events: none; }
/* «Начать» перетекает в «Остановить поиск» и при переходе на страницу поиска, если браузер это умеет; разрешение перехода — в заголовке страницы (partials/head.ejs). */
#lobby_start, #stop_search { view-transition-name: dock-main; }
#lobby_mode_toggle, #chat_loader #change_search_filter { view-transition-name: dock-side; }
::view-transition-group(dock-main), ::view-transition-group(dock-side) { animation-duration: 540ms; animation-timing-function: var(--motion-ease); }
/* Перекат подписи «Пропустить» → «Уверен?»: уходящий текст скрывается в границах кнопки. */
.chat-skip { position: relative; overflow: hidden; }
/* Ледоколы: темы для первого сообщения над полем ввода; свёрнутая строка схлопывается в ноль. */
.icebreakers {
    display: grid;
    grid-template-rows: 1fr;
    margin-bottom: var(--space-2);
    transition: grid-template-rows var(--motion-enter) var(--motion-ease), margin var(--motion-enter) var(--motion-ease), opacity var(--motion-normal), visibility 0s;
}
.icebreakers.is-collapsed {
    grid-template-rows: 0fr;
    margin-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--motion-enter) var(--motion-ease), margin var(--motion-enter) var(--motion-ease), opacity var(--motion-fast), visibility 0s linear var(--motion-enter);
}
.icebreakers-inner { display: flex; align-items: center; gap: var(--space-2); min-height: 0; overflow: hidden; }
.icebreakers-title { flex: none; color: var(--color-subtle); font-size: var(--font-xs); letter-spacing: .04em; text-transform: uppercase; }
.icebreakers-list { display: flex; flex: 1; gap: var(--space-2); min-width: 0; padding: 6px 2px; overflow-x: auto; scrollbar-width: none; }
.icebreakers-list::-webkit-scrollbar { display: none; }
.icebreaker {
    flex: none;
    min-height: var(--space-10);
    padding: 0 var(--space-4);
    border: 1px solid color-mix(in srgb, var(--mode-accent) 40%, transparent);
    border-radius: 999px;
    background: var(--settings-surface);
    color: var(--color-text);
    font-size: var(--font-sm);
    white-space: nowrap;
    animation: chip-in var(--motion-enter) var(--motion-ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}
.icebreaker:hover { border-color: var(--mode-accent); background: var(--color-hover); }
.icebreakers-shuffle { flex: none; width: var(--space-10); min-height: var(--space-10); border: 0; background: transparent; color: var(--color-muted); }
.icebreakers-shuffle:hover { background: transparent; color: var(--color-text); }
@keyframes chip-in { from { opacity: 0; transform: translateY(var(--space-2)) scale(.96); } }
@keyframes message-from-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes message-from-left { from { opacity: 0; transform: translateX(-28px); } }

@media (max-width: 760px) {
    .site-chat .header-wrapper { height: calc(var(--header-height) + env(safe-area-inset-top)); padding: 0 var(--space-3); }
    .site-chat .header:has(.account-link-banner) { padding-top: var(--app-banner-height); }
    .site-chat .brand { display: none; }
    .site-chat .account-link-banner { inset: 0 0 auto; width: 100%; height: var(--app-banner-height); transform: none; border-radius: 0; background: transparent; }
    .site-chat .header-mobile-toggle { background: transparent; border: 0; width: var(--space-10); min-height: var(--space-10); }
    .chat-shell { grid-template-rows: 0 minmax(0, 1fr); }
    .chat-shell { grid-template-columns: 0 0 minmax(0, 1fr); }
    .chat-sidebar { border: 0; padding: var(--space-4); }
    .chat-message { padding: 0; gap: var(--space-3); }
    .chat-composer { padding-top: var(--space-2); }
    .chat-typing-slot { margin-top: var(--space-2); }
    #input_chat_message { padding: var(--space-3); }
    .lobby-intro h1 { font-size: var(--font-xl); }
    .lobby-footer { padding-bottom: calc(var(--space-4) + var(--chat-typing-slot-height) + env(safe-area-inset-bottom)); }
    .chat-skip { padding: 0 var(--space-3); font-size: var(--font-md); }
    .icebreakers-title { display: none; }
}