/* =====================================================================
   v480 · noter-spalte.js - noterne på computeren i tre former (Ren · Udvidet · Live), Robin 7/11.
   Rammen (skrivefelt · spalte · linjen nederst) bruges også af live-dok.js. Kun roller (--m-*) og hudens form (--ss-*);
   --c-* kommer fra .cm (computeren.css). Mål efter lærredet "Mødet på computeren · noter og spalten" (Bordet).
   ===================================================================== */
.nsp{display:grid;grid-template-columns:minmax(0,1fr) 420px;height:100%;min-height:0;white-space:normal;font-family:var(--ss-body,inherit);color:var(--c-ink)}
.nsp[data-form="ren"]{grid-template-columns:minmax(0,1fr) 0}
.nsp[data-form="ren"] .nsp-h{display:none}
.nsp[data-form="live"]{grid-template-columns:minmax(0,1fr) 360px}
.nsp.nsp-bred{grid-template-columns:minmax(0,1fr) minmax(420px,50%)}
.nsp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nsp-kick{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--c-mut)}
.nsp-fyld{flex:1}
.nsp-tom{margin:0;font-size:13px;line-height:1.5;color:var(--c-svag)}

/* ---------- skrivefeltet ---------- */
.nsp-v{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--c-kort)}
.nsp-rul{flex:1;min-height:0;overflow-y:auto;padding:52px 80px 20px 96px;box-sizing:border-box}
.nsp-dokv{position:relative;max-width:680px}
.nsp-dok{--ndk-fs:17px;--ndk-lh:1.65;--ndk-pad:3px 0;--ndk-hfs:21px;--ndk-hpt:22px;--ndk-head:var(--c-head);--ndk-hw:var(--c-hw);--ndk-li:24px;--ndk-bund:30vh}
.nsp-dok .ndk-b{transition:background .2s}
.nsp-dok .ndk-b.nsp-hov{background:color-mix(in srgb,var(--c-acc) 6%,transparent);border-radius:6px}
.nsp-bred .nsp-rul{padding-left:64px;padding-right:48px}
/* Live: tider og mærker i margenen (som notesblokken fra v479) */
.nsp[data-form="live"] .nsp-rul{padding-left:36px}
.nsp-tider{--ndk-gut:84px}
.nsp-tider .ndk-gt{display:grid;grid-template-columns:52px 18px;gap:6px;padding-top:7px;color:var(--c-svag)}
.nsp-tider .ndk-gt.h{padding-top:24px}
.nsp-tider .ndk-gt .cm-m{font-size:13px;line-height:1}

/* ---------- linjen nederst (live-dok.js: Fortæl, hvad Margin skal skrive) ---------- */
.nsp-spm{flex:none;padding:0 80px 24px 96px}
.nsp-spm-f{max-width:760px;display:flex;align-items:center;gap:10px;min-height:56px;padding:0 8px 0 18px;box-sizing:border-box;background:var(--c-bg);border:1px solid var(--c-linje);border-radius:var(--c-R)}
.nsp-spm-f>svg{flex:none;color:var(--m-ai)}
.nsp-spm-f input{flex:1;min-width:0;height:44px;border:0;background:transparent;outline:none;font:inherit;font-size:15px;color:var(--c-ink)}
.nsp-spm-f input::placeholder{color:var(--c-svag)}
.cm .nsp-spm-f input:focus-visible{outline:none!important}
.nsp-spm-f:focus-within{border-color:var(--c-acc)}
.nsp-spm-k{flex:none;height:40px;padding:0 18px;border:0;border-radius:var(--c-pr);background:var(--m-ink);color:var(--m-ink-fg)!important;font-size:14px!important;font-weight:700}

/* ---------- spalten ---------- */
.nsp-h{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--c-linje);background:var(--c-bg)}
.nsp-hh{flex:none;min-height:44px;margin:14px 20px 4px 32px;display:flex;align-items:center;gap:8px}
.nsp-ikk{flex:none;width:36px;height:36px;border:0;border-radius:var(--c-pr);background:transparent;color:var(--c-mut);display:grid;place-items:center}
.nsp-ikk:hover{background:var(--c-felt);color:var(--c-ink)}
.nsp-hk{flex:1;min-height:0;position:relative;padding:14px 20px 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;overflow:hidden}

/* knapperne (live-dok.js' live-knapper) */
.nsp-kg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.nsp-kn{height:104px;border:1px solid var(--c-felt);border-radius:var(--c-R);background:var(--c-kort);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:8px;color:var(--c-ink);transition:border-color .15s,transform .15s}
.nsp-kn:hover{border-color:var(--c-linje);transform:translateY(-1px)}
.nsp-kn .cm-tile{--px:52px;border-radius:var(--ss-ir,50%)}
.nsp-kn>span:not(.cm-tile){font-size:12px;font-weight:700;line-height:1.2;text-align:center}

/* Udvidet: ud for hvert afsnit (placeres af noter-spalte.js) */
.nsp-ul{flex:1;min-height:0;position:relative;overflow:hidden}
.nsp-u{position:absolute;left:0;right:0;top:0;padding:8px 28px 8px 32px;transition:background .2s;will-change:transform}
.nsp-u.hov{background:var(--c-tint)}
.nsp-lnk-s{position:absolute;left:14px;top:18px;width:8px;height:2px;background:transparent;transition:background .2s}
.nsp-u.hov .nsp-lnk-s{background:var(--c-acc)}
.nsp-ux{font-size:15px;line-height:1.6;color:var(--c-mut);text-wrap:pretty}
.nsp-ux.frisk{animation:nsp-ind .5s both}
.nsp-uc{padding-top:4px;font-size:13px;line-height:1.5;font-style:italic;color:var(--c-svag)}
.nsp-utom{font-size:13px;color:var(--c-svag)}
.nsp-u:has(.nsp-utom){padding-top:4px;padding-bottom:4px}.nsp-u:has(.nsp-utom) .nsp-lnk-s{top:14px}
.nsp-lytter{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-svag)}
.nsp-bred .nsp-u{padding-left:40px;padding-right:44px}
.nsp-bred .nsp-ux{font-size:16px}
.nsp-vent{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-svag)}
.nsp-vent i,.nsp-lytter i{width:5px;height:5px;border-radius:50%;background:var(--c-svag);animation:nsp-dot 1s infinite}
.nsp-vent i:nth-child(2),.nsp-lytter i:nth-child(2){animation-delay:.15s}.nsp-vent i:nth-child(3),.nsp-lytter i:nth-child(3){animation-delay:.3s}

/* Live: live-teksten - "+ Til mine noter" på hver linje, eller markér og læg i noterne */
.nsp-lt{flex:1;min-height:0;overflow-y:auto;padding:0 20px 20px;display:flex;flex-direction:column;gap:2px}
.nsp-ltl{position:relative;display:flex;gap:12px;padding:8px 10px;margin:0 -10px;border-radius:10px;font-size:14px;line-height:1.5}
.nsp-ltl:hover{background:var(--c-kort)}
.nsp-ltt{flex:none;width:38px;font-family:var(--ss-mono,ui-monospace,monospace);font-size:11px;padding-top:3px;color:var(--c-svag);font-variant-numeric:tabular-nums}
.nsp-ltx{flex:1;min-width:0;user-select:text;cursor:text}
.nsp-ltx b{font-weight:700;color:var(--c-mut)}
.nsp-ltl.dv .nsp-ltx{font-style:italic;color:var(--c-mut)}
.nsp-lt ::selection{background:var(--m-ai-tint)}
.nsp-ltp{position:absolute;right:6px;top:6px;border:0;background:var(--c-kort);padding:2px 8px;border-radius:var(--c-pr);font-size:11px!important;font-weight:700;color:var(--c-acc)!important;opacity:0;transition:opacity .15s}
.nsp-ltl:hover .nsp-ltp,.nsp-ltp.lagt{opacity:1}
.nsp-ltp.lagt{position:static;align-self:flex-start;background:none;color:var(--c-ok)!important;cursor:default;white-space:nowrap}
.nsp-ltk{position:absolute;z-index:3;padding:4px 12px;border:0;border-radius:var(--c-pr);background:var(--m-ink);color:var(--m-ink-fg)!important;font-size:12px!important;font-weight:700;box-shadow:0 4px 12px color-mix(in srgb,var(--m-text) 18%,transparent)}

/* ---------- Ren: Margins noter folder sig ud i selve teksten ---------- */
.nsp-lag{position:absolute;inset:0;pointer-events:none;z-index:2}
.nsp-ord{position:absolute;cursor:pointer;pointer-events:auto;border-bottom:1.5px dotted var(--c-svag);border-radius:3px;transition:background .2s,border-color .3s}
.nsp-ord:hover{border-bottom-color:var(--c-acc)}
.nsp-ord.paa{background:color-mix(in srgb,var(--c-acc) 14%,transparent);border-bottom-color:var(--c-acc)}
.nsp-prik{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--m-ai);cursor:pointer;pointer-events:auto;transition:opacity .3s}
.nsp-prik.ny{animation:nsp-prik .45s cubic-bezier(.2,.9,.3,1.4) both}
.nsp-prik.skjult{opacity:0}
.nsp-fold{position:absolute;left:2px;right:0;pointer-events:auto;background:var(--c-kort);padding:2px 0 2px 16px;border-left:2px solid var(--c-acc);display:flex;flex-direction:column;gap:6px;animation:nsp-ind .3s both}
.nsp-fx{font-size:15px;line-height:1.6;color:var(--c-mut);text-wrap:pretty}
.nsp-fc{font-size:14px;font-style:italic;color:var(--c-mut)}

/* ---------- formvælgeren i fanelinjen (computer-moede.js) ---------- */
.cm-nfs{align-self:center;margin:0 0 6px;display:flex;gap:2px;padding:3px;background:var(--c-felt);border-radius:var(--c-pr)}
.cm-nfs button{border:0;background:transparent;padding:4px 12px;border-radius:var(--c-pr);font-size:12px!important;font-weight:700;color:var(--c-mut)!important;white-space:nowrap}
.cm-nfs button.paa{background:var(--c-kort);color:var(--c-ink)!important;box-shadow:0 1px 3px color-mix(in srgb,var(--m-text) 14%,transparent)}

@keyframes nsp-ind{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes nsp-prik{0%{transform:scale(0)}70%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes nsp-dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes nsp-puls{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.nsp *{animation:none!important;transition:none!important}}

/* et smallere vindue: mindre luft, spalten bliver smallere */
@media (max-width:1280px){
  .nsp{grid-template-columns:minmax(0,1fr) 360px}
  .nsp-rul{padding:36px 40px 20px 48px}.nsp-spm{padding:0 40px 20px 48px}
}
@media (max-width:1000px){
  .nsp,.nsp[data-form="live"]{grid-template-columns:minmax(0,1fr) 300px}
  .nsp.nsp-bred{grid-template-columns:minmax(0,1fr) 50%}
  .nsp-rul{padding:28px 24px 16px 28px}.nsp-spm{padding:0 24px 16px 28px}
  .nsp-kg{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- linjen nederst - fælles for alle faner (computer-moede.js, Robin 7/11) ---------- */
.cm-bund{flex:none;position:relative;background:var(--c-kort);border-top:1px solid var(--c-felt)}
.cm-bund .nsp-spm{padding:12px 80px 18px 96px}
.cm-chat{position:absolute;z-index:5;bottom:calc(100% + 8px);left:96px;width:min(760px,calc(100% - 176px));max-height:42vh;overflow-y:auto;box-sizing:border-box;background:var(--c-kort);border:1px solid var(--c-linje);border-radius:var(--c-R);padding:12px 12px 16px 18px;box-shadow:0 12px 32px color-mix(in srgb,var(--m-text) 16%,transparent);animation:nsp-ind .25s both}
.cm-chat[hidden]{display:none}
.cm-ch-h{display:flex;align-items:center;gap:4px}
.cm-ch-q{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--c-mut)}
.cm-ch-k{flex:none;width:32px;height:32px;border:0;border-radius:var(--c-pr);background:transparent;color:var(--c-mut);display:grid;place-items:center;font-size:13px}
.cm-ch-k:hover{background:var(--c-felt);color:var(--c-ink)}
.cm-ch-k[disabled]{opacity:.35;cursor:default}
.cm-ch-svar{display:flex;flex-direction:column;gap:6px;padding:4px 6px 0 0;font-size:15px;line-height:1.55;white-space:normal}
.cm-ch-svar p{margin:0}
.cm-ch-svar.fejl{color:var(--c-mut)}
@media (max-width:1280px){.cm-bund .nsp-spm{padding:10px 40px 16px 48px}.cm-chat{left:48px;width:min(760px,calc(100% - 88px))}}
@media (max-width:1000px){.cm-bund .nsp-spm{padding:10px 24px 14px 28px}.cm-chat{left:28px;width:calc(100% - 52px)}}

/* v480b: chatten som samtale - historikken med spørgsmålene, folder ned og åbnes igen med "Chat · N" */
.cm-chat{padding:0 12px 14px 18px;max-height:min(58vh,560px)}
.cm-ch-h{position:sticky;top:0;z-index:1;background:var(--c-kort);padding:10px 0 8px;margin-bottom:4px;border-bottom:1px solid var(--c-linje)}
.cm-ch-t{flex:1;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--c-mut)}
.cm-ch-t svg{color:var(--m-ai)}
.cm-ch-log{display:flex;flex-direction:column;gap:18px;padding-top:10px}
.cm-ch-par{display:flex;flex-direction:column;gap:8px}
.cm-ch-spm{align-self:flex-end;max-width:80%;padding:9px 14px;border-radius:16px 16px 4px 16px;background:var(--c-felt);color:var(--c-ink);font-size:14px;line-height:1.45;white-space:normal}
.cm-ch-fod{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--c-svag)}
.cm-ch-ud{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:var(--c-pr);background:transparent;color:var(--c-mut);font-size:12px!important;font-weight:600}
.cm-ch-ud:hover{background:var(--c-felt);color:var(--c-ink)}
.cm-ch-par:first-child{padding-top:2px}
.cm-ch-aabn{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--c-linje);border-radius:999px;background:transparent;color:var(--c-mut);font-size:13px!important;font-weight:600}
.cm-ch-aabn[hidden]{display:none}
.cm-ch-aabn svg{color:var(--m-ai)}
.cm-ch-aabn:hover{color:var(--c-ink);border-color:var(--c-mut)}