/* ┌─────────────────────────────────────────────────────────────────────────────┐
   │  efterdiktat.css — efterdiktatet i feltet (mockup efterdiktat-felt-enkelt,   │
   │  Morten 15/10)                                                              │
   │                                                                             │
   │  Når et notat ligger i editoren, og lægen dikterer videre, bærer det        │
   │  eksisterende felt efterdiktatet (.har-efterdiktat): teksten "Dikter dine   │
   │  ændringer til notatet", mic'en i husets abrikos, en sætningstæller og ⓘ,   │
   │  der åbner forslagsboksen "Hvad kan jeg sige?". Intet transskript vises.    │
   │  Efter redigeringen får de nye linjer en grøn tusch, fjernede linjer et     │
   │  gennemstreget spøgelse, og en Fortryd-chip ruller tilbage.                 │
   └─────────────────────────────────────────────────────────────────────────────┘ */

/* ── Feltet under et efterdiktat ───────────────────────────────────────────── */
/* Feltet er bundforankret (.editor-controls-inline, bottom: 14px), så når det
   vokser med teksten, vokser det OPAD. Mic, ⓘ og ↑ bliver på nederste linje. */
.editor-search-inline.har-efterdiktat {
    border-color: rgba(47, 108, 143, 0.4);
    height: auto;
    min-height: 46px;
    border-radius: 24px;
    display: block;
}
.efterdiktat-tekstfelt {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    outline: none;
    background: transparent;
    resize: none;
    color: var(--ink, #16212b);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 9px 86px 9px 52px;      /* venstre: mic'en · højre: ⓘ + ↑ */
    field-sizing: content;           /* vokser med indholdet (Chromium 123+) */
    min-height: 38px;
    max-height: 40vh;
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-wrap: anywhere;
}
/* Ved lang tekst sætter app.css feltet til ÉN linje med vandret scroll (.is-scrollable
   .note-edit-input: nowrap) — det må tekstområdet ikke arve: det skal ombryde og vokse. */
.editor-search-inline.note-edit-bar.is-scrollable .efterdiktat-tekstfelt,
.editor-search-inline.note-edit-bar.is-expanded .efterdiktat-tekstfelt {
    white-space: pre-wrap;
    overflow-x: hidden;
    text-overflow: clip;
    max-width: 100%;
}
.efterdiktat-tekstfelt::placeholder { color: var(--ink, #16212b); opacity: 0.85; }
.efterdiktat-tekstfelt:read-only { color: var(--muted, #607284); }
.editor-search-inline.har-efterdiktat .omni-mic-live,
.editor-search-inline.har-efterdiktat .omni-send,
.editor-search-inline.har-efterdiktat .efterdiktat-info { top: auto; transform: none; }
.editor-search-inline.har-efterdiktat .omni-mic-live { bottom: 5px; animation: none; }
.editor-search-inline.har-efterdiktat .omni-send { bottom: 4px; }
.editor-search-inline.har-efterdiktat .efterdiktat-info { bottom: 13px; }

/* Mic'en lytter: husets abrikos og en blød ring — den rigtige mic, bare farvet */
.editor-search-inline.har-efterdiktat .omni-mic-live.is-recording {
    background: var(--apricot, #d98b52);
    animation: efterdiktat-puls 1.6s ease-out infinite;   /* vinder over 'animation: none' ovenfor (højere specificitet) */
}
@keyframes efterdiktat-puls {
    0%   { box-shadow: 0 0 0 0 rgba(217, 139, 82, 0.45); }
    100% { box-shadow: 0 0 0 9px rgba(217, 139, 82, 0); }
}

/* Ringen om ↑: "det er HER, du sender" */
.editor-search-inline.har-efterdiktat .omni-send { box-shadow: 0 0 0 4px rgba(47, 108, 143, 0.18); }

/* ⓘ: absolut, lige til venstre for ↑ */
.efterdiktat-info {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    right: 52px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(47, 108, 143, 0.6);
    background: #fff;
    color: var(--blue, #2f6c8f);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(47, 108, 143, 0.12);
}
.efterdiktat-info:hover,
.efterdiktat-info.er-aaben { background: var(--blue, #2f6c8f); color: #fff; }

/* ── Forslagsboksen "Hvad kan jeg sige?" (ⓘ) ──────────────────────────────── */
.efterdiktat-bagtaeppe {                    /* klik udenfor lukker (husets popup-regel) */
    position: fixed;
    inset: 0;
    z-index: 30;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: default;
}
.efterdiktat-forslag {
    position: absolute;                     /* ankeret er .note-edit-shell (position: relative) */
    right: 0;
    bottom: calc(100% + 12px);
    width: 340px;
    max-width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 31;
    box-sizing: border-box;
    padding: 14px 18px 12px;
    background: var(--panel, #fff);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(25, 49, 73, 0.16), 0 4px 10px rgba(25, 49, 73, 0.08);
    text-align: left;
    animation: efterdiktat-ind .18s ease-out;
    scrollbar-width: thin;
}
@keyframes efterdiktat-ind { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.efterdiktat-forslag-hoved {
    display: flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted, #607284);
    margin-bottom: 12px;
}
.efterdiktat-x {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(22, 33, 43, 0.14);
    background: #fff;
    color: var(--muted, #607284);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}
.efterdiktat-x:hover { color: var(--ink, #16212b); border-color: rgba(22, 33, 43, 0.3); }
.efterdiktat-forslag-gruppe {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0 16px;
    border-top: 1px solid rgba(22, 33, 43, 0.12);
}
.efterdiktat-forslag-gruppe b {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue, #2f6c8f);
    margin-bottom: 4px;
}
.efterdiktat-forslag-gruppe span { font-size: 0.8rem; color: var(--ink, #16212b); line-height: 1.4; }
.efterdiktat-forslag-fod {
    border-top: 1px dashed rgba(22, 33, 43, 0.12);
    padding-top: 7px;
    margin-top: 4px;
    font-size: 0.76rem;
    color: var(--faint, #8fa0b1);
}

/* ── Mens der redigeres ────────────────────────────────────────────────────── */
/* Den glidende stribe i bunden af feltet — subtil (Morten 15/10): tynd, lys,
   intet synligt spor, blot et lille blåt skær, der glider frem og tilbage. */
.efterdiktat-spor {
    position: absolute;
    left: 56px;
    right: 56px;
    bottom: 4px;
    height: 2px;
    border-radius: 999px;
    overflow: hidden;
    pointer-events: none;
}
.efterdiktat-spor > i {
    display: block;
    height: 100%;
    width: 28%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(47, 108, 143, 0), rgba(47, 108, 143, 0.45), rgba(47, 108, 143, 0));
    animation: efterdiktat-glid 2.2s ease-in-out infinite alternate;
}
@keyframes efterdiktat-glid { from { transform: translateX(-30%); } to { transform: translateX(290%); } }
/* Pilen er blot dæmpet imens — ingen puls */
.editor-search-inline.har-efterdiktat .omni-send:disabled { opacity: 0.55; box-shadow: none; }

/* Notatet bliver stående, men dæmpet og låst, til det nye lander */
.note-output-editor.efterdiktat-arbejder { opacity: 0.62; pointer-events: none; user-select: none; transition: opacity .25s ease; }

/* Beskeden over feltet, når redigeringen ikke lykkedes */
.efterdiktat-status {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    z-index: 31;
    max-width: 340px;
    font-size: 0.82rem;
    color: #8a4a1f;
    background: rgba(255, 244, 236, 0.98);
    border: 1px solid rgba(217, 139, 82, 0.4);
    border-radius: 10px;
    padding: 7px 11px;
    box-shadow: 0 10px 24px rgba(25, 49, 73, 0.14);
}

/* ── Diffen efter redigeringen (mockup A, Morten 15/10) ─────────────────────
   Det nye får en MEGET svag grøn tone dér, hvor det står; det gamle vises i et
   flygtigt Før-kort ude til højre (nedenfor). Begge står i 2 s og toner langsomt ud over
   5 s — eller forsvinder straks, når lægen rører notatet
   (efterdiktatInterop.js pakker teksten i et span og pakker ud igen; cleanDom
   gør det samme, så det kopierede notat aldrig ser tonen). */
.efterdiktat-ny-linje {
    padding: 1px 4px;
    margin: 0 -4px;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: rgba(122, 197, 154, 0.16);     /* husets grønne, svag — animeres til gennemsigtig */
    animation: efterdiktat-tusch 7s ease-in forwards;
}
@keyframes efterdiktat-tusch        { 0%, 28.6% { background-color: rgba(122, 197, 154, 0.16); } 100% { background-color: rgba(122, 197, 154, 0); } }

/* Før-kortet: fast til højre på skærmen, i højde med første ændring */
.efterdiktat-foer {
    position: fixed;
    right: 24px;
    width: 300px;
    max-width: calc(100vw - 48px);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 32;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--panel, #fff);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 14px 32px rgba(25, 49, 73, 0.14);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted, #607284);
    animation: efterdiktat-foer-vaek 7s linear forwards;
    scrollbar-width: thin;
}
.efterdiktat-foer > b {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--apricot, #d98b52);
    margin-bottom: 6px;
}
.efterdiktat-foer-afsnit { font-weight: 600; font-size: 0.78rem; color: var(--ink, #16212b); margin: 6px 0 2px; }
.efterdiktat-foer-afsnit:first-of-type { margin-top: 0; }
.efterdiktat-foer-linje {
    background: rgba(217, 139, 82, 0.10);
    border-radius: 4px;
    padding: 1px 4px;
    margin: 2px -4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    overflow-wrap: anywhere;
}
.efterdiktat-foer-fod { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(22, 33, 43, 0.12); font-size: 0.72rem; color: var(--faint, #8fa0b1); }
@keyframes efterdiktat-foer-vaek { 0%, 28.6% { opacity: 1; } 100% { opacity: 0; } }
/* Hover: kortet står klart igen, så længe musen er på det (uret i JS holder pause) */
.efterdiktat-foer:hover { animation: none; opacity: 1; }

.efterdiktat-fortryd {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    z-index: 31;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(47, 108, 143, 0.28);
    background: #fff;
    color: var(--navy, #15324a);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(25, 49, 73, 0.14);
    cursor: pointer;
}
.efterdiktat-fortryd:hover { background: #f4f9ff; }

@media (prefers-reduced-motion: reduce) {
    .editor-search-inline.har-efterdiktat .omni-mic-live.is-recording, .efterdiktat-forslag, .efterdiktat-spor > i { animation: none; }
    .efterdiktat-ny-linje, .efterdiktat-foer { animation: none; }
}
@media (max-width: 1000px) {
    .efterdiktat-forslag, .efterdiktat-fortryd, .efterdiktat-status { width: min(340px, 100%); }
}