* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  height: 100dvh;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  background: var(--warmink-canvas);
  color: var(--warmink-text);
  font: 14px/1.65 var(--warmink-font-sans);
}
button, input, textarea { font: inherit; }
button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--warmink-radius-control);
  background: var(--warmink-forest-900);
  color: var(--warmink-text-inverse);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--warmink-duration) var(--warmink-ease),
    border-color var(--warmink-duration) var(--warmink-ease);
}
button:hover:not(:disabled) { background: var(--warmink-forest-700); }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--warmink-forest-700);
  outline-offset: 3px;
  box-shadow: var(--warmink-focus-ring);
}
.secondary {
  background: var(--warmink-surface);
  border-color: var(--warmink-border-strong);
  color: var(--warmink-forest-900);
  font-weight: 500;
  flex-shrink: 0;
}
.secondary:hover:not(:disabled) { background: var(--warmink-surface-subtle); }
aside {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 28px 16px 20px;
  background: var(--warmink-forest-900);
  color: var(--warmink-text-inverse);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 28px; }
.mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--warmink-radius-card);
  background: var(--warmink-terracotta);
  color: var(--warmink-terracotta-text);
  font: 800 25px/1 var(--warmink-font-serif);
}
.brand strong { font: 700 23px/1.35 var(--warmink-font-serif); }
.brand small { display: block; margin-top: 4px; color: var(--warmink-nav-muted); font-size: 11px; }
.device {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border: 1px solid var(--warmink-forest-700);
  border-radius: var(--warmink-radius-card);
  background: var(--warmink-forest-700);
  font: 11px/1.6 var(--warmink-font-mono);
  overflow-wrap: anywhere;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warmink-nav-muted); flex-shrink: 0; }
.dot.online { background: var(--warmink-success); }
.search { display: grid; gap: 8px; margin: 22px 0 16px; font-size: 12px; color: var(--warmink-nav-muted); }
.search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--warmink-border-strong);
  border-radius: var(--warmink-radius-control);
  background: var(--warmink-surface-subtle);
  color: var(--warmink-text);
  font-size: 13px;
}
input::placeholder, textarea::placeholder { color: var(--warmink-text-secondary); }
.list { flex: 1; min-height: 0; overflow: auto; scrollbar-color: var(--warmink-nav-dim) transparent; }
.chat {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 13px 12px;
  text-align: left;
  background: transparent;
  color: var(--warmink-text-inverse);
  border-radius: var(--warmink-radius-control);
}
.chat:hover:not(:disabled) { background: var(--warmink-forest-700); }
.chat:not(.selected):focus-visible { outline-color: var(--warmink-text-inverse); }
.chat.selected { background: var(--warmink-surface-selected); color: var(--warmink-forest-900); }
.chat.selected:hover { background: var(--warmink-surface-selected); }
.chat strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat small { display: block; margin-top: 4px; color: var(--warmink-nav-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat.selected small { color: var(--warmink-text-secondary); }
#more { margin-top: 12px; }
footer { padding: 20px 6px 0; color: var(--warmink-nav-muted); font-size: 11px; line-height: 1.8; }
main { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; padding: 22px; }
.workspace-header {
  position: relative;
  flex-shrink: 0;
  padding: 16px 20px;
  border: 1px solid var(--warmink-border);
  border-radius: var(--warmink-radius-shell);
  background: var(--warmink-surface);
}
.heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.heading-copy { min-width: 0; }
h1 { margin: 0; color: var(--warmink-forest-900); font: 800 28px/1.35 var(--warmink-font-serif); overflow-wrap: anywhere; }
.workspace-header p { margin: 7px 0 0; color: var(--warmink-text-secondary); font: 11px/1.65 var(--warmink-font-mono); overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; color: var(--warmink-text-secondary); font: 11px/1.5 var(--warmink-font-mono); }
.meta #status { padding: 5px 10px; border-radius: var(--warmink-radius-pill); background: var(--warmink-surface-selected); color: var(--warmink-forest-900); font: 600 11px/1.5 var(--warmink-font-sans); }
.meta .secondary { padding: 8px 12px; margin-left: auto; font-size: 12px; }
.operation-history { position: relative; margin: 0; padding: 0; border: 0; background: transparent; }
.operation-history > summary { padding: 12px; border: 1px solid var(--warmink-border); border-radius: var(--warmink-radius-control); }
#operation-list { position: absolute; top: 50px; right: 0; z-index: 5; width: min(360px, calc(100vw - 48px)); max-height: 280px; overflow: auto; padding: 12px; border: 1px solid var(--warmink-border); border-radius: var(--warmink-radius-panel); background: var(--warmink-surface); box-shadow: var(--warmink-shadow-float); }
.operation-row { padding: 12px; margin-bottom: 8px; border-radius: var(--warmink-radius-card); background: var(--warmink-surface-subtle); }
.operation-row strong, .operation-row small { display: block; overflow-wrap: anywhere; }
.operation-row small { padding-top: 4px; font-size: 11px; }
.requests { flex-shrink: 0; max-height: 45%; overflow: auto; padding: 12px 16px 0; }
.request-card { padding: 16px; margin-bottom: 12px; border: 1px solid var(--warmink-border); border-left: 3px solid var(--warmink-terracotta); border-radius: var(--warmink-radius-panel); background: var(--warmink-surface-subtle); }
.request-card h2 { margin: 0; font: 700 18px/1.5 var(--warmink-font-serif); }
.request-card p { font-size: 13px; }
.request-meta { font-family: var(--warmink-font-mono); overflow-wrap: anywhere; }
.request-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.question-field { display: grid; gap: 8px; margin: 16px 0; font-size: 13px; }
.question-field input, .question-field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--warmink-border-strong); border-radius: var(--warmink-radius-control); color: var(--warmink-text); background: var(--warmink-surface); }
.request-result { overflow-wrap: anywhere; }
.thread-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--warmink-border);
  border-radius: var(--warmink-radius-shell);
  background: var(--warmink-surface);
}
.notice {
  flex-shrink: 0;
  margin: 16px 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--warmink-border);
  border-left: 3px solid var(--warmink-terracotta);
  border-radius: var(--warmink-radius-card);
  background: var(--warmink-surface-subtle);
  color: var(--warmink-text-secondary);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.notice.error { color: var(--warmink-terracotta-text); }
.conversation { flex: 1; min-height: 0; overflow: auto; padding: 16px; scrollbar-color: var(--warmink-border-strong) transparent; }
.empty { padding: 6vh 16px; text-align: center; color: var(--warmink-text-secondary); }
.empty span { color: var(--warmink-terracotta); font-size: 36px; }
.empty h2 { color: var(--warmink-forest-900); font: 700 22px/1.5 var(--warmink-font-serif); }
.empty p { font-size: 13px; }
.turn { padding: 12px; margin-bottom: 16px; border: 1px solid var(--warmink-border); border-radius: var(--warmink-radius-panel); background: var(--warmink-surface); }
.turn:last-child { margin-bottom: 0; }
.message { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--warmink-border); border-radius: var(--warmink-radius-card); background: var(--warmink-surface-subtle); }
.message.user { border-color: var(--warmink-surface-selected); background: var(--warmink-surface-selected); }
.role { margin-bottom: 8px; color: var(--warmink-forest-700); font: 600 11px/1.5 var(--warmink-font-mono); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.75; }
.turn-state { padding: 4px 4px 0; color: var(--warmink-text-secondary); font: 11px/1.5 var(--warmink-font-mono); }
details { margin-bottom: 8px; padding: 0 12px; border: 1px solid var(--warmink-border); border-radius: var(--warmink-radius-control); background: var(--warmink-surface-subtle); color: var(--warmink-text-secondary); font-size: 12px; }
summary { display: list-item; min-height: 44px; padding: 12px 0; cursor: pointer; }
pre { max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.7 var(--warmink-font-mono); }
#composer { flex-shrink: 0; padding: 14px 16px; border-top: 1px solid var(--warmink-border); background: var(--warmink-surface-subtle); }
#composer label { display: block; margin-bottom: 8px; color: var(--warmink-forest-900); font-size: 13px; font-weight: 600; }
textarea { display: block; width: 100%; min-height: 70px; max-height: 160px; padding: 12px 14px; resize: vertical; border: 1px solid var(--warmink-border-strong); border-radius: var(--warmink-radius-control); background: var(--warmink-surface); color: var(--warmink-text); font-size: 14px; }
input:focus-visible, textarea:focus-visible { border-color: var(--warmink-forest-700); }
.compose-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; }
#send { flex-shrink: 0; }
#send-status { color: var(--warmink-text-secondary); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  body { grid-template-columns: 248px minmax(0, 1fr); }
  main { padding: 16px; gap: 12px; }
  aside { padding: 24px 14px 16px; }
  .workspace-header { padding: 14px 16px; }
}
@media (max-width: 700px) {
  body { display: block; height: auto; min-height: 100dvh; }
  aside { padding: 16px; }
  .brand { padding: 0 0 16px; }
  .brand small, footer { display: none; }
  .device { padding: 10px 12px; }
  .search { margin: 12px 0; }
  .search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .list { display: flex; gap: 8px; max-height: 92px; overflow-x: auto; }
  .chat { flex: 0 0 200px; min-width: 0; margin-bottom: 0; }
  #more { align-self: flex-start; }
  main { padding: 16px; }
  h1 { font-size: 28px; }
  .heading-row { flex-wrap: wrap; gap: 12px; }
  .heading-copy { width: 100%; }
  .meta { gap: 8px 12px; }
  .meta .secondary { margin-left: 0; }
  .operation-history { position: static; }
  #operation-list { top: 100%; right: 12px; width: calc(100% - 24px); }
  .thread-panel { flex: none; }
  .conversation { flex: none; max-height: 60dvh; min-height: 260px; padding: 12px; }
  .notice { margin: 12px 12px 0; }
  .turn { padding: 8px; }
  .message { padding: 12px; }
  .compose-bottom { align-items: flex-start; gap: 12px; }
  #send-status { max-width: 50%; }
  #composer { padding: 14px 12px; }
  textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

.markdown { white-space: normal; overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p, .markdown ul, .markdown ol { margin: .7em 0; }
.markdown h1, .markdown h2, .markdown h3 { line-height: 1.4; margin: 1.1em 0 .5em; }
.markdown h1 { font-size: 1.35em; }
.markdown h2 { font-size: 1.2em; }
.markdown h3 { font-size: 1.1em; }
.markdown pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.markdown code { font-family: ui-monospace, monospace; font-size: .9em; }
.markdown :not(pre) > code { background: #F2EFE5; padding: .15em .3em; border-radius: 4px; }
.markdown table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.markdown th, .markdown td { padding: 8px 12px; border: 1px solid #DEDACF; text-align: left; }
.markdown blockquote { margin: 1em 0; padding-left: 16px; border-left: 3px solid #D9612F; }
.markdown a { color: #A54421; text-decoration: underline; }
.image-reference { color: #6C746C; }
.long-message > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }

.files-panel { min-height: 0; overflow-y: auto; padding: 16px; flex: 1; }
.files-panel[hidden], .conversation[hidden] { display: none; }
.files-heading { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.files-heading h2 { margin-right: auto; font-size: 20px; }
.file-row { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: #F2EFE5; border-radius: 12px; margin-bottom: 10px; }
.file-row button { text-align: left; overflow-wrap: anywhere; }
.file-row small { overflow-wrap: anywhere; color: #6C746C; }
#file-preview { overflow-wrap: anywhere; }
#file-preview pre { white-space: pre-wrap; }
.file-download { display: inline-flex; min-height: 44px; align-items: center; color: #A54421; }
.file-media { display: block; max-width: 100%; margin-top: 12px; }
iframe.file-media { width: 100%; height: 420px; border: 1px solid #DEDACF; }
#composer[hidden], #file-list[hidden] { display: none; }
@media (max-width: 700px) { .files-panel { max-height: 70dvh; min-height: 300px; } }
.model-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.model-controls label { flex: 1; min-width: 140px; }
.model-controls select { width: 100%; min-height: 44px; background: white; border: 1px solid #DEDACF; border-radius: 8px; padding: 8px; color: #14332A; }
#model-source { font-size: 12px; color: #6C746C; }
.quota-panel { padding: 16px; overflow-y: auto; max-height: 50dvh; border-bottom: 1px solid #DEDACF; }
.quota-panel[hidden] { display: none; }
.quota-card { padding: 12px; border-radius: 12px; background: #F2EFE5; margin-bottom: 10px; }
.quota-card h3 { margin-top: 0; }
.quota-card progress { width: 100%; accent-color: #D9612F; }
.thread-panel { position: relative; }
.quota-panel { position: absolute; inset: 12px; z-index: 3; max-height: none; background: white; border: 1px solid #DEDACF; border-radius: 16px; box-shadow: 0 12px 32px #14332A20; }
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 20px; }
.login-card { width: min(100%, 440px); background: white; border: 1px solid #DEDACF; border-radius: 20px; }
.login-card form { display: grid; gap: 14px; }
.login-card input { width: 100%; min-height: 48px; padding: 12px; font-size: 16px; border-radius: 8px; border: 1px solid #DEDACF; }
@media(max-width:700px) {
  main { padding: 12px; }
  h1 { font-size: 24px; }
  .model-controls { gap: 8px; }
  .model-controls select, input, textarea { font-size: 16px; }
  .compose-bottom { flex-wrap: wrap; }
  #send-status { max-width: 100%; flex: 1 1 180px; }
  .file-media { height: auto; }
  iframe.file-media { height: 60dvh; }
}