/* Grub Chat — frames demo.
   Extracted verbatim from the safe-chat frames prototype; the only
   additions are .state code and the disabled input state, both for the
   fetch-driven boot. */
:root{
  --sky:#8FD3F4;
  --panel:#FFFFFF;
  --ink:#27344F;
  --chip-fav:#3FA96C;   /* same green as an approved bubble: these are approved phrases */
  --accent:#FF8A3D;
  --muted:#7C8AA5;
  --good:#3FA96C;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--sky);
  color:var(--ink);
  min-height:100vh;
  display:flex;justify-content:center;
  padding:16px;
}
.app{width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px}

h1{font-size:20px;font-weight:800;text-align:center;padding-top:4px}
h1 span{color:#fff;text-shadow:0 2px 0 rgba(39,52,79,.35)}

.chat{
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:0 4px 0 var(--ink);
  padding:12px;
  min-height:160px;
  max-height:240px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
}
.chat .empty{color:var(--muted);font-size:14px;margin:auto;text-align:center}
.bubble{
  align-self:flex-end;
  background:var(--good);
  color:#fff;font-weight:700;font-size:15px;
  padding:8px 14px;border-radius:14px 14px 4px 14px;
  border:2px solid var(--ink);
  max-width:85%;
  animation:pop .18s ease-out;
}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

.chips{display:flex;gap:8px;min-height:50px}
.chip{
  flex:1;
  background:var(--panel);
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:0 3px 0 var(--ink);
  font-family:inherit;font-size:13px;font-weight:800;color:var(--ink);
  padding:6px 4px;
  cursor:pointer;
  transition:transform .06s;
  line-height:1.25;
}
.chip:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.chip.fav{background:var(--chip-fav);color:#fff}
.chip.fav::before{content:"★ ";font-size:11px}
.chip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.chips .none{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;font-weight:600;text-align:center;
}

.inputrow{display:flex;gap:8px}
.field{
  flex:1;display:flex;align-items:center;gap:6px;
  background:var(--panel);
  border:3px solid var(--ink);border-radius:12px;
  box-shadow:0 3px 0 var(--ink);
  padding:0 10px;
}
input{
  flex:1;border:none;outline:none;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);
  padding:12px 0;background:transparent;min-width:0;
}
input::placeholder{color:var(--muted);font-weight:500}
.send{
  background:var(--accent);
  border:3px solid var(--ink);border-radius:12px;
  box-shadow:0 3px 0 var(--ink);
  color:#fff;font-family:inherit;font-size:15px;font-weight:800;
  padding:0 18px;cursor:pointer;transition:transform .06s;
}
.send:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.send:disabled{background:#C7CFDD;cursor:not-allowed;opacity:.9}
.send.green{background:var(--good)}
.send.yellow{background:#F5C542;color:var(--ink)}
.send.red{background:#E5484D}
.bubble.review{background:#F5C542;color:var(--ink)}
.bubble.flagged{background:#E5484D;color:#fff}
.viz{align-self:flex-end;font-size:10px;color:var(--muted);margin-top:-4px}

details{
  background:rgba(255,255,255,.55);
  border:2px dashed var(--ink);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
}
summary{font-weight:800;cursor:pointer}
.state{margin-top:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.7;word-break:break-word}
.state b{color:var(--good)}
.samplebtn{
  margin-top:8px;
  background:var(--panel);border:2px solid var(--ink);border-radius:8px;
  box-shadow:0 2px 0 var(--ink);
  font-family:inherit;font-size:12px;font-weight:800;color:var(--ink);
  padding:6px 10px;cursor:pointer;
}
.samples{margin-top:8px;font-size:12px;line-height:1.7;column-count:1}
.note{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .bubble{animation:none}
  .chip,.send{transition:none}
}
</style>

/* Boot state: the input is disabled until the bundle has been compiled. */
input:disabled{cursor:progress}
input:disabled::placeholder{color:var(--muted);opacity:.7}
.state code{font-family:inherit;background:rgba(39,52,79,.08);padding:0 3px;border-radius:3px}
.state.bad b{color:#E5484D}