@font-face { font-family: Nunito; src: url('nunito-variable.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
:root {
  color-scheme: light;
  --ink: #173659;
  --muted: #50637b;
  --blue: #0875ee;
  font-family: Nunito, 'Trebuchet MS', 'Microsoft YaHei', system-ui, sans-serif;
  color: var(--ink);
  background: #f4f7f5;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; padding: 24px; display: grid; place-items: center; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { min-width: 44px; min-height: 44px; }
button:focus-visible, input:focus-visible { outline: 3px solid #173659; outline-offset: 4px; }
button:disabled { opacity: .6; cursor: wait; }
button svg { width: 22px; height: 22px; flex: none; }
.app {
  position: relative; isolation: isolate; width: min(1240px, 100%);
  min-height: min(900px, calc(100dvh - 48px)); display: flex; flex-direction: column;
  border-radius: 30px; overflow: hidden; background: #b6e6f9;
  box-shadow: 0 12px 36px #183e4b16;
}
.app::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('weather-landscape.webp') 50% 50% / cover no-repeat;
}
.topbar { padding: 32px 12% 12px; }
.brand-name { margin: 0; font-size: clamp(26px, 3.2vw, 40px); font-weight: 900; letter-spacing: -.035em; line-height: 1.15; text-shadow: 0 1px 5px #ffffffa0; }
.brand-subtitle { margin: 6px 0 0; font-size: 16px; font-weight: 800; letter-spacing: .08em; text-shadow: 0 1px 6px #fff; }
.stage { position: relative; flex: 1; min-height: 500px; padding: 24px 0 36px; }
.exploration { position: relative; z-index: 1; width: min(630px, 62%); margin-left: 12%; }
.question-sign {
  position: relative; margin: 0 22px 20px; padding: 14px 22px;
  background: repeating-linear-gradient(2deg, transparent 0 12px, #b16c2420 13px, transparent 15px 26px), linear-gradient(100deg, #efbc70, #ffdaa0 45%, #f4c482);
  border: 2px solid #a76d32; border-radius: 12px 17px 13px 10px;
  box-shadow: 0 4px 0 #b4793c, 0 8px 12px #5542221c;
}
.question-sign::before, .question-sign::after { content: ''; position: absolute; z-index: -1; width: 12px; height: 28px; bottom: -27px; background: #bc8546; border: 2px solid #96612f; }
.question-sign::before { left: 32px; }
.question-sign::after { right: 32px; }
.question-label { display: block; font-size: 12px; line-height: 1.4; color: #654321; font-weight: 800; margin-bottom: 5px; }
.current-question { margin: 0; font-size: clamp(19px, 2.2vw, 25px); font-weight: 900; line-height: 1.3; overflow-wrap: anywhere; }
.notebook {
  position: relative; padding: 30px 30px 26px 40px; min-height: 260px;
  background: radial-gradient(ellipse at 0 0, #f9e9c6, transparent 50%), #fff9e9;
  border: 5px solid #d5a468; outline: 1px solid #9f713a; border-radius: 19px 25px 18px 21px;
  box-shadow: inset 0 0 0 2px #f5d6a1, 0 5px 0 #af7b40, 0 12px 22px #43492d1c;
}
.notebook::before {
  content: ''; position: absolute; left: -12px; top: 20px; bottom: 20px; width: 27px;
  background: repeating-linear-gradient(180deg, transparent 0 15px, #785c38 15px 19px, #d2b98a 19px 23px, #785c38 23px 25px, transparent 25px 47px);
  border-radius: 5px;
}
.notebook::after { content: ''; position: absolute; inset: 10px; border: 1px solid #ceaa6755; border-radius: 12px 18px 12px 15px; pointer-events: none; }
.answer-layout { display: flex; align-items: center; gap: 18px; }
.current-answer { flex: 1; min-width: 0; margin: 0; font-size: clamp(24px, 2.8vw, 34px); font-weight: 900; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.answer-hint { margin: 12px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.answer-hint:empty { display: none; }
.temperature { flex: none; width: 82px; text-align: center; }
.thermometer { position: relative; height: 70px; width: 20px; margin: 0 auto 8px; border: 3px solid #2789c5; border-radius: 14px; background: #fff; }
.thermometer::before { content: ''; position: absolute; bottom: 5px; left: 4px; right: 4px; height: 45px; border-radius: 8px; background: #f58b26; }
.thermometer::after { content: ''; position: absolute; bottom: -5px; left: -7px; width: 22px; height: 22px; border: 3px solid #fff; outline: 2px solid #2789c5; border-radius: 50%; background: #f58b26; }
.temperature-value { display: block; font-weight: 900; font-size: 25px; }
.weather-word { display: block; font-size: 13px; color: var(--muted); font-weight: 800; }
.listen-button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; margin-top: 18px; padding: 10px 22px; border: 1px solid #d89b1e; border-radius: 28px; background: #ffdc55; color: #173659; box-shadow: 0 3px 0 #e5ad2c; font-size: 18px; font-weight: 900; }
.listen-button:hover { background: #ffe782; }
.listen-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #e5ad2c; }
.history-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0 22px; padding: 8px 18px; color: #27405c; border: 1px solid #ffffffb0; border-radius: 24px; background: #fffffff2; font-size: 14px; }
.history-button:hover { background: #fff4d3; }
.guide { position: absolute; bottom: 0; right: 3%; width: min(29%, 310px); pointer-events: none; }
.guide img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 8px #293f3425); }
.guide.speaking img { animation: guide-bounce .65s ease-in-out infinite alternate; }
.composer-wrap { position: relative; z-index: 2; width: min(920px, calc(100% - 80px)); margin: 0 auto 24px; padding: 16px 18px 12px; border: 1px solid #fff; border-radius: 30px; background: #fffffff5; box-shadow: 0 5px 18px #36525d20; }
.composer { display: flex; gap: 10px; align-items: center; }
.composer input { min-width: 0; flex: 1; width: 100%; height: 54px; padding: 0 16px; background: #fff; border: 2px solid #dce2e8; border-radius: 18px; color: var(--ink); font-size: 17px; }
.composer input::placeholder { color: #66758a; opacity: 1; }
.round-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 7px; min-height: 54px; padding: 10px 20px; border: 0; border-radius: 18px; color: #fff; background: var(--blue); font-weight: 800; font-size: 17px; }
.round-btn:hover { background: #0864c8; }
.mic-btn { order: 1; width: 54px; padding: 0; background: #f5f8fc; border: 2px solid #d6dfe9; color: #465e7a; }
.mic-btn:hover, .mic-btn.listening { color: #075fbd; background: #e0efff; }
#send-button { order: 2; }
.send-cn { font-size: 14px; font-weight: 600; }
.dictation-hint { margin: 9px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: #4b6172; }
.voice-status { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: #e9f4ff; color: #254b6e; font-size: 13px; line-height: 1.6; }
.voice-status.error { background: #fff0e8; color: #893e23; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.history-overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: #122c45a8; }
.history-panel { display: flex; flex-direction: column; width: min(620px, 100%); max-height: calc(100dvh - 40px); border: 3px solid #d1ac75; border-radius: 24px; background: #fffaf0; box-shadow: 0 20px 70px #0b233d40; }
.history-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e5d5b8; }
.history-header h2 { flex: 1; margin: 0; font-size: 20px; }
.history-close { border: 0; border-radius: 14px; background: #f0e5d2; color: var(--ink); font-size: 22px; }
.chat-log { overflow-y: auto; padding: 20px; overscroll-behavior: contain; }
.message { margin-bottom: 16px; }
.message:last-child { margin-bottom: 0; }
.avatar-wrap { display: none; }
.bubble-column { display: flex; align-items: center; gap: 10px; }
.bubble { flex: 1; min-width: 0; padding: 12px 0; font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid #e7dac3; }
.message.user .bubble { font-weight: 800; color: #0968b5; }
.speaker { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #d0a755; border-radius: 50%; background: #ffdf6b; color: var(--ink); }
.loading-dots { display: inline-flex; align-items: center; gap: 5px; }
.loading-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #2a76ac; animation: guide-bounce .5s ease-in-out infinite alternate; }
.loading-dots i:nth-child(2) { animation-delay: .15s; }
.loading-dots i:nth-child(3) { animation-delay: .3s; }
body.history-open { overflow: hidden; }
@keyframes guide-bounce { to { transform: translateY(-4px); } }
@media (min-width: 701px) and (max-height: 800px) {
  body { padding: 16px; }
  .app { min-height: calc(100dvh - 32px); }
  .topbar { padding-top: 24px; padding-bottom: 4px; }
  .brand-name { font-size: 32px; }
  .stage { min-height: 0; padding: 18px 0 24px; }
  .question-sign { padding: 10px 18px; }
  .current-question { font-size: 22px; }
  .notebook { min-height: 220px; padding-top: 24px; padding-bottom: 22px; }
  .current-answer { font-size: 30px; }
  .guide { width: min(25%, 260px); }
  .composer-wrap { margin-bottom: 18px; }
}
@media (max-width: 700px) {
  body { padding: 0; display: block; }
  .app { width: 100%; min-height: 100vh; min-height: 100svh; border-radius: 0; }
  .app::before { background-position: 90% center; }
  .topbar { padding: 24px 22px 10px; }
  .brand-name { font-size: clamp(25px, 7vw, 31px); }
  .brand-subtitle { font-size: 14px; margin-top: 4px; }
  .stage { min-height: 530px; padding: 24px 18px 156px; }
  .exploration { width: 100%; margin: 0; }
  .question-sign { margin: 0 10px 20px; padding: 12px 16px; }
  .question-label { font-size: 11px; }
  .current-question { font-size: 19px; }
  .notebook { padding: 24px 18px 24px 26px; min-height: 220px; border-width: 4px; }
  .current-answer { font-size: 25px; line-height: 1.35; }
  .answer-layout { gap: 8px; }
  .answer-hint { margin: 12px 0 0; font-size: 13px; }
  .temperature { width: 62px; }
  .temperature-value { font-size: 22px; }
  .weather-word { font-size: 12px; }
  .thermometer { height: 60px; }
  .listen-button { min-height: 48px; padding: 9px 18px; font-size: 16px; margin-top: 18px; }
  .history-button { margin: 16px 0 0 6px; padding: 7px 12px; font-size: 13px; }
  .guide { width: 148px; right: 16px; bottom: 0; }
  .composer-wrap { width: calc(100% - 24px); padding: 12px 12px max(12px, env(safe-area-inset-bottom)); margin: 0 12px 12px; border-radius: 25px; }
  .composer { gap: 7px; }
  .composer input { height: 50px; font-size: 16px; padding: 0 10px; border-radius: 14px; }
  .round-btn { min-height: 50px; padding: 8px 12px; border-radius: 14px; gap: 5px; font-size: 15px; }
  .mic-btn { width: 46px; padding: 0; }
  #send-button svg { width: 18px; height: 18px; }
  .send-cn { display: none; }
  .dictation-hint { font-size: 11px; }
  .history-overlay { padding: 12px; }
  .history-panel { max-height: calc(100dvh - 24px); }
  .history-header { padding: 12px 16px; }
}
@media (max-width: 700px) and (max-height: 780px) {
  .topbar { padding-top: 18px; padding-bottom: 6px; }
  .stage { min-height: 0; padding-top: 16px; padding-bottom: 112px; }
  .current-question { font-size: 18px; }
  .notebook { padding-top: 20px; padding-bottom: 20px; }
  .current-answer { font-size: 23px; }
  .guide { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}