/**
 * GPTun (LibreChat) — CSS стили
 * Извлечено из librechat/index.html при рефакторинге
 */

[x-cloak] { display: none !important; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

/* Custom Scrollbar */
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background-color: rgba(156, 163, 175, 0.5); border-radius: 3px; transition: background-color 0.2s; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: rgba(107, 114, 128, 0.8); }

/* Prose Overrides */
.prose pre { padding: 0; background: transparent; border: none; margin: 0; }
.prose pre code { background: #f3f4f6; color: #1f2937; padding: 1em; display: block; border-radius: 0.5em; }
.dark .prose pre code { background: #111827; color: #e5e7eb; }
.dark .prose strong { color: white; }
.dark .prose a { color: #60a5fa; }

/* Smooth transitions */
button, a, .cursor-pointer { transition: all 0.2s ease-in-out; }
.aichat-shell-header {
    min-height: 58px;
    border-bottom: 0;
    box-shadow: none;
}

.dark .aichat-shell-header {
    background: rgba(17, 24, 39, 0.95);
}

.aichat-brand {
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-weight: 760;
    color: #111827;
    letter-spacing: 0;
    white-space: nowrap;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'kern';
}

.dark .aichat-brand {
    color: #f9fafb;
}

.aichat-header-actions {
    flex: 0 1 auto;
}

.aichat-icon-button.aichat-header-action {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.aichat-header-action--active,
.aichat-header-action[aria-current="page"] {
    color: #0f766e;
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.aichat-header-action--admin {
    color: #c2410c;
}

.aichat-header-action[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 50%;
    z-index: 90;
    padding: 0.3rem 0.5rem;
    border-radius: 0.45rem;
    background: #111827;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -0.2rem);
    transition: opacity 120ms ease, transform 120ms ease;
}

.aichat-header-action[data-tooltip]:hover::after,
.aichat-header-action[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.dark .aichat-header-action--active,
.dark .aichat-header-action[aria-current="page"] {
    color: #5eead4;
    border-color: rgba(45, 212, 191, 0.45);
    background: rgba(6, 78, 59, 0.35);
}

.dark .aichat-header-action--admin {
    color: #fdba74;
}

.aichat-header-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.aichat-header-nav::-webkit-scrollbar {
    display: none;
}

.aichat-mobile-menu-wrap {
    display: none;
}

.aichat-mobile-menu-trigger {
    display: none;
}

.aichat-mobile-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 80;
    width: min(78vw, 18rem);
    padding: 0.45rem;
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform-origin: top left;
}

.dark .aichat-mobile-menu {
    border-color: rgba(75, 85, 99, 0.85);
    background: rgba(17, 24, 39, 0.98);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.aichat-mobile-menu__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 650;
    text-align: left;
}

.aichat-mobile-menu__item i {
    width: 1rem;
    color: #6b7280;
    text-align: center;
}

.aichat-mobile-menu__item:hover {
    color: #111827;
    background: #f3f4f6;
}

.aichat-mobile-menu__item--admin,
.aichat-mobile-menu__item--admin i {
    color: #c2410c;
}

.dark .aichat-mobile-menu__item {
    color: #e5e7eb;
}

.dark .aichat-mobile-menu__item i {
    color: #9ca3af;
}

.dark .aichat-mobile-menu__item:hover {
    color: #ffffff;
    background: #374151;
}

.dark .aichat-mobile-menu__item--admin,
.dark .aichat-mobile-menu__item--admin i {
    color: #fdba74;
}

.aichat-header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0.45rem 0.58rem;
    border-radius: 9999px;
    color: #4b5563;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .aichat-header-nav {
        display: none;
    }

    .aichat-mobile-menu-wrap {
        display: block;
    }

    .aichat-mobile-menu-trigger {
        display: inline-flex;
    }
}

@media (min-width: 768px) {
    .aichat-mobile-menu-wrap,
    .aichat-mobile-menu-trigger,
    .aichat-mobile-menu {
        display: none !important;
    }
}

.aichat-header-link:hover {
    color: #111827;
    background: #f3f4f6;
}

.dark .aichat-header-link {
    color: #d1d5db;
}

.dark .aichat-header-link:hover {
    color: #ffffff;
    background: #374151;
}

.aichat-header-link--admin {
    color: #c2410c;
}

.dark .aichat-header-link--admin {
    color: #fdba74;
}

.aichat-header-link--exit {
    color: #0f766e;
    background: #ecfdf5;
}

.aichat-header-link--exit:hover {
    color: #065f46;
    background: #d1fae5;
}

/* Guest login button */
.aichat-login-btn {
    gap: 0.35rem;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
}
.aichat-login-btn:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: rgba(99, 102, 241, 0.55);
    color: #4338ca;
}
.dark .aichat-login-btn {
    border-color: rgba(129, 140, 248, 0.35);
    background: rgba(129, 140, 248, 0.1);
    color: #a5b4fc;
}
.dark .aichat-login-btn:hover {
    background: rgba(129, 140, 248, 0.2);
    border-color: rgba(129, 140, 248, 0.55);
    color: #c7d2fe;
}

/* Auth provider buttons in modal — minimal, single-list look */
.aichat-auth-provider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(229, 231, 235, 0.9);
    background: transparent;
    color: #374151;
    transition: background 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
    text-decoration: none;
}
.aichat-auth-provider-btn:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: #d1d5db;
}
.dark .aichat-auth-provider-btn {
    border-color: rgba(75, 85, 99, 0.7);
    background: transparent;
    color: #e5e7eb;
}
.dark .aichat-auth-provider-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(107, 114, 128, 0.8);
}
.aichat-auth-provider-btn--telegram {
    color: #0088cc;
    border-color: rgba(0, 136, 204, 0.26);
}
.aichat-auth-provider-btn--telegram:hover {
    background: rgba(0, 136, 204, 0.07);
    border-color: rgba(0, 136, 204, 0.45);
}
.dark .aichat-auth-provider-btn--telegram {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.26);
}
.dark .aichat-auth-provider-btn--telegram:hover {
    background: rgba(56, 189, 248, 0.1);
}
.aichat-auth-provider-btn--google {
    gap: 0.5rem;
}
.aichat-auth-provider-btn--yandex {
    border-color: rgba(200, 120, 106, 0.26);
    color: #c8786a;
}
.aichat-auth-provider-btn--yandex:hover {
    background: rgba(200, 120, 106, 0.07);
    border-color: rgba(200, 120, 106, 0.45);
}
.dark .aichat-auth-provider-btn--yandex {
    color: #f0a89e;
    border-color: rgba(240, 168, 158, 0.26);
}
.dark .aichat-auth-provider-btn--yandex:hover {
    background: rgba(240, 168, 158, 0.1);
}
.aichat-auth-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #9ca3af;
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}
.aichat-auth-close:hover {
    color: #4b5563;
    background: rgba(15, 23, 42, 0.06);
}
.dark .aichat-auth-close:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.08);
}

.dark .aichat-header-link--exit {
    color: #6ee7b7;
    background: rgba(6, 95, 70, 0.22);
}

.dark .aichat-header-link--exit:hover {
    color: #a7f3d0;
    background: rgba(6, 95, 70, 0.36);
}

.aichat-balance-pill {
    min-height: 34px;
    padding: 0.4rem 0.7rem;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 740;
    white-space: nowrap;
}

.aichat-balance-pill:hover {
    background: #e5e7eb;
}

.dark .aichat-balance-pill {
    background: #1f2937;
    color: #5eead4;
}

.dark .aichat-balance-pill:hover {
    background: #374151;
}

.aichat-avatar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    overflow: hidden;
    border-radius: 9999px;
    background: linear-gradient(135deg, #111827, #4b5563);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 750;
}

.aichat-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    max-width: min(52vw, 20rem);
    padding: 0.35rem 0.65rem 0.35rem 0.4rem;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2937;
}

.dark .aichat-profile-pill {
    border-color: rgba(255,255,255,0.1);
    background: rgba(31, 41, 55, 0.92);
    color: #f3f4f6;
}

.aichat-profile-pill__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #111827, #4b5563);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    flex: 0 0 1.8rem;
}

.dark .aichat-profile-pill__avatar {
    background: linear-gradient(135deg, #e5e7eb, #94a3b8);
    color: #111827;
}

.aichat-profile-pill__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
}

.aichat-profile-pill__balance {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f766e;
}

.dark .aichat-profile-pill__balance {
    color: #5eead4;
}

.aichat-discussion-feed {
    position: relative;
}

.aichat-discussion-feed::before {
    content: '';
    position: absolute;
    top: 2.75rem;
    bottom: 8rem;
    left: 0.9rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(209, 213, 219, 0.8), rgba(209, 213, 219, 0));
}

.dark .aichat-discussion-feed::before {
    background: linear-gradient(180deg, rgba(75, 85, 99, 0.9), rgba(75, 85, 99, 0));
}

.aichat-discussion-card {
    position: relative;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.aichat-discussion-card::before {
    content: '';
    position: absolute;
    left: -0.15rem;
    top: 1.35rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 9999px;
    background: #111827;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.dark .aichat-discussion-card::before {
    background: #e5e7eb;
    box-shadow: 0 0 0 4px rgba(31, 41, 55, 0.95);
}

.aichat-home-timeline {
    position: relative;
    flex: 0 0 auto;
    max-width: min(94vw, 74rem);
    min-height: 0;
    opacity: var(--aichat-home-timeline-opacity, 0.6);
    transform: none;
    overflow-anchor: auto;
    transition: opacity 300ms ease;
    will-change: opacity;
}

/* Hide the history for the whole bootstrap window so the very first hydrated
   paint cannot flash the not-yet-centered timeline. The settle then releases
   the shell and fades the history in through the reveal class below. */
.aichat-scroll-shell--bootstrap .aichat-home-timeline {
    opacity: 0;
    transition: none;
}

/* The first paint after bootstrap holds the freshly hydrated history at zero
   opacity so the landing scroll write cannot be seen as a jerk; dropping this
   class lets the base opacity transition fade it in to the resting value. */
.aichat-home-timeline--reveal {
    opacity: 0 !important;
    transition: none !important;
}

.aichat-home-timeline--reserved {
    min-height: var(--aichat-home-timeline-reserved-height, 0px);
    justify-content: flex-end;
}

.aichat-home-timeline__item {
    content-visibility: visible;
    animation: none;
    transform: none;
}

.aichat-scroll-shell {
    --aichat-home-composer-footprint: 9rem;
    --aichat-home-timeline-composer-gap: 40px;
    --aichat-home-timeline-landing-gap: 56px;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable both-edges;
    scroll-behavior: auto;
    transition: none;
}

.aichat-scroll-shell--landing {
    overflow-anchor: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    scrollbar-width: none;
}

/* Native scroll anchoring is required only while the home history is being
   paginated upward. Keeping it off during the bootstrap/landing settle avoids
   the browser re-anchoring the still-hydrating timeline and jerking the input. */
.aichat-scroll-shell--landing:not(.aichat-scroll-shell--bootstrap) {
    overflow-anchor: auto;
}

.aichat-scroll-shell--landing::-webkit-scrollbar {
    display: none;
}

.aichat-scroll-shell--composer-fixed .aichat-home-timeline:not(.aichat-home-timeline--empty) {
    margin-bottom: var(--aichat-home-timeline-composer-gap);
}

.aichat-scroll-shell--composer-fixed .aichat-home-timeline {
    opacity: 1;
}

.aichat-home-timeline--collapsed {
    max-height: none;
    overflow: visible;
    padding-bottom: var(--aichat-home-gap, 12px);
    filter: none;
    pointer-events: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 8px), rgba(0, 0, 0, 0.72) 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 8px), rgba(0, 0, 0, 0.72) 100%);
}

@media (max-width: 639px) {
    .aichat-home-timeline {
        max-width: min(94vw, 36rem);
    }
}

.aichat-home-timeline--collapsed .aichat-home-timeline__item {
    transform: translateY(0);
}

.aichat-home-timeline--collapsed .message-bubble,
.aichat-home-timeline--collapsed .aichat-timeline-divider__label {
    box-shadow: none;
}

.aichat-home-timeline--expanded {
    max-height: none;
    max-width: min(94vw, 74rem);
    overflow: visible;
    padding-bottom: var(--aichat-home-gap, 10px);
    opacity: 1;
    transform: none;
    filter: none;
}

.aichat-home-timeline--empty {
    padding-top: 0;
    padding-bottom: 0;
}

.aichat-home-composer-center-spacer {
    height: auto;
    flex: 1 0 var(--aichat-home-composer-spacer-height, 0px);
    overflow-anchor: none;
    transition: none;
}

.aichat-home-composer-center-spacer--no-transition {
    transition: none !important;
}

.aichat-home-timeline--initializing .aichat-home-timeline__item {
    animation: none !important;
    transform: none !important;
}

.aichat-home-composer-bottom-spacer {
    height: auto;
    flex: 1 0 0;
    overflow-anchor: none;
}

.aichat-home-composer-bottom-spacer--reserved {
    height: var(--aichat-home-composer-bottom-spacer-height, 0px);
    min-height: var(--aichat-home-composer-bottom-spacer-height, 0px);
    flex: 0 0 var(--aichat-home-composer-bottom-spacer-height, 0px);
}

.aichat-composer--no-motion {
    transition: none !important;
}

.aichat-timeline-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.35rem 0 0.15rem;
    color: #6b7280;
}

.aichat-timeline-divider::before,
.aichat-timeline-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(156, 163, 175, 0.5));
}

.aichat-timeline-divider::after {
    background: linear-gradient(90deg, rgba(156, 163, 175, 0.5), transparent);
}

.aichat-timeline-divider__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: min(72vw, 34rem);
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    background: #f9fafb;
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 640;
}

.dark .aichat-timeline-divider__label {
    background: #1f2937;
    color: #d1d5db;
}

.aichat-timeline-divider__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aichat-timeline-divider__date {
    flex: 0 0 auto;
    color: #9ca3af;
    font-weight: 540;
}

.aichat-dialog-titlebar {
    position: relative;
    z-index: 24;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.35rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.96);
}

.dark .aichat-dialog-titlebar {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(31, 41, 55, 0.96);
}

.aichat-dialog-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .aichat-dialog-title {
    color: #e5e7eb;
}

.aichat-dialog-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: 0 0 auto;
}

.aichat-dialog-actions--desktop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.aichat-dialog-titlebar:hover .aichat-dialog-actions--desktop,
.aichat-dialog-titlebar:focus-within .aichat-dialog-actions--desktop,
.aichat-timeline-divider:hover .aichat-dialog-actions--desktop,
.aichat-timeline-divider:focus-within .aichat-dialog-actions--desktop {
    opacity: 1;
    pointer-events: auto;
}

.aichat-dialog-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9999px;
    color: #6b7280;
}

.aichat-dialog-action:hover,
.aichat-dialog-action:focus-visible {
    color: #111827;
    background: #f3f4f6;
}

.aichat-dialog-action--delete:hover,
.aichat-dialog-action--delete:focus-visible,
.aichat-dialog-action--confirm {
    color: #dc2626;
    background: #fef2f2;
}

.dark .aichat-dialog-action {
    color: #9ca3af;
}

.dark .aichat-dialog-action:hover,
.dark .aichat-dialog-action:focus-visible {
    color: #ffffff;
    background: #374151;
}

.dark .aichat-dialog-action--delete:hover,
.dark .aichat-dialog-action--delete:focus-visible,
.dark .aichat-dialog-action--confirm {
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.35);
}

.aichat-dialog-overflow {
    position: relative;
    display: none;
    flex: 0 0 auto;
}

.aichat-dialog-overflow-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 95;
    min-width: 11.5rem;
    padding: 0.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.8rem;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.aichat-dialog-overflow-menu button {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 620;
    text-align: left;
}

.aichat-dialog-overflow-menu button:hover,
.aichat-dialog-overflow-menu button:focus-visible {
    background: #f3f4f6;
}

.aichat-dialog-overflow-menu .aichat-dialog-overflow-menu__delete {
    color: #dc2626;
}

.dark .aichat-dialog-overflow-menu {
    border-color: #4b5563;
    background: #1f2937;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}

.dark .aichat-dialog-overflow-menu button {
    color: #e5e7eb;
}

.dark .aichat-dialog-overflow-menu button:hover,
.dark .aichat-dialog-overflow-menu button:focus-visible {
    background: #374151;
}

.dark .aichat-dialog-overflow-menu .aichat-dialog-overflow-menu__delete {
    color: #fca5a5;
}

@media (max-width: 767px) {
    .aichat-dialog-actions--desktop {
        display: none;
    }

    .aichat-dialog-overflow {
        display: block;
    }

    .aichat-dialog-overflow > .aichat-dialog-action {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .aichat-header-action[data-tooltip]::after {
        display: none;
    }
}

@media (max-width: 639px) {
    .aichat-shell-header {
        gap: 0.25rem;
    }

    .aichat-shell-header .aichat-balance-pill {
        display: none;
    }

    .aichat-shell-header .aichat-profile-pill {
        gap: 0;
        padding: 0.2rem;
    }
}

@media (max-width: 359px) {
    .aichat-shell-header {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .aichat-brand {
        font-size: 0.9rem;
    }

    .aichat-header-actions {
        gap: 0;
    }
}

.aichat-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9999px;
    color: #4b5563;
    border: 1px solid transparent;
}

.aichat-icon-button:hover {
    color: #111827;
    background: #f3f4f6;
    border-color: #e5e7eb;
}

@media (max-width: 479px) {
    .aichat-shell-header .aichat-mobile-toolbar-overflow {
        display: none;
    }
}

.aichat-modal-overlay {
    backdrop-filter: blur(4px);
}

.aichat-modal-card {
    position: relative;
    box-shadow: 0 24px 72px rgba(15, 23, 42, 0.22);
    will-change: transform, opacity;
}

.dark .aichat-modal-card {
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.45);
}

.dark .aichat-icon-button {
    color: #d1d5db;
}

.dark .aichat-icon-button:hover {
    color: #ffffff;
    background: #374151;
    border-color: rgba(255,255,255,0.12);
}

.message-bubble {
    animation: slideIn 0.3s ease-out;
    max-width: 100%;
    min-width: 0;
}

/* A message that was already visible in the streaming bubble must not re-enter
   with the slideIn fade when it is finalized: that showed as the answer
   disappearing and fading back in right before the cost/provider footer. */
.message-bubble--no-anim {
    animation: none !important;
}

.message-bubble--user {
    max-width: min(82%, 44rem);
}

.message-bubble--assistant {
    width: 100%;
    max-width: 100%;
    background: transparent;
    box-shadow: none;
}

/* ICHAT-EMPTY-REPLY-MINIMAL-20261026: a failed turn answers with the single-word marker
   («Ошибка»), and the bubble is painted in the error tone so one word reads as a failure,
   not as a model answer. Defined after --assistant so the cascade wins over its
   transparent background (tailwind.css loads before this file). */
.message-bubble--error {
    width: auto !important;
    max-width: min(82%, 44rem);
    border: 1px solid rgba(252, 165, 165, 0.8);
    background: rgba(254, 242, 242, 0.65);
    color: #b91c1c;
}

.message-bubble--error .message-markdown,
.message-bubble--error .message-markdown p {
    color: #b91c1c;
}

.dark .message-bubble--error {
    border-color: rgba(185, 28, 28, 0.55);
    background: rgba(69, 10, 10, 0.35);
}

.dark .message-bubble--error .message-markdown,
.dark .message-bubble--error .message-markdown p {
    color: #fca5a5;
}

.chat-message-list {
    max-width: min(100%, 48rem);
    transition: max-width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aichat-home-timeline.chat-message-list {
    max-width: min(94vw, 74rem);
    transition: opacity 220ms ease;
}

@media (max-width: 639px) {
    .aichat-home-timeline.chat-message-list {
        max-width: min(94vw, 36rem);
    }
}

/* WNX-EVAL-SHARED-SCROLL-20261112: the chat scroller is a vertical viewport only.
   Tailwind's `overflow-y-auto` computes `overflow-x: auto` as well, so a single wide
   child (an unbroken URL, a wide table, a sticky tool card) turned the shared eval page
   into a two-axis scroller: an extra bar appeared under the list, and its thumb moved
   sideways instead of scrolling the conversation. Keep the horizontal axis out of the
   scroller and let the flex children shrink to the viewport instead of forcing the
   container's scrollWidth; inner tables keep their own scroll wrappers. */
#scroll-container {
    overflow-x: hidden;
    min-width: 0;
}

#scroll-container > *,
#scroll-container .chat-message-list,
#scroll-container .chat-message-list > * {
    min-width: 0;
}

.aichat-home-timeline .message-bubble {
    animation: none;
    transform: none;
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.aichat-home-timeline__loading-spacer {
    min-height: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.aichat-home-timeline__top-loader {
    position: sticky;
    top: 12px;
    z-index: 3;
    height: 0;
    margin-bottom: -1.25rem;
    overflow: visible;
    pointer-events: none;
}

.aichat-home-timeline__top-loader > span {
    transform: translateY(-0.5rem);
}

/* Base state: normal flow element. Fixed/pinned only via .aichat-input-area--bottom-fixed. */
#chat-input-area {
    position: relative;
    flex: 0 0 auto;
    bottom: auto;
    padding-bottom: 5px;
    z-index: 20;
    overflow-anchor: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 160ms ease,
        background-color 180ms ease,
        border-color 180ms ease;
}

/* The dock handoff runs as a FLIP animation; when motion is paused or the
   element is re-anchored the transform must settle instantly. */
#chat-input-area.aichat-composer--dock-no-motion {
    transition: background-color 180ms ease, border-color 180ms ease !important;
}

/* Reserve the hydrated landing controls from the first SSR paint. Equal flex
   spacers then keep this complete footprint centered as Alpine attaches. */
#chat-input-area.aichat-input-area--bootstrap-centered:not(.aichat-input-area--bottom-fixed) #chat-composer-shell {
    min-height: 9rem;
}

/* Home history stays in normal document flow. Native scrolling moves the composer
   from its centered landing position until CSS sticky owns the bottom dock. */
#chat-input-area.aichat-input-area--home-sticky {
    position: sticky;
    left: auto;
    right: auto;
    top: auto;
    bottom: calc(var(--aichat-composer-fixed-bottom, max(4px, env(safe-area-inset-bottom))) - var(--aichat-composer-bottom-tail, 0px));
    transform: none;
    padding-bottom: 0;
    z-index: 45;
}

/* SSR and Alpine bootstrap share one explicit landing target. This pin remains
   until page-zero DOM settles, then the same one-shot settle path releases it
   into the equivalent centered flex geometry. */
#chat-input-area.aichat-input-area--bootstrap-centered {
    position: fixed;
    left: var(--aichat-composer-fixed-left, max(1rem, env(safe-area-inset-left)));
    right: var(--aichat-composer-fixed-right, max(1rem, env(safe-area-inset-right)));
    top: calc(58px + ((100dvh - 58px) / 2));
    bottom: auto;
    margin-top: 0 !important;
    padding-bottom: 0;
    transform: translateY(calc(var(--aichat-home-composer-footprint, 9rem) / -2));
    z-index: 46;
}

#chat-input-area.aichat-input-area--bootstrap-centered:not(.aichat-input-area--bottom-fixed) {
    min-height: 9rem;
}

@media (max-width: 639px) {
    .aichat-scroll-shell {
        --aichat-home-composer-footprint: 19.5rem;
    }

    #chat-input-area.aichat-input-area--bootstrap-centered:not(.aichat-input-area--bottom-fixed),
    #chat-input-area.aichat-input-area--bootstrap-centered:not(.aichat-input-area--bottom-fixed) #chat-composer-shell {
        min-height: 19.5rem !important;
    }
}

/* Track mode: composer moves center→bottom via CSS transform driven by scroll progress.
   position remains relative (normal flow), no fixed/absolute/sticky. */
#chat-input-area.aichat-input-area--track {
    position: relative;
    bottom: auto;
    transform: translate3d(0, var(--aichat-home-composer-track-y, 0px), 0);
    transition: background-color 180ms ease, border-color 180ms ease;
    will-change: transform;
    z-index: 20;
}

.aichat-scroll-shell--landing #chat-input-area:not(.aichat-input-area--bottom-fixed) {
    margin-top: var(--aichat-home-timeline-landing-gap, 56px);
}

.aichat-scroll-shell--composer-fixed {
    padding-bottom: var(--aichat-input-bottom-padding, 8rem) !important;
}

#chat-input-area.aichat-input-area--bottom-fixed {
    position: fixed;
    left: var(--aichat-composer-fixed-left, max(1rem, env(safe-area-inset-left)));
    right: var(--aichat-composer-fixed-right, max(1rem, env(safe-area-inset-right)));
    top: auto;
    bottom: var(--aichat-composer-fixed-bottom, max(4px, env(safe-area-inset-bottom)));
    transform: none;
    margin-top: 0 !important;
    padding-bottom: 0;
    z-index: 45;
    background: transparent !important;
    border-color: transparent !important;
    overflow: visible;
    pointer-events: none;
}

#chat-input-area.aichat-input-area--bottom-fixed #chat-composer-shell {
    display: flex;
    flex-direction: column;
    max-width: min(100%, 48rem);
    margin-left: auto;
    margin-right: auto;
    pointer-events: auto;
}

.chat-input-container {
    border: 1px solid rgba(209, 213, 219, 0.72);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0);
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease;
}

#chat-input-area.aichat-input-area--home-sticky .chat-input-container,
#chat-input-area.aichat-input-area--bottom-fixed .chat-input-container,
#chat-input-area.aichat-input-area--home-sticky .chat-input-container:focus-within,
#chat-input-area.aichat-input-area--bottom-fixed .chat-input-container:focus-within {
    background: #f3f4f6 !important;
    border-color: rgba(209, 213, 219, 0.72) !important;
}

#chat-input-area.aichat-input-area--bottom-fixed .chat-input-container,
#chat-input-area.aichat-input-area--bottom-fixed .chat-input-container:focus-within {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

#chat-input-area.aichat-input-area--bottom-fixed .aichat-home-composer-bottom-spacer {
    display: none !important;
}

#chat-input-area.aichat-input-area--bottom-fixed .aichat-demo-examples {
    display: none !important;
}

.dark #chat-input-area.aichat-input-area--home-sticky .chat-input-container,
.dark #chat-input-area.aichat-input-area--bottom-fixed .chat-input-container,
.dark #chat-input-area.aichat-input-area--home-sticky .chat-input-container:focus-within,
.dark #chat-input-area.aichat-input-area--bottom-fixed .chat-input-container:focus-within {
    background: #212121 !important;
    border-color: rgba(75, 85, 99, 0.72) !important;
}

.dark #chat-input-area.aichat-input-area--bottom-fixed .chat-input-container,
.dark #chat-input-area.aichat-input-area--bottom-fixed .chat-input-container:focus-within {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

#chat-composer-shell {
    transition: opacity 180ms ease, filter 180ms ease;
}

.aichat-demo-examples {
    min-height: 2.75rem;
    margin-top: 0.75rem !important;
    margin-bottom: 0;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 1;
    transform: translateY(0);
    transform-origin: top center;
}

.aichat-demo-examples > button {
    opacity: 0.7;
    transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
    transform: translateY(0);
}

.aichat-demo-examples > button:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dark .aichat-demo-examples > button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.chat-message-list--wide {
    max-width: min(96vw, 88rem);
}

.message-bubble--wide {
    width: 100%;
    max-width: 100%;
}

.message-markdown {
    min-width: 0;
}

/* Send button rotation */
.send-btn svg { transform: rotate(90deg); }

/* Remove focus outline from input */
.chat-input:focus { outline: none !important; box-shadow: none !important; border-color: transparent !important; }
/* Hide scrollbar and arrows in textarea */
.chat-input {
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 24px;
    min-height: 24px;
    max-height: 192px;
    overflow-y: hidden;
    line-height: 24px;
    padding-top: 0;
    padding-bottom: 0;
}
.chat-input::-webkit-scrollbar { display: none; }
.chat-input::-webkit-inner-spin-button, .chat-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Hide scrollbar utility (for consciousness tabs on mobile) */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Mobile: raise input area 5px, safe-area bottom padding, and handle keyboard */
@media (max-width: 767px) {
    #chat-input-area {
        margin-bottom: -5px;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    #chat-input-area .chat-input {
        /* Ensure input stays visible when keyboard appears */
        position: relative;
        z-index: 1;
    }

    .aichat-scroll-shell--composer-fixed {
        padding-bottom: calc(var(--aichat-input-bottom-padding, 8rem) + env(safe-area-inset-bottom)) !important;
    }

    #chat-input-area.aichat-input-area--bottom-fixed {
        bottom: var(--aichat-composer-fixed-bottom, max(4px, env(safe-area-inset-bottom)));
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

/* ====================================================================
   PHONE MODAL LAYOUT (≤640px)
   Compact padding, safe-area, full-width modals
   ==================================================================== */
@media (max-width: 640px) {
    /* Consciousness tabs: whitespace-nowrap for horizontal scroll */
    .scrollbar-hide > button { white-space: nowrap; flex-shrink: 0; }

    /* Details sections: tighter padding on mobile */
    details .px-4 { padding-left: 0.75rem; padding-right: 0.75rem; }
    details summary.px-4 { padding-left: 0.75rem; padding-right: 0.75rem; }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes aichatTimelineItemIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .aichat-home-timeline__item {
        animation: none;
    }
}

/* AI Speaking Animation */
@keyframes aiSpeaking {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}
.ai-speaking {
    animation: aiSpeaking 1.5s ease-in-out infinite;
}

/* === Reasoning Stream Animation === */
@keyframes reasoningPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(168, 85, 247, 0); }
}
.reasoning-pulse {
    animation: reasoningPulse 2s ease-in-out infinite;
}

@keyframes reasoningSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.reasoning-spin {
    animation: reasoningSpin 3s linear infinite;
}

.reasoning-stream-block {
    animation: slideIn 0.3s ease-out;
    background: linear-gradient(135deg, rgba(168,85,247,0.03), rgba(139,92,246,0.06));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}
.dark .reasoning-stream-block {
    background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(139,92,246,0.12));
}

@keyframes reasoningDots {
    0%, 20% { opacity: 0; }
    40% { opacity: 1; }
    60% { opacity: 0; }
}
.reasoning-dots span {
    animation: reasoningDots 1.4s infinite;
    font-weight: bold;
}
.reasoning-dots span:nth-child(2) { animation-delay: 0.2s; }
.reasoning-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Minimal "thinking" loader shown at the answer slot before the first token.
   Deliberately quiet: three soft dots plus a short muted label, no card. */
.ichat-thinking {
    color: #6b7280;
}
.ichat-thinking__dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ichat-thinking__dots > span {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.3;
    animation: ichatThinkingDot 1.2s ease-in-out infinite;
}
.ichat-thinking__dots > span:nth-child(2) { animation-delay: 0.15s; }
.ichat-thinking__dots > span:nth-child(3) { animation-delay: 0.3s; }
.ichat-thinking__label {
    font-size: 13px;
    font-weight: 500;
}
@keyframes ichatThinkingDot {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-1px); }
}
.dark .ichat-thinking {
    color: #9ca3af;
}
@media (prefers-reduced-motion: reduce) {
    .ichat-thinking__dots > span {
        animation: none;
        opacity: 0.6;
    }
}

/* === Deep Research Live Status === */
@keyframes researchStepPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.research-step-active {
    animation: researchStepPulse 1.5s ease-in-out infinite;
}

/* Typing Dots Animation - Hypnotic Wave Effect */
@keyframes typingDotWave {
    0%, 60%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }
    30% {
        transform: translateY(-8px) scale(1.2);
        opacity: 1;
    }
}

@keyframes typingDotGlow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 2px currentColor);
    }
    50% {
        filter: brightness(1.4) drop-shadow(0 0 8px currentColor);
    }
}

.typing-dot {
    display: inline-block;
    font-size: 1.2rem;
    margin: 0 2px;
    color: #10b981; /* green-500 */
    animation: typingDotWave 1.4s ease-in-out infinite, typingDotGlow 2s ease-in-out infinite;
    transform-origin: center;
    transition: all 0.3s ease;
}

.dark .typing-dot {
    color: #34d399; /* green-400 */
}

.typing-dot:nth-child(1) {
    animation-delay: 0s, 0s;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s, 0.3s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s, 0.6s;
}

/* Enhanced Loading Avatar Pulse */
@keyframes loadingAvatarPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    25% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    }
    75% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
}

.animate-pulse:has(svg) {
    animation: loadingAvatarPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes loadingPlanAvatarPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.35); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
}

.loading-plan-avatar {
    animation: loadingPlanAvatarPulse 1.8s ease-in-out infinite;
}

@keyframes loadingPlanStepPulse {
    0%, 100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.18); }
    50% { transform: translateX(2px); box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); }
}

@keyframes loadingPlanDot {
    0%, 100% { transform: scale(0.9); opacity: 0.65; }
    50% { transform: scale(1.18); opacity: 1; }
}

.loading-plan-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: min(100%, 24rem);
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.16);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.05));
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.dark .loading-plan-card {
    border-color: rgba(167, 139, 250, 0.22);
    background: linear-gradient(135deg, rgba(91, 33, 182, 0.28), rgba(30, 41, 59, 0.72));
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35);
}

.loading-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.loading-plan-header__title {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.loading-plan-header__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7c3aed;
}

.dark .loading-plan-header__label {
    color: #c4b5fd;
}

.loading-plan-header__active {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2937;
}

.dark .loading-plan-header__active {
    color: #f5f3ff;
}

.loading-plan-header__eta {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6366f1;
}

.dark .loading-plan-header__eta {
    color: #c7d2fe;
}

.loading-plan-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.loading-plan-step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.85rem;
    transition: all 0.22s ease;
}

.loading-plan-step__marker {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-plan-step__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: currentColor;
}

.loading-plan-step__text {
    min-width: 0;
    font-size: 0.84rem;
    line-height: 1.35;
}

.loading-plan-step--active {
    color: #6d28d9;
    background: rgba(255, 255, 255, 0.72);
    transform: translateX(2px);
    animation: loadingPlanStepPulse 1.8s ease-in-out infinite;
}

.dark .loading-plan-step--active {
    color: #ddd6fe;
    background: rgba(91, 33, 182, 0.28);
}

.loading-plan-step--active .loading-plan-step__marker {
    background: rgba(139, 92, 246, 0.16);
}

.loading-plan-step--active .loading-plan-step__dot {
    animation: loadingPlanDot 1.2s ease-in-out infinite;
}

.loading-plan-step--done {
    color: #047857;
    background: rgba(16, 185, 129, 0.08);
}

.dark .loading-plan-step--done {
    color: #6ee7b7;
    background: rgba(6, 95, 70, 0.28);
}

.loading-plan-step--done .loading-plan-step__marker {
    background: rgba(16, 185, 129, 0.14);
}

.loading-plan-step--pending {
    color: #6b7280;
    background: rgba(148, 163, 184, 0.1);
}

.dark .loading-plan-step--pending {
    color: #9ca3af;
    background: rgba(51, 65, 85, 0.4);
}

.loading-plan-step--pending .loading-plan-step__marker {
    background: rgba(148, 163, 184, 0.14);
}

/* Model Selector Styles */
.model-selector {
    position: relative;
    min-width: 180px;
}
.model-selector select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.model-selector select:hover {
    background: rgba(0,0,0,0.05);
    border-radius: 0.75rem;
}
.dark .model-selector select:hover {
    background: rgba(255,255,255,0.1);
}
.model-selector select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    border-radius: 0.75rem;
}
.model-selector select option {
    padding: 0.75rem 1rem;
    background: white;
    color: #1f2937;
    border-radius: 0.5rem;
    margin: 2px 4px;
}
.model-selector select option:hover {
    background: #f3f4f6;
}
.dark .model-selector select option {
    background: #1f2937;
    color: #e5e7eb;
}
.dark .model-selector select option:hover {
    background: #374151;
}

/* Recording Animation */
@keyframes pulse-record {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.recording-pulse {
    animation: pulse-record 1s ease-in-out infinite;
}

/* Welcome screen fadeIn */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
    PREMIUM DESIGN SYSTEM (AiChat Pro)
   ========================================================================== */

/* 1. Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.dark .glass-panel {
    background: rgba(31, 41, 55, 0.7); /* gray-800 with opacity */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.glass-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    z-index: 40;
}

.dark .glass-header {
    background: rgba(17, 24, 39, 0.85);
    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

/* 2.1 GPTun Generation Inputs — works in both standalone pages and inline mode */
.AiChat-field {
    padding: 0.75rem 1rem;
    outline: none !important;
    box-shadow: none !important;
}

.AiChat-field:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Legacy selector for standalone pages */
.librechat-form-page .AiChat-field {
    padding: 0.75rem 1rem;
    outline: none;
}

.librechat-form-page .AiChat-field:focus {
    outline: none !important;
}

/* 2. Premium Inputs */
.input-premium {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(209, 213, 219, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .input-premium {
    background: rgba(31, 41, 55, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.8);
    color: #f3f4f6;
}

.input-premium:focus {
    background: #ffffff;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .input-premium:focus {
    background: #1f2937;
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 3. Gradient Text */
.text-gradient-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-purple {
    background: linear-gradient(135deg, #c026d3 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-blue {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark .text-gradient-primary {
    background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
}

.dark .text-gradient-blue {
    background: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
}

/* 4. Animated Background Helpers */
.bg-animated-gradient {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 5. Better Scrollbars (Refined) */
.scrollbar-premium::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-premium::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-premium::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s;
}

.scrollbar-premium::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.6);
}

.dark .scrollbar-premium::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

/* 6. Card Hover Effects */
.hover-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dark .hover-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Utility Animations */
@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.animate-pulse-subtle {
    animation: pulse-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* ==================== Enhanced Formatting Styles ==================== */

/* Prose enhancements for formatted output */
.prose h1, .prose h2, .prose h3 {
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.3;
}

.prose h2 {
    border-bottom: 1px solid rgba(156, 163, 175, 0.3);
    padding-bottom: 0.3em;
}

.prose blockquote {
    border-left: 4px solid #6366f1;
    background: rgba(99, 102, 241, 0.05);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

.dark .prose blockquote {
    background: rgba(99, 102, 241, 0.1);
    border-left-color: #818cf8;
}

.prose hr {
    border-color: rgba(156, 163, 175, 0.3);
    margin: 1.5rem 0;
}

/* Chart container — тот же левый край, что у таблиц (.chat-table: width: fit-content).
   `margin: 1rem auto` центрировал график, из-за чего график и таблица в одном ответе
   разъезжались (A/B eval 2026-10-11, ICHAT-T400-023). */
.chart-container {
    max-width: 600px;
    margin: 1rem 0;
}

/* Generated image container */
.generated-image-container {
    max-width: 512px;
}

.generated-image-container img {
    max-height: 512px;
    object-fit: contain;
}

/* Mermaid diagrams */
.mermaid {
    background: transparent !important;
    text-align: center;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(156, 163, 175, 0.2);
}

.dark .mermaid {
    background: rgba(17, 24, 39, 0.5) !important;
}

/* KaTeX formulas */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0;
}

/* Enhanced table styles */
.table-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
    border-radius: 0.5rem;
    border: 1px solid rgba(156, 163, 175, 0.3);
    background: rgba(255, 255, 255, 0.92);
}

.dark .table-scroll-wrapper {
    background: rgba(17, 24, 39, 0.88);
}

.table-export-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border-bottom: none;
}

.table-export-btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    color: #6366f1;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.table-export-btn:hover {
    background: rgba(99, 102, 241, 0.1);
}

.dark .table-export-btn {
    color: #a5b4fc;
}

.dark .table-export-btn:hover {
    background: rgba(99, 102, 241, 0.2);
}

/* GPTun media result cards */
.media-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}

.dark .media-action-btn {
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
    border-color: rgba(71, 85, 105, 0.9);
}

.media-action-btn:hover { border-color: rgba(59, 130, 246, 0.72); }
.media-action-btn--blue:hover { border-color: rgba(37, 99, 235, 0.78); }
.media-action-btn--emerald { background: #059669; color: #fff; border-color: #047857; }
.media-action-btn--emerald:hover { background: #047857; border-color: #065f46; }
.media-action-btn--amber { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.media-action-btn--rose:hover { border-color: rgba(225, 29, 72, 0.72); }
.media-action-btn--violet:hover { border-color: rgba(124, 58, 237, 0.72); }

.media-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.media-icon-btn:hover {
    border-color: rgba(37, 99, 235, 0.72);
    transform: translateY(-1px);
}

.media-icon-btn--amber {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.media-result-shell {
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(248, 250, 252, 0.92);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.dark .media-result-shell {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(71, 85, 105, 0.7);
}

.media-result-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.45rem;
}

.media-result-shell__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.dark .media-result-shell__title {
    color: #f8fafc;
}

.media-result-shell__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #64748b;
}

.media-result-shell__dot--amber { background: #d97706; }
.media-result-shell__dot--emerald { background: #059669; }
.media-result-shell__dot--rose { background: #e11d48; }
.media-result-shell__dot--violet { background: #7c3aed; }

.media-result-shell__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.media-result-shell__meta {
    padding: 0 1rem 0.75rem;
    color: #64748b;
    font-size: 0.75rem;
}

.dark .media-result-shell__meta {
    color: #94a3b8;
}

.media-result-shell--amber {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(255, 251, 235, 0.95);
}

.dark .media-result-shell--amber {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(120, 53, 15, 0.22);
}

.media-result-shell--emerald {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(236, 253, 245, 0.95);
}

.dark .media-result-shell--emerald {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(6, 78, 59, 0.22);
}

.media-result-shell--rose {
    border-color: rgba(244, 63, 94, 0.35);
    background: rgba(255, 241, 242, 0.95);
}

.dark .media-result-shell--rose {
    border-color: rgba(244, 63, 94, 0.45);
    background: rgba(136, 19, 55, 0.22);
}

.media-result-shell--violet {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(245, 243, 255, 0.95);
}

.dark .media-result-shell--violet {
    border-color: rgba(139, 92, 246, 0.45);
    background: rgba(76, 29, 149, 0.22);
}

.media-image-stage {
    position: relative;
}

.media-image-stage .image-card-result {
    cursor: zoom-in;
}

.media-image-overlay {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    display: flex;
    gap: 0.35rem;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.media-image-stage:hover .media-image-overlay,
.media-image-stage:focus-within .media-image-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.image-params-panel {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.9));
}

.dark .image-params-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.82));
}

.media-tier-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 0.45rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%);
    cursor: pointer;
}

.media-tier-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #334155;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.media-tier-range::-moz-range-thumb {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #334155;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

.media-resolution-chip {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(148, 163, 184, 0.4);
    color: #475569;
    cursor: pointer;
}

.media-resolution-chip--active {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.38);
    color: #1d4ed8;
}

.dark .media-resolution-chip {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(71, 85, 105, 0.85);
    color: #cbd5e1;
}

.dark .media-resolution-chip--active {
    background: rgba(59, 130, 246, 0.24);
    border-color: rgba(96, 165, 250, 0.55);
    color: #bfdbfe;
}

.media-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.24);
}

.media-card-warning {
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 0.75rem;
    background: rgba(255, 251, 235, 0.85);
    color: #92400e;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
}

.dark .media-card-warning {
    background: rgba(120, 53, 15, 0.18);
    color: #fcd34d;
}

.media-audio-player {
    display: block;
    min-width: min(100%, 16rem);
    min-height: 2.5rem;
}

/* ── Vocal split card ──────────────────────────────────── */
.vocal-track {
    border-radius: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(139,92,246,0.2);
}
.dark .vocal-track {
    background: rgba(0,0,0,0.25);
    border-color: rgba(139,92,246,0.3);
}
.vocal-track--empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.55;
    padding: 0.5rem 0.75rem;
}
.vocal-track__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.vocal-track__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.vocal-track__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5b21b6;
}
.dark .vocal-track__label {
    color: #c4b5fd;
}
.vocal-track__unavail {
    font-size: 0.75rem;
    color: #9ca3af;
}

.media-video-frame {
    width: 100%;
    aspect-ratio: var(--media-aspect-ratio, 16 / 9);
    min-height: 11rem;
    max-height: 26rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #020617;
}

.media-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-prompt-editor,
.media-input,
.media-select {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 0.625rem;
    background: rgba(255, 255, 255, 0.96);
    color: #111827;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.dark .image-prompt-editor,
.dark .media-input,
.dark .media-select {
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    border-color: rgba(71, 85, 105, 0.9);
}

.media-field-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: min(100%, 12rem);
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
}

.dark .media-field-label { color: #cbd5e1; }

.image-reference-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem;
}

.image-reference-thumb,
.image-history-item {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 0.625rem;
    overflow: hidden;
    background: rgba(248, 250, 252, 0.92);
}

.dark .image-reference-thumb,
.dark .image-history-item { background: rgba(15, 23, 42, 0.72); }

.image-reference-thumb img,
.image-history-item img,
.image-history-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.image-reference-thumb span,
.image-history-item span {
    display: block;
    padding: 0.25rem 0.375rem;
    color: #64748b;
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-history-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
    gap: 0.5rem;
}

.image-history-placeholder { background: linear-gradient(135deg, #e2e8f0, #f8fafc); }
.dark .image-history-placeholder { background: linear-gradient(135deg, #1e293b, #0f172a); }

.html-page-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 14rem;
    background: #eff6ff;
    overflow: hidden;
}

.html-page-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.html-page-thumb--fallback span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-weight: 800;
    letter-spacing: 0;
}

.dark .html-page-thumb { background: #0f172a; }
.dark .html-page-thumb--fallback span { background: rgba(96, 165, 250, 0.12); color: #93c5fd; }

.media-3d-viewer {
    position: relative;
    min-height: 20rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f3f0ff;
}

.dark .media-3d-viewer { background: #1e1b4b; }

.media-3d-viewer model-viewer {
    display: block;
    width: 100%;
    height: 20rem;
}

.media-3d-viewer model-viewer:not(:defined) { display: none; }

.media-3d-viewer model-viewer:defined + .model-viewer-fallback { display: none; }

.model-viewer-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 20rem;
    padding: 1rem;
    text-align: center;
    color: #5b21b6;
    background: rgba(245, 243, 255, 0.92);
}

.dark .model-viewer-fallback {
    color: #ddd6fe;
    background: rgba(46, 16, 101, 0.3);
}

.prose table {
    width: auto;
    min-width: 0;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 0.875rem;
    overflow: hidden;
    margin: 0;
}

.prose thead th {
    background: rgba(99, 102, 241, 0.08);
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
}

.dark .prose thead th {
    background: rgba(99, 102, 241, 0.15);
}

.prose tbody td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
    border-bottom: 1px solid rgba(156, 163, 175, 0.15);
}

.prose tbody tr:hover {
    background: rgba(99, 102, 241, 0.03);
}

.dark .prose tbody tr:hover {
    background: rgba(99, 102, 241, 0.08);
}

/* Code block enhancement */
.code-block-wrapper {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Lists enhancement */
.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.25rem;
}

/* Inline code */
.prose code:not([class]) {
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-weight: 500;
}

.dark .prose code:not([class]) {
    background: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
}

/* ====================================================================
   WATCH / SMARTWATCH LAYOUT (≤280px)
   OLED-optimized: pure black backgrounds, compact layout, voice-first
   ==================================================================== */
@media (max-width: 280px) {
    /* -- OLED Black Theme Override (saves battery on OLED) -- */
    body, body.dark,
    .bg-white, .dark\:bg-gray-800,
    .bg-gray-100, .dark\:bg-\[\#212121\] {
        background-color: #000000 !important;
    }
    .dark\:bg-gray-800, .bg-white {
        background-color: #000000 !important;
    }
    /* Cards / panels */
    .dark\:bg-gray-700, .bg-gray-50,
    .dark\:bg-\[\#212121\] {
        background-color: #111111 !important;
    }
    /* Borders dimmed */
    .border-gray-200, .dark\:border-white\/10,
    .border-gray-300, .dark\:border-gray-700,
    .dark\:border-gray-600 {
        border-color: #1a1a1a !important;
    }

    /* -- Hide sidebars completely -- */
    .md\:hidden { display: none !important; }

    /* -- Top toolbar: ultra-compact -- */
    .flex.items-center.justify-between.px-4.py-2 {
        padding: 2px 6px !important;
        gap: 2px !important;
        min-height: 24px !important;
        border-bottom: none !important;
        background: transparent !important;
    }
    /* Hide model selector details, keep only icon */
    .model-selector button span.text-sm { display: none !important; }
    .model-selector button svg.h-4 { display: none !important; }
    .model-selector button span[x-show="attachedAgent"] { display: none !important; }
    .model-selector { min-width: unset !important; }
    .model-selector button { padding: 2px 4px !important; gap: 2px !important; }
    /* Hide share button & settings */
    button[title="Поделиться"],
    button[title="Настройки"] { display: none !important; }

    /* -- Chat scroll area -- */
    #scroll-container {
        padding: 4px 12px 100px !important;
    }

    /* -- Messages: compact, no avatars -- */
    .message-bubble {
        padding: 5px 8px !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        border-radius: 10px !important;
        max-height: 80px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* User bubble: right-aligned feel */
    .message-bubble:has(+ .flex-shrink-0) {
        margin-left: 10% !important;
    }
    /* Avatar icons: hide on watch */
    .flex-shrink-0 .w-8.h-8,
    .flex-shrink-0 .w-10.h-10 {
        width: 16px !important;
        height: 16px !important;
        font-size: 8px !important;
    }
    /* Message row gap */
    .flex.gap-4, .flex.gap-3 {
        gap: 3px !important;
    }

    /* -- Greeting: compact -- */
    .text-2xl, .md\:text-3xl {
        font-size: 12px !important;
    }
    .mb-8 { margin-bottom: 8px !important; }

    /* -- Input area: compact, transparent, voice-first -- */
    #chat-input-area {
        padding: 3px 6px !important;
        padding-bottom: max(3px, env(safe-area-inset-bottom)) !important;
        background: transparent !important;
        border-top: none !important;
    }
    /* Input container */
    .chat-input-container {
        padding: 4px !important;
        gap: 3px !important;
        border-radius: 16px !important;
        background: #111111 !important;
    }
    /* Textarea */
    .chat-input {
        font-size: 11px !important;
        min-height: 20px !important;
        line-height: 20px !important;
    }
    /* Attach button: smaller */
    .chat-input-container .flex-shrink-0 button.w-8 {
        width: 24px !important;
        height: 24px !important;
    }
    .chat-input-container .flex-shrink-0 button.w-8 svg {
        width: 14px !important;
        height: 14px !important;
    }
    /* Voice button: hero size — primary input on watch */
    button[title="Голосовой ввод"],
    button[title="Остановить запись"] {
        width: 36px !important;
        height: 36px !important;
        background: #f85149 !important;
        color: #fff !important;
        box-shadow: 0 2px 12px rgba(248, 81, 73, 0.4) !important;
        order: -1; /* Move mic to the left */
    }
    button[title="Голосовой ввод"] svg,
    button[title="Остановить запись"] svg {
        width: 18px !important;
        height: 18px !important;
    }
    /* Send button: compact */
    .chat-input-container button.bg-black,
    .chat-input-container button.dark\:bg-white {
        width: 24px !important;
        height: 24px !important;
    }
    .chat-input-container button.bg-black svg,
    .chat-input-container button.dark\:bg-white svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* -- Attached files: smaller -- */
    .mb-3.flex.flex-wrap { gap: 3px !important; }
    .mb-3 .h-20 { height: 36px !important; width: 36px !important; }

    /* -- Voice mode settings: hide on watch -- */
    .bg-blue-50.dark\:bg-blue-900\/20.rounded-lg { display: none !important; }

    /* -- Agent preview: compact -- */
    .inline-flex.items-center.gap-3.px-4 {
        gap: 3px !important;
        padding: 4px 6px !important;
        font-size: 9px !important;
    }
    .inline-flex .w-10.h-10 { width: 20px !important; height: 20px !important; font-size: 12px !important; }

    /* -- Model dropdown: compact -- */
    .model-selector .absolute {
        width: 160px !important;
        max-height: 180px !important;
        font-size: 10px !important;
    }
    .model-selector .absolute .px-4.py-3 {
        padding: 4px 8px !important;
    }
    .model-selector .absolute .w-8.h-8 {
        width: 16px !important;
        height: 16px !important;
    }

    /* -- Hide premium indicator, reasoning panels on watch -- */
    .input-premium { display: none !important; }

    /* -- Scrollbar hide -- */
    #scroll-container::-webkit-scrollbar,
    .message-bubble::-webkit-scrollbar {
        display: none;
    }
    #scroll-container,
    .message-bubble {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* -- Ambient circular glow (decorative) -- */
    body::after {
        content: '';
        position: fixed;
        top: 2px; left: 2px; right: 2px; bottom: 2px;
        border-radius: 50%;
        border: 1px solid rgba(88, 166, 255, 0.06);
        pointer-events: none;
        z-index: 9998;
    }
}

/* ===== Watch: Round screen enhancements (GPTun) ===== */
body.watch-round-ichat {
    border-radius: 50%;
    overflow: hidden;
}
body.watch-round-ichat .flex.items-center.justify-between.px-4.py-2 {
    padding-top: 18px !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    justify-content: center !important;
}
body.watch-round-ichat #scroll-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
body.watch-round-ichat #chat-input-area {
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}
body.watch-round-ichat .message-bubble {
    max-height: 56px;
}

/* ===== Ultra-tiny watch (≤200px, GPTun) ===== */
@media (max-width: 200px) {
    /* Hide toolbar completely */
    .flex.items-center.justify-between.px-4.py-2 {
        display: none !important;
    }
    #scroll-container {
        padding: 2px 18px 80px !important;
    }
    .message-bubble {
        font-size: 8px !important;
        padding: 3px 5px !important;
        max-height: 48px;
    }
    .text-2xl { font-size: 10px !important; }
    /* Voice-only: hide textarea */
    .chat-input { display: none !important; }
    /* Hide attach + send, keep only mic */
    .chat-input-container .flex-shrink-0:not(:has(button[title="Голосовой ввод"]):not(:has(button[title="Остановить запись"]))) {
        display: none !important;
    }
    .chat-input-container {
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
    }
}

/* ========================= Source Link Tooltips ========================= */
.prose .source-link {
    text-decoration: none !important;
    border-bottom: 1.5px dotted rgba(59, 130, 246, 0.5);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.prose .source-link:hover {
    border-bottom-color: rgba(59, 130, 246, 0.9);
}
.dark .prose .source-link {
    border-bottom-color: rgba(96, 165, 250, 0.4);
}
.dark .prose .source-link:hover {
    border-bottom-color: rgba(96, 165, 250, 0.8);
}
.source-tooltip {
    background: #1f2937;
    color: #f3f4f6;
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 8px;
    max-width: 280px;
    word-break: break-word;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.source-tooltip.visible {
    opacity: 1;
}
.source-tooltip .source-tooltip-domain {
    font-weight: 600;
    color: #93c5fd;
}
.source-tooltip .source-tooltip-hint {
    color: #9ca3af;
    font-size: 10px;
    margin-top: 2px;
}
.source-tooltip .source-tooltip-arrow,
.source-tooltip .source-tooltip-arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
}
.source-tooltip .source-tooltip-arrow {
    visibility: hidden;
}
.source-tooltip .source-tooltip-arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
}
.source-tooltip[data-popper-placement^='top'] > .source-tooltip-arrow {
    bottom: -4px;
}
.source-tooltip[data-popper-placement^='bottom'] > .source-tooltip-arrow {
    top: -4px;
}
.source-tooltip[data-popper-placement^='left'] > .source-tooltip-arrow {
    right: -4px;
}
.source-tooltip[data-popper-placement^='right'] > .source-tooltip-arrow {
    left: -4px;
}

/* === Mobile Sidebar Improvements === */
/* Ensure sidebar is properly hidden/shown on mobile */
@media (max-width: 768px) {
    /* Sidebar container should be position fixed to overlay content */
    aside[x-cloak] {
        display: none !important;
    }

    /* The sidebar backdrop is owned by Alpine (`x-show="sidebarOpen && ..."`) and is rendered
       before the <aside>, so `aside:not(.open-sidebar) ~ .fixed` could never reach it —
       `.open-sidebar` is applied nowhere. That selector only hid unrelated `.fixed` siblings
       on mobile (the media lightbox, modals, toasts). Do not bring it back. */

    /* Mobile hamburger menu button - ensure visibility */
    .md\:hidden[class*="hamburger"],
    button[class*="md:hidden"] {
        z-index: 50;
        position: relative;
    }

    /* Sidebar should be accessible when opened */
    aside.translate-x-0 {
        display: block;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out;
    }

    /* Ensure sidebar scroll doesn't affect main scroll */
    aside .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Keep mobile logic class-driven: fixed only when composer is explicitly pinned. */
    #chat-input-area {
        max-width: 100%;
    }

    #chat-input-area.aichat-input-area--bottom-fixed {
        position: fixed;
        bottom: var(--aichat-composer-fixed-bottom, max(4px, env(safe-area-inset-bottom)));
        left: var(--aichat-composer-fixed-left, max(1rem, env(safe-area-inset-left)));
        right: var(--aichat-composer-fixed-right, max(1rem, env(safe-area-inset-right)));
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #scroll-container.aichat-scroll-shell--composer-fixed {
        padding-bottom: calc(var(--aichat-input-bottom-padding, 8rem) + env(safe-area-inset-bottom));
    }
}

/* ===== Pinned model marker (GPTun selector, 2026-10-25) ===== */
.aichat-pin-dot {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.aichat-pin-dot:hover {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}