/* Layout: a Google results page for the word being practised. The conversation runs down the 652px results
   column, the knowledge panel for the current word sits in the right rail, and the answer box is pinned to the
   bottom like a search bar. Under 1000px the panel moves above the conversation. */
:root{
  --bg:#fff; --panel:#fff; --line:#dadce0; --line-soft:#ebedef;
  --fg:#202124; --fg-snippet:#4d5156; --fg-meta:#70757a;
  --blue:#1a73e8; --visited:#681da8; --green:#188038; --red:#d93025;
  --hover:#f1f3f4; --chip:#f1f3f4; --chip-line:#f1f3f4;
  --shadow:0 1px 6px rgba(32,33,36,.28);
  --g-blue:#4285f4; --g-red:#ea4335; --g-yellow:#fbbc04; --g-green:#34a853;
  --col:652px; --side:368px; --indent:124px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#202124; --panel:#202124; --line:#3c4043; --line-soft:#303134;
    --fg:#e8eaed; --fg-snippet:#bdc1c6; --fg-meta:#9aa0a6;
    --blue:#8ab4f8; --visited:#c58af9; --green:#81c995; --red:#f28b82;
    --hover:#303134; --chip:#303134; --chip-line:#3c4043;
    --shadow:0 1px 6px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#202124; --panel:#202124; --line:#3c4043; --line-soft:#303134;
  --fg:#e8eaed; --fg-snippet:#bdc1c6; --fg-meta:#9aa0a6;
  --blue:#8ab4f8; --visited:#c58af9; --green:#81c995; --red:#f28b82;
  --hover:#303134; --chip:#303134; --chip-line:#3c4043;
  --shadow:0 1px 6px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font:400 14px/1.58 Roboto,Arial,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font-family:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

.wrap{max-width:1240px; margin:0 auto; padding-inline:16px}

/* ---------- header ---------- */
.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:5;
  background:var(--bg); border-bottom:1px solid var(--line-soft);
}
.top-row{display:flex; align-items:center; gap:24px; padding-block:16px 6px; flex-wrap:wrap}
.brand{width:100px; flex:0 0 auto; font-size:22px; font-weight:500; letter-spacing:-.012em; color:var(--fg)}
.qbox{
  flex:0 1 var(--col); min-width:0; display:flex; align-items:center; gap:12px;
  height:44px; padding:0 6px 0 16px;
  border:1px solid var(--line); border-radius:24px; background:var(--panel);
  transition:box-shadow .15s,border-color .15s;
}
.qbox:hover{box-shadow:var(--shadow); border-color:transparent}
.qico{flex:0 0 auto; color:var(--fg-meta)}
.query{flex:1 1 auto; min-width:0; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.query .ph{color:var(--fg-meta)}
.query .n{color:var(--fg-meta); font-size:14px; margin-right:10px}

.iconbtn{
  flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; color:var(--fg-meta); cursor:pointer;
  transition:background .12s,color .12s;
}
.iconbtn:hover:not(:disabled){background:var(--hover); color:var(--fg)}
.iconbtn:disabled{opacity:.4; cursor:default}
.iconbtn.sm{width:30px; height:30px}
body.speaking #hear{color:var(--blue)}

.tabs{display:flex; gap:26px; padding-left:var(--indent)}
.tab{
  padding:10px 0 9px; border:0; border-bottom:3px solid transparent; background:none; cursor:pointer;
  font-size:13px; color:var(--fg-meta);
}
.tab:hover{color:var(--fg)}
.tab.sel{color:var(--blue); border-bottom-color:var(--blue)}

/* ---------- page grid ---------- */
.grid{
  display:grid; grid-template-columns:minmax(0,var(--col)) minmax(0,var(--side));
  column-gap:76px; padding-left:var(--indent);
}
.col{min-width:0}
.stats{font-size:13px; color:var(--fg-meta); margin:0; padding-block:12px 16px; font-variant-numeric:tabular-nums}

/* ---------- conversation ---------- */
.thread{display:flex; flex-direction:column; gap:22px; padding-bottom:170px}
.turn{min-width:0}
.who{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fg-meta); margin-bottom:4px}
.turn.agent .say{margin:0; font-size:16px; line-height:1.62; color:var(--fg); max-width:62ch}
.turn.user{align-self:flex-end; max-width:min(82%,520px)}
.turn.user .who{justify-content:flex-end}
.turn.user .say{
  margin:0; background:var(--chip); border-radius:18px 18px 4px 18px; padding:10px 16px;
  font-size:15px; line-height:1.5; color:var(--fg); word-break:break-word;
}
.verdict{font-size:11px; line-height:16px; border:1px solid currentColor; border-radius:3px; padding:0 5px}
.v-correct{color:var(--green)}
.v-wrong_sense,.v-missing_word{color:var(--red)}
.v-not_sentence,.v-skip{color:var(--fg-meta)}

.dots{display:flex; gap:6px; padding-block:9px 4px}
.dots i{width:8px; height:8px; border-radius:50%; display:block; animation:bob 1s ease-in-out infinite}
.dots i:nth-child(1){background:var(--g-blue)}
.dots i:nth-child(2){background:var(--g-red); animation-delay:.12s}
.dots i:nth-child(3){background:var(--g-yellow); animation-delay:.24s}
.dots i:nth-child(4){background:var(--g-green); animation-delay:.36s}
@keyframes bob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

.begin-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.gbtn{
  font-size:14px; padding:9px 20px; border-radius:4px; cursor:pointer;
  background:var(--chip); color:var(--fg-snippet); border:1px solid var(--chip-line);
}
.gbtn:hover{border-color:var(--line); color:var(--fg)}
.gbtn.primary{background:var(--blue); border-color:var(--blue); color:var(--bg); font-weight:500}
.gbtn.primary:hover{box-shadow:var(--shadow); color:var(--bg)}

/* ---------- knowledge panel ---------- */
.side{min-width:0; padding-top:12px}
.kp{
  position:sticky; top:132px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel); overflow:hidden;
}
.kp-sec{padding:16px 20px}
.kp-sec + .kp-sec{border-top:1px solid var(--line-soft)}
.kp-title{font-size:28px; line-height:1.2; font-weight:400; margin:0; color:var(--fg); word-break:break-word}
.kp-sub{margin:2px 0 0; font-size:14px; color:var(--fg-meta); display:flex; align-items:center; gap:4px; min-height:30px}
.kp-desc{margin:0; font-size:14px; color:var(--fg-snippet)}
.pos{margin:0 0 8px; font-style:italic; font-size:14px; color:var(--fg-snippet)}
.defs{margin:0; padding-left:20px}
.defs li{color:var(--fg); font-size:14px; line-height:1.6}
.defs li::marker{color:var(--fg-meta)}
.ex{margin:4px 0 0; color:var(--fg-meta); font-size:14px}
.similar{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:14px}
.similar .lbl{font-size:13px; color:var(--fg-meta); margin-right:2px}
.chip{border:1px solid var(--line); border-radius:16px; padding:2px 11px; font-size:13px; color:var(--fg-snippet)}
.facts{display:grid; gap:7px; margin:0}
.fact{margin:0; font-size:14px; color:var(--fg-snippet)}
.fact b{font-weight:500; color:var(--fg)}

.kp-foot{padding-block:14px}
.ticks{display:flex; gap:5px; margin-bottom:8px}
.ticks i{flex:1 1 0; height:4px; border-radius:2px; background:var(--line); display:block}
.ticks i.on{background:var(--green)}
.ticks i.due{background:var(--red)}
.ticks i.cur{background:var(--blue)}
.ticks-key{margin:0; font-size:12px; color:var(--fg-meta)}
.k-on{color:var(--green)} .k-cur{color:var(--blue)} .k-due{color:var(--red)}

/* ---------- the set ---------- */
.setlist{padding-bottom:48px}
.res{margin-bottom:26px}
.crumb{font-size:12px; color:var(--fg-meta); margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rtitle{
  font-size:19px; font-weight:400; line-height:1.3; color:var(--blue); cursor:pointer;
  background:none; border:0; padding:0; text-align:left;
}
.rtitle:hover{text-decoration:underline}
.rline{display:flex; align-items:center; gap:2px 4px; flex-wrap:wrap}
.set-note{margin:0 0 22px; font-size:13px; color:var(--fg-meta)}
.res .rmark.now{color:var(--blue)}
.res.cleared .rtitle{color:var(--visited)}
.rsnip{margin:3px 0 0; font-size:14px; color:var(--fg-snippet); max-width:60ch}
.rmark{display:inline-block; margin-left:8px; vertical-align:2px; font-size:11px; line-height:16px; border:1px solid currentColor; border-radius:3px; padding:0 5px}
.res.due .rmark{color:var(--red)}
.res.cleared .rmark{color:var(--green)}

/* ---------- about ---------- */
.about{padding-bottom:56px; max-width:62ch}
.about h2{font-size:20px; font-weight:400; margin:0 0 14px; color:var(--fg)}
.about h3{font-size:14px; font-weight:500; margin:20px 0 4px; color:var(--fg)}
.about p{margin:0; font-size:14px; color:var(--fg-snippet)}
.about p + p{margin-top:10px}

/* ---------- composer ---------- */
.composer{
  position:fixed; left:0; right:0; bottom:0; z-index:6;
  background:var(--bg); border-top:1px solid var(--line-soft);
  padding-block:12px calc(8px + env(safe-area-inset-bottom,0px));
}
.pill{
  display:flex; align-items:center; gap:4px; height:52px; padding:0 6px 0 22px;
  border:1px solid var(--line); border-radius:26px; background:var(--panel);
  transition:box-shadow .15s,border-color .15s;
}
.pill:hover,.pill:focus-within,.pill.live{box-shadow:var(--shadow); border-color:transparent}
.pill input{
  flex:1 1 auto; min-width:0; height:48px; border:0; background:transparent;
  font-size:16px; color:var(--fg);
}
.pill input:focus{outline:0}
.pill input::placeholder{color:var(--fg-meta)}
.mic{color:var(--blue)}
.mic.live,.mic.live:hover{background:var(--red); color:#fff; animation:ring 1.3s ease-out infinite}
@keyframes ring{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 45%,transparent)}
  100%{box-shadow:0 0 0 11px transparent}
}
.send:not(:disabled){color:var(--blue)}

.under{
  display:flex; align-items:center; justify-content:space-between; gap:6px 16px; flex-wrap:wrap;
  padding:8px 6px 0; font-size:12.5px; color:var(--fg-meta);
}
.hint{min-width:0}
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer; color:var(--fg-snippet); user-select:none}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch .track{position:relative; width:34px; height:14px; border-radius:7px; background:var(--line); transition:background .15s}
.switch .track::after{
  content:""; position:absolute; top:-3px; left:-2px; width:20px; height:20px; border-radius:50%;
  background:var(--panel); box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .15s,background .15s;
}
.switch input:checked + .track{background:color-mix(in srgb,var(--blue) 45%,transparent)}
.switch input:checked + .track::after{transform:translateX(18px); background:var(--blue)}
.switch input:focus-visible + .track{outline:2px solid var(--blue); outline-offset:3px}
.switch input:disabled + .track{opacity:.4}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--indent:0px}
  .brand{width:auto}
}
@media (max-width:1000px){
  .grid{grid-template-columns:minmax(0,var(--col)); column-gap:0}
  .side{order:-1; padding-top:14px}
  .kp{position:static}
  .kp .similar{display:none}
  .stats{padding-top:14px}
}
@media (max-width:560px){
  .top-row{gap:10px; padding-block:12px 4px}
  .brand{font-size:20px}
  .qbox{flex-basis:100%}
  .tabs{gap:22px}
  .kp-title{font-size:24px}
  .kp-sec{padding:14px 16px}
  .pill{height:50px; padding-left:18px}
  .turn.user{max-width:90%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}