/* Lifted from HIS's concierge (assets/css/chat.css). Its tokens are scoped here as --c-* so they
   never shadow the app's own --accent, --muted and --border. */
.mchat, .mchat__launch {
    --c-primary: var(--accent);
    --c-primary-foreground: var(--accent-ink);
    --c-primary-hover: var(--accent);
    --c-foreground: var(--text);
    --c-muted-foreground: var(--muted);
    --c-border: var(--border);
    --c-input: var(--border);
    --c-card: var(--surface);
    --c-background: var(--bg);
    --c-muted: var(--surface-2);
    --c-accent: var(--surface-2);
    --c-ring: color-mix(in srgb, var(--accent) 65%, var(--border));
    --c-secondary: var(--surface-2);
    --c-radius: 10px;
    --c-font-sans: var(--sans);
    --c-font-display: var(--sans);
    font-family: var(--sans);
}
.concierge__actions {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--c-foreground);
}
.concierge__actions li { margin-bottom: 0.5rem; }
.concierge__when {
  display: block;
  color: var(--c-muted-foreground);
  font-size: 0.6875rem;
}
.mchat__launch {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 0;
  background: var(--c-primary);
  color: var(--c-primary-foreground);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-primary) 32%, transparent);
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mchat__launch:hover { transform: translateY(-2px); }
.mchat__launch .nav-icon, .mchat__launch svg { width: 1.65rem; height: 1.65rem; stroke-width: 1.8; }
.mchat {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 22rem;
  max-width: calc(100vw - 2.5rem);
  height: 28rem;
  max-height: 70vh;
  overflow: hidden;
  background: var(--c-card);
  color: var(--c-foreground);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 30%);
}
.mchat[hidden] { display: none; }
.mchat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-sizing: border-box;
  height: 2.75rem;
  padding: 0 0.9rem;
  background: var(--c-primary);
  color: var(--c-primary-foreground);
  font-weight: 600;
}
.mchat__clear {
  margin-left: auto;
  padding: 0.15rem 0.4rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.75;
  cursor: pointer;
}
.mchat__clear:hover { opacity: 1; background: rgb(255 255 255 / 15%); }
.mchat__clear[hidden] { display: none; }
.mchat__clear[disabled] { opacity: 0.4; cursor: default; }
.mchat__clear ~ .mchat__close { margin-left: 0; }
.mchat__close {
  /* Pushed right on its own, so a header with no title still puts the close
     button where every close button lives. space-between alone would float it
     to the left the moment it is the only child. */
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.75;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.mchat__log {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mchat__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ⚠️ `safe` matters here, and the fallback below is the whole point. When the
     greeting, a notice and three chips exceed the panel, plain `center` pushes
     the overflow ABOVE the scrollable top, where it cannot be scrolled back
     into view: measured at 353px of content in a 314px log with the icon 10px
     out of reach. `safe` falls back to flex-start instead of clipping. */
  justify-content: center;
  justify-content: safe center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem 0.5rem;
  text-align: center;
}
.mchat__empty .nav-icon, .mchat__empty > svg {
  width: 2rem;
  height: 2rem;
  color: var(--c-primary);
  opacity: 0.9;
}
.mchat__emptytitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-foreground);
}
.mchat__emptynote {
  margin: 0;
  max-width: 22ch;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--c-muted-foreground);
}
.mchat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0.2rem;
  background: none;
  border: none;
  border-radius: 6px;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}
.mchat__icon:hover { opacity: 1; background: rgb(255 255 255 / 15%); }
.mchat__icon .nav-icon, .mchat__icon svg { width: 1rem; height: 1rem; }
.mchat__icon[aria-expanded="true"] { opacity: 1; background: rgb(255 255 255 / 22%); }
.mchat__icon ~ .mchat__icon,
.mchat__icon ~ .mchat__clear,
.mchat__icon ~ .mchat__close { margin-left: 0; }
.concierge__history {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem;
}
.mchat__log[hidden],
.concierge__history[hidden] {
  display: none;
}
.concierge__empty {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-muted-foreground);
}
.concierge__historytitle {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  /* The brand color, because it is a headline over the entries rather than
     another line of them. Muted, it read as the first bullet. */
  color: var(--c-primary);
}
.mchat__msg {
  max-width: 85%;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  line-height: 1.45;
  font-size: 0.9rem;
  /* The model is told to answer in plain text, so newlines are the only
     formatting it has. Honoring them is what keeps a two-part answer readable. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mchat__msg--you {
  align-self: flex-end;
  background: var(--c-primary);
  color: var(--c-primary-foreground);
  border-bottom-right-radius: 3px;
}
.mchat__msg--bot {
  align-self: flex-start;
  background: var(--c-accent, rgb(0 0 0 / 6%));
  border-bottom-left-radius: 3px;
}
.mchat__typing {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0;
}
.mchat__typing span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: mchat-typing 1.1s ease-in-out infinite;
}
.mchat__typing span:nth-child(2) { animation-delay: 0.15s; }
.mchat__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mchat-typing {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-0.12rem); }
}
.mchat__form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem;
  border-top: 1px solid var(--c-border);
}
.mchat__form input { margin-right: 0.15rem; }
.mchat__form input { flex: 1; min-width: 0; }
.mchat__form input[type="text"] {
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border-radius: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-input);
  color: var(--c-foreground);
}
.mchat__form input[type="text"]::placeholder { font-size: 0.85rem; color: color-mix(in srgb, var(--c-muted-foreground) 80%, var(--c-foreground)); opacity: 1; }
.mchat__form input[type="text"]:focus,
.mchat__form input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--c-ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-ring) 10%, transparent);
}
.mchat__form .btn {
  padding: 0.45rem 0.9rem;
  font-size: 0.825rem;
  border-radius: var(--c-radius);
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--c-primary);
  color: var(--c-primary-foreground);
  cursor: pointer;
  font-family: inherit;
}
.mchat__form .btn:hover { background: var(--c-primary-hover); }
.mchat .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mchat__launch .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mchat__form .mchat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2.5rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--c-radius);
}
.mchat__form .mchat__send .nav-icon, .mchat__form .mchat__send svg { width: 1rem; height: 1rem; }
.mchat__mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2rem;
  height: 2.25rem;
  flex: none;
  background: none;
  border: none;
  border-radius: var(--c-radius);
  color: var(--c-muted-foreground);
  cursor: pointer;
}
.mchat__mic:hover { background: var(--c-accent); color: var(--c-foreground); }
.mchat__mic .nav-icon, .mchat__mic svg { width: 1.1rem; height: 1.1rem; }
.mchat__mic:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-ring) 40%, transparent);
}
.mchat__mic .mchat__mic-idle,
.mchat__mic .mchat__mic-done {
  display: inline-flex;
  align-items: center;
}
.mchat__mic .mchat__mic-done { display: none; }
.mchat__mic.is-listening .mchat__mic-idle { display: none; }
.mchat__mic.is-listening .mchat__mic-done { display: inline-flex; }
.mchat__miccancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2rem;
  height: 2.25rem;
  flex: none;
  background: none;
  border: none;
  border-radius: var(--c-radius);
  color: var(--c-muted-foreground);
  opacity: 0.75;
  cursor: pointer;
}
.mchat__miccancel:hover { background: var(--c-accent); color: var(--c-foreground); opacity: 1; }
.mchat__miccancel .nav-icon { width: 1rem; height: 1rem; }
.mchat__miccancel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-ring) 40%, transparent);
}
.mchat__mic[hidden],
.mchat__miccancel[hidden],
.mchat__send[hidden] { display: none; }
.mchat__mic.is-listening {
  color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 14%, transparent);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
.mchat__speaker {
  opacity: 1;
}
.mchat__speaker.is-on {
  background: color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.mchat__speaker .mchat__speaker-on,
.mchat__speaker .mchat__speaker-off {
  display: inline-flex;
  align-items: center;
}
.mchat__speaker .mchat__speaker-off { display: none; }
.mchat__speaker:not(.is-on) .mchat__speaker-on { display: none; }
.mchat__speaker:not(.is-on) .mchat__speaker-off { display: inline-flex; }
.mchat__speaker .nav-icon { width: 1rem; height: 1rem; }
.mchat__foot {
  margin: 0;
  padding: 0 0.6rem 0.6rem;
  font-size: 0.72rem;
  color: var(--c-muted-foreground);
  text-align: center;
}
.mchat--concierge .mchat__log { gap: 0.55rem; }
.mchat__starters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  padding: 0 0.75rem 0.4rem;
  overflow-x: auto;
  /* Scrolled with a trackpad or a swipe; the bar itself is visual noise on a
     row of three or four. */
  scrollbar-width: none;
}
.mchat__starters::-webkit-scrollbar { display: none; }
.mchat__starters .btn {
  flex: none;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--c-border) 70%, transparent);
  color: var(--c-muted-foreground);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  /* Without this a two-word chip breaks in half rather than scrolling. */
  white-space: nowrap;
}
.mchat__starters .btn:hover {
  color: var(--c-foreground);
  border-color: var(--c-border);
}
.mchat__msg a {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
}

.mchat[data-voice-input="0"] .mchat__mic { display: none; }
.mchat[data-needs-key="1"] .mchat__mic { display: none; }
.mchat[data-needs-key="1"] .mchat__form input[type="text"][disabled] { opacity: 0.6; }
.mchat__emptynote a { color: var(--c-primary-hover); }
.mchat__tag {
  display: inline-block;
  line-height: 1.2;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  background: rgb(0 0 0 / 18%);
  color: inherit;
  opacity: 0.85;
}
.mchat__starters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mchat__starters::-webkit-scrollbar { display: none; }
.mchat__starters[hidden] { display: none; }
.mchat__starters .mchat__chip { flex: none; white-space: nowrap; }
.mchat__chip {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: transparent;
  color: var(--c-muted-foreground);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
}
.mchat__chip:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* Pop out, and the top bar dock: the panel as a window in the middle over a dimmed page. */
.mchat__popout-in { display: none; }
.mchat__popout[aria-pressed="true"] .mchat__popout-out { display: none; }
.mchat__popout[aria-pressed="true"] .mchat__popout-in { display: inline-flex; }
.bz-chat-top .mchat--concierge .mchat__head .mchat__popout { display: none; }
/* HQ's header: the title takes the slack, so its buttons sit together on the right whichever of them are shown. */
.mchat--concierge .mchat__head { justify-content: flex-start; gap: 0.25rem; }
.mchat--concierge .mchat__head > * { margin-left: 0; }
.mchat--concierge .mchat__title { margin-right: auto; }
.mchat--concierge .mchat__head .mchat__icon,
.mchat--concierge .mchat__head .mchat__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
}
.mchat--concierge .mchat__head [hidden] { display: none; }
.mchat.mchat--center,
.bz-chat-top .mchat {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(40rem, calc(100vw - 2rem));
  max-width: none;
  height: min(32rem, calc(100vh - 8rem));
  max-height: none;
  z-index: 80;
  border: 0;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 35%), 0 24px 60px rgb(0 0 0 / 30%);
}
.mchat.mchat--center .mchat__head,
.bz-chat-top .mchat .mchat__head { height: 3.25rem; padding: 0 0.75rem 0 1.1rem; font-size: 1.05rem; }
.mchat.mchat--center .mchat__form,
.bz-chat-top .mchat .mchat__form { padding: 0.85rem 1rem 1rem; }
.mchat.mchat--center .mchat__form input[type="text"],
.bz-chat-top .mchat .mchat__form input[type="text"] { height: 3rem; padding: 0 1rem; font-size: 1rem; }
.mchat__attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--c-radius);
  color: var(--c-muted-foreground);
  cursor: pointer;
}
.mchat__attach:hover, .mchat__attach.is-set { background: var(--c-accent); color: var(--c-foreground); }
.mchat__attach:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-ring) 40%, transparent); }
.mchat__attach svg { width: 1.1rem; height: 1.1rem; }