/* Good-Catch portal — KCI-branded: chrome from the shared theme.css tokens (--sans / --paper / --surface / --ink /
   --muted / --line / --shadow) + the real KCI logo, matching the other KSG portals. KEYO's green stays as the safety
   accent (the reporter is a safety surface). theme.css is linked FIRST, so we DON'T redefine its tokens here. */
:root {
  --green: #0d6e3f; --green-d: #0a5531; --amber: #b8860b;   /* KEYO safety accents (green stays) */
  --keyo-soft: #e8f3ec; --radius: 12px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.45;
  color: var(--ink); background: var(--paper);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Standard KCI portal header: light surface bar, the real logo, a title. */
#topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
}
#topbar img { height: 34px; width: auto; }
#topbar .title { font-weight: 800; font-size: 19px; letter-spacing: .2px; color: var(--green); }
#topbar .who { margin-left: auto; color: var(--muted); font-size: 13px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { max-width: 680px; margin: 0 auto; padding: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.card h2 { font-size: 18px; margin: 0 0 8px; }
.lead p { margin: 0 0 12px; color: var(--ink); }
.lead .es { color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); }

.pinrow { display: flex; gap: 8px; }
.pinrow input { flex: 1; font: inherit; font-size: 20px; letter-spacing: 4px; text-align: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.pinrow input:focus { outline: none; border-color: var(--green); }

.idrow { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field span em { font-weight: 400; }
.field input, .field select { font: inherit; font-weight: 400; color: var(--ink); padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--surface); min-height: 46px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--green); }
@media (min-width: 460px) { .idrow { grid-template-columns: 1fr 1fr; } .idrow .email { grid-column: 1 / -1; } }

.chat { display: flex; flex-direction: column; gap: 10px; min-height: 60px; margin-bottom: 12px; }
.bubble { max-width: 85%; padding: 10px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.bubble.keyo { align-self: flex-start; background: var(--keyo-soft); color: var(--ink); border-bottom-left-radius: 4px; }
[data-theme="dark"] .bubble.keyo { background: #1c2e24; }
.bubble.me { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 4px; }
.bubble.typing { color: var(--muted); font-style: italic; }
.bubble.notice { align-self: stretch; max-width: 100%; background: #fdecea; color: #7a271a; border: 1px solid #f5c6c0; border-radius: 10px; font-size: 14px; }
[data-theme="dark"] .bubble.notice { background: #3a1512; color: #f6c9c2; border-color: #6b241d; }
.bubble .name { display: block; font-size: 11px; font-weight: 700; opacity: .7; margin-bottom: 2px; }

/* KEYO's tappable option chips (cut down typing) — sit under KEYO's bubble, green-accented. */
.opts { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 92%; }
.opt { font: inherit; font-size: 15px; font-weight: 600; color: var(--green); background: var(--surface);
  border: 1.5px solid var(--green); border-radius: 999px; padding: 9px 15px; min-height: 42px; cursor: pointer; font-family: var(--sans); }
.opt:active { background: var(--keyo-soft); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--grid); color: var(--ink); border: 1px solid var(--line); }
.chip.risk { background: var(--core-soft); border-color: var(--core-soft); color: var(--core); }   /* KCI amber family */
.chip.task { background: var(--cm-soft); border-color: var(--cm-soft); color: var(--cm); }           /* KCI blue family */

.composer { display: flex; gap: 8px; align-items: flex-end; }
textarea#msg {
  flex: 1; resize: none; font: inherit; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); max-height: 140px;
}
textarea#msg:focus { outline: none; border-color: var(--green); }
.btn { font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; min-height: 46px; font-family: var(--sans); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.send { background: var(--green); color: #fff; }
.btn.send:active { background: var(--green-d); }
.actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.btn.submit { background: var(--amber); color: #fff; padding: 13px 22px; }
.btn.ghost { background: var(--surface); color: var(--green); border: 1.5px solid var(--line); }
.hint { color: var(--muted); font-size: 13px; }

.done { text-align: center; }
.done .checkmark { width: 56px; height: 56px; margin: 4px auto 8px; border-radius: 50%; background: var(--green); color: #fff; font-size: 30px; line-height: 56px; }
.done h2 { margin: 6px 0; }

.foot { max-width: 680px; margin: 0 auto; padding: 4px 16px 28px; color: var(--muted); font-size: 12px; text-align: center; }
.banner { background: #fdecea; color: #7a271a; border: 1px solid #f5c6c0; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }