/* 码道 CodeArts App 的样式。
 *
 * 约束（来自平台 iframe 沙箱与其余 App 的经验）：
 *   - 不引外部字体/图标：`connect-src 'self'` 与 CSP 会拦，且断网时页面会变成一片空白。
 *   - 尺寸用相对单位，侧栏（240–420px）与整页（page_content）都要能用。
 *   - 深色模式下也必须可读：宿主可能带自己的主题，这里用 `color-scheme` 双写。 */

:root {
  color-scheme: light dark;
  --ca-fg: #1f2328;
  --ca-fg-muted: #656d76;
  --ca-bg: #ffffff;
  --ca-bg-soft: #f6f8fa;
  --ca-border: #d0d7de;
  --ca-accent: #0969da;
  --ca-accent-fg: #ffffff;
  --ca-danger: #cf222e;
  --ca-warn-bg: #fff8c5;
  --ca-warn-fg: #7d4e00;
  --ca-code-bg: #f6f8fa;
  --ca-thought-fg: #656d76;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ca-fg: #e6edf3;
    --ca-fg-muted: #8d96a0;
    --ca-bg: #0d1117;
    --ca-bg-soft: #161b22;
    --ca-border: #30363d;
    --ca-accent: #2f81f7;
    --ca-accent-fg: #ffffff;
    --ca-danger: #f85149;
    --ca-warn-bg: #3b2e00;
    --ca-warn-fg: #e3b341;
    --ca-code-bg: #161b22;
    --ca-thought-fg: #8d96a0;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--ca-bg);
  color: var(--ca-fg);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}

.ca {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ── 顶栏 ── */
.ca-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ca-border);
  background: var(--ca-bg-soft);
  flex: 0 0 auto;
}
.ca-title { font-weight: 600; }
.ca-meta {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ca-fg-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 按钮 ── */
.ca-btn {
  appearance: none;
  border: 1px solid var(--ca-border);
  background: var(--ca-bg);
  color: var(--ca-fg);
  border-radius: 6px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.ca-btn:hover:not(:disabled) { background: var(--ca-bg-soft); }
.ca-btn:disabled { opacity: 0.5; cursor: default; }
.ca-btn-primary {
  background: var(--ca-accent);
  border-color: var(--ca-accent);
  color: var(--ca-accent-fg);
}
.ca-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.ca-btn-ghost { background: transparent; }
.ca-btn-danger { color: var(--ca-danger); border-color: var(--ca-danger); }

/* ── 设置区 ── */
.ca-settings {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ca-border);
  background: var(--ca-bg-soft);
  overflow-y: auto;
  max-height: 60%;
  flex: 0 0 auto;
}
.ca-settings[hidden] { display: none; }

.ca-form { display: flex; flex-direction: column; gap: 10px; }

.ca-field { display: flex; flex-direction: column; gap: 4px; }
.ca-field > span:first-child { font-size: 12px; color: var(--ca-fg-muted); }

.ca input[type="text"],
.ca input[type="password"],
.ca textarea,
.ca select {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--ca-border);
  border-radius: 6px;
  background: var(--ca-bg);
  color: var(--ca-fg);
  font: inherit;
  font-size: 13px;
}
.ca textarea { resize: vertical; font-family: inherit; }
.ca input:focus, .ca textarea:focus, .ca select:focus {
  outline: 2px solid var(--ca-accent);
  outline-offset: -1px;
}
.ca select { cursor: pointer; }

.ca-row { display: flex; gap: 8px; align-items: center; }
.ca-row-actions { flex-wrap: wrap; }

.ca-note { margin: 0; font-size: 12px; color: var(--ca-fg-muted); }
.ca-warn {
  background: var(--ca-warn-bg);
  color: var(--ca-warn-fg);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.ca-result { margin: 0; min-height: 1.4em; font-size: 12px; color: var(--ca-fg-muted); white-space: pre-wrap; }
.ca-result[data-kind="error"] { color: var(--ca-danger); }
.ca-result[data-kind="ok"] { color: var(--ca-accent); }

.ca-details { margin-top: 12px; font-size: 12px; color: var(--ca-fg-muted); }
.ca-details summary { cursor: pointer; }
.ca-details p { margin: 8px 0; }
.ca-details code {
  background: var(--ca-code-bg);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11px;
}

/* ── 会话区 ── */
.ca-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 14px 12px;
}

.ca-topic {
  flex: 0 0 auto;
  padding: 8px 0;
  font-size: 12px;
  color: var(--ca-fg-muted);
  border-bottom: 1px dashed var(--ca-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-topic:empty { display: none; }

.ca-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── 消息气泡 ── */
.msg { display: flex; flex-direction: column; gap: 3px; max-width: 100%; }
.msg-user { align-self: flex-end; align-items: flex-end; max-width: 85%; }
.msg-user .msg-body {
  background: var(--ca-accent);
  color: var(--ca-accent-fg);
  border-radius: 10px 10px 2px 10px;
  padding: 7px 11px;
}
.msg-assistant { align-self: flex-start; max-width: 100%; }
.msg-assistant .msg-body {
  background: var(--ca-bg-soft);
  border: 1px solid var(--ca-border);
  border-radius: 10px 10px 10px 2px;
  padding: 8px 11px;
}
.msg-note { align-self: center; max-width: 100%; }
.msg-note .msg-body {
  background: transparent;
  color: var(--ca-fg-muted);
  font-size: 12px;
  text-align: center;
  padding: 2px 8px;
}
.msg-note[data-kind="error"] .msg-body { color: var(--ca-danger); }

.msg-body { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.msg-label { font-size: 11px; color: var(--ca-fg-muted); }

/* 正文里的代码块 */
.msg-body code, .ca-log code {
  background: var(--ca-code-bg);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
}
.msg-body pre {
  background: var(--ca-code-bg);
  border: 1px solid var(--ca-border);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  margin: 6px 0;
}
.msg-body pre code { background: none; padding: 0; }

/* ── 思考过程（默认收起，连续帧合并进一个 details） ── */
.thought {
  align-self: flex-start;
  width: 100%;
  font-size: 12px;
  color: var(--ca-thought-fg);
}
.thought summary { cursor: pointer; user-select: none; }
.thought-body {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 6px 0 0 10px;
  border-left: 2px solid var(--ca-border);
  margin-left: 2px;
}

/* ── 输入区 ── */
.ca-compose { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.ca-compose textarea { resize: none; }
.ca-compose .ca-row-actions { justify-content: flex-end; }
/* ── AK/SK 凭据分组 ──
 * 放在 fieldset 里而不是平铺：设置区有基址/模型/提示词多个字段，凭据是其中唯一
 * "填错就完全不能用、且需要去别处（IAM 控制台）生成"的东西。给它一个边框和标题，
 * 是为了让人一眼看出这几项是一组、且这一组是必需的。
 */
.ca-cred {
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--ca-border);
  border-radius: 6px;
  background: var(--ca-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ca-cred > legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ca-fg-muted);
}

/* 状态点：未配置时用 danger 色，让"还不能对话"在设置按钮上就可见。
 * 用 ::before 而不是加一个元素：状态是纯呈现，不该占 DOM/影响无障碍朗读。
 */
#settings-toggle[data-state="bad"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ca-danger);
  vertical-align: middle;
}
#settings-toggle[data-state="ok"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #2da44e;
  vertical-align: middle;
}

/* 凭据状态行：已配置=正常色，未配置=醒目色。 */
#credential-state[data-tone="bad"] { color: var(--ca-danger); font-weight: 600; }
#credential-state[data-tone="ok"] { color: var(--ca-fg-muted); }