/*
 * Mobile-native Rico chat.
 * Messaging-app patterns (iMessage / Signal / WhatsApp / Messenger):
 * fixed header + sticky composer, full-height scroll thread, bubble tails,
 * delivery ticks, typing indicator. Uses app design tokens; safe-area aware.
 */

:root {
  --mc-out-bg: var(--brand-magenta, #d00084);
  --mc-out-text: #ffffff;
  --mc-in-bg: var(--bg-secondary, #f0f2f5);
  --mc-in-text: var(--text-primary, #1a1d24);
  --mc-header-h: 56px;
  --mc-safe-top: env(safe-area-inset-top, 0px);
  --mc-safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --mc-in-bg: #1d2440;
  --mc-in-text: #eef0f7;
}

html, body.mobile-chat-body {
  height: 100%;
  margin: 0;
  overscroll-behavior-y: none;
}

body.mobile-chat-body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.mc-no-scroll { overflow: hidden; }

.mc-app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  /* Grid/flex items default to min-width:auto (=min-content), so a single
     un-shrinkable child (e.g. a long agent name in the header) can force the
     whole column wider than the phone, which mobile browsers then zoom out to
     fit — the page reads as "too wide". Let every row shrink to the device
     width and clip any stray horizontal overflow so that can't happen. */
  min-width: 0;
  overflow-x: clip;
}
.mc-app > * { min-width: 0; }

/* Tablet+ : the app column maxes at 720px, so on an iPad it floats in wide
   empty gutters. Give the gutters a little depth and frame the column as a
   distinct surface so the screen reads intentionally instead of half-empty.
   Kicks in only once the gutters are wide enough to notice. */
@media (min-width: 800px) {
  body.mobile-chat-body {
    background:
      radial-gradient(130% 90% at 50% -20%,
        color-mix(in srgb, var(--accent-primary, #d00084) 7%, transparent), transparent 62%),
      var(--bg-primary);
  }
  .mc-app {
    border-inline: 1px solid var(--border-color-light, var(--border-color));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .38);
  }
}
/* Shared room: header + (optional state banner) + ownership banner + (optional
   plan roster) + thread + composer. The number of auto-height banners above the
   thread varies (state banner only when restricted, plan roster only with a
   trip plan), so use a flex column instead of positional grid tracks — every
   banner takes its content height and only .mc-main grows. */
.mc-app:has(> .mc-share-owner) {
  display: flex;
  flex-direction: column;
}
.mc-app:has(> .mc-share-owner) > .mc-main {
  flex: 1 1 auto;
  min-height: 0;
}

/* Share join landing — plain scrollable main (not the absolute conversation pane). */
.mc-app--share-join { grid-template-rows: auto 1fr; }
.mc-main--share-join {
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 var(--mc-safe-bottom);
}
.mc-share-intro {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
}
.mc-share-intro__title { font-size: 1.25rem; margin: 0 0 .5rem; }
.mc-share-intro__body { margin: 0 0 1.25rem; color: var(--text-secondary); }
.mc-share-intro__form { display: flex; flex-direction: column; gap: .75rem; }
.mc-share-intro__label {
  display: flex; flex-direction: column; gap: .25rem; font-size: .875rem;
}
.mc-share-intro__joining {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border-color-light, var(--border-color));
  text-align: center;
}
.mc-share-intro__joining-label {
  margin: 0 0 .2rem;
  font-size: .8rem;
  color: var(--text-secondary);
}
.mc-share-intro__joining-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-word;
}
.mc-share-intro__footnote {
  font-size: .75rem; color: var(--text-secondary); margin: 1rem 0 0;
}

/* ---- "This is a shared group chat" cue + who's-here roster ------------------ */
.mc-share-intro__body { margin-bottom: 1rem; }
.mc-share-intro__shared {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: 0 0 1rem; padding: .75rem .85rem;
  border-radius: 14px; font-size: .85rem; line-height: 1.45;
  background: color-mix(in srgb, var(--command-blue, #3b82f6) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--command-blue, #3b82f6) 30%, transparent);
}
.mc-share-intro__shared-icon {
  flex: none; display: inline-flex; margin-top: 1px;
  color: var(--command-blue, #3b82f6);
}
.mc-share-roster { margin: 0 0 1.25rem; }
.mc-share-roster__label {
  margin: 0 0 .5rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary);
}
.mc-share-roster__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.mc-share-roster__chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem .3rem .3rem; border-radius: 999px;
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border-color-light, var(--border-color));
  font-size: .82rem; max-width: 100%;
}
.mc-share-roster__avatar {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #fff;
  background: var(--command-blue, #3b82f6);
}
.mc-share-roster__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-share-roster__chip--more {
  padding: .3rem .7rem; color: var(--text-secondary); background: transparent;
}
.mc-share-roster__empty {
  margin: 0 0 1.25rem; font-size: .82rem; color: var(--text-secondary);
}

/* ---- Header ---------------------------------------------------------------- */
.mc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(var(--mc-safe-top) + 8px) 12px 8px;
  min-height: var(--mc-header-h);
  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-color-light, var(--border-color));
  position: sticky;
  top: 0;
  z-index: 20;
}
.mc-header__menu,
.mc-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: 12px;
  cursor: pointer;
}
.mc-header__menu:active,
.mc-header__action:active { background: var(--bg-secondary); }
.mc-header__action img { opacity: .8; }
.mc-header__share-form { margin: 0; flex: none; }
#mobile-header-share-slot { display: contents; }
.mc-header__share { color: var(--accent-primary, var(--brand-magenta, #d00084)); }

.mc-hamburger { display: inline-flex; flex-direction: column; gap: 4px; }
.mc-hamburger span {
  width: 20px; height: 2px; border-radius: 2px;
  background: currentColor; display: block;
}

.mc-header__title {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  background: transparent; border: none; padding: 4px 4px; margin: 0;
  border-radius: 12px; cursor: pointer; color: inherit; text-align: left; font: inherit;
}
.mc-header__title:active { background: var(--bg-secondary); }
.mc-header__caret { color: var(--text-secondary); font-size: 12px; flex: none; margin-left: -2px; }
.mc-header__avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--db-rico-wash, var(--bg-secondary));
  box-shadow: inset 0 0 0 1px var(--border-color-light, var(--border-color));
  flex: none;
}
.mc-header__presence {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #2ecc71; box-shadow: 0 0 0 2px var(--bg-primary);
}
.mc-header__titletext { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; flex: 1 1 auto; }
.mc-header__titletext strong {
  font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-header__titletext small { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Shared-room header: single compact row (title + notify + ⋯ menu). */
.mc-header--share {
  flex-wrap: nowrap;
  gap: 6px;
  position: relative;
  z-index: 30;
}
.mc-share-owner {
  margin: 0;
  padding: 8px 14px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--brand-coral, #f9455c) 10%, var(--bg-secondary));
  border-bottom: 1px solid var(--border-color-light, var(--border-color));
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mc-share-owner strong { color: var(--text-primary); font-weight: 600; }
.mc-share-owner__text { flex: 1; min-width: 0; }
.mc-share-owner__dismiss {
  flex: none;
  width: 22px; height: 22px; margin: -2px -4px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  font-size: 13px; line-height: 1;
}
.mc-share-owner__dismiss:hover { background: rgba(127, 127, 140, .16); color: var(--text-primary); }

.mc-state-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--brand-amber, #f59e0b) 16%, var(--bg-secondary));
  border-bottom: 1px solid var(--border-color-light, var(--border-color));
  position: relative;
  z-index: 20;
}
.mc-state-banner--locked {
  background: color-mix(in srgb, var(--brand-coral, #f9455c) 16%, var(--bg-secondary));
}
.mc-state-banner__icon { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.mc-state-banner__body { min-width: 0; }
.mc-state-banner__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.mc-state-banner__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.mc-msg__text--typing::after {
  content: "";
  display: inline-block;
  width: .55ch;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: currentColor;
  opacity: .55;
  animation: mc-caret-blink .9s steps(1, end) infinite;
}
@keyframes mc-caret-blink {
  0%, 49% { opacity: .55; }
  50%, 100% { opacity: 0; }
}

.mc-web-push {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex: none;
}
.mc-web-push--compact { padding: 0; }
.mc-web-push__btn {
  appearance: none;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.16));
  background: color-mix(in srgb, var(--brand-coral, #f9455c) 14%, transparent);
  color: var(--text-primary);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.mc-web-push__btn.is-on {
  background: color-mix(in srgb, #3dd68c 18%, transparent);
  border-color: color-mix(in srgb, #3dd68c 45%, var(--border-color, rgba(255, 255, 255, 0.16)));
}
.mc-web-push__status {
  margin: 0;
  font-size: .7rem;
  color: var(--text-secondary);
  min-height: 1em;
}

/* Shared-room ⋯ header menu */
.mc-share-menu {
  position: relative;
  flex: none;
}
.mc-share-menu__trigger { color: var(--text-primary); }
.mc-share-menu.is-open .mc-share-menu__trigger {
  background: var(--bg-secondary);
}
.mc-share-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: min(280px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.mc-share-menu__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mc-share-menu__item small {
  font-size: .7rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.mc-share-menu__item:hover,
.mc-share-menu__item:focus-visible {
  background: var(--bg-secondary);
  outline: none;
}
.mc-share-menu__item:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.mc-share-menu__status {
  margin: 4px 8px 2px;
  min-height: 1.1em;
  font-size: .72rem;
  color: var(--text-secondary);
}
.mc-share-menu__select {
  margin-top: 4px;
  padding: 10px;
  border-top: 1px solid var(--border-color-light, var(--border-color));
}
.mc-share-menu__select-title {
  margin: 0 0 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.mc-share-menu__confirm .mc-share-menu__select-title {
  font-size: .9rem;
  color: var(--text-primary);
}
.mc-share-menu__confirm-note {
  margin: 0 0 10px;
  font-size: .75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Invite QR sheet (detail frame, opened from the room ⋯ menu) */
.mc-invite-sheet {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 16px; max-width: 24rem; margin: 0 auto;
}
.mc-invite-sheet__lead {
  margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-secondary); text-align: center;
}
.mc-invite-sheet__lead strong { color: var(--text-primary); }
.mc-invite-sheet__qr {
  display: flex; justify-content: center; align-items: center;
  padding: 12px; background: #fff; border-radius: 12px; align-self: center;
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-invite-sheet__qr svg { display: block; width: min(220px, 62vw); height: auto; max-width: 100%; }
.mc-invite-sheet__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-secondary);
}
.mc-invite-sheet__link { font-size: 13px !important; width: 100%; min-width: 0; }
.mc-invite-sheet__share { width: 100%; margin-bottom: 8px; }
.mc-invite-sheet__copy { width: 100%; }
/* When the native share button is present, the copy button reads as secondary. */
.mc-invite-sheet__share:not([hidden]) ~ .mc-invite-sheet__copy {
  background: transparent;
  color: var(--brand-coral, #f9455c);
  border: 1px solid var(--brand-coral, #f9455c);
}
.mc-share-menu__select-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
  margin-bottom: 10px;
}
.mc-share-menu__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .85rem;
  color: var(--text-primary);
  cursor: pointer;
}
.mc-share-menu__check small {
  color: var(--text-secondary);
  font-weight: 500;
}
.mc-share-menu__select-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.mc-share-menu__secondary,
.mc-share-menu__primary {
  appearance: none;
  border-radius: 8px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
}
.mc-share-menu__secondary {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
}
.mc-share-menu__primary {
  border: none;
  background: var(--brand-coral, #f9455c);
  color: #fff;
}
.mc-share-menu__primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* People detail sheet */
.mc-people__summary {
  margin: 0 0 12px;
  font-size: .85rem;
  color: var(--text-secondary);
}
.mc-people__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-people__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-secondary);
}
.mc-people__row.is-you {
  border-color: color-mix(in srgb, var(--brand-coral, #f9455c) 35%, var(--border-color));
}
.mc-people__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mc-people__name {
  font-size: .95rem;
  font-weight: 650;
  color: var(--text-primary);
}
.mc-people__you {
  margin-left: 4px;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: .8rem;
}
.mc-people__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: .72rem;
  color: var(--text-secondary);
}
.mc-people__role { font-weight: 600; }
.mc-people__chip {
  flex: none;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  white-space: nowrap;
}
.mc-people__chip--ok {
  border-color: color-mix(in srgb, #3dd68c 45%, var(--border-color));
  background: color-mix(in srgb, #3dd68c 14%, transparent);
  color: var(--text-primary);
}

/* Duplicate-engine carry-over sheet */
.mc-dup__lead {
  margin: 0 0 14px;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.mc-dup__lead strong { color: var(--text-primary); font-weight: 650; }
.mc-dup__presets {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}
.mc-dup__preset {
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
}
.mc-dup__preset:active { transform: scale(.98); }
.mc-dup__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-dup__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-secondary);
  cursor: pointer;
}
.mc-dup__check input {
  margin-top: 3px;
  flex: none;
  width: 18px;
  height: 18px;
}
.mc-dup__check span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  font-weight: 650;
  color: var(--text-primary);
}
.mc-dup__check small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.mc-dup__submit {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  background: var(--accent-primary, var(--brand-magenta, #d00084));
}
.mc-dup__submit:active { transform: scale(.99); }
.mc-dup__submit:disabled { opacity: .5; cursor: default; }

/* Confirm-settings step before duplicating */
.mc-dup__confirm {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-input, var(--bg-secondary));
}
.mc-dup__confirm-title { margin: 0 0 8px; font-size: .95rem; }
.mc-dup__confirm-summary { margin: 0 0 8px; font-size: .85rem; color: var(--text-secondary); }
.mc-dup__summary-list { margin: 6px 0 0; padding-left: 1.1rem; }
.mc-dup__summary-list li { margin: 2px 0; }
.mc-dup__confirm-note { margin: 0 0 12px; font-size: .75rem; color: var(--text-secondary); line-height: 1.4; }
.mc-dup__confirm-actions { display: flex; gap: 8px; }
.mc-dup__confirm-actions .mc-dup__submit { width: auto; flex: 1 1 auto; }
.mc-dup__cancel {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 12px 16px; border-radius: 12px; cursor: pointer;
  color: var(--text-secondary); background: transparent;
  border: 1px solid var(--border-color-light, var(--border-color));
}

/* Soft email capture for name-only share guests */
.mc-email-capture {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--mc-composer-height, 72px) + var(--mc-safe-bottom, 0px) + 10px);
  z-index: 40;
  pointer-events: none;
}
.mc-email-capture__panel {
  pointer-events: auto;
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  padding: 14px 16px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
  background: color-mix(in srgb, var(--bg-elevated, #1c1c1e) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  animation: mc-email-capture-in .28s ease-out;
}
@keyframes mc-email-capture-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.mc-email-capture__dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.mc-email-capture__title {
  margin: 0 22px 4px 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
}
.mc-email-capture__body {
  margin: 0 0 10px;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--text-secondary);
}
.mc-email-capture__form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.mc-email-capture__input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.16));
  background: var(--bg-primary, #111);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: .85rem;
}
.mc-email-capture__submit {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: var(--brand-coral, #f9455c);
}
.mc-email-capture__submit:disabled {
  opacity: .6;
  cursor: default;
}
.mc-email-capture__status {
  margin: 8px 0 0;
  min-height: 1em;
  font-size: .72rem;
  color: var(--text-secondary);
}

/* ---- Header right toggle (cards <-> conversation) -------------------------- */
.mc-header__toggle svg { display: block; }
/* Each surface shows the icon for the *other* surface (where the tap goes). */
.mc-app.is-landing .mc-toggle__cards { display: none; }
.mc-app.is-conversation .mc-toggle__chat { display: none; }
/* Nothing to flip to until a conversation exists. */
.mc-app.is-landing:not(.has-thread) .mc-header__toggle { display: none; }

/* ---- Middle row: landing + conversation share the 1fr row ------------------ */
.mc-main { position: relative; min-height: 0; }
.mc-landing,
.mc-conversation {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mc-app.is-landing .mc-conversation { display: none; }
.mc-app.is-conversation .mc-landing { display: none; }

/* ---- Landing (cards + agent/engine), default surface ----------------------- */
.mc-landing {
  padding: 12px 12px calc(var(--mc-safe-bottom) + 16px);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--db-main-wash, transparent) 0%, transparent 60%),
    var(--bg-primary);
}
.mc-segment {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-secondary); border-radius: 13px;
  margin: 2px 0 14px;
}
.mc-segment__tab {
  flex: 1; padding: 9px 10px; border: none; border-radius: 10px;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mc-segment__tab.is-active {
  background: var(--bg-primary); color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
/* Only the selected landing tab's panel is visible. */
.mc-landing__panel { display: none; }
.mc-landing.is-suggestions .mc-landing__panel--suggestions { display: block; }
.mc-landing.is-agent .mc-landing__panel--agent { display: block; }
.mc-landing__panel--suggestions .mc-suggestions { margin-top: 4px; }

/* ---- Blank slate (calm, context-free start) -------------------------------- */
/* Hidden by default; shown when the app is in blank mode, where it replaces the
   tabs + rich panels so the composer is the only thing asking for attention. */
.mc-blank { display: none; }
.mc-app.is-blank .mc-blank { display: flex; flex-direction: column; gap: 10px; }
.mc-app.is-blank .mc-segment,
.mc-app.is-blank .mc-landing__panel { display: none; }
/* Fill the landing and sit the greeting on the upper-third line (rule of
   thirds) rather than floating it in the middle of an arbitrary band — the
   clamped top padding keeps it there from short phones to tall tablets. */
.mc-blank {
  min-height: 100%; align-items: flex-start; justify-content: flex-start;
  padding: clamp(56px, 22vh, 200px) 4px 8px;
  animation: mc-fade-in .3s ease;
}
.mc-blank__greeting {
  margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25;
  color: var(--text-primary);
}
.mc-blank__hint { margin: 0; font-size: 14px; color: var(--text-secondary); max-width: 34ch; }
.mc-blank__resume {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 2px;
  padding: 10px 15px; border-radius: 999px; text-decoration: none;
  font-size: 14px; color: var(--text-primary);
  background: var(--db-rico-wash, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--accent-primary, #d00084) 35%, transparent);
}
.mc-blank__resume strong { font-weight: 700; }
.mc-blank__resume:active { transform: scale(.98); }
.mc-blank__resume img { opacity: .85; }
.mc-blank__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mc-blank__action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-blank__action:active { transform: scale(.98); }
.mc-blank__action img { opacity: .85; }

/* ---- Context bar (active agent/engine + Start fresh) ----------------------- */
.mc-ctxbar {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 12px;
  padding: 8px 6px 8px 12px; border-radius: 12px;
  background: var(--db-rico-wash, var(--bg-secondary));
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-ctxbar__label { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.mc-ctxbar__eyebrow {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-secondary);
}
.mc-ctxbar__names {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-ctxbar__fresh {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; text-decoration: none;
  font-size: 13px; font-weight: 650;
  color: var(--accent-primary, var(--brand-magenta, #d00084));
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary, #d00084) 35%, transparent);
}
.mc-ctxbar__fresh:active { transform: scale(.98); }

/* ---- Conversation ---------------------------------------------------------- */
.mc-conversation {
  padding: 14px 12px 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--db-main-wash, transparent) 0%, transparent 60%),
    var(--bg-primary);
}
/* Generous bottom padding so scroll-to-bottom parks the newest message near the
   top of the viewport (room to breathe above the composer), iMessage-style. */
.mc-thread { list-style: none; margin: 0; padding: 0 0 45vh; display: flex; flex-direction: column; gap: 4px; }

/* "Show previous messages" pill at the top of the thread. */
.mc-history-more { display: flex; justify-content: center; padding: 2px 0 12px; }
.mc-history-more__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border-color-light, var(--border-color));
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.mc-history-more__btn:active { background: var(--bg-input, var(--bg-secondary)); }
.mc-history-more__caret { font-size: 14px; line-height: 1; }

/* ---- Message bubbles ------------------------------------------------------- */
.mc-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; margin-top: 6px; }
.mc-msg--out { flex-direction: row-reverse; }
.mc-msg__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--db-rico-wash, var(--bg-secondary));
  box-shadow: inset 0 0 0 1px var(--border-color-light, var(--border-color));
}
.mc-msg__bubble {
  position: relative;
  max-width: 78%;
  padding: 9px 13px 6px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.mc-msg--in .mc-msg__bubble {
  background: var(--mc-in-bg);
  color: var(--mc-in-text);
  border-bottom-left-radius: 6px;
}
.mc-msg--out .mc-msg__bubble {
  background: var(--mc-out-bg);
  color: var(--mc-out-text);
  border-bottom-right-radius: 6px;
}
.mc-msg__sender { font-size: .7rem; font-weight: 600; margin-bottom: .2rem; }

/* ---- Shared-room participant colors ----------------------------------------
   Everyone in a room sees the same broadcast HTML, so a person's color comes
   from their join order (data-peer-slot, assigned by SharePaletteHelper) rather
   than from who is viewing. Brand hues washed over the neutral inbound bubble:
   enough to tell people apart at a glance without turning the thread into a
   rainbow or touching text contrast. The viewer's own messages stay on the
   magenta "out" side, so "mine" still reads instantly. Rico has no participant
   id, so assistant bubbles keep the plain neutral background.
   Browsers without color-mix() fall through to the .mc-msg--in rule above. */
.mc-msg[data-peer-slot="0"] { --mc-peer: var(--command-blue, #327AD1); }
.mc-msg[data-peer-slot="1"] { --mc-peer: var(--signal-green, #1FB4DD); }
.mc-msg[data-peer-slot="2"] { --mc-peer: var(--fabric-violet, #AA0392); }
.mc-msg[data-peer-slot="3"] { --mc-peer: var(--signal-amber, #FDB716); }
.mc-msg[data-peer-slot="4"] { --mc-peer: var(--command-blue-soft, #3F61BE); }
.mc-msg[data-peer-slot="5"] { --mc-peer: var(--brand-coral, #F9455C); }

.mc-msg--in[data-peer-slot] .mc-msg__bubble {
  background: color-mix(in srgb, var(--mc-peer) 13%, var(--mc-in-bg));
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--mc-peer) 60%, transparent);
}
.mc-msg--in[data-peer-slot] .mc-msg__sender {
  color: color-mix(in srgb, var(--mc-peer) 78%, var(--mc-in-text));
}
[data-theme="dark"] .mc-msg--in[data-peer-slot] .mc-msg__bubble {
  background: color-mix(in srgb, var(--mc-peer) 24%, var(--mc-in-bg));
}
[data-theme="dark"] .mc-msg--in[data-peer-slot] .mc-msg__sender {
  color: color-mix(in srgb, var(--mc-peer) 42%, #ffffff);
}

.mc-msg__text p { margin: 0 0 6px; }
.mc-msg__text p:last-child { margin-bottom: 0; }
.mc-mention {
  font-weight: 700; color: #4f46e5;
  background: rgba(99,102,241,.14); border-radius: 5px; padding: 0 3px;
}
.mc-header__action--text { width: auto; padding: 0 10px; font-size: 12px; font-weight: 600; }
.mc-header__action--text form { margin: 0; }

/* --- Notification bell + badge --- */
.mc-header__bell { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.mc-notif-badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--mc-header-bg, #050e3a);
}
.mc-notif-badge.is-empty { display: none; }
.mc-drawer__count {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* --- Notification inbox --- */
.mc-notif-list { list-style: none; margin: 0; padding: 8px 0; display: grid; gap: 2px; }
.mc-notif { position: relative; }
.mc-notif__form { margin: 0; }
.mc-notif__hit {
  width: 100%; display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; background: transparent; border: 0; cursor: pointer;
  text-align: left; color: inherit; border-radius: 12px;
}
.mc-notif.is-unread .mc-notif__hit { background: rgba(99,102,241,.08); }
.mc-notif__hit:hover { background: rgba(120,120,140,.1); }
.mc-notif__icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(99,102,241,.15); font-size: 15px;
}
.mc-notif__body { flex: 1; display: grid; gap: 3px; min-width: 0; }
.mc-notif__title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.mc-notif__text { font-size: 12px; opacity: .8; line-height: 1.35; }
.mc-notif__meta { display: flex; gap: 8px; font-size: 11px; opacity: .6; }
.mc-notif__kind { font-weight: 600; text-transform: capitalize; }
.mc-notif__dot {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px;
  border-radius: 999px; background: #6366f1;
}
.mc-notif__open {
  position: absolute; right: 14px; bottom: 10px; font-size: 11px;
  font-weight: 600; text-decoration: none; color: #6366f1;
}
.mc-empty { padding: 40px 24px; text-align: center; display: grid; gap: 6px; }
.mc-empty__title { margin: 0; font-weight: 700; font-size: 15px; }
.mc-empty__body { margin: 0; font-size: 13px; opacity: .7; }
[data-theme="dark"] .mc-notif__icon { background: rgba(129,140,248,.2); }
[data-theme="dark"] .mc-notif.is-unread .mc-notif__hit { background: rgba(129,140,248,.1); }

/* Chat-sound mute lives in the drawer (replaces the old header speaker button
   so the header stays uncrowded). Icon + "On/Off" state label swap together
   when .mc-app gains .is-muted. */
.mc-drawer__item--sound {
  width: 100%; border: 0; background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.mc-drawer__item--sound .mc-sound__off { display: none; }
.mc-app.is-muted .mc-drawer__item--sound .mc-sound__on { display: none; }
.mc-app.is-muted .mc-drawer__item--sound .mc-sound__off { display: inline; }
.mc-drawer__sound-state { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.mc-msg--out .mc-mention { color: #fff; background: rgba(255,255,255,.24); }
[data-theme="dark"] .mc-mention { color: #c7d2fe; background: rgba(129,140,248,.2); }

/* Markdown inside assistant bubbles (rendered via rico_markdown). */
.mc-msg__text ul, .mc-msg__text ol { margin: 0 0 6px; padding-left: 18px; }
.mc-msg__text li { margin: 2px 0; }
.mc-msg__text li > p { margin: 0; }
.mc-msg__text h1, .mc-msg__text h2, .mc-msg__text h3, .mc-msg__text h4 {
  font-size: 1em; font-weight: 700; margin: 8px 0 4px;
}
.mc-msg__text h1:first-child, .mc-msg__text h2:first-child,
.mc-msg__text h3:first-child, .mc-msg__text h4:first-child { margin-top: 0; }
.mc-msg__text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: rgba(127,127,127,.16);
  padding: 1px 4px; border-radius: 4px;
}
.mc-msg__text pre {
  background: rgba(127,127,127,.14); border-radius: 8px;
  padding: 8px 10px; margin: 6px 0; overflow-x: auto;
}
.mc-msg__text pre code { background: none; padding: 0; font-size: .85em; }
.mc-msg__text blockquote {
  margin: 6px 0; padding: 2px 0 2px 10px;
  border-left: 3px solid rgba(127,127,127,.35); opacity: .9;
}
.mc-msg__text a { color: var(--accent-primary, #d00084); text-decoration: underline; }
.mc-msg__text hr { border: 0; border-top: 1px solid rgba(127,127,127,.3); margin: 8px 0; }
.mc-msg__text table {
  border-collapse: collapse; margin: 6px 0; font-size: .9em;
  display: block; overflow-x: auto; width: 100%; max-width: 100%;
}
.mc-msg__text th, .mc-msg__text td {
  border: 1px solid rgba(127,127,127,.3); padding: 3px 8px; text-align: left;
  white-space: normal; overflow-wrap: anywhere; word-break: normal; min-width: 4.5rem;
}

/* Formatted configuration card (rendered by rico_message_body in place of raw JSON).
   Chat bubbles are narrow — always stack label over value so nested workflow
   steps stay readable instead of crushing into mid-word wraps. */
.rico-config {
  margin: 8px 0;
  border: 1px solid rgba(127,127,127,.28);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(127,127,127,.08);
  font-size: .9em;
  max-width: 100%;
}
.rico-config__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 0;
  padding: 8px 11px;
  align-items: start;
}
.rico-config__row + .rico-config__row { border-top: 1px solid rgba(127,127,127,.18); }
.rico-config__row--block { gap: 6px; }
.rico-config__key {
  font-weight: 600;
  opacity: .72;
  text-transform: none;
  font-size: .82em;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.rico-config__value {
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
}
.rico-config__list { margin: 0; padding-left: 16px; }
.rico-config__list li { margin: 1px 0; }
.rico-config__empty { opacity: .5; }
.rico-config .rico-config {
  margin: 0;
  border-radius: 8px;
  background: rgba(127,127,127,.06);
}
.rico-config__scalar { padding: 2px 0; }

/* ---- Inline follow-up chips (streamed under an assistant reply) ------------ */
.mc-followups {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 4px; padding-left: 30px; /* aligns with bubble past the avatar */
}
.mc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 16px;
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  color: inherit; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, border-color .12s ease;
}
.mc-chip:active { transform: scale(.96); }
/* Chips/cards that perform their action on tap are wrapped in a form; the
   wrapper must not become the flex/grid child or it breaks the row layout. */
.mc-chip-form, .mc-card-form { display: contents; }
.mc-chip img { flex-shrink: 0; }
.mc-chip__chevron { opacity: .6; margin-left: -2px; }
.mc-chip--a {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-input, var(--bg-secondary)), var(--bg-input, var(--bg-secondary))) padding-box,
    linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c)) border-box;
}

/* The "super magic" commit button — the flow has every required field. First
   tap expands a name editor; Save creates the object. Deliberately louder than
   a chip: full-width, gradient fill, gentle shimmer. */
.mc-magic { list-style: none; margin: 6px 0 4px; padding-left: 30px; }
.mc-magic form { margin: 0; }
.mc-magic__btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: none; border-radius: 16px;
  color: #fff; font: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
  background-size: 180% 180%;
  box-shadow: 0 6px 18px -6px var(--brand-magenta, #d00084);
  transition: transform .12s ease, box-shadow .12s ease;
  animation: mc-magic-shimmer 4s ease infinite;
}
.mc-magic__btn:active { transform: scale(.98); box-shadow: 0 3px 10px -6px var(--brand-magenta, #d00084); }
/* `display: flex` above outranks the UA `[hidden]` rule, so the name editor
   couldn't swap the trigger out without this. */
.mc-magic__btn[hidden] { display: none; }
.mc-magic__spark { font-size: 20px; line-height: 1; flex-shrink: 0; }
.mc-magic__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mc-magic__label { font-weight: 700; font-size: 14px; }
.mc-magic__summary {
  font-size: 12px; opacity: .9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-magic__go { flex-shrink: 0; font-weight: 700; font-size: 13px; opacity: .95; }
@keyframes mc-magic-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Inline name editor revealed by the magic button before commit. */
.mc-magic__editor {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
}
.mc-magic__editor[hidden] { display: none; }
.mc-magic__editor-label {
  margin: 0; font-size: 12px; font-weight: 600; opacity: .8;
}
.mc-magic__editor-input {
  width: 100%; font: inherit; font-size: 15px; font-weight: 600;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  border-radius: 10px; padding: 10px 12px;
  background: var(--bg-primary, #fff); color: inherit;
}
.mc-magic__editor-input:focus {
  outline: 2px solid color-mix(in srgb, var(--brand-magenta, #d00084) 45%, transparent);
  outline-offset: 1px;
}
.mc-magic__editor-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.mc-magic__editor-cancel,
.mc-magic__editor-save {
  font: inherit; font-size: 13px; font-weight: 600;
  border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
.mc-magic__editor-cancel {
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  background: transparent; color: inherit;
}
.mc-magic__editor-save {
  border: none; color: #fff;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}
.mc-magic__editor-save:active { transform: scale(.98); }

/* Post–Google-connect CTA on the landing surface */
.mc-thread--cta { list-style: none; margin: 0 0 12px; padding: 0; }
.mc-google-cta { list-style: none; margin: 0; padding: 0; }
.mc-google-cta__card {
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  border-radius: 16px; padding: 14px;
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
  display: flex; flex-direction: column; gap: 10px;
}
.mc-google-cta__head { display: flex; align-items: flex-start; gap: 10px; }
.mc-google-cta__title { margin: 0; font-weight: 700; font-size: 15px; }
.mc-google-cta__sub { margin: 2px 0 0; font-size: 12px; opacity: .75; }
.mc-google-cta__status { margin: 0; font-size: 12px; color: #15803d; font-weight: 600; }
.mc-google-cta .mc-magic { padding-left: 0; margin: 0; }
.mc-google-cta__form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.mc-google-cta__form-label { margin: 0; font-size: 12px; font-weight: 600; opacity: .8; }
.mc-google-cta__row { display: flex; align-items: center; gap: 6px; }
.mc-google-cta__select,
.mc-google-cta__input,
.mc-google-cta__prompt {
  font: inherit; font-size: 13px;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  border-radius: 10px; padding: 8px 10px;
  background: var(--bg-primary, #fff); color: inherit;
}
.mc-google-cta__input { width: 3.25rem; text-align: center; }
.mc-google-cta__colon { opacity: .6; }
.mc-google-cta__prompt { width: 100%; }
.mc-google-cta__submit {
  align-self: flex-start; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  border-radius: 10px; padding: 8px 12px; cursor: pointer;
  background: var(--bg-primary, #fff); color: inherit;
}
.mc-google-cta__chip {
  align-self: flex-start; font: inherit; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  background: transparent; color: inherit;
}

/* Chat-native Agent Card — the identity + primary "chat with it" action Rico
   drops into the thread after creating an agent. Sits where a bubble would, so
   it shares the avatar gutter. */
.mc-agentcard {
  flex: 1; min-width: 0; max-width: 460px;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  border-radius: 16px; padding: 12px 14px;
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
  display: flex; flex-direction: column; gap: 8px;
}
.mc-agentcard__hit {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.mc-agentcard__head { display: flex; align-items: center; gap: 8px; }
.mc-agentcard__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}
.mc-agentcard__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mc-agentcard__name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.mc-agentcard__role { font-size: 11px; opacity: .7; text-transform: capitalize; }
.mc-agentcard__status {
  flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
}
.mc-agentcard__status.is-active { background: rgba(59,130,246,.18); color: #1d4ed8; }
.mc-agentcard__status.is-ready { background: rgba(34,197,94,.18); color: #15803d; }
.mc-agentcard__status.is-draft { background: rgba(245,158,11,.18); color: #b45309; }
[data-theme="dark"] .mc-agentcard__status.is-active { color: #93c5fd; }
[data-theme="dark"] .mc-agentcard__status.is-ready { color: #86efac; }
[data-theme="dark"] .mc-agentcard__status.is-draft { color: #fcd34d; }
.mc-agentcard__goals { font-size: 13px; line-height: 1.4; margin: 0; opacity: .9; }
.mc-agentcard__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-agentcard__chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-secondary, rgba(127,127,127,.12));
  border: 1px solid var(--border-color, rgba(127,127,127,.25));
}
/* Card actions. The card sits in the avatar gutter, so the row has ~240px to
   work with on a small phone — labels stay on one line and the controls shrink
   rather than wrap. If the row still can't fit (large text settings), the
   secondary control drops to its own line instead of squeezing the primary. */
.mc-agentcard__actions {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px; margin-top: 2px;
}
/* button_to wraps each control in a form; the button itself has to be the flex
   child or the row can't size it (same trick as .mc-chip-form). */
.mc-agentcard__action-form { display: contents; }
.mc-agentcard__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1 1 auto; min-width: 0; min-height: 44px; /* comfortable tap target */
  padding: 10px 14px; border: none; border-radius: 12px;
  color: #fff; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
  box-shadow: 0 5px 14px -6px var(--brand-magenta, #d00084);
  transition: transform .12s ease;
}
.mc-agentcard__cta:active { transform: scale(.98); }
.mc-agentcard__cta-icon { font-size: 14px; }
.mc-agentcard__link {
  display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px;
  padding: 0 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
  color: var(--text-secondary, #667); opacity: .8;
}
.mc-agentcard__link:hover { text-decoration: underline; }
.mc-agentcard__ghost--static {
  cursor: default; opacity: .85; pointer-events: none;
}
.mc-agentcard__ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  flex: 0 1 auto; min-width: 0; min-height: 44px;
  padding: 10px 12px; border-radius: 12px; font: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--bg-secondary, rgba(127,127,127,.12));
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  color: inherit;
}
.mc-agentcard__ghost:active { transform: scale(.98); }

/* First-class Decision card — before / during / after controls in Rico chat. */
.mc-decision {
  flex: 1; min-width: 0; max-width: 460px;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  border-radius: 16px; padding: 12px 14px;
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
  display: flex; flex-direction: column; gap: 10px;
}
.mc-decision__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mc-decision__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; opacity: .7;
}
.mc-decision__status {
  flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(245,158,11,.18); color: #b45309;
}
.mc-decision__status.is-deliberating { background: rgba(59,130,246,.18); color: #1d4ed8; }
.mc-decision__status.is-decided { background: rgba(34,197,94,.18); color: #15803d; }
.mc-decision__status.is-archived { background: rgba(127,127,127,.18); color: #4b5563; }
[data-theme="dark"] .mc-decision__status { color: #fcd34d; }
[data-theme="dark"] .mc-decision__status.is-deliberating { color: #93c5fd; }
[data-theme="dark"] .mc-decision__status.is-decided { color: #86efac; }
.mc-decision__title { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.25; }
.mc-decision__question { margin: 0; font-size: 13px; line-height: 1.4; opacity: .9; }
.mc-decision__section { display: grid; gap: 6px; }
.mc-decision__section-label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; opacity: .65;
}
.mc-decision__criteria {
  margin: 0; padding-left: 1.1rem; font-size: 13px; line-height: 1.4;
}
.mc-decision__options { display: flex; flex-direction: column; gap: 8px; }
.mc-decision__options form { margin: 0; }
.mc-decision__record--secondary {
  background: linear-gradient(135deg, #4b5563, #6b7280);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.35);
  animation: none;
}
.mc-decision__outcome {
  display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px;
  background: rgba(34,197,94,.12);
}
.mc-decision__outcome-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #15803d;
}
.mc-decision__outcome strong { font-size: 15px; }
.mc-decision__rationale { margin: 0; font-size: 12px; opacity: .85; line-height: 1.4; }
.mc-decision__empty { margin: 0; font-size: 13px; opacity: .75; }

/* --- Selectable options ("who selected what" + finalize) --- */
.mc-decision__hint {
  display: inline; margin-left: 6px; font-size: 10px; font-weight: 600;
  letter-spacing: 0; text-transform: none; opacity: .7;
}
.mc-decision__select-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-decision__select-row { display: grid; gap: 4px; }
.mc-decision__select-form { margin: 0; }
.mc-decision__select-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(120,120,140,.28);
  background: rgba(120,120,140,.06); color: inherit;
  font-size: 14px; text-align: left; transition: border-color .15s, background .15s;
}
.mc-decision__select-btn:hover { border-color: rgba(99,102,241,.55); }
.mc-decision__select-row.is-selected .mc-decision__select-btn {
  border-color: rgba(99,102,241,.7); background: rgba(99,102,241,.12);
}
.mc-decision__select-mark { font-size: 15px; opacity: .55; }
.mc-decision__select-row.is-selected .mc-decision__select-mark { opacity: 1; color: #6366f1; }
.mc-decision__select-label { flex: 1; font-weight: 600; }
.mc-decision__select-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; background: #6366f1;
}
.mc-decision__selectors { margin: 0 0 0 34px; font-size: 11px; opacity: .7; line-height: 1.35; }
.mc-decision__selectors-inline { font-size: 11px; font-weight: 500; opacity: .7; }
.mc-decision__finalize { margin-top: 4px; }
.mc-decision__finalized { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.mc-decision__finalized li { font-size: 14px; }
[data-theme="dark"] .mc-decision__select-btn { border-color: rgba(160,160,180,.25); background: rgba(160,160,180,.08); }
[data-theme="dark"] .mc-decision__select-row.is-selected .mc-decision__select-btn { background: rgba(129,140,248,.16); border-color: rgba(129,140,248,.6); }
[data-theme="dark"] .mc-decision__select-row.is-selected .mc-decision__select-mark { color: #a5b4fc; }

/* --- Single-pick / multi-pick mode switch --- */
.mc-modeswitch {
  display: inline-flex; gap: 0; padding: 2px; border-radius: 999px;
  background: rgba(120,120,140,.1); border: 1px solid rgba(120,120,140,.2);
}
.mc-modeswitch__form { margin: 0; }
.mc-modeswitch__btn {
  padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: inherit; opacity: .7;
  font-size: 12px; font-weight: 600; transition: background .15s, opacity .15s;
}
.mc-modeswitch__btn.is-active {
  background: #6366f1; color: #fff; opacity: 1;
  box-shadow: 0 2px 8px -4px rgba(99,102,241,.8);
}
[data-theme="dark"] .mc-modeswitch { background: rgba(160,160,180,.12); border-color: rgba(160,160,180,.22); }
[data-theme="dark"] .mc-modeswitch__btn.is-active { background: #818cf8; }

/* --- "Who's weighed in" participation tally --- */
.mc-tally__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mc-tally__row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; opacity: .7;
}
.mc-tally__row.is-in { opacity: 1; }
.mc-tally__mark {
  flex: none; width: 16px; text-align: center; font-weight: 700; color: #9aa;
}
.mc-tally__row.is-in .mc-tally__mark { color: #22c55e; }
.mc-tally__name { font-weight: 600; }
.mc-tally__picks { font-size: 11px; opacity: .7; }
.mc-tally__waiting { font-size: 11px; font-style: italic; opacity: .6; }
[data-theme="dark"] .mc-tally__row.is-in .mc-tally__mark { color: #4ade80; }
.mc-decision__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.mc-decision__actions--stack { flex-direction: column; align-items: stretch; }
.mc-decision__actions--stack form { margin: 0; width: 100%; }
.mc-decision__link {
  font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--text-secondary, #667); opacity: .85;
}
.mc-decision__link:hover { text-decoration: underline; }
.mc-decision__btn {
  font: inherit; font-size: 12px; font-weight: 600; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--border-color, rgba(127,127,127,.3));
  background: transparent; color: inherit; cursor: pointer;
}
.mc-decision__btn--muted { opacity: .75; }
.mc-decision-form {
  display: flex; gap: 8px; margin-top: 6px;
}
.mc-decision-form__input {
  flex: 1; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  background: var(--bg-primary, #fff); color: inherit;
}
.mc-decision-form__submit {
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--border-color, rgba(127,127,127,.3));
  background: var(--bg-primary, #fff); color: inherit; cursor: pointer;
}

/* Freeform idea toggle + input */
.mc-freeform { display: grid; gap: 8px; margin-top: 8px; }
.mc-freeform__form { display: grid; gap: 4px; margin-top: 0; }
.mc-freeform__row { display: flex; gap: 8px; }
.mc-freeform__row .mc-decision-form__input { flex: 1; }
.mc-freeform__count {
  justify-self: end; font-size: 11px; opacity: .6; font-variant-numeric: tabular-nums;
}
.mc-freeform__form.is-full .mc-freeform__count { color: #dc2626; opacity: 1; }
[data-theme="dark"] .mc-freeform__form.is-full .mc-freeform__count { color: #f87171; }

/* Post-run action row under an agent's recommendation. */
.mc-wfr-actions {
  list-style: none;
  margin: 4px 0 8px;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-wfr-actions__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-secondary); opacity: .9;
}
.mc-wfr-actions__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--bg-secondary, rgba(127,127,127,.12));
}
.mc-wfr-actions__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-wfr-actions__row { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-wfr-actions__row form { margin: 0; }
.mc-wfr-actions__row a.mc-runactions__btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}

.mc-runactions { list-style: none; margin: 4px 0; padding-left: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.mc-runactions form { margin: 0; }
.mc-runactions__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 16px; font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; color: inherit;
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
}
.mc-runactions__btn--retry { border-color: var(--accent-primary, var(--brand-magenta, #d00084)); }
.mc-runactions__btn--muted { opacity: .72; font-weight: 500; }
.mc-runactions__btn:active { transform: scale(.97); }

/* Decide-loop proposal card. */
.mc-proposal {
  flex: 1; min-width: 0; max-width: 460px;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  border-radius: 16px; padding: 12px 14px;
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
  display: flex; flex-direction: column; gap: 6px;
}
.mc-proposal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-proposal__kicker { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.mc-proposal__status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.mc-proposal__status--pending, .mc-proposal__status--needs_attention { background: rgba(59,130,246,.16); color: #1d4ed8; }
.mc-proposal__status--accepted { background: rgba(34,197,94,.18); color: #15803d; }
.mc-proposal__status--snoozed { background: rgba(245,158,11,.18); color: #b45309; }
.mc-proposal__status--ignored, .mc-proposal__status--fyi { background: rgba(127,127,127,.18); color: #4b5563; }
.mc-proposal__title { font-weight: 700; font-size: 14px; line-height: 1.3; margin: 0; }
.mc-proposal__desc { font-size: 13px; line-height: 1.4; margin: 0; opacity: .9; }
.mc-proposal__actions { display: flex; gap: 8px; margin-top: 4px; }
.mc-proposal__actions form { margin: 0; flex: 1; }
.mc-proposal__btn {
  width: 100%; padding: 9px 10px; border-radius: 11px; font: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; color: inherit;
  background: var(--bg-secondary, rgba(127,127,127,.12));
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
}
.mc-proposal__btn:active { transform: scale(.97); }
.mc-proposal__btn--accept {
  color: #fff; border: none;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}
.mc-proposal__btn--muted { opacity: .75; }
.mc-proposal__resolved { font-size: 13px; font-weight: 600; margin: 2px 0; opacity: .9; }
.mc-proposal__links {
  display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px;
}
.mc-proposal__link { font-size: 12px; font-weight: 600; text-decoration: none; color: var(--text-secondary, #667); opacity: .8; }
.mc-proposal__link:hover { text-decoration: underline; }
/* "View proposal" is a button that opens the detail sheet — strip the native
   button chrome so it reads as the sibling link. */
button.mc-proposal__link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }

/* Proposals list / detail inside mobile Rico chrome */
.mc-app--proposals { grid-template-rows: auto 1fr; }
.mc-proposals {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem 1.1rem calc(1.25rem + var(--mc-safe-bottom));
}
.mc-proposals__search {
  margin: 0 0 1rem;
}
.mc-proposals__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mc-proposals__search-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.mc-proposals__search-input {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-input, var(--bg-secondary));
  color: var(--text-primary);
  padding: .7rem .85rem;
  font-size: 16px;
  font-family: var(--font-primary, inherit);
}
.mc-proposals__search-input::placeholder {
  color: var(--text-secondary);
  opacity: .85;
}
.mc-proposals__search-clear {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: .35rem .2rem;
}
.mc-proposals__section { margin-bottom: 1.5rem; }
.mc-proposals__heading {
  margin: 0 0 .65rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mc-proposals__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mc-proposals__card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-input, var(--bg-secondary));
  color: var(--text-primary);
  text-decoration: none;
}
.mc-proposals__card:active { background: var(--bg-secondary); }
.mc-proposals__card--muted { opacity: .85; }
.mc-proposals__card-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.mc-proposals__card-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.mc-proposals__card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.mc-proposals__card-meta {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-secondary); opacity: .8; margin-top: 2px;
}
.mc-proposals__empty {
  margin: 0; padding: 1.25rem 0.25rem;
  font-size: 14px; color: var(--text-secondary);
}
.mc-proposals__footnote { margin: 1.5rem 0 0; font-size: 13px; }
.mc-proposals__footnote-link { color: var(--text-secondary); font-weight: 600; }

/* Marks a link that leaves the mobile chrome for the full desktop app — an
   understated ↗ + dimmed colour so it reads as secondary to in-chrome links. */
.mc-link-desktop { color: var(--text-secondary); opacity: .82; }
.mc-link-desktop::after { content: " ↗"; font-size: .85em; opacity: .7; }

.mc-proposal-detail {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.1rem 1.15rem calc(1.5rem + var(--mc-safe-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.mc-proposal-detail__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mc-proposal-detail__title {
  margin: 0; font-size: 1.35rem; font-weight: 700;
  line-height: 1.25; letter-spacing: -0.02em; word-break: break-word;
}
.mc-proposal-detail__body {
  font-size: 15px; line-height: 1.5; color: var(--text-secondary);
}
.mc-proposal-detail__body p { margin: 0 0 .75rem; }
.mc-proposal-detail__body p:last-child { margin-bottom: 0; }
.mc-proposal-detail__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  margin: 0; padding: 12px 0 0;
  border-top: 1px solid var(--border-color-light, var(--border-color));
}
.mc-proposal-detail__meta dt {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted, var(--text-secondary));
}
.mc-proposal-detail__meta dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.mc-proposal-detail__actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.mc-proposal-detail__actions form { margin: 0; }
.mc-proposal-detail__actions .mc-proposal__btn { width: 100%; }
.mc-proposal-detail__hint {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
.mc-proposal-detail__footer {
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color-light, var(--border-color));
}

.mc-workflow-steps { margin-top: 4px; }
.mc-workflow-steps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.mc-workflow-steps__item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-input, var(--bg-secondary));
}
.mc-workflow-steps__n {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 1px var(--border-color-light, var(--border-color));
}
.mc-workflow-steps__body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mc-workflow-steps__body strong {
  font-size: 14px; font-weight: 700; word-break: break-word;
}
.mc-workflow-steps__body small {
  font-size: 12px; color: var(--text-secondary); text-transform: capitalize;
}
.mc-workflow-runs { margin-top: 4px; }

/* ---- Live workflow run (mobile) ------------------------------------------- */
.mc-main--workflow-run { padding-bottom: calc(24px + var(--mc-safe-bottom)); }
.mc-workflow-run {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 24px;
  max-width: 720px;
  margin: 0 auto;
}
.mc-workflow-run__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--brand-coral, #f9455c) 10%, var(--bg-secondary));
}
.mc-workflow-run__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary, var(--brand-magenta, #d00084));
  animation: mc-pulse 1.4s ease-in-out infinite;
  flex: none;
}
.mc-workflow-run__empty {
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
}
.mc-workflow-run__step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-workflow-run .compose-card,
.mc-workflow-run .workflow-step-run-card {
  max-width: 100%;
}
.mc-workflow-run .workflow-step-run-card {
  background: var(--bg-primary);
}
.mc-workflow-run__prompt,
.mc-workflow-run__approvals {
  min-width: 0;
}
.mc-workflow-run .mc-proposal-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mc-proposal__btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.mc-proposal-detail__actions a.mc-proposal__btn {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}

.mc-msg__meta {
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  font-size: 10px; margin-top: 3px; opacity: .7;
}
.mc-msg--out .mc-msg__meta { color: rgba(255,255,255,.85); }
.mc-msg__ticks { letter-spacing: -2px; font-size: 11px; }

/* Subtle copy control — nearly invisible until hover/focus on the bubble. */
.mc-msg__copy {
  appearance: none; border: 0; background: transparent; padding: 0;
  margin: 0; display: inline-flex; align-items: center; justify-content: center;
  color: inherit; opacity: 0; cursor: pointer; border-radius: 4px;
  width: 16px; height: 16px; transition: opacity .15s ease;
}
.mc-msg__bubble:hover .mc-msg__copy,
.mc-msg__bubble:focus-within .mc-msg__copy,
.mc-msg__copy:focus-visible,
.mc-msg__copy.is-copied {
  opacity: .55;
}
.mc-msg__copy:hover,
.mc-msg__copy:focus-visible { opacity: .9; }
.mc-msg__copy.is-copied { opacity: .9; }
@media (hover: none) {
  .mc-msg__copy { opacity: .35; }
}

/* Subtle entrance: new bubbles settle in with a slight rise + scale. */
.mc-anim-in { animation: mc-msg-in .28s cubic-bezier(.22,1,.36,1) both; }
.mc-anim-in .mc-msg__bubble { animation: mc-bubble-pop .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes mc-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mc-bubble-pop {
  from { transform: scale(.96); }
  to   { transform: scale(1); }
}

/* Reasoning / execution trace, collapsed by default */
.mc-msg__trace { margin-top: 8px; font-size: 12px; }
.mc-msg__trace summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  color: var(--text-secondary); list-style: none;
}
.mc-msg__trace summary::-webkit-details-marker { display: none; }
.mc-msg__trace-body { margin-top: 6px; opacity: .9; }

/* ---- Typing indicator ------------------------------------------------------ */
.mc-typing { animation: mc-msg-in .24s ease both; }
/* Rico's avatar gently pulses while he composes / works. */
.mc-typing__avatar { animation: mc-pulse 1.6s ease-in-out infinite; }
.mc-typing__bubble { display: inline-flex; align-items: center; gap: 4px; padding: 12px 14px; min-height: 20px; }
.mc-typing__dots { display: inline-flex; gap: 4px; }
.mc-typing__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-secondary); opacity: .5;
  animation: mc-typing 1.2s infinite ease-in-out;
}
.mc-typing__dot:nth-child(2) { animation-delay: .15s; }
.mc-typing__dot:nth-child(3) { animation-delay: .3s; }

/* "Working" state: brand wheel spinner + live status label. */
.mc-typing__work { display: inline-flex; align-items: center; gap: 8px; }
.mc-typing__wheel { animation: mc-spin 1.1s linear infinite; opacity: .85; }
.mc-typing__label {
  font-size: 12px; color: var(--text-secondary);
  animation: mc-label-fade .9s ease-in-out infinite alternate;
}
.mc-typing__label--inline { margin-left: 4px; }

/* System / error notice bubble */
.mc-msg--system { justify-content: center; }
.mc-msg__bubble--system {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  max-width: 90%; padding: 8px 14px;
  background: color-mix(in srgb, var(--brand-coral, #f9455c) 14%, var(--bg-secondary));
  color: var(--text-secondary); font-size: 12px; border-radius: 14px;
}
.mc-msg__bubble--system img { opacity: .8; }
.mc-share-objects-nudge__btn {
  margin-left: 4px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-color, rgba(127,127,127,.35));
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
  color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.mc-share-objects-nudge__btn:active { transform: scale(.98); }

.mc-objects__top-actions { margin-bottom: 8px; }
.mc-objects__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-objects__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mc-objects__title {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-objects__summon {
  flex-shrink: 0; padding: 6px 10px; border-radius: 12px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; color: inherit;
  background: var(--bg-input, var(--bg-secondary, #f0f2f5));
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
}
.mc-objects__summon:active { transform: scale(.98); }

.mc-context__objects { margin: 12px 0 4px; }
.mc-context__objects-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 12px 14px; border-radius: 14px; text-align: left;
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  background: var(--bg-secondary, rgba(127,127,127,.08));
  color: inherit; font: inherit; cursor: pointer;
}
.mc-context__objects-btn span { font-weight: 650; font-size: 14px; }
.mc-context__objects-btn small { font-size: 12px; color: var(--text-secondary); }
.mc-context__objects-btn:active { transform: scale(.99); }

/* Invite QR card — override the system bubble's horizontal inline-flex so the
   title / QR / actions stack as a column instead of three letter-narrow columns. */
.mc-msg--invite { width: 100%; }
.mc-msg__bubble--invite {
  display: block;
  width: min(100%, 22rem);
  max-width: min(100%, 22rem);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-primary);
}
.mc-invite { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc-invite__title { font-weight: 700; font-size: 15px; }
.mc-invite__body { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.mc-invite__qr {
  display: flex; justify-content: center; align-items: center;
  padding: 12px; background: #fff; border-radius: 12px;
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-invite__qr svg {
  display: block; width: min(200px, 70vw); height: auto; max-width: 100%; flex: none;
}
.mc-invite__actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mc-invite__link { font-size: 12px !important; width: 100%; min-width: 0; }
.mc-invite__buttons {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.mc-invite__buttons > * { flex: 1 1 auto; min-width: 8.5rem; text-align: center; }

/* --- Host guest snap-in toggles inside the invite card --- */
.mc-snapins {
  display: grid; gap: 6px; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--border-color-light, var(--border-color));
}
.mc-snapins__label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; opacity: .65;
}
.mc-snapins__hint { margin: 0 0 4px; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.mc-snapins__form { display: grid; gap: 8px; margin: 0; }
.mc-snapins__toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 10px; border-radius: 12px;
  border: 1px solid rgba(120,120,140,.24); background: rgba(120,120,140,.05);
}
.mc-snapins__check { flex: none; width: 18px; height: 18px; accent-color: #6366f1; }
.mc-snapins__body { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mc-snapins__text { display: grid; }
.mc-snapins__text strong { font-size: 13.5px; }
.mc-snapins__text small { font-size: 11.5px; color: var(--text-secondary); line-height: 1.35; }
.mc-snapins__save {
  justify-self: start; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(120,120,140,.3); background: transparent; color: inherit;
  font-size: 12px; font-weight: 600;
}
[data-theme="dark"] .mc-snapins__toggle { border-color: rgba(160,160,180,.22); background: rgba(160,160,180,.06); }

@keyframes mc-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes mc-spin { to { transform: rotate(360deg); } }
@keyframes mc-pulse {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes mc-label-fade { from { opacity: .55; } to { opacity: 1; } }

/* ---- Suggestion cards ------------------------------------------------------ */
.mc-suggestions { margin-top: 18px; animation: mc-fade-in .3s ease; }
.mc-suggestions__greeting {
  font-size: 15px; color: var(--text-secondary);
  margin: 0 4px 12px; line-height: 1.4;
}
.mc-suggestions__grid { display: flex; flex-direction: column; gap: 10px; }
.mc-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 14px; border-radius: 16px;
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border-color-light, var(--border-color));
  color: var(--text-primary);
  cursor: pointer;
  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease;
}
.mc-card:active { transform: scale(.985); }
.mc-card:hover { border-color: var(--border-color-strong, var(--border-color)); box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.mc-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}
.mc-card__icon img { filter: brightness(0) invert(1); }
.mc-card--b .mc-card__icon { background: linear-gradient(135deg, #327ad1, #8a5cf6); }
.mc-card--c .mc-card__icon { background: linear-gradient(135deg, #16a085, #2ecc71); }
.mc-card--d .mc-card__icon { background: linear-gradient(135deg, #e67e22, #f9455c); }
.mc-card--e .mc-card__icon { background: linear-gradient(135deg, #6366f1, #a855f7); }
.mc-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mc-card__label { font-weight: 700; font-size: 15px; }
.mc-card__sublabel { font-size: 13px; color: var(--text-secondary); }
.mc-card__integration {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; font-size: 11px; font-weight: 600;
  color: var(--accent-primary, var(--brand-magenta, #d00084));
}
.mc-card__integration img { opacity: .7; }
.mc-card__chevron { font-size: 22px; color: var(--text-secondary); opacity: .5; flex: none; }

/* Link cards (e.g. "see your demo recommendation") navigate; render like a
   card but as an anchor, with a subtle accent ring to read as the payoff. */
.mc-card--link, .mc-card--link:hover, .mc-card--link * { text-decoration: none; }
.mc-card--link.mc-card--a {
  border-color: var(--accent-primary, var(--brand-magenta, #d00084));
  background:
    linear-gradient(var(--bg-input, var(--bg-secondary)), var(--bg-input, var(--bg-secondary))) padding-box,
    linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c)) border-box;
  border: 1.5px solid transparent;
}

/* ---- Onboarding ladder ----------------------------------------------------- */
.mc-ladder {
  margin: 18px 0 4px; padding: 14px 16px;
  border-radius: 16px;
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border-color-light, var(--border-color));
  animation: mc-fade-in .3s ease;
}
.mc-ladder__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.mc-ladder__title { font-weight: 700; font-size: 14px; }
.mc-ladder__count { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.mc-ladder__track {
  height: 6px; border-radius: 999px;
  background: var(--border-color-light, var(--border-color));
  overflow: hidden;
}
.mc-ladder__fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
  transition: width .4s ease;
}
.mc-ladder__steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mc-ladder__step { display: flex; align-items: center; gap: 10px; }
.mc-ladder__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  font-size: 12px; font-weight: 700;
  background: var(--border-color-light, var(--border-color));
  color: var(--text-secondary);
}
.mc-ladder__step.is-done .mc-ladder__dot {
  background: linear-gradient(135deg, #16a085, #2ecc71); color: #fff;
}
.mc-ladder__step.is-current .mc-ladder__dot {
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c)); color: #fff;
}
.mc-ladder__step-body { display: flex; flex-direction: column; min-width: 0; }
.mc-ladder__step-label { font-size: 14px; }
.mc-ladder__step.is-done .mc-ladder__step-label { color: var(--text-secondary); }
.mc-ladder__step.is-current .mc-ladder__step-label { font-weight: 700; }
.mc-ladder__step-hint { font-size: 12px; color: var(--text-secondary); }
.mc-ladder__alt {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border-color-light, var(--border-color));
  font-size: 13px; color: var(--text-secondary);
}
.mc-ladder__alt-link {
  font-weight: 600; text-decoration: none;
  color: var(--accent-primary, var(--brand-magenta, #d00084));
}

/* ---- Composer -------------------------------------------------------------- */
.mc-composer {
  padding: 8px 10px calc(var(--mc-safe-bottom) + 8px);
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-color-light, var(--border-color));
  position: sticky; bottom: 0; z-index: 20;
}
/* A card in the thread owns the keyboard (naming an agent, adding a decision
   option) — collapse the main composer so there is only ever one input in play
   and the card's own field isn't crowded by the sticky footer. Toggled by
   mc-chat#syncCardInputFocus. */
.mc-app.is-card-input > .mc-composer { display: none; }

.mc-composer__row {
  display: flex; align-items: flex-end; gap: 8px;
}
.mc-composer__input {
  flex: 1; resize: none;
  max-height: 140px; min-height: 44px;
  padding: 11px 16px;
  border-radius: 22px;
  border: 1px solid var(--border-color, #d1d5dc);
  background: var(--bg-input, #fff);
  color: var(--text-primary);
  font-size: 16px; /* prevent iOS zoom on focus */
  line-height: 1.35;
  font-family: inherit;
}
.mc-composer__input:focus { outline: none; border-color: var(--accent-primary, var(--brand-magenta, #d00084)); }
.mc-composer__send {
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
  transition: transform .1s ease, opacity .15s ease;
}
.mc-composer__send:disabled { opacity: .4; cursor: default; }
.mc-composer__send:not(:disabled):active { transform: scale(.9); }

/* ---- Drawer / menu --------------------------------------------------------- */
.mc-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.mc-drawer.is-open { visibility: visible; }
.mc-drawer__scrim {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .2s ease;
}
.mc-drawer.is-open .mc-drawer__scrim { opacity: 1; }
.mc-drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(82vw, 320px);
  padding: calc(var(--mc-safe-top) + 14px) 14px calc(var(--mc-safe-bottom) + 14px);
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color);
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.32,.72,0,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mc-drawer.is-open .mc-drawer__panel { transform: translateX(0); }
.mc-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mc-drawer__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.mc-drawer__close { border: none; background: transparent; font-size: 26px; line-height: 1; color: var(--text-secondary); cursor: pointer; }
.mc-drawer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* Group headings that break the long nav into scannable sections. */
.mc-drawer__section {
  margin: 16px 12px 4px; padding: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary);
}
.mc-drawer__section:first-child { margin-top: 4px; }
.mc-drawer__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px;
  color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 15px;
}
.mc-drawer__item:active { background: var(--bg-secondary); }
.mc-drawer__item.is-active { background: var(--db-rico-wash, var(--bg-secondary)); }
.mc-drawer__item img { opacity: .8; }
.mc-drawer__foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color-light, var(--border-color)); display: flex; flex-direction: column; gap: 10px; }
.mc-drawer__secondary { color: var(--text-secondary); text-decoration: none; font-size: 13px; text-align: center; }
.mc-drawer__signout button,
.mc-drawer__signout {
  width: 100%; padding: 12px; border-radius: 12px;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  color: var(--text-primary); font-weight: 600; cursor: pointer;
}

/* ---- Context panel (agent / engine picker, landing tab) -------------------- */
.mc-context { animation: mc-fade-in .25s ease; }
.mc-context__hint { font-size: 13px; color: var(--text-secondary); margin: 2px 4px 10px; }
.mc-context__hint--share { margin-top: 14px; }
.mc-context__section { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin: 16px 4px 6px; }
.mc-context__list { display: flex; flex-direction: column; gap: 6px; }
.mc-context__share { margin-top: 14px; }

/* ---- Picker filter + sort (mc-list-filter) -------------------------------- */
.mc-context__filterwrap { display: flex; flex-direction: column; gap: 8px; }
.mc-context__filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 2px 2px;
}
.mc-context__search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 160px; min-width: 0;
  padding: 8px 10px; border-radius: 12px;
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-context__search:focus-within { border-color: var(--accent-primary, var(--brand-magenta, #d00084)); }
.mc-context__search-icon { flex: none; color: var(--text-secondary); }
.mc-context__search-input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 14px; color: var(--text-primary); outline: none;
}
.mc-context__search-input::-webkit-search-cancel-button { display: none; }
.mc-context__search-clear {
  flex: none; border: 0; background: transparent; cursor: pointer;
  color: var(--text-secondary); font-size: 13px; line-height: 1; padding: 2px 4px;
}
.mc-context__search-clear:active { transform: scale(.9); }
.mc-context__sort {
  display: inline-flex; flex: none; padding: 2px; border-radius: 10px; gap: 2px;
  background: var(--bg-input, var(--bg-secondary));
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-context__sort-btn {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 650; color: var(--text-secondary);
  padding: 6px 10px; border-radius: 8px;
}
.mc-context__sort-btn.is-active {
  color: var(--text-primary);
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 1px var(--border-color-light, var(--border-color));
}
.mc-context__list--scroll {
  max-height: 46vh; overflow-y: auto; padding: 2px; margin: -2px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.mc-context__empty {
  font-size: 13px; color: var(--text-secondary); text-align: center;
  margin: 6px 4px 0; padding: 10px;
}
.mc-context__option-when {
  flex: none; font-size: 11px; color: var(--text-secondary);
  white-space: nowrap; margin-left: 2px;
}

/* ---- Share engine banner (mobile Rico) ------------------------------------ */
.mc-share-banner { margin: 0 0 12px; }
.mc-share-banner__form { margin: 0; }
.mc-share-banner__btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: 14px; text-align: left; font: inherit;
  border: 1px solid var(--border-color-light, var(--border-color));
  background: var(--db-rico-wash, var(--bg-secondary));
  color: var(--text-primary); cursor: pointer;
}
.mc-share-banner__btn:active { transform: scale(.99); }
.mc-share-banner__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  color: var(--accent-primary, var(--brand-magenta, #d00084));
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 1px var(--border-color-light, var(--border-color));
}
.mc-share-banner__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mc-share-banner__copy strong {
  font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-share-banner__copy small { font-size: 12px; color: var(--text-secondary); }
.mc-share-banner__cta {
  flex: none; font-size: 13px; font-weight: 700;
  color: var(--accent-primary, var(--brand-magenta, #d00084));
}
.mc-context__optionform { margin: 0; }
.mc-context__option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 12px; border-radius: 14px;
  background: var(--bg-input, var(--bg-secondary)); border: 1px solid var(--border-color-light, var(--border-color));
  color: var(--text-primary); cursor: pointer; font: inherit;
  text-decoration: none;
}
a.mc-context__option { color: var(--text-primary); }
.mc-context__option:active { background: var(--bg-secondary); }
.mc-context__option.is-selected { border-color: var(--accent-primary, var(--brand-magenta, #d00084)); background: var(--db-rico-wash, var(--bg-secondary)); }
.mc-context__option-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 1px var(--border-color-light, var(--border-color));
}
.mc-context__option-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mc-context__option-labelrow {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.mc-context__option-label { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-context__option-sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-context__option-check { color: var(--accent-primary, var(--brand-magenta, #d00084)); font-weight: 700; flex: none; width: 16px; text-align: center; }
.mc-context__badge {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  box-shadow: inset 0 0 0 1px var(--border-color-light, var(--border-color));
}
.mc-context__badge--live {
  color: var(--accent-primary, var(--brand-magenta, #d00084));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary, #d00084) 45%, transparent);
}
.mc-context__more { margin-top: 6px; }
.mc-context__more-summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 4px;
}
.mc-context__more-summary::-webkit-details-marker { display: none; }
.mc-context__list--nested { margin-top: 6px; }

/* ---- Flash ----------------------------------------------------------------- */
.mc-flash {
  position: fixed; top: calc(var(--mc-safe-top) + 8px); left: 50%; transform: translateX(-50%);
  z-index: 80; padding: 10px 16px; border-radius: 12px; font-size: 13px;
  background: var(--brand-coral, #f9455c); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.2);
}

@keyframes mc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mc-typing__dot, .mc-typing__avatar, .mc-typing__wheel, .mc-typing__label,
  .mc-suggestions, .mc-card, .mc-drawer__panel, .mc-drawer__scrim,
  .mc-anim-in, .mc-anim-in .mc-msg__bubble, .mc-typing,
  .mc-msg__text--typing::after {
    animation: none !important; transition: none !important;
  }
}

/* ---- Anonymous preview surface (home-page embed + /preview) ---------------- */
/* Non-interactive title: the preview has no agent/engine picker to open. */
.mc-header__title--static { cursor: default; }
.mc-header__title--static:active { background: transparent; }

.mc-header__demo-pill {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-color-light, var(--border-color));
}

/* Composer swapped for the register CTA once the demo turns are used up. */
.mc-composer__locked { display: grid; gap: 10px; padding: 6px 4px 4px; text-align: center; }
.mc-composer__locked-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.mc-composer__locked-cta {
  display: block;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(95deg, #1336d6, #b41674 70%, #ff5566);
}

/* The preview thread is short — don't reserve 45vh of scroll runway for it. */
.mc-app--embedded .mc-thread { padding-bottom: 16vh; }

/* ---- Modality composer (camera / map / calendar) --------------------------- */
.mc-composer__modality { display: grid; gap: 6px; margin-bottom: 6px; }
.mc-composer__attach { display: flex; align-items: center; gap: 6px; }
.mc-composer__icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-input, var(--bg-primary));
  color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
}
.mc-composer__icon-btn:active { transform: scale(.94); }
/* Camera/map SVGs use currentColor; as <img> that renders black — force
   glyph color to match text so they stay readable on light and dark surfaces.
   Leave the multi-color calendar asset alone. */
.mc-composer__icon-btn img[src*="icon-camera"],
.mc-composer__icon-btn img[src*="icon-map"],
.mc-composer__icon-btn img[src*="icon-mic"] {
  filter: brightness(0);
  opacity: .82;
}
[data-theme="dark"] .mc-composer__icon-btn img[src*="icon-camera"],
[data-theme="dark"] .mc-composer__icon-btn img[src*="icon-map"],
[data-theme="dark"] .mc-composer__icon-btn img[src*="icon-mic"] {
  filter: brightness(0) invert(1);
  opacity: .95;
}
.mc-composer__icon-btn.is-recording {
  border-color: #dc2626;
  background: rgba(220, 38, 38, .12);
  color: #b91c1c;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
  animation: mc-mic-pulse 1.2s ease-in-out infinite;
}
.mc-composer__icon-btn.is-recording img[src*="icon-mic"] {
  filter: none;
  opacity: 1;
}
.mc-composer__icon-btn.is-busy { opacity: .55; cursor: wait; }
.mc-composer__dictation-status {
  margin: 0; font-size: 12px; color: var(--text-secondary);
}
@keyframes mc-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220, 38, 38, .16); }
  50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, .10); }
}
.mc-composer__preview {
  position: relative; width: 64px; height: 64px;
}
.mc-composer__preview img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--border-color);
}
.mc-composer__preview-clear {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: #111827; color: #fff; cursor: pointer; font-size: 12px;
}
.mc-composer__media-status {
  margin: 0; font-size: 12px; color: var(--text-secondary);
  min-height: 1em;
}

/* ---- UGC consent dialog ---------------------------------------------------- */
.mc-consent {
  border: none; border-radius: 18px; padding: 0; max-width: 24rem; width: calc(100% - 2rem);
  background: var(--bg-primary); color: var(--text-primary);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.mc-consent::backdrop { background: rgba(8, 10, 20, .62); }
.mc-consent__sheet { padding: 1.1rem 1.15rem 1rem; display: grid; gap: .85rem; }
.mc-consent__title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.mc-consent__points {
  margin: 0; padding-left: 1.1rem; font-size: 13.5px; line-height: 1.45;
  color: var(--text-secondary);
}
.mc-consent__check {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem;
  font-size: 13px; line-height: 1.4; align-items: start;
}
.mc-consent__links { margin: 0; font-size: 12px; color: var(--text-secondary); }
.mc-consent__links a { color: var(--accent-primary, #d00084); }
.mc-consent__ver { opacity: .7; margin-left: .35rem; }
.mc-consent__actions { display: flex; gap: .6rem; justify-content: flex-end; }
.mc-consent__cancel, .mc-consent__accept {
  border-radius: 12px; padding: .65rem .95rem; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.mc-consent__cancel {
  border: 1px solid var(--border-color); background: transparent; color: var(--text-primary);
}
.mc-consent__accept {
  border: none; color: #fff;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}

/* ---- Map snap-in + map cards (themed OSM via Carto) ------------------------ */
.mc-map-snapin {
  border: none; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%;
  max-height: 100%; background: transparent;
}
.mc-map-snapin::backdrop { background: rgba(6, 8, 16, .72); }
.mc-map-snapin__sheet {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  height: 100dvh; background: var(--bg-primary); color: var(--text-primary);
}
.mc-map-snapin__header {
  display: flex; align-items: center; gap: .65rem;
  padding: calc(var(--mc-safe-top) + 10px) 12px 8px;
}
.mc-map-snapin__close, .mc-map-snapin__use, .mc-map-snapin__search-btn, .mc-map-snapin__confirm {
  border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary);
  color: var(--text-primary); padding: .45rem .7rem; font-size: 13px; cursor: pointer;
  font-family: var(--font-primary, inherit); font-weight: 600;
}
.mc-map-snapin__title {
  margin: 0; font-weight: 700; font-size: 1rem;
  font-family: var(--font-heading, inherit);
}
.mc-map-snapin__sub { margin: 0; font-size: 12px; color: var(--text-secondary); }
.mc-map-snapin__search {
  display: flex; gap: .5rem; padding: 0 12px 8px;
}
.mc-map-snapin__input {
  flex: 1; border-radius: 12px; border: 1px solid var(--border-color);
  background: var(--bg-input, #111); color: var(--text-primary);
  padding: .65rem .8rem; font-size: 16px;
  font-family: var(--font-primary, inherit);
}
.mc-map-snapin__canvas {
  min-height: 240px; z-index: 1;
  background: var(--bg-primary);
}
.mc-map-snapin__status {
  margin: 0; padding: 6px 12px; font-size: 12.5px; color: var(--text-secondary); min-height: 1.4em;
}
.mc-map-snapin__footer {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 8px 12px calc(var(--mc-safe-bottom) + 10px);
  border-top: 1px solid var(--border-color-light, var(--border-color));
}
.mc-map-snapin__attrib, .mc-map-card__attrib {
  margin: 0; font-size: 11px; color: var(--text-secondary);
}
.mc-map-snapin__attrib a, .mc-map-card__attrib a {
  color: var(--accent-primary, var(--brand-magenta, #d00084));
  text-decoration: none;
}
.mc-map-snapin__confirm:disabled { opacity: .45; cursor: default; }
.mc-map-snapin__confirm:not(:disabled) {
  border: none; color: #fff;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}

.mc-map-card {
  list-style: none; margin: 8px 12px; padding: 10px;
  border-radius: 14px; background: var(--bg-secondary);
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-map-card__hit {
  display: block; width: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.mc-map-card__head { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 8px; }
.mc-map-card__title { margin: 0; font-weight: 600; font-size: 14px; }
.mc-map-card__meta { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
.mc-map-card__map {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--surface-panel-border, var(--border-color-light, var(--border-color)));
  box-shadow: var(--surface-panel-shadow, none);
}
.mc-map-card__canvas {
  height: 160px; width: 100%;
  background: var(--bg-primary);
}

/* Fabric-tinted basemap + brand pin / Leaflet chrome */
.mc-map-themed {
  font-family: var(--font-primary, inherit);
  background: var(--bg-primary);
}
.mc-map-themed .leaflet-container {
  background: var(--bg-primary);
  font: inherit;
}
/* Shift Carto Dark Matter toward Fabric navy; keep light tiles cool/clean. */
.mc-map-themed[data-map-theme="dark"] .leaflet-tile-pane {
  filter: sepia(.22) hue-rotate(195deg) saturate(1.2) brightness(.94) contrast(1.04);
}
.mc-map-themed[data-map-theme="light"] .leaflet-tile-pane {
  filter: saturate(.88) hue-rotate(8deg) contrast(.98) brightness(1.02);
}
.mc-map-themed .leaflet-control-zoom a {
  width: 34px !important; height: 34px !important; line-height: 34px !important;
  border: 1px solid var(--border-color) !important;
  background: color-mix(in srgb, var(--bg-card, var(--bg-secondary)) 92%, transparent) !important;
  color: var(--text-primary) !important;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.mc-map-themed .leaflet-control-zoom a:hover {
  background: var(--bg-secondary) !important;
  color: var(--brand-magenta, #d00084) !important;
}
.mc-map-themed .leaflet-control-zoom {
  border: none !important;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .25)) !important;
  border-radius: 12px;
  overflow: hidden;
}
.mc-map-themed .leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent) !important;
  color: var(--text-secondary) !important;
  font-size: 10px !important;
  backdrop-filter: blur(6px);
  max-width: 70%;
}
.mc-map-themed .leaflet-control-attribution a {
  color: var(--accent-primary, var(--brand-magenta, #d00084)) !important;
}
.mc-map-themed .leaflet-popup-content-wrapper {
  background: var(--bg-card, var(--bg-secondary));
  color: var(--text-primary);
  border-radius: 12px;
  border: 1px solid var(--surface-panel-border, var(--border-color));
  box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, .28));
  font-family: var(--font-primary, inherit);
}
.mc-map-themed .leaflet-popup-content {
  margin: .65rem .85rem;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.mc-map-themed .leaflet-popup-tip {
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--surface-panel-border, var(--border-color));
  box-shadow: none;
}
.mc-map-pin {
  background: transparent !important;
  border: none !important;
}
.mc-map-pin__glyph {
  display: block;
  width: 22px;
  height: 22px;
  margin: 4px auto 0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
  border: 2px solid #fff;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--brand-magenta, #d00084) 35%, transparent),
    0 6px 14px rgba(208, 0, 132, .42);
}

.mc-msg__media { margin-top: .45rem; }
.mc-msg__media img {
  display: block; max-width: min(220px, 70vw); max-height: 220px;
  border-radius: 12px; object-fit: cover;
}

.mc-msg__location {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .45rem; padding: .35rem .55rem;
  border: 0; border-radius: 10px; font: inherit; font-size: 12.5px;
  background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
  color: inherit; cursor: pointer;
}

/* In-chat object / location detail sheet */
/* margin: top | left+right | bottom — horizontal auto centers on desktop;
   `auto 0 0` pinned the sheet to the bottom-left on wide viewports. */
.mc-detail {
  border: none; padding: 0; margin: auto auto 0; width: min(100%, 520px);
  max-height: min(88vh, 720px); border-radius: 20px 20px 0 0;
  background: var(--bg-primary, #fff); color: inherit;
  box-shadow: 0 -12px 40px rgba(0,0,0,.28);
}
.mc-detail::backdrop { background: rgba(6, 8, 16, .62); }
.mc-detail__sheet { display: flex; flex-direction: column; max-height: min(88vh, 720px); }
.mc-detail__header {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem .5rem; border-bottom: 1px solid var(--border-color, rgba(127,127,127,.2));
}
.mc-detail__close {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border-color);
  background: var(--bg-secondary); color: inherit; cursor: pointer; font-size: 14px;
}
.mc-detail__eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.mc-detail__body { overflow: auto; padding: .85rem 1rem 1.25rem; }
.mc-detail__loading { margin: 1rem 0; opacity: .7; font-size: 14px; }
.mc-detail__loc-map {
  border-radius: 14px; overflow: hidden; margin-bottom: .75rem;
  border: 1px solid var(--border-color);
}
.mc-detail__loc-canvas { height: 180px; width: 100%; }
.mc-detail__loc-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.mc-detail__loc-meta, .mc-detail__loc-coords { margin: .25rem 0 0; font-size: 13px; color: var(--text-secondary); }

.mc-detail-card { display: flex; flex-direction: column; gap: .75rem; }
.mc-detail-card__head { display: flex; align-items: flex-start; gap: .7rem; }
.mc-detail-card__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}
.mc-detail-card__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.mc-detail-card__sub { margin: .15rem 0 0; font-size: 13px; opacity: .75; }
.mc-detail-card__body { margin: 0; font-size: 14px; line-height: 1.45; }
.mc-detail-card__muted { margin: 0; font-size: 13px; opacity: .75; line-height: 1.4; }
.mc-detail-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-detail-card__chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
}
.mc-detail-card__section { display: grid; gap: .35rem; }
.mc-detail-card__section-label {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; opacity: .65;
}
.mc-detail-card__list, .mc-detail-card__olist { margin: 0; padding-left: 1.1rem; font-size: 14px; }
.mc-detail-card__list li.is-chosen { font-weight: 700; }
.mc-detail-card__hint { margin: 0; font-size: 12.5px; opacity: .7; line-height: 1.4; }

/* Tappable "record this option" choice rows on the mobile decision screen. */
.mc-choices { display: flex; flex-direction: column; gap: .5rem; }
.mc-choice-form { margin: 0; }
.mc-choice {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%;
  padding: 12px 14px; border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; color: inherit;
  background: var(--bg-secondary, rgba(127,127,127,.12));
  border: 1px solid var(--border-color, rgba(127,127,127,.3));
  transition: border-color .12s ease, transform .06s ease;
}
.mc-choice:hover { border-color: var(--brand-magenta, #d00084); }
.mc-choice:active { transform: scale(.99); }
.mc-choice__label { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mc-choice__pick {
  flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-magenta, #d00084);
}
[data-theme="dark"] .mc-choice__pick { color: var(--brand-coral, #f9455c); }
.mc-detail-card__linkbtn {
  border: 0; background: none; padding: 0; color: var(--accent-primary, #d00084);
  font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.mc-detail-card__actions { display: flex; flex-direction: column; gap: .55rem; margin-top: .25rem; }
.mc-detail-card__form { margin: 0; }
.mc-detail-card__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 11px 14px; border: none; border-radius: 12px;
  color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}
.mc-detail-card__ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%;
  padding: 10px 12px; border-radius: 12px; font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; text-decoration: none; color: inherit; text-align: center;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
}
.mc-detail-card__ghost--static { cursor: default; opacity: .85; pointer-events: none; }
.mc-composer__pending-location,
.mc-composer__stops {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .45rem .6rem; border-radius: 14px;
  font-size: 12.5px; max-width: 100%; width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-composer__pending-location[hidden],
.mc-composer__stops[hidden] { display: none !important; }
.mc-composer__stops-head {
  display: flex; align-items: center; gap: .4rem;
}
.mc-composer__stops-head span { flex: 1; font-weight: 600; }
.mc-composer__stops-add {
  border: none; background: transparent; cursor: pointer;
  color: var(--accent-primary, var(--brand-magenta, #d00084));
  font-size: 12px; font-weight: 700; padding: 0 .2rem;
}
.mc-composer__stops-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .3rem;
}
.mc-composer__stop {
  display: flex; align-items: flex-start; gap: .45rem;
  padding: .25rem 0;
}
.mc-composer__stop-index {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}
.mc-composer__stop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mc-composer__stop-body strong {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-composer__stop-body small { color: var(--text-secondary); font-size: 11px; }
.mc-composer__pending-clear {
  border: none; background: transparent; color: var(--text-secondary);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0 .15rem;
}
.mc-map-snapin__confirm.is-ready {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-magenta, #d00084) 45%, transparent);
}
.mc-map-snapin__label-sheet {
  padding: 12px 12px calc(var(--mc-safe-bottom) + 12px);
  border-top: 1px solid var(--border-color-light, var(--border-color));
  background: var(--bg-primary);
  display: flex; flex-direction: column; gap: .65rem;
}
.mc-map-snapin__label-sheet[hidden] { display: none !important; }
.mc-map-snapin__label-title {
  margin: 0; font-weight: 700; font-size: 1rem;
  font-family: var(--font-heading, inherit);
}
.mc-map-snapin__label-address {
  margin: 0; font-size: 12.5px; color: var(--text-secondary);
}
.mc-map-snapin__label-field {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .8rem; color: var(--text-secondary);
}
.mc-map-snapin__label-field small { opacity: .75; }
.mc-map-snapin__label-actions {
  display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap;
}
.mc-map-snapin__label-actions .btn { flex: 1 1 auto; min-width: 7rem; }

/* Itinerary card (private + shared room) */
#mobile-itinerary:empty { display: none; }
#mobile-itinerary { margin: 8px 12px; }
.mc-itinerary {
  margin: 0; padding: 12px;
  border-radius: 14px; background: var(--bg-secondary);
  border: 1px solid var(--border-color-light, var(--border-color));
}
.mc-itinerary__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-bottom: .6rem;
}
.mc-itinerary__title { margin: 0; font-weight: 700; font-size: 15px; }
.mc-itinerary__status {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent-primary, var(--brand-magenta, #d00084));
}
.mc-itinerary__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.mc-itinerary__stop { display: flex; gap: .55rem; align-items: flex-start; }
.mc-itinerary__n {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-magenta, #d00084), var(--brand-coral, #f9455c));
}
.mc-itinerary__stop strong { display: block; font-size: 13.5px; }
.mc-itinerary__stop small { color: var(--text-secondary); font-size: 11.5px; }
.mc-share-plan {
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--border-color-light, var(--border-color));
  background: color-mix(in srgb, var(--brand-magenta, #d00084) 8%, var(--bg-secondary));
  font-size: 12.5px;
}
.mc-share-plan__title {
  margin: 0 0 .35rem; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-secondary);
}
.mc-share-plan__stops {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .2rem;
}
.mc-share-plan__stops li { color: var(--text-primary); }
.mc-share-plan__stops small { color: var(--text-secondary); }