/* doubt-panel.css — the AI panel on the right, and the colouring that says
   what a suggestion is asking about. Loaded by live.html. */
/* ── AI panel : right side, like Audionotes ── */
.ai{
  position:absolute;top:0;right:0;bottom:0;width:var(--ai);z-index:45;
  background:var(--g0);border-left:1px solid var(--rule);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .38s var(--e);
}
body.ai-open .ai{transform:none}
/* No title bar. The panel says what it is at the foot, next to the field, so
   the head is only somewhere to leave from. */
.ai-top{padding:12px 14px 0;display:flex;justify-content:flex-end}
.ai-x{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  color:var(--g5);transition:.14s var(--e);
}
.ai-x:hover{background:var(--g2);color:var(--g8)}
.ai-x svg{width:13px;height:13px}
/* Bottom-aligned: an empty panel greets you just above the composer rather than
   from the top of a column of nothing. */
.ai-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;justify-content:flex-end}
.ai-hello{margin-bottom:16px}
.ai-mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:var(--primary-soft);color:var(--primary-ink);margin-bottom:11px;
}
.ai-mark svg{width:17px;height:17px}
.ai-hello h3{font-size:16px;font-weight:700;letter-spacing:-.025em;color:var(--g8)}
.quote{border-left:2px solid var(--corn);padding:2px 0 2px 12px;margin-bottom:18px;font-size:14.5px;line-height:1.6;color:var(--g7)}
.quote:empty{display:none}   /* no block picked yet: no rule, no gap */
.quote em{display:block;font-size:11.5px;font-style:normal;font-weight:500;color:var(--g5);margin-bottom:4px;letter-spacing:.02em}
/* Rows, not cards. Three bordered boxes read as three decisions; these read as
   things you could say. */
.chips{display:grid;gap:2px;margin-bottom:4px}
.chip{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:9px 10px;border-radius:9px;border:0;background:none;
  font-family:inherit;font-size:13.5px;color:var(--g7);cursor:pointer;
  transition:.14s var(--e);
}
.chip svg{width:16px;height:16px;flex:0 0 auto}
/* Each row keeps the colour its subject already has elsewhere on the page: the
   exam question wears the exam tag's red, the worked example the blue the app
   uses for reference, and the plain explanation the theme itself. Grey icons
   made three different questions look like one repeated control. */
.chip.q-explain svg{color:var(--theme)}
.chip.q-example svg{color:var(--corn)}
.chip.q-exam    svg{color:var(--red)}
.chip:hover{background:var(--g2);color:var(--g8)}
.ai-foot{padding:15px 20px;border-top:1px solid var(--rule)}
/* The composer holds three rows — what is being asked about, the question, and
   the controls — so it is a box rather than the single line it used to be. The
   radius drops from a pill to the page's own 13px for the same reason. */
.composer{
  display:grid;gap:8px;padding:10px 10px 8px;
  background:var(--g1);border:1px solid var(--g4);border-radius:13px;
  transition:border-color .14s var(--e);
}
.composer:focus-within{border-color:var(--primary)}
.composer textarea{
  border:0;background:none;font-family:inherit;font-size:14px;line-height:1.55;
  color:var(--g8);outline:none;resize:none;overflow:hidden;
  min-height:22px;max-height:180px;padding:0 4px;
}
.composer textarea::placeholder{color:var(--g5)}

/* The blocks this question is about. Indigo-soft, as the alert count and the
   Ask hover already are, so "the app is holding this for you" reads the same
   way everywhere. */
.ctx-chips{display:flex;flex-wrap:wrap;gap:6px}
.ctx-chips:empty{display:none}
/* A quiet reference, not a banner. The block's own words carry it, with a small
   mark to say where they came from — the timestamp took a whole line in mono and
   shouted the least useful part of it. */
.ctx-chip{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:3px 4px 3px 7px;border-radius:7px;
  /* the same ground the block itself takes when a chip points at it, so the two
     are recognisably one thing at both ends */
  background:var(--primary-soft);color:var(--primary-ink);
  font-size:12px;font-weight:600;
  border:1px solid var(--lock-deep);transition:.14s var(--e);
}
.ctx-chip:hover{background:var(--g0)}
:root[data-theme="dark"] .ctx-chip:hover{background:var(--g1)}
.ctx-chip .ico{width:13px;height:13px;flex:0 0 auto;color:var(--primary-ink);opacity:.75}
.ctx-chip .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Removing something is the one destructive control here, so it is the one that
   reads as a warning rather than as more indigo. */
.ctx-chip .x{
  display:grid;place-items:center;width:15px;height:15px;border-radius:4px;
  color:var(--red-ink);flex:0 0 auto;
}
.ctx-chip .x svg{width:9px;height:9px}
.ctx-chip .x:hover{color:#fff;background:var(--red)}

/* One control, two glyphs — the sun shows in dark and the moon in light, so the
   icon is what you are switching TO rather than a badge of where you are. */
.themebtn{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:var(--g6);transition:.14s var(--e);
}
.themebtn:hover{background:var(--g2);color:var(--g8)}
.themebtn svg{width:18px;height:18px}
.themebtn .moon{display:block}
.themebtn .sun{display:none}
:root[data-theme="dark"] .themebtn .moon{display:none}
:root[data-theme="dark"] .themebtn .sun{display:block}
.ctx-chip .go{cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-width:0}
.ctx-chip .go:hover .lbl{text-decoration:underline}

.composer-foot{display:flex;align-items:center;gap:6px}
.cbtn{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--g6);transition:.14s var(--e);
}
.cbtn:hover:not(:disabled){background:var(--g2);color:var(--g8)}
.cbtn:disabled{opacity:.38;cursor:default}
.cbtn svg{width:17px;height:17px}
.send{
  width:32px;height:32px;border-radius:999px;background:var(--primary);color:#fff;
  display:grid;place-items:center;flex:0 0 auto;margin-left:auto;
  transition:.14s var(--e);
}
.send:hover{background:var(--primary-hi)}
.send:disabled{background:var(--g4);color:var(--g6);cursor:default}
.send svg{width:16px;height:16px}

/* The block a chip points at, for a moment after the chip is clicked — long
   enough to find it, gone before it becomes decoration. */
.chunk.located{background:var(--primary-soft);border-color:var(--primary)}
.alt{margin-top:9px}
.alt button{font-size:12.5px;font-weight:500;color:var(--g6)}
.alt button:hover{color:var(--blush-ink)}