:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: #18212f;
  background: #eef4f8;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg,#e8f3fb 0,#f7fafc 45%,#eef3f7 100%); }
button, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(980px, 100%); margin: 0 auto; padding: 18px 16px 36px; }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; padding: 6px 4px 14px; }
.eyebrow { margin:0 0 3px; font-size:.8rem; font-weight:700; letter-spacing:.06em; color:#47677f; }
h1 { margin:0; font-size:clamp(1.35rem,4vw,2rem); line-height:1.3; }
.mode-badge { flex:0 0 auto; padding:7px 11px; border-radius:999px; background:#dfe8ef; color:#335064; font-size:.78rem; font-weight:700; }
.mode-badge.ai { background:#daf2e3; color:#176234; }
.mode-badge.local { background:#fff0c9; color:#6c4b00; }
.notice { display:flex; gap:10px; align-items:center; background:#fff7da; border:1px solid #efd478; border-radius:12px; padding:10px 13px; margin-bottom:14px; font-size:.9rem; }
.notice strong { white-space:nowrap; }
.hero-card, .chat-card, .how-card { background:rgba(255,255,255,.94); border:1px solid #d8e4ec; border-radius:20px; box-shadow:0 8px 30px rgba(25,55,75,.07); }
.hero-card { padding:22px; margin-bottom:14px; }
.hero-kicker { margin:0 0 6px; color:#0b5cab; font-weight:800; font-size:.88rem; }
.hero-card h2 { margin:0 0 10px; font-size:clamp(1.35rem,4vw,1.85rem); }
.hero-card p { line-height:1.75; }
.example-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.chip { border:1px solid #b8cfdf; background:#f5fbff; color:#164b70; border-radius:999px; padding:9px 13px; }
.chip:hover { background:#e9f5fd; }
.chat-card { overflow:hidden; }
.conversation { min-height:330px; max-height:58vh; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:12px; }
.message { display:flex; flex-direction:column; max-width:88%; }
.message.user { align-self:flex-end; align-items:flex-end; }
.message.assistant { align-self:flex-start; }
.bubble { padding:12px 14px; border-radius:16px; line-height:1.65; white-space:pre-wrap; }
.user .bubble { background:#0b5cab; color:white; border-bottom-right-radius:5px; }
.assistant .bubble { background:#edf4f8; border:1px solid #d7e3ea; border-bottom-left-radius:5px; }
.meta { margin-top:4px; color:#6b7b88; font-size:.72rem; }
.answer-card { margin-top:8px; background:white; border:1px solid #cbdde8; border-radius:14px; overflow:hidden; width:min(580px,100%); }
.answer-card h3 { margin:0; padding:11px 13px; background:#eaf4fb; font-size:1rem; }
.answer-grid { display:grid; grid-template-columns:1fr; }
.answer-row { padding:10px 13px; border-top:1px solid #edf1f4; }
.answer-row strong { display:block; font-size:.78rem; color:#577080; margin-bottom:3px; }
.answer-warning { margin:10px 13px 13px; padding:10px; border-radius:10px; background:#fff6df; color:#6e5010; font-size:.86rem; }
.speak-answer { margin:0 13px 13px; border:0; background:#e9f5fd; color:#0b5cab; padding:8px 12px; border-radius:10px; font-weight:700; }
.choice-area { padding:0 20px 14px; display:flex; flex-wrap:wrap; gap:8px; }
.choice-button { border:1px solid #8db7d2; background:white; color:#0b5cab; border-radius:999px; padding:10px 14px; font-weight:700; }
.composer { border-top:1px solid #e1e8ed; background:#fbfdfe; padding:14px; }
.composer textarea { width:100%; resize:none; border:1px solid #b9cbd7; border-radius:13px; padding:12px 13px; outline:none; min-height:66px; line-height:1.5; background:white; }
.composer textarea:focus { border-color:#0b5cab; box-shadow:0 0 0 3px rgba(11,92,171,.11); }
.composer-actions { display:flex; justify-content:space-between; gap:10px; margin-top:10px; }
.mic-button, .send-button { border:0; border-radius:12px; min-height:46px; font-weight:800; }
.mic-button { background:#edf4f8; color:#274a61; padding:0 16px; }
.mic-button.listening { background:#ffe5e5; color:#a52222; animation:pulse 1.25s infinite; }
.send-button { margin-left:auto; background:#0b5cab; color:white; padding:0 24px; }
.send-button:hover { background:#084a8a; }
.speech-hint { margin:0; padding:0 16px 15px; color:#6b7b88; font-size:.78rem; background:#fbfdfe; }
.how-card { padding:20px; margin-top:14px; }
.how-card h2 { margin:0 0 15px; font-size:1.15rem; }
.steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.step { border:1px solid #dde7ed; border-radius:14px; padding:13px; display:flex; gap:10px; background:#fbfdff; }
.step span { flex:0 0 30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#0b5cab; color:white; font-weight:800; }
.step p { margin:0; line-height:1.55; font-size:.9rem; }
footer { text-align:center; color:#6f7d87; font-size:.75rem; padding:18px 6px 0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@keyframes pulse { 50% { transform:scale(1.03); } }
@media (max-width:650px) {
  .app-shell { padding:10px 10px 28px; }
  .topbar { align-items:center; }
  .notice { align-items:flex-start; }
  .hero-card { padding:18px 16px; }
  .conversation { min-height:360px; padding:14px; }
  .message { max-width:94%; }
  .steps { grid-template-columns:1fr; }
  .composer-actions { align-items:stretch; }
  .mic-button, .send-button { flex:1; }
}
.status-stack { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.mode-badge.db { background:#e3efff; color:#164e87; }
.db-stats { font-size:.68rem; color:#5e7180; text-align:right; }
.inline-list { margin:0; padding-left:1.15rem; }
.inline-list li + li { margin-top:3px; }
.subtle { color:#667784; font-size:.8rem; }
.source-link { color:#0b5cab; font-weight:700; }
.knowledge-card { margin-top:14px; }
.knowledge-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:8px; align-items:stretch; }
.knowledge-flow > div:not(.flow-arrow) { border:1px solid #dce7ee; background:#fbfdff; border-radius:13px; padding:12px; display:flex; flex-direction:column; gap:5px; }
.knowledge-flow strong { color:#164e70; }
.knowledge-flow span { font-size:.82rem; line-height:1.55; color:#4c6170; }
.flow-arrow { display:grid; place-items:center; color:#6a8799; font-weight:900; }
.knowledge-note { margin:14px 0 0; padding:11px 13px; border-radius:11px; background:#f4f8fb; color:#536775; font-size:.86rem; line-height:1.65; }
.send-button:disabled { opacity:.6; cursor:wait; }
@media (max-width:800px) {
  .knowledge-flow { grid-template-columns:1fr; }
  .flow-arrow { transform:rotate(90deg); }
}