/* Remember 组件库。规范见 docs/设计规范.md。最后加载：聊天输入行、图标按钮、AI 胶囊、语音卡的样式只在这里定义，
   前面 app.css / theme.css 里零散的同类规则以这里为准。要改外观先改规范，再改这里。 */

:root {
  --danger: #E5484D;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 28px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-full: 999px;
  --h-sm: 32px; --h-md: 38px; --h-lg: 44px;
  --t-fast: 160ms; --t-base: 260ms; --t-slow: 380ms;
}

/* ---------- 图标 ---------- */
.ic { display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 0; }
.ic-svg { display: block; }

/* ---------- 图标按钮 ---------- */
.ui-ibtn { width: var(--h-lg); height: var(--h-lg); padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--sheet); color: var(--pencil); cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease); }
.ui-ibtn:hover { color: var(--ink); border-color: #C5CCD8; background: #FAFBFD; }
.ui-ibtn:active { transform: scale(.94); }
.ui-ibtn.is-on { color: var(--blue); border-color: rgba(43,89,255,.35); background: var(--blue-soft); }
.ui-ibtn.is-rec { color: #fff; background: var(--danger); border-color: var(--danger); animation: uiRec 1.2s ease-in-out infinite; }
.ui-ibtn:disabled, .ui-ibtn.is-busy { opacity: .5; cursor: default; }
@keyframes uiRec { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,.4); } 50% { box-shadow: 0 0 0 7px rgba(229,72,77,0); } }

/* ---------- 聊天输入行：[附件] [输入框 / 按住说话] [语音↔键盘] [发送]，同高、底边对齐 ---------- */
.chat-in { display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--rule); }
.chat-in > .btn.ic, .chat-in > .ui-ibtn { width: var(--h-lg); height: var(--h-lg); padding: 0; border-radius: var(--r-md); }
.chat-in textarea { flex: 1; min-width: 0; height: var(--h-lg); min-height: var(--h-lg); max-height: 196px; padding: 10px 14px; line-height: 24px; border-radius: var(--r-md); }
.chat-in textarea::placeholder { font-size: var(--fs-md); color: #A3ADBC; }
.chat-in .btn.primary { height: var(--h-lg); padding: 0 var(--sp-5); border-radius: var(--r-md); }
.chat-in #stopBtn { height: var(--h-lg); border-radius: var(--r-md); }

/* 按住说话条：替代输入框的位置，同高 */
.ui-hold, .chat-in .hold-btn { flex: 1; min-width: 0; height: var(--h-lg); border: 0; border-radius: var(--r-md);
  background: var(--blue-soft); color: var(--blue); font-size: var(--fs-md); font-weight: 600; letter-spacing: .02em; cursor: pointer;
  display: none; align-items: center; justify-content: center; gap: var(--sp-2);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chat-in.voice-mode .hold-btn { display: flex; }
.chat-in.voice-mode textarea { display: none; }
.chat-in .hold-btn.is-down { background: var(--blue); color: #fff; transform: scale(.985); }

/* 电脑端：输入框在上，下面一排 [附件] [语音] ……[发送]，和现在的版式一致，只统一尺寸与图标 */
body:not(.mobile) .chat-in { display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "text text text text" "img mic . send"; gap: var(--sp-2); }
body:not(.mobile) .chat-in #cin { grid-area: text; height: auto; min-height: 72px; }
body:not(.mobile) .chat-in > .ui-ibtn { width: var(--h-md); height: var(--h-md); }
body:not(.mobile) .chat-in .btn.primary { height: var(--h-md); }

/* ---------- 悬浮 AI 胶囊（手机首页右下） ---------- */
@media (max-width: 760px) {
  .chat-in { padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + var(--safe-b, 0px)); gap: var(--sp-2); align-items: flex-end; }
  .chat-in textarea { font-size: 16px; }   /* iOS 聚焦低于 16px 会放大页面 */
  .chat-in .btn.primary { padding: 0 var(--sp-4); }
}

/* ---------- 语音卡：波形是 canvas，随声音起伏 ---------- */
.voice-card { border-radius: var(--r-lg); }
.voice-wave { display: block; width: 100%; height: 56px; margin: var(--sp-2) 0 0; }
.voice-bars { display: none; }                         /* 旧的固定柱子不再使用（电脑端的小提示条还在用，下面单独保留） */
body:not(.mobile) .mic-live .voice-bars { display: flex; }
.voice-msg { margin: 28px 0 8px; }
.voice-hint { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--pencil); font-size: var(--fs-sm); margin-top: 6px; }
.voice.cancel .voice-hint { color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .ui-ibtn.is-rec { animation: none; } }

/* ---------- 小图标按钮：关闭、翻页、收起 ---------- 以前用 × ‹ › 字符，现在统一用标准图标，尺寸和点击区一致 */
.wk-nav, .cal-nav button, .ctx-x, .pop .x, .dr-x, .pic-close, .assist-hide, .blk .bx, .pic-x {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 0; color: var(--pencil);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.wk-nav { width: 28px; height: 28px; }
.cal-nav button { width: 26px; height: 26px; border-radius: var(--r-sm); }
.cal-nav button:hover, .ctx-x:hover, .pop .x:hover, .dr-x:hover, .assist-hide:hover { background: var(--desk); color: var(--ink); }
.ctx-x, .pop .x, .dr-x { width: 28px; height: 28px; border-radius: var(--r-sm); font-size: 0; }
.dr-x { align-self: flex-start; }
.pic-close { width: 32px; height: 32px; border-radius: var(--r-full); font-size: 0; }
body:not(.mobile) .assist-hide { width: 28px; height: 28px; padding: 0; font-size: 0; }
.blk .bx { width: 24px; height: 24px; border-radius: var(--r-full); font-size: 0; }
.blk .bx:hover { background: var(--desk); color: var(--ink); }
.pic-x { width: 20px; height: 20px; border-radius: var(--r-full); font-size: 0; background: var(--ink); color: #fff; }
.dr-blocks.doc > .blk:has(> img.pv) .bx { width: 24px; height: 24px; line-height: 0; color: #fff; }
@media (max-width: 760px) {
  .wk-nav, .cal-nav button, .ctx-x, .pop .x, .dr-x { width: 44px; height: 44px; }   /* 手机上点击区 ≥44 */
}