:root {
  --ink: #0b1d3e;
  --muted: #62718c;
  --line: #e3e8f1;
  --navy: #0c2247;
  --blue: #1c65d8;
  --aqua: #34d6bd;
  --white: #fff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background: #eaf0f8;
  font-family: Manrope, Arial, sans-serif;
}
button, textarea { font: inherit; }
button { cursor: pointer; }
.page-glow { position: fixed; width: 40vw; height: 40vw; border-radius: 50%; filter: blur(56px); pointer-events: none; opacity: .45; }
.glow-one { top: -15vw; left: -8vw; background: #bde7ff; }
.glow-two { bottom: -22vw; right: 5vw; background: #d4caff; }

.app-shell { position: relative; z-index: 1; max-width: 1320px; min-height: 100vh; margin: 0 auto; display: grid; grid-template-columns: minmax(420px, .92fr) minmax(500px, 1.08fr); padding: 24px; gap: 24px; }
.scene-panel { position: relative; isolation: isolate; overflow: hidden; min-height: 700px; padding: 34px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 45% 70%, rgba(35, 111, 191, .65), transparent 34%), linear-gradient(145deg, #163e70 0%, #0b2047 55%, #091631 100%); box-shadow: 0 25px 55px rgba(17, 44, 86, .22); }
.scene-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .22; background-image: linear-gradient(120deg, transparent 0 62%, #9bdbff 62.2% 62.5%, transparent 62.7%), linear-gradient(60deg, transparent 0 70%, #8df8e4 70.2% 70.4%, transparent 70.6%); background-size: 170px 170px; }
.brand-row { position: relative; z-index: 6; display: flex; align-items: center; gap: 12px; }
.crest, .message-avatar { display: grid; place-items: center; border-radius: 50%; font-family: 'Playfair Display', Georgia, serif; font-weight: 700; }
.crest { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.55); font-size: 24px; background: rgba(255,255,255,.1); }
.eyebrow { margin: 0; color: #8ba8d3; font-weight: 800; font-size: 10px; letter-spacing: .15em; }
.brand-name { margin: 3px 0 0; font-size: 15px; font-weight: 700; }.brand-name span { color: var(--aqua); }
.assistant-copy { position: relative; z-index: 3; max-width: 400px; margin-top: 68px; }
.assistant-copy .eyebrow { color: #72d8e5; }.assistant-copy h1 { max-width: 390px; margin: 10px 0 13px; font: 700 clamp(34px, 4vw, 56px)/1.03 'Playfair Display', Georgia, serif; letter-spacing: -.045em; }.assistant-copy h1 em { color: #9deee5; font-style: italic; }.intro { max-width: 335px; color: #c4d5ed; font-size: 14px; line-height: 1.65; }
.avatar-stage { position: absolute; inset: 105px 0 78px; z-index: 2; }.avatar-stage::after { content: ''; position: absolute; width: 72%; height: 14%; left: 16%; bottom: 4%; z-index: -1; background: rgba(4, 12, 30, .45); border-radius: 50%; filter: blur(18px); }
#live2d-canvas { width: 100%; height: 100%; display: block; }
.avatar-status { position: absolute; top: 25%; right: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #d9f6f2; background: rgba(10,28,60,.5); backdrop-filter: blur(9px); font-size: 11px; font-weight: 700; }.avatar-status span { width: 7px; height: 7px; border-radius: 50%; background: #45e1bd; box-shadow: 0 0 0 4px rgba(69,225,189,.16); }
.speech-bubble { position: absolute; right: 28px; bottom: 28%; max-width: 215px; padding: 12px 14px; border-radius: 16px 16px 2px 16px; color: #173257; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(3,17,48,.24); font-size: 12px; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: .25s ease; }.speech-bubble.visible { opacity: 1; transform: none; }
.character-switcher { position: absolute; z-index: 4; display: flex; gap: 8px; bottom: 26px; left: 30px; }.character-button { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #e3edff; background: rgba(255,255,255,.08); font-size: 12px; transition: .18s; }.character-button small { color: #9db8dd; }.character-button:hover, .character-button.active { border-color: rgba(116,232,219,.72); background: rgba(68,197,193,.18); }.character-dot { width: 8px; height: 8px; border-radius: 50%; background: #85e8dc; }.character-dot.violet { background: #c4b5fd; }
.mode-switcher { display: inline-flex; gap: 3px; margin-left: auto; padding: 3px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(4,17,45,.32); backdrop-filter: blur(10px); }.mode-button { min-height: 29px; padding: 0 10px; border: 0; border-radius: 7px; color: #b9cae6; background: transparent; font-size: 11px; font-weight: 800; transition: .18s; }.mode-button:hover { color: #fff; }.mode-button.active { color: #0e3155; background: #e8f6ff; box-shadow: 0 2px 8px rgba(1,15,44,.24); }
.voice-room { position: absolute; inset: 0; z-index: 5; pointer-events: none; }.voice-room-intro { position: absolute; top: 105px; left: 7.5%; max-width: 330px; }.voice-room-intro .eyebrow { color: #74e2df; }.voice-room-intro h2 { margin: 8px 0 8px; font: 700 clamp(32px, 4vw, 56px)/1.05 'Playfair Display', Georgia, serif; letter-spacing: -.04em; }.voice-room-intro h2 span { color: #a5f1e6; }.voice-room-intro p:last-child { margin: 0; color: #c5d8f0; font-size: 14px; line-height: 1.6; }.voice-call-button { position: absolute; bottom: 70px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 165px; padding: 0; transform: translateX(-50%); border: 0; color: #eaf9ff; background: transparent; font-size: 12px; font-weight: 800; pointer-events: auto; }.call-icon { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(171,255,239,.7); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5ee1cf, #2162c7); box-shadow: 0 0 0 9px rgba(98,224,209,.12), 0 14px 28px rgba(0,5,30,.28); transition: .2s; }.call-icon svg { width: 25px; fill: #fff; }.voice-call-button:hover .call-icon { transform: translateY(-2px) scale(1.04); }.voice-call-button.connected .call-icon { animation: call-pulse 1.5s infinite; background: radial-gradient(circle at 35% 30%, #ff908e, #cf3e61); }.voice-call-button.connected .call-label { color: #ffd6d6; }.voice-room-hint { position: absolute; bottom: 24px; left: 50%; width: min(92%, 440px); margin: 0; transform: translateX(-50%); color: #9cb6d8; font-size: 10px; text-align: center; }
@keyframes call-pulse { 0%, 100% { box-shadow: 0 0 0 9px rgba(255,106,122,.12), 0 14px 28px rgba(0,5,30,.28); } 50% { box-shadow: 0 0 0 16px rgba(255,106,122,.06), 0 14px 28px rgba(0,5,30,.28); } }

.chat-panel { min-width: 0; display: flex; flex-direction: column; padding: 38px 38px 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 28px; background: rgba(255,255,255,.93); box-shadow: 0 25px 55px rgba(60,83,122,.12); backdrop-filter: blur(12px); }.chat-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }.chat-header .eyebrow { color: #6f83a4; }.chat-header h2 { margin: 6px 0 0; font: 700 30px/1.1 'Playfair Display', Georgia, serif; letter-spacing: -.03em; }.voice-control { display: flex; align-items: center; gap: 8px; padding-top: 6px; color: #697895; font-size: 12px; font-weight: 700; }.switch { position: relative; width: 38px; height: 21px; }.switch input { position: absolute; opacity: 0; }.switch span { display: block; height: 100%; border-radius: 99px; background: #c8d1e2; transition: .2s; }.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #657; transition: .2s; }.switch input:checked + span { background: var(--blue); }.switch input:checked + span::after { transform: translateX(17px); }
.quick-prompts { display: flex; gap: 8px; flex-wrap: wrap; margin: 27px 0 16px; }.quick-prompts button { padding: 8px 12px; border: 1px solid #dce5f2; border-radius: 999px; color: #395678; background: #f7f9fc; font-size: 12px; font-weight: 600; transition: .18s; }.quick-prompts button:hover { border-color: #94b7ee; color: #154fbb; background: #eef5ff; }
.chat-log { flex: 1; min-height: 280px; max-height: calc(100vh - 330px); padding: 10px 3px 18px; overflow: auto; scrollbar-color: #cbd6e8 transparent; }.message { display: flex; gap: 10px; margin: 12px 0; align-items: flex-start; }.message-avatar { flex: 0 0 30px; width: 30px; height: 30px; color: #fff; background: linear-gradient(135deg, #1354b5, #43bda8); font-size: 15px; }.message-content { max-width: 82%; padding: 12px 14px; border-radius: 4px 15px 15px 15px; color: #273d5c; background: #f1f5fa; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }.user-message { justify-content: flex-end; }.user-message .message-content { border-radius: 15px 4px 15px 15px; color: #fff; background: var(--blue); }.typing .message-content { color: #789; font-style: italic; }.typing-dots::after { content: '…'; animation: dots 1s steps(4,end) infinite; } @keyframes dots { to { clip-path: inset(0 0 0 0); } from { clip-path: inset(0 100% 0 0); } }
.config-notice { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #ffe2a0; border-radius: 10px; color: #845d00; background: #fff8e8; font-size: 12px; }.config-notice code { font-weight: 700; }
.chat-form { padding: 8px 8px 6px 15px; border: 1px solid #dbe3ef; border-radius: 17px; background: #fff; box-shadow: 0 8px 18px rgba(60,84,119,.08); }.chat-form:focus-within { border-color: #86adee; box-shadow: 0 0 0 3px #dbeafe; }.chat-form textarea { width: 100%; min-height: 34px; max-height: 120px; padding: 4px 0; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; line-height: 1.6; }.chat-form textarea::placeholder { color: #9caac0; }.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }.icon-button, .send-button { display: inline-flex; align-items: center; justify-content: center; border: 0; }.icon-button { width: 33px; height: 33px; border-radius: 50%; color: #60718d; background: transparent; }.icon-button:hover, .icon-button.listening { color: var(--blue); background: #edf4ff; }.icon-button svg { width: 18px; fill: currentColor; }.send-button { gap: 8px; min-height: 35px; padding: 0 13px; border-radius: 10px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 800; transition: .18s; }.send-button:hover { background: #124ea9; transform: translateY(-1px); }.send-button:disabled { cursor: wait; opacity: .6; transform: none; }.send-button svg { width: 15px; fill: currentColor; }.chat-footer { margin: 14px 0 0; color: #8a98ad; font-size: 10px; line-height: 1.5; text-align: center; }.chat-footer a { color: #4369a3; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.app-shell.voice-mode { max-width: none; min-height: 100svh; padding: 0; grid-template-columns: minmax(0, 1fr); }.voice-mode .scene-panel { min-height: 100svh; padding: 30px clamp(24px, 4vw, 62px); border-radius: 0; }.voice-mode .chat-panel, .voice-mode .assistant-copy { display: none; }.voice-mode .avatar-stage { inset: 0; }.voice-mode .avatar-stage::after { width: 38%; height: 8%; left: 31%; bottom: 4%; }.voice-mode .avatar-status { top: 93px; right: clamp(24px, 4vw, 62px); }.voice-mode .speech-bubble { right: clamp(24px, 4vw, 62px); bottom: 26%; max-width: 245px; }.voice-mode .character-switcher { z-index: 6; bottom: 25px; left: clamp(24px, 4vw, 62px); }.voice-mode .voice-room { display: block; }

@media (max-width: 920px) { .app-shell { grid-template-columns: 1fr; max-width: 720px; }.scene-panel { min-height: 650px; }.chat-log { max-height: 430px; }.chat-panel { min-height: 620px; } }
@media (max-width: 520px) { .app-shell { padding: 0; gap: 0; }.scene-panel, .chat-panel { border-radius: 0; }.scene-panel { min-height: 590px; padding: 24px; }.assistant-copy { margin-top: 40px; }.assistant-copy h1 { font-size: 38px; }.avatar-stage { inset: 120px 0 67px; }.avatar-status { right: 15px; }.speech-bubble { right: 14px; }.character-switcher { left: 15px; }.character-button small { display: none; }.chat-panel { padding: 26px 18px 15px; }.chat-header h2 { font-size: 26px; }.voice-control span { display: none; }.quick-prompts { margin-top: 20px; }.chat-log { min-height: 300px; max-height: 410px; }.message-content { max-width: 88%; }.mode-switcher { gap: 1px; }.mode-button { padding: 0 7px; font-size: 10px; }.voice-mode .brand-row { width: 100%; }.voice-mode .voice-room-intro { top: 115px; left: 24px; right: 24px; }.voice-mode .voice-room-intro h2 { font-size: 37px; }.voice-mode .voice-call-button { bottom: 90px; }.voice-mode .voice-room-hint { bottom: 32px; }.voice-mode .character-switcher { bottom: 30px; }.voice-mode .avatar-status { top: 89px; right: 19px; }.voice-mode .speech-bubble { right: 16px; bottom: 31%; max-width: 190px; } }

.ad-slot { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e4eaf3; min-height: 60px; }