/* public_html/c/feed.css — bryteren AI/Feed og Feed-flaten (29.09.2026).

   Utseendet foelger skissa eier ga (listings-ai-feed-preview.html): samme
   maal, avstander og hierarki. Fargene er skallets egne variabler, saa lys
   og moerk drakt virker uten egne regler. Alt er avgrenset til .har-feed,
   .feed-bryter, .feed-side og .feed-flate — ingen eksisterende regel er
   overstyrt utenfor Feed-modus. */

/* Egne fargeroller. :root i stil.css er moerk drakt; lys gjelder for
   data-tema=light og for data-tema=system naar systemet er lyst. */
:root{--fd-aktiv:var(--flate-3);--fd-hjerte:#f08da6;--fd-valgt:var(--flate-2);--fd-felt:var(--flate-side)}
html[data-tema=light]{--fd-aktiv:var(--flate-2);--fd-hjerte:#bb4664;--fd-valgt:var(--flate-3);--fd-felt:var(--boble)}
@media (prefers-color-scheme:light){html[data-tema=system]{--fd-aktiv:var(--flate-2);--fd-hjerte:#bb4664;--fd-valgt:var(--flate-3);--fd-felt:var(--boble)}}

/* ── Hva som vises i hvilken modus ───────────────────────────────── */
.app:not(.feed-modus) .feed-side,
.app:not(.feed-modus) .feed-flate{display:none!important}
.app.feed-modus .traad-omslag,
.app.feed-modus .komp,
.app.feed-modus #tilbunn,
.app.feed-modus .merke-knapp,
.app.feed-modus .midl-knapp,
.app.feed-modus #liste,
.app.feed-modus .side > .fastrader,
.app.feed-modus .sokerad,
.app.feed-modus .skinne-samtaler{display:none!important}

/* ── Bryteren ────────────────────────────────────────────────────── */
.feed-bryter{display:flex;gap:3px;padding:4px;background:var(--flate-side);border:1px solid var(--kant);
  border-radius:12px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.feed-bryter button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:82px;min-height:34px;
  padding:0 12px;border:0;border-radius:8px;background:none;color:var(--tekst-2);font:inherit;font-size:14px;
  font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
.feed-bryter button:hover{color:var(--tekst)}
.feed-bryter button[aria-pressed="true"]{color:var(--tekst);background:var(--fd-aktiv);box-shadow:0 1px 4px #0000001a}
.feed-bryter button:focus-visible{outline:2px solid var(--tekst-2);outline-offset:2px}
.feed-bryter svg{flex-shrink:0}

/* Smal hovedflate: bryteren gaar inn i raden i stedet for aa ligge
   midt over den, og blir kompakt, saa den aldri dekker knappene. */
@container main (max-width: 640px){
  .feed-bryter{position:static;transform:none;margin-inline:auto 0;order:0}
  .app.feed-modus .feed-bryter{margin-inline:auto 4px}
  .app.feed-modus .topp-fyll{display:none}
  .feed-bryter button{min-width:0;padding:0 11px;font-size:13px;gap:5px}
}
/* Utlogget paa smal skjerm er det ikke plass til baade bryteren og
   begge innloggingsknappene. «Registrer deg gratis» og «Logg inn» gjoer
   det samme (begge kaller aapneAuth()), saa den ene holder. */
@container main (max-width: 640px){
  .har-feed .topp-hoyre [data-testid="signup-button"]{display:none}
}
@container main (max-width: 420px){
  .app:not(.feed-modus) .feed-bryter button svg{display:none}
  .feed-bryter button{padding:0 9px}
}

/* ── Sidepanelet ─────────────────────────────────────────────────── */
.feed-side{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 0 18px}
.feed-side .feed-etikett{color:var(--tekst-2);font-size:12px;font-weight:500;padding:18px 16px 6px}
.feed-side .rad{color:var(--tekst)}
.feed-side .feed-dempet{color:var(--tekst-2)}
.feed-side .rad svg{flex-shrink:0}
.feed-side .rad-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.feed-side .rad[aria-current=true]{background:var(--fd-valgt);color:var(--tekst)}
.feed-teller{margin-inline-start:auto;font-size:12px;color:var(--tekst-2);font-variant-numeric:tabular-nums}
.feed-side .rad:has(.feed-teller:not([hidden])){padding-inline-end:12px}
.app.lukket .feed-side{flex:none;overflow:visible;order:4}
.app.lukket .feed-side .feed-etikett,.app.lukket .feed-side .feed-gruppeliste,.app.lukket .feed-teller{display:none}

/* ── Feed-flaten ─────────────────────────────────────────────────── */
.feed-flate{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;outline:none;position:relative;
  color:var(--tekst);font-size:15px;line-height:1.5}
:where(.feed-flate) *{box-sizing:border-box}
.feed-flate [hidden]{display:none!important}
:where(.feed-flate) :is(button,textarea,input){font:inherit;color:inherit}
:where(.feed-flate) button{cursor:pointer;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0;-webkit-tap-highlight-color:transparent}
:where(.feed-flate) button:disabled{cursor:default;opacity:.4}
.feed-flate :is(button,textarea,input,a):focus-visible{outline:2px solid var(--tekst-2);outline-offset:3px}
:where(.feed-flate) :is(p,h2){margin:0}
.feed-flate a{color:var(--lenke,inherit);text-decoration:underline;text-underline-offset:2px}
.fd-kolonne{max-width:660px;margin:0 auto;padding:0 32px 25px}

.fd-faner{display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--kant);height:47px}
.fd-fane{align-self:stretch;position:relative;color:var(--tekst-2);font-size:14px;font-weight:500}
.fd-fane[aria-selected="true"]{color:var(--tekst)}
.fd-fane[aria-selected="true"]::after{content:"";position:absolute;bottom:-1px;height:2px;background:var(--tekst);left:0;right:0;border-radius:2px}

.fd-kontekst{min-height:58px;border-bottom:1px solid var(--kant);display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 0}
.fd-kontekst h2{font-size:16px;font-weight:500;flex:1;min-width:0;overflow-wrap:anywhere}
.fd-kontekst-tekst{flex-basis:100%;font-size:13px;color:var(--tekst-2);padding:0 0 6px 46px}
.fd-ikonknapp{width:34px;height:34px;border-radius:8px;color:var(--tekst-2);flex-shrink:0}
.fd-ikonknapp:hover{background:var(--hover-rad);color:var(--tekst)}
.fd-pille{border:1px solid var(--kant)!important;border-radius:20px;padding:6px 13px!important;font-size:12px;font-weight:500;min-height:32px;flex-shrink:0;gap:6px!important}
.fd-pille:hover{background:var(--hover-rad)}
.fd-pille[aria-pressed="true"]{color:var(--tekst-2)}

.fd-skriv{padding:23px 0 19px;border-bottom:1px solid var(--kant)}
.fd-skriv-topp{display:flex;gap:13px;align-items:flex-start}
.fd-skriv textarea{resize:none;background:transparent;border:0;min-width:0;width:100%;padding:5px 0;margin:0;line-height:1.55;font-size:15px;outline-offset:1px;max-height:320px}
.fd-skriv textarea::placeholder{color:var(--tekst-2);opacity:1}
.fd-skriv textarea:focus,.fd-skriv textarea:focus-visible{outline:none;box-shadow:none}
.fd-skriv-bunn{display:flex;align-items:center;gap:12px;padding-left:48px;margin-top:12px}
.fd-publikum{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tekst-2);flex:1;min-width:0}
.fd-publikum span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-tegn{font-size:12px;color:var(--tekst-2);font-variant-numeric:tabular-nums}
.fd-primar{background:var(--fyll-bg)!important;color:var(--fyll-tx)!important;border-radius:21px;padding:8px 20px!important;font-size:13px;font-weight:500;min-height:35px}
.fd-primar:not(:disabled):hover{background:var(--fyll-bg-h)!important}
.fd-feil{color:var(--fare);font-size:13px;margin-top:10px!important;padding-left:48px}

.fd-avatar{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--flate-3);
  color:var(--tekst-2);flex-shrink:0;font-size:11px;font-weight:500;letter-spacing:.2px;background-size:cover;background-position:center}
.fd-avatar-meg{background-color:var(--fyll-bg);color:var(--fyll-tx)}

.fd-post{padding:23px 0 21px;border-bottom:1px solid var(--kant)}
.fd-post:last-child{border-bottom:0}
.fd-post-hode{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.fd-forfatter-info{min-width:0;flex:1}
.fd-forfatter-linje{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fd-forfatter{font-size:14px;font-weight:500}
.fd-tid{font-size:12px;color:var(--tekst-2)}
.fd-post-gruppe{color:var(--tekst-2);font-size:12px;min-height:19px;justify-content:flex-start!important}
button.fd-post-gruppe:hover{text-decoration:underline}
.fd-post-tekst{font-size:14px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-line}
.fd-handlinger{display:flex;align-items:center;gap:25px;margin-top:16px}
.fd-handling{color:var(--tekst-2);gap:6px!important;font-size:12px;min-height:25px;font-variant-numeric:tabular-nums}
.fd-handling:hover{color:var(--tekst)}
.fd-handling[data-fh="like"][aria-pressed="true"]{color:var(--fd-hjerte)}
.fd-handling[data-fh="like"][aria-pressed="true"] svg{fill:currentColor}
.fd-folg{margin-left:auto}
.fd-folg[aria-pressed="true"]{color:var(--tekst)}
.fd-slett{margin-left:-8px}
.fd-slett:hover{color:var(--fare)}

.fd-svarliste{margin-top:17px;padding:0 0 0 15px;border-left:2px solid var(--kant)}
.fd-svar{margin-bottom:15px;font-size:13px;line-height:1.55}
.fd-svar p{overflow-wrap:anywhere;white-space:pre-line}
.fd-svar-ny{position:relative}
.fd-svar-ny::before{content:"";position:absolute;left:-19px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--aksent)}
.fd-ny{font-size:11px;color:var(--aksent-tekst);font-weight:500}
.fd-svar-forfatter{font-size:12px;font-weight:500;margin-bottom:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fd-svar-forfatter .fd-tid{font-weight:400}
.fd-svar-slett{color:var(--tekst-3);margin-left:auto;width:26px;height:26px;border-radius:6px}
.fd-svar-slett:hover{color:var(--fare);background:var(--hover-rad)}
.fd-svar-laster{font-size:13px;color:var(--tekst-2);margin-bottom:12px!important}
.fd-svarskjema{display:flex;gap:10px;align-items:center}
.fd-svarskjema input{background:var(--fd-felt);border:1px solid var(--kant);border-radius:18px;padding:9px 13px;min-width:0;width:100%;font-size:14px}

.fd-tom{padding:55px 16px;color:var(--tekst-2);text-align:center;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:16px}
.fd-laster{animation:fd-puls 1.2s ease-in-out infinite}
@keyframes fd-puls{50%{opacity:.5}}
@media (prefers-reduced-motion: reduce){.fd-laster{animation:none}}
.fd-mer-rad{display:flex;justify-content:center;padding:6px 0 10px}

.fd-gruppe-rad{display:flex;align-items:center;gap:14px;padding:24px 0;border-bottom:1px solid var(--kant)}
.fd-gruppe-rad>div{flex:1;min-width:0}
.fd-gruppe-tittel{font-size:15px;font-weight:500;justify-content:flex-start!important;text-align:left}
.fd-gruppe-tittel:hover{text-decoration:underline}
.fd-gruppe-besk{font-size:13px;color:var(--tekst-2);margin-top:5px!important;overflow-wrap:anywhere}
.fd-gruppe-tall{font-size:12px;color:var(--tekst-3);margin-top:4px!important}
.fd-ny-gruppe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:20px 0;border-bottom:1px solid var(--kant)}
.fd-ny-gruppe-felt{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.fd-ny-gruppe input{background:var(--fd-felt);border:1px solid var(--kant);border-radius:10px;padding:8px 12px;font-size:14px;width:100%}
.fd-ny-gruppe .fd-feil{flex-basis:100%;padding-left:0}

.fd-varsel{position:sticky;bottom:16px;margin:0 auto;width:max-content;max-width:calc(100% - 32px);background:var(--fyll-bg);color:var(--fyll-tx);
  border-radius:12px;padding:10px 16px;font-size:13px;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s;pointer-events:none;z-index:3}
.fd-varsel.vis{opacity:1;transform:none}

@media (max-width: 760px){
  .fd-kolonne{padding-left:23px;padding-right:23px}
}
@media (max-width: 600px){
  .fd-kolonne{padding:0 20px 18px}
  .fd-skriv{padding-top:20px}
  .fd-skriv-bunn,.fd-feil{padding-left:0}
  .fd-kontekst-tekst{padding-left:0}
  .fd-skriv textarea,.fd-svarskjema input,.fd-ny-gruppe input{font-size:16px}
  .fd-handlinger{gap:18px}
}
@media (pointer: coarse){
  .fd-handling{min-height:40px;min-width:44px}
  .fd-ikonknapp{min-height:44px;min-width:44px}
  .fd-primar,.fd-pille{min-height:40px}
  .feed-bryter button{min-height:40px}
  .fd-svar-slett{min-width:40px;min-height:40px}
}
.feed-side .feed-fast{padding:2px 0 0}