/* ┌─────────────────────────────────────────────────────────────────────────────┐
   │  stillaering.css — stillæringens to flader i MCP-kolonnen                   │
   │                                                                             │
   │  Flyttet hertil fra app.css (15/8) sammen med ombygningen fra "kortet       │
   │  lander selv" til "kortet ligger bag en knap":                              │
   │                                                                             │
   │    ⓪ .stil-chip        indgangen i kolonnen — svajer tre gange og tier      │
   │    ① .stil-kort        popoveren ud til højre, forankret på knappen         │
   │    ② .stil-regel-*     Min stil-fanen i indstillinger                       │
   │                                                                             │
   │  Design: docs/design/stillaering-ui-mockup.html.                            │
   │  Kortets eget udtryk (radius, kant, gradient, skygge) er uændret fra        │
   │  app.css — kun forankringen og indgangen er ny.                             │
   └─────────────────────────────────────────────────────────────────────────────┘ */

/* ─── ⓪ Indgangen: "Vi har bemærket…"-knappen ─────────────────────────────────
   Geometrien er kolonnens egen (.dag-chip i dagens-notater.css: fuld bredde,
   11 px radius, › yderst), så de to indgange står som søskende. Farven er
   ✦ Lært-chippens apricot, ikke kolonnens blå: de blå chips er journalen,
   den her er lægens egne rettelser, og de to må ikke forveksles med et blik. */

.stil-chip-vaert {
    position: relative;
}

.stil-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    border: 1px solid rgba(217, 139, 82, .5);
    background: rgba(251, 238, 226, .8);
    border-radius: 11px;
    padding: 8px 12px;
    margin-top: 7px;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: #8a5a2b;
    cursor: pointer;
    text-align: left;
    /* Tre svaj, så falder den til ro. En knap, der bliver ved med at vinke,
       er en notifikation, der tigger — og hele forslagsmotoren er bygget på
       "aldrig nagging". */
    animation: stil-chip-ind .3s ease-out,
               stil-chip-svaj 1.7s ease-in-out .3s 3;
}

.stil-chip:hover {
    background: rgba(253, 243, 233, .95);
    border-color: rgba(217, 139, 82, .75);
}

/* Åben tilstand: knappen bliver hvid, så det er tydeligt, hvad kortet hører til. */
.stil-chip.er-aaben {
    background: #fff;
    border-color: rgba(217, 139, 82, .85);
    animation: none;
}

.stil-chip-prik {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d98b52;
    flex: none;
}

.stil-chip-pil {
    margin-left: auto;
    color: #c39064;
    font-weight: 400;
}

@keyframes stil-chip-ind {
    from { opacity: 0; transform: translateY(-6px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

/* Blød vippen om knappens egen midte — naboerne flytter sig ikke. Udslaget er
   lille (0,6°), fordi elementet er bredt: samme vinkel, der er diskret på en
   lille pille, bliver et vejrhane-udsving på en fuld kolonnebredde. */
@keyframes stil-chip-svaj {
      0% { transform: none; box-shadow: 0 0 0 0 rgba(217, 139, 82, .4); }
     25% { transform: rotate(-.6deg) scale(1.014); }
     50% { transform: rotate(.6deg) scale(1.014); box-shadow: 0 0 0 8px rgba(217, 139, 82, 0); }
     75% { transform: rotate(-.3deg) scale(1.006); }
    100% { transform: none; box-shadow: 0 0 0 0 rgba(217, 139, 82, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .stil-chip { animation: none; }
}

/* ─── ① Kortet: "Vi har bemærket din skrivestil" ──────────────────────────────
   Var fixed i skærmens højre hjørne (app.css 6/8). Er nu forankret PÅ knappen
   og folder ud til HØJRE: kolonnen er for smal til 420 px, og en udfoldning
   nedad ville skubbe Spørg journalen ud af syne — det felt skal ligge stille.
   +30 px, så kortet er fri af panelets egen kant og runding. */

.stil-kort {
    position: absolute;
    top: -10px;
    left: calc(100% + 30px);
    width: min(420px, calc(100vw - 32px));
    z-index: 95;
    text-align: left;
    border-radius: 16px;
    border: 1px solid rgba(47, 108, 143, .22);
    background: linear-gradient(180deg, rgba(249, 253, 255, .98), rgba(237, 244, 251, .98));
    box-shadow: 0 16px 44px rgba(17, 31, 41, .2);
    padding: 16px 18px 14px;
    animation: stil-kort-ind .28s ease-out;
}

/* Pil ind mod knappen — kortet skal se ud som knappens indhold, ikke som
   endnu et vindue, der er landet ved siden af. */
.stil-kort::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -6.5px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-radius: 2px;
    background: rgba(249, 253, 255, .98);
    border-left: 1px solid rgba(47, 108, 143, .22);
    border-bottom: 1px solid rgba(47, 108, 143, .22);
}

@keyframes stil-kort-ind {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .stil-kort { animation: none; }
}

.stil-kort-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.stil-kort-titel { font-weight: 600; font-size: 14.5px; color: #23425c; }

.stil-kort-luk {
    border: none;
    background: none;
    color: #90a2b4;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.stil-kort-luk:hover { background: rgba(21, 50, 74, .07); color: #4a5f74; }

.stil-kort-intro,
.stil-kort-fod {
    font-size: 12.5px;
    color: #6a7d90;
    line-height: 1.5;
    margin: 0 0 12px;
}

.stil-kort-fod {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(21, 50, 74, .1);
}

.stil-forslag {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(21, 50, 74, .1);
    border-radius: 11px;
    padding: 11px 13px;
    margin-bottom: 9px;
}

.stil-forslag-tekst { font-size: 13.5px; color: #23425c; font-weight: 550; }

.stil-forslag-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #8b9cad;
    margin-top: 3px;
}

.stil-forslag-knapper {
    display: flex;
    justify-content: flex-end;   /* husets regel: sekundaer venstre, primaer yderst hoejre */
    gap: 8px;
    margin-top: 9px;
}

.stil-btn {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    cursor: pointer;
    border: 1px solid rgba(21, 50, 74, .12);
    background: #fff;
    color: #46596c;
}
.stil-btn:hover { background: #f4f8fb; }

.stil-btn-ja {
    background: linear-gradient(180deg, #3b7fcb, #2f6aad);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.stil-btn-ja:hover { background: linear-gradient(180deg, #4189d6, #3574b8); }

/* ─── ② Min stil-fanen i indstillinger ────────────────────────────────────── */

.stil-regel-linje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    background: rgba(214, 232, 243, .35);
    margin-bottom: 7px;
}

.stil-regel-fjern {
    border: none;
    background: none;
    color: #90a2b4;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.stil-regel-fjern:hover { background: rgba(21, 50, 74, .08); color: #c0564d; }

.stil-tom {
    font-size: 13px;
    color: #7a8a9a;
    line-height: 1.55;
}

/* Testpanel i Min stil — kun mens funktionen udvikles (6/8). */
.stil-testpanel {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px dashed rgba(21, 50, 74, .18);
}

.stil-testpanel-titel {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b9cad;
    margin-bottom: 6px;
}

.stil-testpanel-knapper {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.stil-teststatus {
    margin-top: 10px;
    font-size: 12.5px;
    color: #2f6aad;
    background: rgba(214, 232, 243, .45);
    border-radius: 8px;
    padding: 7px 10px;
}