/* =============================================================================
   mh-feedback.css  -  Feedback AI Agent (Phase 1): the global floating widget +
   the admin triage inbox. Uses the locked Matthew House tokens (so it flips with
   body.dark automatically). Plain hyphens only.

   z-index ladder (Phase 1 STEP 1, FINAL): the feedback stack tops the app so the
   CEO's rule holds - agent and toasts in front of everything. The full-screen 30-min
   alert is 100090; the FAB 100091 (clear of the whole wizard/modal band, which tops
   out at 100050: Client Detail, Household, Subsidy wizard + em-overlay, photo crop/cam,
   QR pass / archive); the panel scrim 100092; the panel 100093; the inbox delete-confirm
   100094; and the toast (mud-snackbar, in mh-theme.css) 100095 above them all, so a save
   / edit toast stays visible even over the open feedback panel AND over the alert.
   (Capture logic unchanged - it still snapshots the open overlay minus the widget.)
   ============================================================================= */

/* ---- the floating bubble ------------------------------------------------- */
.fb-root { position: static; }

/* ASSIST01 (2 Oct 2026): THE BUBBLE IS A COIN. Owner: "when users click on the AI agent add a smooth and cool
   animation ... the Icon when opened it must get a special turn ... when they close it goes to it's location by
   animation". The front face is the Matthew House mark, the back face a close chevron. Opening spins the coin one
   and a half turns (rotateY 540deg, a springy overshoot) so it lands on the chevron, while a ring bursts out of
   the bubble; closing spins it the same way home and the bubble lands with a small bounce. The gold spark on its
   shoulder says "this is the Assistant now" and twinkles now and then. */
.fb-fab {
  /* --fb-lift (set by MHfab in shell.js) glides the bubble UP off any control it would
     cover - e.g. the chat composer or an overlay's Edit footer - and back to 0 when clear.
     Uses `bottom` (not transform) so it never fights the hover/active transform. */
  position: fixed; right: 24px; bottom: calc(24px + var(--fb-lift, 0px)); z-index: 100091;
  width: 56px; height: 56px; padding: 0; border-radius: 999px; border: none; cursor: pointer;
  background: var(--mh-sidebar); color: #fff;
  display: grid; place-items: center;
  perspective: 260px;
  box-shadow: 0 10px 26px rgba(20, 34, 30, .34), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, bottom .22s ease;
}
.fb-fab:hover { transform: translateY(-2px); background: var(--mh-sidebar-2); box-shadow: 0 14px 32px rgba(20, 34, 30, .42); }
.fb-fab:active { transform: translateY(0) scale(.96); }
.fb-fab:focus-visible { outline: none; box-shadow: var(--mh-ctrl-focus-ring), 0 10px 26px rgba(20, 34, 30, .34); }
.fb-fab[disabled] { cursor: default; opacity: .85; }

.fb-coin {
  position: relative; width: 30px; height: 30px; display: block;
  transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.2, 1.35, .35, 1);
}
.fb-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.fb-front img { width: 28px; height: 28px; object-fit: contain; display: block; }
.fb-back { transform: rotateY(180deg); }
.fb-back svg { width: 26px; height: 26px; }
.fb-root.is-open .fb-coin { transform: rotateY(540deg); }

/* the ring that bursts out of the bubble as it opens */
.fb-ring {
  position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--mh-green, #4E7C72) 80%, #fff); opacity: 0;
}
.fb-root.is-open .fb-ring { animation: fbRing .75s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fbRing {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.9); }
}

/* the bubble lands back in its place after the panel has drained into it */
.fb-root.is-closing .fb-fab { animation: fbLand .55s .2s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes fbLand {
  0%   { transform: scale(1); }
  35%  { transform: scale(.86); }
  70%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* the spark on the bubble's shoulder: Matthew House AI lives here.
   NOTE 77 (owner, 3 Oct 2026: "from orange or yellow to: background Matthew House branding color and that AI inside it white"):
   the Matthew House greens (--mh-sidebar -> --mh-green, the same pair the house mark is filled with) and a white glyph. */
.fb-spark {
  position: absolute; top: -3px; right: -3px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: linear-gradient(140deg, var(--mh-green, #4E7C72), var(--mh-sidebar, #2E4A43)); color: #fff;
  box-shadow: 0 0 0 2px var(--mh-surface, #fff), 0 3px 8px rgba(20, 34, 30, .35);
  transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1);
  animation: fbTwinkle 5.5s ease-in-out 1.2s infinite;
}
.fb-spark svg { width: 12px; height: 12px; }
.fb-root.is-open .fb-spark { opacity: 0; transform: scale(.3) rotate(-60deg); animation: none; }
@keyframes fbTwinkle {
  0%, 82%, 100% { transform: scale(1) rotate(0); }
  88% { transform: scale(1.22) rotate(18deg); }
  94% { transform: scale(.94) rotate(-6deg); }
}

/* spinner (capture + send busy states) */
.fb-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: fbspin .7s linear infinite;
}
.fb-spin.sm { width: 15px; height: 15px; border-width: 2px; }
.fb-btn.primary .fb-spin.sm { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
@keyframes fbspin { to { transform: rotate(360deg); } }

/* ---- the panel ----------------------------------------------------------- */
.fb-scrim {
  position: fixed; inset: 0; z-index: 100092;
  background: rgba(20, 32, 28, .42); animation: fbfade .18s ease both;
}
/* ASSIST01: THE PANEL POURS OUT OF THE BUBBLE. It sits just above the bubble (non-modal - no scrim, the screen
   behind stays usable). Opening grows a clip-path circle from the bubble's own centre (--fb-ox / --fb-oy, which
   lie 28px in from the panel's right edge and 42px BELOW its bottom edge - i.e. exactly on the bubble) to the
   whole panel, with a soft spring; the head, the tabs, the conversation and the composer then rise in one after
   another. Closing drains it back into the bubble the same way. FeedbackWidget waits CloseMs (420) before it
   removes the panel, so fbDrain (.38s) must stay shorter than that. */
.fb-panel {
  --fb-ox: calc(100% - 28px);
  --fb-oy: calc(100% + 42px);
  position: fixed; right: 24px; bottom: calc(94px + var(--fb-lift, 0px)); z-index: 100093;
  width: min(420px, calc(calc(100 * var(--mh-vw)) - 32px));
  height: min(640px, calc(calc(100 * var(--mh-vh)) - 126px - var(--fb-lift, 0px)));
  display: flex; flex-direction: column;
  background: var(--mh-surface); color: var(--mh-ink);
  border: 1px solid var(--mh-line); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(20, 32, 28, .36), 0 4px 14px rgba(20, 32, 28, .12);
  overflow: hidden; transform-origin: var(--fb-ox) var(--fb-oy);
}
.fb-root.is-open .fb-panel { animation: fbPour .64s cubic-bezier(.16, 1, .3, 1) both; }
.fb-root.is-closing .fb-panel { animation: fbDrain .38s cubic-bezier(.7, 0, .84, 0) both; pointer-events: none; }
@keyframes fbPour {
  0%   { clip-path: circle(20px at var(--fb-ox) var(--fb-oy)); transform: translateY(16px) scale(.94); opacity: .5; }
  55%  { opacity: 1; }
  100% { clip-path: circle(160% at var(--fb-ox) var(--fb-oy)); transform: none; opacity: 1; }
}
@keyframes fbDrain {
  0%   { clip-path: circle(160% at var(--fb-ox) var(--fb-oy)); transform: none; opacity: 1; }
  100% { clip-path: circle(18px at var(--fb-ox) var(--fb-oy)); transform: translateY(12px) scale(.95); opacity: .2; }
}
@keyframes fbfade { from { opacity: 0; } }
@keyframes fbpop { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* the parts rise in, one after another, as the panel finishes pouring */
.fb-root.is-open .as-head    { animation: fbRise .5s .10s cubic-bezier(.2, .9, .3, 1) both; }
.fb-root.is-open .as-tabs    { animation: fbRise .5s .16s cubic-bezier(.2, .9, .3, 1) both; }
.fb-root.is-open .as-body,
.fb-root.is-open .fb-body    { animation: fbRise .5s .22s cubic-bezier(.2, .9, .3, 1) both; }
.fb-root.is-open .as-compose,
.fb-root.is-open .fb-foot    { animation: fbRise .5s .28s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes fbRise { from { opacity: 0; transform: translateY(12px); } }

/* ---- head: pine glass, the Assistant's face ---- */
.as-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 14px 15px 16px; flex: none;
  background: linear-gradient(135deg, var(--mh-sidebar), var(--mh-sidebar-2)); color: #fff;
}
.as-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.as-avatar {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24);
}
.as-avatar img { width: 23px; height: 23px; object-fit: contain; }
/* "online": a soft halo breathes around the face */
.as-avatar::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .28); animation: asHalo 2.8s ease-in-out infinite;
}
@keyframes asHalo { 0%, 100% { transform: scale(.94); opacity: .25; } 50% { transform: scale(1.06); opacity: .8; } }
.as-who-t { min-width: 0; }
.as-who-t h3 { margin: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.as-who-t p { margin: 2px 0 0; font-size: 12px; color: rgba(255, 255, 255, .74); line-height: 1.3; }
.as-head-acts { display: flex; gap: 6px; flex: none; }
.as-iconbtn {
  width: 32px; height: 32px; border-radius: 10px; border: none; cursor: pointer; padding: 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background .15s, transform .15s;
}
.as-iconbtn:hover { background: rgba(255, 255, 255, .22); }
.as-iconbtn:active { transform: scale(.94); }
.as-iconbtn svg { width: 17px; height: 17px; }

/* ---- the two tabs: a segmented switch with a sliding pill ---- */
.as-tabs {
  position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr;
  margin: 12px 14px 2px; padding: 4px; border-radius: 14px;
  background: var(--mh-cream-2); border: 1px solid var(--mh-line);
}
.as-tabs-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px;
  background: var(--mh-surface); box-shadow: 0 2px 8px rgba(20, 32, 28, .14);
  transition: transform .42s cubic-bezier(.3, 1.35, .5, 1);
}
.as-tabs.is-fb .as-tabs-pill { transform: translateX(100%); }
.as-tab {
  position: relative; z-index: 1; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--mh-muted); transition: color .2s;
}
.as-tab.on { color: var(--mh-ink); }
.as-tab svg { width: 16px; height: 16px; }
.as-tab.on svg { color: var(--mh-green); }

/* ---- the conversation ---- */
.as-body {
  position: relative;   /* offsetTop of a row is measured from here (mhAssist.scrollEnd) */
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 12px;
}
.as-hello { text-align: center; padding: 8px 6px 2px; }
.as-hello-orb {
  width: 60px; height: 60px; margin: 6px auto 12px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 28%, var(--mh-green, #4E7C72), var(--mh-sidebar));
  box-shadow: 0 12px 28px rgba(30, 60, 50, .3);
  animation: asOrb 5s ease-in-out infinite;
}
.as-hello-orb svg { width: 28px; height: 28px; }
@keyframes asOrb { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(10deg); } }
.as-hello h4 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--mh-ink); letter-spacing: -.01em; }
.as-hello p { margin: 0 auto; max-width: 340px; font-size: 13px; line-height: 1.55; color: var(--mh-muted); }
.as-hello p b { color: var(--mh-ink); font-family: var(--mh-mono, ui-monospace, Consolas, monospace); font-size: 12px; }
.as-cans { display: flex; flex-direction: column; gap: 6px; margin: 14px auto 0; max-width: 310px; text-align: left; }
.as-cans span {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 11px;
  font-size: 12.5px; font-weight: 700; color: var(--mh-ink);
  background: var(--mh-cream-2); border: 1px solid var(--mh-line);
}
.as-cans svg { width: 16px; height: 16px; flex: none; color: var(--mh-green); }
.as-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.as-chip {
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--mh-green, #4E7C72) 35%, var(--mh-line));
  background: color-mix(in srgb, var(--mh-green, #4E7C72) 8%, var(--mh-surface));
  color: var(--mh-green-d, #2E5A51); transition: background .15s, transform .15s;
}
.as-chip:hover { background: color-mix(in srgb, var(--mh-green, #4E7C72) 16%, var(--mh-surface)); transform: translateY(-1px); }
.as-chip.sm { font-size: 11.5px; padding: 5px 10px; }
body.dark .as-chip { color: #9FC7BA; }

.as-row { display: flex; gap: 8px; align-items: flex-start; animation: asIn .34s cubic-bezier(.2, .9, .3, 1) both; }
.as-row.mine { justify-content: flex-end; }
@keyframes asIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.as-mini { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mh-sidebar); margin-top: 2px; }
.as-mini img { width: 15px; height: 15px; object-fit: contain; }
.as-ans { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.as-bub {
  align-self: flex-start; max-width: 100%; padding: 10px 13px; border-radius: 4px 16px 16px 16px;
  background: var(--mh-cream-2); border: 1px solid var(--mh-line);
  font-size: 13.5px; line-height: 1.5; color: var(--mh-ink); overflow-wrap: anywhere;
}
.as-bub.mine { max-width: 82%; border-radius: 16px 4px 16px 16px; background: var(--mh-sidebar); color: #fff; border-color: transparent; }
.as-typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.as-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mh-muted); animation: asDot 1s infinite ease-in-out; }
.as-typing i:nth-child(2) { animation-delay: .15s; }
.as-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes asDot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ---- answer cards ---- */
.as-card {
  border: 1px solid var(--mh-line); background: var(--mh-surface); border-radius: 16px; padding: 13px 14px;
  box-shadow: 0 6px 18px rgba(20, 32, 28, .07); display: flex; flex-direction: column; gap: 9px;
}
.as-src { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mh-green, #4E7C72); }
.as-src svg { width: 13px; height: 13px; flex: none; }
.as-src span { color: var(--mh-muted); }
.as-card h5 { margin: 0; font-size: 15px; font-weight: 800; color: var(--mh-ink); letter-spacing: -.01em; line-height: 1.3; }
.as-date { font-size: 12px; font-weight: 700; color: var(--mh-muted); margin-left: 6px; }
.as-lead { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mh-muted); }
.as-tips { margin: 0; padding: 0; list-style: none; counter-reset: tip; display: flex; flex-direction: column; gap: 7px; }
.as-tips li { counter-increment: tip; position: relative; padding-left: 30px; font-size: 12.8px; line-height: 1.5; color: var(--mh-ink); }
.as-tips li::before {
  content: counter(tip); position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--mh-green, #4E7C72);
}
.as-tips.dots li { padding-left: 18px; }
.as-tips.dots li::before { content: ""; width: 7px; height: 7px; top: 7px; left: 4px; }
.as-rule {
  font-size: 12.5px; line-height: 1.5; padding: 9px 11px; border-radius: 11px; color: var(--mh-ink);
  background: color-mix(in srgb, #D89B3D 11%, transparent); border: 1px solid color-mix(in srgb, #D89B3D 30%, transparent);
}
.as-rule b { margin-right: 4px; }
.as-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.as-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 12.8px; font-weight: 800;
  border: 1.5px solid var(--mh-line); background: var(--mh-cream-2); color: var(--mh-ink);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.as-btn svg { width: 15px; height: 15px; flex: none; }
.as-btn:hover { background: var(--mh-cream); transform: translateY(-1px); }
.as-btn.primary { background: var(--mh-sidebar); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(20, 34, 30, .22); }
.as-btn.primary:hover { background: var(--mh-sidebar-2); }
.as-rel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 2px; }
.as-rel.col { flex-direction: column; align-items: flex-start; }
.as-rel-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.as-rel-l { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mh-muted); margin-right: 2px; }
.as-rate { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mh-muted); border-top: 1px dashed var(--mh-line); padding-top: 9px; }
.as-rate-b {
  font: inherit; font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mh-line); background: var(--mh-surface); color: var(--mh-ink); transition: border-color .15s;
}
.as-rate-b:hover { border-color: var(--mh-green, #4E7C72); }
.as-rated { font-weight: 700; color: var(--mh-green, #4E7C72); }
.as-more { margin: 0; font-size: 12px; color: var(--mh-muted); }
.as-note { font-size: 12px; color: var(--mh-muted); }

/* record cards - Open pops the exact record */
.as-recs { display: flex; flex-direction: column; gap: 7px; }
.as-rec {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 11px; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--mh-line); background: var(--mh-surface); font: inherit; color: var(--mh-ink);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.as-rec:hover { border-color: color-mix(in srgb, var(--mh-green, #4E7C72) 50%, var(--mh-line)); box-shadow: 0 8px 20px rgba(20, 32, 28, .1); transform: translateY(-1px); }
.as-rec-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #4E7C72 13%, transparent); color: #3D655D; }
.as-rec.t-household .as-rec-ic { background: color-mix(in srgb, #5E8157 14%, transparent); color: #3D543A; }
.as-rec.t-program .as-rec-ic { background: color-mix(in srgb, #8E6E89 15%, transparent); color: #6B4F67; }
.as-rec.t-staff .as-rec-ic { background: color-mix(in srgb, #56646A 15%, transparent); color: #2A3338; }
.as-rec.t-walkin .as-rec-ic { background: color-mix(in srgb, #C17A52 15%, transparent); color: #9C5A36; }
body.dark .as-rec-ic { color: #CFE2DB !important; }
.as-rec-ic svg { width: 19px; height: 19px; }
.as-rec-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-rec-t { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-rec-s { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--mh-muted); }
.as-rec-k { font-weight: 800; color: var(--mh-ink); }
.as-rec-c { font-family: var(--mh-mono, ui-monospace, Consolas, monospace); font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--mh-cream-2); border: 1px solid var(--mh-line); }
.as-rec-go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--mh-green, #4E7C72); transition: transform .16s; }
.as-rec-go svg { width: 14px; height: 14px; }
.as-rec:hover .as-rec-go { transform: translateX(2px); }

/* live figures */
.as-figs { display: flex; flex-direction: column; border: 1px solid var(--mh-line); border-radius: 12px; overflow: hidden; }
.as-fig-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; font-size: 13px; }
.as-fig-row + .as-fig-row { border-top: 1px solid var(--mh-line); }
.as-fig-l { display: flex; flex-direction: column; min-width: 0; font-weight: 700; color: var(--mh-ink); }
.as-fig-l small { font-size: 11.5px; font-weight: 600; color: var(--mh-muted); }
.as-fig-v { flex: none; font-weight: 800; color: var(--mh-green-d, #2E5A51); font-variant-numeric: tabular-nums; text-align: right; }
/* ASSIST13 (note 57, owner: "the texts of the report it's mixed ... it doesn't matter if you open the second row if the text are
   longer"): the value used to be flex:none, so a long address could not shrink and was painted OVER its label (the label
   shrank to nothing). Now the label keeps its room (never less than ~40% / 9em) and a long value wraps onto a second line,
   right-aligned, breaking at spaces first. Rows with two lines line up at the top. */
.as-fig-row { align-items: flex-start; }
.as-fig-l { flex: 0 0 auto; max-width: 55%; min-width: min(40%, 9em); overflow-wrap: break-word; }
.as-fig-v { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; word-break: normal; }
body.dark .as-fig-v { color: #9FC7BA; }

/* "I don't know that one yet" */
.as-unknown { background: color-mix(in srgb, #D89B3D 8%, var(--mh-surface)); border-color: color-mix(in srgb, #D89B3D 30%, var(--mh-line)); }
.as-unknown p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mh-ink); }
.as-acts.solo { margin-top: -2px; }

/* ---- composer ---- */
.as-compose { flex: none; display: flex; gap: 8px; align-items: center; padding: 10px 12px 12px; border-top: 1px solid var(--mh-line); background: var(--mh-surface); }
.as-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 15px; border-radius: 14px;
  border: 1.5px solid var(--mh-ctrl-border); background: var(--mh-ctrl-fill); color: var(--mh-ink);
  font: inherit; font-size: 13.5px; transition: background .15s, border-color .15s, box-shadow .15s;
}
.as-input::placeholder { color: var(--mh-ctrl-ico); }
.as-input:focus { outline: none; background: var(--mh-surface); border-color: var(--mh-ctrl-focus-border); box-shadow: var(--mh-ctrl-focus-ring); }
.as-send {
  flex: none; width: 44px; height: 44px; border-radius: 14px; border: none; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--mh-sidebar); color: #fff; transition: transform .18s, opacity .18s, background .15s;
}
.as-send svg { width: 20px; height: 20px; }
.as-send:not([disabled]):hover { background: var(--mh-sidebar-2); transform: translateX(2px); }
.as-send[disabled] { opacity: .4; cursor: default; }

/* ---- the Feedback tab's extras ---- */
.fb-panel .fb-body { flex: 1; min-height: 0; }
.fb-shot-busy { display: flex; align-items: center; gap: 10px; padding: 18px 14px; font-size: 12.5px; font-weight: 700; color: var(--mh-muted); }
.fb-shutter {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--mh-green, #4E7C72) 28%, transparent); border-top-color: var(--mh-green, #4E7C72);
  animation: fbspin .7s linear infinite;
}
.fb-retake {
  position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; border: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 800; background: rgba(20, 32, 28, .72); color: #fff;
}
.fb-retake svg { width: 12px; height: 12px; }
.fb-retake.inline { position: static; margin-left: auto; background: var(--mh-sidebar); flex: none; }
.fb-asked {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--mh-muted);
  padding: 9px 11px; border-radius: 11px;
  background: color-mix(in srgb, var(--mh-green, #4E7C72) 7%, transparent); border: 1px solid color-mix(in srgb, var(--mh-green, #4E7C72) 22%, transparent);
}
.fb-asked svg { width: 15px; height: 15px; flex: none; color: var(--mh-green, #4E7C72); margin-top: 1px; }
.fb-asked b { color: var(--mh-ink); }

/* Reduced motion: no spin, no pour - the panel simply fades in and out. */
@media (prefers-reduced-motion: reduce) {
  .fb-coin { transition: none; }
  .fb-root.is-open .fb-ring, .fb-root.is-closing .fb-fab, .fb-spark, .as-hello-orb, .as-avatar::after { animation: none; }
  .fb-root.is-open .fb-panel { animation: fbfade .16s ease both; }
  .fb-root.is-closing .fb-panel { animation: fbfade .16s ease reverse both; }
  .fb-root.is-open .as-head, .fb-root.is-open .as-tabs, .fb-root.is-open .as-body, .fb-root.is-open .fb-body,
  .fb-root.is-open .as-compose, .fb-root.is-open .fb-foot, .as-row { animation: none; }
}

.fb-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--mh-line);
}
.fb-head-t { display: flex; align-items: center; gap: 12px; }
/* Real colored Matthew House mark on a white chip so it stays visible in light AND
   dark (the pine logo would otherwise wash out on the dark panel surface). */
.fb-mark { width: 38px; height: 38px; padding: 5px; border-radius: 11px; background: rgb(var(--tg-rgb,255,255,255)); border: 1px solid var(--mh-line); object-fit: contain; flex: none; }
.fb-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--mh-ink); letter-spacing: -.01em; }
.fb-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--mh-muted); line-height: 1.35; }
.fb-x {
  flex: none; width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--mh-line); background: var(--mh-cream-2); color: var(--mh-ink);
  display: grid; place-items: center; transition: .15s;
}
.fb-x:hover { background: var(--mh-cream); }
.fb-x svg { width: 17px; height: 17px; }

.fb-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

/* screenshot preview */
.fb-shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--mh-line); background: var(--mh-cream-2); }
.fb-shot img { display: block; width: 100%; max-height: 188px; object-fit: cover; object-position: top center; }
.fb-shot-cap {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(20, 32, 28, .72); color: #fff; backdrop-filter: blur(2px);
}
.fb-shot-cap svg { width: 13px; height: 13px; }
.fb-shot-none {
  display: flex; align-items: center; gap: 10px; padding: 16px 14px;
  font-size: 12px; color: var(--mh-muted); line-height: 1.35;
}
.fb-shot-none svg { width: 22px; height: 22px; flex: none; color: var(--mh-ctrl-ico); }

/* fields */
.fb-field { display: flex; flex-direction: column; gap: 7px; }
.fb-lbl { font-size: 12.5px; font-weight: 700; color: var(--mh-ink); display: flex; align-items: center; gap: 8px; }
.fb-req { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--mh-clay); }
.fb-sel { width: 100%; }
.fb-sel select { width: 100%; }

.fb-text {
  width: 100%; resize: vertical; min-height: 92px; font: inherit; font-size: 13.5px; line-height: 1.5;
  padding: 11px 13px; border-radius: var(--mh-ctrl-r);
  background: var(--mh-ctrl-fill); color: var(--mh-ink);
  border: 1.5px solid var(--mh-ctrl-border); transition: .15s;
}
.fb-text::placeholder { color: var(--mh-ctrl-ico); }
.fb-text:focus { outline: none; background: var(--mh-surface); border-color: var(--mh-ctrl-focus-border); box-shadow: var(--mh-ctrl-focus-ring); }

/* auto-context block */
.fb-ctx { display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; border-radius: 12px; background: var(--mh-cream-2); border: 1px solid var(--mh-line); }
.fb-ctx-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; }
.fb-ctx-k { color: var(--mh-muted); font-weight: 700; flex: none; }
.fb-ctx-v { color: var(--mh-ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-ctx-v.mono { font-family: var(--mh-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace); font-size: 11.5px; }

/* footer */
.fb-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--mh-line); }
.fb-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border-radius: var(--mh-r-btn); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1.5px solid transparent; transition: .15s;
}
.fb-btn svg { width: 16px; height: 16px; }
.fb-btn.ghost { background: var(--mh-cream-2); border-color: var(--mh-line); color: var(--mh-ink); flex: 0 0 auto; padding: 0 18px; }
.fb-btn.ghost:hover { background: var(--mh-cream); }
.fb-btn.primary { background: var(--mh-sidebar); color: #fff; }
.fb-btn.primary:hover { background: var(--mh-sidebar-2); }
.fb-btn[disabled] { opacity: .55; cursor: default; }

/* small screens: panel becomes a near-full sheet */
@media (max-width: 520px) {
  /* The panel spans the screen above the bubble; its pour/drain origin moves with the bubble's centre. */
  .fb-panel { right: 12px; left: 12px; width: auto; bottom: calc(84px + var(--fb-lift, 0px));
              height: min(620px, calc(calc(100 * var(--mh-vh)) - 108px - var(--fb-lift, 0px)));
              --fb-ox: calc(100% - 32px); --fb-oy: calc(100% + 40px); }
  .fb-fab { right: 16px; bottom: calc(16px + var(--fb-lift, 0px)); }
}

/* =============================================================================
   Admin feedback inbox (/admin/feedback). Reuses the Administration .cl-* toolbar
   and .um-*/.up-* list+panel idiom; only feedback-specific bits live here.
   ============================================================================= */

/* Administration header: the Feedback + Approval Center entry buttons sit in a row. */
.ad-headrow .ad-headactions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Coming Soon (Administration dev-lock) ------------------------------- */
.cs-wrap { display: grid; place-items: center; min-height: calc(60 * var(--mh-vh)); padding: 40px 20px; }
.cs-card {
  max-width: 460px; text-align: center; padding: 40px 34px;
  background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 20px; box-shadow: var(--mh-shadow);
}
.cs-ic {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 18px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--mh-sidebar) 12%, transparent); color: var(--mh-sidebar);
}
.cs-ic svg { width: 32px; height: 32px; }
.cs-card h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; color: var(--mh-ink); letter-spacing: -.01em; }
.cs-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mh-muted); }

/* ---- SCHEDULED-OPENING COUNTDOWN (Aug 01 2026) ---------------------------------
   Shown only when the host passes an opening date. Four separate cells, because the
   numbers move at different rates and a single sentence forces the eye to re-read the
   whole line every second to find the part that changed.
   The digits are TABULAR and the cells fixed-width, so the row does not jitter as
   09 becomes 10 - a countdown that shifts sideways every tick reads as broken. */
.cs-count { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 18px 0 14px; }
.cs-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 62px; }
.cs-unit .n { font-family: var(--mh-font-head); font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--mh-green-d); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cs-unit .l { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mh-muted); }
.cs-sep { font-family: var(--mh-font-head); font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--mh-line); }
.cs-card .cs-sub { margin-top: 4px; font-size: 12.5px; color: var(--mh-muted); }
body.dark .cs-unit .n { color: #9FC7BA; }
body.dark .cs-sep { color: #3A4A44; }

/* ---- delete confirm (Feedback detail, dev only) ------------------------- */
.fbi-confirm-scrim { position: fixed; inset: 0; z-index: 100094; background: rgba(20, 32, 28, .5); display: grid; place-items: center; padding: 24px; animation: fbfade .16s ease both; }
.fbi-confirm {
  width: min(380px, calc(94 * var(--mh-vw))); background: var(--mh-surface); color: var(--mh-ink);
  border: 1px solid var(--mh-line); border-radius: 18px; box-shadow: 0 28px 70px rgba(20, 32, 28, .44);
  padding: 24px 22px; text-align: center; animation: fbpop .18s cubic-bezier(.2, .9, .3, 1) both;
}
.fbi-confirm-ic { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--mh-danger) 14%, transparent); color: var(--mh-danger); }
.fbi-confirm-ic svg { width: 26px; height: 26px; }
.fbi-confirm h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--mh-ink); }
.fbi-confirm p { margin: 0 0 20px; font-size: 13px; color: var(--mh-muted); line-height: 1.5; }
.fbi-confirm-btns { display: flex; gap: 10px; }
.fbi-confirm-btns .fb-btn.danger { background: var(--mh-danger); color: #fff; }
.fbi-confirm-btns .fb-btn.danger:hover { filter: brightness(.94); }

/* Delete button in the detail status area */
.fbi-deletebtn {
  display: inline-flex; align-items: center; gap: 8px; height: auto; min-height: 40px; padding: 0 16px;
  border-radius: var(--mh-r-btn); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: color-mix(in srgb, var(--mh-danger) 10%, transparent); color: var(--mh-danger);
  border: 1.5px solid color-mix(in srgb, var(--mh-danger) 32%, transparent); transition: .15s;
}
.fbi-deletebtn:hover { background: color-mix(in srgb, var(--mh-danger) 18%, transparent); }
.fbi-deletebtn svg { width: 16px; height: 16px; }

/* status + category chips */
.fbi-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.6;
  border: 1px solid transparent;
}
.fbi-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fbi-chip.st-new        { color: #2E6E62; background: rgba(78, 124, 114, .14); border-color: rgba(78, 124, 114, .28); }
.fbi-chip.st-review     { color: var(--mh-warning-d); background: rgba(216, 155, 61, .16); border-color: rgba(216, 155, 61, .32); }
.fbi-chip.st-resolved   { color: #3D655D; background: rgba(61, 101, 93, .14); border-color: rgba(61, 101, 93, .3); }
.fbi-chip.st-dismissed  { color: var(--mh-muted); background: var(--mh-cream-2); border-color: var(--mh-line); }
.fbi-cat { color: var(--mh-info); background: rgba(94, 122, 131, .14); border: 1px solid rgba(94, 122, 131, .28); }

/* list rows */
.fbi-row {
  width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--mh-line); border-radius: 14px; background: var(--mh-surface);
  transition: .15s; margin-bottom: 10px;
}
.fbi-row:hover { border-color: var(--mh-ctrl-focus-border); box-shadow: var(--mh-shadow-sm); }
.fbi-row .fbi-main { flex: 1; min-width: 0; }
.fbi-row .fbi-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.fbi-row .fbi-msg { font-size: 13.5px; color: var(--mh-ink); font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fbi-row .fbi-meta { font-size: 11.5px; color: var(--mh-muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbi-row .fbi-thumb { flex: none; width: 64px; height: 48px; border-radius: 9px; object-fit: cover; border: 1px solid var(--mh-line); background: var(--mh-cream-2); }
.fbi-row .fbi-chev { flex: none; width: 18px; height: 18px; color: var(--mh-muted); }

/* detail panel screenshot */
.fbi-shot-full { width: 100%; border-radius: 12px; border: 1px solid var(--mh-line); display: block; background: var(--mh-cream-2); }

/* ---- SCREENSHOT: CLICK TO ENLARGE (CEO, Aug 14 2026) ---------------------------
   The panel is 440px wide, so a full-screen capture lands here at roughly a third of
   life size - enough to see that something is wrong, not enough to read the field the
   person is pointing at. The thumbnail is now a button that opens the shared .plb
   lightbox.

   The wrapper is a real <button>, so it carries a focus ring and reaches the keyboard;
   these resets only strip the chrome a button brings by default. */
.mh-app .fbi-shot-btn {
  display: block; width: 100%; padding: 0; border: none; background: none;
  border-radius: 12px; cursor: zoom-in; position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.mh-app .fbi-shot-btn:hover { transform: scale(1.01); filter: brightness(1.03); box-shadow: 0 10px 26px rgba(28,39,51,.20); }
.mh-app .fbi-shot-btn:focus-visible { outline: 2px solid var(--mh-green, #4E7C72); outline-offset: 3px; }

/* The magnifier badge. It says "this enlarges" without a line of copy - and it only
   fades UP on hover, so it never sits on top of the thing it is describing. */
.mh-app .fbi-shot-zoom {
  position: absolute; right: 10px; bottom: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(18, 28, 33, .62); color: #fff;
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.mh-app .fbi-shot-btn:hover .fbi-shot-zoom,
.mh-app .fbi-shot-btn:focus-visible .fbi-shot-zoom { opacity: 1; transform: translateY(0); }

/* The enlarged image. .plb-circle is the portrait inner and is round; a screenshot
   needs a rectangle that fits the viewport whatever its aspect ratio, hence contain
   rather than a fixed width. */
.mh-app .fbi-lb-img {
  display: block;
  max-width: min(94vw, 1600px);
  max-height: 88vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 30px 80px rgba(0,0,0,.6);
}
/* The backdrop is a click target for closing, so say so - but the image itself is not. */
.mh-app .plb.fbi-lb { cursor: zoom-out; }
.mh-app .plb.fbi-lb .plb-inner { cursor: default; }
.fbi-shot-none { padding: 20px; text-align: center; color: var(--mh-muted); font-size: 12.5px; border: 1px dashed var(--mh-line); border-radius: 12px; background: var(--mh-cream-2); }
.fbi-note { font-size: 13.5px; line-height: 1.55; color: var(--mh-ink); white-space: pre-wrap; }

/* status control in the detail panel */
.fbi-statusctl { display: flex; gap: 8px; flex-wrap: wrap; }
.fbi-statusctl .mh-sel { flex: 1; min-width: 150px; }
/* THE SELECT MUST FILL THE WRAPPER IT WAS STRETCHED INTO.
   (CEO, 14 Aug 2026: "the width of the field is too short and the arrow is on the
   right too far from the dropdown menu".)

   .mh-sel is an inline-flex wrapper that normally sizes to its content, and the
   chevron is positioned absolutely against IT (right: 14px). The line above gives
   the wrapper flex:1, so here it stretched to 263px - but the app's base rule
   `.mh-app .mh-sel select` sets no width, so the pill stayed at its content width
   of 118px while the chevron stayed pinned to the wrapper's right edge. A short
   pill with an arrow floating 130px away from it.

   Nothing was broken by the dropdown work; this shipped with the panel and only
   became obvious once the arrow mattered. The admin department editor hit the
   identical thing and fixed it the same way (mh-admin.css, .up-deptedit) - those
   are the ONLY two places in the app that stretch this wrapper, and now both
   carry the fix. Any future rule that gives .mh-sel a width owes its select one. */
.mh-app .fbi-statusctl .mh-sel select { width: 100%; }

/* ---- ASSIST01 (2 Oct 2026): the Assistant's question log in the developer vault (/admin/feedback) ---- */
.aq-card { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--mh-line); border-radius: 16px; background: var(--mh-surface); }
.aq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.aq-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--mh-ink); }
.aq-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--mh-muted); }
.aq-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.aq-tog { font: inherit; font-size: 12px; font-weight: 800; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mh-line); background: var(--mh-cream-2); color: var(--mh-ink); }
.aq-tog.on { background: var(--mh-sidebar); color: #fff; border-color: transparent; }
.aq-empty { margin-top: 12px; font-size: 12.5px; color: var(--mh-muted); }
.aq-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.aq-row { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--mh-line); border-radius: 12px; }
.aq-kind { flex: none; min-width: 96px; text-align: center; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  color: var(--mh-muted); background: var(--mh-cream-2); border: 1px solid var(--mh-line); }
.aq-kind.k-unknown { color: #8A5A12; background: rgba(216, 155, 61, .16); border-color: rgba(216, 155, 61, .32); }
.aq-main { flex: 1; min-width: 0; }
.aq-q { font-size: 13.5px; font-weight: 700; color: var(--mh-ink); overflow-wrap: anywhere; }
.aq-meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--mh-muted); }
.aq-mono { font-family: var(--mh-mono, ui-monospace, Consolas, monospace); font-size: 11px; }

/* ---- ASSIST02 (2 Oct 2026): live answers - a big figure, a breakdown, and a list of links (5, then 10 more) ---- */
.as-live .as-src { color: #3D7A5E; }
.as-live .as-src svg { animation: asPulse 1.8s ease-in-out infinite; }
@keyframes asPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.as-stat { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.as-stat b { font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--mh-ink); font-variant-numeric: tabular-nums; }
.as-stat span { font-size: 12.5px; font-weight: 700; color: var(--mh-muted); }
.as-items { display: flex; flex-direction: column; gap: 6px; }
.as-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 13px;
  border: 1px solid var(--mh-line); background: var(--mh-surface); font: inherit; color: var(--mh-ink); cursor: default;
  transition: border-color .16s, box-shadow .16s, transform .16s; animation: asIn .3s cubic-bezier(.2, .9, .3, 1) both;
}
.as-item:disabled { opacity: 1; }
.as-item.is-link { cursor: pointer; }
.as-item.is-link:hover { border-color: color-mix(in srgb, var(--mh-green, #4E7C72) 50%, var(--mh-line)); box-shadow: 0 8px 18px rgba(20, 32, 28, .1); transform: translateY(-1px); }
.as-item:nth-child(2) { animation-delay: .03s; } .as-item:nth-child(3) { animation-delay: .06s; } .as-item:nth-child(4) { animation-delay: .09s; }
.as-item:nth-child(5) { animation-delay: .12s; } .as-item:nth-child(n+6) { animation-delay: .15s; }
.as-item-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, #4E7C72 13%, transparent); color: #3D655D; }
.as-item-ic svg { width: 17px; height: 17px; }
.as-item.ic-household .as-item-ic { background: color-mix(in srgb, #5E8157 14%, transparent); color: #3D543A; }
.as-item.ic-program .as-item-ic { background: color-mix(in srgb, #8E6E89 15%, transparent); color: #6B4F67; }
.as-item.ic-staff .as-item-ic, .as-item.ic-chat .as-item-ic { background: color-mix(in srgb, #56646A 15%, transparent); color: #2A3338; }
.as-item.ic-walkin .as-item-ic, .as-item.ic-money .as-item-ic { background: color-mix(in srgb, #C17A52 15%, transparent); color: #9C5A36; }
.as-item.ic-doc .as-item-ic, .as-item.ic-event .as-item-ic { background: color-mix(in srgb, #D89B3D 15%, transparent); color: #8A5A12; }
.as-item.ic-note .as-item-ic, .as-item.ic-mail .as-item-ic { background: color-mix(in srgb, #5E7A83 15%, transparent); color: #3F5960; }
body.dark .as-item-ic { color: #CFE2DB !important; }
.as-item-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-item-t { font-size: 13px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.as-item-t .as-rec-c { margin-left: 4px; font-weight: 700; }
.as-item-s { font-size: 11.5px; color: var(--mh-muted); line-height: 1.35; overflow-wrap: anywhere; }
.as-item-go { flex: none; color: var(--mh-green, #4E7C72); display: grid; place-items: center; transition: transform .16s; }
.as-item-go svg { width: 15px; height: 15px; }
.as-item.is-link:hover .as-item-go { transform: translateX(2px); }
.as-badge { flex: none; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--mh-muted); background: var(--mh-cream-2); border: 1px solid var(--mh-line); }
.as-badge.t-live { color: #2E6E52; background: rgba(61, 140, 100, .14); border-color: rgba(61, 140, 100, .3); }
.as-badge.t-warn { color: #8A5A12; background: rgba(216, 155, 61, .16); border-color: rgba(216, 155, 61, .32); }
.as-badge.t-bad  { color: #A23B33; background: rgba(192, 71, 63, .12); border-color: rgba(192, 71, 63, .3); }
.as-badge.t-ok   { color: #3D655D; background: rgba(61, 101, 93, .12); border-color: rgba(61, 101, 93, .28); }
body.dark .as-badge.t-live { color: #8FD4B0; } body.dark .as-badge.t-warn { color: #F0C27A; } body.dark .as-badge.t-bad { color: #F09A92; }
.as-left { font-size: 11px; font-weight: 700; opacity: .75; margin-left: 2px; }

/* ---- ASSIST03: the "Add this event?" card ---- */
.as-confirm { border-color: color-mix(in srgb, var(--mh-green, #4E7C72) 40%, var(--mh-line)); box-shadow: 0 10px 26px rgba(30, 70, 58, .14); }
.as-fig-v.plain { color: var(--mh-ink); font-weight: 700; text-align: right; overflow-wrap: break-word; }

/* ---- ASSIST04 (owner, 2 Oct: "the Feedback agent photo not showing all the picture"). The form is a flex column inside
   a fixed-height panel, so on a short screen every child SHRANK - the picture's box (overflow:hidden) collapsed to a 10 px
   strip. Nothing in the form may shrink (the body scrolls instead), and the picture shows WHOLE: full width, natural
   height, never cropped (it was object-fit: cover at max 188 px, which cut the bottom of the screen off). ---- */
.fb-panel .fb-body > * { flex-shrink: 0; }
.fb-panel .fb-shot img { width: 100%; height: auto; max-height: none; object-fit: contain; cursor: zoom-in; }


/* ---- ASSIST05 (2 Oct 2026): Administration > AI Audit - green answered, red not answered ---- */
.aia-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--mh-cream-2); border: 1px solid var(--mh-line); }
.aia-seg button { font: inherit; font-size: 12.5px; font-weight: 800; height: 32px; padding: 0 12px; border-radius: 10px; border: none; cursor: pointer; background: none; color: var(--mh-muted); display: inline-flex; align-items: center; gap: 6px; }
.aia-seg button b { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--mh-surface); color: var(--mh-ink); }
.aia-seg button.on { background: var(--mh-surface); color: var(--mh-ink); box-shadow: 0 2px 8px rgba(20, 32, 28, .12); }
.aia-seg button.ok.on b, .aia-seg button.ok b { background: rgba(46, 140, 90, .14); color: #237247; }
.aia-seg button.bad.on b, .aia-seg button.bad b { background: rgba(192, 57, 43, .12); color: #A8322A; }
.aia-refresh { margin-left: auto; }
.aia-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.aia-kpi { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--mh-line); background: var(--mh-surface); display: flex; flex-direction: column; gap: 4px; }
.aia-kpi span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mh-muted); }
.aia-kpi b { font-size: 24px; font-weight: 800; color: var(--mh-ink); font-variant-numeric: tabular-nums; }
.aia-kpi.ok { border-color: rgba(46, 140, 90, .35); background: color-mix(in srgb, #2E8C5A 7%, var(--mh-surface)); }
.aia-kpi.ok b { color: #237247; }
.aia-kpi.bad { border-color: rgba(192, 57, 43, .35); background: color-mix(in srgb, #C0392B 7%, var(--mh-surface)); }
.aia-kpi.bad b { color: #A8322A; }
.aia-list { display: flex; flex-direction: column; gap: 8px; }
.aia-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; background: var(--mh-surface); border: 1px solid var(--mh-line); border-left-width: 5px; }
.aia-row.ok { border-left-color: #2E8C5A; }
.aia-row.bad { border-left-color: #C0392B; background: color-mix(in srgb, #C0392B 4%, var(--mh-surface)); }
.aia-pill { flex: none; min-width: 104px; text-align: center; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.aia-pill.ok { color: #fff; background: #2E8C5A; }
.aia-pill.bad { color: #fff; background: #C0392B; }
.aia-main { flex: 1; min-width: 0; }
.aia-q { font-size: 14px; font-weight: 700; color: var(--mh-ink); overflow-wrap: anywhere; }
.aia-times { margin-left: 6px; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--mh-cream-2); border: 1px solid var(--mh-line); color: var(--mh-muted); }
.aia-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--mh-muted); }
.aia-key { padding: 1px 6px; border-radius: 6px; background: var(--mh-cream-2); border: 1px solid var(--mh-line); }
.aia-thumb { color: #237247; font-weight: 800; }
body.dark .aia-kpi.ok b, body.dark .aia-seg button.ok b { color: #8FD4B0; }
body.dark .aia-kpi.bad b, body.dark .aia-seg button.bad b { color: #F09A92; }
@media (max-width: 720px) { .aia-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aia-pill { min-width: 0; } }


/* ---- ASSIST06 (2 Oct 2026): the family / person report + the wide panel ---- */
.fb-panel.is-wide { width: min(780px, calc(calc(100 * var(--mh-vw)) - 32px)); height: min(900px, calc(calc(100 * var(--mh-vh)) - 126px - var(--fb-lift, 0px))); transition: width .3s ease, height .3s ease; }
.as-report { gap: 11px; }
.as-sec { border: 1px solid var(--mh-line); border-radius: 14px; padding: 10px 11px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--mh-cream-2) 45%, var(--mh-surface)); }
.as-sec.t-warn { border-color: color-mix(in srgb, #D89B3D 40%, var(--mh-line)); }
.as-sec.t-ok { border-color: color-mix(in srgb, #2E8C5A 35%, var(--mh-line)); }
.as-sec-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mh-ink); }
.as-sec-h b { font-weight: 800; }
.as-sec-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, #4E7C72 13%, transparent); color: #3D655D; }
.as-sec-ic svg { width: 14px; height: 14px; }
.as-sec-n { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--mh-surface); border: 1px solid var(--mh-line); color: var(--mh-muted); }
.as-sec-note { margin: 0; font-size: 12.5px; color: var(--mh-muted); }
.as-sec-more { align-self: flex-start; font: inherit; font-size: 12px; font-weight: 800; color: var(--mh-green, #4E7C72); background: none; border: none; cursor: pointer; padding: 2px 4px; }
.fb-panel.is-wide .as-sec .as-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.dark .as-sec-ic { color: #CFE2DB; }

/* ASSIST07 A1 (2 Oct 2026): a follow-up answer says what it was read with */
.as-follow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--mh-pine, #2f5d50); background: color-mix(in srgb, var(--mh-pine, #2f5d50) 9%, transparent); }
.as-follow svg { width: 12px; height: 12px; flex: none; }


/* ASSIST07 A3 (2 Oct 2026): YOUR DAY on the welcome screen - each line is a question */
.as-brief { margin: 14px auto 0; max-width: 360px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.as-brief-h { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mh-muted); padding: 0 4px; }
.as-brief-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--mh-ink, #1f2b27) 9%, transparent); background: color-mix(in srgb, var(--mh-surface, #fff) 80%, transparent);
  color: var(--mh-ink); font: 600 12.5px/1.3 inherit; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.as-brief-i:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--mh-pine, #2f5d50) 40%, transparent); }
.as-brief-i i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--mh-pine, #2f5d50); }
.as-brief-i.warn i { background: #c98a1b; } .as-brief-i.bad i { background: #c0453a; } .as-brief-i.live i { background: #2e9b6a; box-shadow: 0 0 0 3px color-mix(in srgb, #2e9b6a 22%, transparent); }
.as-brief-i span { flex: 1; } .as-brief-i svg { width: 14px; height: 14px; color: var(--mh-muted); flex: none; }
.as-brief-none { font-size: 12.5px; color: var(--mh-muted); padding: 2px 4px; }
.as-brief.is-loading { flex-direction: column; gap: 6px; }
.as-brief.is-loading span { display: block; height: 34px; border-radius: 12px; background: color-mix(in srgb, var(--mh-ink, #1f2b27) 6%, transparent); animation: asBriefPulse 1.2s ease-in-out infinite; }
.as-brief.is-loading span:nth-child(2) { animation-delay: .15s; } .as-brief.is-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes asBriefPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .as-brief.is-loading span { animation: none; } .as-brief-i { transition: none; } }

/* ASSIST07 A4: Excel + Print on a list or a report */
.as-export { display: inline-flex; gap: 4px; margin-left: auto; }
.as-xbtn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--mh-ink, #1f2b27) 12%, transparent); background: transparent; color: var(--mh-muted); font: 600 11.5px/1 inherit; }
.as-xbtn:hover { color: var(--mh-pine, #2f5d50); border-color: color-mix(in srgb, var(--mh-pine, #2f5d50) 45%, transparent); }
.as-xbtn svg { width: 13px; height: 13px; }


/* ASSIST07 D16 (2 Oct 2026): TEACH on the AI Audit tab */
.aia-row.taught { border-left-color: #6A5ACD; }
.aia-pill.taught { background: color-mix(in srgb, #6A5ACD 14%, transparent); color: #5146a8; }
.aia-seg .taught.on { background: #6A5ACD; color: #fff; }
.aia-taught { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, #6A5ACD 14%, transparent); color: #5146a8; }
.aia-ans { font-size: 12.5px; color: var(--mh-ink); margin-top: 2px; }
.aia-teach-btn { flex: none; align-self: center; height: 30px; padding: 0 12px; border-radius: 9px; cursor: pointer; font: 700 12px/1 inherit;
  border: 1px solid var(--mh-line); background: var(--mh-surface); color: var(--mh-ink); }
.aia-teach-btn.primary { background: var(--mh-pine, #2f5d50); border-color: var(--mh-pine, #2f5d50); color: #fff; }
.aia-teach-btn:disabled { opacity: .5; cursor: default; }
.aia-teach { margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px dashed var(--mh-line); display: flex; flex-direction: column; gap: 8px; }
.aia-teach-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.aia-teach-kinds button { height: 28px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: 600 12px/1 inherit; border: 1px solid var(--mh-line); background: transparent; color: var(--mh-muted); }
.aia-teach-kinds button.on { background: var(--mh-pine, #2f5d50); border-color: var(--mh-pine, #2f5d50); color: #fff; }
input.aia-teach-in, textarea.aia-teach-in { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--mh-line); background: var(--mh-surface); color: var(--mh-ink); font: 13px/1.45 inherit; resize: vertical; }
.mh-sel.aia-teach-in { width: 100%; }
.aia-teach-note { font-size: 11px; color: var(--mh-muted); }
.aia-teach-acts { display: flex; gap: 6px; }


/* ASSIST08 (2 Oct 2026): the microphone - speak instead of typing (Whisper inside the browser, nothing leaves the PC) */
.as-mic { --lvl: 0; flex: none; position: relative; width: 44px; height: 44px; border-radius: 14px; padding: 0; cursor: pointer; display: grid; place-items: center;
  border: 1.5px solid var(--mh-ctrl-border); background: var(--mh-ctrl-fill); color: var(--mh-ink); transition: background .15s, border-color .15s, color .15s; }
.as-mic svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.as-mic:not([disabled]):hover { border-color: var(--mh-ctrl-focus-border); color: var(--mh-pine, #2f5d50); }
.as-mic[disabled] { opacity: .55; cursor: default; }
.as-mic.is-on { background: #c0453a; border-color: #c0453a; color: #fff; }
.as-mic.is-on::before { content: ""; position: absolute; inset: -4px; border-radius: 17px; border: 2px solid #c0453a;
  opacity: calc(.25 + var(--lvl) * .75); transform: scale(calc(1 + var(--lvl) * .14)); transition: transform .12s linear, opacity .12s linear; }
.as-mic.is-on::after { content: ""; position: absolute; inset: 0; border-radius: 14px; animation: asMicPulse 1.4s ease-out infinite; box-shadow: 0 0 0 0 color-mix(in srgb, #c0453a 45%, transparent); }
@keyframes asMicPulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.as-mic.is-busy { color: var(--mh-pine, #2f5d50); }
@media (prefers-reduced-motion: reduce) { .as-mic.is-on::after { animation: none; } .as-mic.is-on::before { transition: none; } }


/* ASSIST09 (2 Oct 2026): live dictation - the words appear as you speak; the box glows red while it is still listening */
.as-input.is-dictating { border-color: color-mix(in srgb, #c0453a 55%, var(--mh-ctrl-border)); box-shadow: 0 0 0 3px color-mix(in srgb, #c0453a 14%, transparent); }


/* =============================================================================
   FABGLASS (2 Oct 2026). Owner: "Change the icon background color glassy and turn the logo to Matthew House branding color
   add a continue animation only on the house logo so cool".
   THE BUBBLE: frosted glass - translucent, blurred, a light rim and an inner highlight - instead of solid pine.
   THE MARK (.fb-house - NOT .fb-mark, which an older rule at the top of this file styles as a bordered tile): the house logo (mark-white.png used as a MASK) filled with the brand greens (--mh-sidebar -> --mh-green), with
   a band of light that sweeps through the house and a slow breath (lift + scale). Only the house moves; the glass, the
   spark and the open / close spin are as before. Reduced Motion = still.
   ============================================================================= */
.fb-fab {
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(232, 241, 237, .42));
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  color: var(--mh-green, #4E7C72);
  box-shadow:
    0 10px 28px rgba(20, 34, 30, .22),
    0 2px 6px rgba(20, 34, 30, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(46, 74, 67, .10),
    0 0 0 1px rgba(255, 255, 255, .65);
}
.fb-fab:hover {
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(232, 241, 237, .55));
  box-shadow: 0 14px 34px rgba(20, 34, 30, .28), inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .8);
}
.fb-fab:focus-visible { box-shadow: var(--mh-ctrl-focus-ring), 0 10px 28px rgba(20, 34, 30, .22), inset 0 1px 0 #fff; }
body.dark .fb-fab {
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(58, 78, 72, .62), rgba(28, 40, 37, .55));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(255, 255, 255, .14);
  color: #9FC7BA;
}
body.dark .fb-fab:hover { background: radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, rgba(66, 88, 81, .7), rgba(32, 46, 42, .62)); }

/* the house: the brand greens, poured into the logo's own shape */
.fb-house {
  display: block; width: 30px; height: 30px;
  -webkit-mask: url(../images/mark-white.png) center / contain no-repeat;
  mask: url(../images/mark-white.png) center / contain no-repeat;
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 255, 255, .95) 48%, rgba(220, 245, 233, .9) 52%, transparent 62%, transparent 100%) 0 0 / 260% 100% no-repeat,
    linear-gradient(160deg, #6E9F92 0%, var(--mh-green, #4E7C72) 45%, var(--mh-sidebar, #2E4A43) 100%);
  filter: drop-shadow(0 1px 1px rgba(46, 74, 67, .25));
  transform-origin: 50% 80%;
  animation: fbMarkShine 3.4s ease-in-out infinite, fbMarkBreath 3.4s ease-in-out infinite;
}
body.dark .fb-house {
  background:
    linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255, 255, 255, .9) 48%, rgba(220, 245, 233, .85) 52%, transparent 62%, transparent 100%) 0 0 / 260% 100% no-repeat,
    linear-gradient(160deg, #CFE2DB 0%, #9FC7BA 50%, #6E9F92 100%);
}
/* a band of light sweeps through the house, then rests */
@keyframes fbMarkShine {
  0%   { background-position: 130% 0, 0 0; }
  55%  { background-position: -30% 0, 0 0; }
  100% { background-position: -30% 0, 0 0; }
}
/* and the house breathes */
@keyframes fbMarkBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.5px) scale(1.06); }
}
/* the close chevron on the back of the coin takes the brand green on glass */
.fb-back { color: var(--mh-sidebar, #2E4A43); }
body.dark .fb-back { color: #CFE2DB; }
@media (prefers-reduced-motion: reduce) { .fb-house { animation: none; } }
body.reduce-motion .fb-house { animation: none; }   /* Settings > Appearance > Reduced Motion */


/* =============================================================================
   FABGROW (2 Oct 2026). Owner: "change the house animation or effect to somthing special also add an outer color same as the
   house color very tiny". The mark is a roof over three rising bars - so the bars GROW: left, middle, right rise from the
   floor one after another with a small overshoot (a family's progress), the house glows when it is complete, a glint of
   light crosses it, and it rests before building again (5.6 s). The same logo, cut into four layers with clip-path
   (measured on mark-white.png: bars at x 21-36 / 42-57 / 63-79 %, bars below 44 % - the middle one from 34 %, floor 78 %).
   THE RING: a hairline of the house's own green just outside the glass.
   ============================================================================= */
.fb-house {
  position: relative;
  -webkit-mask: none; mask: none; background: none; filter: none;
  animation: fbHouseGlow 5.6s ease-in-out infinite;
}
.fb-house > i {
  position: absolute; inset: 0; display: block;
  -webkit-mask: url(../images/mark-white.png) center / contain no-repeat;
  mask: url(../images/mark-white.png) center / contain no-repeat;
  background:
    linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .95) 48%, rgba(220, 245, 233, .9) 52%, transparent 60%, transparent 100%) 0 0 / 260% 100% no-repeat,
    linear-gradient(160deg, #6E9F92 0%, var(--mh-green, #4E7C72) 45%, var(--mh-sidebar, #2E4A43) 100%);
  animation: fbHouseGlint 5.6s ease-in-out infinite;
}
body.dark .fb-house > i {
  background:
    linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .9) 48%, rgba(220, 245, 233, .85) 52%, transparent 60%, transparent 100%) 0 0 / 260% 100% no-repeat,
    linear-gradient(160deg, #CFE2DB 0%, #9FC7BA 50%, #6E9F92 100%);
}
/* ASSIST13 (note 55, owner: "the AI icon on the dark mode looks like a button"): the OLD dark rule above (body.dark .fb-house,
   from FABGLASS) painted the whole box with the green gradient - it out-ranks the plain ".fb-house { background: none }" here,
   and with the mask gone it drew a solid SQUARE in dark mode on the bubble, the welcome circle, the answer avatar and the
   greeting. The layers (> i) carry the dark greens; the box itself paints nothing, in both themes. */
body.dark .fb-house { background: none; -webkit-mask: none; mask: none; filter: none; }
.fb-house .m-roof { clip-path: polygon(0 0, 100% 0, 100% 44%, 57% 44%, 57% 34%, 42% 34%, 42% 44%, 0 44%); }
.fb-house .m-b1, .fb-house .m-b2, .fb-house .m-b3 { transform-origin: 50% 78%; }
.fb-house .m-b1 { clip-path: inset(44% 63% 0 20%); animation: fbHouseGlint 5.6s ease-in-out infinite, fbBarGrow 5.6s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.fb-house .m-b2 { clip-path: inset(34% 42% 0 41%); animation: fbHouseGlint 5.6s ease-in-out infinite, fbBarGrow 5.6s cubic-bezier(.3, 1.5, .5, 1) .14s infinite; }
.fb-house .m-b3 { clip-path: inset(44% 20% 0 62%); animation: fbHouseGlint 5.6s ease-in-out infinite, fbBarGrow 5.6s cubic-bezier(.3, 1.5, .5, 1) .28s infinite; }

/* each bar: rests low, rises with a small overshoot, stays, then sinks back to build again */
@keyframes fbBarGrow {
  0%       { transform: scaleY(.18); }
  12%      { transform: scaleY(1.08); }
  17%      { transform: scaleY(1); }
  84%      { transform: scaleY(1); }
  94%, 100% { transform: scaleY(.18); }
}
/* the glint crosses the house once it is built */
@keyframes fbHouseGlint {
  0%, 24%  { background-position: 130% 0, 0 0; }
  48%      { background-position: -30% 0, 0 0; }
  100%     { background-position: -30% 0, 0 0; }
}
/* the finished house swells a touch while a soft round halo blooms behind it. NO css filter here: a filter inside the glass
   bubble (backdrop-filter) is drawn as a lighter SQUARE patch in Chrome - measured 2 Oct; the halo is a plain gradient. */
@keyframes fbHouseGlow {
  0%, 10%  { transform: scale(1); }
  24%      { transform: scale(1.05); }
  40%, 100% { transform: scale(1); }
}
.fb-house::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(78, 124, 114, .38) 0%, rgba(78, 124, 114, .14) 45%, rgba(78, 124, 114, 0) 70%);
  opacity: 0; animation: fbHouseHalo 5.6s ease-in-out infinite;
}
body.dark .fb-house::before { background: radial-gradient(circle, rgba(159, 199, 186, .36) 0%, rgba(159, 199, 186, .12) 45%, rgba(159, 199, 186, 0) 70%); }
@keyframes fbHouseHalo {
  0%, 12%  { opacity: 0; transform: scale(.7); }
  26%      { opacity: 1; transform: scale(1.1); }
  50%, 100% { opacity: 0; transform: scale(1.25); }
}

/* the hairline ring in the house's own green, just outside the glass */
.fb-fab {
  box-shadow:
    0 0 0 1.5px rgba(78, 124, 114, .85),
    0 0 10px 1px rgba(78, 124, 114, .22),
    0 10px 28px rgba(20, 34, 30, .22),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(46, 74, 67, .10);
}
.fb-fab:hover {
  box-shadow: 0 0 0 1.5px rgba(78, 124, 114, 1), 0 0 14px 2px rgba(78, 124, 114, .3), 0 14px 34px rgba(20, 34, 30, .28), inset 0 1px 0 #fff;
}
body.dark .fb-fab {
  box-shadow: 0 0 0 1.5px rgba(159, 199, 186, .8), 0 0 10px 1px rgba(159, 199, 186, .2), 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
body.dark .fb-fab:hover { box-shadow: 0 0 0 1.5px rgba(159, 199, 186, 1), 0 0 14px 2px rgba(159, 199, 186, .28), 0 10px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .26); }

@media (prefers-reduced-motion: reduce) { .fb-house, .fb-house > i, .fb-house::before { animation: none !important; transform: none !important; } }
body.reduce-motion .fb-house, body.reduce-motion .fb-house > i, body.reduce-motion .fb-house::before { animation: none !important; transform: none !important; }


/* =============================================================================
   ORBHOUSE (2 Oct 2026). Owner: "move the animated white logo on the place of the AI star icon". The welcome circle shows
   the growing house (FABGROW) in WHITE on its green, a little larger; the circle itself only floats now (no tilt - a
   house should stand straight).
   ============================================================================= */
.as-hello-orb.has-house { animation: asOrbFloat 5.6s ease-in-out infinite; }
@keyframes asOrbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.as-hello-orb .fb-house { width: 34px; height: 34px; }
.fb-house.is-white > i,
body.dark .fb-house.is-white > i {
  background:
    linear-gradient(105deg, transparent 0%, transparent 40%, rgba(190, 230, 214, .95) 48%, rgba(255, 236, 190, .9) 52%, transparent 60%, transparent 100%) 0 0 / 260% 100% no-repeat,
    linear-gradient(160deg, #FFFFFF 0%, #F1F8F5 55%, #D9ECE5 100%);
}
.fb-house.is-white::before,
body.dark .fb-house.is-white::before {
  background: radial-gradient(circle, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, 0) 70%);
}
@media (prefers-reduced-motion: reduce) { .as-hello-orb.has-house { animation: none; } }
body.reduce-motion .as-hello-orb.has-house { animation: none; }


/* ORBGLASS (2 Oct 2026). Owner: "same style white glassy" - the welcome circle wears exactly the bubble's look: white frosted
   glass, the green growing house, and the hairline ring in the house green. (The white house above stays unused.) */
.as-hello-orb.has-house {
  color: var(--mh-green, #4E7C72);
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(232, 241, 237, .5));
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    0 0 0 1.5px rgba(78, 124, 114, .85),
    0 0 12px 1px rgba(78, 124, 114, .22),
    0 12px 28px rgba(30, 60, 50, .18),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(46, 74, 67, .10);
}
body.dark .as-hello-orb.has-house {
  color: #9FC7BA;
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(58, 78, 72, .62), rgba(28, 40, 37, .55));
  box-shadow: 0 0 0 1.5px rgba(159, 199, 186, .8), 0 0 12px 1px rgba(159, 199, 186, .2), 0 12px 28px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .22);
}


/* MINIHOUSE (2 Oct 2026). Owner: "that small logo that is appearing turn that too to that white animated one". The avatar
   beside each answer carries the white growing house (FABGROW layers, .is-white). Only the newest answer's house moves -
   older ones stand complete and still, so a long conversation is not a wall of moving icons. */
.as-mini .fb-house { width: 17px; height: 17px; }
.as-mini .fb-house::before { inset: -4px; }
.as-mini:not(.is-live) .fb-house,
.as-mini:not(.is-live) .fb-house > i,
.as-mini:not(.is-live) .fb-house::before { animation: none; }


/* MINIGLASS (2 Oct 2026). Owner: "turn it that one to same glass style same think" - the answer avatar wears the bubble's look:
   white frosted glass, the green growing house, and the hairline ring in the house green (smoky glass in dark mode). */
.as-mini {
  color: var(--mh-green, #4E7C72);
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(232, 241, 237, .55));
  box-shadow:
    0 0 0 1px rgba(78, 124, 114, .85),
    0 0 6px rgba(78, 124, 114, .2),
    0 3px 8px rgba(20, 34, 30, .12),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
body.dark .as-mini {
  color: #9FC7BA;
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(58, 78, 72, .7), rgba(28, 40, 37, .6));
  box-shadow: 0 0 0 1px rgba(159, 199, 186, .8), 0 0 6px rgba(159, 199, 186, .18), 0 3px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* =============================================================================
   TABSGLASS (3 Oct 2026). Owner: "turn that toggle buttons like our new standards interface, or if that looks not good turn
   them to glass and get ride of the gray look". The Ask / Feedback switch now wears the app's standard switch (Home's This
   Week / Month / All Time - mh-canvas.css): a frosted-glass track with a green-tinted rim, and the chosen side a solid dark
   pill with white text. The grey "what I can do" rows under the greeting are glass too.
   ============================================================================= */
.as-tabs {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .30) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(47, 107, 87, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(47, 107, 87, .05), 0 6px 16px -10px rgba(30, 55, 48, .32);
}
.as-tabs-pill {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mh-green, #4E7C72) 0%, var(--mh-sidebar, #2E4A43) 100%);
  box-shadow: 0 4px 12px -4px rgba(30, 55, 48, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.as-tab { color: var(--mh-muted); }
.as-tab.on, .as-tab.on svg { color: #fff; }
.as-tab:not(.on):hover { color: var(--mh-ink); }
body.dark .as-tabs {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(159, 199, 186, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px -10px rgba(0, 0, 0, .5);
}
body.dark .as-tabs-pill { background: linear-gradient(180deg, #5E8F82 0%, #3B5D55 100%); }

.as-cans span {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .30) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(47, 107, 87, .20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 12px -9px rgba(30, 55, 48, .3);
}
body.dark .as-cans span {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(159, 199, 186, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* =============================================================================
   NUDGE (3 Oct 2026) - THE ASSISTANT SPEAKS UP. Owner: "it gives pop up messages regarding the Your Day ... time it after 3 mins
   ... don't forget the arrow that connected to the AI icon". A glass speech bubble that grows out of the Assistant bubble, its
   arrow pointing down at the house; one message at a time (FeedbackWidget.Nudge.cs decides what and when). Click = the
   Assistant opens on that question; X = gone; it leaves by itself after 14 s. Follows the bubble when it lifts (--fb-lift).
   ============================================================================= */
.as-nudge {
  position: fixed; right: 24px; bottom: calc(24px + 56px + 16px + var(--fb-lift, 0px)); z-index: 100092;
  width: min(330px, calc(100vw - 32px)); padding: 12px 12px 12px 14px; border-radius: 18px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; cursor: pointer; text-align: left;
  color: var(--mh-ink); font: inherit;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(236, 244, 241, .78));
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: none;
  box-shadow: 0 0 0 1.5px rgba(78, 124, 114, .7), 0 18px 40px -12px rgba(20, 34, 30, .35), 0 4px 12px rgba(20, 34, 30, .10), inset 0 1px 0 #fff;
  transform-origin: calc(100% - 28px) calc(100% + 16px);
  animation: asNudgeIn .5s cubic-bezier(.2, 1.4, .4, 1) both;
  transition: bottom .22s ease;
}
/* the arrow - a small rotated square tied to the bubble's centre */
.as-nudge::after {
  content: ""; position: absolute; right: 22px; bottom: -7px; width: 14px; height: 14px; transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(240, 246, 244, .92), rgba(236, 244, 241, .92));
  box-shadow: 1.5px 1.5px 0 0 rgba(78, 124, 114, .7);
  border-bottom-right-radius: 3px;
}
.as-nudge.is-leaving { animation: asNudgeOut .32s ease-in both; }
@keyframes asNudgeIn { 0% { opacity: 0; transform: translateY(12px) scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes asNudgeOut { to { opacity: 0; transform: translateY(10px) scale(.7); } }
.as-nudge:hover { box-shadow: 0 0 0 1.5px rgba(78, 124, 114, 1), 0 22px 44px -12px rgba(20, 34, 30, .4), 0 4px 12px rgba(20, 34, 30, .12), inset 0 1px 0 #fff; }
.as-nudge-ic {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--mh-green, #4E7C72);
  background: color-mix(in srgb, var(--mh-green, #4E7C72) 12%, #fff);
}
.as-nudge.warn .as-nudge-ic { color: #a8701a; background: color-mix(in srgb, #D89B3D 18%, #fff); }
.as-nudge.bad .as-nudge-ic { color: #b23b30; background: color-mix(in srgb, #c0453a 14%, #fff); }
.as-nudge.live .as-nudge-ic { color: #1f7a52; background: color-mix(in srgb, #2e9b6a 16%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, #2e9b6a 18%, transparent); }
.as-nudge-ic svg { width: 18px; height: 18px; }
.as-nudge-t { min-width: 0; }
.as-nudge-t b { display: block; font-size: 13px; font-weight: 800; line-height: 1.3; }
.as-nudge-t span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--mh-muted); }
.as-nudge-t em { display: inline-block; margin-top: 5px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--mh-green, #4E7C72); }
.as-nudge-x {
  align-self: start; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center;
  background: transparent; color: var(--mh-muted);
}
.as-nudge-x:hover { background: color-mix(in srgb, var(--mh-ink, #1f2b27) 8%, transparent); color: var(--mh-ink); }
.as-nudge-x svg { width: 14px; height: 14px; }
body.dark .as-nudge {
  color: #E7EFEC;
  background: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, rgba(48, 66, 60, .9), rgba(28, 40, 37, .88));
  box-shadow: 0 0 0 1.5px rgba(159, 199, 186, .6), 0 18px 40px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.dark .as-nudge::after { background: linear-gradient(135deg, rgba(32, 46, 42, .92), rgba(28, 40, 37, .92)); box-shadow: 1.5px 1.5px 0 0 rgba(159, 199, 186, .6); }
body.dark .as-nudge-t span { color: #A9BBB5; }
body.dark .as-nudge-ic { background: rgba(159, 199, 186, .16); color: #CFE2DB; }
@media (max-width: 600px) { .as-nudge { right: 16px; bottom: calc(16px + 56px + 16px + var(--fb-lift, 0px)); } }
@media (prefers-reduced-motion: reduce) { .as-nudge, .as-nudge.is-leaving { animation: none; } }
body.reduce-motion .as-nudge, body.reduce-motion .as-nudge.is-leaving { animation: none; }

/* ASSIST13 - THE GREETING ("Hi <first name>, I am here to help you!"): its icon is the Assistant itself - the growing house on
   the bubble's white glass with the hairline green ring (MINIGLASS), so the message plainly comes from the bubble below it. */
.as-nudge-ic.is-house {
  color: var(--mh-green, #4E7C72);
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(232, 241, 237, .55));
  box-shadow: 0 0 0 1px rgba(78, 124, 114, .85), 0 0 6px rgba(78, 124, 114, .2), 0 3px 8px rgba(20, 34, 30, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.as-nudge-ic.is-house .fb-house { width: 20px; height: 20px; }
.as-nudge-ic.is-house .fb-house::before { inset: -5px; }
body.dark .as-nudge-ic.is-house {
  color: #9FC7BA;
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, rgba(58, 78, 72, .7), rgba(28, 40, 37, .6));
  box-shadow: 0 0 0 1px rgba(159, 199, 186, .8), 0 0 6px rgba(159, 199, 186, .18), 0 3px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}

/* the on/off switch for the pop-ups, in the Assistant's header */
.as-iconbtn.is-muted { opacity: .55; }


/* =============================================================================
   THINK (3 Oct 2026). Owner: "that ... dot typing from AI if you can change that too for something special like real AI waving
   then show the answer". While the Assistant works:
     - its house (the glass avatar) THINKS: the three bars rise and fall in turn, like a voice;
     - the bubble says what it is doing in a line of text with a band of light waving through it, moving on from "Thinking" to
       "Looking it up" to "Reading the records", with a small wave beside it;
     - then the answer slides up into place.
   ============================================================================= */
.as-typing { display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; }
.as-typing > i { display: none; }   /* the old three dots */
.as-think { position: relative; display: inline-grid; min-width: 132px; height: 18px; }
.as-think b {
  grid-area: 1 / 1; font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; opacity: 0;
  background: linear-gradient(100deg, var(--mh-muted, #6b7a75) 0%, var(--mh-muted, #6b7a75) 35%, var(--mh-green, #4E7C72) 45%, #9FD3BF 50%, var(--mh-green, #4E7C72) 55%, var(--mh-muted, #6b7a75) 65%, var(--mh-muted, #6b7a75) 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: asThinkShine 1.6s linear infinite, asThinkWord 4.8s ease-in-out infinite;
}
.as-think b::after { content: "..."; }
.as-think b:nth-child(1) { animation-delay: 0s, 0s; }
.as-think b:nth-child(2) { animation-delay: 0s, 1.6s; }
.as-think b:nth-child(3) { animation-delay: 0s, 3.2s; }
@keyframes asThinkShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes asThinkWord {
  0%       { opacity: 0; transform: translateY(5px); }
  6%, 30%  { opacity: 1; transform: none; }
  36%, 100% { opacity: 0; transform: translateY(-5px); }
}
/* a short sentence of thought: the first line simply stays when the answer comes before the others */
.as-wave { display: inline-flex; align-items: center; gap: 2.5px; height: 16px; }
.as-wave i { width: 3px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #8FC2B0, var(--mh-green, #4E7C72)); transform: scaleY(.3); animation: asWave 1s ease-in-out infinite; }
.as-wave i:nth-child(2) { animation-delay: .12s; } .as-wave i:nth-child(3) { animation-delay: .24s; }
.as-wave i:nth-child(4) { animation-delay: .36s; } .as-wave i:nth-child(5) { animation-delay: .48s; }
@keyframes asWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* the house in the avatar thinks: its bars wave, faster, no glint or halo */
.as-mini.is-thinking .fb-house, .as-mini.is-thinking .fb-house::before { animation: none; }
.as-mini.is-thinking .fb-house > i { animation: none; }
.as-mini.is-thinking .fb-house .m-b1 { animation: asHouseWave .9s ease-in-out infinite; }
.as-mini.is-thinking .fb-house .m-b2 { animation: asHouseWave .9s ease-in-out .15s infinite; }
.as-mini.is-thinking .fb-house .m-b3 { animation: asHouseWave .9s ease-in-out .3s infinite; }
.as-mini.is-thinking { box-shadow: 0 0 0 1px rgba(78, 124, 114, 1), 0 0 10px 1px rgba(78, 124, 114, .35), 0 3px 8px rgba(20, 34, 30, .12), inset 0 1px 0 #fff; }
@keyframes asHouseWave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1.05); } }

/* the answer slides up into place (only the new card - re-renders never replay it) */
.as-ans > :not(.as-typing):not(.as-follow) { animation: asAnswerIn .42s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes asAnswerIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

body.dark .as-think b { background-image: linear-gradient(100deg, #A9BBB5 0%, #A9BBB5 35%, #9FC7BA 45%, #E6FFF5 50%, #9FC7BA 55%, #A9BBB5 65%, #A9BBB5 100%); }
@media (prefers-reduced-motion: reduce) {
  .as-think b, .as-wave i, .as-mini.is-thinking .fb-house > i, .as-ans > * { animation: none !important; }
  .as-think b:nth-child(1) { opacity: 1; }
}
body.reduce-motion .as-think b, body.reduce-motion .as-wave i, body.reduce-motion .as-mini.is-thinking .fb-house > i, body.reduce-motion .as-ans > * { animation: none !important; }
body.reduce-motion .as-think b:nth-child(1) { opacity: 1; }

/* =============================================================================
   ASSIST13 - THE NEXT STEP, ON EVERY REPORT (owner, note 58: "Monthly income it's not set but add a link that Add Monthly income
   ... if there is no case notes add a link add a case note for this family ... make it very handy"). A "Not set" value carries its
   own small link underneath; a section ends with its next steps as a row of quiet pine links. Glass + pine, like the rest.
   ============================================================================= */
.as-fig-v.has-add { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.as-fig-unset { color: var(--mh-muted); font-weight: 600; }
.as-fig-add, .as-sec-act {
  display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; font: inherit; white-space: normal; text-align: left;
  font-size: 11.5px; font-weight: 800; line-height: 1.25; color: var(--mh-green-d, #2E5A51);
  max-width: 100%;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--mh-green, #4E7C72) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mh-green, #4E7C72) 28%, transparent);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.as-fig-add svg, .as-sec-act svg { width: 12px; height: 12px; flex: none; }
.as-fig-add:hover, .as-sec-act:hover, .as-fig-add:focus-visible, .as-sec-act:focus-visible {
  background: var(--mh-green, #4E7C72); color: #fff; box-shadow: inset 0 0 0 1px var(--mh-green, #4E7C72); outline: none;
}
.as-sec-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mh-line); }
body.dark .as-fig-unset { color: #97A6B0; }
body.dark .as-fig-add, body.dark .as-sec-act {
  color: #A8DCC6; background: rgba(159, 199, 186, .10); box-shadow: inset 0 0 0 1px rgba(159, 199, 186, .32);
}
body.dark .as-fig-add:hover, body.dark .as-sec-act:hover, body.dark .as-fig-add:focus-visible, body.dark .as-sec-act:focus-visible {
  background: #9FC7BA; color: #12201C; box-shadow: inset 0 0 0 1px #9FC7BA;
}
.as-fig-add { white-space: nowrap; }   /* one line - the value column gives it the room (measured: "Add the US arrival date" 152px) */

/* ASSIST14 (notes 61-63): a conversation answer's next steps - the suggestion chips and the developer's call / email buttons */
.as-talk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.as-talk-chips a.as-btn { text-decoration: none; }
.as-unknown .as-talk-chips { margin: 2px 0 10px; }
/* ASSIST16: the related questions under a live answer */
.as-live .as-live-chips { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed rgba(26, 46, 40, .14); }
body.dark .as-live .as-live-chips { border-top-color: rgba(255, 255, 255, .14); }


/* ASSIST17 (note 71): a report's own table of contents, and the flash that shows where a jump landed */
.as-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; padding: 8px; border-radius: 12px; background: rgba(26, 46, 40, .045); }
.as-toc-b { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(26, 46, 40, .14); background: rgba(255, 255, 255, .7); color: #2F4A43; font: 600 11.5px/1 inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.as-toc-b:hover { background: #fff; border-color: rgba(78, 124, 114, .55); }
.as-toc-b b { font-weight: 700; font-size: 10.5px; padding: 2px 6px; border-radius: 999px; background: rgba(78, 124, 114, .16); color: #2F4A43; }
.as-toc-b.t-warn { border-color: rgba(193, 122, 82, .5); color: #8A4B26; }
.as-toc-b.t-warn b { background: rgba(193, 122, 82, .2); color: #8A4B26; }
.as-toc-b.t-ok { border-color: rgba(94, 129, 87, .45); }
.as-sec { scroll-margin-top: 8px; }
.as-sec-flash { animation: asSecFlash 1.1s ease-out 1; }
@keyframes asSecFlash { 0% { box-shadow: 0 0 0 0 rgba(78, 124, 114, .55); } 100% { box-shadow: 0 0 0 10px rgba(78, 124, 114, 0); } }
@media (prefers-reduced-motion: reduce) { .as-sec-flash { animation: none; } }
body.dark .as-toc { background: rgba(255, 255, 255, .05); }
body.dark .as-toc-b { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #D6E4DE; }
body.dark .as-toc-b:hover { background: rgba(255, 255, 255, .12); }
body.dark .as-toc-b b { background: rgba(127, 196, 163, .2); color: #CFE8DC; }
body.dark .as-toc-b.t-warn { border-color: rgba(237, 176, 143, .5); color: #EDB08F; }
body.dark .as-toc-b.t-warn b { background: rgba(237, 176, 143, .18); color: #EDB08F; }

/* ASSIST18 (note 72): the Assistant answers in words first. The sentence is typed by feedback.js; with no script it is shown whole. */
.as-say-t:empty:not([data-typing])::before { content: attr(data-say); }
.as-say-t[data-typing]::after { content: ""; display: inline-block; width: 6px; height: 1em; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background: currentColor; opacity: .55; animation: asCaret .8s steps(2, start) infinite; }
@keyframes asCaret { 50% { opacity: 0; } }
.as-bub.as-say { margin-bottom: 8px; }
.as-ans > .as-card, .as-ans > .as-recs, .as-ans > .as-acts, .as-ans > .as-talk-chips { transition: opacity .32s ease, transform .32s ease; }
.as-after-say { opacity: 0; transform: translateY(6px); }
.as-ai { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; vertical-align: 2px; color: #1F3A33; background: linear-gradient(135deg, #CFE8DC, #9FD3BC); }
@media (prefers-reduced-motion: reduce) { .as-say-t[data-typing]::after { animation: none; } .as-after-say { opacity: 1; transform: none; } }

/* =====================================================================================================================
   ASSIST19 (3 Oct 2026, training note 78) - A WIZARD'S FIELDS INSIDE THE AI (AssistantFormCard.razor).
   Owner: "the AI must list the fields and request from users please fill the fields below I will added to you".
   The fields are the standard Mint tile (the panel is a .mint-kit, the Feedback tab's own tiles) - this block only lays them
   out in the card, marks the one being asked for, and draws the three things the kit has no tile for: a yes / no switch, the
   day chips and the search list under a "who" field. Dropdowns are plain selects, so they open the app's own list.
   ===================================================================================================================== */
.as-form { border-color: color-mix(in srgb, var(--mh-green, #4E7C72) 40%, var(--mh-line)); box-shadow: 0 10px 26px rgba(30, 70, 58, .14); }
.as-form.is-old { box-shadow: none; border-color: var(--mh-line); opacity: .92; }
.as-form-lead { color: var(--mh-ink); }
.as-form-key { margin-left: 4px; font-size: 11.5px; color: var(--mh-muted); white-space: nowrap; }
.as-form-key b { color: #C0473F; font-weight: 800; }
.as-ffs { display: flex; flex-direction: column; gap: 9px; }
.fb-panel.mint-kit .as-ffs .fb-tile { margin: 0; }
.as-ffs .mint-w .mint-in { width: 100%; min-width: 0; }
.as-ffs .mint-w textarea.mint-in { min-height: 62px; resize: vertical; }
.as-ffs .mint-w input[type="date"].mint-in, .as-ffs .mint-w input[type="time"].mint-in { font: inherit; font-weight: 700; color: var(--mh-ink); background: transparent; border: 0; padding: 0; outline: none; color-scheme: light; cursor: text; }
.as-ffs .mint-w.empty input[type="date"].mint-in, .as-ffs .mint-w.empty input[type="time"].mint-in { color: var(--mh-muted); font-weight: 600; }
body.dark .as-ffs .mint-w input[type="date"].mint-in, body.dark .as-ffs .mint-w input[type="time"].mint-in { color-scheme: dark; }
.as-ffs .mint-w.is-asked { border-color: color-mix(in srgb, var(--mh-green, #4E7C72) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-green, #4E7C72) 16%, transparent); }
.as-ff-head { margin: 6px 0 -2px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mh-green, #4E7C72); }
.as-ff-msg { margin: -5px 2px 0; font-size: 12px; font-weight: 700; color: #B0463C; }
.as-ff-note { margin: -5px 2px 0; font-size: 11.5px; color: var(--mh-muted); }
.as-form-err { padding: 9px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: #9C3A31; background: color-mix(in srgb, #C0473F 9%, var(--mh-surface, #fff)); border: 1px solid color-mix(in srgb, #C0473F 30%, transparent); }
.as-form-ack { padding: 9px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.45; color: #7A5410; background: color-mix(in srgb, #D89B3D 11%, var(--mh-surface, #fff)); border: 1px solid color-mix(in srgb, #D89B3D 32%, transparent); }
.as-form-state { margin: 0; font-size: 12px; font-weight: 700; color: var(--mh-muted); }
.as-form-state.ok { color: var(--mh-green-d, #3D655D); }
.as-form-foot { font-style: italic; }
/* yes / no */
.as-sw { display: flex; align-items: center; gap: 10px; padding: 4px 2px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--mh-ink); user-select: none; }
.as-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.as-sw-t { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--mh-ink) 20%, transparent); transition: background .18s ease; }
.as-sw-k { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 34, 30, .3); transition: transform .18s ease; }
.as-sw.on .as-sw-t { background: var(--mh-green, #4E7C72); }
.as-sw.on .as-sw-k { transform: translateX(16px); }
.as-sw input:focus-visible + .as-sw-t { box-shadow: var(--mh-ctrl-focus-ring, 0 0 0 3px rgba(78, 124, 114, .35)); }
/* the days of the week */
.as-day-row { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 2px; }
.as-day { min-width: 40px; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--mh-line); background: transparent; font: inherit; font-size: 12px; font-weight: 800; color: var(--mh-muted); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.as-day:hover { border-color: var(--mh-green, #4E7C72); color: var(--mh-ink); }
.as-day.on { background: var(--mh-sidebar, #2E4A43); border-color: transparent; color: #fff; }
/* who: the chosen record, and the matches under the box */
.as-pick-on { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; font-size: 14px; color: var(--mh-ink); }
.as-pick-on b { font-weight: 700; overflow-wrap: anywhere; }
.as-pick-x { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--mh-ink) 9%, transparent); color: var(--mh-muted); cursor: pointer; }
.as-pick-x:hover { background: color-mix(in srgb, #C0473F 16%, transparent); color: #B0463C; }
.as-pick-x svg { width: 11px; height: 11px; }
.as-pick-list { display: flex; flex-direction: column; margin-top: -4px; border: 1px solid var(--mh-line); border-radius: 12px; overflow: hidden; background: var(--mh-surface, #fff); }
.as-pick-hit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--mh-ink); }
.as-pick-hit + .as-pick-hit { border-top: 1px solid var(--mh-line); }
.as-pick-hit:hover, .as-pick-hit:focus-visible { background: color-mix(in srgb, var(--mh-green, #4E7C72) 10%, transparent); outline: none; }
.as-pick-hit b { font-size: 13px; font-weight: 700; }
.as-pick-hit small { font-size: 11.5px; color: var(--mh-muted); }
.as-pick-none { padding: 8px 12px; font-size: 12px; color: var(--mh-muted); }
body.dark .as-form-err { color: #F0A49B; }
body.dark .as-form-ack { color: #E8C37C; }
body.dark .as-ff-msg { color: #F0A49B; }
body.dark .as-sw-t { background: rgba(255, 255, 255, .22); }
body.dark .as-day.on { background: var(--mh-green, #4E7C72); }
@media (prefers-reduced-motion: reduce) { .as-sw-t, .as-sw-k, .as-day { transition: none; } }
.as-form-wait { margin-top: 2px; }
.as-form-ref { margin-top: -2px; }
/* the wide panel has room for two fields side by side; a long field, a heading and a message keep the whole row */
.fb-panel.is-wide .as-ffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; align-items: start; }
.fb-panel.is-wide .as-ffs > .t-area, .fb-panel.is-wide .as-ffs > .t-days, .fb-panel.is-wide .as-ffs > .as-ff-head, .fb-panel.is-wide .as-ffs > .as-pick-list,
.fb-panel.is-wide .as-ffs > .as-ff-msg, .fb-panel.is-wide .as-ffs > .as-ff-note { grid-column: 1 / -1; }
.fb-panel.is-wide .as-ffs > .as-sw { align-self: center; }
/* ASSIST20 (notes 80-82): the question under an answer ("open it for you?" / "here, or the wizard?") and the form's way to the wizard */
.as-offer { margin-top: 2px; }
.as-form-wiz { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--mh-green-d, #3D655D); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.as-form-wiz:hover { text-decoration-color: currentColor; }
.as-form-wiz svg { width: 12px; height: 12px; }
body.dark .as-form-wiz { color: #9FC7BA; }
.as-form-more { align-self: flex-start; padding: 6px 12px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--mh-green, #4E7C72) 55%, transparent); background: transparent; font: inherit; font-size: 12px; font-weight: 800; color: var(--mh-green-d, #3D655D); cursor: pointer; }
.as-form-more:hover { background: color-mix(in srgb, var(--mh-green, #4E7C72) 10%, transparent); border-style: solid; }
.as-day.as-multi { min-width: 0; padding: 5px 11px; font-weight: 700; }
.fb-panel.is-wide .as-ffs > .t-multi { grid-column: 1 / -1; }
body.dark .as-form-more { color: #9FC7BA; }