:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0d12;
  color: #eef1f7;
  --app-height: 100vh;
  --sidebar-width: 286px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0b0d12; }
body { min-height: var(--app-height); overflow-x: hidden; }
button, textarea, select, input { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.hidden { display: none !important; }
.muted { color: #7f899a; }
.centered { text-align: center; }
.full-width { width: 100%; }
.mobile-only { display: none; }

.landing { min-height: var(--app-height); display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 10%, rgba(110,92,255,.18), transparent 34%), radial-gradient(circle at 80% 80%, rgba(31,174,255,.12), transparent 28%), #0b0d12; }
.landing-card { width: min(520px, 100%); padding: 42px; border: 1px solid #252a36; border-radius: 28px; background: rgba(18,21,29,.9); box-shadow: 0 24px 90px rgba(0,0,0,.35); text-align: center; }
.brand-mark, .empty-icon { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(145deg,#7c69ff,#35a8ff); box-shadow: 0 10px 35px rgba(90,101,255,.3); font-size: 34px; font-weight: 700; }
.brand-mark.small { width: 50px; height: 50px; border-radius: 16px; font-size: 27px; margin-bottom: 14px; }
.landing-card h1 { margin: 0 0 12px; font-size: 38px; }
.landing-card p { margin: 0 auto 28px; max-width: 420px; color: #aeb6c7; line-height: 1.55; }
.landing-card small { display: block; margin-top: 16px; color: #717b8e; }

.primary-button, .secondary-button, .new-chat, .nav-button, .starter, .icon-text-button, .message-action, .danger-button, .icon-button, .load-more, .jump-bottom { border: 0; border-radius: 12px; cursor: pointer; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 18px; background: #5c66ff; color: white; text-decoration: none; font-weight: 650; }
.primary-button:hover { background: #6973ff; }
.primary-button:disabled, .secondary-button:disabled { opacity: .45; cursor: default; }
.secondary-button { min-height: 40px; padding: 0 13px; border: 1px solid #30384a; background: transparent; color: #dce2ee; cursor: pointer; border-radius: 12px; }
.secondary-button:hover { background: #171c26; }
.danger-button { min-height: 40px; padding: 0 13px; border: 1px solid #5b3036; background: #241316; color: #ffaaaa; }
.danger-button:hover { background: #31181d; }
.icon-button { width: 38px; height: 38px; background: #171c25; border: 1px solid #2b3240; color: #cbd3df; }

.app-shell { min-height: var(--app-height); display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
.sidebar { height: var(--app-height); position: sticky; top: 0; display: flex; flex-direction: column; background: #10131a; border-right: 1px solid #222733; padding: 16px 13px; z-index: 20; }
.sidebar-top { display: grid; gap: 14px; }
.brand-row { display: flex; align-items: center; gap: 8px; }
.brand { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 8px; font-size: 18px; }
.brand-mini { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg,#7866ff,#35a8ff); }
.version-chip { margin-left: auto; color: #667187; font-size: 11px; font-weight: 600; }
.product-nav { display: grid; gap: 3px; }
.nav-button { min-height: 38px; padding: 0 11px; text-align: left; background: transparent; color: #9ca6b8; }
.nav-button:hover, .nav-button.active { background: #191e28; color: #fff; }
.new-chat { min-height: 42px; padding: 0 13px; text-align: left; background: #1a1f2a; color: #f3f5fa; border: 1px solid #2a3140; }
.new-chat:hover { background: #202634; }
#conversation-sidebar { min-height: 0; display: flex; flex-direction: column; flex: 1; }
.conversation-search-wrap { padding: 15px 4px 5px; }
.conversation-search { height: 36px; padding: 0 10px; font-size: 12px; background: #0d1118; }
.sidebar-label-row { display: flex; align-items: center; justify-content: space-between; margin: 7px 8px 6px; }
.sidebar-label { color: #707b8e; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.conversation-list { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 4px; }
.conversation-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px; }
.conversation-item { width: 100%; min-width: 0; border: 0; border-radius: 10px; padding: 9px 10px; text-align: left; color: #aeb6c7; background: transparent; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-item:hover, .conversation-item.active { background: #191e28; color: #fff; }
.conversation-more { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: #667187; cursor: pointer; }
.conversation-more:hover { background: #1b202b; color: #dce2ee; }
.load-more { margin: 8px 4px 0; min-height: 32px; background: #151a23; color: #7f8a9c; font-size: 12px; }
.sidebar-bottom { margin-top: 14px; display: grid; gap: 8px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 8px 5px 0; }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #2a3040; }
.user-copy { min-width: 0; display: grid; }
.user-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.text-button { border: 0; background: none; color: #747f91; padding: 2px 0; text-align: left; cursor: pointer; font-size: 12px; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 15; background: rgba(0,0,0,.58); backdrop-filter: blur(2px); }

.content-view { min-width: 0; min-height: var(--app-height); background: #0b0d12; }
.chat-panel { display: grid; grid-template-rows: auto 1fr auto; height: var(--app-height); }
.chat-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 24px; border-bottom: 1px solid #1b202a; background: rgba(11,13,18,.92); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 5; }
.chat-title-row { min-width: 0; flex: 1; display: flex; align-items: center; gap: 18px; }
.chat-header h2, .workspace-header h2 { margin: 3px 0 0; font-size: 19px; font-weight: 650; }
.chat-header h2 { max-width: 500px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eyebrow { color: #6f7a8c; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.conversation-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.icon-text-button { padding: 7px 8px; background: transparent; color: #737e90; font-size: 11px; }
.icon-text-button:hover { background: #181d26; color: #e1e6ef; }
.icon-text-button.danger:hover { color: #ff9191; }
.header-controls { display: flex; align-items: flex-end; gap: 9px; }
.model-picker { display: grid; gap: 4px; color: #788397; font-size: 11px; }
.model-picker select { min-width: 180px; height: 39px; border-radius: 10px; border: 1px solid #2b3240; background: #131720; color: #eef1f7; padding: 0 10px; }
#branch-picker select { min-width: 150px; max-width: 220px; }

.messages { width: min(920px,100%); height: 100%; margin: 0 auto; padding: 34px 26px 150px; overflow-y: auto; overscroll-behavior: contain; }
.empty-state { max-width: 620px; margin: 13vh auto 0; text-align: center; color: #8b95a6; }
.empty-state h3 { margin: 0 0 8px; color: #eef1f7; font-size: 24px; }
.empty-state p { margin: 0; line-height: 1.5; }
.empty-icon { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; }
.starter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.starter { padding: 9px 12px; border: 1px solid #29303d; background: #131720; color: #aeb6c7; font-size: 13px; }
.starter:hover { background: #1a1f2a; color: #fff; }
.message { display: flex; margin: 0 0 24px; }
.message.user { justify-content: flex-end; }
.message-inner { max-width: min(760px,88%); min-width: 0; }
.message-bubble { line-height: 1.6; overflow-wrap: anywhere; }
.message.user .message-bubble { padding: 12px 16px; border-radius: 18px 18px 5px 18px; background: #25345e; color: #f6f8ff; white-space: pre-wrap; }
.message.assistant .message-bubble { padding: 3px 2px; color: #d9dfeb; }
.message.pending .message-bubble { color: #727d8f; }
.message.error .message-bubble { color: #ff9d9d; }
.message-meta { min-height: 24px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 7px; color: #596477; font-size: 11px; }
.message.user .message-meta { justify-content: flex-end; }
.message-action { padding: 4px 7px; background: transparent; color: #657084; font-size: 11px; opacity: .15; transition: opacity .15s,background .15s; }
.message:hover .message-action, .message-action.active, .message-action:focus-visible { opacity: 1; }
.message-action:hover { background: #181d26; color: #dce2ee; }
.model-badge { padding: 2px 6px; border-radius: 8px; background: #12161d; color: #667287; }
.message-stat { color: #596477; }
.message-bubble p { margin: 0 0 11px; }
.message-bubble p:last-child { margin-bottom: 0; }
.message-bubble ul, .message-bubble ol { margin: 7px 0 11px 22px; padding: 0; }
.message-bubble li { margin: 4px 0; }
.message-bubble h1, .message-bubble h2, .message-bubble h3 { margin: 17px 0 8px; color: #f1f4f8; line-height: 1.3; }
.message-bubble h1 { font-size: 20px; } .message-bubble h2 { font-size: 18px; } .message-bubble h3 { font-size: 16px; }
.message-bubble blockquote { margin: 10px 0; padding: 4px 12px; border-left: 3px solid #48536a; color: #aab3c2; }
.message-bubble code { padding: 2px 5px; border-radius: 6px; background: #181d25; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .92em; }
.message-bubble pre { overflow-x: auto; padding: 13px; border: 1px solid #272e3a; border-radius: 12px; background: #11151c; }
.message-bubble pre code { padding: 0; background: transparent; }
.message-bubble a { color: #7fa5ff; }
.jump-bottom { position: fixed; right: 30px; bottom: 115px; z-index: 8; padding: 8px 12px; border: 1px solid #30384a; background: #171d27; color: #cbd3df; box-shadow: 0 8px 30px rgba(0,0,0,.3); }

.composer-wrap { position: fixed; bottom: 0; left: var(--sidebar-width); right: 0; padding: 18px 26px calc(15px + var(--safe-bottom)); background: linear-gradient(to top,#0b0d12 72%,rgba(11,13,18,0)); z-index: 6; }
.composer { max-width: 920px; margin: 0 auto; display: flex; align-items: flex-end; gap: 9px; padding: 10px 10px 10px 16px; border: 1px solid #2a3140; border-radius: 19px; background: #151922; box-shadow: 0 12px 50px rgba(0,0,0,.25); }
.composer textarea { flex: 1; min-height: 30px; max-height: 170px; resize: none; border: 0; outline: 0; background: transparent; color: #f2f4f8; line-height: 1.45; padding: 6px 0; }
.composer textarea::placeholder { color: #626d7f; }
.send-button, .stop-button { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 12px; cursor: pointer; }
.send-button { background: #6e62ff; color: white; font-size: 22px; }
.stop-button { background: #2a2f3a; color: #f0f3f8; font-size: 15px; }
.send-button:disabled { opacity: .45; cursor: default; }
.disclaimer { max-width: 920px; margin: 7px auto 0; text-align: center; color: #555f70; font-size: 11px; }

.workspace { padding-bottom: calc(50px + var(--safe-bottom)); }
.workspace-header { min-height: 100px; padding: 28px 34px 20px; border-bottom: 1px solid #1b202a; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.workspace-header p { margin: 10px 0 0; max-width: 740px; color: #838e9f; line-height: 1.5; }
.workspace-header-actions { display: flex; gap: 8px; }
.workspace-grid { width: min(1120px,calc(100% - 48px)); margin: 26px auto; display: grid; gap: 18px; }
.diary-grid, .memory-grid { grid-template-columns: minmax(300px,.9fr) minmax(360px,1.1fr); }
.panel-card { border: 1px solid #232a36; border-radius: 18px; background: #11151c; padding: 20px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-card h3 { margin: 0 0 14px; font-size: 16px; }
.editor-card, .compact-form { display: grid; align-content: start; gap: 14px; }
label { display: grid; gap: 6px; color: #919cad; font-size: 12px; }
input, textarea, select { width: 100%; border: 1px solid #2b3240; border-radius: 11px; background: #0c1017; color: #edf1f7; outline: none; padding: 10px 11px; }
input:focus, textarea:focus, select:focus { border-color: #5968a8; box-shadow: 0 0 0 3px rgba(91,105,185,.12); }
textarea { resize: vertical; line-height: 1.5; }
.form-row { display: grid; gap: 12px; }
.two-columns { grid-template-columns: 1fr 1fr; }
.three-columns { grid-template-columns: repeat(3,1fr); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.compact-form small { color: #657084; line-height: 1.45; }
.stack-list { display: grid; gap: 10px; }
.stack-item { border: 1px solid #242b37; border-radius: 13px; background: #0e1218; padding: 13px; }
.stack-item-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.stack-item h4 { margin: 0; font-size: 14px; }
.stack-item p { margin: 7px 0 0; color: #aab3c2; line-height: 1.5; white-space: pre-wrap; }
.stack-item-meta { margin-top: 8px; color: #5f697b; font-size: 11px; }
.stack-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stack-actions button { border: 0; border-radius: 9px; padding: 6px 8px; background: #171c25; color: #8e99aa; cursor: pointer; font-size: 11px; }
.stack-actions button:hover { color: #fff; }
.stack-actions button.danger:hover { color: #ff9090; }
.empty-list { padding: 28px 12px; text-align: center; color: #606b7c; }
.analysis-card { margin: 0 0 14px; padding: 14px; border: 1px solid #323a4a; border-radius: 13px; background: #101722; color: #c8d0dc; line-height: 1.55; }
.analysis-card p { margin: 0 0 9px; }
.analysis-meta { margin-bottom: 8px; color: #6f7b90; font-size: 11px; }

.practice-grid { width: min(1120px,calc(100% - 48px)); margin: 26px auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 14px; }
.practice-card { border: 1px solid #242b37; border-radius: 17px; background: #11151c; padding: 18px; }
.practice-card h3 { margin: 0 0 6px; font-size: 16px; }
.practice-card p { margin: 0 0 12px; color: #8f99a9; line-height: 1.5; }
.practice-time { color: #647086; font-size: 11px; }
.practice-card details { margin: 12px 0; color: #aab3c2; font-size: 13px; }
.practice-card summary { cursor: pointer; color: #8f9bad; }
.practice-card ol { padding-left: 20px; line-height: 1.5; }
.practice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.practice-card .primary-button, .practice-card .secondary-button { min-height: 38px; font-size: 13px; }
.score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal-dialog { width: min(640px,calc(100% - 28px)); max-height: min(88vh,800px); padding: 0; border: 1px solid #303746; border-radius: 22px; background: #12161f; color: #eef1f7; box-shadow: 0 28px 100px rgba(0,0,0,.55); overflow: auto; }
.modal-dialog::backdrop { background: rgba(3,5,10,.72); backdrop-filter: blur(5px); }
.modal-card { padding: 24px; display: grid; gap: 15px; }
.modal-card h3 { margin: 3px 0 0; font-size: 23px; }
.modal-card p { margin: 0; color: #aeb6c7; line-height: 1.5; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-close { width: 36px; height: 36px; border: 1px solid #303746; border-radius: 11px; background: #181d27; color: #cdd4e1; cursor: pointer; font-size: 23px; line-height: 1; }
.copy-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.copy-row input { min-width: 0; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.secondary-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid #30384a; border-radius: 12px; color: #dce2ee; text-decoration: none; }
.secondary-link:hover { background: #171c26; }
.onboarding-dialog .modal-card { padding: 30px; }
.compact-modal { max-width: 520px; margin: auto; }
.settings-card { gap: 14px; }
.settings-section { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #262d39; }
.settings-section h4 { margin: 0 0 3px; font-size: 14px; }
.toggle-row { grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 8px 0; }
.toggle-row input { width: 18px; height: 18px; margin: 1px 0 0; padding: 0; }
.toggle-row span { display: grid; gap: 3px; }
.toggle-row strong { color: #d9dfeb; font-size: 13px; }
.toggle-row small { color: #707b8e; line-height: 1.4; }
.account-section .secondary-button, .account-section .danger-button { justify-self: start; }

.toast { position: fixed; left: 50%; bottom: calc(104px + var(--safe-bottom)); transform: translateX(-50%); z-index: 60; max-width: min(560px,calc(100% - 28px)); padding: 10px 14px; border-radius: 12px; background: #242a36; color: #f1f4f8; border: 1px solid #343c4b; box-shadow: 0 10px 40px rgba(0,0,0,.35); text-align: center; }

@media (max-width: 1080px) {
  :root { --sidebar-width: 248px; }
  .chat-header { padding: 10px 14px; }
  .conversation-actions { display: none !important; }
  .model-picker select { min-width: 150px; max-width: 190px; }
  .diary-grid, .memory-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --sidebar-width: 0px; }
  .mobile-only { display: inline-grid; place-items: center; }
  .app-shell { display: block; min-height: var(--app-height); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(330px,88vw); height: var(--app-height); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 14px 0 50px rgba(0,0,0,.38); border-right: 1px solid #2a3140; padding: calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + var(--safe-bottom)); }
  .sidebar.mobile-open { transform: translateX(0); }
  .brand-row .icon-button { margin-left: auto; }
  .product-nav { grid-template-columns: 1fr 1fr; }
  .conversation-search-wrap { padding-top: 10px; }
  .chat-panel { height: var(--app-height); min-height: var(--app-height); }
  .chat-header { min-height: 66px; position: sticky; padding: calc(8px + env(safe-area-inset-top,0px)) 10px 8px; align-items: center; gap: 8px; }
  .chat-title-row { min-width: 0; gap: 7px; }
  .chat-title-row > div:first-child { min-width: 0; }
  .chat-header h2 { max-width: 42vw; font-size: 16px; }
  .header-controls { margin-left: auto; gap: 5px; }
  .model-picker span { display: none; }
  .model-picker select { min-width: 112px; max-width: 132px; height: 36px; padding: 0 7px; font-size: 11px; }
  #branch-picker select { min-width: 92px; max-width: 110px; }
  .messages { padding: 20px 13px calc(142px + var(--safe-bottom)); }
  .message-inner { max-width: 95%; }
  .message-action { opacity: 1; }
  .message-meta { gap: 2px; }
  .message-action { padding: 5px 6px; }
  .starter-row { display: grid; }
  .composer-wrap { left: 0; padding: 10px 10px calc(9px + var(--safe-bottom)); }
  .composer { border-radius: 17px; padding-left: 13px; }
  .composer textarea { max-height: min(150px,35vh); }
  .jump-bottom { right: 14px; bottom: calc(108px + var(--safe-bottom)); }
  .workspace { min-height: var(--app-height); }
  .workspace-header { padding: calc(18px + env(safe-area-inset-top,0px)) 16px 15px; display: grid; }
  .workspace-grid, .practice-grid { width: calc(100% - 20px); margin: 12px auto; }
  .two-columns, .three-columns, .score-row { grid-template-columns: 1fr; }
  .panel-card { padding: 15px; border-radius: 15px; }
  .modal-dialog { width: calc(100% - 18px); max-height: calc(var(--app-height) - 22px); border-radius: 18px; }
  .modal-card { padding: 18px; }
  .copy-row { grid-template-columns: 1fr; }
  .onboarding-dialog .modal-card { padding: 22px 18px; }
  .landing-card { padding: 30px 22px; }
  .toast { bottom: calc(96px + var(--safe-bottom)); }
}

@media (hover: none) {
  .message-action { opacity: 1; }
}