/* ┌─────────────────────────────────────────────────────────────────────────────┐
   │  kontrolpanel-morf.css — S1 "Midtpunktet" (13/7)                            │
   │                                                                             │
   │  Ved ny session sætter Home .kp-ny på .mainframe-face-front: kontrol-       │
   │  panelet (omnifeltet) står da centreret i mainframen med to store valg      │
   │  under sig. Når konsultationen starter eller et notat er på vej, fjernes    │
   │  klassen, og panelet glider ned til bottom:14px (basereglen i app.css).     │
   │  Facit: docs/design/kontrolpanel-morf-varianter.html (S1)                   │
   │       + docs/design/s1-transkript-varianter.html.                           │
   │  Tilstanden styres af MF_Kontrolpanel.cs (ErKontrolpanelCentreret).         │
   └─────────────────────────────────────────────────────────────────────────────┘ */

/* Selve morfen: bottom animeres oven i app.css' width-transition */
.editor-controls-inline.note-controls {
    transition: width 180ms ease, max-width 180ms ease,
                bottom 650ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kp-ny .editor-controls-inline.note-controls {
    bottom: 30%;
}

/* ── Startknappen over feltet ──
   Ved start synker den ned mod feltet (translateY + scale), mens mic-ikonet
   "lander" inde i feltet — de to animationer tilsammen læses som én bevægelse. */
.kp-valg {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(22px) scale(0.6);
    transition: max-height 500ms ease, opacity 350ms ease,
                margin 500ms ease, transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kp-ny .kp-valg {
    max-height: 70px;
    margin-bottom: 12px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.kp-valg .kp-valg-stor {
    /* Mørk navy som i mockuppen — det primære valg på en frisk session.
       Skyggen er blød og spredt (to lag, lav opacitet) frem for kantet. */
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.92rem;
    padding: 13px 26px;
    background: var(--navy, #15324a);
    border: 0;
    color: #fff;
    box-shadow:
        0 18px 44px rgba(21, 50, 74, 0.16),
        0 4px 14px rgba(21, 50, 74, 0.10);
}

.kp-valg .kp-valg-stor:hover {
    background: #1d4363;
}

/* ── Mic'en i feltet (efter start) ──
   Lander oppefra i feltets venstre ende og bliver stående: teal fyld
   nedefra viser lydniveauet (--mic-fill sættes af speech-pipelinen),
   blid puls-glød mens der optages, dæmpet slate når der er pauseret. */
.editor-search-inline.note-edit-bar.has-live-mic input {
    padding-left: 52px;
}

.note-edit-bar .omni-mic-live {
    position: absolute;
    left: 5px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #64788c;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
    transform: translateY(-50%);
    animation: kp-mic-land 450ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: background 300ms ease;
}

.note-edit-bar .omni-mic-live span {
    position: relative;
    z-index: 1;
    display: flex;
}

/* M2-ikonet (solid kapsel): skarp SVG i stedet for emoji-fontens 🎙 */
.kp-valg .kp-valg-stor svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.note-edit-bar .omni-mic-live svg {
    width: 18px;
    height: 18px;
    display: block;
}

.note-edit-bar .omni-mic-live::before {
    /* lydniveau: teal fylder op nedefra, som topknappens grønne fill */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mic-fill, 0%);
    background: linear-gradient(180deg, rgba(63, 151, 166, 0.55), rgba(63, 151, 166, 0.9));
    transition: height 80ms linear;
}

.note-edit-bar .omni-mic-live.is-recording {
    background: var(--navy, #15324a);
    animation: kp-mic-land 450ms cubic-bezier(0.4, 0, 0.2, 1),
               kp-mic-puls 2.4s ease-in-out 450ms infinite;
}

@keyframes kp-mic-land {
    from {
        transform: translateY(calc(-50% - 30px)) scale(1.4);
        opacity: 0;
    }
    to {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

@keyframes kp-mic-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63, 151, 166, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(63, 151, 166, 0.12); }
}

/* ── Stop-hint ──
   Når optagelsen starter, blinker en lille seddel op over mic'en og viser,
   hvor man stopper — og toner selv bort efter ~6 sekunder. Renderes af
   Blazor pr. optagelse, så animationen afspilles ved hver start. */
.note-edit-bar .kp-stop-hint {
    position: absolute;
    left: 0;
    bottom: calc(100% + 12px);
    white-space: nowrap;
    background: #fff;
    border: 1px solid rgba(21, 50, 74, 0.10);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #2a4d6c;
    box-shadow: 0 8px 26px rgba(80, 105, 130, 0.16);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    /* Venter ~5 sek. før den blinker op — lige efter start er øjnene på
       transskriptionen øverst, så hintet skal ikke konkurrere med den. */
    animation: kp-stop-hint 6.5s ease 5s forwards;
}

.kp-stop-hint-pil {
    /* lille pil, der peger ned mod mic'en */
    position: absolute;
    left: 16px;
    bottom: -5px;
    width: 9px;
    height: 9px;
    background: #fff;
    border-right: 1px solid rgba(21, 50, 74, 0.10);
    border-bottom: 1px solid rgba(21, 50, 74, 0.10);
    transform: rotate(45deg);
}

@keyframes kp-stop-hint {
    0% { opacity: 0; transform: translateY(6px); }
    7%, 85% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .note-edit-bar .kp-stop-hint {
        /* uden animation: vis hintet statisk, mens der optages */
        animation: none;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kp-valg,
    .note-edit-bar .omni-mic-live {
        animation: none;
        transition: none;
    }
}

/* ── Notatet under det svævende felt ──
   Feltet ligger oven på notatfladen, så: (1) ekstra scroll-luft i bunden af
   output-området, så den sidste tekst kan scrolles fri af feltet, og
   (2) udtoning + blur-stribe langs panelets bund — men KUN når der faktisk
   gemmer sig tekst i den retning (klasserne kan-scrolle-op/-ned sættes af
   editorFadeInterop.js). Et kort notat står knivskarpt uden masker. */
.editor-output,
.editor-output.is-template-mode {
    padding-bottom: 130px;
}

.editor-output.kan-scrolle-op {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 26px);
}

.editor-output.kan-scrolle-ned {
    -webkit-mask-image: linear-gradient(to bottom,
        #000 calc(100% - 130px), transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 calc(100% - 130px), transparent 100%);
}

.editor-output.kan-scrolle-op.kan-scrolle-ned {
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0, #000 26px, #000 calc(100% - 130px), transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0, #000 26px, #000 calc(100% - 130px), transparent 100%);
}

.focus-editor::after {
    content: "";
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    /* under det svævende felt (z-index 120), over notatteksten */
    z-index: 119;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 100%);
    mask-image: linear-gradient(to top, #000 15%, transparent 100%);
}

/* Blur-striben følger bund-masken: kun når der er mere notat under kanten. */
.focus-editor:has(.editor-output.kan-scrolle-ned)::after {
    display: block;
}