/* File: frontend/style.css
   ---------------------------------------------------------------------------
   Design intent: this is instrumentation for a NeuroIS cognitive-load / eye-
   tracking study, not a marketing page. Visual salience is deliberately LOW so
   the interface itself adds as little extraneous cognitive load and as few
   gaze-attracting distractors as possible. One muted accent, generous spacing,
   monospace only where the subject's own material (SQL) lives.
   --------------------------------------------------------------------------- */

   :root {
    --bg: #f7f8fa;          /* near-white, low glare */
    --surface: #ffffff;     /* panels/cards */
    --ink: #1f2430;         /* primary text */
    --ink-soft: #5b6472;    /* secondary text */
    --line: #e2e6ec;        /* hairline borders */
    --accent: #3a5a78;      /* calm slate-blue, used sparingly */
    --accent-ink: #ffffff;
    --user-bubble: #e8eef4; /* participant message */
    --bot-bubble: #f0f1f3;  /* assistant message */
    --error: #9a3b3b;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  
  * { box-sizing: border-box; }
  
  html, body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
  }
  
  h1, h2, h3 { font-weight: 600; line-height: 1.25; }
  
  /* --- Buttons --------------------------------------------------------------- */
  .btn {
    font: inherit;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
  }
  .btn:hover { border-color: var(--accent); }
  .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
  .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .btn-primary:hover { filter: brightness(1.08); }
  
  /* --- Setup screen ---------------------------------------------------------- */
  .setup-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  .setup-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 2rem;
    width: min(420px, 100%);
  }
  .setup-card h1 { margin-top: 0; }
  .setup-note { color: var(--ink-soft); margin-top: -0.5rem; }
  .setup-card label {
    display: block;
    margin: 1rem 0 0.25rem;
    font-weight: 500;
  }
  .setup-card input,
  .setup-card select {
    width: 100%;
    font: inherit;
    padding: 0.5rem;
    margin-top: 0.25rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
  }
  .setup-error { color: var(--error); min-height: 1.25rem; margin: 0.75rem 0; }
  .setup-card .btn { margin-top: 1rem; width: 100%; }
  
  /* --- Generic jsPsych screen text ------------------------------------------ */
  .screen-text {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
  }
  .screen-text.tlx { text-align: center; }
  .end-screen { max-width: 640px; margin: 4rem auto; text-align: center; }
  
  /* jsPsych centers content; cap text screens at a readable width, but let wide
     screens (treatment, near-transfer) use up to 96% of the viewport. Narrow
     screens self-limit via their own max-width below, so they stay centered. */
  #jspsych-target .jspsych-content { max-width: min(98vw, 1800px); }
  .screen-text--wide { max-width: min(94vw, 1280px); }
  
  /* --- Treatment two-panel layout ------------------------------------------- */
  .treatment-wrap {
    display: flex;
    gap: 1px;                 /* hairline gap between panels */
    background: var(--line);  /* shows through the gap as a divider */
    /* DEFINITE, content-independent width: viewport-based (not 100% of a
       shrink-to-fit parent), so the combined tool+task window is EXACTLY the
       same size in every condition — chat and manual differ only in content,
       never in layout. The inner 60/40 split is then also deterministic. */
    width: min(98vw, 1800px);
    /* Leave room for the progress bar above and breathing space below, so the
       submit button never sits on the bottom edge of the window. */
    height: calc(100vh - 8rem);
    min-height: 560px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
  }
  .panel {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    min-width: 0;             /* allow children to shrink/scroll */
  }
  /* Fixed 60/40 split: the tool panel (chat OR manual) is wider AND always the
     same width regardless of its content or the condition, so the layout never
     confounds the manipulation. Percentage basis (like the old 50/50) so the
     flex container keeps a definite width. */
  .panel-left  { flex: 1 1 60%; }
  .panel-right { flex: 1 1 40%; }
  .panel-header {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .panel-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  
  /* Right panel sub-areas. The task is the tall, rich-HTML content (tables,
     headings, code): it grows to fill the panel and scrolls internally. The
     answer textarea sits below at a fixed height the participant can drag taller. */
  .sql-task {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;           /* scroll both axes — wide tables, long tasks */
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    font-size: 0.9rem;        /* base font for prose; code/pre stay monospace */
    line-height: 1.5;
    text-align: left;         /* undo jsPsych's centered .jspsych-content */
  }
  .sql-answer {
    flex: 0 0 auto;
    margin: 0.5rem 0 1rem;
    font-family: var(--mono);
    font-size: 0.95rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    resize: vertical;
    min-height: 160px;
  }
  .submit-answer { align-self: flex-end; }
  
  /* --- Rich HTML inside the task box (tables, code, headings) --------------- */
  .sql-task h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
  .sql-task h4 {
    margin: 0.9rem 0 0.35rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .sql-task p { margin: 0.4rem 0; }
  .sql-task code {
    font-family: var(--mono);
    font-size: 0.85em;
    background: var(--bg);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
  }
  .sql-task pre {
    font-family: var(--mono);
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 0.7rem 0.8rem;
    border-radius: 6px;
    overflow-x: auto;         /* long query lines scroll instead of breaking */
    margin: 0.5rem 0 0.9rem;
  }
  .sql-task pre code { background: none; padding: 0; font-size: 0.85rem; }
  
  /* Compact, bordered, horizontally-scrollable tables (task box + docs view). */
  .sql-task table, .doc-view table {
    border-collapse: collapse;
    margin: 0.5rem 0 0.9rem;
    font-size: 0.82rem;
  }
  .sql-task th, .sql-task td,
  .doc-view th, .doc-view td {
    border: 1px solid var(--line);
    padding: 0.3rem 0.5rem;
    text-align: left;
    white-space: nowrap;      /* keep cells one line; the box scrolls instead */
    vertical-align: top;
  }
  .sql-task thead th, .doc-view thead th { background: var(--bg); font-weight: 600; }
  
  /* --- Chat interface (left panel, chatbot conditions) ---------------------- */
  .chat-history {
    flex: 1 1 auto;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .chat-bubble {
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    max-width: 85%;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;   /* undo jsPsych's centered .jspsych-content */
  }
  .chat-user { align-self: flex-end; background: var(--user-bubble); }
  .chat-assistant { align-self: flex-start; background: var(--bot-bubble); }
  .chat-pending { color: var(--ink-soft); font-style: italic; }
  .chat-error { background: #f5e7e7; color: var(--error); }
  
  .chat-input-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
  .chat-input {
    flex: 1 1 auto;
    font: inherit;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    resize: vertical;
    min-height: 3.25rem;
  }
  .chat-send { white-space: nowrap; }
  
  /* --- Documentation view (left panel, documentation condition) ------------- */
  .doc-view {
    flex: 1 1 auto;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1rem;
    text-align: left;   /* undo jsPsych's centered .jspsych-content */
  }
  .doc-view h1, .doc-view h2, .doc-view h3 { margin-top: 1rem; }
  .doc-view code, .doc-view pre { font-family: var(--mono); background: var(--bg); }
  .doc-view pre { padding: 0.75rem; border-radius: 6px; overflow-x: auto; }
  
  /* --- Demographics form grid ----------------------------------------------- */
  .form-grid {
    display: grid;
    gap: 0.75rem;
    max-width: 520px;
    margin: 1rem auto;
    text-align: left;
  }
  .form-grid label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 500; }
  .form-grid input, .form-grid select {
    font: inherit; padding: 0.45rem; border: 1px solid var(--line);
    border-radius: 6px; background: var(--surface);
  }
  
  /* --- Accessibility: respect reduced motion -------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }
  
  /* --- Free-text answer (pre-/post-test items) ------------------------------ */
  .transfer-label {
    display: block;
    max-width: min(94vw, 1280px);
    margin: 1rem auto 0;
    text-align: left;
    font-weight: 600;
  }
  /* The survey-html-form plugin wraps our html in its own divs that have a
     narrower max-width. Override them so the textarea stays as wide as the task
     description above it (both use the same max-width: min(94vw, 1280px)). */
  .jspsych-survey-html-form,
  .jspsych-survey-html-form form {
    max-width: min(94vw, 1280px) !important;
    width: 100%;
  }
  .transfer-label .sql-answer {
    display: block;
    width: 100%;              /* fill the label, which already matches the preamble */
    box-sizing: border-box;
    margin-top: 0.5rem;
    font-weight: 400;
    min-height: 40vh;
  }
  .transfer-label .knowledge-answer { min-height: 22vh; }

  /* --- Pre-/post-test item card ---------------------------------------------- */
  .knowledge-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    margin: 1rem 0;
  }
  .knowledge-item pre {
    font-family: var(--mono);
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 0.7rem 0.8rem;
    border-radius: 6px;
    overflow-x: auto;
  }
  .knowledge-item code { font-family: var(--mono); background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 3px; }
  .knowledge-item pre code { background: none; padding: 0; }

  /* Persistent, deliberately non-dominant info banner (Adjustment 5). */
  .info-banner {
    background: #f0f1f3;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
    font-size: 0.88rem;
    margin: 0.75rem 0;
  }

  /* --- Shared dataset table --------------------------------------------------- */
  .dataset-table {
    border-collapse: collapse;
    margin: 0.5rem 0 0.25rem;
    font-size: 0.82rem;
  }
  .dataset-table th, .dataset-table td {
    border: 1px solid var(--line);
    padding: 0.3rem 0.5rem;
    text-align: left;
    white-space: nowrap;
  }
  .dataset-table thead th, .dataset-table tbody th { background: var(--bg); font-weight: 600; }
  .dataset-caption { color: var(--ink-soft); font-size: 0.8rem; margin: 0 0 0.75rem; }

  /* --- Intervention: single-panel Control layout + time-gated solution ------- */
  .treatment-wrap--single .panel-right { flex: 1 1 100%; }
  .solution-gate { margin-top: 1rem; }
  .solution-gate-btn { font-size: 0.9rem; }
  .solution-body {
    margin-top: 0.75rem;
    border-top: 1px dashed var(--line);
    padding-top: 0.75rem;
  }
  .empty-hint { color: var(--error); font-size: 0.88rem; text-align: right; margin: 0.25rem 0 0.5rem; }

  /* --- Questionnaire: compact Likert radio matrices --------------------------- */
  /* Construct matrices carry no headers; consecutive blocks are delimited by a
     horizontal line. (Demographics blocks still use their h3 headers.) */
  .likert-page { max-width: 900px; margin: 0 auto; text-align: left; }
  .likert-block { margin-bottom: 2rem; }
  .likert-block + .likert-block {
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
  }
  .likert-block h3 { margin-bottom: 0.25rem; }
  .likert-anchors { color: var(--ink-soft); font-size: 0.85rem; margin: 0 0 0.5rem; }
  .likert-matrix { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
  .likert-matrix th {
    font-weight: 600;
    color: var(--ink-soft);
    padding: 0.25rem 0.4rem;
    text-align: center;
  }
  .likert-matrix td { border-top: 1px solid var(--line); padding: 0.4rem; text-align: center; }
  .likert-matrix td.likert-item-text { text-align: left; max-width: 480px; }
  .likert-matrix input[type="radio"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
  .likert-matrix tr:hover td { background: var(--bg); }
  .item-anchors { color: var(--ink-soft); font-size: 0.85em; }

  /* --- Fullscreen/focus guard (Adjustment 1) ----------------------------------- */
  .guard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31, 36, 48, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }
  .guard-overlay--final { background: var(--bg); z-index: 10001; }
  .guard-modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 2rem;
    max-width: 480px;
    text-align: center;
  }
  .guard-modal h2 { margin-top: 0; }

  /* --- Chat: rendered assistant Markdown (code blocks, inline code) ----------- */
  .chat-codeblock {
    margin: 0.5rem 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #f4f6f8;
  }
  .chat-codeblock-lang {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 0.25rem 0.7rem;
  }
  .chat-codeblock pre {
    margin: 0;
    padding: 0.6rem 0.7rem;
    overflow-x: auto;
    white-space: pre;       /* code keeps its own layout; the block scrolls */
  }
  .chat-codeblock code {
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .chat-inline-code {
    font-family: var(--mono);
    font-size: 0.85em;
    background: var(--bg);
    border: 1px solid var(--line);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
  }

  /* --- Pre-/post-test: multiple-choice options -------------------------------- */
  .mc-options {
    border: none;
    margin: 1rem auto 0;
    padding: 0;
    max-width: min(94vw, 1280px);
    text-align: left;
  }
  .mc-options legend { font-weight: 600; padding: 0 0 0.5rem; }
  .mc-option {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
  }
  .mc-option:hover { border-color: var(--accent); }
  .mc-option input[type="radio"] { accent-color: var(--accent); flex: 0 0 auto; }
  /* "Ich weiß es nicht" — visually set apart from the content options. */
  .mc-option.mc-dontknow { margin-top: 0.7rem; color: var(--ink-soft); font-style: italic; }

  /* Answer instruction inside a learning task (what to write in the box). */
  .answer-instruction {
    margin: 0.9rem 0 0;
    padding: 0.5rem 0.7rem;
    background: var(--bg);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-weight: 500;
  }

  /* Delimiter line between IT-Mindfulness subscales (AD/MP/ON/OP). */
  .likert-matrix tr.subscale-start td { border-top: 2px solid #c3cad4; }

  /* Treatment check at the top of each questionnaire page. */
  .treatment-check .mc-option { max-width: 720px; }
  .treatment-check-question { margin: 0 0 0.6rem; }

  /* Open feedback box (demographics). */
  .feedback-box {
    width: 100%;
    max-width: 720px;
    font: inherit;
    padding: 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    resize: vertical;
  }

  /* --- Keep buttons off the bottom edge of the window -------------------------- */
  /* Space below every jsPsych page so continue/submit buttons never touch the
     window border; extra bottom margin on the buttons themselves. */
  #jspsych-target .jspsych-content { padding-bottom: 3.5rem; }
  .jspsych-btn { margin-bottom: 1.5rem; }
  .submit-answer { margin-bottom: 0.35rem; }