/* CTS-AI v0.1
   Palette: ink navy base, amber signal accent (console/terminal lineage,
   not the default warm-clay AI look). One sans for UI + prose, one mono
   reserved for anything that IS data: model ids, code, status text. */

:root{
  --bg:        #10131a;
  --panel:     #171b24;
  --panel-alt: #1e2430;
  --border:    #2a3140;
  --border-soft: #232a37;

  --text:      #e7e9ef;
  --text-dim:  #9aa3b5;
  --text-faint:#5f6980;

  --accent:      #e8a33d;
  --accent-soft: #4a3720;
  --accent-text: #171106;

  --danger:      #e5484d;
  --danger-soft: #3a1f21;

  --ok: #4ecb8a;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;

  --radius: 8px;
  --radius-sm: 5px;
}

*{ box-sizing: border-box; }

/* Author rules setting `display` on an element normally beat the
   browser's default [hidden]{display:none} — that's exactly what was
   letting the (supposedly hidden) viewer panel render full-screen on
   mobile. Belt-and-braces: hidden always wins, everywhere. */
[hidden]{ display:none !important; }

html,body{
  height:100%;
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select{ font: inherit; color: inherit; }
button{ cursor:pointer; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- layout shell ---------- */

.app{
  height:100vh;
  display:grid;
  grid-template-columns: 258px minmax(0,1fr) 0px;
  grid-template-rows: minmax(0, 1fr);
  transition: grid-template-columns 180ms ease;
}
.app.viewer-open{
  grid-template-columns: 258px minmax(0,1fr) var(--viewer-w, 400px);
}
.app.rail-collapsed{
  grid-template-columns: 0px minmax(0,1fr) 0px;
}
.app.rail-collapsed.viewer-open{
  grid-template-columns: 0px minmax(0,1fr) var(--viewer-w, 400px);
}
.app.resizing{
  transition: none;
  cursor: col-resize;
  user-select: none;
}
.app.resizing .viewer,
.app.resizing .stage{
  pointer-events: none;
}

/* ---------- left rail ---------- */

.rail{
  background: var(--panel);
  border-right: 1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.rail-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding: 18px 16px 14px;
   justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
  place-items: center;
}
.brand{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space:nowrap;
}
.brand em{
  font-style:normal;
  color: var(--accent);
}
.build-tag{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}

.new-chat-btn{
  margin: 0 12px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13.5px;
  transition: border-color 120ms ease, background 120ms ease;
}
.new-chat-btn:hover{ border-color: var(--accent); background: var(--panel-alt); }

.chat-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding: 2px 8px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.chat-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}
.chat-item .chat-title{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.chat-item:hover{ background: var(--panel-alt); color: var(--text); }
.chat-item.active{
  background: var(--panel-alt);
  color: var(--text);
  border-color: var(--border);
}
.chat-item .chat-del{
  opacity:0;
  background:none;
  border:none;
  color: var(--text-faint);
  padding:2px;
  border-radius:4px;
  line-height:0;
}
.chat-item:hover .chat-del{ opacity:1; }
.chat-item .chat-del:hover{ color: var(--danger); }

.rail-foot{
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: var(--text-faint);
}
.endpoint-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--text-faint);
  flex-shrink:0;
}
.endpoint-dot.ok{ background: var(--ok); }
.endpoint-dot.bad{ background: var(--danger); }

/* ---------- center stage ---------- */

.stage{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  background: var(--bg);
}

.stage-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.only-mobile{ display:none; }

.icon-btn{
  background:none;
  border:1px solid transparent;
  color: var(--text-dim);
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-sm);
  flex-shrink:0;
}
.icon-btn:hover{ background: var(--panel-alt); color: var(--text); }
.icon-btn[aria-pressed="true"]{ color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

.model-picker{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}
.model-picker-label{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  text-transform: lowercase;
}
.model-picker select{
  flex:1;
  /* max-width: 340px; */
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 13px;
}

.thread{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding: 24px 0 12px;
}
.empty-state{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color: var(--text-faint);
  text-align:center;
}
.empty-title{ margin:0; font-size:15px; color: var(--text-dim); }
.empty-sub{ margin:0; font-size:13px; }

.msg{
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 0 24px;
  display:flex;
  gap:12px;
}
.msg-avatar{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono);
  font-size:11px;
  margin-top:2px;
}
.msg.user .msg-avatar{ background: var(--panel-alt); color: var(--text-dim); }
.msg.assistant .msg-avatar{ background: var(--accent-soft); color: var(--accent); }

.msg-body{ min-width:0; flex:1; }
.msg-role{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.msg-text{
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
}
.msg.assistant .msg-text.streaming::after{
  content:"▍";
  color: var(--accent);
  animation: blink 1s step-start infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

.msg-attachments{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.attach-chip{
  display:flex;
  align-items:center;
  gap:6px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  cursor:pointer;
}
.attach-chip:hover{ border-color: var(--accent); color: var(--text); }

.reasoning-block{
  margin-bottom: 10px;
}
.reasoning-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--text-dim);
  font-size: 12.5px;
}
.reasoning-toggle:hover{ border-color: var(--accent-soft); color: var(--text); }
.reasoning-label{ font-family: var(--mono); }
.reasoning-chevron{ color: var(--text-faint); margin-left: 2px; }

.reasoning-dots{ display:inline-flex; gap:4px; }
.reasoning-dots i{
  width:5px; height:5px;
  border-radius:50%;
  background: var(--accent);
  display:inline-block;
  opacity:0.15;
  animation: dot-chase 1.2s ease-in-out infinite;
}
.reasoning-dots i:nth-child(1){ animation-delay: 0s; }
.reasoning-dots i:nth-child(2){ animation-delay: 0.2s; }
.reasoning-dots i:nth-child(3){ animation-delay: 0.4s; }
@keyframes dot-chase{
  0%, 80%, 100%{ opacity:0.15; }
  40%{ opacity:1; }
}

.waiting-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(232,163,61,0.35);
  color: var(--accent);
  font-size: 12.5px;
}
.waiting-chip .reasoning-dots i{ background: var(--accent); }

.reasoning-body{
  margin-top:6px;
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  background: var(--panel);
  padding: 10px 12px;
  max-height: 200px;
  overflow-y:auto;
}
.reasoning-body pre{
  margin:0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--mono);
  font-size: 12px;
  line-height:1.55;
  color: var(--text-faint);
}

.status-chip{
  display:inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--panel-alt);
  border: 1px solid var(--border-soft);
  color: var(--ok);
  font-size: 11.5px;
  font-family: var(--mono);
}

.code-callout{
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--panel);
}
.code-callout-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 7px 12px;
  background: var(--panel-alt);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
.code-callout-head button{
  background:none; border:none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
}
.code-callout pre{
  margin:0;
  padding: 12px;
  max-height: 220px;
  overflow:auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
}
.code-callout.open{
  border-color: var(--border-soft);
  border-style: dashed;
}
.code-callout.open .code-callout-head{ color: var(--text-faint); }
.code-cursor{
  display:inline-block;
  width:6px; height:12px;
  margin-left:2px;
  background: var(--accent);
  vertical-align: -2px;
  animation: blink 1s step-start infinite;
}

.msg-error{
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(229,72,77,0.35);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
}

/* ---------- composer ---------- */

.composer{
  border-top: 1px solid var(--border-soft);
  padding: 12px 24px 16px;
}
.attach-strip{
  max-width: 760px;
  margin: 0 auto 8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.attach-strip .attach-chip .remove{
  border:none; background:none; color: var(--text-faint); margin-left:2px; line-height:0;
}
.attach-strip .attach-chip .remove:hover{ color: var(--danger); }

.composer-row{
  max-width: 760px;
  margin: 0 auto;
  display:flex;
  align-items:flex-end;
  gap:8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 8px;
}
.composer-row:focus-within{ border-color: var(--accent); }

textarea#promptInput{
  flex:1;
  resize:none;
  max-height: 220px;
  background:none;
  border:none;
  color: var(--text);
  padding: 8px 4px;
  line-height:1.5;
}
textarea#promptInput:focus{ outline:none; }
textarea#promptInput::placeholder{ color: var(--text-faint); }

.send-btn{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-text);
  border:none;
  display:flex; align-items:center; justify-content:center;
}
.send-btn:disabled{ background: var(--panel-alt); color: var(--text-faint); cursor:not-allowed; }

.stop-btn{
  flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(229,72,77,0.4);
  border-radius: 9px;
  padding: 0 12px;
  height:34px;
  font-size: 13px;
}
.stop-btn:hover{ background: rgba(229,72,77,0.22); }

.composer-hint{
  max-width:760px;
  margin: 8px auto 0;
  font-size: 11.5px;
  color: var(--text-faint);
  text-align:center;
}

/* ---------- right viewer panel ---------- */

.viewer{
  position:relative;
  background: var(--panel);
  border-left: 1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.viewer-resizer{
  position:absolute;
  top:0; bottom:0; left:-4px;
  width:8px;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}
.viewer-resizer::after{
  content:"";
  position:absolute;
  top:0; bottom:0; left:3px;
  width:2px;
  background: transparent;
  transition: background 120ms ease;
}
.viewer-resizer:hover::after,
.app.resizing .viewer-resizer::after{
  background: var(--accent);
}
.viewer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid var(--border-soft);
  padding: 6px 8px;
  gap:8px;
}
.viewer-tabs{
  display:flex;
  gap:4px;
  overflow-x:auto;
  flex:1;
  min-width:0;
}
.viewer-tab{
  font-family: var(--mono);
  font-size:12px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 10px;
  white-space:nowrap;
}
.viewer-tab.active{
  background: var(--panel-alt);
  color: var(--accent);
  border-color: var(--border);
}
.viewer-actions{ display:flex; gap:4px; flex-shrink:0; }

.viewer-body{
  flex:1;
  min-height:0;
  margin:0;
  overflow:auto;
  padding: 16px;
}
.viewer-body code{
  font-family: var(--mono);
  font-size: 12.5px;
  line-height:1.6;
  white-space:pre;
  color: var(--text);
}

/* ---------- responsive ---------- */

@media (max-width: 860px){
  .only-mobile{ display:flex; }
  .app{
    grid-template-columns: 0px minmax(0,1fr) 0px;
  }
  .app.rail-open{ grid-template-columns: 240px minmax(0,1fr) 0px; }
  /* Rail/viewer sit in a 0-width, overflow:hidden grid column by default,
     which is enough to keep them off-screen when closed. Position:fixed
     is only applied once the *-open class is present — applying it
     unconditionally (the previous bug) turned the viewer into a
     permanent full-screen overlay covering everything, closed or not. */
  .app.rail-open .rail{ position:fixed; inset:0 auto 0 0; width:240px; z-index:20; }
  .app.viewer-open .viewer{ position:fixed; inset:0; z-index:20; width:100vw; }
  .msg{ padding: 0 14px; }
  .composer{ padding: 10px 12px 14px; }
}