/* === GLOBAL === */
:root {
    --bg-base:#030712;
    --bg-overlay:rgba(22,16,52,0.7);
    --glass-border:rgba(255,255,255,0.14);
    --accent:#9e7bff;
    --accent-soft:rgba(158,123,255,0.22);
    --danger:#ff5b7a;
    --warn:#ffd166;
    --success:#4ad9c2;
    --ios-glass:rgba(17,21,45,0.68);
    --ios-highlight:rgba(255,255,255,0.1);
}

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body {
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
    color:#f5f3ff;
    background:
        radial-gradient(circle at 15% 20%, rgba(158,123,255,0.35), transparent 55%),
        radial-gradient(circle at 85% 25%, rgba(74,217,194,0.18), transparent 60%),
        radial-gradient(circle at 40% 85%, rgba(255,148,194,0.16), transparent 60%),
        linear-gradient(160deg, #030712 0%, #080b1d 42%, #050019 100%);
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
    background-attachment:fixed;
}

body::before {
    content:"";
    position:fixed;
    inset:-20% -10% -10% -10%;
    background:
        radial-gradient(circle at 25% 25%, rgba(158,123,255,0.35), transparent 60%),
        radial-gradient(circle at 75% 18%, rgba(74,217,194,0.22), transparent 62%),
        radial-gradient(circle at 40% 80%, rgba(255,124,160,0.18), transparent 60%);
    opacity:0.65;
    pointer-events:none;
    z-index:0;
    filter:blur(6px);
}

body::after {
    content:"";
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M0 0h4v4H0zM40 20h4v4h-4zM120 60h4v4h-4zM80 110h4v4h-4zM20 140h4v4h-4z'/%3E%3C/g%3E%3C/svg%3E");
    opacity:0.45;
    mix-blend-mode:screen;
    pointer-events:none;
    z-index:0;
}

@keyframes message-pop {
    from {
        opacity:0;
        transform:translateY(16px) scale(0.98);
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1);
    }
}


.app-body {
    display:flex;
    position:relative;
    overflow:hidden;
    background:transparent;
}

.app-body::before {
    content:"";
    position:fixed;
    inset:-18% -10% 0 -10%;
    background:
        radial-gradient(circle at 16% 22%, rgba(111,170,255,0.24), transparent 58%),
        radial-gradient(circle at 82% 18%, rgba(255,168,220,0.18), transparent 62%),
        radial-gradient(circle at 54% 88%, rgba(92,232,208,0.18), transparent 55%),
        linear-gradient(185deg, rgba(6,10,26,0.88) 0%, rgba(14,18,42,0.92) 54%, rgba(8,6,28,0.94) 100%);
    pointer-events:none;
    opacity:0.72;
    z-index:0;
    filter:blur(6px) saturate(140%);
}

.app-body > * {
    position:relative;
    z-index:1;
}

.landing-body {
    background:
        radial-gradient(circle at 15% 20%, rgba(123,74,255,0.55), transparent 60%),
        radial-gradient(circle at 85% 10%, rgba(24,180,255,0.35), transparent 60%),
        linear-gradient(180deg, #050212 0%, #12072d 55%, #050010 100%);
    color:#fdf9ff;
}

.no-scroll {
    overflow:hidden;
}

body.mobile-command-open {
    overflow:hidden;
}

body.gallery-open,
body.lightbox-open {
    overflow:hidden;
}

/* === APP LAYOUT === */
.app {
    display:flex;
    width:100%;
    height:100vh;
}

.title-block {
    display:flex;
    flex-direction:column;
    gap:2px;
}

.conversation-title {
    margin:0;
    font-size:1.4rem;
    font-weight:700;
    line-height:1.25;
    color:#fefbff;
    max-width:100%;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

#modelPrice {
    font-size:0.75rem;
    color:rgba(255,255,255,0.65);
}

.model-select__wrap {
    min-width:180px;
    position:relative;
}

.topbar-middle .model-select__wrap {
    flex:1;
}

.topbar-middle .model-select {
    width:100%;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
}

/* === SIDEBAR === */
.sidebar {
    width:260px;
    background:var(--bg-overlay);
    background:color-mix(in srgb, var(--bg-overlay) 82%, rgba(12,14,32,0.92));
    backdrop-filter:blur(18px);
    border-right:1px solid rgba(255,255,255,0.05);
    padding:14px 10px;
    display:flex;
    flex-direction:column;
    gap:10px;
    position:relative;
    overflow:hidden;
}

.sidebar::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at 20% 15%, rgba(145,71,255,0.15), transparent 55%),
               radial-gradient(circle at 80% 85%, rgba(255,77,109,0.12), transparent 50%);
    opacity:0.38;
}

.sidebar-tools {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.convo-search {
    padding:8px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(17,10,33,0.65);
    color:#f5f3ff;
    backdrop-filter:blur(12px);
}

.convo-search::placeholder {
    color:rgba(245,243,255,0.55);
}

.usage-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:0.9rem;
    background:rgba(145,71,255,0.18);
    color:#f8edff;
    text-decoration:none;
    padding:8px 10px;
    border-radius:10px;
    transition:background .2s ease, transform .2s ease;
}

.usage-link:hover {
    background:rgba(145,71,255,0.3);
    transform:translateY(-1px);
}

.sidebar-pulse {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:10px 12px;
    border-radius:12px;
    background:linear-gradient(135deg, rgba(145,71,255,0.22), rgba(28,14,60,0.8));
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 12px 24px rgba(9,0,23,0.25);
    gap:4px;
}

.sidebar-pulse strong {
    font-size:1.2rem;
}

.sidebar-pulse small {
    font-size:0.75rem;
    color:rgba(255,255,255,0.65);
}

.sidebar-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    gap:10px;
}

.sidebar-header h3 {
    flex:1;
}

.sidebar-header button {
    background:#9147ff;
    width:34px;
    height:34px;
    border:none;
    border-radius:10px;
    color:white;
    font-size:20px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.sidebar-close {
    display:none;
    background:rgba(255,255,255,0.15);
    color:#fff;
    font-size:22px;
    width:34px;
    height:34px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    line-height:1;
}

.sidebar-backdrop {
    position:fixed;
    inset:0;
    background:rgba(9,0,23,0.55);
    backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease;
    z-index:150;
}

.sidebar-backdrop.visible {
    opacity:1;
    visibility:visible;
}

/* Conversations */
.convo-list {
    flex:1;
    overflow-y:auto;
    padding-right:6px;
}

.convo-item {
    padding:10px 12px;
    border-radius:14px;
    background:rgba(18,10,38,0.58);
    border:1px solid rgba(255,255,255,0.05);
    margin-bottom:6px;
    cursor:pointer;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:0;
    justify-content:flex-start;
    box-shadow:0 10px 20px rgba(6,0,20,0.24);
}

.convo-item:hover,
.convo-item.active {
    transform:translateY(-1px);
    border-color:rgba(145,71,255,0.38);
    box-shadow:0 16px 30px rgba(18,0,40,0.42);
}

.convo-item.archived {
    opacity:0.65;
}

.convo-item.archived .convo-title::after {
    content:"(archivée)";
    font-size:0.72rem;
    margin-left:6px;
    color:rgba(255,255,255,0.6);
}

.convo-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    position:relative;
    flex-wrap:wrap;
}

.convo-actions {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    justify-content:flex-end;
    align-content:flex-start;
    flex:0 0 auto;
}

.convo-actions button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:9px;
    background:rgba(255,255,255,0.08);
    border:1px solid transparent;
    font-size:0.9rem;
    line-height:1;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease, border-color .2s ease;
}

.convo-actions button:hover,
.convo-actions button:focus-visible {
    background:rgba(145,71,255,0.28);
    border-color:rgba(145,71,255,0.35);
    transform:translateY(-1px);
    outline:none;
}

.convo-title {
    flex:1 1 220px;
    min-width:0;
    font-weight:660;
    font-size:0.95rem;
    line-height:1.25;
    overflow:hidden;
    white-space:normal;
    word-break:break-word;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    max-height:2.6em;
    color:#fdfbff;
}

.convo-meta {
    display:flex;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
    font-size:0.68rem;
    color:rgba(255,255,255,0.6);
    margin-top:1px;
}

.convo-meta span {
    display:flex;
    align-items:center;
    gap:4px;
}

.convo-preview {
    font-size:0.75rem;
    color:rgba(255,255,255,0.68);
    line-height:1.35;
    min-height:1.8em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.convo-preview[data-empty="1"] {
    color:rgba(255,255,255,0.48);
    font-style:italic;
}

@media (max-width: 1180px) {
    .convo-actions {
        justify-content:flex-start;
    }
    .convo-title {
        flex-basis:100%;
    }
}

@media (max-width: 640px) {
    .convo-actions {
        gap:4px;
    }
    .convo-item {
        padding:12px;
    }
}

.convo-share {
    background:rgba(88,196,255,0.18);
}

.convo-share:hover {
    background:rgba(88,196,255,0.28);
}

.convo-del {
    background:rgba(255,77,109,0.18);
}

.convo-del:hover {
    background:rgba(255,77,109,0.28);
}

.convo-archive.active {
    background:rgba(255,107,107,0.28);
}

.convo-empty {
    text-align:center;
    padding:18px 8px;
    font-size:0.9rem;
    color:rgba(255,255,255,0.6);
}

/* Logout */
.logout-btn {
    text-align:center;
    color:#f08cff;
    text-decoration:none;
    display:block;
    font-size:14px;
    margin-top:10px;
}


/* === CHAT ZONE === */
.chat-container {
    flex:1;
    display:flex;
    flex-direction:column;
    backdrop-filter:blur(28px) saturate(160%);
    background:linear-gradient(160deg, rgba(18,26,58,0.58), rgba(52,24,86,0.32));
    border:1px solid rgba(255,255,255,0.14);
    border-radius:26px;
    padding:16px 18px 14px;
    position:relative;
    overflow:hidden;
    box-shadow:0 28px 58px rgba(4,6,24,0.5);
}

.chat-container::before {
    content:"";
    position:absolute;
    inset:-12% -18% auto -18%;
    height:56%;
    background:
        radial-gradient(circle at 28% 38%, rgba(158,123,255,0.28), transparent 62%),
        radial-gradient(circle at 72% 18%, rgba(74,217,194,0.2), transparent 68%);
    opacity:0.6;
    pointer-events:none;
    filter:blur(8px);
}

.chat-container > * {
    position:relative;
    z-index:1;
}

/* Header */
.topbar {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    color:#fff;
    background:linear-gradient(145deg, rgba(12,16,34,0.58), rgba(26,14,54,0.44));
    border:1px solid rgba(255,255,255,0.12);
    border-radius:24px;
    box-shadow:0 28px 54px rgba(6,10,32,0.45);
}

.topbar-middle {
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:220px;
}

.menu-toggle {
    display:none;
}

.model-select {
    background:linear-gradient(135deg, rgba(19,15,52,0.88), rgba(58,32,102,0.78));
    color:#fefbff;
    border:1px solid rgba(158,123,255,0.42);
    padding:8px 12px;
    border-radius:14px;
    cursor:pointer;
    font-size:0.9rem;
    transition:background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    backdrop-filter:blur(18px);
    color-scheme: dark;
    box-shadow:0 12px 30px rgba(8,4,26,0.45);
}

.model-select:focus,
.model-select:focus-visible,
.model-select:hover {
    outline:none;
    background:linear-gradient(135deg, rgba(163,121,255,0.45), rgba(44,18,96,0.95));
    border-color:rgba(198,178,255,0.72);
    box-shadow:0 16px 34px rgba(18,8,48,0.48);
    transform:translateY(-1px);
}

.model-select option {
    color:#f6f1ff;
    background-color:#050919;
}

.model-select option[data-group-header] {
    color:rgba(203,191,255,0.92);
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    background:linear-gradient(130deg, rgba(120,88,255,0.3), rgba(18,14,48,0.92));
}

.topbar-actions {
    display:flex;
    align-items:center;
    gap:10px;
}

.pill-btn {
    border:none;
    background:rgba(255,255,255,0.12);
    color:#fdfbff;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    font-size:0.85rem;
    transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter:blur(10px);
}

.pill-btn.ghost {
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);
}

.pill-btn:hover,
.pill-btn:focus-visible {
    outline:none;
    background:linear-gradient(130deg, rgba(145,71,255,0.45), rgba(51,24,100,0.8));
    transform:translateY(-1px);
    box-shadow:0 12px 22px rgba(10,2,24,0.35);
}

.pill-btn.active {
    background:linear-gradient(135deg, rgba(74,217,194,0.45), rgba(33,143,126,0.9));
    box-shadow:0 14px 28px rgba(5,40,34,0.4);
}

.pill-btn[data-pref="auto"]:not(.active) {
    box-shadow:0 0 0 2px rgba(145,71,255,0.32);
    background:rgba(145,71,255,0.16);
}

.pill-btn.ghost.active {
    background:linear-gradient(135deg, rgba(145,71,255,0.38), rgba(51,24,100,0.78));
    box-shadow:0 14px 28px rgba(18,0,36,0.38);
}

.pill-btn.loading::after {
    content:"";
    margin-left:6px;
    border:2px solid rgba(255,255,255,0.6);
    border-top-color:transparent;
    border-radius:50%;
    width:14px;
    height:14px;
    display:inline-block;
    animation:spin 0.9s linear infinite;
}

.mini-admin {
    display:inline-flex;
    width:34px;
    height:34px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,0.12);
    text-decoration:none;
    font-size:18px;
    transition:background .2s ease, transform .2s ease;
}

.mini-admin:hover {
    background:rgba(255,255,255,0.25);
    transform:translateY(-1px);
}

.live-pill {
    padding:4px 10px;
    border-radius:999px;
    background:rgba(72,199,142,0.22);
    color:#9ff3c8;
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.live-pill.offline {
    background:rgba(255,77,109,0.22);
    color:#ff9fb2;
}

.mini-profile {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(145,71,255,0.55), rgba(51,24,100,0.85));
    text-decoration:none;
    color:#fff;
    font-size:1rem;
    transition:transform .2s ease, box-shadow .2s ease;
}

.mini-profile:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,0.35);
}

/* Messages box */
.chat-box {
    flex:1;
    overflow-y:auto;
    padding:10px 16px 4px;
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
}

.conversation-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:6px 4px 10px;
    flex-wrap:wrap;
}

.filter-chips {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.chip {
    border:none;
    background:rgba(255,255,255,0.08);
    color:#fefbff;
    border-radius:999px;
    padding:6px 14px;
    font-size:0.8rem;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}

.chip:hover,
.chip:focus-visible {
    background:rgba(145,71,255,0.45);
    outline:none;
    transform:translateY(-1px);
}

.chip.active {
    background:linear-gradient(135deg, rgba(145,71,255,0.6), rgba(58,24,108,0.9));
    box-shadow:0 12px 24px rgba(18,0,36,0.35);
}

.toolbar-actions {
    display:flex;
    gap:10px;
    align-items:center;
    color:rgba(255,255,255,0.65);
    font-size:0.8rem;
}

.history-summary {
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(18,6,40,0.6);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:6px 12px;
    box-shadow:0 12px 24px rgba(10,0,32,0.28);
    font-size:0.75rem;
    color:rgba(255,255,255,0.7);
}

.history-summary strong {
    font-size:0.85rem;
    color:#fff;
}

.history-summary span {
    opacity:0.8;
}

#typingGauge {
    font-variant-numeric:tabular-nums;
}

.prompt-ideas {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:4px 0 12px;
}

.prompt-ideas[hidden] {
    display:none !important;
}

.model-info {
    background:rgba(20,8,44,0.85);
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.12);
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 20px 40px rgba(6,0,18,0.35);
    max-width:320px;
}

.model-info h3 {
    margin-bottom:8px;
    font-size:1rem;
}

.model-eco {
    font-size:0.82rem;
    color:rgba(178,255,219,0.85);
    background:rgba(42,167,145,0.18);
    border:1px solid rgba(42,167,145,0.35);
    border-radius:12px;
    padding:8px 10px;
    margin-bottom:10px;
}

.model-info ul,
.model-breakdown {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:0 0 10px;
    padding:0;
    font-size:0.85rem;
    color:rgba(255,255,255,0.75);
}

.model-breakdown li {
    position:relative;
    padding-left:16px;
}

.model-breakdown li::before {
    content:"•";
    position:absolute;
    left:4px;
    color:var(--accent);
}

.model-tip {
    font-size:0.8rem;
    color:rgba(255,255,255,0.7);
    margin-bottom:12px;
}

.rewrite-panel {
    background:rgba(16,6,38,0.92);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:18px;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    width:min(420px, 92vw);
    max-height:80vh;
    position:fixed;
    right:24px;
    bottom:120px;
    z-index:250;
    box-shadow:0 28px 54px rgba(8,0,20,0.55);
    backdrop-filter:blur(14px);
}

.rewrite-panel[hidden] {
    display:none !important;
}

.gallery-panel {
    position:fixed;
    top:96px;
    right:24px;
    width:min(520px, 92vw);
    max-height:80vh;
    overflow-y:auto;
    background:rgba(16,6,38,0.92);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:18px;
    padding:18px;
    box-shadow:0 28px 54px rgba(8,0,20,0.55);
    backdrop-filter:blur(14px);
    z-index:230;
    scrollbar-gutter:stable;
}

.gallery-panel[hidden] {
    display:none !important;
}

.gallery-panel__header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.gallery-panel__actions {
    display:flex;
    gap:8px;
}

.gallery-panel__hint {
    font-size:0.8rem;
    color:rgba(255,255,255,0.72);
    margin-bottom:14px;
}

.gallery-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:12px;
    max-width:960px;
    margin:0 auto;
    padding-bottom:24px;
}

.gallery-card {
    display:flex;
    flex-direction:column;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.05);
    box-shadow:0 18px 28px rgba(0,0,0,0.35);
}

.gallery-card__figure {
    margin:0;
    display:flex;
    flex-direction:column;
}

.gallery-card__thumb {
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
}

.gallery-card__thumb img {
    width:100%;
    height:140px;
    object-fit:cover;
    display:block;
}

.gallery-card__video {
    width:100%;
    border-radius:12px;
    display:block;
    background:var(--surface-muted, #111);
    height:150px;
    max-height:150px;
    object-fit:cover;
}

.gallery-card__thumb:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.gallery-card__caption {
    font-size:0.8rem;
    color:rgba(255,255,255,0.78);
    padding:6px 10px;
    background:rgba(0,0,0,0.32);
}

.gallery-card__meta {
    font-size:0.75rem;
    color:rgba(255,255,255,0.65);
    padding:0 10px 10px;
}

.gallery-empty,
.gallery-loading,
.gallery-error {
    font-size:0.85rem;
    color:rgba(255,255,255,0.72);
    text-align:center;
    padding:20px;
    border:1px dashed rgba(255,255,255,0.2);
    border-radius:12px;
}

.gallery-end {
    text-align:center;
    font-size:0.78rem;
    color:rgba(255,255,255,0.5);
    margin-top:6px;
    padding-bottom:12px;
}

.media-lightbox {
    position:fixed;
    inset:0;
    background:rgba(3,7,18,0.85);
    backdrop-filter:blur(10px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:240;
}

.media-lightbox[hidden] {
    display:none !important;
}

.media-lightbox__figure {
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    max-width:92vw;
    max-height:85vh;
}

.media-lightbox__figure img {
    max-width:100%;
    max-height:70vh;
    border-radius:18px;
    box-shadow:0 28px 64px rgba(0,0,0,0.55);
}

.media-lightbox__caption {
    font-size:0.9rem;
    color:rgba(255,255,255,0.88);
    text-align:center;
}

.media-lightbox__close {
    position:absolute;
    top:24px;
    right:28px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,0.45);
    color:#fff;
    font-size:1.4rem;
    cursor:pointer;
}

.media-lightbox__close:hover {
    background:rgba(0,0,0,0.6);
}

.media-lightbox__close:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}
.rewrite-panel header h2 {
    margin:0;
    font-size:1.1rem;
}

.rewrite-panel header p {
    margin:4px 0 0;
    font-size:0.85rem;
    color:rgba(255,255,255,0.65);
}

.rewrite-panel textarea {
    width:100%;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    color:#fff;
    border-radius:12px;
    padding:12px;
    resize:vertical;
    min-height:120px;
}

.rewrite-actions {
    display:flex;
    gap:10px;
}

.rewrite-result {
    background:rgba(0,0,0,0.25);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.1);
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.rewrite-result header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.rewrite-stats {
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:0.78rem;
    color:rgba(255,255,255,0.7);
}

.rewrite-stats strong {
    color:#fefbff;
    font-size:0.82rem;
}

.rewrite-stats .delta-positive {
    color:rgba(148,201,255,0.9);
}

.rewrite-stats .delta-negative {
    color:rgba(173,255,204,0.85);
}

.rewrite-result pre {
    white-space:pre-wrap;
    font-family:"SFMono-Regular", Menlo, monospace;
    font-size:0.9rem;
    color:#f5f3ff;
    max-height:220px;
    overflow:auto;
}
.insights-panel {
    position:fixed;
    top:96px;
    right:24px;
    width:min(420px, 92vw);
    max-height:80vh;
    background:rgba(15,6,38,0.92);
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.12);
    padding:18px;
    box-shadow:0 28px 54px rgba(6,0,18,0.55);
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow:hidden;
    z-index:240;
    backdrop-filter:blur(14px);
}

.insights-panel[hidden] {
    display:none !important;
}

.insights-panel header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.insights-title h3 {
    margin:0;
    font-size:1.05rem;
}

.insights-title small {
    color:rgba(255,255,255,0.6);
    font-size:0.75rem;
}

.insights-metrics {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.insight-card {
    background:rgba(30,14,58,0.85);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:0.75rem;
    color:rgba(255,255,255,0.65);
}

.insight-card strong {
    font-size:1.1rem;
    color:#fff;
}

.insight-section h4 {
    font-size:0.85rem;
    margin-bottom:6px;
    color:rgba(255,255,255,0.8);
}

.insight-table {
    width:100%;
    border-collapse:collapse;
    font-size:0.78rem;
    color:rgba(255,255,255,0.75);
}

.insight-table th,
.insight-table td {
    text-align:left;
    padding:6px 8px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

.insight-table tbody tr:last-child td {
    border-bottom:none;
}

.insight-table .empty {
    text-align:center;
    color:rgba(255,255,255,0.5);
}

.insight-messages {
    list-style:none;
    margin:0;
    padding:0;
    max-height:160px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.insight-messages li {
    background:rgba(32,14,60,0.65);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:8px 10px;
    font-size:0.75rem;
    color:rgba(255,255,255,0.75);
}

.insight-messages li strong {
    display:block;
    font-size:0.7rem;
    color:rgba(255,255,255,0.55);
    margin-bottom:4px;
}

.insight-messages .empty {
    text-align:center;
    background:rgba(255,255,255,0.05);
}

.modal {
    position:fixed;
    inset:0;
    background:rgba(5,0,12,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:280;
    backdrop-filter:blur(8px);
}

.modal[hidden] {
    display:none !important;
}

.modal-card {
    background:rgba(18,8,42,0.95);
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.12);
    padding:20px;
    width:min(420px, 90vw);
    box-shadow:0 24px 48px rgba(6,0,18,0.55);
    display:flex;
    flex-direction:column;
    gap:12px;
}

.modal-card h2 {
    margin:0;
    font-size:1.1rem;
}

.modal-hint {
    font-size:0.8rem;
    color:rgba(255,255,255,0.65);
}

#renameInput {
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.08);
    color:#fff;
}

.modal-actions {
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.focus-overlay {
    position:fixed;
    inset:0;
    background:rgba(4,0,10,0.72);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:275;
    backdrop-filter:blur(12px);
}

.focus-overlay[hidden] {
    display:none !important;
}

.focus-card {
    background:rgba(18,6,44,0.95);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:22px;
    padding:24px;
    width:min(460px, 92vw);
    display:flex;
    flex-direction:column;
    gap:16px;
    box-shadow:0 32px 64px rgba(6,0,18,0.6);
    text-align:center;
}

.focus-card h2 {
    margin:0;
}

.focus-timer {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
}

#focusTimer {
    font-size:2.6rem;
    font-variant-numeric:tabular-nums;
}

.focus-controls {
    display:flex;
    gap:10px;
}

.focus-durations {
    display:flex;
    gap:10px;
    justify-content:center;
}

.focus-eco {
    font-size:0.85rem;
    color:rgba(178,255,219,0.9);
    background:rgba(33,143,126,0.18);
    border:1px solid rgba(33,143,126,0.35);
    border-radius:12px;
    padding:8px 10px;
}

.focus-benefits {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:0.85rem;
    color:rgba(255,255,255,0.72);
}

.focus-benefits li {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:8px 10px;
}

.focus-duration {
    border:none;
    border-radius:999px;
    padding:6px 14px;
    background:rgba(255,255,255,0.08);
    color:#fff;
    cursor:pointer;
    font-size:0.8rem;
    transition:background .2s ease;
}

.focus-duration.active,
.focus-duration:hover {
    background:rgba(145,71,255,0.4);
}

.mobile-bottom-bar {
    position:fixed;
    bottom:calc(18px + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:12px 18px;
    width:auto;
    background:rgba(12,16,40,0.78);
    border:1px solid var(--glass-border);
    border-radius:26px;
    box-shadow:0 24px 46px rgba(3,6,20,0.55);
    z-index:260;
    backdrop-filter:blur(24px) saturate(140%);
}

.mobile-bottom-bar button {
    background:rgba(255,255,255,0.06);
    border:1px solid transparent;
    color:#fff;
    font-size:1.1rem;
    cursor:pointer;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
    border-radius:18px;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mobile-bottom-bar button.active {
    background:rgba(158,123,255,0.28);
    border-color:rgba(158,123,255,0.45);
    box-shadow:0 12px 18px rgba(158,123,255,0.35);
}

.mobile-bottom-bar button:active {
    transform:scale(0.92);
}

@media (min-width: 851px) {
    .mobile-bottom-bar {
        display:none;
    }
}

.idea-chip {
    border:none;
    background:rgba(255,255,255,0.08);
    color:#f5f3ff;
    padding:6px 10px;
    border-radius:999px;
    font-size:0.8rem;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease;
}

.idea-chip:hover {
    background:rgba(255,255,255,0.18);
    transform:translateY(-1px);
}

.msg {
    max-width:75%;
    display:flex;
    flex-direction:column;
    position:relative;
    animation:message-pop .35s ease;
}

.msg.user { align-self:flex-end; }
.msg.assistant { align-self:flex-start; }

.msg-bubble {
    padding:14px 16px;
    border-radius:16px;
    line-height:1.5;
    background:rgba(255,255,255,0.06);
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    backdrop-filter:blur(8px);
}

.msg-bubble.is-typing .msg-body {
    min-height:32px;
}

.typewriter-preview {
    display:flex;
    align-items:flex-end;
    gap:4px;
    color:#fdfbff;
    font-size:1rem;
    line-height:1.55;
    font-weight:500;
    white-space:pre-wrap;
    word-break:break-word;
}

.typewriter-text {
    white-space:pre-wrap;
}

.typewriter-caret {
    display:inline-block;
    width:6px;
    height:1.4em;
    margin-left:2px;
    border-radius:2px;
    background:rgba(255,255,255,0.82);
    animation:caret-blink 0.85s steps(1) infinite;
    align-self:flex-end;
}

@keyframes caret-blink {
    0%, 60% { opacity:0.9; }
    60%, 100% { opacity:0.15; }
}

@media (prefers-reduced-motion: reduce) {
    .typewriter-caret {
        animation:none;
        opacity:0.75;
    }
}

@media (prefers-reduced-motion: reduce) {
    .typing-loader__spark::after,
    .typing-loader__dot {
        animation:none;
    }
}

.typing-loader {
    display:flex;
    align-items:center;
    gap:12px;
}

.typing-loader__spark {
    position:relative;
    width:32px;
    height:32px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(126,89,255,0.25));
    overflow:hidden;
}

.typing-loader__spark::after {
    content:"";
    position:absolute;
    inset:-60%;
    background:conic-gradient(from 0deg, rgba(145,71,255,0.2), rgba(145,71,255,0.8), rgba(145,71,255,0.2));
    animation:typing-spin 1.6s linear infinite;
}

.typing-loader__meta {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.typing-loader__text {
    font-size:0.85rem;
    color:rgba(255,255,255,0.78);
    letter-spacing:0.02em;
}

.typing-loader__dots {
    display:flex;
    gap:6px;
}

.typing-loader__dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(255,255,255,0.6);
    animation:typing-dot 1.1s ease-in-out infinite;
}

.typing-loader__dot:nth-child(2) { animation-delay: 0.15s; }
.typing-loader__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-spin {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}

@keyframes typing-dot {
    0%, 100% { transform:translateY(0); opacity:0.4; }
    40% { transform:translateY(-4px); opacity:1; }
}

.msg.user .msg-bubble {
    background:linear-gradient(135deg,#5e39ce,#3d1b87);
}

.msg.assistant .msg-bubble {
    background:linear-gradient(160deg, rgba(18,10,36,0.92), rgba(46,16,73,0.85));
    border:1px solid rgba(145,71,255,0.12);
}

.msg-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.msg-role {
    font-size:0.82rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.78);
}

.msg-time {
    font-size:0.75rem;
    color:rgba(255,255,255,0.55);
}

.msg-latency {
    font-size:0.75rem;
    color:rgba(146,214,255,0.75);
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.msg-body {
    display:flex;
    flex-direction:column;
    gap:10px;
    font-size:0.95rem;
}

.msg-body--raw {
    color:#f5f3ff;
    white-space:pre-wrap;
}

.msg-empty {
    color:rgba(255,255,255,0.6);
    font-style:italic;
}

.msg-attachments {
    margin-top:12px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.msg-attachment {
    position:relative;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.04);
    box-shadow:0 18px 32px rgba(0,0,0,0.35);
}

.msg-attachment__btn {
    display:block;
    line-height:0;
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease;
}

.msg-attachment__btn:hover {
    transform:scale(1.02);
}

.msg-attachment__btn:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.msg-attachment__btn img {
    width:120px;
    height:120px;
    object-fit:cover;
    display:block;
}

.msg-attachment.msg-attachment--document {
    padding:12px 14px;
    min-width:220px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.msg-attachment--document__title {
    font-size:0.85rem;
    font-weight:600;
    color:#f7f6ff;
}

.msg-attachment--document__stats {
    font-size:0.75rem;
    color:rgba(255,255,255,0.65);
}

.msg-attachment--document__preview {
    font-size:0.78rem;
    color:rgba(255,255,255,0.7);
    white-space:pre-line;
    max-height:140px;
    overflow:auto;
    padding:10px;
    border-radius:10px;
    background:rgba(0,0,0,0.35);
}

.msg-attachment__caption {
    display:block;
    padding:6px 8px;
    font-size:0.75rem;
    color:rgba(255,255,255,0.7);
    text-align:center;
    background:rgba(0,0,0,0.35);
}

.msg-attachment.inline {
    display:inline-flex;
    flex-direction:column;
    margin:0 6px 6px 0;
}

.msg-attachment.inline .msg-attachment__btn img {
    width:96px;
    height:96px;
}

.msg-body p {
    margin:0;
    color:#f5f3ff;
}

.msg-body ul,
.msg-body ol {
    margin:0 0 0 18px;
    padding-left:18px;
    display:flex;
    flex-direction:column;
    gap:4px;
    color:#f5f3ff;
}

.msg-body li::marker {
    color:rgba(145,71,255,0.85);
}

.msg-body code {
    font-family:"Fira Code","SFMono-Regular",Consolas,monospace;
    background:rgba(0,0,0,0.35);
    padding:0 6px;
    border-radius:6px;
    font-size:0.88rem;
}

.msg-body pre {
    margin:0;
    padding:16px;
    background:rgba(0,0,0,0.7);
    border-radius:0 0 12px 12px;
    overflow:auto;
}

.msg-body pre code {
    display:block;
    white-space:pre;
    color:#d7e4ff;
    font-size:0.88rem;
}

.code-wrapper {
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
    margin:4px 0;
}

.code-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(120deg,rgba(145,71,255,0.35),rgba(51,24,100,0.8));
    padding:10px 14px;
    gap:12px;
}

.code-header__lang {
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.85);
}

.code-copy {
    border:none;
    border-radius:8px;
    background:rgba(255,255,255,0.16);
    color:#fff;
    padding:4px 10px;
    font-size:0.75rem;
    cursor:pointer;
    transition:background .2s ease, transform .15s ease;
}

.code-copy:hover {
    background:rgba(255,255,255,0.25);
    transform:translateY(-1px);
}

.msg-actions {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
}

.msg-actions button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:10px;
    background:rgba(255,255,255,0.12);
    color:#fff;
    padding:6px 12px;
    font-size:0.78rem;
    cursor:pointer;
    transition:transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.msg-actions button:hover,
.msg-actions button:focus-visible {
    transform:translateY(-1px);
    background:rgba(255,255,255,0.2);
    outline:none;
}

.msg-copy { min-width:72px; }

.msg-feedback {
    min-width:42px;
    padding:6px 10px;
}

.msg-feedback[data-feedback="down"] {
    background:rgba(255,255,255,0.1);
}

.msg-feedback.active {
    box-shadow:0 0 12px rgba(80,200,120,0.35);
    background:rgba(80,200,120,0.28);
}

.msg-feedback[data-feedback="down"].active {
    box-shadow:0 0 12px rgba(255,107,107,0.35);
    background:rgba(255,107,107,0.32);
}

.msg-reuse {
    min-width:42px;
    padding:6px 10px;
    background:rgba(88,196,255,0.16);
}

.msg-reuse:hover,
.msg-reuse:focus-visible {
    background:rgba(88,196,255,0.26);
}

.msg-gap { height:4px; }

.typing .typing-dots {
    font-style:italic;
    color:rgba(255,255,255,0.7);
}

/* Input */
.input-zone {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:2px;
    background:rgba(16,22,48,0.58);
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.12);
    padding:8px 12px;
    backdrop-filter:blur(24px) saturate(150%);
    box-shadow:0 22px 40px rgba(4,6,24,0.38);
}

.composer-tools {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.composer-action {
    border:none;
    background:rgba(255,255,255,0.08);
    color:#fdfbff;
    width:44px;
    height:44px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.15rem;
    cursor:pointer;
    transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter:blur(14px);
    position:relative;
}

.composer-action:hover,
.composer-action:focus-visible {
    outline:none;
    background:linear-gradient(130deg, rgba(145,71,255,0.45), rgba(51,24,100,0.82));
    transform:translateY(-1px);
    box-shadow:0 12px 22px rgba(10,2,24,0.35);
}

.composer-action:disabled,
.composer-action[aria-busy="true"] {
    opacity:0.6;
    cursor:not-allowed;
}

.composer-action.busy::after,
.composer-action[aria-busy="true"]::after {
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,0.6);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 0.9s linear infinite;
}

.composer-action--ghost {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.18);
}

.composer-action--ghost:hover,
.composer-action--ghost:focus-visible {
    background:linear-gradient(135deg, rgba(145,71,255,0.38), rgba(51,24,100,0.78));
    box-shadow:0 14px 28px rgba(18,0,36,0.38);
}

.composer-action[hidden] {
    display:none !important;
}

.document-preview {
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:20px;
    background:rgba(173,224,255,0.12);
    border-radius:20px;
    padding:18px 64px 18px 24px;
    border:1px solid rgba(173,224,255,0.28);
    margin-bottom:12px;
    backdrop-filter:blur(22px);
    box-shadow:0 20px 48px rgba(8,12,38,0.28);
}

.document-preview__icon {
    width:64px;
    height:64px;
    border-radius:18px;
    background:rgba(173,224,255,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    flex-shrink:0;
}

.document-preview__meta {
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:1rem;
    color:rgba(255,255,255,0.9);
    max-width:100%;
}

.document-preview__meta strong {
    font-weight:600;
    font-size:1.08rem;
    color:#f7fbff;
}

.document-preview__excerpt {
    font-size:0.95rem;
    color:rgba(255,255,255,0.75);
    max-width:100%;
    line-height:1.6;
    white-space:pre-line;
    word-break:break-word;
}

.document-preview__remove {
    position:absolute;
    top:16px;
    right:18px;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.38);
    background:rgba(6,14,28,0.55);
    color:#f2f6ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    cursor:pointer;
    transition:background 0.2s ease, transform 0.2s ease;
}

.document-preview__remove:hover,
.document-preview__remove:focus-visible {
    background:rgba(173,224,255,0.26);
    transform:scale(1.05);
}

.document-preview__remove:focus-visible {
    outline:2px solid rgba(173,224,255,0.5);
    outline-offset:2px;
}

.vision-preview {
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(255,255,255,0.06);
    border-radius:16px;
    padding:10px 16px;
    padding-right:56px;
    border:1px solid rgba(255,255,255,0.14);
}

.vision-preview img {
    width:64px;
    height:64px;
    object-fit:cover;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.25);
    box-shadow:0 12px 22px rgba(0,0,0,0.35);
}

.vision-preview__meta {
    color:rgba(255,255,255,0.86);
    font-size:0.92rem;
}

.vision-preview__remove {
    position:absolute;
    top:12px;
    right:14px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.32);
    background:rgba(8,12,38,0.58);
    color:#fdfbff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
    cursor:pointer;
    transition:background 0.2s ease, transform 0.2s ease;
}

.vision-preview__remove:hover,
.vision-preview__remove:focus-visible {
    background:rgba(173,224,255,0.28);
    transform:scale(1.05);
}

.vision-preview__remove:focus-visible {
    outline:2px solid rgba(173,224,255,0.45);
    outline-offset:2px;
}

.composer-hints {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:4px;
    color:rgba(255,255,255,0.72);
    font-size:0.78rem;
    background:rgba(8,12,28,0.52);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    padding:6px 10px;
    gap:10px;
}

.vision-hint {
    margin-left:auto;
    font-weight:500;
    color:rgba(173,224,255,0.8);
}

.key-hint {
    font-family:"Fira Code","SFMono-Regular",monospace;
    background:rgba(255,255,255,0.08);
    padding:4px 8px;
    border-radius:8px;
}

.model-alert {
    margin:14px 0 0;
    padding:10px 14px;
    border-radius:12px;
    background:rgba(255,77,109,0.22);
    border:1px solid rgba(255,77,109,0.35);
    color:#ffd8e1;
    font-size:0.85rem;
    backdrop-filter:blur(14px);
    animation:pulseFade 1.8s ease infinite;
}

body.privacy-shield {
    cursor:not-allowed;
}

body.privacy-shield .chat-box,
body.privacy-shield .conversation-toolbar,
body.privacy-shield .prompt-ideas,
body.privacy-shield .input-zone,
body.privacy-shield .composer-hints,
body.privacy-shield .model-info,
body.privacy-shield .insights-panel,
body.privacy-shield .rewrite-panel {
    filter:blur(14px) saturate(80%);
    pointer-events:none;
}

body.privacy-shield .chat-box::after {
    content:"Confidentialité activée";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    padding:12px 18px;
    border-radius:18px;
    background:rgba(12,16,34,0.85);
    border:1px solid rgba(255,255,255,0.2);
    color:#f5f3ff;
    font-size:0.9rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    box-shadow:0 24px 46px rgba(5,6,26,0.5);
    pointer-events:none;
}

/* Mobile command drawer */
.mobile-command {
    position:fixed;
    inset:0;
    padding:0 14px 14px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    background:rgba(4,6,20,0.45);
    backdrop-filter:blur(16px);
    transition:opacity .24s ease;
    z-index:2200;
}

.mobile-command.visible {
    opacity:1;
    pointer-events:auto;
}

.mobile-command__backdrop {
    position:absolute;
    inset:0;
}

.mobile-command__sheet {
    position:relative;
    width:100%;
    max-width:480px;
    background:linear-gradient(165deg, rgba(18,22,46,0.92), rgba(38,18,68,0.86));
    border:1px solid rgba(255,255,255,0.14);
    border-radius:24px;
    padding:20px 20px 26px;
    box-shadow:0 38px 70px rgba(3,4,16,0.6);
    transform:translateY(32px);
    transition:transform .24s ease;
    overflow-y:auto;
    max-height:80vh;
}

.mobile-command.visible .mobile-command__sheet {
    transform:translateY(0);
}

.mobile-command__header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.mobile-command__header h2 {
    margin:0;
    font-size:1.05rem;
    color:#f7f5ff;
}

.mobile-command__header p {
    margin:6px 0 0;
    color:rgba(255,255,255,0.68);
    font-size:0.82rem;
}

.mobile-command__section {
    margin-bottom:20px;
}

.mobile-command__section:last-of-type {
    margin-bottom:0;
}

.mobile-command__section h3 {
    margin:0 0 10px;
    font-size:0.82rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.7);
}

.mobile-command__grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.mobile-command__grid button {
    border:none;
    border-radius:16px;
    padding:12px 14px;
    font-size:0.95rem;
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,0.08);
    color:#fdfbff;
    text-align:left;
    cursor:pointer;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow:0 18px 34px rgba(6,10,32,0.45);
    backdrop-filter:blur(12px);
}

.mobile-command__grid button:hover,
.mobile-command__grid button:focus-visible {
    outline:none;
    transform:translateY(-2px);
    background:linear-gradient(135deg, rgba(145,71,255,0.45), rgba(51,24,100,0.85));
}

.mobile-command__status {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mobile-command__status li.section {
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 14px 10px;
    border-radius:14px;
    background:linear-gradient(130deg, rgba(125,86,255,0.22), rgba(14,18,52,0.86));
    border:1px solid rgba(156,126,255,0.34);
    box-shadow:0 14px 26px rgba(18,10,44,0.45);
}

.mobile-command__status .section-title {
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(205,193,255,0.9);
}

.mobile-command__status .section-tagline {
    font-size:0.7rem;
    color:rgba(196,236,255,0.75);
}

.mobile-command__status li:not(.section) {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px 14px;
    border-radius:16px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
}

.mobile-command__status li.online .name {
    color:#fdfcff;
}

.mobile-command__status li.offline {
    background:rgba(255,94,140,0.18);
    border-color:rgba(255,94,140,0.32);
    color:#ffdbe8;
}

.mobile-command__status li.active {
    box-shadow:0 16px 30px rgba(40,16,82,0.45);
    border-color:rgba(145,71,255,0.45);
}

.mobile-command__status .name {
    font-weight:600;
}

.mobile-command__status .status {
    font-size:0.78rem;
    color:rgba(255,255,255,0.68);
}

.mobile-command__status .price {
    font-size:0.78rem;
    color:rgba(173,224,255,0.82);
}

@keyframes pulseFade {
    0%, 100% { opacity:0.55; }
    50% { opacity:1; }
}

textarea {
    width:100%;
    background:transparent;
    border-radius:16px;
    border:none;
    padding:10px 14px;
    color:#f8f7ff;
    resize:none;
    min-height:46px;
    max-height:240px;
    box-shadow:none;
    font-size:0.95rem;
    line-height:1.45;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

textarea[disabled] {
    opacity:0.55;
    cursor:not-allowed;
    filter:saturate(60%);
}

textarea:focus {
    outline:none;
    border:none;
    box-shadow:none;
    background:rgba(20,26,62,0.42);
}

#sendBtn {
    background:linear-gradient(135deg, rgba(158,123,255,0.9), rgba(86,61,201,0.95));
    border:none;
    padding:0 16px;
    align-self:flex-end;
    border-radius:16px;
    color:white;
    font-weight:600;
    cursor:pointer;
    height:48px;
    width:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 18px 28px rgba(110,78,230,0.4);
    transition:transform .18s ease, box-shadow .18s ease;
}

#sendBtn:disabled {
    opacity:0.5;
    cursor:not-allowed;
    box-shadow:none;
}

#sendBtn:hover {
    transform:translateY(-2px);
    box-shadow:0 22px 34px rgba(110,78,230,0.45);
}

/* Footer */
.disclaimer {
    text-align:center;
    font-size:12px;
    color:#cfa6ff;
    margin-top:6px;
}

body.focus-mode .sidebar {
    display:none;
}

body.focus-mode .chat-container {
    margin:0 auto;
    max-width:960px;
}

body.focus-mode .conversation-toolbar {
    justify-content:flex-end;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 850px) {

    .app {
        position: relative;
        overflow: hidden;
    }

    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100%;
        z-index: 200;
        transition: left 0.3s ease-in-out;
        box-shadow: 6px 0 20px rgba(0,0,0,0.4);
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        background:rgba(8,12,30,0.65);
        border:1px solid rgba(255,255,255,0.08);
        border-radius:18px;
        padding:14px 12px;
        box-shadow:0 14px 28px rgba(3,4,18,0.35);
    }

    .title-block {
        width:100%;
    }

    .menu-toggle {
        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        background:rgba(255,255,255,0.1);
        border-radius:14px;
        font-size:1.2rem;
    }

    .topbar-middle,
    .topbar-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .topbar-middle {
        flex-direction:column;
        gap:10px;
    }

    .topbar-middle .pill-btn {
        display:none;
    }

    .topbar-middle .model-select__wrap {
        width:100%;
    }

    .topbar-actions {
        display:none;
    }

    .chat-container > .topbar-middle[data-mobile-anchor],
    .chat-container > .conversation-toolbar[data-mobile-anchor] {
        display:none;
    }

    .conversation-toolbar {
        align-items: flex-start;
    }

    .toolbar-actions {
        width:100%;
        justify-content:flex-start;
        gap:8px;
    }

    .history-summary,
    #typingGauge {
        display:none;
    }

    .filter-chips {
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
        gap:6px;
    }

    .filter-chips::-webkit-scrollbar {
        display:none;
    }

    body.mobile-command-open .mobile-command [data-mobile-slot="controls"] > .topbar-middle {
        display:flex;
        flex-direction:column;
        gap:12px;
        width:100%;
    }

    body.mobile-command-open .mobile-command [data-mobile-slot="toolbar"] > .conversation-toolbar {
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .insights-panel {
        top:80px;
        right:12px;
        left:12px;
        width:auto;
        max-height:60vh;
    }

    .topbar-middle .model-select__wrap {
        width:100%;
    }

    .topbar-actions {
        display:none;
    }

    .chat-container > .topbar-middle[data-mobile-anchor],
    .chat-container > .conversation-toolbar[data-mobile-anchor] {
        display:none;
    }

    .conversation-toolbar {
        align-items: flex-start;
    }

    .toolbar-actions {
        width:100%;
        justify-content:flex-start;
        gap:8px;
    }

    .history-summary,
    #typingGauge {
        display:none;
    }

    .filter-chips {
        width:100%;
        overflow-x:auto;
        padding-bottom:4px;
        gap:6px;
    }

    .filter-chips::-webkit-scrollbar {
        display:none;
    }

    body.mobile-command-open .mobile-command [data-mobile-slot="controls"] > .topbar-middle {
        display:flex;
        flex-direction:column;
        gap:12px;
        width:100%;
    }

    body.mobile-command-open .mobile-command [data-mobile-slot="toolbar"] > .conversation-toolbar {
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .insights-panel {
        top:80px;
        right:12px;
        left:12px;
        width:auto;
        max-height:60vh;
    }

    .rewrite-panel {
        left:50%;
        right:auto;
        transform:translateX(-50%);
        width:calc(100% - 24px);
        bottom:calc(120px + env(safe-area-inset-bottom));
    }

    .focus-card {
        width:calc(100% - 36px);
        padding:20px;
    }

    .mobile-bottom-bar {
        bottom:calc(16px + env(safe-area-inset-bottom));
        left:50%;
        transform:translateX(-50%);
        padding:12px 16px;
        gap:10px;
    }

    .sidebar.active {
        left: 0;
    }

    .sidebar-close {
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .menu-toggle {
        display: inline-block;
        margin-right: 10px;
        background: rgba(255,255,255,0.18);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 20px;
        cursor: pointer;
    }

    .chat-container {
        width:100%;
        padding:14px 12px 12px;
        border-radius:22px;
        margin:0;
    }

    .msg {
        max-width:90%;
    }

    .msg-bubble {
        padding:12px 14px;
    }

    .msg-body {
        font-size:0.92rem;
    }

    textarea {
        font-size:14px;
    }

    #sendBtn {
        padding:10px 14px;
    }

    .topbar h1 {
        font-size:22px;
    }
}

/* === USER DASHBOARD === */
.user-body {
    min-height:100vh;
    margin:0;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
    color:#f5f3ff;
    background:
        radial-gradient(circle at 18% 20%, rgba(158,123,255,0.32), transparent 60%),
        radial-gradient(circle at 78% 22%, rgba(74,217,194,0.18), transparent 62%),
        linear-gradient(160deg, #030712 0%, #060a1b 45%, #050019 100%);
    position:relative;
    overflow-x:hidden;
}

.user-background {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 12% 78%, rgba(255,127,187,0.16), transparent 58%),
        radial-gradient(circle at 82% 18%, rgba(120,157,255,0.22), transparent 60%);
    filter:blur(12px);
    opacity:0.75;
    pointer-events:none;
}

.user-wrapper {
    position:relative;
    max-width:1120px;
    margin:0 auto;
    padding:48px 24px 72px;
    display:flex;
    flex-direction:column;
    gap:28px;
}

.user-topbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:rgba(12,16,44,0.7);
    border:1px solid var(--glass-border);
    border-radius:22px;
    padding:18px 24px;
    box-shadow:0 20px 42px rgba(3,4,20,0.45);
    backdrop-filter:blur(24px);
}

.back-link,
.logout-chip {
    color:#f5f3ff;
    text-decoration:none;
    font-weight:600;
    background:rgba(255,255,255,0.08);
    padding:9px 16px;
    border-radius:14px;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 10px 22px rgba(0,0,0,0.25);
}

.back-link:hover,
.logout-chip:hover {
    transform:translateY(-2px);
    box-shadow:0 14px 28px rgba(0,0,0,0.3);
}

.user-identity {
    display:flex;
    flex-direction:column;
    gap:4px;
    text-align:center;
}

.user-identity small {
    color:rgba(255,255,255,0.6);
}

.user-nav {
    display:flex;
    gap:10px;
    align-items:center;
    background:rgba(12,16,44,0.6);
    border:1px solid var(--glass-border);
    border-radius:999px;
    padding:6px;
    box-shadow:0 14px 28px rgba(3,4,18,0.35);
    backdrop-filter:blur(18px);
}

.user-tab {
    flex:1;
    border:none;
    background:transparent;
    color:rgba(255,255,255,0.72);
    font-weight:600;
    border-radius:16px;
    padding:10px 18px;
    cursor:pointer;
    transition:background .2s ease, box-shadow .2s ease, color .2s ease;
}

.user-tab:hover {
    background:rgba(255,255,255,0.08);
}

.user-tab.active {
    background:var(--accent-soft);
    color:#fff;
    box-shadow:0 14px 26px rgba(158,123,255,0.35);
}

.user-main {
    display:flex;
    flex-direction:column;
    gap:32px;
}

.user-section {
    display:none;
    flex-direction:column;
    gap:28px;
    animation:fadeSlide .35s ease;
}

.user-section.active {
    display:flex;
}

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


.user-hero {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:28px;
    border-radius:26px;
    background:linear-gradient(145deg, rgba(12,18,50,0.82), rgba(20,10,52,0.6));
    border:1px solid var(--glass-border);
    box-shadow:0 22px 44px rgba(3,4,18,0.46);
}

.user-hero__text {
    flex:1;
    min-width:240px;
}

.user-hero__text h1 {
    margin-bottom:10px;
    font-size:1.9rem;
}

.hero-tags {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.tag {
    background:rgba(255,255,255,0.08);
    border-radius:999px;
    padding:4px 12px;
    font-size:0.8rem;
    letter-spacing:0.02em;
}

.user-hero__widgets {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.spark-card {
    background:rgba(10,14,38,0.7);
    border-radius:18px;
    padding:18px 22px;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 16px 32px rgba(3,4,18,0.42);
}

.spark-card strong {
    font-size:1.9rem;
}

.stats-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:18px;
}

.stats-status {
    display:flex;
    align-items:center;
    gap:12px;
    margin:6px 0 12px;
    padding:12px 16px;
    background:rgba(12,16,44,0.62);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    box-shadow:0 16px 32px rgba(3,4,18,0.32);
    color:rgba(255,255,255,0.78);
    font-size:0.9rem;
    backdrop-filter:blur(18px);
}

.stats-status[hidden] {
    display:none;
}

.stats-status .status-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(158,123,255,0.18);
    flex-shrink:0;
}

.stats-status[data-tone="warn"] .status-dot {
    background:var(--warn);
    box-shadow:0 0 0 4px rgba(255,209,102,0.2);
}

.stats-status[data-tone="warn"] {
    color:rgba(255,221,166,0.92);
    border-color:rgba(255,209,102,0.28);
    background:rgba(44,28,12,0.7);
}

.stats-status[data-tone="success"] .status-dot {
    background:var(--success);
    box-shadow:0 0 0 4px rgba(74,217,194,0.2);
}

.stats-status[data-tone="success"] {
    color:rgba(192,255,238,0.92);
    border-color:rgba(74,217,194,0.24);
    background:rgba(10,36,32,0.65);
}

.stat-card {
    background:rgba(10,14,38,0.62);
    border-radius:20px;
    padding:18px 20px;
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:0 16px 34px rgba(3,4,18,0.38);
}

.stat-card.highlight {
    background:linear-gradient(140deg, rgba(158,123,255,0.42), rgba(64,38,118,0.85));
    border-color:rgba(158,123,255,0.45);
}

.stat-card h3 {
    margin-bottom:6px;
    font-size:1rem;
}

.stat-number {
    font-size:1.6rem;
    font-weight:700;
}

.stat-number.muted {
    font-size:1rem;
    color:rgba(255,255,255,0.7);
}

.stat-hint {
    font-size:0.85rem;
    color:rgba(255,255,255,0.64);
}

.section-intro {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.section-intro h1 {
    font-size:1.8rem;
}

.section-intro p {
    color:rgba(255,255,255,0.7);
    max-width:640px;
}

.usage-charts {
    margin-top:28px;
    padding:20px;
    background:rgba(12,6,24,0.65);
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 18px 36px rgba(0,0,0,0.35);
}

.usage-charts header {
    margin-bottom:18px;
}

.usage-charts h2 {
    font-size:1.4rem;
    margin-bottom:6px;
}

.usage-charts p {
    color:rgba(255,255,255,0.68);
}


.charts-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
}

.chart-card {
    background:rgba(10,16,40,0.62);
    border-radius:20px;
    padding:18px;
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:0 18px 32px rgba(3,4,18,0.36);
    min-height:200px;
    max-height:320px;
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative;
    overflow:hidden;
}

.chart-card canvas {
    display:block;
    width:100%;
    max-height:280px;
    min-height:180px;
}

.chart-card.empty::after {
    content:attr(data-empty-message);
    position:absolute;
    left:18px;
    right:18px;
    top:68px;
    bottom:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:0.9rem;
    color:rgba(255,255,255,0.72);
    background:rgba(6,10,28,0.72);
    border-radius:16px;
    border:1px dashed rgba(255,255,255,0.16);
    box-shadow:0 10px 24px rgba(0,0,0,0.28);
    backdrop-filter:blur(10px);
    padding:14px;
    pointer-events:none;
}

.chart-card.empty canvas {
    opacity:0.22;
}

.chart-card h3 {
    font-size:1rem;
    color:rgba(255,255,255,0.88);
}

.chart-card canvas {
    flex:none;
    width:100% !important;
    height:clamp(180px, 24vh, 260px) !important;
}

.model-breakdown header,
.recent-usage header,
.usage-tips h2 {
    margin-bottom:12px;
}

.model-table__wrap {
    background:rgba(10,16,40,0.6);
    border-radius:20px;
    padding:14px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 16px 32px rgba(3,4,18,0.35);
    overflow-x:auto;
}

.model-table {
    width:100%;
    border-collapse:collapse;
    min-width:360px;
}

.model-table th,
.model-table td {
    text-align:left;
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}


.model-table tbody tr:nth-child(even) {
    background:rgba(255,255,255,0.04);
}

.model-table .empty {
    text-align:center;
    color:rgba(255,255,255,0.65);
}

.recent-usage {
    background:rgba(10,16,40,0.6);
    border-radius:20px;
    padding:22px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 18px 32px rgba(3,4,18,0.34);
}

.usage-timeline {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:0;
    padding:0;
}

.timeline-item {
    background:rgba(14,18,48,0.58);
    padding:12px 16px;
    border-radius:14px;
    border-left:4px solid rgba(158,123,255,0.45);
    box-shadow:0 12px 26px rgba(3,4,18,0.32);
}

.timeline-item.assistant {
    border-left-color:rgba(72,199,142,0.55);
}

.timeline-head {
    display:flex;
    justify-content:space-between;
    font-weight:600;
    margin-bottom:6px;
}

.timeline-meta {
    display:flex;
    gap:12px;
    font-size:0.85rem;
    color:rgba(255,255,255,0.72);
    flex-wrap:wrap;
}

.timeline-empty {
    text-align:center;
    color:rgba(255,255,255,0.6);
}

.security-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:20px;
}

.security-card {
    background:rgba(10,16,44,0.58);
    border-radius:20px;
    padding:20px;
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:0 18px 32px rgba(3,4,18,0.34);
    display:flex;
    flex-direction:column;
    gap:12px;
}

.security-card h3 {
    font-size:1.1rem;
}

.security-card ul {
    margin:6px 0 0;
    padding-left:18px;
    display:flex;
    flex-direction:column;
    gap:6px;
    color:rgba(255,255,255,0.72);
}

.security-card__status {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:10px;
    padding:10px 12px;
    background:rgba(255,255,255,0.04);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.06);
}

.security-card__status strong {
    font-size:0.85rem;
    color:#fdfbff;
    word-break:break-word;
    overflow-wrap:anywhere;
}

.status-label {
    display:block;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:rgba(255,255,255,0.58);
    margin-bottom:4px;
}

.security-card__hint {
    font-size:0.85rem;
    color:rgba(255,255,255,0.7);
    background:rgba(255,255,255,0.05);
    border-radius:12px;
    padding:12px 14px;
    line-height:1.4;
}

.security-checklist {
    background:rgba(10,16,44,0.55);
    border-radius:18px;
    padding:20px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 16px 30px rgba(3,4,18,0.32);
}

.security-checklist ul {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:12px 0 0;
    padding:0;
}

.security-checklist li {
    background:rgba(255,255,255,0.06);
    border-radius:12px;
    padding:10px 14px;
    font-weight:600;
    color:rgba(255,255,255,0.85);
}

.captcha-modal {
    position:fixed;
    inset:0;
    background:rgba(4,0,12,0.75);
    backdrop-filter:blur(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:400;
}

.captcha-modal[hidden] {
    display:none;
}

.captcha-card {
    width:min(420px, 100%);
    background:linear-gradient(145deg, rgba(35,13,67,0.95), rgba(13,3,28,0.95));
    border:1px solid rgba(145,71,255,0.25);
    border-radius:18px;
    padding:28px;
    box-shadow:0 30px 60px rgba(0,0,0,0.45);
    display:flex;
    flex-direction:column;
    gap:16px;
}

.captcha-card h2 {
    margin:0;
    font-size:1.4rem;
}

.captcha-card p {
    margin:0;
    color:rgba(255,255,255,0.75);
}

.captcha-card label {
    font-size:0.85rem;
    color:rgba(255,255,255,0.7);
    display:block;
    margin-bottom:6px;
}

.captcha-card input {
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(19,7,38,0.75);
    color:#fff;
    font-size:1.05rem;
}

.captcha-card .btn {
    cursor:pointer;
}

.captcha-actions {
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

.captcha-modal .btn.solid {
    background:#7e4dff;
    border:none;
    color:#fff;
}

.captcha-modal .btn.ghost {
    border:1px solid rgba(255,255,255,0.28);
    color:#fff;
}

.usage-tips {
    background:rgba(10,16,44,0.55);
    border-radius:20px;
    padding:24px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 18px 32px rgba(3,4,18,0.32);
}

.tips-grid {
    display:grid;
    gap:18px;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}

.tips-grid article {
    background:rgba(14,18,48,0.52);
    border-radius:16px;
    padding:16px;
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:0 12px 24px rgba(3,4,18,0.28);
}

.tips-grid h3 {
    margin-bottom:8px;
}

.settings-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:18px;
}

.setting-card {
    background:rgba(10,16,44,0.58);
    border-radius:18px;
    padding:18px 20px;
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 16px 32px rgba(3,4,18,0.34);
    display:flex;
    flex-direction:column;
    gap:12px;
}

.setting-card h3 {
    font-size:1.1rem;
}

.setting-card p {
    color:rgba(255,255,255,0.7);
}

.setting-toggle {
    display:flex;
    gap:12px;
    align-items:center;
    background:rgba(255,255,255,0.06);
    border-radius:12px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,0.08);
}

.setting-toggle input {
    width:20px;
    height:20px;
    accent-color:var(--accent);
}

.setting-toggle span {
    flex:1;
    font-weight:600;
    color:rgba(255,255,255,0.85);
}

.settings-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.settings-actions .btn {
    flex:1 1 220px;
    justify-content:center;
}

.settings-feedback {
    margin-top:16px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(158,123,255,0.16);
    color:#f6f4ff;
    font-weight:600;
    box-shadow:0 12px 24px rgba(3,4,18,0.28);
}

.settings-feedback[data-tone="success"] {
    background:rgba(72,199,142,0.22);
    border-color:rgba(72,199,142,0.4);
    color:#c7ffec;
}

.settings-feedback[data-tone="warn"] {
    background:rgba(255,161,90,0.22);
    border-color:rgba(255,161,90,0.38);
    color:#ffe3c7;
}

.settings-feedback[data-tone="info"] {
    background:rgba(158,123,255,0.16);
    border-color:rgba(158,123,255,0.38);
}

.settings-feedback[hidden] {
    display:none !important;
}

.mfa-card {
    background:rgba(14,18,48,0.58);
    border-radius:20px;
    padding:20px;
    border:1px solid rgba(255,255,255,0.08);
    display:flex;
    flex-direction:column;
    gap:14px;
    box-shadow:0 18px 32px rgba(3,4,18,0.34);
}

.mfa-status {
    font-weight:600;
    color:rgba(196,230,255,0.9);
}

.mfa-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.mfa-actions .btn {
    width:auto;
    padding:10px 18px;
}

.mfa-setup {
    background:rgba(18,24,58,0.5);
    border-radius:16px;
    border:1px dashed rgba(143,91,255,0.45);
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:flex-start;
}

.mfa-qr-fallback {
    display:block;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.05);
    padding:10px;
    box-shadow:0 18px 32px rgba(0,0,0,0.35);
}

.mfa-qr-fallback-note {
    font-size:0.85rem;
    color:rgba(214,230,255,0.82);
    line-height:1.4;
    word-break:break-word;
}

.mfa-qr-fallback-note code {
    display:block;
    margin-top:6px;
    padding:6px 8px;
    border-radius:10px;
    background:rgba(0,0,0,0.35);
    font-family:"Fira Code","SFMono-Regular",monospace;
    color:#ffe9ff;
    word-break:break-all;
}

.mfa-secret {
    font-family:"Fira Code", "SFMono-Regular", monospace;
    background:rgba(0,0,0,0.35);
    padding:8px 10px;
    border-radius:10px;
    color:#ffe9ff;
    word-break:break-all;
}

.mfa-setup form {
    width:100%;
}

.mfa-setup button {
    margin-top:12px;
}

@media (max-width:700px) {
    .user-topbar {
        flex-direction:column;
    }
    .user-nav {
        flex-direction:column;
        border-radius:18px;
    }
    .user-tab {
        width:100%;
    }
    .user-hero {
        flex-direction:column;
        align-items:flex-start;
    }
    .user-hero__widgets {
        width:100%;
        flex-direction:row;
        justify-content:space-between;
    }
}

/* ✅ Typing animation */
.msg.typing .msg-bubble { opacity:.85; }
.typing .dots::after {
    content:"...";
    animation:dots 1s infinite;
}
@keyframes dots {
    0%, 20% { content:""; }
    40% { content:"."; }
    60% { content:".."; }
    80% { content:"..."; }
}
 


/* --- Dev banner --- */
.dev-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  background: rgba(145, 71, 255, .18);
  backdrop-filter: blur(12px);
  color: #eee;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.dev-banner__content{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.35;
}

.dev-banner__link{
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

.dev-banner__link:hover,
.dev-banner__link:focus-visible{
  color: #ffe5ff;
}

.dev-banner__close{
  margin-left: auto;
  background: #9147ff;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

@media (max-width: 850px){
  .dev-banner{ left: 10px; right: 10px; bottom: 10px; }
  .dev-banner__content{ font-size: 13px; }
  .dev-banner__close{ padding: 8px 10px; }
}

/* Landing */
.landing-hero {
    padding:40px clamp(20px, 5vw, 80px) 30px;
    min-height:70vh;
    display:flex;
    flex-direction:column;
    gap:40px;
    position:relative;
}

.landing-hero::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 30%, rgba(120,78,255,0.38), transparent 58%),
               radial-gradient(circle at 82% 25%, rgba(0,170,216,0.26), transparent 60%);
    opacity:0.65;
    filter:blur(90px);
    pointer-events:none;
}

.landing-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    z-index:1;
}

.landing-nav .brand {
    font-size:1.4rem;
    font-weight:600;
    letter-spacing:0.05em;
}

.nav-actions {
    display:flex;
    gap:12px;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:999px;
    text-decoration:none;
    font-weight:600;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    border:1px solid transparent;
}

.btn.ghost {
    background:rgba(255,255,255,0.08);
    color:#f8f0ff;
    border-color:rgba(255,255,255,0.18);
}

.btn.solid {
    background:linear-gradient(135deg, rgba(145,71,255,0.85), rgba(60,16,120,0.95));
    color:#fff;
    box-shadow:0 15px 25px rgba(30,0,70,0.35);
}

.btn.outline {
    background:transparent;
    color:#f8f0ff;
    border-color:rgba(255,255,255,0.35);
}

.btn.warn {
    background:linear-gradient(135deg, rgba(255,209,102,0.85), rgba(198,136,0,0.85));
    color:#2d1b00;
    border-color:rgba(255,209,102,0.8);
}

.btn.danger {
    background:linear-gradient(135deg, rgba(255,77,109,0.85), rgba(160,0,43,0.9));
    color:#fff;
    border-color:rgba(255,77,109,0.8);
}

.btn:hover {
    transform:translateY(-2px);
    box-shadow:0 18px 28px rgba(15,0,40,0.35);
}

.hero-content {
    max-width:680px;
    display:flex;
    flex-direction:column;
    gap:24px;
    position:relative;
    z-index:1;
}

.hero-content h1 {
    font-size:clamp(2.2rem, 5vw, 3.4rem);
    font-weight:700;
}

.hero-content p {
    font-size:1.1rem;
    color:rgba(255,255,255,0.78);
}

.hero-cta {
    display:flex;
    gap:14px;
}

.hero-features {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:16px;
    list-style:none;
    padding:0;
}

.hero-features li {
    background:rgba(255,255,255,0.08);
    padding:12px 16px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);
}

.landing-showcase {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:24px;
    padding:0 clamp(20px, 6vw, 80px) 60px;
}

.landing-showcase article {
    background:rgba(255,255,255,0.06);
    border-radius:18px;
    padding:24px;
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(14px);
    box-shadow:0 25px 40px rgba(0,0,0,0.25);
}

.landing-showcase h2 {
    font-size:1.35rem;
    margin-bottom:12px;
}

.landing-showcase p {
    color:rgba(255,255,255,0.78);
    font-size:1rem;
    line-height:1.5;
}

.landing-features {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:22px;
    padding:0 clamp(20px, 6vw, 80px) 60px;
}

.landing-features article {
    background:rgba(18,6,36,0.82);
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.12);
    padding:22px;
    box-shadow:0 25px 45px rgba(0,0,0,0.28);
}

.landing-features h3 {
    font-size:1.2rem;
    margin-bottom:10px;
}

.landing-features p {
    color:rgba(255,255,255,0.7);
    font-size:0.95rem;
    line-height:1.5;
}

.landing-usecases {
    padding:40px clamp(20px, 6vw, 80px) 20px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.landing-usecases header h2 {
    font-size:1.6rem;
    margin-bottom:6px;
}

.landing-usecases header p {
    color:rgba(255,255,255,0.75);
    max-width:620px;
}

.usecase-grid {
    display:grid;
    gap:14px;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    list-style:none;
    padding:0;
    margin:0;
}

.usecase-grid li {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    padding:16px 18px;
    font-size:0.95rem;
    line-height:1.5;
    backdrop-filter:blur(12px);
}

.landing-eco {
    padding:20px clamp(20px, 6vw, 80px) 80px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.landing-eco header h2 {
    font-size:1.6rem;
    margin-bottom:6px;
}

.landing-eco header p {
    color:rgba(207,240,255,0.82);
    max-width:600px;
}

.eco-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:22px;
}

.eco-grid article {
    background:rgba(9,18,46,0.6);
    border-radius:18px;
    padding:22px;
    border:1px solid rgba(129,203,255,0.2);
    box-shadow:0 20px 40px rgba(0,0,0,0.28);
}

.eco-grid article h3 {
    font-size:1.15rem;
    margin-bottom:10px;
}

.eco-grid article p {
    color:rgba(212,238,255,0.78);
    line-height:1.5;
}

.landing-footer {
    text-align:center;
    padding:20px;
    color:rgba(255,255,255,0.6);
    font-size:0.85rem;
}

.admin-body {
    background:linear-gradient(160deg, rgba(16,3,35,0.97), rgba(46,12,73,0.94));
    color:#f9f6ff;
    min-height:100vh;
    padding:32px 24px;
}

.admin-shell {
    max-width:1100px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:28px;
}

.admin-topbar {
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
}

.admin-topbar .back-link {
    color:#f9f6ff;
    text-decoration:none;
    font-weight:500;
    margin-bottom:6px;
}

.admin-brand h1 {
    margin:0;
    font-size:1.9rem;
}

.admin-brand p {
    margin:4px 0 0;
    color:rgba(255,255,255,0.7);
}

.admin-meta {
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
}

.admin-meta .btn.ghost {
    border:1px solid rgba(255,255,255,0.3);
    padding:6px 14px;
}

.admin-meta .btn.ghost.spinning::after {
    content:"";
    margin-left:8px;
    border:2px solid rgba(255,255,255,0.4);
    border-top-color:transparent;
    border-radius:50%;
    width:14px;
    height:14px;
    display:inline-block;
    animation:spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

.admin-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:18px;
}

.admin-card {
    background:rgba(20,6,42,0.85);
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.1);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:6px;
    box-shadow:0 20px 40px rgba(0,0,0,0.35);
}

.admin-card.compact {
    padding:16px;
    gap:4px;
}

.admin-card h2 {
    margin:0;
    font-size:1rem;
    color:rgba(255,255,255,0.72);
}

.admin-card p {
    margin:0;
    font-size:1.6rem;
    font-weight:600;
}

.admin-card small {
    color:rgba(255,255,255,0.6);
}

.admin-card.highlight {
    background:linear-gradient(145deg, rgba(125,62,255,0.32), rgba(26,11,52,0.95));
    border-color:rgba(145,71,255,0.4);
}

.admin-section {
    background:rgba(20,6,42,0.78);
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.08);
    padding:24px;
    box-shadow:0 24px 45px rgba(0,0,0,0.32);
    display:flex;
    flex-direction:column;
    gap:16px;
}

.admin-split {
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(240px,1fr);
    gap:24px;
    align-items:start;
}

.admin-aside {
    height:100%;
}

.admin-section header h2 {
    margin:0;
}

.admin-section header p {
    margin:6px 0 0;
    color:rgba(255,255,255,0.65);
}

.admin-actions .admin-toolbar {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}

.admin-toolbar input[type="search"] {
    flex:1 1 260px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(10,4,30,0.6);
    color:#f8f0ff;
}

.admin-action-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.admin-action-buttons .btn {
    flex:1 1 200px;
    justify-content:center;
}

.admin-action-status {
    margin:4px 0 0;
    font-size:0.85rem;
    color:rgba(255,255,255,0.7);
    padding-left:12px;
    border-left:3px solid rgba(255,255,255,0.25);
}

.admin-action-status[data-state="warn"] {
    color:rgba(255,209,102,0.95);
    border-left-color:var(--warn);
}

.admin-action-status[data-state="error"] {
    color:rgba(255,114,138,0.95);
    border-left-color:var(--danger);
}

.admin-action-status[data-state="ok"] {
    color:rgba(74,217,194,0.95);
    border-left-color:var(--success);
}

.admin-table tbody tr.active {
    background:rgba(145,71,255,0.22);
    box-shadow:0 12px 28px rgba(30,0,80,0.35);
}

.admin-table tbody tr.suspended {
    color:rgba(255,209,102,0.95);
}

.admin-table {
    width:100%;
    border-collapse:collapse;
    font-size:0.9rem;
}

.admin-table.compact th,
.admin-table.compact td {
    font-size:0.8rem;
    padding:8px 10px;
}

#adminHeavyTable td:first-child {
    font-weight:600;
    color:rgba(255,255,255,0.85);
}

.admin-table th,
.admin-table td {
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    text-align:left;
}

.admin-table tbody tr:hover {
    background:rgba(255,255,255,0.08);
}

.admin-table-wrap {
    max-height:360px;
    overflow:auto;
}

.admin-timeline {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:0;
    padding:0;
}

.admin-timeline .timeline-item {
    border-left:3px solid rgba(145,71,255,0.45);
    padding:10px 14px;
    background:rgba(15,5,32,0.85);
    border-radius:12px;
}

@media (max-width: 900px) {
    .admin-split {
        grid-template-columns:1fr;
    }
    .gallery-panel {
        top:72px;
        right:16px;
        left:16px;
        bottom:calc(96px + env(safe-area-inset-bottom));
        width:auto;
        max-height:none;
        height:auto;
    }
    .media-lightbox__figure img {
        max-height:60vh;
    }
}

.admin-timeline .timeline-item.assistant {
    border-left-color:#4ad9c2;
}

.admin-timeline .timeline-meta {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    color:rgba(255,255,255,0.65);
    margin-top:6px;
}

.forbidden {
    max-width:420px;
    margin:120px auto;
    text-align:center;
    background:rgba(20,6,42,0.85);
    padding:32px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.12);
    box-shadow:0 24px 50px rgba(0,0,0,0.35);
    display:flex;
    flex-direction:column;
    gap:18px;
}

@media (max-width: 720px) {
    .hero-cta {
        flex-direction:column;
        align-items:stretch;
    }

    .nav-actions {
        display:none;
    }

    .landing-showcase {
        padding-inline:20px;
    }
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
    }

    .gallery-card__thumb img,
    .gallery-card__video {
        height:130px;
        max-height:130px;
    }
}