/* The island (pages/demo/island.js), the preparation feed (feed.js) and the composer chips (starters.js). Uses the chat tokens and follows the theme. */

/* the composer (and the drawer that opens from it) stays above the pinned island */
.ag-composer { position: relative; z-index: 30; }

/* ---------- the island: a pill under the briefing that opens by itself, then folds and stays pinned ---------- */
/* the island is the viewport's header: it sits ABOVE the scrolling messages (the briefing and the conversation scroll under it) and never moves. Before the conversation starts an open island pushes the briefing down;
   in the conversation it hangs over the messages like a drawer turned upside down, with the frame dimmed behind it. */
.ag-isl { position: relative; z-index: 20; flex: none; padding: 10px 12px 0; pointer-events: none; }
.ag-isl[hidden] { display: none; }
:root { --isl-io: cubic-bezier(.65, 0, .35, 1); --isl-back: cubic-bezier(.34, 1.45, .64, 1); --isl-out: cubic-bezier(.16, 1, .3, 1); }   /* the film's easings: in-out cubic, a soft back, expo out */
.islandmsg .isl { pointer-events: auto; position: relative; width: min(100%, 520px); margin: 0 auto; transform-origin: 50% 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 26px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--shadow);
  transition: width .75s var(--isl-io), border-radius .75s var(--isl-io), box-shadow .3s; }   /* width and height (the panel below) open together, on one curve */
.islandmsg.is-open .isl { width: min(100%, 900px); border-radius: 24px; background: var(--surface); }   /* opened it is solid: nothing shows through it */
.islandmsg.rise .isl { animation: islRise .75s var(--isl-back) both; }
@keyframes islRise { from { opacity: 0; transform: translateY(-70px) scale(.85); } to { opacity: 1; transform: none; } }

/* in the conversation the island is a pinned pill; opened, it floats over the messages instead of pushing them */
.ag-isl.chat { height: 56px; }
.islandmsg.chat .isl-body { max-height: min(62vh, 600px); }
.islandmsg.chat .isl { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: min(calc(100% - 24px), 520px); }   /* centred with translate, so the rise's transform composes with it */
.islandmsg.chat.is-open .isl { width: min(calc(100% - 24px), 900px); }   /* explicit widths at both ends, so the width eases over the whole .75s */
/* open, the page underneath steps back: the conversation and the composer blur and dim (as in the film); a clear layer over it takes the click that puts the island away */
.ag-isl.chat.is-open::before { content: ''; position: fixed; inset: 0; z-index: -1; background: transparent; pointer-events: auto; }
@keyframes islScrim { from { opacity: 0; } to { opacity: 1; } }
#agMsgs, .ag-main .ag-composer { transition: filter .75s var(--isl-io), opacity .75s var(--isl-io); }
.ag-chatwrap:has(.ag-isl.is-open) #agMsgs, .ag-chatwrap:has(.ag-isl.is-open) .ag-composer { filter: blur(5px); opacity: .55; }
.islandmsg.chat.is-open .isl { box-shadow: 0 1px 2px rgba(31, 30, 29, .05), 0 24px 60px rgba(31, 30, 29, .16); }

.isl-bar { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 5px 6px; overflow-x: auto; scrollbar-width: none; } .isl-bar::-webkit-scrollbar { display: none; } .isl-bar > * { flex: none; }
.isl-ai { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; margin-right: 3px; border: 0; border-radius: 999px; color: var(--primary-text); background: var(--primary-soft); cursor: pointer; transition: background .15s, color .15s; } .isl-ai b { font: 700 12.5px var(--sans); letter-spacing: .03em; } .isl-ai:hover { background: color-mix(in srgb, var(--primary) 24%, transparent); } .isl-ai.on { background: var(--primary); color: var(--primary-ink); } .isl-ai .spark { width: 16px; height: 15px; }
.isl-ai.busy { animation: islPulse 1.4s ease-in-out infinite; } @keyframes islPulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 18%, transparent); } }
.isl-t { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.isl-t:hover { background: var(--glass-lo, var(--surface-2)); color: var(--text); }
.isl-t.on { background: var(--primary-soft); color: var(--primary-text); }
.isl-t b { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--text); font: 600 11px/18px var(--sans); text-align: center; }
.isl-t.on b { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary-text); }
.isl-t b.isl-warn { background: var(--red-soft); color: var(--red); }
.isl-t.isl-hot b { background: var(--amber); color: var(--amber-ink); }
.isl-t.isl-hot::after { content: ''; position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--surface); }
.isl-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: 2px; border: 0; border-radius: 999px; background: none; color: var(--faint); cursor: pointer; transition: transform .35s cubic-bezier(.2, .9, .2, 1), color .15s, background .15s; }
.isl-x:hover { color: var(--text); background: var(--glass-lo, var(--surface-2)); }
.islandmsg.is-open .isl-x { transform: rotate(180deg); }
@container agmain (max-width: 420px) { .isl-ai { padding: 0 9px 0 8px; gap: 4px; } }
@container agmain (max-width: 420px) { .isl-t { padding: 0 7px; gap: 4px; } .isl-t.on span { display: none !important; } }

.isl-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .75s var(--isl-io); }
.islandmsg.is-open .isl-panel { grid-template-rows: 1fr; }
.isl-in { min-height: 0; overflow: hidden; }
.isl-body { max-height: max(240px, calc(100dvh - 640px)); overflow: auto; padding: 4px 16px 16px; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .2, 1); border-top: 1px solid var(--border); }
.islandmsg.is-open .isl-body { opacity: 1; transform: none; transition-delay: .3s; }
.isl-sub { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font: 500 12px var(--sans); color: var(--muted); }
.isl-sub .ai-tabs { margin: 0; } .cn-sp { flex: 1; }

/* what the agent is doing while the page is rebuilt */

/* the foot of the first screen ("Dig deeper") is a quiet line now that the island carries the lists */
.ag-msgs > .ag-m.landingmsg:has(.ldx) { border: 0; background: none; box-shadow: none; padding: 0 6px; margin: 0 auto 10px; border-radius: 0; }

/* a banner when the page was updated since the provider last looked */
.isl-news { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; padding: 8px 10px 8px 12px; border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); border-radius: 14px; background: var(--amber-soft); animation: islNews .5s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes islNews { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.isl-news-i { color: var(--amber); display: grid; } .isl-news-t { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; } .isl-news-t b { font-weight: 600; }

/* conditions: as in the film. The name and its codes; the therapy chip with the guideline beside it as quiet text; the finding; one line per action item ("→ action  Action item added").
   "Generate care plan" and "Dig deeper" sit in one quiet menu at the top right, shown on hover or keyboard focus only. */
.cn { position: relative; margin-top: 10px; padding: 12px 14px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
@keyframes icIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cn-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; }
.cn:has(.cn-more) .cn-h { padding-right: 36px; }
.cn-name { padding: 0; border: 0; background: none; color: var(--text); font: 600 15px var(--sans); text-align: left; cursor: pointer; } .cn-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cn-h .pc-hcc { margin-left: 0; }
.cn-g { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 9px; }
.th-src { font-size: 13px; color: var(--faint); }
.cn-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }
.cn-nar { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); } .cn-nar.pend { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.cn-acts { display: grid; gap: 2px; margin-top: 8px; }
.cn-act { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; width: fit-content; max-width: 100%; margin: 0 -6px; padding: 3px 6px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 14.5px/1.45 var(--sans); text-align: left; cursor: pointer; }
.cn-act:disabled { cursor: default; } .cn-act:not(:disabled):hover { background: var(--surface-2); }
.cn-act b { font-weight: 600; } .cn-arr { margin-right: -6px; color: var(--text); }
.cn-act em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--amber); }
.cn-act:focus-visible, .cn-mb:focus-visible, .cn-menu button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.cn-more { position: absolute; top: 9px; right: 10px; z-index: 2; opacity: 0; transition: opacity .15s; }
.cn:hover .cn-more, .cn:focus-within .cn-more, .cn-more.open { opacity: 1; }
@media (hover: none) { .cn-more { opacity: .7; } }
.cn-mb { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); cursor: pointer; }
.cn-mb:hover, .cn-more.open .cn-mb { color: var(--text); background: var(--surface-2); }
.cn-menu { position: absolute; top: calc(100% + 6px); right: 0; display: grid; gap: 2px; min-width: 210px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 2px 6px rgba(31, 30, 29, .06), 0 16px 40px rgba(31, 30, 29, .14); animation: icIn .18s ease both; }
.cn-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--text); font: 500 13.5px var(--sans); text-align: left; white-space: nowrap; cursor: pointer; }
.cn-menu button:hover { background: var(--surface-2); } .cn-menu .ico { color: var(--primary-text); flex: none; }

/* the entrance, once per opening or tab (the class "enter" is on for a moment): cards rise out of a blur one after another, the therapy chips pop, action rows follow faster */
@keyframes islIn { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes islRow { from { opacity: 0; transform: translateY(18px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes thPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.islandmsg.enter .cn { animation: islIn .7s var(--isl-out) both; animation-delay: calc(.3s + var(--n, 0) * .15s); }
.islandmsg.enter .cn .th-chip { animation: thPop .6s var(--isl-back) both; animation-delay: calc(1s + var(--n, 0) * .15s); }
.islandmsg.enter .ig, .islandmsg.enter li.ai { animation: islRow .6s var(--isl-out) both; animation-delay: calc(.3s + var(--n, 0) * .1s); }

/* action items */
.ig { margin-top: 12px; } .ig h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font: 600 13px var(--sans); color: var(--text); }
.ig h4 small { font: 600 11px var(--sans); color: var(--muted); padding: 0 7px; border-radius: 999px; background: var(--surface-3); } .ig-h { font: 400 12px var(--sans); color: var(--faint); }

/* changes */
.cg { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; } .cg.new { border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft); }
.cg h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 13px var(--sans); } .cg h4 small { margin-left: auto; font: 400 12px var(--sans); color: var(--faint); }
.cg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); } .cg.new .cg-dot { background: var(--amber); }
.cg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.cg-l { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 5px 4px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 400 13px/1.45 var(--sans); text-align: left; }
button.cg-l { cursor: pointer; } button.cg-l:hover { background: var(--glass-lo, var(--surface-2)); }
.cg-i { flex: none; margin-top: 1px; color: var(--muted); display: grid; }

/* ---------- the preparation feed: what the agent is doing, step by step ---------- */
.feed { padding: 16px 18px 14px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); animation: feedIn .5s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes feedIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes flIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .islandmsg .isl, .isl-panel, .isl-body, .isl-x, .cn, .cn .th-chip, .ig, li.ai, .isl-ul, .isl-news, .isl-ai.busy, .islandmsg.rise .isl, #agMsgs, .ag-main .ag-composer { transition: none !important; animation: none !important; } }

/* ---------- the chips above the composer ---------- */
.ag-starters { gap: 8px; }
.st-chip { display: inline-flex; align-items: center; gap: 7px; animation: chipIn .45s cubic-bezier(.2, .9, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.st-chip .ico { color: var(--primary-text); flex: none; }
.st-chip.lead { border-color: color-mix(in srgb, var(--amber) 50%, transparent); background: var(--amber-soft); } .st-chip.lead .ico { color: var(--amber); }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .st-chip { animation: none; } }

/* labs and medications rows: one line of what it is, one of the detail, a way into the chat */
.isl-rows { list-style: none; margin: 0; padding: 0; }
.isl-r { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.isl-r:hover { background: var(--surface-2); } .isl-r:hover .isl-r-go { opacity: 1; }
.isl-r-t { flex: 1; min-width: 0; display: grid; gap: 1px; } .isl-r-1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; } .isl-r-1 b { font-weight: 600; }
.isl-r-m { font-size: 12px; color: var(--muted); } .isl-r.abn .pc-v { color: var(--red); font-weight: 600; }
.isl-r-go { flex: none; display: grid; color: var(--faint); opacity: 0; transition: opacity .15s; }
.isl-d { margin: 10px 0 2px; padding: 0 10px; font: 600 12px var(--sans); color: var(--faint); } .isl-d:first-child { margin-top: 2px; }   /* the date, once, over the results drawn that day */
.ai-src { flex: none; align-self: center; padding: 3px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-text); font: 600 11.5px/1.2 var(--mono); letter-spacing: .02em; white-space: nowrap; }   /* the guideline behind an action item (ADA, ACC/AHA, USPSTF) */
@media (hover: none) { .isl-r-go { opacity: .6; } }

/* under the briefing, in its box: the two conditions that need guideline therapy and the two preventive items that need doing */
.sum-act { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--border); } .sum-act[hidden] { display: none; }
.sa { margin-top: 10px; } .sa h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .sa h4 svg { stroke: currentColor; fill: none; stroke-width: 1.8; }
.sa ul { list-style: none; margin: 0; padding: 0; }
.sa-r { display: flex; align-items: center; gap: 8px; border-radius: 10px; animation: icIn .4s cubic-bezier(.2, .9, .2, 1) both; } .sa-r:hover { background: var(--surface-2); }
.sa-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sa-main .pc-dot { margin-top: 7px; }
.sa-t { min-width: 0; display: grid; gap: 1px; } .sa-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; } .sa-l1 b { font-weight: 600; font-size: 14px; }
.sa-m { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa .pc-hcc { margin-left: 0; }
.sa-link { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font: 500 12px var(--sans); cursor: pointer; white-space: nowrap; }
.sa-link:hover { border-color: var(--amber); color: var(--text); } .sa-link svg { stroke: currentColor; fill: none; stroke-width: 1.8; }
.sa-more { margin: 2px 0 0 8px; padding: 3px 0; border: 0; background: none; color: var(--amber); font: 500 12.5px var(--sans); cursor: pointer; } .sa-more:hover { text-decoration: underline; }
@container agmain (max-width: 520px) { .sa-r { flex-wrap: wrap; } .sa-main { flex-basis: 100%; } .sa-link { margin: 0 0 6px 8px; } }
@media (prefers-reduced-motion: reduce) { .sa-r { animation: none; } }

/* narrow frames (the Compact size, a phone): chips and headers wrap instead of running out of the box */
.cn-h { flex-wrap: wrap; } .cn-h .th-chip, .sa .th-chip { white-space: normal; max-width: 100%; border-radius: 12px; }
@container agmain (max-width: 520px) { .hero-who small { white-space: normal; } .hero-who { flex: 1; min-width: 0; } }
.ag-ctx { overflow-x: auto; scrollbar-width: none; } .ag-ctx::-webkit-scrollbar { display: none; }

/* the summary tab: the briefing's text as it reads on the page */
.isl-sumtext { max-width: none; font-size: 15.5px; line-height: 1.62; margin: 4px 0 6px; }
.isl-sumact { margin-top: 4px; }