/* A shared, quiet gradient language for the home and inquiry composer. */
.hero{min-height:350px;margin-bottom:12px}
.hero-copy{padding-top:12px;padding-bottom:12px}
.ai-art{height:354px}
.ai-aura{inset:15% 5% 28%;opacity:.6;background:radial-gradient(ellipse at 22% 44%,#ff729735,transparent 57%),radial-gradient(ellipse at 77% 55%,#a4daff57,transparent 58%);filter:blur(28px)}
.art-center{padding-bottom:26px}
.art-note{bottom:2px;font-size:10px;letter-spacing:1.7px}
.motion-paused .ai-aura{animation-play-state:paused}

@property --query-angle{syntax:'<angle>';initial-value:0deg;inherits:true}
.query-field{--query-angle:0deg;position:relative;isolation:isolate;margin-top:15px;padding:2px;border-radius:15px;background:var(--line);transition:box-shadow .3s;animation:query-orbit 6s linear infinite;animation-play-state:paused}
.query-field:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--query-angle),#ffc3d3 0deg,#f51c49 55deg,#ff7c9a 95deg,#b8dfff 175deg,#7cbce9 225deg,#e3eeff 285deg,#ffc3d3 360deg);opacity:0;transition:opacity .35s}
.query-field:focus-within:before,.query-field.has-content:before{opacity:1}
.query-field:focus-within{animation-play-state:running;box-shadow:0 0 0 4px #fd5a8210,0 4px 23px #87bce418}
.query-panel .query-field textarea{display:block;position:relative;width:100%;margin:0;min-height:220px;border:0;border-radius:13px;background:var(--bg);padding:17px;box-shadow:none;outline:0}
.query-panel .query-field textarea:focus{border:0;box-shadow:none}
:root[data-theme=dark] .query-field:focus-within{box-shadow:0 0 0 4px #ff658519,0 4px 25px #75b7f31a}
@keyframes query-orbit{to{--query-angle:360deg}}

/* KakaoTalk-style transcript, with fictional evaluation messages. */
.conversation{--chat-bg:#b2c7d9;--chat-meta:#425568;--chat-divider:#7893ab55;background:var(--chat-bg);border-color:#a4bdcf}
.conversation-head{padding:18px 22px;background:var(--chat-bg);border-bottom:1px solid var(--chat-divider);color:#253748;gap:11px}
.conversation-head>.avatar{background:#ffffff63;color:#304d66;border-radius:15px}
.conversation-head .meta{color:var(--chat-meta);font-size:12px}
.conversation-head .badge{background:#ffffff70;color:#354f64;border:0;font-size:12px}
.conversation-body{padding:23px 22px 25px;background:var(--chat-bg);min-height:454px}
.chat-date{margin:0 0 27px;color:var(--chat-meta);font-size:12px}
.chat-date span{display:inline-block;background:#ffffff3d;padding:5px 14px;border-radius:99px}
.chat-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:27px}
.chat-profile{display:grid;place-items:center;flex:0 0 33px;width:33px;height:36px;background:#e9eef2;border:1px solid #ffffff5e;color:#687f91;border-radius:12px}
.chat-content{min-width:0;flex:1}
.chat-name{color:var(--chat-meta);font-size:13px;margin:0 0 7px}
.chat-message{display:flex;gap:7px;align-items:flex-end}
.chat-bubble{position:relative;max-width:none;min-width:0;padding:12px 14px;background:#fff;color:#25272b;border-radius:11px;line-height:1.8;font-size:14px;box-shadow:0 1px 2px #39556913;overflow-wrap:anywhere;word-break:keep-all}
.chat-bubble:before{content:'';position:absolute;left:-6px;top:10px;width:10px;height:10px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
.chat-time{flex:0 0 auto;margin:0 0 2px;white-space:nowrap;color:var(--chat-meta);font-size:11px;line-height:1.4}
.outgoing{margin-left:35px}
.outgoing .chat-message{justify-content:flex-end}
.chat-bubble.mine{margin:0;background:#fee500;color:#242321;border-radius:11px}
.chat-bubble.mine:before{left:auto;right:-6px;transform:scaleX(-1)}
.scenario-context{margin-top:34px;border:0;border-top:1px solid var(--chat-divider);padding:18px 0 0;border-radius:0;color:var(--chat-meta);font-size:13px;line-height:1.7}
.scenario-context svg{flex-shrink:0;margin-top:3px}
:root[data-theme=dark] .conversation{--chat-bg:#293d50;--chat-meta:#c0cfdb;--chat-divider:#ffffff26;border-color:#40566b}
:root[data-theme=dark] .conversation-head{color:#f1f5f9}
:root[data-theme=dark] .conversation-head>.avatar{background:#435c70;color:#eaf1f7}
:root[data-theme=dark] .conversation-head .badge{background:#41566a;color:#edf4fa}
:root[data-theme=dark] .chat-date span{background:#ffffff0c}

/* Grade colors are reinforced by explicit labels, including on choices. */
.choice{flex-wrap:wrap;column-gap:10px;row-gap:6px}
.choice>span:not(.choice-verdict){flex:1;min-width:0}
.choice.is-correct,.choice.is-correct:has(input:checked){background:var(--green-soft);border-color:var(--green);color:var(--green)}
.choice.is-incorrect,.choice.is-incorrect:has(input:checked){background:var(--red-soft);border-color:var(--red-text);color:var(--red-text)}
.choice.is-correct input{accent-color:var(--green)}
.choice.is-incorrect input{accent-color:var(--red-text)}
.choice:has(input:disabled){cursor:default}
.choice-verdict{flex:0 0 100%;padding-left:26px;font-size:13px;font-weight:700}
.feedback.incorrect{background:var(--red-soft);color:var(--red-text);border:1px solid color-mix(in srgb,var(--red-text) 20%,transparent)}
.feedback.correct{border:1px solid color-mix(in srgb,var(--green) 20%,transparent)}

@media(max-width:760px){
  .hero-copy{padding-top:23px;padding-bottom:0}
  .ai-art{height:273px;margin-top:12px}
  .art-center{padding-bottom:22px}
  .query-panel .query-field textarea{min-height:180px}
  .conversation-head{padding:17px 18px}
  .conversation-body{padding:21px 18px;min-height:0}
  .conversation-head .badge{display:none}
  .chat-row{gap:8px}
  .chat-profile{flex-basis:29px;width:29px;height:32px}
  .chat-bubble{padding:11px 12px}
  .outgoing{margin-left:20px}
}
@media(prefers-reduced-motion:reduce){.query-field,.ai-aura{animation:none!important}}
@media(forced-colors:active){
  .query-field{border:1px solid CanvasText;padding:1px}
  .query-field:focus-within{outline:2px solid Highlight;outline-offset:3px}
  .query-field:before{display:none}
  .chat-bubble{border:1px solid CanvasText}
  .choice.is-correct,.choice.is-incorrect{border:2px solid CanvasText}
}