/* ============================================================
   Claude-for-Office 复刻版 —— 设计系统
   颜色/字体 token 直接取自官方 index-CsCZ2Inh.css，观感一致。
   字体全部走系统字体（官方加载项本身就用 system-ui / Segoe UI），
   所以没有任何商业字体授权问题。
   ============================================================ */

:root {
  /* 字体（与官方 addin 的 :root 覆盖一致） */
  --font-ui: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-ui-serif: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;

  /* ——— 浅色主题（HSL 三元组，配合 hsl(var(--x)) 使用）——— */
  --bg-000: 0 0% 100%;
  --bg-100: 0 0% 100%;
  --bg-200: 60 11% 95%;
  --bg-300: 45 12% 93%;
  --bg-400: 50 11% 89%;
  --bg-500: 50 11% 89%;
  --text-000: 0 0% 7%;
  --text-100: 0 0% 7%;
  --text-200: 60 3% 21%;
  --text-300: 60 3% 21%;
  --text-400: 43 3% 47%;
  --text-500: 43 3% 47%;
  --accent-brand: 15 63.1% 59.6%;
  --accent-main-000: 15 55.6% 52.4%;
  --accent-main-100: 15 55.6% 52.4%;
  --accent-main-200: 15 63.1% 59.6%;
  --accent-secondary-000: 210 73.7% 40.2%;
  --accent-secondary-100: 210 70.9% 51.6%;
  --border-100: 30 3.3% 11.8%;
  --border-200: 30 3.3% 11.8%;
  --border-300: 30 3.3% 11.8%;
  --border-400: 30 3.3% 11.8%;
  --danger-000: 0 61.4% 22.4%;
  --danger-100: 0 58.6% 34.1%;
  --danger-200: 0 58.6% 34.1%;
  --oncolor-100: 0 0% 100%;
  --always-white: 0 0% 100%;
  --always-black: 0 0% 0%;
}

[data-theme="dark"] {
  /* ——— 深色主题（就是你截图里那套）——— */
  --bg-000: 60 2% 17%;
  --bg-100: 60 2% 12%;
  --bg-200: 60 2% 9%;
  --bg-300: 0 0% 7%;
  --bg-400: 0 0% 4%;
  --bg-500: 0 0% 4%;
  --text-000: 60 14% 97%;
  --text-100: 60 14% 97%;
  --text-200: 55 9% 74%;
  --text-300: 55 9% 74%;
  --text-400: 48 5% 57%;
  --text-500: 48 5% 57%;
  --accent-brand: 15 63.1% 59.6%;
  --accent-main-000: 15 55.6% 52.4%;
  --accent-main-100: 15 63.1% 59.6%;
  --accent-main-200: 15 63.1% 59.6%;
  --accent-secondary-000: 210 71.1% 62%;
  --accent-secondary-100: 210 70.9% 51.6%;
  --border-100: 51 16.5% 84.5%;
  --border-200: 51 16.5% 84.5%;
  --border-300: 51 16.5% 84.5%;
  --border-400: 51 16.5% 84.5%;
  --danger-000: 0 73.1% 66.5%;
  --danger-100: 0 80% 72%;
  --danger-200: 0 80% 75%;
  --oncolor-100: 0 0% 100%;
  --always-white: 0 0% 100%;
  --always-black: 0 0% 0%;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: hsla(var(--border-300) / 35%) transparent;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-ui);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: hsl(var(--bg-100));
  color: hsl(var(--text-100));
  font-size: 14px;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsla(var(--border-300) / 35%);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsla(var(--border-300) / 50%);
}

button {
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
}
button:disabled {
  cursor: not-allowed;
}

/* ============ 顶部栏 ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  flex-shrink: 0;
}
.topbar .title {
  font-weight: 600;
  font-size: 15px;
  color: hsl(var(--text-000));
}
.topbar .actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: hsl(var(--text-300));
  transition: background-color 0.15s, color 0.15s;
}
.icon-btn:hover {
  background: hsl(var(--bg-300));
  color: hsl(var(--text-100));
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* ============ 消息区 ============ */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 空状态 */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: hsl(var(--text-400));
}
.empty-state .hint {
  font-size: 15px;
  color: hsl(var(--text-300));
  margin-bottom: 4px;
}
.skill-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border-300) / 0.22);
  color: hsl(var(--text-300));
  font-size: 13px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.skill-chip:hover {
  background: hsl(var(--bg-300));
  color: hsl(var(--text-100));
  border-color: hsl(var(--border-200) / 0.4);
}

/* 用户气泡 */
.msg-user {
  align-self: flex-end;
  max-width: 85%;
  background: hsl(var(--bg-000));
  border: 1px solid hsl(var(--border-300) / 0.2);
  color: hsl(var(--text-100));
  padding: 9px 13px;
  border-radius: 16px;
  border-bottom-right-radius: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}

/* 助手消息（claude-response 排版） */
.msg-assistant {
  align-self: stretch;
  color: hsl(var(--text-100));
  line-height: 1.5;
  word-wrap: break-word;
}
.msg-assistant p {
  margin: 0 0 0.75em;
}
.msg-assistant p:last-child {
  margin-bottom: 0;
}
.msg-assistant h1,
.msg-assistant h2,
.msg-assistant h3 {
  font-weight: 600;
  line-height: 1.35;
  margin: 1em 0 0.4em;
}
.msg-assistant h1 { font-size: 1.125rem; }
.msg-assistant h2 { font-size: 1rem; }
.msg-assistant h3 { font-size: 0.9375rem; }
.msg-assistant ul,
.msg-assistant ol {
  margin: 0 0 0.75em;
  padding-left: 1.4em;
}
.msg-assistant li { margin: 0.2em 0; }
.msg-assistant code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: hsl(var(--bg-200));
  border-radius: 4px;
  padding: 0.1em 0.3em;
}
.msg-assistant pre {
  background: hsl(var(--bg-200));
  border: 1px solid hsl(var(--border-300) / 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0 0 0.75em;
}
.msg-assistant pre code {
  background: none;
  padding: 0;
}
.msg-assistant a {
  color: hsl(var(--accent-secondary-100));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 消息底部的“插入到文档”按钮 */
.msg-tools {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
.msg-assistant:hover .msg-tools {
  opacity: 1;
}
.mini-btn {
  font-size: 12px;
  color: hsl(var(--text-400));
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid hsl(var(--border-300) / 0.2);
  transition: background-color 0.15s, color 0.15s;
}
.mini-btn:hover {
  background: hsl(var(--bg-300));
  color: hsl(var(--text-100));
}

/* 工具调用状态条 */
.tool-status {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: hsl(var(--text-400));
  background: hsl(var(--bg-200));
  border: 1px solid hsl(var(--border-300) / 0.15);
  border-radius: 8px;
  padding: 7px 10px;
  font-family: var(--font-mono);
}
.tool-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--accent-brand));
  animation: pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* 打字光标 */
.caret {
  display: inline-block;
  width: 7px;
  height: 15px;
  background: hsl(var(--text-300));
  vertical-align: text-bottom;
  animation: blink 1s steps(2) infinite;
  margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: 0.4; } }

/* ============ 底部输入区 ============ */
.composer-wrap {
  padding: 0 12px 12px;
  flex-shrink: 0;
}
.composer {
  border: 1px solid hsl(var(--border-300) / 0.25);
  background: hsl(var(--bg-000));
  border-radius: 16px;
  padding: 10px 12px 8px;
  transition: border-color 0.2s;
}
.composer:focus-within {
  border-color: hsl(var(--border-200) / 0.5);
}
.composer textarea {
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: hsl(var(--text-100));
  font: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
  max-height: 160px;
  min-height: 24px;
}
.composer textarea::placeholder {
  color: hsl(var(--text-400));
}
.composer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* 发送按钮（primary：亮底暗箭头，与官方 ._primary 一致） */
.send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: hsl(var(--text-000));
  color: hsl(var(--bg-000));
  transition: opacity 0.15s, background-color 0.15s;
}
.send-btn:hover:not(:disabled) { opacity: 0.9; }
.send-btn:disabled {
  background: hsl(var(--bg-400));
  color: hsl(var(--text-400));
}
.send-btn svg { width: 18px; height: 18px; }

.status-line {
  text-align: center;
  font-size: 12px;
  color: hsl(var(--text-400));
  padding: 4px 0 2px;
}
.status-line.error { color: hsl(var(--danger-200)); }

/* ============ 设置弹层 ============ */
.modal-backdrop[hidden] {
  display: none !important; /* 覆盖 .modal-backdrop 的 display:flex，尊重 hidden 属性 */
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: hsl(var(--always-black) / 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}
.modal {
  width: 100%;
  max-width: 480px;
  background: hsl(var(--bg-000));
  border: 1px solid hsl(var(--border-300) / 0.2);
  border-radius: 16px 16px 0 0;
  padding: 18px 18px 16px;
  box-shadow: 0 -8px 30px hsl(var(--always-black) / 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--text-000));
}
.cfg-label {
  font-size: 12px;
  color: hsl(var(--text-400));
  margin-top: 2px;
}
.cfg-input {
  width: 100%;
  border: 1px solid hsl(var(--border-300) / 0.25);
  background: hsl(var(--bg-100));
  color: hsl(var(--text-100));
  font: inherit;
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
.cfg-input:focus {
  border-color: hsl(var(--accent-secondary-100) / 0.6);
}
.cfg-input::placeholder {
  color: hsl(var(--text-400));
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.mini-btn.primary {
  background: hsl(var(--accent-main-100));
  color: hsl(var(--oncolor-100));
  border-color: transparent;
}
.mini-btn.primary:hover {
  background: hsl(var(--accent-main-200));
  color: hsl(var(--oncolor-100));
}