/* Sofias demo-enhed. Delt af heysofia.dk's forside og /sofia.
 *
 * Filen findes, fordi de to sider viser den samme enhed. Laa den inline
 * begge steder, ville den ene blive rettet og den anden staa tilbage — og
 * to udgaver af produktet er praecis den fejl, resten af dette repo bruger
 * kontroller paa at undgaa.
 *
 * Den laaner ingen farver af den side, den staar paa. Alt herinde er
 * Sofias eget, kopieret fra sofia/assets/sofia.css.
 */
/* ── Enheden: Sofias egen flade ─────────────────
   Foerste udgave tegnede appen i sidens egen palet, sort kant og pink, og
   det var ikke produktet, men en tegning af det. Sofia er sit eget maerke
   (se BRAND-SOFIA.md): lilla-magenta forloeb, koelig graa flade, hvide kort
   med en magenta streg i venstre side. Vaerdierne herunder er kopieret fra
   sofia/assets/sofia.css, ikke valgt her, og komponenterne har appens egne
   navne, saa det kan ses at de hoerer sammen.

   Skifter appen udseende, skal de foelge med. test/test-heysofia-hero.js
   holder, at de er der. */
/* text-align staar her, fordi den arves. Paa /sofia er siden midterstillet,
   og uden linjen stod svarets afsnit, overskrifter og artikelnavne centreret
   inde i appen — appen er venstrestillet. Enheden skal se ud som Sofia paa
   enhver side, ogsaa naar siden er sat anderledes op. */
.enhed{
  max-width:24.5rem;margin-inline:auto;background:#2A2635;border-radius:40px;padding:11px;
  box-shadow:0 24px 60px rgba(20,16,27,.30);text-align:left;
}
.enhed-skaerm{
  --s-midt:#A344A2;
  --s-forloeb:linear-gradient(115deg,#6D4AC8 0%,#9B4FBE 48%,#E0559B 100%);
  --s-knap:linear-gradient(115deg,#6D4AC8 0%,#B14FB0 55%,#DB2777 100%);
  --s-blaek:#1B1726;--s-daempet:#6B6880;--s-flade:#F4F4F7;
  --s-kort:#FFFFFF;--s-kant:#E3E1EA;--s-ok:#2D6E4F;
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--s-blaek);background:var(--s-flade);
  display:flex;flex-direction:column;overflow:hidden;border-radius:30px;
  /* Pillen skal med paa en baerbar. Med en fast andel af hoejden laa den
     16 px under folden paa 1280x720, og saa ser heroen ud som om man
     kun kan laese. Hoejden regnes derfor ud fra det, der er tilbage. */
  height:clamp(22rem,calc(100vh - 13rem),38rem);
}

/* Hovedet. Ordmaerket er Sofias eget aktiv: »sofıa« med Hjem & Plejes mark
   som prikken over det prikloese i, tegnet af assets/sofia-brand.js, som er
   en byte-for-byte kopi af sofia/assets/sofia-brand.js. Marken er laast og
   maa ikke tegnes om; den kopieres. test/test-brandkopier.js holder det. */
.app-top{
  flex:0 0 auto;display:flex;align-items:center;gap:.6rem;
  padding:.9rem 1.05rem;background:var(--s-forloeb);color:#fff;
}
.sofia-wm{position:relative;display:inline-block;font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap;font-size:1.3rem}
.sofia-wm .sofia-i{position:relative;display:inline-block;line-height:1}
.sofia-wm .sofia-i svg{position:absolute;left:50%;display:block}
.sofia-wm .sofia-i b{display:inline-block;width:0;height:0;overflow:hidden}
.app-top .sofia-wm .sofia-i svg path{fill:#FFFFFF}
.app-top .app-her{
  margin-left:auto;font-size:.64rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
}

/* Samtalen. Klassenavnene er appens. */
.samtale-flow{flex:1 1 auto;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.samtale-tom{padding:2px 2px 4px}
.samtale-hej{font-size:1.06rem;font-weight:700;margin:0 0 4px}
.samtale-under{font-size:.9rem;color:var(--s-daempet);margin:0 0 18px}
.samtale-forslag{display:flex;flex-direction:column;gap:8px}
.samtale-forslag button{
  text-align:left;font:inherit;font-size:.92rem;cursor:pointer;
  padding:11px 13px;border-radius:12px;border:1px solid var(--s-kant);
  background:var(--s-kort);color:var(--s-blaek);
}
.samtale-forslag button:hover{border-color:var(--s-midt);color:var(--s-midt)}
.igang .samtale-tom{display:none}

.boble{max-width:92%;font-size:.96rem;line-height:1.55}
.boble-mig{align-self:flex-end;background:var(--s-knap);color:#fff;padding:10px 14px;border-radius:16px 16px 4px 16px;font-weight:500;margin:0}
.boble-sofia{align-self:flex-start;background:var(--s-kort);border:1px solid var(--s-kant);padding:13px 14px;border-radius:16px 16px 16px 4px;max-width:100%;width:100%}
.svar-linje{margin:0 0 12px;font-weight:600;font-size:.9rem;color:var(--s-ok)}
.svar-linje.venter{color:var(--s-daempet)}
.kilde-kort{border-left:3px solid var(--s-midt);padding:2px 0 2px 12px;margin-bottom:14px}
.kilde-kort:last-of-type{margin-bottom:4px}
.kilde-hoved{font-weight:700;font-size:.92rem;margin-bottom:4px}
.kilde-kort p{margin:0 0 8px;font-size:.93rem;line-height:1.58}
.kilde-bund{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.kilde-artikel{font-size:.78rem;color:var(--s-daempet);font-weight:600}
.kilde-aabn{font-size:.8rem;font-weight:700;color:var(--s-midt);text-decoration:none}
.kilde-aabn:hover{text-decoration:underline}
/* Naar de tolv spoergsmaal er brugt, er det ikke en fejl, men det sted i
   besoeget hvor hun ved mest om, hvad Sofia er. Derfor staar knappen dér. */
/* Det andet svar staar foldet, som i appen: overskrift og artikel kan ses,
   teksten kommer, naar der trykkes. */
.kilde-foldet{border-left-color:var(--s-kant)}
.kilde-foldet.aaben{border-left-color:var(--s-midt)}
.kilde-fold{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  text-align:left;border:none;background:none;font:inherit;cursor:pointer;padding:2px 0;color:var(--s-blaek);
}
.kilde-fold .kilde-hoved{margin:0}
.kilde-fold::after{content:'Vis';font-size:.78rem;font-weight:700;color:var(--s-midt);margin-top:4px}
.kilde-foldet.aaben .kilde-fold::after{content:'Skjul'}
.kilde-mere{padding-top:8px}
/* De tre prikker. Et opslag tager et oejeblik, og uden et tegn paa liv
   trykker man igen. */
.boble-venter{display:flex;gap:5px;width:auto;padding:15px 16px}
.boble-venter span{width:7px;height:7px;border-radius:50%;background:var(--s-midt);opacity:.35;animation:sofia-prik 1.1s infinite}
.boble-venter span:nth-child(2){animation-delay:.18s}
.boble-venter span:nth-child(3){animation-delay:.36s}
@keyframes sofia-prik{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.boble-venter span{animation:none}}
.svar-intet{color:var(--s-daempet);font-weight:600;font-size:.93rem;margin:0}
/* Den stille linje efter foerste svar. Den staar i samtalen og ikke i et
   nyt lag paa skaermen, og knappen er en kant og ikke et forloeb, saa
   graensens egen opfordring bliver ved med at vaere den hoejeste. */
.i-lommen{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;
  padding:12px 14px;border-radius:14px;background:var(--s-kort);
  border:1px dashed var(--s-kant);
}
.i-lommen p{margin:0;font-size:.92rem;font-weight:600;color:var(--s-daempet)}
.i-lommen a{
  margin-left:auto;font:inherit;font-size:.88rem;font-weight:700;text-decoration:none;
  padding:.5em 1.1em;border-radius:999px;border:1.5px solid var(--s-midt);color:var(--s-midt);
}
.i-lommen a:hover{background:var(--s-midt);color:#fff}
.opfordring{margin-top:12px}
.opfordring a{
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:.92rem;font-weight:700;text-decoration:none;
  padding:.7em 1.3em;border-radius:999px;background:var(--s-knap);color:#fff;
}

/* Pillen. Mikrofonen staar til venstre og send til hoejre, som i appen. */
.samtale-bund{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px;
  background:var(--s-flade);border-top:1px solid var(--s-kant);
}
.samtale-bund label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#sp{
  flex:1 1 auto;min-width:0;font:inherit;font-size:1rem;line-height:1.45;
  padding:11px 14px;border-radius:14px;border:1px solid var(--s-kant);
  background:var(--s-kort);color:var(--s-blaek);
}
#sp::placeholder{color:var(--s-daempet)}
#sp:focus{outline:none;border-color:var(--s-midt);box-shadow:0 0 0 3px rgba(163,68,162,.16)}
.samtale-mik,.samtale-send{
  flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer;padding:0;
  display:grid;place-items:center;border:1px solid var(--s-kant);background:var(--s-kort);
}
.samtale-mik svg,.samtale-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.samtale-mik{color:var(--s-daempet)}
.samtale-mik[aria-pressed="true"]{color:#fff;background:#E0559B;border-color:#E0559B}
.samtale-send{color:#fff;background:var(--s-knap);border-color:transparent}
.samtale-send[disabled]{opacity:.55;cursor:progress}
.lytter{margin:.75rem 0 0;text-align:center;font-weight:700;font-size:.92rem;color:var(--s-midt)}
.proev-hint{margin:.85rem auto 0;max-width:24.5rem;font-size:.82rem;font-weight:600;color:#5F5266;text-align:center}

/* Paa telefon falder rammen vaek, og demoen er siden. */
@media (max-width:940px){
  .enhed{max-width:none;background:none;padding:0;border-radius:0;box-shadow:none}
  .enhed-skaerm{height:auto;border:1px solid var(--s-kant);border-radius:20px;box-shadow:0 12px 34px rgba(20,16,27,.14)}
  .proev-hint{max-width:none}
}
@media (max-width:380px){
  .samtale-mik,.samtale-send{width:40px;height:40px}
}