/* Motion reference: cc-prompt-016; supporting editorial rhythm: cc-prompt-290. */
:root { --motion-ease: cubic-bezier(.2,.8,.2,1); }
.sidebar { background: linear-gradient(180deg, #fafcf9d9, #fafcf9b8); }
.brand { gap: 12px; font-size: 17px; letter-spacing: .2px; }
.brand-mark { height: 42px; width: 42px; border-radius: 15px; }
.new-session { margin-top: 32px; min-height: 48px; }
.sidebar-label { letter-spacing: .5px; }
.empty-history { line-height: 2.1; }
.history-item { border-radius: 16px; }
.history-item.active { box-shadow: 0 5px 18px #3f5a4810, inset 0 1px 0 #fff; }
.topbar { background: #ffffff42; }
.page-title strong { font-weight: 600; letter-spacing: .3px; }
.page-title small { margin-top: 5px; }
.topbar-actions { gap: 10px; }

/* The existing five steps sit inside one small floating glass navigation. */
.stage-nav {
  position: relative;
  width: calc(100% - 56px);
  max-width: 720px;
  align-self: center;
  margin: 14px 28px 0;
  padding: 7px 10px;
  height: 57px;
  gap: 4px;
  justify-content: space-between;
  border: 1px solid #ffffffed;
  border-radius: 999px;
  background: linear-gradient(160deg, #ffffffc9, #f7faf399);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #39543f0c, 0 7px 25px #39543f08;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.stage-nav button {
  position: relative;
  z-index: 1;
  padding: 9px 11px;
  gap: 7px;
  border: 1px solid transparent;
  font-size: 12px;
  min-height: 39px;
}
.stage-nav i { width: 12px; opacity: .6; }
.stage-nav.has-motion-indicator button.current { border-color: transparent; background: transparent; box-shadow: none; }
.motion-stage-indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(160deg, #fffffffa, #f0f6edf2);
  border: 1px solid #ffffff;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #3a5a4014, 0 3px 9px #3d5c4512;
  transition: transform 380ms var(--motion-ease), width 380ms var(--motion-ease), height 250ms var(--motion-ease), opacity 120ms;
  opacity: 0;
}
.chat-scroll { padding-top: 20px; }
.welcome { margin-top: clamp(25px, 4.1vh, 64px); max-width: 600px; }
.welcome-symbol {
  display: grid;
  place-items: center;
  height: 46px;
  width: 46px;
  margin: 0 auto 17px;
  font-size: 25px;
  border: 1px solid #ffffffed;
  border-radius: 17px;
  background: #ffffff9c;
  box-shadow: 0 4px 20px #39543f0b, 0 0 0 1px #39543f0b;
  color: #536f5a;
}
.welcome .eyebrow { letter-spacing: 2.4px; font-size: 10px; }
.welcome h1 {
  margin: 19px 0 20px;
  font-size: clamp(44px, 4.25vw, 64px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: 3px;
  color: #263b30;
}
.welcome h1 span { display: block; }
.welcome h1 span:last-child { color: #4b6652; }
.welcome-description { font-size: 14px; line-height: 2; }
.welcome-features { gap: 22px; margin: 23px 0 27px; }
.start-button { min-height: 54px; padding: 10px 14px 10px 25px; gap: 24px; font-size: 13px; }
.start-button span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #edf3eacc;
  box-shadow: inset 0 1px 0 #fff;
  color: #3e6147;
  font-size: 19px;
}
.welcome-note { margin-top: 14px; font-size: 10px; }

/* A moving edge reflection adapts the liquid-glass recipe to white paper. */
.motion-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background 180ms, border-color 180ms, box-shadow 200ms, transform 180ms var(--motion-ease);
}
.motion-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 100px 60px at var(--glass-x,50%) var(--glass-y,0%), #fff9, transparent 72%);
  opacity: 0;
  transition: opacity 180ms;
  z-index: -1;
}
@supports(mask-composite:exclude) {
  .motion-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(ellipse 100px 60px at var(--glass-x,50%) var(--glass-y,0%), #fff, #fff0 85%), linear-gradient(180deg,#ffffffcc, #798c7921 45%, #ffffff80);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
@media(hover:hover) and (pointer:fine) {
  .motion-glass:not(:disabled):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 7px 18px #39543f14; }
  .motion-glass:not(:disabled):hover::before { opacity: 1; }
}
.motion-glass:not(:disabled):active { transform: translateY(0) scale(.985); }
.send-button { box-shadow: inset 0 1px 0 #ffffff30, 0 4px 12px #39543f18; }
.composer {
  border-radius: 26px;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #3b5a4414, 0 12px 38px #39543f10;
  -webkit-backdrop-filter: blur(24px) saturate(110%);
  backdrop-filter: blur(24px) saturate(110%);
}
.composer textarea { font-size: 14px; }
.composer-bottom { margin-top: 11px; }
.composer-disclaimer { font-size: 9px; }

.settings-panel { padding-top: 29px; padding-left: 20px; padding-right: 20px; }
.settings-heading { margin: 0 4px 21px; }
.settings-heading h2 { font-family: "Songti SC", "SimSun", serif; font-size: 22px; letter-spacing: 1px; font-weight: 600; }
.settings-heading .eyebrow { letter-spacing: 3px; font-size: 8px; }
.settings-section {
  padding: 17px 15px 18px;
  margin: 0 0 17px;
  border: 1px solid #ffffffea;
  border-radius: 22px;
  background: linear-gradient(150deg,#ffffffcc,#f9fbf6a8);
  box-shadow: 0 0 0 1px #3b5a440a, 0 7px 24px #39543f06, inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.settings-section h3 { font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.settings-section select { min-height: 42px; border-radius: 12px; background: #ffffffb8; }
.settings-section textarea { border-radius: 14px; background: #ffffffb8; }
.settings-section label { margin-top: 15px; }
.settings-section .field-note { font-size: 10px; line-height: 1.8; }
.outline-button { gap: 24px; }
.settings-note { margin: 8px 5px 0; }
.question-card, .oral-task { border-radius: 22px; box-shadow: 0 5px 24px #39543f06; }
.question-card-heading { padding-top: 19px; padding-bottom: 18px; }
.practice-mode>div { padding: 4px; background: #f0f5ebd9; }
.training-tip { padding: 11px 13px; border: 1px solid #e2eadd; border-radius: 16px; background: #ffffffb3; }

/* Low-contrast mist moves only in the welcome screen, behind all controls. */
.main-panel { isolation: isolate; }
.main-panel>.topbar, .main-panel>.stage-nav, .main-panel>.chat-scroll, .main-panel>.composer-area { position: relative; z-index: 1; }
.motion-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.motion-atmosphere span { position: absolute; width: 85%; height: 30%; left: -8%; top: 49%; border-radius: 50%; background: radial-gradient(ellipse,#ffffff57, #ffffff00 70%); animation: motion-mist 22s ease-in-out infinite alternate; }
.motion-atmosphere span:last-child { left: 30%; top: 64%; width: 75%; animation-duration: 27s; animation-direction: alternate-reverse; opacity: .65; }
.main-panel:has(#conversation:not([hidden])) .motion-atmosphere { display: none; }
.motion-paused .motion-atmosphere span { animation-play-state: paused; }
.motion-ready .welcome .welcome-symbol { animation: motion-rise 600ms var(--motion-ease) backwards; }
.motion-ready .welcome .eyebrow { animation: motion-rise 600ms 60ms var(--motion-ease) backwards; }
.motion-ready .welcome h1 span { animation: motion-reveal 700ms 100ms var(--motion-ease) backwards; }
.motion-ready .welcome h1 span:last-child { animation-delay: 180ms; }
.motion-ready .welcome .welcome-description { animation: motion-rise 650ms 240ms var(--motion-ease) backwards; }
.motion-ready .welcome .welcome-features { animation: motion-rise 650ms 300ms var(--motion-ease) backwards; }
.motion-ready .welcome .start-button, .motion-ready .welcome .welcome-note { animation: motion-rise 650ms 360ms var(--motion-ease) backwards; }
.motion-message-enter { animation: motion-rise 300ms var(--motion-ease) both; }
@keyframes motion-reveal { from { opacity: 0; transform: translate3d(0,14px,0); filter: blur(4px); } to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes motion-rise { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes motion-mist { from { transform: translate3d(-10px,2px,0); } to { transform: translate3d(18px,-8px,0); } }
@media(min-width:1600px) { .settings-panel { padding-left: 25px; padding-right: 25px; } .welcome { margin-top: 5vh; } }
@media(max-width:1200px) { .stage-nav { width: calc(100% - 36px); margin-left: 18px; margin-right: 18px; padding: 7px 6px; gap: 1px; } .stage-nav button { padding: 9px 6px; gap: 5px; font-size: 11px; } .stage-nav i { width: 5px; } .settings-panel { padding-left: 15px; padding-right: 15px; } .settings-section { padding-left: 12px; padding-right: 12px; } }
@media(max-width:700px) {
  .topbar { height: 76px; }
  .topbar-actions { gap: 6px; }
  .topbar .icon-button { width: 38px; height: 38px; }
  .stage-nav { width: calc(100% - 28px); margin: 10px 14px 0; height: 74px; padding: 5px 6px; border-radius: 24px; }
  .stage-nav button { padding: 8px 7px; gap: 5px; font-size: 10px; }
  .motion-stage-indicator { border-radius: 20px; }
  .stage-nav i { width: 5px; }
  .chat-scroll { padding-top: 17px; }
  .welcome { margin-top: 4vh; }
  .welcome-symbol { width: 38px; height: 38px; font-size: 22px; border-radius: 14px; margin-bottom: 15px; }
  .welcome .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .welcome h1 { font-size: 45px; margin: 16px 0 18px; line-height: 1.18; letter-spacing: 2px; }
  .welcome-description { font-size: 12px; }
  .welcome-features { margin: 20px 0 23px; gap: 17px; }
  .start-button { min-height: 52px; padding-left: 22px; gap: 20px; font-size: 12px; }
  .start-button span { width: 30px; height: 30px; }
  .welcome-note { font-size: 9px; }
  .composer textarea { font-size: 13px; }
  .composer-bottom { margin-top: 7px; }
  .composer-disclaimer { font-size: 8px; }
}
@media(max-width:360px) { .welcome h1 { font-size: 40px; } .stage-nav button { font-size: 9px; padding-left: 5px; padding-right: 5px; } .welcome { margin-top: 3vh; } }
@media(prefers-reduced-transparency:reduce) { .settings-section, .stage-nav, .motion-stage-indicator, .composer { background: #fcfdf9; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media(prefers-reduced-motion:reduce) {
  .motion-atmosphere { display: none; }
  .motion-ready .welcome *, .motion-message-enter { animation: none !important; }
  .motion-glass, .motion-stage-indicator, .motion-glass::before { transition: none !important; }
  .motion-glass:hover, .motion-glass:not(:disabled):active { transform: none !important; }
}