/* Opinion AI — moderne, rent designsystem.
   Aksentfargene (oransje, blå, aqua) er hentet fra Opinions palett, men
   typografi og flater er frittstående: Inter + Plus Jakarta Sans, lyse nøytrale
   flater, mørk "ink" som primærfarge. Branding-variablene (--orange, --bg,
   --bubble-* osv.) beholder navnene sine — de overstyres per prosjekt. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Aksenter (fra Opinions palett) */
  --orange: #F16548;
  --orange-deep: #D9532F;
  --blue: #1C7CA1;
  --blue-deep: #166383;
  --aqua: #71C3B3;

  /* Nøytraler */
  --bg: #F7F7F5;
  --surface: #FFFFFF;
  --ink: #191B20;
  --ink-soft: #2C2F37;
  --grey: #43464D;
  --grey-soft: #878B94;
  --line: #E8E8E5;
  --line-strong: #D8D8D4;
  --hover: #F2F2F0;
  --danger: #D64530;

  /* Myke tinter */
  --tint-green-bg: #E4F4EE;
  --tint-green-ink: #147259;
  --tint-amber-bg: #FBF0D9;
  --tint-amber-ink: #96701A;
  --tint-orange-bg: #FDEAE5;
  --tint-orange-ink: #C4472B;
  --tint-aqua-bg: #E8F5F2;
  --tint-aqua-ink: #1F7A68;

  --font-head: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(17, 18, 22, .04), 0 6px 20px rgba(17, 18, 22, .05);
  --shadow-lift: 0 2px 6px rgba(17, 18, 22, .06), 0 16px 40px rgba(17, 18, 22, .12);

  /* Lys hero-flate med en diskré glød i aksentfargene */
  --hero-light:
    radial-gradient(900px 380px at 92% -30%, rgba(241, 101, 72, .13), transparent 62%),
    radial-gradient(700px 360px at -8% 130%, rgba(113, 195, 179, .13), transparent 58%),
    var(--surface);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--bg);
  color: var(--grey);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(241, 101, 72, .22); }

.container { max-width: 1060px; margin: 0 auto; padding: 0 22px 90px; }

h1, h2, h3, .brand { font-family: var(--font-head); }
h1 { font-size: 1.8rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.25; margin: 34px 0 8px; }
h2 { font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin: 0 0 14px; }
h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.sub { color: var(--grey-soft); margin: 0 0 26px; max-width: 62ch; }

/* ---- Topplinje ----
   Tre soner: logo + aktiv organisasjon til venstre, navigasjon som tekstlenker
   til høyre, avatar med kontomeny ytterst. */
header.site {
  display: flex; align-items: center; justify-content: flex-start;
  padding: 26px 0 20px; gap: 10px;
}
header.site #userArea, header.site #lifecycleArea, header.site .lang-select { margin-left: auto; }
header.site #lifecycleArea ~ .lang-select, header.site #userArea ~ .lang-select { margin-left: 0; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-decoration: none; color: var(--ink); }
.brand-img { height: 38px; width: auto; display: block; }
.brand-tag { font-family: var(--font-body); font-weight: 500; font-size: .68rem; color: var(--grey-soft); letter-spacing: .02em; }

/* Aktiv organisasjon ved logoen: Opinion-logo / organisasjonsnavn */
.org-area { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.org-divider { color: var(--line-strong); font-size: 1.35rem; font-weight: 300; user-select: none; }
.org-label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.org-select {
  width: auto; max-width: 210px; padding: 6px 8px;
  border: none; background: transparent; border-radius: 8px;
  font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.org-select:hover { background: var(--hover); }
.org-select:focus { border: none; box-shadow: 0 0 0 3px rgba(28, 124, 161, .16); }

/* Navigasjon: rolige tekstlenker med aktiv markering */
.top-nav { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.top-nav a {
  text-decoration: none; color: var(--grey); font-size: .88rem; font-weight: 500;
  padding: 7px 12px; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.top-nav a:hover { background: var(--hover); color: var(--ink); }
.top-nav a.active { background: var(--hover); color: var(--ink); font-weight: 600; }

/* ---- Hero (admin-dashbord): lys flate med diskré glød ---- */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero-light);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 42px 40px;
  margin: 6px 0 30px;
}
/* De gamle bokeh-dekorasjonene er pensjonert. */
.hero::before, .hero::after, .hero .dot { display: none; }
.hero h1 { color: var(--ink); margin: 0 0 10px; font-size: 2rem; max-width: 22ch; }
.hero p { margin: 0; max-width: 54ch; color: var(--grey); }
.hero .row { margin-top: 24px; }

/* ---- Kort ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  margin-bottom: 18px;
}

.banner { border-radius: var(--radius-sm); padding: 13px 18px; margin: 14px 0; font-size: .92rem; }
.banner.warn { background: #FCF4E4; color: #8A6516; border: 1px solid #F0E2C0; }

/* ---- Skjema ---- */
label { display: block; font-weight: 600; font-size: .84rem; color: var(--ink); margin: 16px 0 6px; }
label .hint { font-weight: 400; color: var(--grey-soft); }
input[type=text], input[type=password], input[type=email], textarea, select {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .95rem; background: #fff; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(28, 124, 161, .16);
}
input::placeholder, textarea::placeholder { color: var(--grey-soft); }
textarea { resize: vertical; min-height: 68px; }

/* ---- Knapper ---- */
button {
  font-family: var(--font-body); font-weight: 600; font-size: .88rem;
  letter-spacing: 0; cursor: pointer;
  border: none; border-radius: var(--radius-sm); padding: 10px 18px;
  background: var(--orange); color: #fff;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
button:hover { background: var(--orange-deep); box-shadow: 0 4px 14px rgba(241, 101, 72, .3); }
button:active { box-shadow: none; }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button.ghost { background: transparent; color: var(--blue); border: 1px solid rgba(28, 124, 161, .45); }
button.ghost:hover { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(28, 124, 161, .25); }
button.subtle { background: var(--tint-aqua-bg); color: var(--tint-aqua-ink); }
button.subtle:hover { background: #D8EEE8; box-shadow: none; }
button.danger { background: transparent; color: var(--danger); border: 1px solid rgba(214, 69, 48, .35); }
button.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 4px 14px rgba(214, 69, 48, .25); }
button.small { padding: 7px 14px; font-size: .82rem; }
/* Hovedknapp på fargede hero-flater: hvit med flatens primærfarge som tekst. */
button.onhero { background: #fff; color: var(--orange-deep); }
button.onhero:hover { background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.topic-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.topic-row .q { flex: 2; }
.topic-row .p { flex: 1.4; }
.topic-row button { flex: none; }

/* ---- Kompakte knapper ---- */
button.mini { padding: 5px 12px; font-size: .76rem; }

/* ---- Nummererte designseksjoner (à la Tellet) ---- */
details.d-sec { border-top: 1px solid var(--line); }
details.d-sec:last-of-type { border-bottom: 1px solid var(--line); }
details.d-sec > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
  padding: 14px 4px; font-family: var(--font-head); font-weight: 600; color: var(--ink);
}
details.d-sec > summary::-webkit-details-marker { display: none; }
details.d-sec > summary .sec-num {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  background: var(--blue); color: #fff; font-size: .76rem; font-family: var(--font-body); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
details.d-sec > summary .sec-hint { font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--grey-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.d-sec > summary::after { content: '▾'; margin-left: auto; color: var(--grey-soft); transition: transform .15s ease; }
details.d-sec[open] > summary::after { transform: rotate(180deg); }
/* Full bredde for innholdet — innrykket under nummer-brikken stjal for mye plass. */
details.d-sec > .sec-body { padding: 2px 4px 22px; }
.save-bar {
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(transparent, var(--surface) 35%);
  padding: 14px 0 4px; display: flex; gap: 12px; align-items: center;
}
.save-bar button { flex: 1; }

/* ---- Spørsmålskort med media (Design-fanen) ---- */
.q-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 12px; background: var(--bg); }
.q-group-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.q-group-head .gTitle { flex: 1; min-width: 160px; padding: 8px 11px; font-size: .88rem; font-weight: 600; }
.g-rand { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: .82rem; color: var(--grey); cursor: pointer; white-space: nowrap; }
.g-rand input { width: auto; }
.group-topics { min-height: 12px; }
.topic-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 10px 8px; margin-bottom: 8px; background: #fff; }
.topic-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.dragHandle { cursor: grab; color: var(--grey-soft); font-size: 1.05rem; line-height: 1; user-select: none; padding: 1px 3px; border-radius: 6px; }
.dragHandle:hover { color: var(--blue); background: var(--tint-aqua-bg); }
.dragHandle:active { cursor: grabbing; }
.topic-num { font-family: var(--font-body); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-soft); }
.topic-card.dragging { opacity: .45; outline: 2px dashed var(--blue); }
.topic-card textarea.q { min-height: 62px; font-size: .92rem; margin-bottom: 6px; }
.topic-card .topic-row { margin-bottom: 4px; }
.topic-card .topic-row input { padding: 8px 11px; font-size: .85rem; }
.media-item { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.media-item img, .media-item .media-ico {
  height: 38px; width: 38px; flex: none; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); cursor: zoom-in;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hover); font-size: 1.05rem; text-decoration: none;
}
.media-item input { flex: 1; padding: 6px 10px; font-size: .82rem; }
button.icon-btn {
  padding: 6px 10px; font-size: .82rem; line-height: 1;
  background: transparent; color: var(--grey-soft); border: 1px solid var(--line-strong);
}
button.icon-btn:hover { background: var(--hover); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.media-menu-wrap { position: relative; display: inline-block; }
.media-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 10;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 130px;
}
.media-menu button { background: transparent; color: var(--grey); text-align: left; padding: 7px 12px; font-size: .82rem; font-weight: 500; box-shadow: none; }
.media-menu button:hover { background: var(--hover); color: var(--ink); box-shadow: none; }

/* ---- Media i chat ---- */
.bubble.media-bubble { padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; align-self: flex-start; box-shadow: var(--shadow); }
.bubble.media-bubble img.single { display: block; max-width: min(300px, 100%); max-height: 260px; border-radius: 10px; cursor: zoom-in; }
.bubble.media-bubble video { display: block; max-width: min(380px, 100%); border-radius: 10px; }
.bubble.media-bubble audio { display: block; width: min(320px, 100%); }
.bubble.media-bubble .img-label { display: block; font-size: .78rem; color: var(--grey-soft); padding: 6px 4px 2px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 6px; width: min(350px, 78vw); }
.media-grid img { width: 100%; height: 105px; object-fit: cover; border-radius: 8px; cursor: zoom-in; transition: transform .12s ease; }
.media-grid img:hover { transform: scale(1.03); }
.transcript-line img.inline-media, .transcript-line video.inline-media { display: block; max-width: 300px; border-radius: 8px; border: 1px solid var(--line); margin-top: 6px; cursor: zoom-in; }
.transcript-line audio.inline-media { display: block; width: 280px; margin-top: 6px; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(17, 18, 22, .88);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; animation: lb-fade .15s ease both;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox figcaption { color: rgba(255, 255, 255, .8); font-size: .9rem; margin-top: 10px; }

/* ---- Merkelapper ---- */
.pill {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.pill.prevalence { background: var(--tint-aqua-bg); color: var(--tint-aqua-ink); }

/* ---- Studieliste ---- */
.project-item { display: block; text-decoration: none; color: inherit; }
.project-item .card { transition: box-shadow .18s ease, border-color .18s ease; margin-bottom: 14px; }
.project-item:hover .card { box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.project-item strong { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--ink); letter-spacing: -.01em; }
.meta { color: var(--grey-soft); font-size: .85rem; }

/* ---- Faner ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 4px 0 22px; overflow-x: auto; }
.tabs button {
  background: transparent; color: var(--grey-soft); border-radius: 8px 8px 0 0;
  padding: 10px 16px; font-size: .88rem; font-weight: 500; box-shadow: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button:hover { background: var(--hover); color: var(--ink); box-shadow: none; }
.tabs button.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--orange); }

/* ---- Filterbrikker ---- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chips button {
  background: var(--surface); color: var(--grey); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 6px 15px; font-size: .82rem; font-weight: 500; box-shadow: none;
}
.chips button:hover { box-shadow: none; border-color: var(--ink); color: var(--ink); background: var(--surface); }
.chips button.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---- Test-chat (Design-fanen) ----
   Skjemaet er hovedsaken og får mesteparten av bredden; test-chatten er en
   smal, klebrig kolonne ved siden av. På smalere skjermer legges den under. */
.design-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
@media (max-width: 980px) { .design-grid { grid-template-columns: 1fr; } }
.test-chat { display: flex; flex-direction: column; height: min(600px, calc(100vh - 90px)); position: sticky; top: 14px; padding: 20px; }
.test-chat .messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 10px; }
.test-chat .bubble { max-width: 92%; font-size: .9rem; padding: 10px 14px; }
.test-chat form { display: flex; gap: 8px; margin-top: 8px; }
.test-chat textarea { flex: 1; min-height: 44px; max-height: 120px; }

/* ---- Kategorier og innsikt ---- */
.cat { display: inline-block; background: var(--tint-amber-bg); border: 1px solid #EEDFB5; color: var(--tint-amber-ink); border-radius: 999px; padding: 4px 13px; font-size: .82rem; margin: 0 6px 8px 0; }
.cat b { color: var(--tint-orange-ink); }
.answer-item { border-top: 1px solid var(--line); padding: 10px 0; }
.answer-item:first-child { border-top: none; }
.snippet-score { font-variant-numeric: tabular-nums; color: var(--grey-soft); font-size: .82rem; }
.search-grid { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .search-grid { grid-template-columns: 1fr; } }
.history-item { display: block; width: 100%; text-align: left; background: var(--surface); color: var(--grey); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-body); font-weight: 400; font-size: .84rem; margin-bottom: 8px; box-shadow: none; }
.history-item:hover { border-color: var(--line-strong); box-shadow: none; background: var(--hover); }
.history-item.active { border-color: var(--ink); background: var(--hover); color: var(--ink); }
.search-answer { background: var(--tint-aqua-bg); border-radius: var(--radius); padding: 18px 22px; white-space: pre-wrap; color: var(--ink-soft); }

details.q-acc { border-top: 1px solid var(--line); padding: 4px 0; }
details.q-acc summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--ink); list-style: none; display: flex; gap: 10px; align-items: baseline; }
details.q-acc summary::before { content: '▸'; color: var(--orange); transition: transform .15s ease; }
details.q-acc[open] summary::before { transform: rotate(90deg); }
details.q-acc .q-num { color: var(--orange); font-family: var(--font-head); }

.pill.voice { background: var(--tint-orange-bg); color: var(--tint-orange-ink); }
.pill.q-high { background: var(--tint-green-bg); color: var(--tint-green-ink); }
.pill.q-medium { background: var(--tint-amber-bg); color: var(--tint-amber-ink); }
.pill.q-low { background: var(--hover); color: var(--grey-soft); }
.pill.draft { background: var(--hover); color: var(--grey); }
.pill.published { background: var(--tint-green-bg); color: var(--tint-green-ink); }
.pill.completed-project { background: var(--blue); color: #fff; }

/* ---- Nøkkeltall ---- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 18px; }
.stats.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .stats.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stats, .stats.cols-4 { grid-template-columns: 1fr; } }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px 14px; text-align: left;
}
.stat .num { font-family: var(--font-head); font-weight: 700; font-size: 2rem; letter-spacing: -.02em; line-height: 1.1; display: block; color: var(--ink); }
.stat.c-blue .num { color: var(--blue); }
.stat.c-orange .num { color: var(--orange); }
.stat.c-aqua .num { color: var(--tint-aqua-ink); }
.stat .lbl { font-size: .76rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-soft); }
.stat .bar { width: 30px; height: 3px; border-radius: 2px; margin: 10px 0 8px; }
.stat.c-blue .bar { background: var(--blue); }
.stat.c-orange .bar { background: var(--orange); }
.stat.c-aqua .bar { background: var(--aqua); }

/* ---- Tabell ---- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
table select { width: auto; min-width: 150px; padding: 6px 8px; }
th { text-align: left; color: var(--grey-soft); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; }
td { padding: 11px 10px; border-top: 1px solid var(--line); vertical-align: top; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--hover); }

.share-box { display: flex; gap: 8px; flex-wrap: wrap; }
.share-box input { flex: 1; min-width: 220px; font-size: .9rem; color: var(--grey-soft); background: var(--bg); }

/* ---- Branding-forhåndsvisning (Design-fanen) ---- */
.brand-preview {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px;
  margin-top: 10px; padding: 14px; border-radius: var(--radius-sm);
  background: var(--bp-bg, var(--bg)); border: 1px solid var(--line);
}
.bp-hero {
  display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: flex-start;
  background: var(--bp-primary, var(--orange)); color: var(--bp-on-primary, #fff);
  border-radius: 12px; padding: 18px 16px;
}
.bp-hero strong { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.bp-hero span { font-size: .78rem; opacity: .88; }
.bp-hero button { background: var(--bp-on-primary, #fff); color: var(--bp-primary, var(--orange)); font-size: .74rem; padding: 7px 13px; pointer-events: none; }
.bp-logo { height: 22px; max-width: 140px; object-fit: contain; align-self: flex-start; }
.bp-chat { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bp-bubble { font-size: .78rem; padding: 8px 12px; max-width: 88%; }
.bp-bubble.bp-a { background: var(--bp-assistant, var(--surface)); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; align-self: flex-start; color: var(--grey); }
.bp-bubble.bp-u { background: var(--bp-user, var(--blue)); color: var(--bp-on-user, #fff); border-radius: 12px 12px 4px 12px; align-self: flex-end; }
@media (max-width: 640px) { .brand-preview { grid-template-columns: 1fr; } }

/* ---- Chat (respondent) ---- */
.chat-page { display: flex; flex-direction: column; min-height: 100dvh; }
.chat-page .container { flex: 1; display: flex; flex-direction: column; max-width: 740px; width: 100%; }

/* Uten egen branding: samme lyse, luftige flate som dashbordet, med mørk tekst.
   Med egen prosjektbranding: flat flate i prosjektets primærfarge (--orange
   settes av interview.js), med automatisk valgt tekstfarge (--on-primary).
   --hero-fg/-soft gjør at tekstreglene under dekker begge tilfellene. */
.welcome-hero {
  --hero-fg: var(--on-primary, #fff);
  --hero-fg-soft: var(--on-primary-soft, rgba(255, 255, 255, .82));
  position: relative; overflow: hidden;
  background: var(--orange); color: var(--hero-fg);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 38px 34px;
}
/* Hovedknappen på kortet: hvit med kortets primærfarge (også med egen branding). */
.welcome-hero .onhero { background: #fff; color: var(--orange-deep); }
.welcome-hero .onhero:hover { background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.welcome-hero h1 { color: var(--hero-fg); margin: 0 0 10px; font-size: 1.7rem; position: relative; z-index: 1; max-width: 20ch; }
.welcome-hero p { position: relative; z-index: 1; color: var(--hero-fg-soft); max-width: 48ch; }
.welcome-hero .meta-note { font-size: .85rem; color: var(--hero-fg-soft); }
.welcome-hero .meta-note a { color: var(--hero-fg); }
.brand-logo { height: 40px; max-width: 220px; object-fit: contain; }
.welcome-hero button { position: relative; z-index: 1; margin-top: 10px; }

#chat { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px 0 20px; }
.bubble {
  max-width: 84%; padding: 12px 17px;
  white-space: pre-wrap; word-wrap: break-word;
  animation: rise .3s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Boblefargene kan overstyres av prosjektbranding (settes som inline-variabler
   på rotelementet av interview.js). */
.bubble.assistant {
  background: var(--bubble-assistant, var(--surface)); border: 1px solid var(--line);
  border-radius: 16px 16px 16px 5px;
  align-self: flex-start; box-shadow: var(--shadow); color: var(--grey);
}
.bubble.user {
  background: var(--bubble-user, var(--blue)); color: var(--on-bubble-user, #fff);
  border-radius: 16px 16px 5px 16px;
  align-self: flex-end;
}

.typing { display: flex; gap: 5px; align-self: flex-start; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 5px; box-shadow: var(--shadow); }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; background: var(--aqua); }
.typing i:nth-child(3) { animation-delay: .3s; background: var(--blue); }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }

#composer {
  position: sticky; bottom: 0;
  background: linear-gradient(transparent, var(--bg) 30%);
  padding: 14px 0 max(24px, env(safe-area-inset-bottom, 0px));
  display: flex; gap: 10px;
}
/* 16px hindrer at iOS auto-zoomer inn når feltet får fokus. */
#composer textarea { flex: 1; min-height: 50px; max-height: 170px; border-radius: 14px; box-shadow: var(--shadow); font-size: 16px; }
#composer button { align-self: flex-end; }

/* Respondent-chatten på mobil: composeren skal helt ned, og knappene skal ikke spise skrivefeltet. */
.chat-page .container { padding-bottom: 0; }
@media (max-width: 520px) {
  .chat-page .container { padding-left: 14px; padding-right: 14px; }
  .bubble { max-width: 92%; padding: 12px 15px; }
  #composer { gap: 8px; }
  #composer button { padding: 11px 16px; }
  .welcome-hero { padding: 28px 22px; }
  .welcome-hero h1 { font-size: 1.45rem; }
  .welcome-hero .meta-note { font-size: .82rem; }
}

/* ---- Talemodus (respondent) ---- */
.hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
/* Sekundærknapp kun når taleknappen faktisk vises — en skjult søsken skal ikke
   degradere «Start intervjuet» til omriss-stil på rene chat-studier. */
.hero-actions .onhero:not([hidden]) + .onhero { background: transparent; color: var(--hero-fg); border: 1px solid var(--hero-fg-soft); }
.hero-actions .onhero:not([hidden]) + .onhero:hover { background: rgba(255, 255, 255, .14); box-shadow: none; }

.voice-stage {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0 2px;
  background: linear-gradient(var(--bg) 78%, transparent);
}
.voice-stage canvas { width: 176px; height: 176px; transition: width .5s ease, height .5s ease; }
.voice-stage.compact canvas { width: 116px; height: 116px; }
.voice-status { font-size: .85rem; color: var(--grey-soft); text-align: center; min-height: 1.4em; padding-bottom: 4px; }
.voice-status.live { color: var(--blue); }

/* Fokusvisning: kun moderatorens spørsmål, i ro. Respondentens egne ord vises
   ikke — å lese seg selv mens man snakker trekker oppmerksomheten ut av samtalen. */
.voice-focus {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 8px 0 28px; min-height: 38vh;
}
.focus-text {
  margin: 0; max-width: 30ch;
  font-family: var(--font-head); font-weight: 500;
  font-size: 1.42rem; line-height: 1.55; letter-spacing: -.01em; color: var(--ink);
  white-space: pre-wrap; word-wrap: break-word;
}
.focus-text .interrupted { opacity: .5; font-style: italic; font-size: 1rem; }
.focus-media:not(:empty) { margin-top: 24px; }
/* Vedlegget deler render med chatten, men skal ikke se ut som en boble her. */
.focus-media .bubble.media-bubble {
  background: none; border: none; box-shadow: none;
  border-radius: 0; padding: 0; max-width: 100%;
}
.focus-media img { display: block; margin: 0 auto; max-width: min(320px, 100%); max-height: 250px; border-radius: 12px; cursor: zoom-in; }
.focus-media video { display: block; margin: 0 auto; max-width: min(380px, 100%); border-radius: 12px; }
.focus-media audio { display: block; margin: 0 auto; width: min(320px, 100%); }
.focus-media .img-label { display: block; font-size: .78rem; color: var(--grey-soft); padding-top: 8px; }

.voice-bar {
  position: sticky; bottom: 0;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  background: linear-gradient(transparent, var(--bg) 40%);
  padding: 14px 0 max(20px, env(safe-area-inset-bottom, 0px));
}
.switch-bar { display: flex; justify-content: center; padding: 4px 0 0; }
.bubble .interrupted { opacity: .55; font-style: italic; }

@media (max-width: 520px) {
  .voice-stage canvas { width: 140px; height: 140px; }
  .voice-stage.compact canvas { width: 92px; height: 92px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .voice-bar { gap: 8px; }
  .voice-bar button { padding: 10px 12px; font-size: .82rem; }
  .focus-text { font-size: 1.22rem; max-width: 24ch; }
}

/* ---- Fremdrift (respondent) ---- */
.i-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 50; pointer-events: none; }
.i-progress i { display: block; height: 100%; width: 0; background: var(--orange); border-radius: 0 3px 3px 0; transition: width .8s ease; }

/* ---- Ventende endringer (publisert studie) ---- */
.pill.pending { background: var(--tint-amber-bg); color: var(--tint-amber-ink); }
.pending-banner { background: var(--tint-amber-bg); border: 1px solid #EEDFB5; color: var(--tint-amber-ink); }
.pending-banner strong { color: var(--tint-amber-ink); }

.done-note {
  text-align: center; padding: 26px;
  background: var(--tint-green-bg); border-radius: var(--radius);
  color: var(--tint-green-ink); font-family: var(--font-head); font-weight: 600;
  margin-bottom: 30px; animation: rise .4s ease both;
}

/* ---- Analyse ---- */
.theme { border-left: 3px solid var(--orange); padding: 6px 0 6px 18px; margin: 22px 0; }
.theme h3 { font-size: 1.02rem; }
blockquote {
  margin: 12px 0; padding: 12px 16px; background: var(--bg);
  border-left: 3px solid var(--aqua); border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  font-style: italic; font-size: .92rem; color: var(--grey);
}
.insight-box {
  background: var(--tint-aqua-bg); color: var(--ink-soft);
  border: 1px solid rgba(113, 195, 179, .35);
  border-radius: var(--radius); padding: 20px 24px; margin: 14px 0 20px;
}
.insight-box strong { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: .74rem; display: block; margin-bottom: 6px; color: var(--tint-aqua-ink); }
ul.tight { margin: 6px 0; padding-left: 20px; }
ul.tight li { margin: 5px 0; }
ul.tight li::marker { color: var(--orange); }

dialog {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  max-width: 780px; width: calc(100vw - 40px); padding: 28px;
  color: var(--grey);
}
dialog::backdrop { background: rgba(17, 18, 22, .45); }
.transcript-line { margin: 12px 0; }
.transcript-line .who { font-family: var(--font-body); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tint-orange-ink); }
.transcript-line.user .who { color: var(--blue); }
.transcript-line p { margin: 2px 0 0; white-space: pre-wrap; }

.empty { text-align: center; color: var(--grey-soft); padding: 40px 0; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2.5px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Systemspråk-velger (admin) ---- */
.lang-select { width: auto; padding: 6px 10px; font-size: .8rem; color: var(--grey-soft); border-radius: 999px; }

/* ---- Arbeidsområder (dashbord-sidepanel) ---- */
.ws-layout { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; }
.ws-sidebar { position: sticky; top: 16px; }
.ws-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ws-sidebar input { font-size: .85rem; padding: 8px 12px; margin-bottom: 8px; }
.ws-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: .9rem; font-weight: 500; color: var(--grey);
}
.ws-item:hover { background: var(--hover); }
.ws-item.active { background: var(--blue); color: #fff; }
.ws-item .ws-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item .ws-count { font-size: .74rem; color: var(--grey-soft); font-variant-numeric: tabular-nums; }
.ws-item.active .ws-count { color: rgba(255, 255, 255, .7); }
.ws-item .ws-actions { display: none; gap: 2px; }
.ws-item:hover .ws-actions { display: inline-flex; }
.ws-actions button { background: none; border: none; padding: 0 3px; font-size: .8rem; color: inherit; box-shadow: none; }
.ws-actions button:hover { box-shadow: none; background: none; color: var(--danger); }
.ws-item.active .ws-actions button:hover { color: #fff; }
.ws-section { font-family: var(--font-body); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--grey-soft); padding: 14px 10px 4px; }
@media (max-width: 760px) { .ws-layout { grid-template-columns: 1fr; } .ws-sidebar { position: static; } }

/* ---- Kontomeny ---- */
.account-wrap { position: relative; }
.account-btn {
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  background: var(--blue); color: #fff; font-size: .78rem; font-weight: 600;
}
.account-btn:hover { background: var(--blue-deep); box-shadow: var(--shadow); }
.account-menu {
  position: absolute; right: 0; top: 46px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift); padding: 8px; min-width: 230px;
}
.account-id { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account-id strong { color: var(--ink); }
.account-id span { font-size: .82rem; color: var(--grey-soft); }
.account-menu > button {
  display: block; width: 100%; text-align: left;
  background: none; color: var(--grey); font-family: var(--font-body); font-weight: 500;
  font-size: .9rem; padding: 8px 10px; border-radius: 8px;
}
.account-menu > button:hover { background: var(--hover); color: var(--ink); box-shadow: none; }
.account-menu > button.logout { color: var(--danger); }
.account-menu > button.logout:hover { background: var(--tint-orange-bg); color: var(--danger); }
.menu-lang {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-top: 1px solid var(--line); margin-top: 6px;
}
.menu-lang label { margin: 0; font-size: .9rem; font-weight: 500; color: var(--grey); }
.menu-lang select { width: auto; padding: 5px 8px; font-size: .85rem; }

/* ---- Branding-malsiden ---- */
.color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); margin-right: 4px; vertical-align: -3px; }
.brand-thumb { height: 22px; max-width: 90px; object-fit: contain; }
.ws-select { width: auto; max-width: 190px; padding: 7px 10px; font-size: .8rem; border-radius: 999px; }
.org-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px; }
.org-members { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.org-member { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; font-weight: 400; margin: 0; text-transform: none; letter-spacing: 0; color: var(--grey); }
.org-member input { width: auto; margin: 0; }