/* ══ Fangst ═══════════════════════════════════════════════════════════════ */
.fangst{
  position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;
  display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 18px;border-radius:27px;
  background:rgba(22,28,60,.86);border:1px solid var(--kant-2);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 16px 44px -14px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s,box-shadow .25s,transform .3s var(--fjaer)
}
.fangst:focus-within{border-color:rgba(201,217,255,.55);box-shadow:0 0 0 5px rgba(157,187,255,.12),0 16px 44px -14px rgba(0,0,0,.9)}
.fangst textarea{flex:1;min-width:0;resize:none;outline:none;padding:11px 0;max-height:150px;font:400 16px/1.4 var(--brod);color:var(--tekst)}
.fangst textarea::placeholder{color:var(--tekst-3)}
.send{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--aksent-mork);
  background:linear-gradient(180deg,#E3EBFF,#AEC5FF);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:opacity .2s,transform .16s var(--fjaer)
}
.send:disabled{opacity:.22;cursor:default}
.send:not(:disabled):active{transform:scale(.9)}

.fanget{
  position:fixed;left:12px;right:12px;z-index:45;bottom:calc(var(--fangst-h) + 22px + env(safe-area-inset-bottom,0px));
  padding:14px 14px 13px 16px;border-radius:22px;
  background:rgba(22,28,60,.92);border:1px solid var(--kant-2);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.95);animation:opp .45s var(--fjaer) both
}
.fanget .sitat{margin:0;font-size:13.5px;line-height:1.4;color:var(--tekst-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fanget .forslag{margin:6px 0 0;font-size:15px;line-height:1.4;color:var(--tekst-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fanget .forslag b{color:var(--tekst);font-weight:600}
.fanget .knapper{display:flex;gap:8px;margin-top:12px;align-items:center}
.fanget .knapper .dytt{margin-left:auto}
@keyframes opp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ══ Lag: innboks, søk, innstillinger ═════════════════════════════════════ */
.lag{position:fixed;inset:0;z-index:60;background:rgba(2,3,9,.5);animation:dim .3s ease both}
@keyframes dim{from{background:rgba(2,3,9,0)}}
.lag-panel{
  position:absolute;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + 44px);
  display:flex;flex-direction:column;border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,rgba(26,32,68,.9),rgba(9,11,26,.97) 220px);
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 -1px 0 rgba(190,205,255,.16),0 -40px 90px -30px rgba(0,0,0,.95);
  animation:lagOpp .5s var(--fjaer) both
}
@keyframes lagOpp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.lag.lukker{animation:dimUt .26s ease forwards;pointer-events:none}
.lag.lukker .lag-panel{animation:lagNed .26s ease forwards}
@keyframes dimUt{to{background:rgba(2,3,9,0)}}
@keyframes lagNed{to{transform:translateY(30px);opacity:0}}
.lag-hode{flex:none;display:flex;align-items:center;gap:10px;padding:18px 18px 12px 22px}
.lag-hode h2{margin:0;font:700 19px/1 var(--display);letter-spacing:-.02em;flex:1}
.lag-kropp{flex:1;min-height:0;overflow-y:auto;padding:4px 22px calc(40px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}

/* Innboksen: én tanke om gangen */
.tri{animation:kortInn .5s var(--fjaer) both}
.tri.ut{animation:kortUt .26s ease forwards}
@keyframes kortInn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes kortUt{to{opacity:0;transform:translateX(-30px) scale(.98)}}
.tri-sitat{position:relative;margin:10px 0 0;font:400 21px/1.45 var(--brod);color:#F4F6FF;text-wrap:pretty;padding-left:18px}
.tri-sitat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--komet),rgba(255,207,122,.1))}
.tri-meta{display:flex;align-items:center;gap:12px;margin:14px 0 0 18px;flex-wrap:wrap}
.sikkerhet{display:inline-flex;align-items:center;gap:6px}
.sikkerhet i{width:6px;height:6px;border-radius:50%;background:rgba(170,185,255,.18)}
.sikkerhet i.p{background:var(--c);box-shadow:0 0 6px var(--c)}
.tri-forslag{margin:24px 0 0;padding:16px;border-radius:20px;background:rgba(4,6,16,.42);border:1px solid var(--kant)}
.tri-forslag .setning{margin:0;font:600 18px/1.7 var(--display);letter-spacing:-.012em;color:var(--tekst)}
.tri-forslag .detaljer{margin:8px 0 0;font-size:15px;line-height:1.85;color:var(--tekst-2)}
.tri-forslag .detaljer b{color:var(--tekst);font-weight:600}
.tri-forslag .detaljer .chip{vertical-align:middle;margin:0 2px}
.tri-sikker{display:flex;align-items:center;margin-top:14px}
.tri-forslag .setning .chip{vertical-align:middle;margin:0 2px}
.hvorfor{margin-top:12px}
.hvorfor summary{cursor:pointer;list-style:none;font-size:13px;color:var(--tekst-3);display:inline-flex;align-items:center;gap:6px}
.hvorfor summary::-webkit-details-marker{display:none}
.hvorfor summary:hover{color:var(--tekst-2)}
.hvorfor[open] summary svg{transform:rotate(90deg)}
.hvorfor summary svg{transition:transform .25s var(--fjaer)}
.hvorfor p{margin:8px 0 0;font:400 14px/1.6 var(--brod);color:var(--tekst-2)}
.hvorfor p b{color:var(--tekst-2);font-weight:500}
.tri-velg{margin-top:20px}
.tri-velg .etikett{display:block;margin:18px 0 0}
.tri-velg .etikett:first-child{margin-top:0}
.tri-knapper{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.tri-fot{position:sticky;z-index:2;bottom:calc(-40px - env(safe-area-inset-bottom,0px));margin:22px -22px 0;
  padding:18px 22px calc(18px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(9,11,26,.98) 74%,rgba(9,11,26,0))}
.tri-under{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--kant)}
.tri-under .dytt{display:flex;gap:2px}
.tri-under .knapp.stille{margin-left:-12px}
.tri-under .dytt .knapp.stille{margin-left:0}
.ferdig{text-align:center;padding:60px 10px 20px;animation:visningInn .5s var(--fjaer) both}
.ferdig h3{margin:18px 0 6px;font:700 22px/1.2 var(--display);letter-spacing:-.02em}
.ferdig p{margin:0;color:var(--tekst-2)}
.ferdig svg{filter:drop-shadow(0 0 18px rgba(157,187,255,.9));animation:blaff 1.2s var(--fjaer) both}
@keyframes blaff{0%{transform:scale(.3) rotate(-30deg);opacity:0}60%{transform:scale(1.15) rotate(8deg);opacity:1}100%{transform:none}}

.arkiv{padding:14px 0;border-bottom:1px solid var(--kant)}
.arkiv p{margin:0;font-size:14.5px;line-height:1.5;color:var(--tekst-2)}
.arkiv .under{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}

.sokfelt{display:flex;align-items:center;gap:10px;margin:4px 0 6px;padding:0 16px;height:52px;border-radius:26px;
  background:rgba(4,6,16,.5);border:1px solid var(--kant-2);color:var(--tekst-3)}
.sokfelt:focus-within{border-color:rgba(201,217,255,.6);box-shadow:0 0 0 4px rgba(157,187,255,.12)}
.sokfelt input{flex:1;min-width:0;outline:none;font-size:16.5px;color:var(--tekst)}
.sokfelt input::placeholder{color:var(--tekst-3)}
.treff{display:grid;gap:4px;width:calc(100% + 20px);margin:0 -10px;padding:12px 10px;border-radius:14px;text-align:left;transition:background .18s}
.treff:hover{background:rgba(170,185,255,.06)}
.treff p{margin:0;font-size:14.5px;line-height:1.45}
.treff .under{display:flex;align-items:center;gap:8px}
mark{background:rgba(255,207,122,.2);color:#FFE3B3;border-radius:4px;padding:0 2px}
.datafelt{width:100%;min-height:200px;margin-top:10px;border-radius:14px;padding:12px;resize:vertical;
  background:rgba(4,6,16,.55);border:1px solid var(--kant);font:400 11.5px/1.6 var(--mono);color:var(--tekst-2)}

/* ══ Skål ═════════════════════════════════════════════════════════════════ */
.skaal{
  position:fixed;left:14px;right:14px;margin:0 auto;width:fit-content;z-index:90;bottom:min(calc(var(--ark-h,260px) + 14px),calc(100% - 132px));
  display:flex;align-items:center;gap:14px;padding:11px 12px 11px 17px;border-radius:22px;
  background:rgba(30,37,76,.94);border:1px solid var(--kant-2);color:var(--tekst);font-size:14.5px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 18px 40px -16px rgba(0,0,0,.95);
  animation:skaalInn .42s var(--fjaer) both
}
@keyframes skaalInn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.skaal span{min-width:0}
body.lag-apen .skaal{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
.skaal button{flex:none;height:30px;padding:0 12px;border-radius:15px;background:rgba(170,185,255,.12);font:600 13px/1 var(--brod);color:var(--aksent)}
.skaal button:hover{background:rgba(170,185,255,.2)}