/* ── JournalAgentHint · det stille hint i den tomme Spørg journalen-flade ──────
   Variation A2 (Morten 17/9-2026). Flyttet til pakken FlowPilot.JournalAgent.UI 2/10-2026 —
   værten linker filen (_content/FlowPilot.JournalAgent.UI/journalagent-hint.css).

   Fylder den tomme flade mellem .left-divider og .agent-bottom (margin-top:auto),
   når FlowPilot JournalAgent kræver noget af brugeren. Containeren er en ORDRET kopi af
   appens låsebesked .mcp-laas-besked (app.css:609-620), så de to fyld-mønstre står ens.
   Knappen er en lille hvid pille i patientfeltets udtryk (is & glas: hvidt felt,
   kant rgba(21,50,74,.18)) i de runde knappers højde. Ingen boks, ramme, overskrift,
   logo eller ny farve. Kildehenvisningerne peger på BlazorUI's wwwroot/app.css. */

/* Kurt 5/10: hintet er et FLYDENDE lag over hele kolonnen (aside.panel-left er position:relative, app.css:507),
   og kortet står midt i den — lodret og vandret — oven på det, der måtte stå der (patient, svar). Laget selv
   lader klik gå igennem; kun kortet fanger dem. */
.agent-hint {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 0 12px;
    text-align: center;
    color: #7f90a2;                             /* fladens dæmpede tekstfarve (undertekster) */
    font-size: 0.92rem;                         /* .mcp-laas-besked, app.css:618 */
    line-height: 1.45;                          /* :619 */
    pointer-events: none;
}

/* Lille hvid pille — patientfeltets udtryk i de runde knappers 32 px. Bruges både som <button> og
   som <a> (Start-linket er et ægte link), derfor nulstilles linkets understregning og farve. */
.agent-hint-knap {
    display: inline-flex;
    align-items: center;
    gap: 8px;                                   /* .mk-tilbage-btn (ikon + tekst), app.css:3219 */
    height: 32px;                               /* .cpr-inside-btn, app.css:910-911 */
    padding: 0 14px;                            /* .patient-id-input padding-left, app.css:827 */
    border: 1px solid rgba(21, 50, 74, 0.18);   /* is & glas-overstyring af patientfeltet, app.css:4659 */
    border-radius: 999px;                       /* .patient-id-input, app.css:824 (Bootstrap sætter button { border-radius: 0 }) */
    background: #fff;                           /* app.css:4658 */
    color: #24384d;                             /* .patient-id-input, app.css:830 — ikonet arver den via currentColor */
    font: inherit;                              /* app.css:828 → Aptos-stakken, app.css:31 */
    font-size: 0.82rem;                         /* kompakt patientfelt app.css:925 / .ny-session-inside app.css:2004 */
    font-weight: 600;                           /* app.css:831 */
    text-decoration: none;
    cursor: pointer;                            /* .cpr-activate-btn, app.css:902 */
    transition: transform 120ms ease, box-shadow 120ms ease;   /* .ny-session-inside, app.css:2006 */
}
a.agent-hint-knap:hover                { color: #24384d; text-decoration: none; }                                       /* Bootstrap farver og understreger <a> */
.agent-hint-knap:hover:not(:disabled)  { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(17, 40, 68, 0.10); }  /* .ny-session-inside:hover, app.css:2010-2011 */
.agent-hint-knap:active:not(:disabled) { transform: translateY(0); box-shadow: none; }                                  /* app.css:2015-2016 */
.agent-hint-knap:disabled              { opacity: 0.55; cursor: default; }                                              /* .cpr-activate-btn:disabled, app.css:940-941 */
.agent-hint-knap:focus-visible         { outline: 2px solid rgba(47, 108, 143, 0.32); outline-offset: 3px; }            /* .patient-active-display:focus-visible, app.css:872-873 */

/* Pillens ikon: kolonnens egen pil (samme streg som appens .upload-icon, app.css:942-955), her vendt NEDAD
   (download) og farvet med knappens tekstfarve. Pakken tegner den selv, så den ikke hænger på værtens klasse. */
.agent-hint-ikon {
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m-7-7 7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m-7-7 7 7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Start: en afspil-trekant i samme streg og størrelse (Kurts mockup 1/10) */
.agent-hint-ikon.er-start {
    width: 13px;
    height: 13px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E");
}

/* Fodnote-linket: understreget som .fp-onb2-annuller, i fladens egen tone. Bruges både som <a> og som
   <button> (handlinger, der kører i appen), derfor nulstilles knappens ramme og baggrund.
   Farven SKAL stå — Bootstrap farver <a> blå. */
.agent-hint-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.78rem;                         /* .kol-fane app.css:564 / .dag-tom dagens-notater.css:130 */
    color: #7f90a2;                             /* app.css:617 — samme tone som hintteksten */
    text-decoration: underline;                 /* .fp-onb2-annuller, app.css:4075 */
    cursor: pointer;
}
.agent-hint-link:hover,
.agent-hint-link:focus-visible { color: var(--muted, #607284); }   /* --muted #607284, app.css:5 — ét trin mørkere, ikke navy: fodnoten må ikke overhale handlingen */
.agent-hint-link:focus-visible { outline: 2px solid rgba(47, 108, 143, 0.32); outline-offset: 3px; }   /* app.css:872-873 */
.agent-hint-link:disabled      { opacity: 0.55; cursor: default; }

/* Undertekst og punktliste (Kurt 1/10): den lille forklaring under sætningen — fodnotens grad og tone */
.agent-hint-under {
    font-size: 0.78rem;
    color: #7f90a2;
}
.agent-hint-liste {
    margin: 2px 0 0 0;
    padding-left: 18px;
    text-align: left;
}
/* "Tryk på:" i kortet efter Download (Kurt 2/10): det, brugeren selv skal gøre — kortets egen tekstfarve,
   ét trin under sætningen; filnavnet er ét langt ord og må brydes, så det bliver inden for kortet */
.agent-hint-trin {
    font-size: 0.84rem;
}
.agent-hint-trin li { overflow-wrap: anywhere; }
.agent-hint-under.er-fejl { color: #a94442; }   /* statuspanelets fejltekst (JournalAgentIkon.razor) */

/* ── Trin, der kræver brugeren (Kurts godkendte mockup 1/10; prikkerne fjernet 5/10 — kun kortets kant bærer farven) ──
   Kortets tynde kant har statusfarven: gul = noget mangler, rød = en anden er logget ind i journalsystemet (eller
   JournalAgenten mangler), grøn = kvitteringen efter brugerens egen handling — i statuspanelets lyse toner */
.agent-hint-kort.er-roed  { border-color: #f0b8b4; }   /* statuspanelets røde boks */
.agent-hint-kort.er-gul   { border-color: #f0d68a; }
.agent-hint-kort.er-groen { border-color: #b8e0c8; }

/* Pille + link side om side (Godkend · Afvis, Ja, det er mig · Nej) */
.agent-hint-raekke {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
}


/* ── Efter Download: SPOTLIGHT (Morten 17/9) ────────────────────────────────
   Appen dæmpes bag et navy-lag, og hintet bliver det eneste lyse. Den stiplede pil mod
   browserens downloadboble blev taget ud 30/9 (siden kan hverken se eller ramme boblen,
   som hænger i browserens kant) og er sat ind igen 2/10 på Kurts ønske — se nederst.
   z-index: JournalAgent-panelets bagtæppe/panel bruger 59/60 (JournalAgentIkon.razor);
   spotlightet ligger over dem og over topbaren. */
.agent-hint-scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(21, 50, 74, 0.55);         /* --navy #15324a (app.css:11) med alfa — appens egen mørke */
    cursor: pointer;                            /* klik uden for lukker (husets popup-regel) */
}
.agent-hint.er-spot {
    z-index: 81;                                /* over scrim'en; kræver at ingen forælder klipper stacking-konteksten */
}
/* Kortet (Kurt 5/10: alle trin): hvidt, let skygge, tynd kant i statusfarven — omslutter kun indholdet,
   laget omkring det er gennemsigtigt. */
.agent-hint-kort {
    display: grid;
    justify-items: center;
    gap: 10px;                                  /* .mcp-laas-besked, app.css:614 */
    max-width: 100%;
    background: #fff;                           /* indhold står på hvidt, is & glas (app.css:4656) */
    border: 1px solid #d5dde5;                  /* JournalAgent-panelets kant; farves af .er-roed/.er-gul/.er-groen */
    border-radius: 12px;                        /* .agent-answer-button, app.css:1159 */
    padding: 16px 18px;                         /* husets kortpadding (app.css:126) */
    color: #24384d;                             /* .patient-id-input tekst, app.css:830 — sætningen er det bærende */
    box-shadow: 0 6px 24px rgba(20, 40, 60, 0.15);   /* JournalAgent-panelets skygge (JournalAgentIkon.razor) */
    pointer-events: auto;                       /* laget lader klik gå igennem; kortet fanger dem */
}
/* Kortet efter Download (Kurt 2/10): en lille vejledning i flere linjer læses bedst venstrestillet */
.agent-hint-kort.er-venstre {
    justify-items: start;
    text-align: left;
    position: relative;                         /* den roterende kant (nedenfor) lægger sig på kortets kant */
}

/* Roterende kant på kortet efter Download (Kurt 6/10): installationen er en længere proces, så kortet viser, at der
   arbejdes, indtil kæden er klar. Samme teknik som CPR-feltet og Spørg journalen (.ask-edge i app.css): SVG med
   procent-geometri og pathLength=100, så et stykke på 11 % af kanten glider rundt med konstant fart uanset kortets
   størrelse. Kortets egen (gule) kant er sporet; det glidende stykke har feltets blå. */
.agent-hint-kant {
    position: absolute;
    inset: -1px;                                /* oven på kortets 1 px kant (procent-målene gælder padding-boksen) */
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    overflow: visible;
    pointer-events: none;
}
.agent-hint-kant rect {
    fill: none;
    stroke: #3a9dff;                            /* .ask-edge .ask-hi, app.css */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 11 89;
    animation: agent-hint-kant-rundt 1.9s linear infinite;
}
@keyframes agent-hint-kant-rundt { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
    .agent-hint-kant rect { animation: none; opacity: 0.6; }
}

/* Pilen mod browserens download-liste (Mortens idé 17/9; tegnet forfra 5/10): JournalAgentHint.razor.js lægger
   et SVG over hele siden og tegner stien ud fra kortets faktiske plads — fra kortets højre kant op til sidens
   øverste kant ved download-ikonet. Pilehovedet er et marker, der følger stregens retning (ingen strækning,
   derfor ingen skævhed). Over scrim'en (samme z-index, senere i dokumentet). */
.agent-hint-pil {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    overflow: visible;
}
.agent-hint-pil > path {
    fill: none;
    stroke: #F6FBFF;                            /* topbarens tekstfarve — lys på det mørke lag */
    stroke-width: 3.5;
    stroke-dasharray: 9 8;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    animation: agent-hint-ind 1s ease-out .3s both, agent-hint-march 1.1s linear .3s infinite;
}
.agent-hint-pil marker path {
    fill: #F6FBFF;
    stroke: none;
}
@keyframes agent-hint-ind   { from { opacity: 0; } to { opacity: 1; } }
@keyframes agent-hint-march { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .agent-hint-pil > path { animation: none; }
}

/* ── Statusprikken ved stregen under patientfeltet (Kurt 6/10-2026, runde 4) ──────────────────────
   JournalAgentPrik.razor — for ALLE med journaladgang (ikke kun fpadmins og testere). Ankeret er værtens
   streg (.left-divider får klassen agent-prik-anker); prikken dækker stregens venstre ende, så stregen
   "starter" efter ringen. Farverne er ikonets lampe (JournalAgentIkon.razor: Groen/Gul/Roed/Graa) —
   gentaget her, fordi css ikke kan læse C#-konstanterne. Klik åbner motorens panel under prikken. */
.agent-prik-anker { position: relative; }
.agent-prik {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px; padding: 0; margin: 0; border-radius: 999px;
    border: 1.5px solid #fff; background: #b8c2cc;               /* grå = status ukendt endnu */
    box-shadow: 0 0 0 1px rgba(21, 50, 74, .12); cursor: pointer; z-index: 2;
}
.agent-prik.er-groen { background: #2fa463; }
.agent-prik.er-gul   { background: #e0a800; }
.agent-prik.er-roed  { background: #d9534f; }
.agent-prik.er-hviler { box-shadow: 0 0 0 1px rgba(21, 50, 74, .12), 0 0 0 3px rgba(224, 168, 0, .18); }   /* hviler: svag gul glød */
.agent-prik:focus-visible { outline: 2px solid #16305e; outline-offset: 2px; }

/* Den blå hover-boks (husets data-tip, som i JournalAgentIkon.razor.css) — UNDER prikken og mod højre:
   over prikken er der kun ~60 px, og .layout er overflow:hidden. */
.agent-prik[data-tip]:hover::after, .agent-prik[data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 7px); left: 0;
    width: max-content; max-width: 320px; white-space: pre-line; text-align: left;
    background: #16305e; color: #fff; font-style: normal; font-weight: 400; font-size: 12px; line-height: 1.5;
    padding: 8px 12px; border-radius: 8px; z-index: 10; pointer-events: none;
    box-shadow: 0 6px 18px rgba(20, 40, 80, 0.18);
}
.agent-prik[data-tip=""]::after { display: none; }

/* ── Den flade udgave (Morten 16/10, bud A) — kun trinnet "ikke installeret" ───────────────────────────
   Ingen boks, ingen kant, ingen skygge: et blødt mærke i mist, overskrift, én forklaring og husets mørke
   pille står frit på fladen. Farverne er appens tokens (app.css: --ink, --muted, --navy, --mist). */
.agent-hint-flad {
    display: grid;
    justify-items: center;
    gap: 4px;
    max-width: 220px;
    text-align: center;
    pointer-events: auto;                       /* laget lader klik gå igennem; indholdet fanger dem */
}
.agent-hint-maerke {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #d9e9f2;                        /* --mist */
    color: #15324a;                             /* --navy — ikonet arver den via currentColor */
}
.agent-hint-ikon.er-maerke {
    width: 20px;
    height: 20px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.agent-hint-ikon.er-maerke.er-pc {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8'/%3E%3Cpath d='M12 16v4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8'/%3E%3Cpath d='M12 16v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.agent-hint-ikon.er-maerke.er-start {
    width: 20px;
    height: 20px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.agent-hint-pille { text-decoration: none; color: #fff; }
.agent-hint-flad .agent-hint-link { margin-top: 6px; }
.agent-hint-ikon.er-maerke.er-db {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.agent-hint-ikon.er-maerke.er-bruger {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.agent-hint-ikon.er-maerke.er-ok {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.agent-hint-ikon.er-maerke.er-fejl {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.agent-hint-flad.er-bred { max-width: 300px; }
.agent-hint-flad .agent-hint-liste { text-align: left; margin: 4px 0 0; padding-left: 18px; }
.agent-hint-flad .agent-hint-trin { font-size: 0.86rem; color: #16212b; }
.agent-hint-flad .agent-hint-tekst > div:first-child { text-align: left; }
.agent-hint-flad .agent-hint-under { margin-top: 6px; }
.agent-hint-flad .agent-hint-raekke { margin-top: 8px; }
.agent-hint-flad .agent-hint-pille { margin-top: 0; }
.agent-hint-titel b { font-weight: 700; }
.agent-hint-titel {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: #16212b;                             /* --ink */
    text-wrap: balance;
}
.agent-hint-tekst {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #607284;                             /* --muted */
}
.agent-hint-pille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: #15324a;                        /* --navy, som sendeknappen i skrivefeltet */
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.agent-hint-pille:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(21, 50, 74, 0.22); }
.agent-hint-pille:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.agent-hint-pille:focus-visible { outline: 2px solid #2f6c8f; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .agent-hint-pille { transition: none; } .agent-hint-pille:hover { transform: none; } }