/* 前期 CSS 最小化（使用者裁決）：只做佈局與可讀性，不做視覺設計。 */

:root {
  /* UI 與正文使用平台字型；code、工具參數與路徑再局部切回 monospace。 */
  font-family:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    "Noto Color Emoji", "Segoe UI Emoji", sans-serif;
  color: #20231f;
  background: #f3f0e8;
}

body {
  margin: 0;
  display: flex;
  height: 100vh;
}

#sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid #20231f;
  padding: 12px;
  background: #ece8dd;
  display: flex;
  flex-direction: column; /* footer（紅綠燈）固定左下，清單自己捲動 */
}

#sidebar h1 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

#new-session-form {
  display: flex;
  margin-bottom: 12px;
}

#new-session-form button {
  flex: 1;
  font: inherit;
  cursor: pointer;
}

#session-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}

#sidebar-foot {
  border-top: 1px solid #20231f;
  padding-top: 8px;
  font-size: 0.75rem;
}

#sidebar-foot p {
  margin: 0 0 6px;
}

.light {
  color: #888;
}

.light.ok {
  color: #2e7d32;
}

.light.warn {
  color: #b8860b;
}

.light.down {
  color: #a1261d;
}

#relogin {
  border: 1px solid #20231f;
  background: #fffdf7;
  font: inherit;
  font-size: 0.75rem;
  padding: 2px 8px;
  cursor: pointer;
}

/* F20 單行化：固定一行高，標題超出即截斷（完整內容在 li title）。 */
#session-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #20231f;
  background: #fffdf7;
  padding: 5px 8px;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1.5;
}

#session-list li.selected {
  background: #d8ff70;
}

#session-list .session-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#session-list .session-state {
  flex-shrink: 0;
  color: #5a6058;
}

/* ✎ 常態隱形（佔位不跳版），hover／選取時才顯示 */
#session-list .rename {
  flex-shrink: 0;
  opacity: 0;
}

#session-list li:hover .rename,
#session-list li.selected .rename {
  opacity: 1;
}

#session-list li input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.8rem;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 登入層（C1 §0b）：password mode 未登入＝body.login-mode。
   隱藏主視圖與 session 操作、顯示置中登入表單；sidebar 紅綠燈保留
   （health 免 auth，登入頁也要看得到模型服務狀態）。 */
body.login-mode #thread,
body.login-mode #notice,
body.login-mode #status-bar,
body.login-mode #composer,
body.login-mode #new-session-form,
body.login-mode #session-list,
body.login-mode #relogin {
  display: none;
}

#login-view {
  display: none; /* 只在 login-mode 出現，預設（fixed-owner）永遠隱藏 */
  flex: 1;
  align-items: center;
  justify-content: center;
}

body.login-mode #login-view {
  display: flex;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 260px;
  border: 1px solid #20231f;
  background: #fffdf7;
  padding: 20px;
}

#login-form h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

#login-form input {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid #20231f;
}

#login-form button {
  border: 1px solid #20231f;
  background: #d8ff70;
  font: inherit;
  padding: 6px 16px;
  cursor: pointer;
}

#login-error {
  margin: 0;
  color: #a1261d;
  font-size: 0.8rem;
}

#thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.message {
  max-width: 720px;
  margin: 0 auto 12px;
  border: 1px solid #20231f;
  background: #fffdf7;
  padding: 10px 14px;
  white-space: pre-wrap;
  line-height: 1.7;
}

.message.user {
  background: #e4efd7;
}

.message .message-error {
  color: #a1261d;
}

.message .para {
  margin: 0 0 8px;
}

/* Y5-02 leaf 批：SOP badge、starters、rename、搜尋、匯出 */
.sop-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 1px 8px;
  border: 1px solid #20231f;
  margin-bottom: 6px;
}

.sop-badge.sop-ok {
  background: #e4efd7;
}

.sop-badge.sop-fail {
  background: #f5d9d6;
  color: #a1261d;
}

.sop-badge.sop-needs-input,
.sop-badge.sop-partial {
  background: #f6ecd0;
}

.starter {
  display: inline-block;
  font-size: 0.78rem;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px dashed #5a6058;
  background: #f6f3ea;
  cursor: pointer;
}

#session-list .rename {
  border: none;
  background: none;
  cursor: pointer;
  color: #5a6058;
  padding: 0 2px;
}

#session-filter {
  width: 100%;
  margin: 0 0 8px;
  padding: 4px 6px;
  border: 1px solid #20231f;
  background: #fffdf7;
}

#st-export {
  color: #20231f;
}

/* process/citation 共用 compact disclosure chip；原始事件仍按 row 排列。 */
.process {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: #5a6058;
}

.process .process-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 4px;
}

.process .thinking,
.process .tool-chip {
  border: 1px solid #c9c4b4;
  background: #f6f3ea;
  font-size: 0.72rem;
  line-height: 1.2;
}

.process .tool-chip {
  font-family: ui-monospace, monospace;
}

.process .tool-chip.running {
  border-color: #b8860b;
  color: #8a6500;
}

.process .tool-chip.failed {
  border-color: #a1261d;
  color: #a1261d;
}

.process :is(.thinking, .tool-chip)[open] {
  flex-basis: 100%;
}

.disclosure-chip {
  padding: 2px 6px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.disclosure-chip::-webkit-details-marker {
  display: none;
}

.thinking > .disclosure-chip::before,
.citation > .disclosure-chip::before {
  content: "▸ ";
}

.thinking[open] > .disclosure-chip::before,
.citation[open] > .disclosure-chip::before {
  content: "▾ ";
}

.process :is(.thinking, .tool-chip) pre {
  margin: 0;
  border-top: 1px solid currentColor;
  padding: 5px 7px;
  color: #20231f;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.citation {
  margin: 0 0 10px;
  font-size: 0.8rem;
}

.citation > .disclosure-chip {
  display: inline-block;
  border: 1px solid #c9c4b4;
  background: #f6f3ea;
  color: #5a6058;
  margin-bottom: 4px;
}

.citation-download {
  display: inline-block;
  margin-bottom: 4px;
}

.citation.unverified {
  color: #a1261d;
}

.citation-text {
  margin: 0;
  white-space: pre-wrap;
}

.citation-image {
  display: block;
}

.citation-image figure {
  margin: 0;
}

.citation-image figure > a {
  display: block;
}

.citation-image img {
  display: block;
  max-width: 100%;
  border: 1px solid #20231f;
}

.citation-image figcaption {
  margin-top: 5px;
  color: #5a6058;
}

.citation-path {
  display: inline;
}

.citation-path summary {
  display: inline;
  margin: 0;
  color: #2b5c8a;
}

.citation-path code {
  display: block;
  margin-top: 4px;
  color: #20231f;
  font-family: ui-monospace, monospace;
  overflow-wrap: anywhere;
}

#upload-chips:not(:empty) {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  margin-bottom: 4px;
  overflow-x: auto;
  white-space: nowrap;
}

.attachment-label {
  flex: none;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 650;
}

#upload-chips .attachment-chip {
  flex: none;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: #20231f;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.25;
  padding: 1px 3px;
  cursor: pointer;
}

#upload-chips .attachment-chip.selected {
  color: #2563eb;
  font-weight: 650;
}

#upload-chips .attachment-chip:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

/* Skill 選取仍沿用既有的一次性 chip；附件有上方專用的緊湊樣式。 */
.chip {
  border: 1px solid #20231f;
  background: #fffdf7;
  font: inherit;
  font-size: 0.75rem;
  padding: 2px 8px;
  margin-right: 6px;
  cursor: pointer;
}

.chip.selected {
  background: #d8ff70;
}

#composer.dragging textarea {
  background: #e4efd7;
}

#skill-menu {
  border: 1px solid #20231f;
  background: #fffdf7;
  margin-bottom: 6px;
}

.skill-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ece8dd;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
}

.skill-item:hover {
  background: #e4efd7;
}

.skill-item span {
  color: #5a6058;
}

#skill-slot {
  display: flex;
  gap: 6px;
  align-items: center;
}

#skill-slot #skill-open {
  background: #fffdf7;
  padding: 2px 8px;
  font-size: 0.75rem;
}

#upload-picker {
  max-width: 220px;
  font: inherit;
  font-size: 0.75rem;
}

#notice {
  margin: 0;
  padding: 8px 16px;
  background: #ffe9a8;
  border-top: 1px solid #20231f;
}

#notice.error {
  background: #ffd2cd;
  color: #a1261d;
}

/* display:flex 會蓋掉 HTML hidden 屬性——未選 session 時仍需隱藏 */
#status-bar[hidden] {
  display: none;
}

#status-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid #20231f;
  padding: 4px 16px;
  background: #ece8dd;
  font-size: 0.75rem;
  color: #5a6058;
}

#status-bar .badge {
  border: 1px solid #20231f;
  background: #d8ff70;
  color: #20231f;
  padding: 0 6px;
}

#status-bar select {
  font: inherit;
}

#status-bar button {
  border: 1px solid #20231f;
  background: #d8ff70;
  font: inherit;
  padding: 2px 8px;
  cursor: pointer;
}

#status-bar #upload-picker {
  max-width: 220px;
  font: inherit;
}

body.draft-mode #status-bar .session-only {
  display: none;
}

#model-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

#model-alias:disabled {
  color: #20231f;
  opacity: 1;
}

#run-status-wrap {
  margin-left: auto;
  white-space: nowrap;
}

#composer {
  border-top: 1px solid #20231f;
  padding: 12px 16px;
  background: #ece8dd;
}

/* F29：送出鍵內嵌輸入框右下 —— wrap 提供定位脈絡，textarea 右側留出空間 */
#prompt-wrap {
  position: relative;
}

#composer textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  /* 自動長高（JS 依內容設 height）；上限後才出現內捲軸 */
  max-height: 40vh;
  overflow-y: auto;
  resize: none;
  font: inherit;
  padding: 8px 50px 8px 8px;
  border: 1px solid #20231f;
}

#prompt-actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}

#composer button {
  border: 1px solid #20231f;
  background: #d8ff70;
  font: inherit;
  padding: 6px 16px;
  cursor: pointer;
}

#prompt-actions button {
  padding: 2px 12px;
  line-height: 1.4;
}

#composer :is(#send, #stop) {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  transition:
    background 120ms ease,
    transform 80ms ease;
}

#composer :is(#send, #stop)[hidden] {
  display: none;
}

#composer :is(#send, #stop) svg {
  width: 18px;
  height: 18px;
}

#composer #send {
  background: #2563eb;
}

#composer #send svg {
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#composer #send:hover:not(:disabled) {
  background: #1d4ed8;
}

#composer #send:active:not(:disabled) {
  transform: scale(0.94);
}

#composer #send:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

#composer #stop {
  background: #dc2626;
}

#composer #stop svg {
  fill: currentcolor;
}

#composer #stop:hover {
  background: #b91c1c;
}

#composer #stop:active {
  transform: scale(0.94);
}

#composer #stop:focus-visible {
  outline: 3px solid #fca5a5;
  outline-offset: 2px;
}

#composer button:disabled {
  background: #ddd;
  cursor: not-allowed;
}

#composer #send:disabled {
  background: #c7cbd1;
  color: #6b7280;
}

/* ---- §J markdown 渲染（批 C）：終態正文的基本排版＋fence 複製鍵 ---------- */

.para :is(h1, h2, h3, h4) {
  margin: 10px 0 6px;
  line-height: 1.3;
}

.para h1 { font-size: 1.15rem; }
.para h2 { font-size: 1.08rem; }
.para h3, .para h4 { font-size: 1rem; }

.para p { margin: 0 0 8px; }

.para :is(ul, ol) {
  margin: 0 0 8px;
  padding-left: 22px;
}

.para li { margin: 2px 0; }

/* 終態（markdown 渲染）容器：結構來自 HTML 標籤，pre-wrap 會把 marked 輸出
   的元素間換行變成多餘空行——只有 streaming 純文字段落需要 pre-wrap。 */
.message div.para {
  white-space: normal;
}

.para code {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  background: #eceadf;
  padding: 1px 4px;
  border-radius: 3px;
}

.para pre {
  position: relative;
  background: #f6f3ea;
  border: 1px solid #d8d4c6;
  padding: 8px 10px;
  overflow-x: auto;
  margin: 0 0 8px;
}

.para pre code {
  background: none;
  padding: 0;
  font-size: 0.82rem;
}

.para blockquote {
  margin: 0 0 8px;
  padding: 2px 10px;
  border-left: 3px solid #b9b4a4;
  color: #5a6058;
}

.para table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 8px;
  font-size: 0.85rem;
}

.para :is(th, td) {
  border: 1px solid #d8d4c6;
  padding: 3px 8px;
}

.para a { color: #2b5c8a; }

.para math[display="block"] {
  overflow-x: auto;
  overflow-y: hidden;
}

.md-copy {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.7rem;
  padding: 1px 6px;
  background: #fffdf6;
  border: 1px solid #d8d4c6;
  cursor: pointer;
}

/* ---- 批 0：訊息 footer／複製鍵／長工具計時 -------------------------------- */

/* F28：run 狀態與耗時貼在這輪回覆下方（左下狀態列難發現） */
.bubble-footer {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: #5a6058;
}

.msg-copy {
  float: right;
  margin-left: 8px;
  font: inherit;
  font-size: 0.7rem;
  padding: 1px 8px;
  background: #fffdf7;
  border: 1px solid #d8d4c6;
  cursor: pointer;
}

/* 長工具活性提示：跑很久的工具不給經過時間會被誤認當機 */
.tool-elapsed {
  color: #8a6d1f;
}

/* 空 prompt 送出時，user bubble 顯示附件／skill 摘要（不留白） */
.user-attachments {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #4a5a3a;
}

/* F14：$ 選單頂端過濾框 */
.skill-filter {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.8rem;
  padding: 4px 8px;
  border: 0;
  border-bottom: 1px solid #20231f;
  background: #f6f3ea;
}

.skill-empty {
  margin: 0;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: #5a6058;
}

/* 窄螢幕時固定 240px sidebar 會吃掉大半正文；平台原生 flex 換向即可。 */
@media (max-width: 700px) {
  body {
    flex-direction: column;
  }

  #sidebar {
    box-sizing: border-box;
    width: 100%;
    max-height: 150px;
    border-right: 0;
    border-bottom: 1px solid #20231f;
    padding: 8px;
  }

  #sidebar h1,
  #new-session-form {
    margin-bottom: 6px;
  }

  #sidebar-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
  }

  #sidebar-foot p {
    margin: 0;
  }

  main {
    min-height: 0;
  }

  #thread,
  #composer {
    padding: 8px;
  }

  #upload-picker {
    max-width: 130px;
  }
}