/* =============================================================
   jens.css — assistentwidgeten. Hentet ut av no.css, sa Jens
   ser lik ut pa begge sider. Endres den der, bor den endres her.
   ============================================================= */

/* Tokens Jens-widgeten arver fra no.css pa solidlab.no, men som
   ikke finnes i colors_and_type.css. Definert her sa fila er
   selvstendig og ikke stille faller tilbake pa ingenting. */
:root {
  --flate:  #FBFAF6;   /* kortflate, litt lysere enn Antikkhvit */
  --kobber: #A9683F;   /* varm sekundaeraksent, samme som no.css */
}

.sl-jens-knapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px 13px 15px;
  background: var(--sort); color: var(--antikkhvit);
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(10,10,10,0.18), 0 12px 32px rgba(10,10,10,0.14);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
              background 320ms var(--ease-in-out), color 320ms var(--ease-in-out);
}

/* Over kontaktfeltet og footeren, som begge er svarte */
.sl-jens-knapp--lys {
  background: var(--antikkhvit); color: var(--sort);
  box-shadow: 0 4px 14px rgba(0,0,0,0.34), 0 12px 32px rgba(0,0,0,0.26);
}
.sl-jens-knapp--lys:hover {
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.40), 0 18px 44px rgba(0,0,0,0.30);
}
.sl-jens-knapp--lys .sl-jens-knapp__prikk {
  box-shadow: 0 0 0 2px var(--antikkhvit);
  transition: box-shadow 320ms var(--ease-in-out);
}
.sl-jens-knapp:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,10,10,0.24), 0 18px 44px rgba(10,10,10,0.18); }
.sl-jens-knapp:focus-visible { outline: 2px solid var(--oslo); outline-offset: 3px; }
.sl-jens-knapp svg { width: 19px; height: 19px; }
.sl-jens-knapp--apen {
  width: 52px; height: 52px; padding: 0; justify-content: center;
  background: var(--oslo);
}
.sl-jens-knapp__x { font-size: 26px; line-height: 1; }
.sl-jens-knapp__prikk {
  position: absolute; top: 9px; right: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--kobber);
  box-shadow: 0 0 0 2px var(--sort);
  animation: sl-puls 2.4s ease-in-out infinite;
}
@keyframes sl-puls { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.sl-jens {
  position: fixed; right: 24px; bottom: 90px; z-index: 50;
  width: min(92vw, 392px); height: min(72vh, 560px);
  display: flex; flex-direction: column;
  background: var(--antikkhvit);
  border: 1px solid var(--border-light); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(10,10,10,0.16), 0 28px 80px rgba(10,10,10,0.14);
  overflow: hidden;
  animation: sl-jens-inn 260ms var(--ease-out);
}
@keyframes sl-jens-inn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sl-jens__topp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--border-light);
  background: var(--flate);
}
.sl-jens__ident { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.sl-jens__ident strong { display: block; color: var(--sort); font-weight: 600; }
.sl-jens__merke {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: var(--oslo); color: var(--antikkhvit);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
}
.sl-jens__rolle {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--mist); margin-top: 2px;
}
.sl-jens__lukk {
  width: 34px; height: 34px; border: none; background: transparent;
  font-size: 22px; line-height: 1; color: var(--fog); cursor: pointer; border-radius: 8px;
}
.sl-jens__lukk:hover { background: rgba(10,10,10,0.06); color: var(--sort); }

.sl-jens__log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}
.sl-jens__melding {
  max-width: 86%; padding: 11px 14px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word;
}
.sl-jens__melding--jens {
  align-self: flex-start; background: var(--flate);
  border: 1px solid var(--border-light); border-bottom-left-radius: 5px; color: var(--sort);
}
.sl-jens__melding--du {
  align-self: flex-end; background: var(--oslo); color: var(--antikkhvit);
  border-bottom-right-radius: 5px;
}
.sl-jens__skriver { display: flex; gap: 5px; align-items: center; padding: 15px 16px; }
.sl-jens__skriver span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mist);
  animation: sl-hopp 1.3s ease-in-out infinite;
}
.sl-jens__skriver span:nth-child(2) { animation-delay: 0.18s; }
.sl-jens__skriver span:nth-child(3) { animation-delay: 0.36s; }
@keyframes sl-hopp { 0%,60%,100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

.sl-jens__forslag { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.sl-jens__forslag button {
  font-family: var(--font-sans); font-size: 13px; color: var(--oslo);
  background: transparent; border: 1px solid var(--linbla); border-radius: 999px;
  padding: 8px 13px; cursor: pointer; transition: all 150ms var(--ease-in-out);
}
.sl-jens__forslag button:hover { background: var(--flate); border-color: var(--oslo); }

/* Handlingsknapp Jens tilbyr når han vil åpne skjemaet ([[SKJEMA]]-markør) */
.sl-jens__handling {
  align-self: flex-start; margin: 2px 0 4px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--antikkhvit); background: var(--oslo);
  border: none; border-radius: 8px; padding: 10px 15px;
  cursor: pointer; transition: all 160ms var(--ease-in-out);
}
.sl-jens__handling:hover { background: var(--sort); transform: translateY(-1px); }

.sl-jens__bunn {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-light);
  background: var(--flate);
}
.sl-jens__felt {
  flex: 1; font-family: var(--font-sans); font-size: 14.5px; color: var(--sort);
  background: var(--antikkhvit); border: 1px solid var(--linbla);
  border-radius: 10px; padding: 11px 13px;
}
.sl-jens__felt::placeholder { color: var(--mist); }
.sl-jens__felt:focus { outline: none; border-color: var(--oslo); box-shadow: 0 0 0 3px rgba(74,90,98,0.12); }
.sl-jens__send {
  flex: 0 0 44px; width: 44px; border: none; border-radius: 10px;
  background: var(--oslo); color: var(--antikkhvit); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms var(--ease-in-out), opacity 150ms var(--ease-in-out);
}
.sl-jens__send svg { width: 18px; height: 18px; }

/* Mobil: full bredde, forankret nederst */
@media (max-width: 760px) {
  .sl-jens {
    left: 12px; right: 12px; bottom: 78px; width: auto;
    max-height: min(72vh, 560px);
  }
  .sl-jens-knapp { right: 12px; bottom: 14px; }
}