/* Spjallglugginn á grind.is (spjall/lesmig.md). Sama efnisviður og Apple-síðurnar: Ljómi-takkinn, blátt fyrir gestinn,
   ljósgrátt fyrir svarið, 24 px horn. Breyturnar koma af síðunni ef þær eru til, annars gildin hér. */
.spj-hnappur, .spj-gluggi { --spj-blatt: var(--blatt, #2457c5); --spj-ink: var(--ink, #1d1d1f); --spj-ink-2: var(--ink-2, #6e6e73); --spj-alt: var(--alt, #f5f5f7); --spj-bg: var(--bg, #fdfdfd); --spj-line: var(--line, #d2d2d7);
  font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, 'Geist', system-ui, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
.spj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* hnappurinn: pilla neðst til hægri */
.spj-hnappur { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px 0 16px;
  border-radius: 980px; border: 1px solid #1d48a8; color: #fdfdfd; font-size: 15px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #3366d4, #2452bd) border-box;
  box-shadow: inset 0 1px 0 rgba(253,253,253,.22), 0 1px 2px rgba(15,15,15,.14), 0 10px 28px -8px rgba(36,87,197,.55);
  transition-property: box-shadow, opacity; transition-duration: 150ms; transition-timing-function: ease-out; }
.spj-hnappur svg { width: 20px; height: 20px; }
.spj-hnappur:focus-visible { outline: 2px solid var(--spj-blatt); outline-offset: 3px; }
.spj-hnappur[aria-expanded="true"] { opacity: 0; pointer-events: none; }
@media (hover: hover) { .spj-hnappur:hover { box-shadow: inset 0 1px 0 rgba(253,253,253,.28), 0 1px 2px rgba(15,15,15,.14), 0 12px 32px -8px rgba(36,87,197,.7); } }
@media (prefers-reduced-motion: no-preference) { .spj-hnappur { transition-property: box-shadow, opacity, scale; } .spj-hnappur:active { scale: .96; } }

/* glugginn */
.spj-gluggi { position: fixed; right: 20px; bottom: 20px; z-index: 901; width: min(400px, calc(100vw - 40px)); height: min(620px, calc(100dvh - 40px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; color: var(--spj-ink); background: var(--spj-bg);
  box-shadow: 0 0 0 1px rgba(15,15,15,.08), 0 2px 6px rgba(15,15,15,.08), 0 30px 80px -20px rgba(15,15,15,.35);
  transform-origin: 100% 100%; transition: opacity .25s cubic-bezier(.17,.84,.44,1), translate .35s cubic-bezier(.19,1,.22,1), scale .35s cubic-bezier(.19,1,.22,1), visibility 0s; }
.spj-gluggi[data-opid="false"] { opacity: 0; translate: 0 12px; scale: .98; visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, 0s, .35s; }
.spj-haus { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid rgba(15,15,15,.07); background: rgba(253,253,253,.9); }
.spj-merki { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fdfdfd;
  background: linear-gradient(180deg, #3468d6, #1f4fb8); box-shadow: inset 0 1px 0 rgba(253,253,253,.3), 0 6px 14px -6px rgba(36,87,197,.7); }
.spj-merki svg { width: 18px; height: 18px; }
.spj-haus div { flex: 1; min-width: 0; }
.spj-haus b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.spj-haus small { display: block; font-size: 12px; color: var(--spj-ink-2); }
.spj-loka { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--spj-alt); color: var(--spj-ink); cursor: pointer; }
.spj-loka svg { width: 14px; height: 14px; }
.spj-loka:focus-visible, .spj-gluggi button:focus-visible, .spj-gluggi a:focus-visible { outline: 2px solid var(--spj-blatt); outline-offset: 2px; }
@media (hover: hover) { .spj-loka:hover { background: #ebebef; } }

/* samtalið */
.spj-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.spj-log li { max-width: 85%; padding: 9px 13px; border-radius: 18px; white-space: pre-line; overflow-wrap: anywhere; }
.spj-log .spj-g { align-self: flex-end; color: #fdfdfd; border-bottom-right-radius: 6px; background: linear-gradient(180deg, #3468d6, #1f4fb8); }
.spj-log .spj-s { align-self: flex-start; background: var(--spj-alt); border-bottom-left-radius: 6px; }
.spj-log .spj-villa { color: #8a2b19; background: #fbeee9; }
.spj-hugsar { display: inline-flex; gap: 4px; padding: 4px 0; }
.spj-hugsar i { width: 6px; height: 6px; border-radius: 50%; background: #a1a1a6; }
@media (prefers-reduced-motion: no-preference) {
  .spj-hugsar i { animation: spj-hopp 1.1s cubic-bezier(.17,.84,.44,1) infinite; } .spj-hugsar i:nth-child(2) { animation-delay: .15s; } .spj-hugsar i:nth-child(3) { animation-delay: .3s; }
  .spj-log li { animation: spj-inn .35s cubic-bezier(.19,1,.22,1) both; }
}
@keyframes spj-hopp { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
@keyframes spj-inn { from { opacity: 0; translate: 0 4px; } }

/* erindið: samantekt sem gesturinn sendir sjálfur */
.spj-log .spj-erindi { align-self: stretch; max-width: none; padding: 14px; border-radius: 16px; background: var(--spj-bg); box-shadow: 0 0 0 1px rgba(15,15,15,.1), 0 8px 20px -12px rgba(15,15,15,.25); white-space: normal; }
.spj-erindi p { font-size: 12px; font-weight: 600; color: var(--spj-ink-2); margin: 0 0 8px; }
.spj-erindi dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.spj-erindi dt { color: var(--spj-ink-2); }
.spj-erindi dd { margin: 0; white-space: pre-line; }
.spj-erindi__takkar { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.spj-senda { min-height: 40px; padding: 0 18px; border-radius: 980px; border: 1px solid #1d48a8; color: #fdfdfd; font: inherit; font-weight: 600; cursor: pointer;
  background: linear-gradient(180deg, #3366d4, #2452bd) border-box; box-shadow: inset 0 1px 0 rgba(253,253,253,.22), 0 6px 16px -6px rgba(36,87,197,.6); }
.spj-breyta { min-height: 40px; padding: 0 10px; border: 0; background: none; color: var(--spj-blatt); font: inherit; cursor: pointer; }
.spj-senda:disabled { opacity: .6; cursor: default; }
.spj-sent { color: #1f7a37; font-weight: 600; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) { .spj-senda { transition-property: scale; transition-duration: 150ms; transition-timing-function: ease-out; } .spj-senda:not(:disabled):active { scale: .96; } }

/* tillögur og innsláttur */
.spj-tillogur { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.spj-tillogur[hidden] { display: none; }
.spj-tillogur button { min-height: 36px; padding: 0 13px; border-radius: 980px; border: 1px solid var(--spj-line); background: var(--spj-bg); color: var(--spj-ink); font: inherit; font-size: 13px; cursor: pointer; }
@media (hover: hover) { .spj-tillogur button:hover { border-color: #a1a1a6; } }
.spj-form { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px; border-radius: 22px; background: var(--spj-alt); }
.spj-form textarea { flex: 1; min-height: 32px; max-height: 120px; resize: none; border: 0; background: none; padding: 6px 0; color: var(--spj-ink); font: inherit; font-size: 16px; line-height: 1.35; outline: none; }
.spj-form:focus-within { box-shadow: 0 0 0 2px var(--spj-blatt); }
.spj-form button { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fdfdfd; cursor: pointer; background: linear-gradient(180deg, #3366d4, #2452bd); }
.spj-form button:disabled { background: #c7c7cc; cursor: default; }
.spj-form button svg { width: 16px; height: 16px; }
.spj-smatt { flex: none; margin: 8px 16px 12px; font-size: 11px; line-height: 1.35; color: var(--spj-ink-2); }
.spj-smatt a { color: var(--spj-blatt); }

@media (max-width: 640px) {
  .spj-hnappur { right: 16px; bottom: 16px; }
  .spj-gluggi { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .spj-gluggi { transition: opacity .2s linear, visibility 0s; translate: none !important; scale: none !important; } }
@media (forced-colors: active) { .spj-hnappur, .spj-log li, .spj-form { border: 1px solid CanvasText; } }