:root {
  color-scheme: dark;
  --ink: #eef5ff;
  --muted: #8da0b8;
  --canvas: #07111f;
  --panel: #0d1a2b;
  --panel-2: #132239;
  --line: rgba(157, 180, 211, .15);
  --blue: #45a3ff;
  --blue-2: #177ee6;
  --green: #54d39a;
  --white-card: #f7f9fc;
  --card-ink: #172238;
  --danger: #ff6c7b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--ink); }
body { min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button, .upload-button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); line-height: 1.65; }
.eyebrow { margin: 0 0 .45rem; color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .16em; }
.error { color: var(--danger); min-height: 1.2rem; font-size: .86rem; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; position: relative; overflow: hidden; }
.login-shell::before { content: ""; position: absolute; width: 55rem; height: 55rem; border-radius: 50%; background: radial-gradient(circle, rgba(20,126,230,.22), transparent 66%); transform: translate(-35%, -42%); }
.login-card { width: min(33rem, 100%); padding: 3.2rem; background: rgba(13,26,43,.88); border: 1px solid var(--line); border-radius: 2rem; box-shadow: 0 35px 100px rgba(0,0,0,.45); backdrop-filter: blur(18px); position: relative; }
.login-avatar { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: 50%; border: 3px solid rgba(69,163,255,.5); margin-bottom: 1.5rem; }
.login-card h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.04; margin: 0 0 1rem; letter-spacing: -.045em; }
.login-card label { display: block; margin: 2rem 0 .5rem; color: #c8d5e6; font-size: .8rem; font-weight: 700; }
.token-row { display: flex; gap: .65rem; }
input, textarea, select { background: #081423; color: var(--ink); border: 1px solid rgba(157,180,211,.23); border-radius: .9rem; padding: .85rem 1rem; outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(69,163,255,.13); }
.token-row input { flex: 1; min-width: 0; }
.primary, .quiet { border: 0; border-radius: .85rem; padding: .78rem 1rem; font-weight: 750; color: white; }
.primary { background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 8px 22px rgba(23,126,230,.22); }
.primary:hover { filter: brightness(1.08); }
.quiet { background: rgba(129,159,198,.12); color: #cbd9eb; border: 1px solid var(--line); }
.button-link { display: inline-flex; text-decoration: none; margin-top: .7rem; }

.app-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); padding: 1.5rem 1rem; display: flex; flex-direction: column; background: #081421; }
.brand { display: flex; align-items: center; gap: .8rem; padding: .2rem .55rem 2rem; }
.brand img { width: 2.7rem; height: 2.7rem; object-fit: cover; border-radius: 50%; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 1.2rem; }
.brand span { color: var(--muted); font-size: .72rem; margin-top: .1rem; }
.sidebar nav { display: grid; gap: .25rem; }
.sidebar nav button { display: flex; align-items: center; gap: .8rem; color: #9fb0c6; background: transparent; border: 0; border-radius: .8rem; padding: .8rem .9rem; text-align: left; font-weight: 700; }
.sidebar nav button span { width: 1.25rem; color: #6f87a5; text-align: center; }
.sidebar nav button:hover { background: rgba(255,255,255,.04); color: white; }
.sidebar nav button.active { background: linear-gradient(90deg, rgba(43,140,238,.2), rgba(43,140,238,.06)); color: #dff0ff; }
.sidebar nav button.active span { color: var(--blue); }
.server-pill { margin-top: auto; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: .8rem; padding: .7rem .8rem; display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .74rem; }
.server-pill i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(84,211,154,.1); }

.workspace { min-width: 0; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.topbar { height: 5.5rem; border-bottom: 1px solid var(--line); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; background: rgba(7,17,31,.86); backdrop-filter: blur(16px); z-index: 5; }
.topbar h2 { margin: 0; font-size: 1.15rem; }
.top-actions { display: flex; align-items: center; gap: .55rem; }
.icon-button, .avatar-button { border: 1px solid var(--line); color: #ccdaeb; background: rgba(255,255,255,.04); width: 2.45rem; height: 2.45rem; border-radius: 50%; font-weight: 800; }
.avatar-button { background: linear-gradient(135deg, #1889ef, #5cb1ff); border: 0; color: white; }
.view { min-height: 0; display: none; }
.view.active { display: block; }
.chat-view.active { display: grid; grid-template-columns: 17rem minmax(0,1fr); }
.chat-sessions { padding: 1rem; border-right: 1px solid var(--line); background: rgba(11,24,40,.65); overflow-y: auto; }
.new-chat { width: 100%; padding: .75rem; border: 1px dashed rgba(69,163,255,.35); color: #b9d9fa; background: rgba(69,163,255,.07); border-radius: .8rem; font-weight: 750; }
#session-list { margin-top: 1rem; display: grid; gap: .3rem; }
.session-item { border: 0; background: transparent; color: #95a8bf; text-align: left; border-radius: .75rem; padding: .75rem; overflow: hidden; }
.session-item strong, .session-item span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-item span { font-size: .7rem; color: #657b97; margin-top: .25rem; }
.session-item.active { background: var(--panel-2); color: white; }
.conversation { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; }
.messages { overflow-y: auto; padding: 2rem max(1.25rem, calc((100% - 52rem)/2)); display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; }
.empty-chat { text-align: center; margin: auto; max-width: 34rem; padding: 2rem; }
.empty-chat img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; box-shadow: 0 18px 45px rgba(0,0,0,.35); }
.empty-chat h3 { font-size: 1.7rem; margin: 1rem 0 .5rem; }
.message { max-width: min(78%, 42rem); display: flex; gap: .65rem; align-items: flex-end; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bubble { background: var(--panel-2); border: 1px solid var(--line); border-radius: 1.15rem 1.15rem 1.15rem .35rem; padding: .85rem 1rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user .bubble { background: linear-gradient(135deg, #1889ef, #116cc4); border-color: transparent; border-radius: 1.15rem 1.15rem .35rem 1.15rem; }
.message-time { display: block; color: rgba(217,232,249,.55); font-size: .64rem; margin-top: .42rem; }
.composer { margin: 0 auto 1.4rem; width: min(calc(100% - 2rem), 52rem); background: var(--panel); border: 1px solid rgba(124,158,202,.2); border-radius: 1.25rem; padding: .55rem; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .45rem; align-items: end; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.composer textarea { resize: none; border: 0; background: transparent; box-shadow: none; min-height: 2.6rem; max-height: 9rem; padding: .7rem .4rem; }
.voice-button, .send-button { width: 2.65rem; height: 2.65rem; border: 0; border-radius: .85rem; color: #b8c9de; background: rgba(255,255,255,.055); font-size: 1.1rem; }
.send-button { color: white; background: var(--blue-2); }
.voice-button.listening { background: var(--danger); color: white; animation: pulse 1.3s infinite; }
@keyframes pulse { 50% { transform: scale(.92); box-shadow: 0 0 0 8px rgba(255,108,123,.08); } }

.content-view { overflow-y: auto; padding: 2rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 auto 1.6rem; max-width: 72rem; }
.section-heading h3, .panel h3 { margin: 0; font-size: 1.4rem; }
.section-heading p, .panel p { color: var(--muted); margin: .4rem 0 0; }
.card-grid, .resource-grid, .timeline, .dashboard-grid { max-width: 72rem; margin: auto; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.white-card { background: var(--white-card); color: var(--card-ink); border-radius: 1.1rem; padding: 1.1rem; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.white-card h4 { margin: .35rem 0; font-size: 1rem; }
.white-card p { margin: .3rem 0; color: #56647a; line-height: 1.45; font-size: .86rem; }
.chip { display: inline-flex; padding: .28rem .52rem; border-radius: 99px; background: #e2edf9; color: #286393; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.timeline { display: grid; gap: .75rem; }
.timeline-item { display: grid; grid-template-columns: 4.5rem minmax(0,1fr) auto; gap: 1rem; align-items: center; background: var(--white-card); color: var(--card-ink); border-radius: 1rem; padding: .95rem 1.1rem; }
.timeline-date { text-align: center; color: #367ab5; font-weight: 850; }
.timeline-date strong, .timeline-date span { display: block; }
.timeline-date strong { font-size: 1.45rem; }
.timeline-date span { font-size: .63rem; letter-spacing: .08em; }
.timeline-copy h4, .timeline-copy p { margin: 0; }
.timeline-copy p { color: #6a7688; font-size: .8rem; margin-top: .25rem; }
.tabs { max-width: 72rem; margin: 0 auto 1rem; display: flex; gap: .4rem; overflow-x: auto; }
.tabs button { border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); padding: .55rem .85rem; }
.tabs button.active { background: rgba(69,163,255,.16); border-color: rgba(69,163,255,.4); color: #d7ebff; }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.resource-card { color: var(--card-ink); background: var(--white-card); border-radius: 1rem; padding: 1rem; text-decoration: none; min-height: 9.5rem; display: flex; flex-direction: column; }
.resource-icon { font-size: 1.7rem; }
.resource-card strong { margin-top: auto; overflow-wrap: anywhere; }
.resource-card small { color: #68758a; margin-top: .35rem; }
.upload-button input { display: none; }

.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1.15rem; padding: 1.2rem; min-height: 13rem; }
.panel.span-two { grid-column: span 2; }
.panel-title { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.compact-list { display: grid; gap: .55rem; margin-top: 1rem; }
.compact-item { border-top: 1px solid var(--line); padding: .75rem 0 0; color: #c5d3e4; }
.compact-item strong, .compact-item span { display: block; }
.compact-item span { color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.api-panel code { color: #80c2ff; }
.empty { color: var(--muted); border: 1px dashed var(--line); border-radius: 1rem; padding: 1.5rem; text-align: center; }

dialog { width: min(32rem, calc(100% - 2rem)); color: var(--ink); background: #0c1929; border: 1px solid rgba(125,158,200,.25); border-radius: 1.25rem; padding: 0; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(2,8,16,.75); backdrop-filter: blur(6px); }
#modal-form { padding: 1.35rem; }
.modal-head, .modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.modal-head h3 { margin: 0; }
.modal-fields { display: grid; gap: .8rem; margin: 1.25rem 0; }
.modal-fields label { color: #acbfd5; font-size: .76rem; font-weight: 750; }
.modal-fields label span { display: block; margin-bottom: .35rem; }
.modal-fields input, .modal-fields textarea, .modal-fields select { width: 100%; }
.modal-actions { justify-content: flex-end; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%); background: #e8f4ff; color: #13243b; border-radius: .75rem; padding: .75rem 1rem; font-weight: 750; z-index: 20; transition: .25s ease; box-shadow: 0 15px 40px rgba(0,0,0,.3); }
.toast.show { transform: translate(-50%, 0); }
.mobile-nav { display: none; }

@media (max-width: 850px) {
  .app-shell { display: block; min-height: 100vh; padding-bottom: 4.2rem; }
  .sidebar { display: none; }
  .workspace { height: calc(100vh - 4.2rem); }
  .topbar { height: 4.6rem; padding: .75rem 1rem; }
  .topbar .quiet { display: none; }
  .chat-view.active { grid-template-columns: 1fr; }
  .chat-sessions { display: none; }
  .messages { padding: 1.25rem 1rem; }
  .message { max-width: 88%; }
  .composer { margin-bottom: .75rem; }
  .content-view { padding: 1.25rem 1rem; }
  .section-heading { align-items: flex-start; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .panel.span-two { grid-column: span 1; }
  .mobile-nav { position: fixed; display: grid; grid-template-columns: repeat(6, 1fr); bottom: 0; left: 0; right: 0; height: 4.2rem; background: rgba(8,20,33,.97); border-top: 1px solid var(--line); z-index: 10; padding-bottom: env(safe-area-inset-bottom); }
  .mobile-nav button { border: 0; background: transparent; color: #7890ab; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; font-weight: 800; }
  .mobile-nav button span { font-size: .58rem; }
  .mobile-nav button.active { color: var(--blue); }
}

@media (max-width: 560px) {
  .login-shell { padding: 1rem; }
  .login-card { padding: 2rem 1.35rem; }
  .token-row { display: grid; }
  .section-heading { display: grid; }
  .section-heading .primary { justify-self: start; }
  .timeline-item { grid-template-columns: 3.6rem minmax(0,1fr); }
  .timeline-item .chip { display: none; }
  .card-grid { grid-template-columns: 1fr; }
}