/* MeetingPal · 基于 Framework7 v8 (iOS 主题) 的品牌定制层 */

:root {
  --f7-theme-color: #0e7d72;
  --f7-theme-color-rgb: 14, 125, 114;
  --f7-theme-color-shade: #0a655c;
  --f7-theme-color-tint: #129486;
  --mp-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  --mp-stamp: #c24a33;
  --mp-stamp-weak: rgba(194, 74, 51, .08);
  --mp-good: #1f7a3d;
}

html.dark {
  --mp-stamp: #e5755b;
  --mp-stamp-weak: rgba(229, 117, 91, .12);
  --mp-good: #7bc47f;
}

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; }
#app, .view { height: 100%; }

body { user-select: none; }
[hidden] { display: none !important; }
.en-text, .sc-en, .rv-item .rv-orig, .rv-item .rv-better, .sheet-example { user-select: text; }

/* ---------- 顶栏 ---------- */
.meeting-brand { font-weight: 700; letter-spacing: -.01em; }
.navbar .title { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.title-sub {
  font-family: var(--mp-mono); font-size: 9px; font-weight: 400;
  letter-spacing: .18em; color: var(--f7-navbar-subtitle-text-color, var(--f7-navbar-title-text-color));
  opacity: .65; text-transform: uppercase;
}
.mp-review-link { height: auto; align-self: center; }
.mp-review-link span {
  display: inline-block; line-height: 1.4;
  background: var(--f7-theme-color); color: #fff;
  font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
}
.mp-review-link.active-state span { opacity: .7; }

/* ---------- 首页 ---------- */
.home-intro { margin: 4px 16px 14px; color: var(--f7-list-item-subtitle-text-color); font-size: 13.5px; }
.mp-list {
  margin: 0 16px 8px; border-radius: 14px; overflow: hidden;
  border: 1.5px solid rgba(128, 128, 128, .38);
  background: var(--f7-card-bg-color);
}
.mp-list .item-content { padding-left: 14px; }
.mp-list .item-media { font-size: 22px; min-width: 34px; text-align: center; }
.mp-list .item-inner { display: block; position: relative; padding: 12px 40px 12px 0; }
.mp-list .item-title { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.mp-list .item-footer {
  margin-top: 2px;
  font-family: var(--mp-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--f7-list-item-subtitle-text-color);
}
.err-li { list-style: none; }
.mp-section { margin-top: 22px; }

.history { list-style: none; margin: 0; padding: 0 16px 24px; }
.history-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--f7-card-bg-color); border-radius: var(--f7-card-border-radius);
  border: 1px solid rgba(128, 128, 128, .28);
  box-shadow: var(--f7-card-box-shadow);
  padding: 12px 14px; margin-bottom: 8px;
}
.history-item:active { opacity: .7; }
.h-emoji { font-size: 17px; }
.h-title { flex: 1; font-size: 14.5px; }
.h-score {
  font-family: var(--mp-mono); font-size: 12.5px; font-weight: 700;
  background: color-mix(in srgb, var(--f7-theme-color) 14%, transparent);
  color: var(--f7-theme-color); border-radius: 6px; padding: 2px 8px;
}
.h-date { font-family: var(--mp-mono); color: var(--f7-list-item-subtitle-text-color); font-size: 11px; }
.empty { color: var(--f7-list-item-subtitle-text-color); font-size: 13px; text-align: center; padding: 16px 0; list-style: none; }

/* ---------- 提示条（消息流内，不遮挡） ---------- */
.hint-chip {
  margin: 0 0 4px; padding: 9px 13px; flex-shrink: 0;
  background: color-mix(in srgb, var(--f7-theme-color) 10%, var(--f7-card-bg-color));
  color: var(--f7-page-text-color);
  border-radius: 12px; font-size: 13px; line-height: 1.6;
  border: 1px solid color-mix(in srgb, var(--f7-theme-color) 35%, transparent);
}

/* ---------- 消息区 ---------- */
.messages-content { padding-top: 8px; }
.message-bubble { font-size: 15.5px; }
.en-text .w { border-radius: 4px; cursor: pointer; }
.en-text .w:active { background: color-mix(in srgb, var(--f7-theme-color) 18%, transparent); }
.zh-line {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed var(--f7-list-item-border-color, rgba(128,128,128,.3));
  color: var(--f7-list-item-subtitle-text-color);
  font-size: 12.5px; line-height: 1.55;
  user-select: text;
}
.ai-bar { display: flex; margin-top: 6px; }
.spk { border: none; background: transparent; font-size: 15px; padding: 2px 6px; border-radius: 8px; opacity: .75; }
.spk:active { opacity: 1; }
.message-sent .correction { user-select: text; }
.correction {
  margin-top: 8px; padding: 8px 11px;
  background: var(--mp-stamp-weak);
  border: 1.5px dashed var(--mp-stamp);
  border-radius: 10px; font-size: 13px;
}
.c-line s { color: var(--mp-stamp); opacity: .85; }
.c-line b { color: var(--mp-good); }
.c-note { margin-top: 3px; color: var(--f7-list-item-subtitle-text-color); font-size: 12.5px; }
.message-sent .bubble-me-note { color: rgba(255,255,255,.75); }

/* ---------- 分段提示条 ---------- */
.script-bar {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(60px + env(safe-area-inset-bottom));
  z-index: 14;
  background: var(--f7-card-bg-color);
  border: 1px solid rgba(128, 128, 128, .28); border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
  padding: 8px 12px 10px;
}
.sb-head { display: flex; align-items: center; gap: 8px; }
.sb-nav {
  width: 28px; height: 24px; border-radius: 8px; font-size: 14px; line-height: 1;
  border: 1px solid rgba(128, 128, 128, .3); background: transparent;
  color: var(--f7-page-text-color);
}
.sb-nav:disabled { opacity: .3; }
.sb-label {
  flex: 1; text-align: center; font-family: var(--mp-mono);
  font-size: 11px; font-weight: 700; color: var(--f7-theme-color); letter-spacing: .08em;
}
.sb-en { font-size: 13.5px; line-height: 1.55; margin-top: 7px; user-select: text; }
.sb-zh { font-size: 12px; color: var(--f7-list-item-subtitle-text-color); margin-top: 3px; line-height: 1.5; }
.sb-actions { display: flex; gap: 8px; margin-top: 7px; }
.sb-actions .sc-spk { flex: 1; padding: 7px 10px; }
.sheet-title .sc-spk { margin-left: 10px; }

/* ---------- 录音条 ---------- */
.rec-state {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 15;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  background: var(--f7-card-bg-color);
  border: 1.5px dashed var(--mp-stamp); border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
}
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mp-stamp); flex-shrink: 0; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .2; } }
.rec-label { font-family: var(--mp-mono); font-size: 11px; font-weight: 700; color: var(--mp-stamp); letter-spacing: .18em; flex-shrink: 0; }
#wave-canvas { flex: 1; height: 26px; min-width: 60px; }
#rec-time { font-family: var(--mp-mono); font-size: 11.5px; color: var(--f7-list-item-subtitle-text-color); flex-shrink: 0; }

/* ---------- 输入区 ---------- */
.messagebar .toolbar-inner { padding-left: 6px; padding-right: 6px; }
.mp-mic, .mp-send { width: 40px; }
.mp-mic { color: var(--f7-theme-color); }
.mp-mic.rec { color: var(--mp-stamp); animation: pulse 1s infinite; }
.mp-send { color: var(--f7-theme-color); transition: opacity .15s; }
.mp-send[disabled] { opacity: .3; pointer-events: none; }
.mp-send:active, .mp-mic:active { opacity: .6; }
.messagebar textarea {
  font-size: 15px; max-height: 96px;
}

/* ---------- 参考稿 ---------- */
.sheet-modal-inner { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
.script-list { margin-top: 6px; max-height: 56dvh; overflow-y: auto; }
.sc-block { margin-top: 12px; }
.sc-en { font-size: 14.5px; line-height: 1.6; }
.sc-spk { border: none; background: color-mix(in srgb, var(--f7-theme-color) 13%, transparent); color: var(--f7-theme-color); border-radius: 8px; font-size: 13px; padding: 2px 7px; margin-left: 8px; vertical-align: 1px; }
.sc-zh { color: var(--f7-list-item-subtitle-text-color); font-size: 12.5px; margin-top: 3px; line-height: 1.6; }
.sheet-pos { font-family: var(--mp-mono); font-size: 11px; opacity: .6; margin-left: 6px; }
.mp-btn {
  display: block; width: 100%; margin-top: 16px; border: none; border-radius: 12px;
  background: var(--f7-theme-color); color: #fff; font-size: 15px; font-weight: 600; padding: 11px;
}
.mp-btn:active { opacity: .8; }

/* ---------- 点评 ---------- */
.popup-pad { padding: calc(18px + env(safe-area-inset-top)) 18px 30px; }
.rv-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.rv-x { margin-left: auto; flex-shrink: 0; width: 30px; }
.rv-score {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--f7-theme-color) calc(var(--p, 0) * 1%), var(--f7-page-bg-color) 0);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mp-mono); font-size: 20px; font-weight: 800;
  position: relative;
}
.rv-score::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--f7-card-bg-color); }
.rv-score span { position: relative; }
.rv-title { font-weight: 700; font-size: 16px; }
.rv-summary { color: var(--f7-list-item-subtitle-text-color); font-size: 13px; margin-top: 3px; }
.rv-h {
  font-family: var(--mp-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--f7-list-item-subtitle-text-color);
  margin: 18px 0 8px;
}
.rv-item {
  background: var(--f7-card-bg-color); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; font-size: 14px;
  box-shadow: var(--f7-card-box-shadow);
}
.rv-orig { color: var(--mp-stamp); text-decoration: line-through; font-size: 13.5px; }
.rv-better { color: var(--mp-good); font-weight: 600; margin-top: 2px; }
.rv-phrase { font-weight: 600; }
.rv-note { color: var(--f7-list-item-subtitle-text-color); font-size: 12.5px; margin-top: 3px; }
.rv-empty { color: var(--f7-list-item-subtitle-text-color); font-size: 14px; }
.rv-advice {
  background: color-mix(in srgb, var(--f7-theme-color) 10%, transparent);
  border-radius: 12px; padding: 11px 13px; font-size: 13.5px; margin-top: 4px;
}
.modal-card label { display: block; margin: 12px 0; font-size: 13.5px; color: var(--f7-list-item-subtitle-text-color); }
.modal-card label input[type="password"], .modal-card label select {
  display: block; width: 100%; margin-top: 6px;
  border: 1px solid var(--f7-input-border-color, var(--f7-list-item-border-color)); border-radius: 10px; padding: 10px 12px;
  font-size: 15px; background: var(--f7-card-bg-color); color: var(--f7-page-text-color);
}
.modal-card label.check { display: flex; align-items: center; gap: 8px; }
.modal-card label.check input { width: 18px; height: 18px; }

/* ---------- file:// 打开引导 ---------- */
.file-guide { max-width: 640px; margin: 0 auto; padding: 48px 24px; }
.fg-emoji { font-size: 44px; }
.fg-title { font-size: 20px; font-weight: 700; margin: 12px 0 8px; }
.file-guide p { color: var(--f7-list-item-subtitle-text-color); font-size: 14px; margin: 6px 0; }
.fg-box {
  background: var(--f7-card-bg-color); border-radius: 12px;
  padding: 12px 14px; font-size: 14px; margin-top: 10px; line-height: 1.6;
  box-shadow: var(--f7-card-box-shadow);
}

/* ---------- 错误卡片 ---------- */
.err-card {
  grid-column: 1 / -1;
  background: var(--f7-card-bg-color); border-radius: 14px;
  padding: 16px; box-shadow: var(--f7-card-box-shadow);
  font-size: 14px;
}
.err-title { font-weight: 700; margin-bottom: 6px; }
.err-msg { color: var(--mp-stamp); font-size: 13px; word-break: break-all; }
.err-hint { color: var(--f7-list-item-subtitle-text-color); font-size: 12px; margin-top: 6px; word-break: break-all; }
.err-card .mp-btn { margin-top: 12px; }

/* ---------- Toast ---------- */
#toast { z-index: 20000; }