:root{--bg:#050509;--panel:rgba(24,24,27,.9);--panel2:rgba(39,39,42,.92);--line:rgba(255,255,255,.1);--text:#f4f4f5;--muted:#a1a1aa;--muted2:#71717a;--blue:#2563eb;--green:#10b981;--red:#ef4444;--orange:#f97316;--radius:24px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(circle at top left,rgba(37,99,235,.16),transparent 34rem),radial-gradient(circle at bottom right,rgba(16,185,129,.12),transparent 32rem),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,textarea,select{font:inherit}a{color:#93c5fd}.thin-scrollbar::-webkit-scrollbar{width:8px;height:8px}.thin-scrollbar::-webkit-scrollbar-thumb{background:rgba(113,113,122,.55);border-radius:999px}.thin-scrollbar::-webkit-scrollbar-track{background:transparent}.auth-page,.settings-page{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card,.settings-card{width:min(460px,100%);padding:28px;border:1px solid var(--line);background:rgba(24,24,27,.9);border-radius:28px;box-shadow:0 24px 90px rgba(0,0,0,.38)}.settings-card.wide{width:min(1180px,100%)}.auth-brand,.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--green));color:white;box-shadow:0 14px 35px rgba(37,99,235,.35)}.auth-brand h1,.settings-header h1{margin:0;font-size:26px}.auth-brand p,.auth-footer,.tiny-note,.settings-header p{color:var(--muted)}.auth-form,.settings-form{margin-top:24px;display:grid;gap:16px}label span{display:block;margin-bottom:7px;color:#d4d4d8;font-size:13px;font-weight:700}input,textarea,select{width:100%;border:1px solid var(--line);border-radius:16px;background:rgba(9,9,11,.78);color:var(--text);padding:13px 14px;outline:none}input:focus,textarea:focus,select:focus{border-color:rgba(96,165,250,.55);box-shadow:0 0 0 4px rgba(37,99,235,.15)}.inline-check{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}.inline-check input{width:auto}.auth-form button,.settings-form button,.send-btn,.new-chat-btn{border:none;color:white;background:linear-gradient(135deg,var(--blue),#1d4ed8);padding:13px 16px;border-radius:16px;cursor:pointer;font-weight:800}.alert{margin:18px 0;border-radius:16px;padding:12px 14px;font-size:14px}.alert.error{border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.1);color:#fecaca}.alert.success{border:1px solid rgba(16,185,129,.35);background:rgba(16,185,129,.1);color:#bbf7d0}.app-shell{height:100vh;display:flex;overflow:hidden}.sidebar{width:320px;flex:none;display:flex;flex-direction:column;border-right:1px solid var(--line);background:rgba(9,9,11,.82);backdrop-filter:blur(16px)}.sidebar-top{padding:18px;border-bottom:1px solid var(--line)}.brand strong,.user-box strong{display:block}.brand small,.user-box small{display:block;color:var(--muted2);margin-top:2px}.new-chat-btn{width:100%;margin-top:16px;text-align:left;background:rgba(255,255,255,.06);border:1px solid var(--line)}.main-nav{padding:12px;border-bottom:1px solid var(--line);display:grid;gap:8px}.nav-link{padding:11px 12px;border-radius:14px;text-decoration:none;color:#d4d4d8;border:1px solid transparent}.nav-link:hover,.nav-link.active{background:rgba(37,99,235,.12);border-color:rgba(96,165,250,.18);color:#dbeafe}.quota-box{margin:12px;padding:13px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);font-size:13px;color:var(--muted)}.quota-box strong{display:block;color:#fff;margin-bottom:5px}.quota-meter{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:9px}.quota-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--blue));width:0}.session-list{flex:1;overflow-y:auto;padding:12px}.session-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;color:#d4d4d8;cursor:pointer;border:1px solid transparent}.session-item:hover{background:rgba(255,255,255,.05)}.session-item.active{background:rgba(37,99,235,.18);border-color:rgba(96,165,250,.18);color:#dbeafe}.session-title{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.delete-session{opacity:0;color:#fca5a5;background:transparent;border:none;cursor:pointer;font-size:18px}.session-item:hover .delete-session{opacity:1}.sidebar-bottom{border-top:1px solid var(--line);padding:16px}.logout-btn,.ghost-btn,.tool-btn,.secondary-link{border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.05);border-radius:14px;padding:10px 12px;cursor:pointer;text-decoration:none}.logout-btn{width:100%;margin-top:12px}.chat-panel{min-width:0;flex:1;display:flex;flex-direction:column}.chat-header{height:74px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 26px;border-bottom:1px solid var(--line);background:rgba(9,9,11,.62);backdrop-filter:blur(14px)}.chat-header h1{margin:0;font-size:19px}.chat-header p{margin:4px 0 0;color:var(--muted);font-size:13px}.mobile-menu{display:none}.status-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(16,185,129,.25);background:rgba(16,185,129,.1);color:#a7f3d0;padding:9px 12px;border-radius:999px;font-size:13px;font-weight:800}.status-pill span{width:8px;height:8px;border-radius:50%;background:var(--green)}.messages{flex:1;overflow-y:auto;padding:28px 28px 170px}.empty-state{max-width:920px;margin:40px auto;border:1px solid var(--line);background:rgba(24,24,27,.72);border-radius:30px;padding:28px}.empty-state h2{margin:0 0 8px;font-size:30px}.empty-state p{color:var(--muted);line-height:1.7}.prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.prompt-grid button{text-align:left;border:1px solid var(--line);border-radius:20px;background:rgba(9,9,11,.58);color:#d4d4d8;padding:16px;cursor:pointer;line-height:1.55}.message-row{display:flex;max-width:980px;margin:0 auto 22px}.message-row.user{justify-content:flex-end}.message-bubble{max-width:min(840px,92%);padding:16px 18px;border-radius:26px;box-shadow:0 20px 60px rgba(0,0,0,.24)}.message-row.user .message-bubble{background:var(--blue);color:white}.message-row.assistant .message-bubble{background:rgba(24,24,27,.92);border:1px solid var(--line)}.role-label{margin-bottom:8px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.65;font-weight:900}.attachment-chip,.file-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);border-radius:999px;padding:7px 11px;margin:0 8px 8px 0;font-size:12px}.file-chip button{border:none;background:transparent;color:#fca5a5;cursor:pointer}.markdown{color:#e4e4e7;line-height:1.75;font-size:15px}.markdown h1,.markdown h2,.markdown h3{color:white;margin:1.05rem 0 .45rem;line-height:1.25}.markdown p{margin:.55rem 0}.markdown ul{margin:.55rem 0 .55rem 1.25rem}.inline-code{background:rgba(39,39,42,.95);border:1px solid rgba(82,82,91,.65);border-radius:7px;padding:.12rem .35rem;color:#bfdbfe;font-size:.9em}.code-card{margin:16px 0;overflow:hidden;border:1px solid rgba(82,82,91,.65);border-radius:20px;background:#050508}.code-top{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(82,82,91,.5);background:rgba(39,39,42,.85);padding:10px 14px}.code-top span{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase}.copy-btn,.download-zip-btn{border:1px solid var(--line);color:#d4d4d8;background:rgba(255,255,255,.05);border-radius:10px;padding:7px 10px;cursor:pointer;font-size:12px;font-weight:800}pre{margin:0;max-height:520px;overflow:auto;padding:16px;font-size:13px;line-height:1.65}.artifact-actions{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.download-zip-btn{color:#a7f3d0;border-color:rgba(16,185,129,.28);background:rgba(16,185,129,.1)}.composer-wrap{position:fixed;left:320px;right:0;bottom:0;border-top:1px solid var(--line);background:rgba(9,9,11,.84);backdrop-filter:blur(14px);padding:14px 24px 18px}.composer{max-width:980px;margin:0 auto;padding:12px;border:1px solid var(--line);border-radius:28px;background:rgba(24,24,27,.96);box-shadow:0 18px 50px rgba(0,0,0,.24)}.composer textarea{min-height:118px;max-height:280px;resize:none;border:none;background:transparent;box-shadow:none;padding:8px 10px;line-height:1.65}.composer-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.left-actions{display:flex;gap:8px}.tool-btn.listening{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.13);color:#fecaca}.send-btn{padding-inline:20px}.file-chips{max-width:980px;margin:0 auto 10px}.tiny-note{text-align:center;font-size:11px;margin:8px 0 0;color:var(--muted2)}.typing-card{min-width:290px}.typing-steps{display:grid;gap:9px;margin-top:10px}.typing-step{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}.typing-step.active{color:#dbeafe}.typing-dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.22)}.typing-step.active .typing-dot{background:var(--blue);box-shadow:0 0 0 0 rgba(37,99,235,.7);animation:pulse 1.4s infinite}.loading-bar{height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);margin-top:14px}.loading-bar span{display:block;height:100%;width:42%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--green));animation:slide 1.25s infinite}@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(37,99,235,0)}}@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(250%)}}.settings-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-form{border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(9,9,11,.45)}.settings-form h2{margin:0 0 10px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.stats-grid div{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:18px;padding:16px}.stats-grid strong{font-size:26px;display:block}.stats-grid span{color:var(--muted);font-size:13px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:22px}.admin-table{width:100%;border-collapse:collapse;min-width:980px}.admin-table th,.admin-table td{padding:14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.admin-table th{color:#cbd5e1;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.admin-table td small{display:block;color:var(--muted2);margin-top:3px}.inline-admin-form{display:grid;grid-template-columns:120px 130px 120px 120px 120px 90px;gap:10px;align-items:center}.inline-admin-form input,.inline-admin-form select{padding:9px;border-radius:12px}.inline-admin-form button,.secondary-mini,.danger-mini{border:none;border-radius:12px;padding:9px 11px;cursor:pointer;font-weight:800}.inline-admin-form button,.secondary-mini{background:rgba(37,99,235,.18);color:#bfdbfe;border:1px solid rgba(96,165,250,.25)}.danger-mini{background:rgba(239,68,68,.12);color:#fecaca;border:1px solid rgba(239,68,68,.25)}.usage-badge{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);color:#e4e4e7}.switch-line{display:flex;align-items:center;gap:8px}.switch-line input{width:auto}.table-actions{display:flex;gap:8px}.pagination-wrap{margin-top:18px;color:var(--muted)}@media(max-width:860px){.sidebar{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0)}.mobile-menu{display:inline-flex}.status-pill{display:none}.prompt-grid,.settings-grid,.stats-grid{grid-template-columns:1fr}.messages{padding:18px 18px 220px}.composer-wrap{left:0;padding:12px}.chat-header{padding:12px 16px}.inline-admin-form{grid-template-columns:1fr}.settings-header{display:grid}}

/* ===== Admin Panel v2.2 ===== */
.admin-page {
    min-height: 100vh;
    padding: 32px;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .14), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, .10), transparent 34rem),
        var(--bg);
}

.admin-shell {
    width: min(1280px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 22px;
}

.admin-hero,
.admin-section {
    border: 1px solid var(--line);
    background: rgba(24,24,27,.88);
    border-radius: 30px;
    box-shadow: 0 28px 90px rgba(0,0,0,.30);
}

.admin-hero {
    padding: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.admin-hero h1,
.section-title h2 {
    margin: 5px 0 6px;
    letter-spacing: -.03em;
}

.admin-hero p,
.section-title p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    color: #93c5fd;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card {
    border: 1px solid var(--line);
    background: rgba(24,24,27,.78);
    border-radius: 24px;
    padding: 18px;
}

.kpi-card span,
.kpi-card small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.kpi-card strong {
    display: block;
    margin: 8px 0;
    font-size: 30px;
    letter-spacing: -.04em;
}

.danger-soft {
    border-color: rgba(239,68,68,.22);
    background: rgba(239,68,68,.07);
}

.admin-section {
    padding: 24px;
}

.section-title {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

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

.plan-card {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(9,9,11,.50);
    border-radius: 24px;
    padding: 18px;
}

.plan-card.new-plan {
    border-style: dashed;
    border-color: rgba(96,165,250,.32);
    background: rgba(37,99,235,.06);
}

.plan-card-head,
.plan-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.plan-card-head strong {
    display: block;
    font-size: 18px;
}

.plan-card-head small {
    display: block;
    margin-top: 2px;
    color: var(--muted2);
}

.plan-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.05);
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.plan-badge.default {
    border-color: rgba(16,185,129,.28);
    background: rgba(16,185,129,.12);
    color: #a7f3d0;
}

.plan-form-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.plan-form-grid .span-2 {
    grid-column: span 2;
}

.plan-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}

.plan-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    border-radius: 999px;
    padding: 8px 10px;
    color: #d4d4d8;
    font-size: 12px;
    font-weight: 800;
}

.plan-options input {
    width: auto;
}

.plan-actions button,
.professional-user-form button {
    border: none;
    color: white;
    background: linear-gradient(135deg, var(--blue), #1d4ed8);
    padding: 11px 14px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 900;
}

.pro-table {
    min-width: 1080px;
}

.user-cell strong,
.user-cell small,
.user-cell em {
    display: block;
}

.user-cell small {
    color: var(--muted2);
    margin-top: 3px;
}

.user-cell em {
    margin-top: 8px;
    color: #93c5fd;
    font-size: 11px;
    font-style: normal;
}

.professional-user-form {
    display: grid;
    grid-template-columns: 120px 150px 130px 110px 110px 120px 92px;
    align-items: center;
    gap: 10px;
}

.professional-user-form input[readonly] {
    opacity: .72;
    cursor: not-allowed;
}

.professional-user-form select,
.professional-user-form input {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 13px;
}

.usage-badge {
    display: inline-flex;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.06);
    border-radius: 13px;
    padding: 11px 12px;
    font-weight: 900;
}

.table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.secondary-mini,
.danger-mini {
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 10px 12px;
    color: #dbeafe;
    background: rgba(37,99,235,.18);
    cursor: pointer;
    font-weight: 900;
}

.danger-mini {
    color: #fecaca !important;
    border-color: rgba(239,68,68,.32) !important;
    background: rgba(239,68,68,.12) !important;
}

@media (max-width: 1100px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .plans-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 780px) {
    .admin-page {
        padding: 14px;
    }

    .admin-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .secondary-link {
        text-align: center;
    }

    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-section {
        padding: 16px;
        border-radius: 24px;
    }

    .plan-form-grid {
        grid-template-columns: 1fr;
    }

    .plan-form-grid .span-2 {
        grid-column: span 1;
    }

    .plan-card-head,
    .plan-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .pro-table {
        min-width: 980px;
    }
}

@media (max-width: 520px) {
    .admin-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== v2.3 Production Fix: responsive workspace, toast, safer mobile ===== */

.sidebar-overlay {
    display: none;
}

.toast-box {
    position: fixed;
    z-index: 9999;
    right: 18px;
    bottom: 18px;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 28px));
    pointer-events: none;
}

.toast-item {
    transform: translateY(10px);
    opacity: 0;
    border: 1px solid var(--line);
    background: rgba(24,24,27,.96);
    color: var(--text);
    border-radius: 16px;
    padding: 13px 14px;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
    transition: .2s ease;
    line-height: 1.55;
    font-size: 14px;
}

.toast-item.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-item.warning {
    border-color: rgba(245,158,11,.35);
    background: rgba(113,63,18,.92);
}

.toast-item.error {
    border-color: rgba(239,68,68,.35);
    background: rgba(69,10,10,.94);
}

.typing-card {
    min-width: min(360px, 92vw);
}

@media (max-width: 1024px) {
    .sidebar {
        width: min(86vw, 340px);
    }

    .composer-wrap {
        left: 0;
    }

    .chat-header {
        padding: 12px 16px;
    }

    .chat-header h1 {
        font-size: 17px;
    }

    .chat-header p {
        display: none;
    }

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

    .status-pill {
        display: none;
    }
}

@media (max-width: 860px) {
    html, body {
        overflow: hidden;
    }

    .app-shell {
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        position: relative;
        overflow: hidden;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 24px 0 80px rgba(0,0,0,.45);
    }

    .app-shell.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0,0,0,.56);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
    }

    .app-shell.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .chat-panel {
        flex: 1 1 auto;
        width: 100vw;
        min-width: 0;
    }

    .messages {
        padding: 16px 12px 230px;
    }

    .message-row {
        max-width: 100%;
        margin-bottom: 16px;
    }

    .message-bubble {
        max-width: 96%;
        border-radius: 22px;
        padding: 14px;
    }

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

    .empty-state {
        margin: 18px auto;
        padding: 18px;
        border-radius: 24px;
    }

    .empty-state h2 {
        font-size: 24px;
    }

    .prompt-grid {
        grid-template-columns: 1fr;
    }

    .composer-wrap {
        left: 0 !important;
        right: 0;
        bottom: 0;
        padding: 10px;
    }

    .composer {
        border-radius: 22px;
        padding: 10px;
    }

    .composer textarea {
        min-height: 96px;
        max-height: 180px;
        font-size: 14px;
    }

    .composer-actions {
        align-items: stretch;
    }

    .left-actions {
        min-width: 0;
        flex-wrap: wrap;
    }

    .tool-btn,
    .send-btn {
        padding: 10px 12px;
    }

    .tiny-note {
        display: none;
    }

    pre {
        max-width: calc(100vw - 56px);
    }

    .code-card {
        border-radius: 16px;
    }
}

@media (max-width: 520px) {
    .chat-header {
        height: 62px;
        gap: 10px;
    }

    .chat-header h1 {
        font-size: 15px;
    }

    .brand-mark {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .composer-actions {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .message-bubble {
        font-size: 14px;
    }

    .markdown {
        font-size: 14px;
    }

    .toast-box {
        right: 10px;
        left: 10px;
        width: auto;
    }
}


/* ===== v2.4 Layout Fix: composer no longer covers messages =====
   Root cause: previous versions used fixed composer footer, so long messages/code blocks
   could slide under the input area. This version returns the composer to normal flex flow.
*/

html,
body {
    height: 100%;
    overflow: hidden;
}

.app-shell {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

.chat-panel {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.chat-header {
    flex: 0 0 auto !important;
}

.messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 24px 28px 24px !important;
    scroll-padding-bottom: 24px !important;
}

.composer-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    border-top: 1px solid var(--line);
    padding: 14px 24px 18px !important;
}

.composer {
    max-width: 980px !important;
    width: min(980px, 100%) !important;
}

.composer textarea {
    min-height: 112px;
    max-height: 220px;
    overflow-y: auto;
}

.message-row {
    scroll-margin-bottom: 24px;
}

.message-bubble {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.code-card {
    max-width: 100%;
}

pre {
    max-width: 100%;
    max-height: min(520px, 46vh);
    overflow: auto;
}

.code-top {
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 1024px) {
    .messages {
        padding: 18px 16px 18px !important;
    }

    .composer-wrap {
        padding: 10px 12px 12px !important;
    }

    .composer {
        border-radius: 22px !important;
    }

    .composer textarea {
        min-height: 92px;
        max-height: 170px;
    }
}

@media (max-width: 860px) {
    .messages {
        padding: 14px 10px 14px !important;
    }

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

    .message-row.user .message-bubble {
        max-width: 92% !important;
    }

    .composer-wrap {
        padding: 8px !important;
    }

    .composer {
        border-radius: 20px !important;
        padding: 9px !important;
    }

    .composer textarea {
        min-height: 82px !important;
        max-height: 145px !important;
        font-size: 14px;
    }

    .composer-actions {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }

    .left-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        min-width: 0;
    }

    .tool-btn,
    .send-btn {
        min-height: 42px;
        white-space: nowrap;
    }

    pre {
        max-height: 44vh;
    }
}

@media (max-width: 520px) {
    .chat-header {
        min-height: 58px !important;
        height: auto !important;
        padding: 10px 12px !important;
    }

    .messages {
        padding: 10px 8px 10px !important;
    }

    .composer textarea {
        min-height: 76px !important;
        max-height: 130px !important;
    }

    .send-btn {
        padding-inline: 14px !important;
    }

    .role-label {
        font-size: 10px;
    }
}


/* ===== v3.3 Admin Scroll Fix =====
   Admin panel is a document page, not the chat workspace. Previous chat layout fixes
   used global html/body overflow:hidden, which blocked scrolling on /admin/users.
*/
html:has(.admin-page),
body:has(.admin-page) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body:has(.admin-page) {
    display: block !important;
}

.admin-page {
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 80px !important;
}

.admin-shell,
.admin-section {
    overflow: visible !important;
}

.plans-grid {
    align-items: start;
}

.table-wrap {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 780px) {
    .admin-page {
        padding: 14px 12px 80px !important;
    }

    .admin-shell {
        gap: 16px !important;
    }

    .admin-hero,
    .admin-section {
        border-radius: 22px !important;
    }
}