.intro { position: relative; padding-right: 188px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.wechat-login { padding: 6px 9px; border: 1px solid #496f61; background: #1f3b35; color: #b6f0d6; border-radius: 8px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.wechat-login:hover { border-color: #8ce5bc; background: #264b40; }
.wechat-message { border: 1px solid #534165; background: #251c35; border-radius: 9px; color: #e7d6fa; font-size: 13px; padding: 8px 11px; margin-bottom: 14px; }
@media (max-width: 395px) {
  .topbar-actions:has(.wechat-login:not([hidden])) .privacy { display: none; }
}
.call-launch { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #dcc6ff; background: #d0b3ff; color: #20142f; border-radius: 11px; padding: 11px 15px; min-height: 43px; font-size: 13px; font-weight: 800; position: absolute; bottom: 1px; right: 0; box-shadow: 0 5px 24px #b689ff34; }
.call-launch:hover, .call-primary:hover { background: #e6d2ff; }
.phone-icon { display: inline-block; width: 13px; height: 13px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 3px 0 3px 9px; transform: rotate(-10deg); }
.journal .session-empty { margin-top: 13px; }
.journal-count { color: #d8bdf7; background: #30233f; border: 1px solid #49365d; border-radius: 20px; padding: 5px 9px; font-size: 11px; }
.journal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.journal-list:not(:empty) { margin-top: 13px; }
.journal-entry { align-self: start; border: 1px solid #433352; background: #21182d; border-radius: 11px; overflow: hidden; }
.journal-entry summary { display: grid; gap: 6px; padding: 12px; cursor: pointer; list-style: none; }
.journal-entry summary::-webkit-details-marker { display: none; }
.journal-entry summary:focus-visible { outline-offset: -3px; }
.journal-entry summary strong { overflow-wrap: anywhere; font-size: 14px; color: #f1e4ff; }
.journal-entry-meta { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); }
.journal-entry-meta span { color: #dfc4ff; }
.journal-entry-body { margin: 0 12px; border-top: 1px solid #433352; padding: 11px 0 3px; color: #e1d2ef; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.journal-remove { margin: 7px 12px 11px; color: #efb6c9; background: transparent; border: 1px solid #5c3850; border-radius: 7px; padding: 5px 8px; font-size: 11px; }
.journal-remove:hover { background: #42263a; }
.call-dialog { padding: 0; border: 1px solid #604780; border-radius: 20px; background: #1a1326; color: var(--ink); width: min(780px, calc(100% - 26px)); max-height: calc(100dvh - 26px); box-shadow: 0 22px 100px #06030cd9; }
.call-dialog::backdrop { background: #0b0714c9; backdrop-filter: blur(5px); }
.call-header { padding: 16px 19px 13px; border-bottom: 1px solid #3d2c52; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.call-kicker { color: #c9a4fa; font-size: 10px; letter-spacing: .11em; font-weight: 700; margin-bottom: 4px; }
.call-header h2 { font-size: 22px; letter-spacing: -.04em; }
.call-header-actions { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hang-up { border: 1px solid #79495f; background: #45273a; color: #ffd3e2; border-radius: 8px; padding: 6px 11px; font-size: 12px; font-weight: 650; }
.hang-up:hover { background: #63354f; }
#call-content, .journal-draft { padding: 14px 19px 17px; }
.call-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 11px; }
.call-avatar-area { position: relative; min-width: 0; height: 254px; background: radial-gradient(ellipse, rgba(var(--call-glow, 134, 75, 212), .52), #211633 72%); border: 1px solid #47365e; border-radius: 13px; overflow: hidden; }
.call-avatar-area canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.call-avatar-status { display: flex; align-items: center; gap: 7px; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; border: 1px solid #6a5086; background: #251833; border-radius: 20px; padding: 5px 9px; color: #eddbff; font-size: 11px; }
.call-avatar-status i { width: 6px; height: 6px; border-radius: 100%; background: #bda1f4; box-shadow: 0 0 8px #d0b7fb; }
.chat-log { height: 254px; display: flex; flex-direction: column; gap: 9px; overflow: auto; border: 1px solid #423252; border-radius: 13px; background: #15101f; padding: 10px; }
.chat-message { align-self: flex-start; max-width: 94%; border: 1px solid #493560; border-radius: 10px 10px 10px 3px; padding: 8px 10px; background: #2a1d3a; }
.chat-message[data-role="user"] { align-self: flex-end; border-color: #634687; border-radius: 10px 10px 3px 10px; background: #3b2a50; }
.chat-message strong { display: block; margin-bottom: 3px; color: #d6b8fb; font-size: 10px; }
.chat-message p { color: #f0e6fb; line-height: 1.6; font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.chat-form input, .journal-draft input, .journal-draft select, .journal-draft textarea { width: 100%; min-width: 0; background: #15101f; border: 1px solid #503b67; border-radius: 8px; padding: 8px 10px; color: var(--ink); font: inherit; font-size: 14px; }
.chat-form input:focus, .journal-draft input:focus, .journal-draft select:focus, .journal-draft textarea:focus { outline: 2px solid #a77ce2; outline-offset: 1px; }
.call-primary, .talk-button { border: 1px solid #d9bdff; background: #d0b0fb; color: #261637; border-radius: 8px; padding: 7px 11px; font-size: 12px; font-weight: 750; min-height: 36px; }
.voice-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 13px; margin-top: 9px; }
.talk-button { display: inline-flex; align-items: center; gap: 7px; background: #2e203f; color: #f1ddff; border-color: #624780; }
.talk-button:hover { border-color: #b391df; }
.talk-button[data-listening="true"] { background: #573258; border-color: #d48fcb; }
.talk-button:disabled, .call-primary:disabled { opacity: .6; cursor: default; }
.mic-icon { width: 8px; height: 12px; border: 1.5px solid currentColor; border-radius: 5px; position: relative; margin: 0 4px 2px; }
.mic-icon::after { content: ""; position: absolute; inset: 5px -4px -4px; border: 1px solid currentColor; border-top: 0; border-radius: 0 0 6px 6px; }
.speak-toggle { display: inline-flex; align-items: center; gap: 4px; color: #d8cae9; font-size: 12px; }
.speak-toggle input { accent-color: #bb94f3; }
.call-notice { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 6px; }
.call-notice:empty { display: none; }
.journal-draft { display: grid; gap: 9px; }
.draft-intro { font-size: 13px; color: #d6c6e9; }
.journal-draft label { display: grid; gap: 5px; color: #ded0ee; font-size: 12px; }
.journal-draft textarea { resize: vertical; min-height: 85px; line-height: 1.5; }
.draft-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
@media (max-width: 680px) {
  .intro { padding-right: 0; }
  .call-launch { position: static; margin-top: 11px; min-height: 38px; padding: 7px 12px; }
  .journal-list { grid-template-columns: 1fr; }
  .call-header { padding: 11px 12px 9px; }
  #call-content, .journal-draft { padding: 10px 12px 12px; }
  .call-workspace { grid-template-columns: 1fr; gap: 8px; }
  .call-avatar-area { height: clamp(96px, 23dvh, 174px); }
  .chat-log { height: clamp(113px, 25dvh, 220px); }
  .chat-form input, .journal-draft input, .journal-draft select, .journal-draft textarea { font-size: 16px; }
}