/* ---------------------------------------------------------------------------
   Deliberately quiet styling: the interface should not editorialise, so the
   only thing that varies perceptibly between trials is the task and the
   permission request themselves. Calm surface, clear focus, minimal motion.
--------------------------------------------------------------------------- */

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #e2e2e2;
  --text: #1a1a1a;
  --text-soft: #5c5c5c;
  --user-bubble: #ececec;
  --assistant-bubble: #ffffff;
  --permission-bubble: #f4f6fb;   /* faint tint so the request is legible as a distinct message, without colour that implies a "right" answer */
  --accent: #3a3a3a;
  --radius: 10px;
  --maxw: 720px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }

/* 100dvh follows the visible viewport when a mobile keyboard opens; the 100vh
   line above it is the fallback for browsers without dvh support. */
.app { max-width: var(--maxw); margin: 0 auto; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* Header: progress + task instruction */
.bar {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.75rem 1rem; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.bar__progress { font-size: 0.75rem; color: var(--text-soft); white-space: nowrap; }
.bar__task { font-weight: 600; font-size: 0.9rem; }

/* Transcript */
.history { flex: 1; overflow-y: auto; padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.msg {
  max-width: 80%; padding: 0.65rem 0.85rem; border-radius: var(--radius);
  line-height: 1.5; white-space: pre-wrap; word-wrap: break-word;
}
.msg--user { align-self: flex-end; background: var(--user-bubble); }
.msg--assistant { align-self: flex-start; background: var(--assistant-bubble); border: 1px solid var(--border); }
.msg--permission { align-self: stretch; max-width: 100%; background: var(--permission-bubble); border: 1px solid var(--border); font-weight: 500; }
.msg--pending { color: var(--text-soft); font-style: italic; }
/* Application notice (e.g. "please answer before continuing"). Deliberately
   unlike .msg--permission: the permission request is the stimulus and must stay
   visually unique. */
.msg--system {
  align-self: center; max-width: 100%; text-align: center;
  background: none; border: none; color: var(--text-soft);
  font-size: 0.82rem; font-style: italic; padding: 0.15rem 0.5rem;
}
.msg--error { align-self: stretch; background: #fff4f4; border: 1px solid #f0c8c8; color: #8a2b2b; }

/* Composer */
.composer { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--surface); border-top: 1px solid var(--border); }
.composer__input {
  flex: 1; resize: none; font: inherit; padding: 0.6rem 0.7rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text); max-height: 9rem; overflow-y: auto;
}
.composer__input:disabled { background: #f0f0f0; color: var(--text-soft); }
.composer__send { font: inherit; font-weight: 600; padding: 0 1.1rem; border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.composer__send:disabled { opacity: 0.5; cursor: default; }

/* Decision bar. Both buttons share identical neutral styling on purpose: the
   visual weight of Allow and Deny must be equal so appearance is not a second
   manipulation. */
.decision { display: flex; gap: 0.75rem; padding: 0.75rem 1rem 1rem; background: var(--surface); border-top: 1px solid var(--border); }
.decision__btn {
  flex: 1; font: inherit; font-weight: 600; padding: 0.7rem 1rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text); cursor: pointer;
}
.decision__btn:hover { background: #f0f0f0; }

/* Overlays (start / done) */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(250,250,250,0.96); }
.overlay__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; max-width: 22rem; width: 90%; text-align: center; }
.overlay__input { width: 100%; font: inherit; padding: 0.5rem; margin: 0.75rem 0; border: 1px solid var(--border); border-radius: 8px; }
.overlay__btn { font: inherit; font-weight: 600; padding: 0.55rem 1.2rem; border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }

/* Next-task bar + permission modal */
.nextbar { padding: 0.5rem 1rem 0.9rem; background: var(--surface); display: flex; }
.nextbar__btn {
  flex: 1; font: inherit; font-weight: 600; padding: 0.7rem 1rem;
  border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer;
}
.nextbar__btn:disabled { opacity: 0.45; cursor: default; }
.nextbar[hidden] { display: none; }
.modal-actions { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.msg--permission a { color: #2563eb; }

/* Data-protection notices (required by the approved ethics application) */
.notice {
  background: #fff8e6; border: 1px solid #e8d9a8; border-radius: 8px;
  padding: 0.7rem 0.85rem; font-size: 0.9rem; line-height: 1.45;
}
.standing-notice {
  margin: 0; padding: 0.45rem 1rem; background: #fff8e6;
  border-top: 1px solid #e8d9a8; color: var(--text-soft);
  font-size: 0.78rem; text-align: center;
}

.code-box {
  background: #f0f4ff; border: 1px solid #c9d6f5; border-radius: 8px;
  padding: 0.8rem; text-align: center; font-size: 0.95rem;
}
.code-box strong {
  display: block; margin-top: 0.35rem; font-size: 1.5rem;
  letter-spacing: 0.15em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: all;   /* one click selects the whole code */
}

.overlay__card--wide { max-width: 32rem; text-align: left; }
.overlay__card--scroll { max-height: 85vh; overflow-y: auto; }
.overlay__card--wide h2 { margin-top: 0; }

/* The `hidden` HTML attribute must win over the display rules above, otherwise
   the overlays and the decision bar stay visible permanently. */
.overlay[hidden] { display: none; }
.decision[hidden] { display: none; }

:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* --- Safe formatting for model-generated Markdown (v9) ------------------- */
/* Formatting for model-generated Markdown. Kept separate from the study's
   existing visual design so this can be added without replacing style.css. */
.msg--assistant { white-space: normal; }

.msg--assistant p {
  margin: 0 0 0.75rem;
}

.msg--assistant p:last-child {
  margin-bottom: 0;
}

.msg--assistant ol,
.msg--assistant ul {
  margin: 0.55rem 0 0.8rem 1.35rem;
  padding: 0;
}

.msg--assistant li {
  margin: 0.35rem 0;
  padding-left: 0.15rem;
}

.msg--assistant strong {
  font-weight: 650;
}

.msg--assistant code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  padding: 0.08em 0.28em;
  border-radius: 0.28em;
  background: rgba(0, 0, 0, 0.06);
}

.msg--assistant a {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.assistant-heading {
  font-weight: 700;
  margin: 0 0 0.55rem;
}