:root {
    --bg: #f4f6f8;
    --panel: #ffffff;
    --ink: #172033;
    --muted: #667085;
    --soft: #eef2f6;
    --border: #dfe5eb;
    --sidebar: #111827;
    --sidebar-2: #1f2937;
    --primary: #2563eb;
    --teal: #0f9f8f;
    --coral: #f9734d;
    --green: #16a34a;
    --danger: #dc2626;
    --shadow: 0 18px 45px rgba(15, 23, 42, .10);
    --radius: 8px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f8fafc 0%, #edf4f2 55%, #fff7ed 100%);
    padding: 24px;
}
.auth-card {
    width: min(430px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 34px;
    box-shadow: var(--shadow);
}
.brand-mark, .brand-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary), var(--teal));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
}
.auth-card h1 { margin: 18px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.auth-form { display: grid; gap: 10px; margin-top: 24px; }
.auth-form input {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 13px 15px;
    outline: none;
    background: #fbfcfd;
}
.auth-form input:focus, .composer textarea:focus { border-color: rgba(15,159,143,.6); box-shadow: 0 0 0 4px rgba(15,159,143,.10); }
.auth-form button, .primary-btn {
    border: 0;
    border-radius: var(--radius);
    padding: 13px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--teal));
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(37,99,235,.18);
}
.auth-note { text-align: center; margin-top: 20px; }
.alert { padding: 12px 14px; border-radius: var(--radius); margin: 16px 0; }
.alert.error { background: #fff1f2; color: #b42318; border: 1px solid #fecdd3; }
.alert.success { background: #ecfdf3; color: #067647; border: 1px solid #bbf7d0; }

.app-body { overflow: hidden; height: 100vh; }
.app-shell { display: grid; grid-template-columns: 280px 1fr; height: 100vh; background: var(--bg); }
.sidebar {
    background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
    color: #fff;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.sidebar-brand { display: flex; gap: 12px; align-items: center; }
.sidebar-brand span { display: block; font-size: 12px; color: #aab6c7; margin-top: 2px; }
.full { width: 100%; }
.center-link { display:grid; place-items:center; text-align:center; }
.nav-menu { display: grid; gap: 6px; }
.nav-item, .nav-link-admin {
    color: #d8dee9;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    padding: 11px 12px;
    text-align: left;
}
.nav-item:hover, .nav-item.active, .nav-link-admin:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav-item.locked { opacity:.62; }
.nav-item.locked:hover { background:rgba(255,255,255,.05); color:#d8dee9; }
.section-title { color: #aab6c7; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.guest-note {
    display:grid;
    gap:6px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius);
    padding:12px;
    color:#d8dee9;
    background:rgba(255,255,255,.06);
}
.guest-note span { color:#aab6c7; font-size:12px; }
.guest-note b { color:#fff; }
.chat-list { display: grid; gap: 7px; overflow: auto; min-height: 0; }
.chat-item {
    background: rgba(255,255,255,.07);
    color: #d8dee9;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 10px 12px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-item.active { background: rgba(15,159,143,.22); border-color: rgba(45,212,191,.35); color: #fff; }
.user-box {
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 14px;
    display: grid;
    grid-template-columns: 42px 1fr 34px;
    gap: 10px;
    align-items: center;
}
.user-box span { display:block; font-size:12px; color:#aab6c7; }
.user-box a { color:#d8dee9; font-size:12px; text-align:right; }
.avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, var(--coral));
    display: grid; place-items:center; font-weight: 800; color:#fff;
}

.main-panel { padding: 14px; min-width: 0; }
.topbar {
    min-height: 76px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.topbar h1 { margin: 0; font-size: 21px; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.top-actions { display:flex; gap:8px; align-items:center; flex-wrap: wrap; justify-content:flex-end; }
.model-select, .thinking-toggle, .ghost-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius);
    padding: 10px 12px;
    min-height: 40px;
}
.thinking-toggle { display:flex; align-items:center; gap:8px; color: var(--muted); }
.thinking-toggle.disabled { opacity:.65; }
.ghost-btn { color: var(--ink); font-weight: 700; }
.ghost-btn:hover { border-color: var(--teal); color: var(--teal); }
.ghost-btn.accent { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 14px; height: calc(100vh - 104px); margin-top: 14px; min-height: 0; }
.guest-workspace { grid-template-columns:minmax(0, 1fr) 390px; }
.chat-panel, .tools-panel {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(15,23,42,.07);
}
.chat-panel { display: grid; grid-template-rows: auto 1fr auto auto; min-height: 0; overflow: hidden; }
.hero { text-align: center; padding: 28px 20px 12px; }
.bot-face { width:56px; height:56px; margin:0 auto; display:grid; place-items:center; border-radius:50%; background:#e8f7f5; color:var(--teal); font-weight:800; }
.hero h2 { margin: 10px 0 4px; }
.hero p { margin: 0 0 18px; color: var(--muted); }
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.quick-actions button {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 10px 14px;
}
.quick-actions button:hover { border-color: var(--teal); color: var(--teal); }
.messages { overflow: auto; padding: 12px 24px 20px; min-height: 0; }
.message { display: flex; gap: 12px; margin: 16px 0; align-items: flex-start; }
.message.user { justify-content: flex-end; }
.message .bubble {
    max-width: min(820px, 86%);
    border-radius: 12px;
    padding: 14px 16px;
    line-height: 1.58;
    overflow-wrap: anywhere;
}
.message.user .bubble { background: #1d4ed8; color: #fff; border-bottom-right-radius: 4px; }
.message.assistant .bubble { background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.message .mini-avatar { width: 32px; height: 32px; border-radius: 50%; display:grid; place-items:center; background:#eef6ff; color:var(--primary); flex: 0 0 32px; font-size:12px; font-weight:800; }
.message.user .mini-avatar { order: 2; background:#fff3ed; color:var(--coral); }
.bubble pre { position: relative; border-radius: var(--radius); overflow: auto; padding: 14px; background: #0f172a; color: #d7e2ff; }
.bubble code, .file-viewer { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; }
.bubble p { margin: 0 0 12px; }
.bubble p:last-child { margin-bottom: 0; }
.copy-code {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    border-radius: 6px;
    padding: 6px 9px;
    background: rgba(255,255,255,.12);
    color: #fff;
}
.composer {
    margin: 0 24px;
    display: grid;
    grid-template-columns: 1fr 72px;
    gap: 10px;
    align-items: end;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}
.composer textarea {
    border: 0;
    outline: none;
    resize: none;
    max-height: 180px;
    padding: 10px 12px;
}
.composer button {
    height: 46px; border: 0; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary), var(--teal));
    color: white; font-weight: 800;
}
.composer button:disabled { opacity: .55; cursor: not-allowed; }
.fineprint { margin: 10px 24px 16px; color: #8a94a6; font-size: 12px; text-align: center; }

.tools-panel { padding: 16px; overflow: auto; display:grid; gap:16px; align-content:start; }
.panel-section { border-bottom: 1px solid var(--border); padding-bottom:16px; }
.panel-section:last-child { border-bottom:0; padding-bottom:0; }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.panel-heading h3 { margin:0; font-size:16px; }
.panel-heading p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.tool-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: var(--radius);
    padding: 13px;
    text-align: left;
    min-height: 86px;
}
.tool-card:hover, .project-item:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.tool-card strong { display:block; margin-bottom: 6px; }
.tool-card span { color: var(--muted); font-size: 12px; }
.project-list { display:grid; gap:8px; }
.project-item {
    border:1px solid var(--border);
    background:#fff;
    border-radius:var(--radius);
    padding:10px 12px;
    text-align:left;
}
.project-item strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-item span { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.project-item.active { border-color:var(--teal); background:#f0fdfa; }
.upload-box {
    display:grid;
    gap:10px;
}
.upload-box input[type="file"] {
    width:100%;
    border:1px dashed var(--border);
    background:#fbfcfd;
    border-radius:var(--radius);
    padding:11px;
}
.upload-box button {
    width:100%;
}
.error-text {
    color:var(--danger);
}
.locked-list {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}
.locked-list span {
    border:1px solid var(--border);
    border-radius:999px;
    padding:7px 10px;
    color:var(--muted);
    background:#fff;
    font-size:12px;
}
.icon-btn {
    border:1px solid var(--border);
    background:#fff;
    border-radius:var(--radius);
    min-width:36px;
    height:34px;
    padding:0 9px;
    font-size:12px;
    font-weight:800;
}
.icon-btn:hover { border-color:var(--teal); color:var(--teal); }
.icon-btn.danger:hover { border-color:var(--danger); color:var(--danger); }
.mini-actions { display:flex; gap:6px; }
.file-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.file-tabs button {
    border:1px solid var(--border);
    background:#fff;
    border-radius:6px;
    padding:6px 8px;
    font-size:12px;
    max-width:130px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.file-tabs button.active { border-color:var(--primary); color:var(--primary); background:#eff6ff; }
.file-viewer {
    min-height:120px;
    max-height:210px;
    overflow:auto;
    white-space:pre-wrap;
    background:#101827;
    color:#dbeafe;
    border-radius:var(--radius);
    padding:12px;
    margin:0 0 10px;
}
.preview-frame {
    width:100%;
    height:260px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:#fff;
}
.loading-dots::after {
    content: '...';
    animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots { 0%, 20% { color: transparent; text-shadow: .25em 0 0 transparent, .5em 0 0 transparent; } 40% { color: inherit; text-shadow: .25em 0 0 transparent, .5em 0 0 transparent; } 60% { text-shadow: .25em 0 0 currentColor, .5em 0 0 transparent; } 80%, 100% { text-shadow: .25em 0 0 currentColor, .5em 0 0 currentColor; } }

.admin-table { width:100%; border-collapse: collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.admin-table th, .admin-table td { padding:13px 14px; border-bottom:1px solid var(--border); text-align:left; }
.admin-table th { background:#f7f8fb; }
.admin-page { min-height:100vh; padding:24px; background:var(--bg); }
.admin-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:16px; }
.admin-card { background:#fff; border-radius:12px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); overflow:auto; }
.settings-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-form input, .inline-form select { border:1px solid var(--border); border-radius:8px; padding:8px; }
.inline-form input { width:90px; }
.inline-form button { border:0; border-radius:8px; padding:8px 12px; background:var(--primary); color:#fff; }
.status-badge {
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:800;
    text-transform:capitalize;
}
.status-badge.pending { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
.status-badge.active { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }
.status-badge.suspended { background:#fff1f2; color:#be123c; border:1px solid #fecdd3; }
.check-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; }
.check-item { border:1px solid var(--border); border-radius:var(--radius); padding:12px; background:#fff; display:grid; gap:4px; }
.check-item span { font-size:12px; color:var(--muted); }
.check-item.ok { border-color:#a7f3d0; background:#ecfdf5; }
.check-item.ok span { color:#047857; }
.check-item.bad { border-color:#fecdd3; background:#fff1f2; }
.check-item.bad span { color:#be123c; }

@media (max-width: 1200px) {
    .app-shell { grid-template-columns: 240px 1fr; }
    .workspace { grid-template-columns: 1fr; height:auto; overflow:auto; }
    .app-body { overflow:auto; }
    .tools-panel { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
    .app-body { height: auto; }
    .app-shell { grid-template-columns: 1fr; height: auto; }
    .sidebar { position: static; }
    .main-panel { padding: 10px; }
    .topbar { align-items: stretch; flex-direction: column; }
    .top-actions { justify-content:stretch; }
    .top-actions > * { width:100%; }
    .chat-panel { min-height: 72vh; }
    .messages { padding: 12px 14px 18px; }
    .message .bubble { max-width: 88%; }
    .composer { margin:0 14px; grid-template-columns:1fr; }
    .composer button { width:100%; }
    .tool-grid { grid-template-columns:1fr; }
    .settings-grid { grid-template-columns:1fr; }
}