/* =============================================================================
   style.css — Chat
   =============================================================================
   Tokens og primitiver er KOPIERET fra dida.dk's rolig.css (Rolig design
   system), så appen ser ud som resten, men ikke afhænger af dida.dk.
   Retter du et token i rolig.css, så ret det også her, hvis det skal følge med.
   Regler som i dida.dk: kun oklch, logiske properties, ingen emojis.
   ============================================================================= */

@import url('/fonts/fonts.css');

:root {
  color-scheme: light;

  --ink:    oklch(0.20 0.012 250);
  --ink-2:  oklch(0.38 0.010 250);
  --ink-3:  oklch(0.52 0.008 250);
  --ink-4:  oklch(0.64 0.006 250);

  --paper:   oklch(0.990 0.004 85);
  --paper-2: oklch(0.970 0.005 85);
  --paper-3: oklch(0.940 0.006 85);

  --rule:     oklch(0.905 0.006 85);
  --rule-2:   oklch(0.855 0.007 85);
  --rule-ctl: oklch(0.64 0.007 85);

  --green: oklch(0.52 0.13 155);
  --amber: oklch(0.66 0.14 70);
  --amber-text: oklch(0.50 0.11 70);
  --red:   oklch(0.55 0.18 27);

  /* Chats egen accent: dæmpet violet */
  --accent: oklch(0.50 0.13 290);
  --on-accent: var(--paper);
  --accent-text: var(--accent);
  --accent-subtle: color-mix(in oklch, var(--accent) 10%, transparent);

  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-s: 5px; --r-m: 8px; --r-l: 10px; --r-xl: 14px; --r-full: 9999px;
  --shadow-s: 0 1px 2px oklch(0 0 0 / 4%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper-2);
  color: var(--ink);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body { min-block-size: 100dvh; }

a { color: var(--accent-text); }

h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hi { inline-size: 1em; block-size: 1em; vertical-align: -0.125em; flex-shrink: 0; }

[hidden] { display: none !important; }

/* -----------------------------------------------------------------------------
   Side og topbar
   ----------------------------------------------------------------------------- */

.page {
  max-inline-size: 640px;
  margin-inline: auto;
  padding: 0 var(--s-4) var(--s-7);
  min-block-size: 100dvh;
  background: var(--paper);
  border-inline: 1px solid var(--rule);

  &.wide { max-inline-size: 1040px; }
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--s-5);
  font-size: 13px;

  .spacer { flex: 1; }
}

.brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  .hi { color: var(--accent); }
}

.bar-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  border-radius: var(--r-s);
  cursor: pointer;
  text-decoration: none;
  min-block-size: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  &:hover { color: var(--ink); background: var(--paper-2); }
  &[aria-current="page"] { color: var(--accent-text); background: var(--accent-subtle); }
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font: 600 11px var(--mono);
  letter-spacing: 0;
}

.kicker {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-block-end: var(--s-3);
  display: flex;
  align-items: center;
  gap: 10px;

  &::before { content: ""; inline-size: 20px; block-size: 1px; background: var(--accent); }
}

.lead { color: var(--ink-2); margin-block: var(--s-2) var(--s-5); max-inline-size: 60ch; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.small { font-size: 12px; }

section + section, form + section { margin-block-start: var(--s-6); }

/* -----------------------------------------------------------------------------
   Knapper og felter (fra rolig.css)
   ----------------------------------------------------------------------------- */

.btn {
  inline-size: 100%;
  block-size: 48px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 14px var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.08s;

  &:hover { background: color-mix(in oklch, var(--accent), black 8%); }
  &:active { transform: scale(0.99); }
  &:disabled { opacity: 0.45; cursor: not-allowed; }
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-2);

  &:hover { background: var(--paper-2); border-color: var(--ink-3); }
}

.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid color-mix(in oklch, var(--red) 40%, transparent);

  &:hover { background: color-mix(in oklch, var(--red) 8%, transparent); }
}

.btn-small {
  block-size: 36px;
  inline-size: auto;
  font-size: 13px;
  padding-inline: 14px;
  border-radius: var(--r-s);
}

.row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }

label.field {
  display: block;
  margin-block-end: var(--s-4);

  > span {
    display: block;
    font: 500 11px var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-2);
    margin-block-end: 6px;
  }

  > small { display: block; color: var(--ink-3); font-size: 12px; margin-block-start: 4px; }
}

.text-input, textarea.text-input, select.text-input {
  inline-size: 100%;
  padding: 11px 13px;
  font: 14px/1.5 var(--sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-ctl);
  border-radius: var(--r-m);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;

  &::placeholder { color: var(--ink-4); }
  &:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent); }
}

textarea.text-input { resize: vertical; min-block-size: 96px; }
@supports (field-sizing: content) { textarea.text-input { field-sizing: content; } }

.pin-input { font-family: var(--mono); letter-spacing: 0.4em; font-size: 18px; max-inline-size: 160px; }

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 36px;
  cursor: pointer;

  input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); }
}

/* Faner (fx "Jeg er ny" / "Jeg har et kaldenavn") */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  margin-block-end: var(--s-5);

  button {
    flex: 1;
    min-block-size: 40px;
    border: none;
    background: transparent;
    border-radius: var(--r-m);
    font: 600 13px var(--sans);
    color: var(--ink-2);
    cursor: pointer;

    &[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-s); }
  }
}

/* Beskeder */
.alert {
  padding: 12px 14px;
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: 13px;
  margin-block-end: var(--s-4);
  background: color-mix(in oklch, var(--red) 8%, transparent);
  border-inline-start: 3px solid var(--red);
  color: var(--red);

  &.info {
    background: var(--accent-subtle);
    border-inline-start-color: var(--accent);
    color: var(--ink-2);
  }
}

/* -----------------------------------------------------------------------------
   Kort og lister
   ----------------------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  padding: var(--s-4);

  & + .card { margin-block-start: var(--s-3); }
}

.list { list-style: none; }

.list-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  min-block-size: 56px;

  & + & { margin-block-start: var(--s-2); }
  &:hover { border-color: var(--rule-2); background: var(--paper-2); }

  .grow { flex: 1; min-inline-size: 0; }
  .title { font-weight: 600; }
  .meta { font: 500 11px var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
}

li.list-item + li.list-item { margin-block-start: var(--s-2); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--rule-2);
  color: var(--ink-3);
  white-space: nowrap;

  &.waiting { color: var(--amber-text); border-color: color-mix(in oklch, var(--amber) 50%, transparent); background: color-mix(in oklch, var(--amber) 10%, transparent); }
  &.answered, &.open { color: var(--green); border-color: color-mix(in oklch, var(--green) 40%, transparent); background: color-mix(in oklch, var(--green) 8%, transparent); }
  &.rejected { color: var(--red); border-color: color-mix(in oklch, var(--red) 35%, transparent); }
  &.new { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
}

/* Tekst, som læreren eller eleven har skrevet: linjeskift bevares */
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }

details.fold {
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--paper);

  & + & { margin-block-start: var(--s-2); }

  summary {
    cursor: pointer;
    padding: var(--s-3) var(--s-4);
    font-weight: 600;
    min-block-size: 48px;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    list-style: none;

    &::-webkit-details-marker { display: none; }
    &::before { content: "+"; font-family: var(--mono); color: var(--accent-text); inline-size: 1ch; }
  }

  &[open] summary::before { content: "–"; }

  .fold-body { padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 1ch + var(--s-2)); }
}

/* -----------------------------------------------------------------------------
   Spørgsmål og svar (eleven)
   ----------------------------------------------------------------------------- */

.q {
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--paper);
  overflow: hidden;

  & + & { margin-block-start: var(--s-3); }
  &.is-new { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }

  .q-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4) 0;
    font: 500 11px var(--mono);
    color: var(--ink-3);
  }

  .q-text { padding: var(--s-2) var(--s-4) var(--s-3); font-weight: 600; }

  .q-reply {
    border-block-start: 1px solid var(--rule);
    background: var(--paper-2);
    padding: var(--s-3) var(--s-4);

    .who { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text); margin-block-end: 4px; }

    .basis {
      margin-block-start: var(--s-3);
      padding-block-start: var(--s-2);
      border-block-start: 1px dashed var(--rule-2);

      ul { padding-inline-start: var(--s-5); font-size: 13px; color: var(--ink-2); }
    }

    .source {
      font-size: 13px;
      color: var(--ink-2);
      margin-block-start: 4px;

      summary {
        cursor: pointer;
        min-block-size: 32px;
        display: flex;
        align-items: center;
        gap: 6px;
        list-style: none;

        &::-webkit-details-marker { display: none; }
        &::after { content: "Vis tekst"; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); }
      }

      &[open] summary::after { content: "Skjul"; }
      .prose { padding: var(--s-2) var(--s-3); background: var(--paper); border-radius: var(--r-m); margin-block-start: 4px; }
    }

    .ai-note { margin-block-start: var(--s-2); }

    /* Sparring: forslag til et spørgsmål, eleven kan sende til læreren */
    .handoff {
      margin-block-start: var(--s-3);
      padding: var(--s-3);
      border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
      border-radius: var(--r-m);
      background: var(--paper);

      &.done { border-style: dashed; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
      .field { margin-block-end: var(--s-2); }
    }
  }

  &.is-handoff { border-inline-start: 3px solid var(--accent); }
}

.counter { font: 500 12px var(--mono); color: var(--ink-3); }

.empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-3);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-l);
}

/* -----------------------------------------------------------------------------
   Lærerpanelet
   ----------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
  margin-block-end: var(--s-6);

  .stat {
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
    padding: var(--s-3) var(--s-4);
    background: var(--paper);

    b { display: block; font: 600 24px var(--mono); }
    span { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
  }
}

.queue-item {
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--paper);
  padding: var(--s-4);

  & + & { margin-block-start: var(--s-4); }

  .q-meta { font: 500 11px var(--mono); color: var(--ink-3); margin-block-end: var(--s-2); }
  .q-text { font-weight: 600; font-size: 15px; margin-block-end: var(--s-4); }
  .options { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; margin-block: var(--s-2) var(--s-4); }
}

table.data {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 13px;

  th {
    text-align: start;
    font: 500 10px var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    padding: var(--s-2) var(--s-3);
    border-block-end: 1px solid var(--rule-2);
  }

  td { padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--rule); vertical-align: middle; }
}

.table-wrap { overflow-x: auto; }

.joinlink {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  flex-wrap: wrap;

  img { inline-size: 132px; block-size: 132px; image-rendering: pixelated; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--paper); }
  code { font: 600 15px var(--mono); }
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
  align-items: flex-end;

  .field { margin-block-end: 0; min-inline-size: 140px; }
  .grow { flex: 1; min-inline-size: 200px; }
  .btn { margin-block-end: 6px; }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--s-4);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}