:root {
  --ink: #282b3a;
  --muted: #75809a;
  --line: #e5e8f0;
  --brand: #6455d8;
  --brand2: #8d78ed;
  --paper: #fff;
  --wash: #f4f6fb;
  --brand-wash: #f0efff;
  --brand-line: #ddd8ff;
  --error: #b93e52;
  --ok: #27805d;
  --shadow: 0 14px 40px rgba(55, 54, 90, .09);
  --chat-ui-font: "Noto Sans SC", "Noto Sans CJK SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

body {
  background: linear-gradient(135deg, #eef0ff, #f8f5ff 48%, #eef8f7);
  color: var(--ink);
  padding: 22px;
}

#phone {
  width: min(100%, 430px);
  height: min(820px, calc(100dvh - 44px));
  max-height: none;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(225, 228, 238, .95);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.view { background: rgba(255, 255, 255, .96); }

#view-login {
  background:
    radial-gradient(circle at 20% 12%, rgba(141, 120, 237, .18), transparent 31%),
    radial-gradient(circle at 88% 88%, rgba(106, 194, 175, .14), transparent 28%),
    linear-gradient(145deg, #f7f6ff, #fff);
}

.logo {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #9a8bf0, var(--brand));
  color: #fff;
  box-shadow: 0 14px 32px rgba(100, 85, 216, .23);
  font-size: 31px;
  font-weight: 800;
}

h1 { color: var(--ink); font-size: 26px; }
.sub { color: var(--muted); }
.tip {
  color: #5448bd;
  background: var(--brand-wash);
  border: 1px solid #cfc9ff;
  border-radius: 999px;
}

button { border-radius: 12px; }
.btn-main,
.btn-send,
.fab {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 8px 18px rgba(100, 85, 216, .18);
}
.btn-main:hover,
.btn-send:hover,
.fab:hover { filter: brightness(.97); }
.btn-ghost {
  background: #fff;
  color: #5448bd;
  border: 1px solid var(--brand-line);
}

.topbar,
#view-chat .topbar,
#view-personas .topbar,
#view-pick .topbar,
#view-newchat .topbar {
  min-height: 62px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
}
.topbar .name,
#view-chat .topbar .name,
#view-personas .topbar .name,
#view-pick .topbar .name,
#view-newchat .topbar .name {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}
.topbar .pts,
#view-chat .pts,
#view-personas .pts {
  background: var(--brand-wash);
  color: #5448bd;
  border: 1px solid var(--brand-line);
}
.topbar .btn-icon,
#view-chat .btn-icon,
#view-personas .btn-icon,
#view-pick .btn-icon,
#view-newchat .btn-icon {
  min-width: 38px;
  padding: 7px 10px;
  background: var(--wash);
  color: #4f5871;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.scroll,
#view-chat .scroll,
#view-personas .scroll,
#view-pick .scroll,
#view-newchat .scroll {
  background: #f9f9fd;
  scrollbar-color: #cfc9ff transparent;
}

.card,
#view-pick .card,
#view-newchat .card {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(55, 54, 90, .055);
}
.card:hover,
#view-pick .card:hover,
#view-newchat .card:hover {
  border-color: var(--brand-line);
  background: #fcfbff;
}
.avatar,
.sess-avatar {
  border-radius: 13px;
  background: linear-gradient(135deg, #9a8bf0, var(--brand));
  color: #fff;
}
.card .n,
#view-pick .card .n,
#view-newchat .card .n { color: var(--ink); }
.card .b,
#view-pick .card .b,
#view-newchat .card .b,
.model .price { color: var(--muted); }
.tag,
#view-pick .tag {
  background: var(--brand-wash);
  color: #5b4ec3;
  border: 1px solid #e4e0ff;
}
.sec,
#view-pick .sec { color: #515a70; }
.persona-category-title { color: var(--ink); }
.persona-category-note { color: var(--muted); }
.import-card {
  display: flex;
  align-items: center;
  border: 1px dashed #bdb6ef !important;
  background: #faf9ff !important;
}
.import-card .n { color: #5448bd !important; }
.import-icon { margin-right: 12px; font-size: 26px; }
.radio { border-color: #d7d9e4; }
.radio.on {
  border-color: var(--brand);
  background: radial-gradient(circle, var(--brand) 0 5px, transparent 6px);
}

#view-personas,
#view-pick,
#view-newchat,
#view-chat { background: #f9f9fd; }

#view-chat,
#view-chat button,
#view-chat input,
#view-chat textarea {
  font-family: var(--chat-ui-font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
.sess {
  margin: 7px 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.sess:hover { background: var(--brand-wash); }
.sess-name { color: var(--ink); font-weight: 700; }
.sess-time,
.sess-last,
.sess-model { color: var(--muted); }
.fab {
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 18px;
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(100, 85, 216, .28);
}

#view-chat .scroll { background: #f9f9fd; }
#view-chat .chat-context-strip {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 7px 13px;
  background: rgba(250, 249, 255, .97);
  border-bottom: 1px solid #ece9fb;
  scrollbar-width: none;
}
#view-chat .chat-context-strip::-webkit-scrollbar { display: none; }
#view-chat .story-clock {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  color: #6557b5;
  background: #f1efff;
  border: 1px solid #ded8ff;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
#view-chat .story-clock[hidden] { display: none; }
#view-chat .story-clock span { color: #8a82ad; }
#view-chat .story-clock strong { font-size: 10px; font-weight: 600; }
#view-chat .scene-summary {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  color: #625b83;
  background: #fbfaff;
  border: 1px solid #e5e0f8;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
#view-chat .scene-summary[hidden] { display: none; }
#view-chat #milestone-bar { flex: 0 0 auto; }
#view-chat .chat-context-strip .milestone-strip { padding: 0; }
#view-chat .conversation-state-panel {
  position: relative;
  z-index: 14;
  flex: 0 0 auto;
  margin: 8px 12px 4px;
  overflow: visible;
  color: #4f496b;
  background: rgba(253, 252, 255, .96);
  border: 1px solid #e2def3;
  border-radius: 13px;
  box-shadow: 0 4px 14px rgba(74, 64, 126, .045);
}
#view-chat .conversation-state-panel[hidden] { display: none; }
#view-chat .conversation-state-summary {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  background: rgba(253, 252, 255, .98);
  border-radius: 12px;
}
#view-chat .conversation-state-summary::-webkit-details-marker { display: none; }
#view-chat .conversation-state-summary strong {
  color: #6658ba;
  font-size: 12px;
  font-weight: 700;
}
#view-chat .conversation-state-summary .scene-summary {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: #77718d;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-chat .conversation-state-summary .ph {
  color: #8f85c7;
  font-size: 12px;
  transition: transform .18s ease;
}
#view-chat .conversation-state-panel[open] .conversation-state-summary .ph { transform: rotate(180deg); }
#view-chat .conversation-state-fields {
  position: absolute;
  z-index: 1;
  top: calc(100% - 1px);
  right: -1px;
  left: -1px;
  max-height: min(46vh, 290px);
  padding: 2px 12px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(253, 252, 255, .985);
  border: 1px solid #e2def3;
  border-top: 1px solid #efecf8;
  border-radius: 0 0 13px 13px;
  box-shadow: 0 14px 28px rgba(58, 49, 105, .14);
}
#view-chat .conversation-state-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid #f1eef8;
  font-size: 12px;
  line-height: 1.5;
}
#view-chat .conversation-state-row:last-child { border-bottom: 0; }
#view-chat .conversation-state-label {
  color: #766ab0;
  font-weight: 600;
  white-space: nowrap;
}
#view-chat .conversation-state-value {
  min-width: 0;
  color: #555064;
  overflow-wrap: anywhere;
  word-break: normal;
  writing-mode: horizontal-tb;
}
#view-chat .relationship-event-panel {
  position: relative;
  z-index: 13;
  flex: 0 0 auto;
  margin: 4px 12px 5px;
  color: #4f496b;
  background: rgba(253, 252, 255, .98);
  border: 1px solid #ddd8f4;
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(74, 64, 126, .06);
}
#view-chat .relationship-event-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 43px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}
#view-chat .relationship-event-summary::-webkit-details-marker { display: none; }
#view-chat .relationship-event-summary > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6658ba;
  font-size: 12px;
  white-space: nowrap;
}
#view-chat .relationship-event-summary > small {
  min-width: 0;
  overflow: hidden;
  color: #77718d;
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-chat .relationship-event-summary > .ph {
  color: #8f85c7;
  font-size: 12px;
  transition: transform .18s ease;
}
#view-chat .relationship-event-panel[open] .relationship-event-summary > .ph { transform: rotate(180deg); }
#view-chat .relationship-event-body {
  max-height: min(22dvh, 180px);
  padding: 0 11px 11px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid #efecf8;
}
#view-chat .relationship-flow-section {
  margin-top: 9px;
  padding: 10px;
  background: #f9f8ff;
  border: 1px solid #ebe7fb;
  border-radius: 11px;
}
#view-chat .relationship-flow-section > header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #766ab0;
  font-size: 11px;
}
#view-chat .relationship-flow-section > header strong {
  color: #4f466f;
  font-size: 11px;
}
#view-chat .relationship-flow-section h3 {
  margin: 2px 0 5px;
  color: #373344;
  font-size: 13px;
}
#view-chat .relationship-flow-section p,
#view-chat .relationship-flow-section li,
#view-chat .relationship-flow-section small,
#view-chat .relationship-flow-section span {
  color: #6b6579;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#view-chat .relationship-flow-section ul { margin: 6px 0 0 17px; }
#view-chat .relationship-evidence-list { display: grid; gap: 6px; }
#view-chat .relationship-evidence-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid #eeeafa;
}
#view-chat .relationship-evidence-item:first-child { padding-top: 0; border-top: 0; }
#view-chat .relationship-evidence-item small { display: block; color: #8b82ad; font-size: 10px; }
#view-chat .relationship-evidence-item p { margin-top: 2px; }
#view-chat .relationship-evidence-item button,
#view-chat .story-source-button,
#view-chat .event-feedback button {
  min-height: 32px;
  padding: 6px 9px;
  color: #6658ba;
  background: #eeebff;
  border: 1px solid #dcd6ff;
  border-radius: 9px;
  font-size: 10px;
  white-space: nowrap;
}
#view-chat .story-node {
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border-left: 3px solid #8d7de2;
  border-radius: 8px;
}
#view-chat .story-node small { color: #6658ba; font-weight: 700; }
#view-chat .story-node span { display: block; margin-top: 4px; color: #827a97; }
#view-chat .story-source-button { margin-top: 8px; }
#view-chat .story-event-progress {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 8px 2px 0;
  color: #827a97;
  font-size: 10px;
}
#view-chat .story-event-progress strong { color: #5f5681; font-size: 11px; }
#view-chat .story-event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}
#view-chat .story-event-actions button {
  flex: 1 1 42%;
  min-height: 42px;
  min-width: 110px;
  padding: 8px 11px;
  color: #fff;
  background: linear-gradient(135deg, #7462dc, #9b74dc);
  border: 0;
  border-radius: 10px;
  font-size: 11px;
}
#view-chat .story-event-actions button.secondary {
  color: #62598a;
  background: #f0edff;
  border: 1px solid #ddd7fa;
}
#view-chat .story-event-actions button:disabled { opacity: .5; cursor: wait; }
#view-chat .persona-control-note {
  flex: 1 0 100%;
  color: #766e88;
  font-size: 10px;
  line-height: 1.5;
}
#view-chat .role-adjudication { border-color: #dfd7ff; background: #f6f3ff; }
#view-chat .event-feedback { border-color: #d9eee4; background: #f4fbf7; }
#view-chat .relationship-flow-empty { color: #8a8496; font-size: 11px; line-height: 1.5; }
#view-chat .relationship-flow-error {
  min-height: 0;
  margin: 7px 2px 0;
  color: #a14c55;
  font-size: 10px;
  line-height: 1.45;
}
#view-chat .relationship-source-highlight .bubble,
#view-chat .relationship-source-highlight .assistant-turn-card {
  outline: 3px solid rgba(128, 105, 222, .38);
  outline-offset: 3px;
}
#view-chat .relationship-event-panel button:focus-visible,
#view-chat .relationship-event-summary:focus-visible {
  outline: 2px solid #7563d9;
  outline-offset: 2px;
}
#view-chat #msg-list {
  padding-bottom: 28px;
  scroll-padding-bottom: 28px;
}
.history-load-status {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 1px auto 12px;
  padding: 5px 10px;
  color: #8b87a2;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 400;
}
.history-load-button { color: #6659b7; background: #f2efff; cursor: pointer; }
.history-start { opacity: .7; }
.new-message-indicator {
  position: absolute;
  right: 14px;
  bottom: 76px;
  z-index: 12;
  padding: 7px 12px;
  color: #fff;
  background: #6e5bd7;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(74, 57, 166, .28);
  font-size: 11px;
}
.new-message-indicator[hidden] { display: none; }
#view-chat #msg-list .msg:last-child { margin-bottom: 18px; }
#view-chat .theirs .bubble {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px 15px 15px 15px;
  box-shadow: 0 5px 16px rgba(55, 54, 90, .055);
}
#view-chat .assistant-turn {
  width: 100%;
  gap: 0;
}
#view-chat .assistant-turn-card {
  width: min(88%, 560px);
  max-width: min(88%, 560px);
  padding: 0;
}
#view-chat .source-quote-card {
  width: min(88%, 560px);
  max-width: min(88%, 560px);
  margin: 0 0 9px;
  color: var(--ink);
  background: #f7f6ff;
  border: 1px solid var(--line);
  border-left: 3px solid #8171d8;
  border-radius: 5px 13px 13px 13px;
  box-shadow: 0 5px 16px rgba(55, 54, 90, .045);
}
#view-chat .source-quote-card summary {
  padding: 9px 12px;
  color: #5d55a1;
  font-family: var(--chat-ui-font);
  font-size: 14px;
  font-weight: 650;
}
#view-chat .source-quote-card summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
#view-chat .source-quote-card summary small {
  margin-left: 5px;
  color: #8b87a2;
  font-size: 11px;
  font-weight: 450;
}
#view-chat .source-quote-body {
  padding: 10px 12px 12px;
  color: #3d4055;
  background: #fff;
  border-top: 1px solid var(--line);
  font-family: var(--chat-ui-font);
  font-size: 14px;
  line-height: 1.65;
}
#view-chat .source-quote-copy {
  margin: 8px 12px;
  min-height: 36px;
  padding: 6px 10px;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
#view-chat .source-quote-copy:focus-visible,
#view-chat .assistant-turn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
#view-chat .source-quote-verification > div,
#view-chat .source-review-receipt > div {
  padding: 8px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}
#view-chat .source-query-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #5d55a1;
  background: #f7f6ff;
  font-size: 12px;
}
#view-chat .source-query-shortcut:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.source-query-modal {
  position: absolute;
  inset: 0;
  z-index: 70;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 14px max(18px, env(safe-area-inset-bottom));
  background: rgba(3,5,12,.74);
  backdrop-filter: blur(12px);
}
.source-query-panel {
  width: min(100%, 520px);
  max-height: 88%;
  overflow-y: auto;
  border: 1px solid rgba(172,149,255,.3);
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(0,0,0,.35);
}
.source-query-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.source-query-head small { color: #7660d5; font-size: 9px; letter-spacing: .18em; }
.source-query-head h2 { margin: 4px 0 0; font-size: 21px; }
.source-query-head button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: #514c86; background: var(--wash); font-size: 24px; }
.source-query-note { margin: 0; padding: 0 20px 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.source-query-form { display: grid; gap: 9px; padding: 0 20px 14px; }
.source-query-form label { color: #59566b; font-size: 12px; font-weight: 650; }
.source-query-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; padding: 11px 12px; border: 1px solid #d9ddea; border-radius: 13px; color: var(--ink); background: #fbfbfe; font: inherit; line-height: 1.55; }
.source-query-form textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.source-query-form button { min-height: 42px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand2)); font-weight: 700; }
.source-query-form button:disabled { opacity: .55; }
.source-query-result { min-height: 48px; padding: 0 20px 20px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.source-query-record { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line); border-left: 3px solid #8171d8; border-radius: 6px 14px 14px 14px; background: #f7f6ff; }
.source-query-record strong { color: #4f477f; font-size: 14px; }
.source-query-record small { color: #827d96; }
.source-query-record pre { margin: 5px 0 0; padding: 11px; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; border-top: 1px solid var(--line); color: #3d4055; background: #fff; font: 13px/1.65 var(--chat-ui-font); }
.source-query-caveat { margin: 9px 2px 0; color: #777287; }
@media (max-width: 420px) {
  #view-chat .source-query-shortcut span { display: none; }
  #view-chat .source-query-shortcut { width: 34px; justify-content: center; padding: 0; }
  .source-query-modal { padding-left: 8px; padding-right: 8px; }
}
#view-chat .assistant-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  font-family: var(--chat-ui-font);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .012em;
  overflow-wrap: anywhere;
}
#view-chat .assistant-copy p {
  margin: 0;
}
#view-chat .assistant-dialogue-bubble {
  width: fit-content;
  max-width: 100%;
  padding: 11px 15px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px 15px 15px 15px;
  box-shadow: 0 5px 16px rgba(55, 54, 90, .055);
}
#view-chat .assistant-dialogue {
  color: #30344a;
  font-weight: 450;
}
#view-chat .assistant-action {
  align-self: center;
  max-width: 92%;
  padding: 0 8px;
  color: #8b91a6;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .01em;
  text-align: center;
}
.inner-thought {
  width: min(88%, 560px);
  margin: 12px 0 0 4px;
  border-top: 1px solid rgba(103, 109, 143, .14);
  color: #737b92;
  font-family: var(--chat-ui-font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
}
.inner-thought summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  column-gap: 10px;
  cursor: pointer;
  list-style: none;
}
.inner-thought summary::-webkit-details-marker { display: none; }
.inner-thought summary::marker { content: ''; }
.inner-thought summary strong {
  color: #4d5368;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.inner-thought summary span {
  min-width: 0;
  color: #969caf;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}
.inner-thought summary .ph {
  color: #727a93;
  font-size: 14px;
  transition: transform .18s ease;
}
.inner-thought[open] summary .ph { transform: rotate(180deg); }
.inner-thought-copy {
  padding: 0 2px 10px;
  color: #858ca2;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.turn-inner-thought {
  margin-top: 10px;
}
.turn-inner-thought .turn-inner-thought-summary strong {
  color: #4d5368;
}
.turn-inner-thought .turn-inner-thought-summary span {
  color: #969caf;
}
#view-chat .mine .bubble {
  background: #edf0ff;
  color: var(--ink);
  border: 1px solid #dee2fb;
  border-radius: 15px 5px 15px 15px;
}
#view-chat .time,
#view-chat .typing .bubble,
#view-chat .empty { color: var(--muted); }
#view-chat .reason,
#view-chat .reason-toggle {
  max-width: 82%;
  background: var(--wash);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 10px;
}
#view-chat .footer,
.footer {
  position: relative;
  gap: 9px;
  padding: 12px 13px max(12px, env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--line);
}
#view-chat .footer .tool-row { gap: 6px; margin-right: 0; }
#view-chat .footer .tool-btn {
  width: 34px;
  height: 34px;
  margin-right: 0;
  background: var(--wash);
  color: #514c86;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.composer-popover {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: min(330px, calc(100% - 24px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 42px rgba(35, 31, 109, .2);
}
.composer-popover[hidden] { display: none !important; }
.emoji-panel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.emoji-panel button {
  min-width: 0;
  padding: 7px 3px;
  border-radius: 10px;
  background: transparent;
  font-size: 21px;
}
.emoji-panel button:hover { background: var(--brand-wash); }
.voice-panel { display: grid; gap: 8px; }
.voice-panel button {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 8px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.voice-panel button span { grid-row: 1 / span 2; font-size: 20px; }
.voice-panel button b { font-size: 13px; }
.voice-panel button small { color: var(--muted); font-size: 11px; font-weight: 400; }
.chat-header-spacer { flex: 1 1 auto; min-width: 4px; }
#view-chat .footer textarea,
.footer input,
.footer textarea {
  margin-right: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid #d9ddea;
  border-radius: 13px;
}
#view-chat .footer .btn-send {
  height: 38px;
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-radius: 12px;
}

.badge {
  background: #eef8f4;
  color: var(--ok);
  border: 1px solid #d5eee3;
}
#view-chat .badge {
  background: #eef8f4;
  color: var(--ok);
  border: 1px solid #d5eee3;
}
.menu,
#view-chat .menu {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(55, 54, 90, .18);
}
.menu div,
#view-chat .menu div {
  color: var(--ink);
  border-bottom: 1px solid #f0f1f6;
}
.menu div:hover,
#view-chat .menu div:hover { background: var(--brand-wash); }
#toast {
  background: rgba(40, 43, 58, .9);
  border-radius: 13px;
}

#mem-modal,
#import-modal {
  background: rgba(35, 31, 109, .46) !important;
  backdrop-filter: blur(3px);
}
#mem-modal > div,
#import-modal > div {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(35, 31, 109, .23);
}
#mem-modal > div > div:first-child { border-color: var(--line) !important; }
#mem-modal button {
  border-radius: 11px !important;
}
#mem-modal button:last-child {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  color: #fff !important;
}
#mem-modal button[onclick="closeMemories()"] {
  background: var(--wash) !important;
  color: #514c86 !important;
  border: 1px solid var(--line) !important;
}
#import-modal > div { color: var(--ink) !important; }
#import-modal div[style*="color:#8a8a8a"] { color: var(--muted) !important; }
#import-modal button {
  background: var(--wash) !important;
  color: #514c86 !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
}
#import-text,
#import-result {
  background: var(--wash) !important;
  color: var(--ink) !important;
  border: 1px solid #d9ddea !important;
}
#import-modal #btn-import,
#import-modal #btn-import-start {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  color: #fff !important;
  border: 0 !important;
}

@media(max-width:650px) {
  body { padding: 0; display: block; }
  #phone {
    width: 100%;
    height: var(--chat-viewport-height, 100dvh);
    position: fixed;
    top: var(--chat-viewport-top, 0px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .center { padding: 24px; }
  .topbar { padding-left: 10px; padding-right: 10px; }
  .topbar .btn-icon { padding: 7px 9px; font-size: 13px; }
  .topbar .pts { padding: 4px 8px; }
  #view-chat .topbar { gap: 5px; }
  #view-chat .topbar .name {
    min-width: 0;
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #view-chat .badge {
    flex: 0 0 auto;
    max-width: none;
    padding: 3px 7px;
    font-size: 10px;
    white-space: nowrap;
  }
  #view-chat .footer { flex-wrap: wrap; }
  #view-chat .footer .tool-row { order: 2; width: 100%; }
  #view-chat .footer textarea { min-width: 0; }
}

#connection-notice {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: #fff3e6;
  color: #8a5a2b;
  font-size: 12px;
  text-align: center;
}

@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
.failed-reply-card {
  align-self: center;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(92%, 440px);
  margin: 10px auto;
  padding: 12px 14px;
  border: 1px solid rgba(151, 122, 84, 0.24);
  border-radius: 14px;
  background: rgba(250, 246, 239, 0.92);
  color: #6f6255;
  box-shadow: none;
}
#view-chat .system-source-summary { max-width: 100%; padding: 10px 12px; border-left: 3px solid var(--brand); background: #f7f6ff; border-radius: 8px; font-size: 13px; line-height: 1.6; }
#view-chat .system-source-summary strong, #view-chat .system-source-summary span { display: block; }
#view-chat .source-quote-copy { scroll-margin-block: 16px; }
.failed-reply-card i { margin-top: 2px; color: #9a784f; }
.failed-reply-card strong,
.failed-reply-card span { display: block; }
.failed-reply-card strong { font-size: 13px; line-height: 1.5; }
.failed-reply-card span { margin-top: 3px; font-size: 12px; color: #8d8175; }