:root {
  --brand-blue: #3288dd;
  --brand-blue-light: #6aaef0;
  --brand-blue-glow: #3288dd38;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101114;
  color: #ececf0;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .56; }
.hidden { display: none !important; }

.app-shell { display: flex; height: 100dvh; overflow: hidden; }
.sidebar {
  width: 272px; flex: 0 0 272px; display: flex; flex-direction: column;
  background: #151619; border-right: 1px solid #25262c; z-index: 10;
}
.sidebar-top { padding: 17px 17px 12px; }
.brand { display: flex; align-items: flex-start; justify-content: flex-start; padding: 0 3px 18px; }
.brand-logo {
  display: block; width: 76px; height: 76px; flex: 0 0 76px; object-fit: contain;
}
.new-button {
  display: flex; align-items: center; width: 100%; gap: 10px; padding: 11px 13px;
  border: 1px solid #34363c; border-radius: 10px; background: #222328;
  color: #f5f5f6; font-weight: 600; font-size: 13px; text-align: left;
  transition: background .2s, border-color .2s;
}
.new-button:hover { background: #2a2c31; border-color: #474a50; }
.new-icon { font-size: 21px; line-height: 15px; font-weight: 300; }
.sidebar-section-title { padding: 35px 12px 10px; color: #777982; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.history-list { overflow-y: auto; flex: 1; padding: 0 10px 14px; }
.history-item {
  display: block; width: 100%; padding: 12px; margin-bottom: 3px; border: 0;
  border-radius: 9px; background: transparent; color: #b8b9c1; text-align: left;
}
.history-item:hover, .history-item.active { background: #27292e; color: #f3f4f5; }
.history-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.history-meta { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: #80828b; font-size: 10px; }
.history-empty { padding: 5px 12px; color: #858790; font-size: 12px; line-height: 1.6; }
.tiny-dot { width: 6px; height: 6px; border-radius: 50%; background: #888a92; }
.tiny-dot.completed { background: #43bd91; }
.tiny-dot.failed, .tiny-dot.uncertain { background: #e48c80; }
.tiny-dot.pending, .tiny-dot.processing, .tiny-dot.submitting { background: #e7b766; }
.sidebar-bottom { border-top: 1px solid #28292e; padding: 17px 20px 23px; }
.sidebar-footnote { display: flex; align-items: center; gap: 8px; color: #9a9ca4; font-size: 11px; }
.online-dot, .indicator-pulse { width: 7px; height: 7px; border-radius: 50%; background: #52c798; box-shadow: 0 0 11px #52c79885; }
.indicator-pulse { background: var(--brand-blue); box-shadow: 0 0 11px var(--brand-blue-glow); }
.quiet-button { display: flex; justify-content: space-between; width: 100%; padding: 17px 0 0; border: 0; background: none; color: #aaaab2; font-size: 12px; }
.quiet-button:hover { color: #fff; }

.main-panel { min-width: 0; flex: 1; display: flex; flex-direction: column; background: #101114; }
.topbar {
  height: 68px; flex: 0 0 68px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 0 34px; border-bottom: 1px solid #202127;
}
.topbar-left, .page-identity, .topbar-right { display: flex; align-items: center; }
.page-identity { gap: 10px; color: #8c8e96; font-size: 13px; }
.page-identity strong { color: #d9dbe0; font-weight: 600; }
.page-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }
.page-chevron { color: #4b4e56; }
.model-indicator {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid #2a2d31;
  border-radius: 20px; color: #b6b8bf; font-size: 11px; white-space: nowrap;
}
.scroll-area { flex: 1; min-height: 0; overflow-y: auto; padding: 0 30px; }
.welcome { max-width: 720px; margin: min(13vh, 115px) auto 48px; text-align: center; }
.welcome-mark {
  width: 58px; height: 58px; margin: 0 auto 29px;
  filter: drop-shadow(0 0 18px var(--brand-blue-glow));
}
.welcome-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.welcome-kicker { color: var(--brand-blue); font-size: 10px; letter-spacing: .2em; font-weight: 800; }
.welcome h1 { margin: 17px 0 14px; font-size: clamp(31px, 4vw, 48px); line-height: 1.12; letter-spacing: -.055em; font-weight: 650; }
.welcome h1 em { color: var(--brand-blue-light); font-style: normal; }
.welcome p { max-width: 520px; margin: 0 auto; color: #999ba4; font-size: 14px; line-height: 1.7; }
.suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 46px; }
.suggestion {
  display: flex; flex-direction: column; align-items: flex-start; min-height: 106px; padding: 15px;
  border: 1px solid #2b2d33; border-radius: 13px; background: #1b1c21; color: #d5d6db;
  text-align: left; font-size: 12px; transition: transform .2s, border-color .2s, background .2s;
}
.suggestion:hover { transform: translateY(-3px); border-color: #426486; background: #202329; }
.suggestion-icon { display: grid; place-items: center; width: 27px; height: 27px; margin-bottom: 16px; border-radius: 7px; font-size: 17px; }
.suggestion-icon.violet { color: #d0bcff; background: #6a4ca438; }
.suggestion-icon.teal { color: #8fc4fa; background: #3288dd38; }
.suggestion-icon.amber { color: #f2d28a; background: #8a682f38; }
.suggestion-arrow { align-self: flex-end; margin-top: -14px; color: #71747d; }

.conversation { max-width: 780px; min-height: 100%; margin: 0 auto; padding: 40px 0 54px; }
.message-label { margin: 0 0 11px; color: #888b94; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.user-message { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 36px; }
.user-bubble { max-width: min(85%, 650px); padding: 17px 20px; background: #25272c; border: 1px solid #303238; border-radius: 18px 18px 4px 18px; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.prompt-images { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.prompt-images img { width: 76px; height: 76px; object-fit: cover; border: 1px solid #3c3e44; border-radius: 10px; }
.assistant-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; font-size: 13px; font-weight: 700; }
.assistant-heading .brand-logo { width: 24px; height: 24px; flex-basis: 24px; }
.result-card { overflow: hidden; border: 1px solid #303238; border-radius: 16px; background: #1a1c20; }
.result-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #2c2e33; }
.result-title { color: #eef0f2; font-weight: 700; font-size: 14px; }
.result-subtitle { margin-top: 5px; color: #82858f; font-size: 11px; }
.status-pill { padding: 6px 9px; border-radius: 99px; background: #38342b; color: #edc985; font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-pill.completed { background: #1d4535; color: #85dfae; }
.status-pill.failed, .status-pill.uncertain { background: #4c2c2b; color: #efa79f; }
.result-body { padding: 22px; }
.result-body p { margin: 0; color: #a8abb3; line-height: 1.65; font-size: 13px; }
.result-body .error-text { color: #efb7af; white-space: pre-wrap; overflow-wrap: anywhere; }
.video-player { display: block; width: 100%; max-height: 480px; border-radius: 10px; background: #0b0c0e; }
.result-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 20px; border-top: 1px solid #2c2e33; color: #7d808a; font-size: 11px; }
.download-button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #365d82; border-radius: 8px; background: #20384e; color: #9ccafa; text-decoration: none; font-size: 11px; font-weight: 700; }
.download-button:hover { background: #294965; }
.refresh-button { border: 0; padding: 0; color: #8dbdec; background: none; font-size: 11px; }

.composer-wrap { width: min(100%, 838px); padding: 12px 24px 19px; margin: 0 auto; flex: 0 0 auto; }
.composer { padding: 13px 13px 11px; border: 1px solid #3a3c42; border-radius: 16px; background: #202126; box-shadow: 0 15px 50px #0004, inset 0 1px #ffffff08; }
.composer:focus-within { border-color: var(--brand-blue); }
.composer.dragging { border-color: var(--brand-blue-light); background: #1d2a38; }
.prompt-row textarea { display: block; width: 100%; min-height: 63px; max-height: 220px; resize: vertical; padding: 6px 7px 11px; border: 0; outline: 0; color: #f3f4f5; background: transparent; font-size: 14px; line-height: 1.55; }
.prompt-row textarea::placeholder { color: #858791; }
.composer-controls, .control-left { display: flex; align-items: center; }
.composer-controls { justify-content: space-between; gap: 14px; }
.control-left { flex-wrap: wrap; gap: 8px; }
.tool-button, .icon-button { display: grid; place-items: center; width: 31px; height: 31px; border: 0; border-radius: 7px; color: #b6b8c0; background: transparent; }
.tool-button:hover, .icon-button:hover { color: white; background: #373940; }
.tool-button svg, .send-button svg { width: 19px; height: 19px; }
.control-divider { height: 18px; border-left: 1px solid #3d3e45; margin: 0 3px; }
.select-control { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid #393b41; border-radius: 7px; color: #848790; font-size: 11px; }
.select-control select { max-width: 126px; appearance: none; border: 0; outline: 0; color: #dadce1; background: transparent; font-size: 11px; cursor: pointer; }
.select-control select option { background: #222328; color: #fff; }
.send-button { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 0; border-radius: 10px; color: #fff; background: var(--brand-blue); transition: background .2s, transform .2s; }
.send-button:hover { background: #4a9ae8; transform: translateY(-2px); }
.composer-caption { margin-top: 10px; text-align: center; color: #767983; font-size: 10px; }
.attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 4px 11px; }
.attachment-chip { display: flex; align-items: center; gap: 7px; max-width: 215px; padding: 5px 6px; border: 1px solid #45484b; border-radius: 8px; background: #2d3033; color: #e8eaeb; font-size: 11px; }
.attachment-chip img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { width: 20px; height: 20px; padding: 0; border: 0; color: #b8b9bb; background: transparent; font-size: 17px; }

.login-screen { display: grid; place-items: center; min-height: 100dvh; padding: 20px; background: radial-gradient(circle at 50% 32%, #14273a 0, #101114 43%); }
.login-card { width: min(100%, 410px); padding: 42px; border: 1px solid #303844; border-radius: 20px; background: #1b1e1e; box-shadow: 0 30px 85px #0008; }
.login-card .brand-logo.large { width: 72px; height: 72px; margin-bottom: 24px; }
.login-card h1 { margin: 13px 0; font-size: 29px; line-height: 1.18; letter-spacing: -.04em; }
.login-card p { color: #a0a5a5; font-size: 13px; line-height: 1.6; }
.login-card label { display: block; margin: 29px 0 9px; font-size: 11px; font-weight: 700; color: #cbd1ce; }
.login-card input { width: 100%; padding: 12px 13px; border: 1px solid #414944; border-radius: 9px; outline: none; color: white; background: #121515; }
.login-card input:focus { border-color: var(--brand-blue); }
.login-card .form-error { min-height: 18px; margin: 7px 0 10px; color: #f0aaa3; }
.primary-button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 9px; background: var(--brand-blue); color: #fff; font-size: 13px; font-weight: 800; }
.primary-button:hover { background: #4a9ae8; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 30; max-width: 400px; padding: 13px 16px; border: 1px solid #664841; border-radius: 10px; background: #332522; color: #f2d5ce; font-size: 12px; box-shadow: 0 10px 35px #0007; }
.menu-button, .mobile-shade { display: none; }

@media (max-width: 900px) {
  .sidebar { width: 235px; flex-basis: 235px; }
  .topbar { padding: 0 24px; }
  .suggestions { margin-top: 30px; }
}
@media (max-width: 700px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-shade:not(.hidden) { display: block; position: fixed; inset: 0; z-index: 9; background: #0009; }
  .menu-button { display: grid; margin-right: 10px; }
  .topbar { height: 58px; flex-basis: 58px; padding: 0 16px; }
  .model-indicator { padding: 6px 8px; font-size: 10px; }
  .scroll-area { padding: 0 18px; }
  .welcome { margin-top: 52px; }
  .welcome-mark { width: 48px; height: 48px; margin-bottom: 24px; }
  .welcome p { font-size: 13px; }
  .suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 27px; }
  .suggestion { min-height: 50px; flex-direction: row; align-items: center; gap: 12px; }
  .suggestion-icon { flex: 0 0 27px; margin: 0; }
  .suggestion-arrow { margin: 0 0 0 auto; }
  .composer-wrap { padding: 10px 10px 13px; }
  .select-control span { display: none; }
  .select-control select { max-width: 85px; }
  .composer-caption { font-size: 9px; }
  .login-card { padding: 28px; }
}