/* Filip – Snakk med Filip (heifilip.no/snakk). Same fargar og skrift (IBM Plex Sans) som heifilip.no og meld/.
   Mobil først (390 px), stor tekst, kontrast minst 4,5:1, alle knappar minst 64 px høge. Fontane ligg lokalt, ingenting eksternt.
   Ringen rundt avataren viser tilstanden: lyttar (pulserer), tenkjer (roleg), snakkar (lyser). prefers-reduced-motion stoppar rørsla. */
@font-face{font-family:"Plex";src:url(plex-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(plex-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url(plex-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#FFFFFF; --panel:#F4F7FB;
  --line:#C9D4E2; --line-strong:#9FB0C6;
  --ink:#14213A; --ink-2:#4A5B75; --ink-3:#5A6A84;
  --blue:#1F4F8F; --blue-press:#173D70; --blue-tint:#E4ECF7;
  --green:#1E7B45; --alert:#A33A16; --alert-press:#7F2C10; --alert-tint:#FBEDE7;
  --amber:#D07612; --amber-halo:rgba(208,118,18,.28); --amber-glow:rgba(208,118,18,.55);
  --r:14px; --r-sm:10px;
  --knapp:64px;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;font-family:"Plex",-apple-system,"Segoe UI",system-ui,sans-serif;font-size:20px;line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--r-sm)}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none !important}
.wrap{max-width:640px;margin:0 auto;padding:0 16px}
h1{font-size:1.5rem;line-height:1.2;margin:0 0 14px;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 14px}
.stor{font-size:1.3rem;line-height:1.4}
.liten{font-size:1rem;color:var(--ink-3)}

/* topp: symbolet frå logoen øvst til venstre (inline-SVG i index.html). Figuren fyller dei øvste 87 av 107,8 einingane i
   viewBoxen, så margin-bottom tek bort det tomme romet under og figuren (42 px) blir midtstilt i toppen. */
.topp{min-height:64px;display:flex;align-items:center;padding:8px 16px;max-width:640px;margin:0 auto}
.merke{display:flex;align-items:center;user-select:none}
.merke svg{display:block;height:52px;width:auto;margin-bottom:-10px}

main{padding:4px 0 32px}
.skjerm{padding-bottom:16px}

/* knappar: alle minst 64 px høge */
.knapp{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:var(--knapp);padding:12px 18px;border-radius:var(--r-sm);font:inherit;font-weight:600;font-size:1.15rem;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;border:2px solid var(--blue);background:var(--blue);color:#fff;margin:0 0 12px}
.knapp:hover{background:var(--blue-press);border-color:var(--blue-press)}
.knapp:active{transform:translateY(1px)}
.knapp.sekundaer{background:#fff;color:var(--blue)}
.knapp.sekundaer:hover{background:var(--blue-tint)}
.knapp.sekundaer[aria-pressed="true"]{background:var(--blue);color:#fff}
.knapp.raud{background:var(--alert);border-color:var(--alert);font-size:1.4rem;min-height:80px}
.knapp.raud:hover{background:var(--alert-press);border-color:var(--alert-press)}
.knapp.lett{background:transparent;border-color:transparent;color:var(--blue);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.knapp.lett:hover{background:var(--blue-tint)}
.knapp.liten-knapp{font-size:1rem;color:var(--ink-2)}
.knapp:disabled{opacity:.5;cursor:default}
.mt12{margin-top:12px}
.mt16{margin-top:16px}
.to{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.to .knapp{margin:0}
.rad{display:flex;gap:12px}

/* avatar med ring (tilstand) */
.avatar{position:relative;width:128px;height:128px;margin:8px auto 10px}
#skjerm-samtale .avatar{width:112px;height:112px;margin:4px auto 10px}
.avatar.velkomst{width:160px;height:160px}
.avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--panel)}
.avatar .ring{position:absolute;inset:-7px;border-radius:50%;border:6px solid var(--amber);box-shadow:0 0 0 4px var(--amber-halo);pointer-events:none;transition:box-shadow .3s,border-color .3s,opacity .3s}
.avatar .ki{position:absolute;right:-6px;bottom:2px;background:var(--ink);color:#fff;font-weight:600;font-size:.85rem;letter-spacing:.04em;padding:4px 9px;border-radius:999px;border:2px solid #fff}
.ring.lyttar{border-color:var(--amber);box-shadow:0 0 0 10px var(--amber-halo)}
.ring.tenkjer{border-color:var(--amber);opacity:.55;box-shadow:0 0 0 2px var(--amber-halo)}
.ring.snakkar{border-color:var(--amber);box-shadow:0 0 0 8px var(--amber-glow),0 0 28px 6px var(--amber-glow)}
@media (prefers-reduced-motion:no-preference){
  .ring.lyttar{animation:puls 1.4s ease-in-out infinite}
  .ring.tenkjer{animation:ro 2.4s ease-in-out infinite}
  .ring.snakkar{animation:lys 1.1s ease-in-out infinite}
  @keyframes puls{0%,100%{box-shadow:0 0 0 4px var(--amber-halo)}50%{box-shadow:0 0 0 14px rgba(208,118,18,.10)}}
  @keyframes ro{0%,100%{opacity:.55}50%{opacity:.9}}
  @keyframes lys{0%,100%{box-shadow:0 0 0 6px var(--amber-glow),0 0 18px 2px var(--amber-glow)}50%{box-shadow:0 0 0 10px var(--amber-glow),0 0 32px 10px var(--amber-glow)}}
}
@media (prefers-reduced-motion:reduce){.knapp:active{transform:none}}
.status{text-align:center;min-height:1.6em;color:var(--ink-2);font-size:1rem;margin:0 0 8px}

/* samtalen */
.du-sa{color:var(--ink-2);font-size:1.05rem;line-height:1.4;margin:0 0 12px;padding:10px 14px;background:var(--panel);border-radius:var(--r-sm)}
.du-sa b{font-weight:600;color:var(--ink-3);display:block;font-size:.9rem;margin-bottom:2px}
.filip{font-size:1.6rem;line-height:1.35;font-weight:500;margin:0 0 18px;min-height:2.7em;overflow-wrap:anywhere}
.handlingar{margin:0 0 6px}
.tema{margin:14px 0 8px}
.tema .knapp{font-weight:500}

/* inndata: stor mikrofonknapp, skrivefelt med Send */
.inndata{margin:14px 0 6px}
.mik{min-height:72px;font-size:1.2rem}
.mik svg{width:30px;height:30px;flex:0 0 auto}
.mik[aria-pressed="true"]{background:var(--alert);border-color:var(--alert)}
.skriv{display:flex;gap:10px;align-items:stretch}
.skriv input{flex:1 1 auto;min-width:0;width:100%;font:inherit;font-size:1.15rem;min-height:var(--knapp);padding:12px 14px;border:2px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
.skriv input:focus{border-color:var(--blue)}
.skriv .knapp{width:auto;flex:0 0 auto;padding:12px 22px;margin:0}
body.utan-mik .mik{display:none}
body.utan-mik .skriv{flex-wrap:wrap}
body.utan-mik .skriv input{min-height:84px;font-size:1.3rem;flex-basis:100%}
body.utan-mik .skriv .knapp{width:100%}
.feil{color:var(--alert);font-weight:600;margin:8px 0 0;min-height:0}
.feil:empty{display:none}

/* nedst: små knappar */
.nedst{display:flex;gap:8px;justify-content:center;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.nedst .knapp{margin:0;width:auto;padding:10px 16px}

/* skjema (familiekoden) */
label{display:block;font-weight:600;margin:0 0 8px;font-size:1.15rem}
input.kode{width:100%;font:inherit;font-size:1.6rem;letter-spacing:.08em;text-transform:uppercase;min-height:72px;padding:12px 16px;border:2px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);text-align:center}
input.kode:focus{border-color:var(--blue)}
.hint{color:var(--ink-2);font-size:1rem;margin:8px 0 14px}
.hint.feil{color:var(--alert)}

/* naud */
.naud .filip{font-size:1.9rem;font-weight:600;text-align:center;margin-top:12px}
.naud .knapp.raud{margin-top:8px}

/* personvern og liste */
.boks{background:var(--panel);border-radius:var(--r);padding:16px 18px;margin:0 0 16px}
.boks p:last-child{margin-bottom:0}
.sentrert{text-align:center}

@media (min-width:700px){
  body{font-size:21px}
  .filip{font-size:1.75rem}
}