/* Company brand color (see brand-theme.js) drives the widget's own accent/tint/border --
   set once here, reused everywhere below, so the whole panel matches whatever color this
   specific company chose instead of a fixed generic blue. Genuinely semantic states (an
   approval card needing attention, the mic actively recording) deliberately do NOT use
   these -- they stay a fixed color regardless of company brand, same reasoning
   brand-theme.js's own "warnings keep their meaning" already applies everywhere else in
   the app. Real gap found 2026-09-29: most of this file was still hardcoded pale blue,
   completely disconnected from a company's own saved brand color. */
#sr-concierge,#sr-live-concierge{font-family:inherit;color:#173b54;--assistant-accent:var(--blue,#0079bc);--assistant-tint:var(--tint-soft,#f2f8fc);--assistant-border:var(--tint,#d8e8f1)}
.concierge-launch{position:fixed;right:8px;bottom:20px;z-index:61;width:155px;height:290px;padding:0;border:0;background:none;cursor:pointer;color:#173b54;font-family:inherit;filter:drop-shadow(0 7px 5px #18354720)}
.concierge-character{display:block;width:100%;height:100%;animation:concierge-sway 6s ease-in-out infinite;transform-origin:center 96%}.concierge-character img{display:block;width:100%;height:100%;object-fit:contain}.concierge-invite{position:absolute;bottom:0;left:8px;right:8px;font-size:12px;font-weight:600;background:#fffffff5;border:1px solid var(--assistant-border);border-radius:18px;padding:7px;box-shadow:0 4px 15px #173b5412}
.concierge-bubble{position:fixed;right:160px;bottom:48px;z-index:62;width:390px;max-height:min(490px,calc(100dvh - 80px));display:flex;flex-direction:column;background:#fff;border:2px solid var(--assistant-border);border-radius:22px;box-shadow:0 12px 45px #16395324}.concierge-bubble:after{content:'';position:absolute;right:-9px;bottom:110px;width:16px;height:16px;background:#fff;border-right:2px solid var(--assistant-border);border-top:2px solid var(--assistant-border);transform:rotate(45deg)}.concierge-bubble.expanded{width:540px;max-height:calc(100dvh - 80px)}
/* Real feedback 2026-09-29: the header used to read as flat/plain white with just a thin
   line underneath -- Wayne remembered an earlier version having real color up here,
   "wrapping around" the whole module. Gives the header itself a colored wash (clipped to
   the bubble's own rounded corners by .concierge-bubble{overflow:hidden} below) and keeps
   the close button plain white so it still stands out against the new tinted header. */
/* Real feedback 2026-09-29, round 2 -- Wayne mocked up exactly what he meant: bold,
   filled brand color, not a pale wash; a bigger white title, not the same small dark
   text. --assistant-accent (unlike --assistant-tint) is specifically engineered in
   brand-theme.js to always stay dark/saturated enough for readable white text (the
   contrast loop in tokens()) -- this is the first place in this file actually using
   it for that, everywhere else so far used it only for small buttons. */
.concierge-bubble header{display:flex;justify-content:space-between;align-items:center;padding:20px 18px 16px;background:var(--assistant-accent);border-bottom:2px solid var(--assistant-border);flex-shrink:0}.concierge-bubble header strong{font-size:22px;font-weight:800;color:#fff}.concierge-bubble header small{display:block;font-size:10px;color:#ffffffcc;margin-top:4px}.concierge-bubble header button{width:28px;height:28px;border:0;background:#fff;border-radius:50%;color:#45667a;cursor:pointer;font-size:18px;margin-left:4px}/* A distinct "window" for the back-and-forth conversation, bordered in the company's own
   theme color -- Wayne's request 2026-10-02, to set the conversation visually apart from
   the header/toolbar/footer around it. White, not --assistant-tint, for the fill: each
   message bubble below already uses --assistant-tint as ITS OWN background (see
   .bubble-message:not(.user)), so tinting the window the same color would make every
   bubble disappear into it instead of standing out. */
.concierge-body{padding:14px 18px;overflow:auto;min-height:0;position:relative;overscroll-behavior:contain;background:#fff;border:1px solid var(--assistant-border);border-radius:14px}.concierge-body h3{font-size:19px;line-height:1.3;margin:0 0 12px;letter-spacing:-.4px}.concierge-body p{font-size:13px;line-height:1.6}/* Real feedback 2026-09-29: with the pills/header/toolbar now their own distinct
   colors, the actual conversation (this) was the one thing left plain white, reading as
   just more of the same "everything is white" as today's-summary content, dismiss
   links, etc. A light card specifically for the assistant's own replies gives the real
   conversation -- the one thing that's actually him talking to you -- its own clear
   identity, distinct from both the white page underneath and the pale pill color above. */
.bubble-message:not(.user){background:var(--assistant-tint);border-radius:14px;padding:10px 12px}
.bubble-message{margin:0 0 15px;text-align:center}.bubble-message>span{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#617e90}.bubble-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:7px 0 0}.bubble-message.user{border-bottom:1px solid var(--assistant-border);padding-bottom:12px}.bubble-message.user p{color:#647d8e;font-size:12px}.bubble-sources,.bubble-prompts{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.bubble-sources button,.bubble-prompts button{border:1px solid var(--assistant-border);border-radius:10px;background:var(--assistant-tint);color:#205477;padding:8px 10px;font:inherit;font-size:11px;text-align:left;cursor:pointer}.bubble-prompts{display:grid}.concierge-start{background:var(--assistant-accent);border:0;color:white;font:inherit;font-size:13px;padding:11px 16px;border-radius:12px;cursor:pointer;margin-top:14px}
.concierge-link{display:block;background:var(--assistant-accent);border:0;color:#fff;font:inherit;font-size:12px;font-weight:600;padding:9px 14px;border-radius:10px;cursor:pointer;margin:0 0 15px}
.concierge-link:hover{opacity:.9}.concierge-note{font-size:10px!important;color:#667e90;margin:10px 0 0}.concierge-bubble footer{padding:12px 16px;border-top:1px solid var(--assistant-border);flex-shrink:0}.concierge-bubble form{display:flex;gap:6px;border:1px solid var(--assistant-border);padding:5px;border-radius:13px}.concierge-bubble input{min-width:0;width:100%;border:0;background:transparent;font:inherit;font-size:13px;padding:7px;color:#173b54}.concierge-bubble form button{width:32px;flex-shrink:0;border:0;border-radius:9px;color:white;background:var(--assistant-accent);font-size:21px;cursor:pointer}.bubble-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:9px}.bubble-meta small,.bubble-meta button{font-size:10px;color:#617c8f}.bubble-meta button,.bubble-options button{border:0;background:none;text-decoration:underline;cursor:pointer}.bubble-options{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:#647d8e;margin-top:12px}.bubble-options span{width:100%}.bubble-options button{font-size:10px;color:#46697f;padding:0}.concierge-bubble button:focus-visible,.concierge-launch:focus-visible{outline:3px solid #51b2df;outline-offset:3px}.concierge-bubble button:disabled{opacity:.5;cursor:not-allowed}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes concierge-sway{0%,100%{transform:rotate(-.35deg)}50%{transform:rotate(.35deg) translateY(-2px)}}@media(max-width:600px){.concierge-launch{width:100px;height:190px;right:2px;bottom:78px}.concierge-invite{font-size:9px;padding:6px 2px;left:0;right:0}.concierge-bubble,.concierge-bubble.expanded{right:98px;left:8px;width:auto;bottom:98px;max-height:calc(100dvh - 125px);border-radius:17px}.concierge-bubble.expanded{right:12px;bottom:273px;max-height:calc(100dvh - 295px)}.concierge-bubble:after{bottom:80px}.concierge-bubble.expanded:after{display:none}.concierge-bubble header{padding:12px 10px}.concierge-bubble header strong{font-size:13px}.concierge-bubble header button{width:25px;height:25px;margin-left:2px}.concierge-body{padding:12px}.concierge-bubble footer{padding:10px}.bubble-meta{flex-wrap:wrap}.concierge-bubble input{font-size:16px;padding:5px;width:0;flex:1}.concierge-bubble header small{font-size:9px}}@media(prefers-reduced-motion:reduce){.concierge-character{animation:none}}
.cast-toolbar{padding:7px 16px;border-bottom:1px solid var(--assistant-border);flex-shrink:0}.cast-toolbar button{border:0;background:none;font:inherit;font-size:11px;color:#235d82;cursor:pointer;padding:4px 0;text-decoration:underline}.concierge-cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}.concierge-cast button{min-width:0;border:1px solid var(--assistant-border);background:linear-gradient(var(--assistant-tint),#fff);border-radius:13px;padding:8px 4px;cursor:pointer;color:#173b54;font-family:inherit}.concierge-cast button[aria-pressed=true]{border:2px solid var(--assistant-accent);background:var(--assistant-tint);padding:7px 3px}.concierge-cast img{display:block;width:100%;height:132px;object-fit:contain}.concierge-cast strong{display:block;font-size:12px;margin-top:6px}.concierge-cast span{display:block;font-size:9px;margin-top:4px;color:#5f7889}@media(max-width:600px){.concierge-cast{grid-template-columns:repeat(2,minmax(0,1fr))}.concierge-cast img{height:112px}.cast-toolbar{padding:6px 12px}}
.concierge-bubble.cast-open{width:410px;max-height:calc(100dvh - 80px)}@media(max-width:600px){.concierge-bubble.cast-open{width:auto;right:98px;max-height:calc(100dvh - 125px)}}
/* Connected concierge visibility must override its flex layout. */
.concierge-bubble[hidden]{display:none!important}
.bubble-sources a{display:inline-block;padding:8px 10px;color:#205477;background:var(--assistant-tint);border:1px solid var(--assistant-border);border-radius:10px;font-size:12px}

#sr-live-concierge .concierge-bubble input{flex:1;width:0}

/* Voice: a separate optional beta channel, styled to match the toolbar's existing text-link buttons. */
.concierge-voice-btn{border:1px solid var(--assistant-border);background:var(--assistant-tint);color:#205477;font:inherit;font-size:11px;font-weight:600;border-radius:20px;padding:5px 12px;cursor:pointer;margin-right:8px}
/* Deliberately a fixed red, not brand-derived -- "actively recording" is the same kind of
   universal semantic signal as the approval cards above, not a brand aesthetic choice. */
.concierge-voice-btn[aria-pressed=true]{background:#fdeceb;border-color:#f3b9b3;color:#a3362b}
.concierge-voice-btn:disabled{opacity:.5;cursor:not-allowed}
.concierge-character.concierge-listening{animation:concierge-sway 6s ease-in-out infinite,concierge-listen-ring 1.6s ease-in-out infinite}
@keyframes concierge-listen-ring{0%,100%{filter:drop-shadow(0 0 0 #e0342600)}50%{filter:drop-shadow(0 0 14px #e0342670)}}
@media(prefers-reduced-motion:reduce){.concierge-character.concierge-listening{animation:none}}
/* Confirmation cards: proposals waiting for the owner's approval, and recent assistant activity.
   Deliberately a fixed amber, not var(--assistant-accent) -- same amber this app already uses
   for warnings elsewhere (product.css's .badge.amber/.event.amber), so "this needs your
   attention" reads the same regardless of which color a company picked as its own brand;
   otherwise this card would just look like whatever color the company happened to choose,
   losing the signal entirely for a company that isn't warm/red-toned like WILLOW is. */
.concierge-approvals{padding:10px 16px 0;flex-shrink:0;display:grid;gap:8px}.concierge-approvals[hidden],.concierge-activity[hidden],.concierge-approval[hidden]{display:none}
/* Changed 2026-10-02 at Wayne's explicit request: these used to be a fixed brown/amber
   regardless of company brand (a deliberate "warnings keep their meaning" choice made
   2026-09-29) -- he wants approval cards to follow the company's own color scheme like
   the rest of the widget instead, so they now use the same --assistant-accent/tint/border
   variables everything else here does. */
.concierge-approval{border:2px solid var(--assistant-accent);background:var(--assistant-tint);border-radius:13px;padding:10px 12px}.concierge-approval strong{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--assistant-accent)}.concierge-approval p{margin:6px 0 8px;font-size:13px;line-height:1.45;color:#173b54;overflow-wrap:anywhere}
.approval-buttons{display:flex;gap:8px}.approval-buttons button{border:0;border-radius:9px;padding:8px 14px;font:inherit;font-size:12px;cursor:pointer}.approval-buttons .approve{background:var(--assistant-accent);color:#fff}.approval-buttons .cancel{background:#eef2f4;color:#41505c}
.concierge-bubble>.concierge-note{padding:0 16px}.concierge-activity{padding:8px 16px 0;flex-shrink:0;font-size:11px;color:#4d6a7d}.concierge-activity summary{cursor:pointer}.concierge-activity ol{margin:6px 0 0;padding-left:16px;max-height:120px;overflow:auto}.concierge-activity li{margin:3px 0}.concierge-activity .activity-event{font-weight:600}.concierge-activity button{border:0;background:none;text-decoration:underline;color:#235d82;cursor:pointer;font:inherit;padding:0}
.concierge-setup .setup-row{display:flex;gap:6px;margin-top:6px}#sr-live-concierge .concierge-setup input,.concierge-setup select{border:1px solid var(--assistant-border);border-radius:8px;padding:5px 8px;font:inherit;font-size:12px;background:#fff;color:#173b54}#sr-live-concierge .concierge-setup input{width:0;flex:1.4}.concierge-setup select{flex:1;min-width:0}.concierge-setup button{border:0;border-radius:8px;padding:5px 12px;background:var(--assistant-accent);color:#fff;text-decoration:none;font:inherit;font-size:12px;cursor:pointer}

/* Panel layout: header and message box always visible; everything else scrolls in the middle. */
.concierge-bubble{overflow:hidden}
.concierge-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.concierge-scroll .concierge-body{overflow:visible;padding:12px 16px}
.cast-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px}
/* Bold/filled, matching the mockup -- same --assistant-accent as the header above, not
   the pale outline style the rest of the widget still uses (those are small, frequent
   controls elsewhere; this toolbar sits right under the bold header, so it reads better
   matching it). aria-pressed=true still overrides to the fixed recording red below. */
.cast-toolbar select{border:0;background:var(--assistant-accent);border-radius:999px;padding:6px 10px;font:inherit;font-size:12px;font-weight:600;color:#fff}
.cast-toolbar .concierge-voice-btn{text-decoration:none;border:0;background:var(--assistant-accent);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:6px 12px;margin:0}
.cast-toolbar .concierge-voice-btn[aria-pressed=true]{background:#fdeceb;border:1px solid #f3b9b3;color:#a3362b}
.cast-toolbar .concierge-voice-btn[hidden]{display:none}
.cast-toolbar .concierge-note{flex-basis:100%;margin:0;padding:0}.cast-toolbar .concierge-note:empty{display:none}
.concierge-more{padding:8px 16px 12px;font-size:12px;color:#4d6a7d;border-top:1px solid var(--assistant-border);flex-shrink:0}.concierge-more>summary{cursor:pointer;font-weight:600;color:#365a70}
/* Now a direct flex child of .concierge-bubble, not nested inside the scrolling
   conversation (see concierge-live.js) -- flex-shrink:0 keeps it from being squeezed by
   the conversation area above; expanded, its own (potentially long: reminders, saved
   preferences, recent activity) content scrolls within itself instead of growing the
   whole panel past its own max-height and pushing the input box off-screen. */
.concierge-more[open]{max-height:220px;overflow:auto}
.concierge-more .concierge-activity{padding:8px 0 0}.concierge-more .concierge-note{padding:0;margin:8px 0 0}
/* Real feedback 2026-09-29: these three sections (the "what can I ask" blurb, today's
   summary, and this "More" fold) were taking up real space and reading as plain text,
   with no visual distinction from an actual message from the assistant. Pill-style,
   collapsed by default, deliberately NOT styled like a chat bubble or the bold header/
   toolbar above -- this is app chrome/navigation, not the assistant talking to you, and
   keeping those visually separate was the other half of the ask. `>` scopes this to just
   these three top-level triggers, not every nested detail once "More" is expanded. */
.concierge-about summary,.concierge-summary>summary,.concierge-more>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;background:var(--assistant-tint);border:1px solid var(--assistant-border);color:#365a70;font-weight:600;font-size:11px;padding:6px 12px;border-radius:999px}
.concierge-about summary::-webkit-details-marker,.concierge-summary>summary::-webkit-details-marker,.concierge-more>summary::-webkit-details-marker{display:none}
.concierge-about summary::after,.concierge-summary>summary::after,.concierge-more>summary::after{content:'▸';font-size:9px;transition:transform .15s}
.concierge-about[open] summary::after,.concierge-summary[open]>summary::after,.concierge-more[open]>summary::after{transform:rotate(90deg)}
.concierge-about{margin-bottom:4px}.concierge-about p{margin:8px 0 0;font-size:12px;line-height:1.6;color:#4d6a7d}
.concierge-scroll .concierge-approvals,.concierge-scroll .concierge-summary{padding-left:16px;padding-right:16px}
.concierge-scroll>.concierge-note{padding:6px 16px 0}
/* While the assistant is talking, the character glows softly. */
@keyframes concierge-speak{0%,100%{filter:drop-shadow(0 0 0 rgba(42,127,184,0))}50%{filter:drop-shadow(0 0 14px rgba(42,127,184,.55))}}
.concierge-character.concierge-speaking{animation:concierge-sway 6s ease-in-out infinite,concierge-speak 1.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.concierge-character.concierge-speaking{animation:none;filter:drop-shadow(0 0 10px rgba(42,127,184,.5))}}