/* TESVX agent UI overlay for LibreDesk v2.8.0 (MOBILE-001 / IOS-014). Paired with tesvx-ui.js.
 * Uses LibreDesk's own theme variables (hsl(var(--primary)) etc.) so light/dark and admin colours keep working.
 * Breakpoints: phone <768 (LibreDesk mobile mode), tablet 768–1199, desktop >=1200. */

:root {
  --abx-tab-h: 50px;                    /* same as the tesvx.com bottom menu */
  --abx-r-s: 4px; --abx-r-m: 8px; --abx-r-l: 12px;   /* site radius tokens (--tesvx-radius-*) */
  --abx-accent: #fdb016;                /* TESVX amber, active menu item */
  --abx-sat: 0px;
  --abx-sab: 0px;                       /* bottom inset forwarded by the /mobile/ shell (iframe sees env()=0) */
  --abx-safe-b: max(env(safe-area-inset-bottom, 0px), var(--abx-sab));
  --abx-brand: #111111;
}
.abx body {
  font-family: Geist, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
.abx .abx-trigger-ic { display: none; }
.abx .abx-logo-dark { display: none; }
.abx.dark .abx-logo-light { display: none; }
.abx.dark .abx-logo-dark { display: block; }

/* ===== All touch devices: no input zoom, firm tap targets, no page rubber-band ===== */
@media (pointer: coarse) {
  .abx input, .abx textarea, .abx select, .abx .ProseMirror { font-size: max(16px, 1em) !important; }
  .abx button, .abx a, .abx [role=button] { touch-action: manipulation; }
  html.abx, .abx body { overscroll-behavior: none; }
}

/* ===== Desktop + tablet: brand mark on the icon rail ===== */
.abx-rail-logo {
  display: flex; align-items: center; justify-content: center;
  height: 44px; margin: 6px 4px 2px; border-radius: 8px;
  border-bottom: 1px solid hsl(var(--sidebar-border, var(--border)));
}
.abx-rail-logo img { width: 26px; height: 26px; object-fit: contain; }
.abx-rail-logo:hover { background: hsl(var(--sidebar-accent, var(--accent))); }

/* Conversation list polish (all sizes): clearer active row and unread weight. */
.abx .abx-list-scroll a.group.bg-accent { box-shadow: inset 3px 0 0 hsl(var(--primary)); }
.abx .abx-list-scroll { scrollbar-width: thin; -webkit-overflow-scrolling: touch; }

/* ===== Tablet 768–1199: keep the list readable, let the thread take the rest ===== */
@media (min-width: 768px) and (max-width: 1199px) {
  .abx .abx-list-panel { min-width: 288px !important; }
  .abx #app > .h-dvh { padding: 4px; }
  /* Placeholder/setup card is min-w-[400px] upstream and overflows narrow panes. */
  .abx .placeholder-container { min-width: 0 !important; }
}
/* Short landscape phones fall into tablet widths; trim chrome so the thread keeps height. */
@media (min-width: 768px) and (max-height: 500px) and (pointer: coarse) {
  .abx #app > .h-dvh { padding: 0 max(env(safe-area-inset-right), 0px) 0 max(env(safe-area-inset-left), 0px); }
  .abx-rail-logo { display: none; }
}

/* ===== Phone <768: full-bleed app, bottom tab bar, drawer ===== */
.abx-tabbar { display: none; }
@media (max-width: 767px) {
  /* Full-bleed like a native app, but every edge respects the safe area so the screen's rounded
   * corners / status bar / home indicator never clip the header or the composer. Height follows the
   * visual viewport so the composer sits right on top of the keyboard. */
  .abx #app > .h-dvh {
    height: var(--abx-vvh, 100dvh) !important;
    padding: max(env(safe-area-inset-top, 0px), var(--abx-sat)) env(safe-area-inset-right, 0px)
             var(--abx-safe-b) env(safe-area-inset-left, 0px);
    background: hsl(var(--background));   /* status-bar / home-indicator strips match the header */
  }
  .abx #app > .h-dvh .bg-background.rounded-lg.overflow-hidden { border-radius: 0; }
  .abx.abx-tabs-on #app > .h-dvh { padding-bottom: calc(var(--abx-tab-h) + var(--abx-safe-b)); }
  .abx.abx-kb #app > .h-dvh { padding-bottom: 0; }

  .abx-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: stretch; justify-content: space-around;
    height: calc(var(--abx-tab-h) + var(--abx-safe-b));
    padding: 0 env(safe-area-inset-right, 0px) var(--abx-safe-b) env(safe-area-inset-left, 0px);
    background: #fff; border-top: .5px solid #e6eaec; box-shadow: 0 -2px 12px rgba(33, 37, 41, .05);
  }
  .abx.dark .abx-tabbar { background: hsl(var(--background)); border-top-color: hsl(var(--border)); }
  /* No slide animation: the bar simply isn't there in a conversation or while typing. Drawers and
   * dialogs cover it with their own overlay, so it no longer drops and bounces back. */
  .abx:not(.abx-tabs-on) .abx-tabbar, .abx.abx-kb .abx-tabbar { display: none; }

  .abx-tab {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: none; padding: 4px 0 3px; color: #6b7480;
    font-family: inherit; font-size: 10.5px; font-weight: 500; line-height: 1.15; cursor: pointer;
  }
  .abx-tab.is-active { color: #212529; font-weight: 700; }
  .abx-tab.is-active .abx-tab-ic svg { fill: var(--abx-accent); stroke: #212529; }
  .abx.dark .abx-tab { color: hsl(var(--muted-foreground)); }
  .abx.dark .abx-tab.is-active { color: hsl(var(--foreground)); }
  .abx-tab:focus-visible { outline: 2px solid var(--abx-accent); outline-offset: -4px; border-radius: var(--abx-r-s); }
  .abx-tab-ic { position: relative; width: 26px; height: 26px; display: grid; place-items: center; }
  .abx-tab-ic svg { width: 24px; height: 24px; }
  .abx-tab-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abx-badge {
    position: absolute; top: -4px; left: 15px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #e02d2d; color: #fff; font-family: inherit; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
    box-shadow: 0 0 0 2px hsl(var(--background));
  }
  .abx-badge.abx-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -1px; left: 18px; }

  .abx .abx-trigger svg { display: none; }
  .abx .abx-trigger .abx-trigger-ic svg { display: block; }
  .abx .abx-trigger-ic { display: grid; place-items: center; }
  .abx .abx-trigger-ic svg { width: 22px; height: 22px; }

  /* Conversation list rows: WhatsApp-like density, larger tap area. */
  .abx .abx-list-scroll a.group { padding-top: 12px; padding-bottom: 12px; }
  .abx .abx-list-scroll a.group:active { background: hsl(var(--accent)); }

  /* Message thread: slightly wider bubbles on phones. */
  .abx .ProseMirror { min-height: 1.5em; }

  /* Connection pill sits under the header instead of covering the title. */
  .abx [role=status][aria-live=polite].fixed.rounded-full { top: 54px; font-size: 12px; padding: 4px 10px; }
  .abx [data-sonner-toaster] { --offset: 12px; }

  /* Admin banners are mirrored into the drawer on phones. */
  .abx .abx-admin-banner { display: none !important; }

  /* Drawer (LibreDesk mobile Sheet). */
  .abx [data-sidebar=sidebar][data-mobile=true] {
    padding-top: max(env(safe-area-inset-top, 0px), var(--abx-sat, 0px));
    padding-bottom: var(--abx-safe-b);
    --sidebar-width: min(19rem, 86vw) !important;
    width: min(19rem, 86vw) !important;
  }
  .abx-drawer-brand {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px;
    border-bottom: 1px solid hsl(var(--sidebar-border, var(--border)));
  }
  .abx-drawer-brand img { height: 22px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
  .abx-drawer-brand span { font-size: 12px; color: hsl(var(--muted-foreground)); letter-spacing: .04em; }
  .abx-drawer-system { padding: 8px 8px 6px; border-top: 1px solid hsl(var(--sidebar-border, var(--border))); }
  .abx-drawer-label { padding: 2px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: hsl(var(--muted-foreground)); }
  .abx-row {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px;
    border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer;
  }
  .abx-row:active { background: hsl(var(--sidebar-accent, var(--accent))); }
  .abx-row-ic { position: relative; flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: hsl(var(--muted)); }
  .abx-row-ic svg { width: 18px; height: 18px; }
  .abx-row-admin .abx-row-ic { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
  .abx-row-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--destructive)); box-shadow: 0 0 0 2px hsl(var(--sidebar-background, var(--background))); }
  .abx-row-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .abx-row-tx b { font-size: 14px; font-weight: 600; }
  .abx-row-tx small { font-size: 12px; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abx-row-go { flex: none; color: hsl(var(--muted-foreground)); }
  .abx-row-go svg { width: 16px; height: 16px; }

  /* Bottom sheets / dialogs respect the home indicator. */
  .abx [role=dialog][data-state=open] { padding-bottom: max(var(--abx-safe-b), 0px); }
}

/* Very narrow phones (iPhone SE 1st gen, 320px; small Android). */
@media (max-width: 359px) {
  :root { --abx-tab-h: 52px; }
  .abx-tab { font-size: 10px; }
  .abx-tab-ic svg { width: 22px; height: 22px; }
}

/* Login screen helper inside the /mobile/ shell. */
.abx-login-help {
  position: fixed; left: 50%; bottom: calc(14px + var(--abx-safe-b)); transform: translateX(-50%); z-index: 30;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground));
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; box-shadow: 0 4px 16px rgb(0 0 0 / .08); cursor: pointer; white-space: nowrap;
}
.abx-login-help svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .abx-tabbar { transition: none; }
}

/* =====================================================================
 * Conversation window (IOS-017, v0.2.0)
 * ===================================================================== */
:root {
  --abx-in-bg: hsl(var(--background));
  --abx-out-bg: hsl(var(--primary) / .09);
  --abx-out-bd: hsl(var(--primary) / .22);
  --abx-note-bg: #fff4cc;
  --abx-note-bd: #f59e0b;
  --abx-note-fg: #92400e;
  --abx-bubble-max: min(65%, 640px);
}
.abx.dark { --abx-out-bg: hsl(var(--primary) / .22); --abx-out-bd: hsl(var(--primary) / .4); --abx-note-bg: #3a2c0b; --abx-note-bd: #d97706; --abx-note-fg: #fcd34d; }
@media (min-width: 768px) and (max-width: 1199px) { :root { --abx-bubble-max: min(74%, 600px); } }
@media (max-width: 767px) { :root { --abx-bubble-max: 84%; } }

/* Visually swapped text (localised times/dates/status) — original node stays for Vue. */
.abx .abx-swap { font-size: 0 !important; }
.abx .abx-swap::after { content: attr(data-abx-text); font-size: 11.5px; }
.abx .bg-primary .abx-swap::after, .abx .abx-swap.font-medium::after { font-size: 13px; }

/* Thread canvas: light tint so white customer bubbles read as bubbles. */
.abx .abx-thread { background: hsl(var(--muted) / .55); }
.abx.dark .abx-thread { background: hsl(var(--background)); }

/* Bubble width + base. Upstream forces md:min-w-[30%] which makes short replies wide. */
/* Wrapper keeps width:100% (upstream sets contain:inline-size, so auto would collapse to 0); the bubble is w-fit inside. */
.abx .abx-msg .md\:w-4\/5 { width: 100% !important; max-width: var(--abx-bubble-max); }
.abx .abx-msg .message-bubble {
  min-width: 0 !important; border-radius: 16px; box-shadow: 0 1px 1px rgb(0 0 0 / .04);
  overflow-wrap: anywhere; word-break: normal; line-height: 1.6;
}
.abx .abx-msg.abx-in .message-bubble { background: var(--abx-in-bg); border-color: hsl(var(--border)); border-top-left-radius: 6px; }
.abx .abx-msg.abx-out .message-bubble { background: var(--abx-out-bg) !important; border-color: var(--abx-out-bd) !important; border-top-right-radius: 6px; }
.abx .abx-msg .native-html { overflow-wrap: anywhere; }

/* Private note: unmistakable — amber fill, stripe, label. */
.abx .abx-msg.abx-note .message-bubble {
  background: var(--abx-note-bg) !important; border: 1px solid color-mix(in srgb, var(--abx-note-bd) 45%, transparent) !important;
  border-left: 4px solid var(--abx-note-bd) !important; border-top-right-radius: 6px;
}
.abx .abx-msg.abx-note .message-bubble::before {
  content: var(--abx-note-label, "内部备注"); display: block; margin: 0 0 4px; font-size: 11.5px; font-weight: 650;
  letter-spacing: .02em; color: var(--abx-note-fg);
}

/* Delivery tick sits inside the last line's corner instead of its own empty row. */
.abx .abx-msg .message-bubble > .self-end.mt-2 { position: absolute; right: 10px; bottom: 5px; margin: 0 !important; transform: scale(.9); transform-origin: right bottom; }
.abx .abx-msg.abx-out .message-bubble, .abx .abx-msg.abx-note .message-bubble { padding-bottom: 20px; padding-right: 14px; }

/* Names, avatars, timestamps: quieter. */
.abx .abx-msg > .mb-1 a, .abx .abx-msg > .mb-1 p { font-size: 12px; }
.abx .abx-msg span.inline-flex.bg-secondary { font-size: 11px; letter-spacing: -.02em; }
.abx .abx-msg > div:last-child span.text-xs { font-size: 11.5px; opacity: .85; }

/* Links inside messages. */
.abx .abx-link { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.abx .abx-prod {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 2px 0; padding: 4px 10px 4px 4px; border-radius: 999px;
  background: hsl(var(--primary) / .08); border: 1px solid hsl(var(--primary) / .2); text-decoration: none; word-break: normal; vertical-align: middle;
}
.abx .abx-prod b { flex: none; padding: 2px 8px; border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: 11px; font-weight: 600; }
.abx .abx-prod span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; font-size: 13px; }

/* Day separators and system events as chips. */
.abx .abx-thread .flex.items-center.gap-3 > .h-px { opacity: .55; }
.abx .abx-thread .flex.items-center.gap-3 > span.text-xs { padding: 2px 10px; border-radius: 999px; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); }
.abx .abx-activity { display: flex; justify-content: center; }
.abx .abx-activity > .text-muted-foreground { display: inline-block; max-width: 92%; padding: 3px 12px; border-radius: 999px; background: hsl(var(--background) / .8); font-size: 12px; }

/* Typing indicator gets words, not just dots. */
.abx .text-muted-foreground:has(> .animate-bounce)::after { content: var(--abx-typing); margin-left: 6px; font-size: 12px; }

/* Header: name + context line, quick actions, compact status. */
.abx .abx-hd-left { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; row-gap: 0; }
.abx .abx-hd-left.abx-has-back { grid-template-columns: auto minmax(0, 1fr); }
.abx .abx-hd-left.abx-has-back > button { grid-row: 1 / span 2; }
.abx .abx-hd-left > span.truncate { font-weight: 600; line-height: 1.25; }
.abx .abx-hd-sub { font-size: 11.5px; line-height: 1.3; color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abx .abx-hd-sub:empty { display: none; }
.abx .abx-hd-sub.is-unassigned { color: #b45309; }
.abx .abx-hd-acts { display: inline-flex; gap: 6px; }
.abx .abx-hd-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 13px; font-weight: 550; white-space: nowrap;
}
.abx .abx-hd-btn svg { width: 16px; height: 16px; }
.abx .abx-hd-btn:hover { background: hsl(var(--accent)); }
.abx .abx-hd-btn:disabled { opacity: .5; cursor: default; }
.abx .abx-take { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.abx .abx-take:hover { background: #d97706; }
.abx .abx-resolve { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .45); }
.abx .abx-chat-head [data-abx-status] { padding: 4px 10px !important; border-radius: 999px; }
.abx .abx-chat-head [data-abx-status=Snoozed] { background: #d97706 !important; }
.abx .abx-chat-head [data-abx-status=Resolved], .abx .abx-chat-head [data-abx-status=Closed] { background: hsl(var(--muted-foreground)) !important; }
@media (max-width: 767px) {
  .abx .abx-chat-head { height: 56px !important; gap: 4px !important; }
  .abx .abx-chat-head > :last-child { gap: 4px !important; }
  .abx .abx-hd-btn { height: 36px; padding: 0 9px; }
  .abx .abx-chat-head [data-abx-status] { padding: 5px 9px !important; }
  .abx .abx-chat-head [data-abx-status] .abx-swap::after, .abx .abx-chat-head [data-abx-status] span { font-size: 12.5px; }
  .abx .abx-contact-btn { display: none !important; }
  .abx .abx-hd-left.abx-tappable { cursor: pointer; border-radius: 8px; }
  .abx .abx-hd-left.abx-tappable:active { background: hsl(var(--accent)); }
  .abx .abx-hd-left.abx-tappable > span.truncate::after { content: " ›"; color: hsl(var(--muted-foreground)); font-weight: 400; }
}
@media (max-width: 419px) {
  .abx .abx-resolve span { display: none; }        /* icon-only on narrow phones */
  .abx .abx-resolve { width: 36px; padding: 0; justify-content: center; }
}
@media (max-width: 359px) {
  .abx .abx-hd-sub { display: none; }
  .abx .abx-take span { display: none; }
  .abx .abx-take { width: 36px; padding: 0; justify-content: center; }
}

/* Composer: quick replies everywhere, strong private-note mode. */
.abx .abx-qr {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; margin-left: 4px; border-radius: 8px; cursor: pointer;
  border: 1px dashed hsl(var(--primary) / .5); background: hsl(var(--primary) / .06); color: hsl(var(--primary)); font-size: 13px; font-weight: 550; white-space: nowrap;
}
.abx .abx-qr svg { width: 15px; height: 15px; }
.abx .abx-stub { display: flex; gap: 8px; align-items: center; }
.abx .abx-stub > button.w-full { flex: 1; min-width: 0; border-radius: 22px; }
.abx .abx-qr-stub { height: 44px; margin: 0; border-radius: 22px; padding: 0 14px; }
@media (max-width: 359px) { .abx .abx-qr-stub span { display: none; } .abx .abx-qr-stub { width: 44px; padding: 0; justify-content: center; } }
.abx .\!bg-private { box-shadow: inset 0 3px 0 var(--abx-note-bd); background: var(--abx-note-bg) !important; }
.abx .\!bg-private::before {
  content: var(--abx-note-label, "内部备注"); display: block; padding: 6px 4px 2px; font-size: 12px; font-weight: 650; color: var(--abx-note-fg);
}
@media (max-width: 767px) {
  .abx .abx-thread .min-h-full { padding-left: 10px; padding-right: 10px; }
  .abx .abx-msg .message-bubble { font-size: 16px; padding-left: 13px; padding-right: 13px; }
  .abx .abx-msg > div[class*="47px"] { padding-left: 40px !important; padding-right: 40px !important; }
  .abx .abx-msg.abx-out > div[class*="47px"] { padding-left: 0 !important; }
  .abx .abx-msg.abx-in > div[class*="47px"] { padding-right: 0 !important; }
  /* Macro picker (Ctrl+M dialog) is a 50vw split view upstream; make it a full-width list. */
  .abx [role=dialog].\!min-w-\[50vw\] { min-width: 0 !important; width: calc(100vw - 16px) !important; max-width: none !important; }
  .abx [role=dialog].\!min-w-\[50vw\] .grid-cols-12 { grid-template-columns: 1fr !important; }
  .abx [role=dialog].\!min-w-\[50vw\] .grid-cols-12 > :not(:first-child) { display: none !important; }
  .abx [role=dialog].\!min-w-\[50vw\] .grid-cols-12 > :first-child { grid-column: 1 / -1 !important; }
  /* Contact sheet: smaller identity block, actions first-class. */
  .abx .abx-contact-sheet .size-20 { width: 56px !important; height: 56px !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* Fullscreen composer is 60% wide upstream; too narrow on tablets. */
  .abx [role=dialog].max-w-\[60\%\] { max-width: 90% !important; }
}

/* =====================================================================
 * v0.3.0 (IOS-018): site-wide look — small radii like the tesvx.com menus — and the inline phone composer
 * ===================================================================== */
.abx .abx-msg .message-bubble { border-radius: var(--abx-r-m); }
.abx .abx-msg.abx-in .message-bubble { border-top-left-radius: var(--abx-r-s); }
.abx .abx-msg.abx-out .message-bubble, .abx .abx-msg.abx-note .message-bubble { border-top-right-radius: var(--abx-r-s); }
.abx .abx-hd-btn, .abx .abx-qr, .abx .abx-plus, .abx-row, .abx-row-ic, .abx-rail-logo, .abx-login-help,
.abx .abx-prod, .abx .abx-prod b,
.abx .abx-thread .flex.items-center.gap-3 > span.text-xs, .abx .abx-activity > .text-muted-foreground { border-radius: var(--abx-r-s) !important; }
.abx .abx-chat-head [data-abx-status] { border-radius: var(--abx-r-s) !important; }
.abx .abx-qr { border-style: solid; background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.abx .abx-qr svg { color: #d58e00; }
.abx .abx-take { background: var(--abx-accent); border-color: var(--abx-accent); color: #212529; }
.abx .abx-take:hover { background: #e9a20f; }
.abx-login-help { box-shadow: 0 2px 8px rgba(33, 37, 41, .16); }
.abx .abx-plus { display: none; }          /* phone-only control; shown in the phone block below */

@media (max-width: 767px) {
  /* ---- Inline composer as a compact chat bar: [+] [ input ] [send] ---- */
  .abx .box:has(> .abx-cmp) {
    margin: 0 !important; padding: 6px 8px !important; border: 0 !important; border-top: 1px solid hsl(var(--border)) !important;
    border-radius: 0 !important; box-shadow: none !important; background: hsl(var(--background));
  }
  .abx .box.\!bg-private:has(> .abx-cmp) { background: var(--abx-note-bg) !important; box-shadow: inset 0 3px 0 var(--abx-note-bd) !important; }
  .abx .box.\!bg-private:has(> .abx-cmp)::before { padding: 0 2px 4px; }
  .abx .abx-cmp { display: flex !important; flex-flow: row wrap; align-items: flex-end; gap: 6px; max-height: none !important; height: auto !important; }
  .abx .abx-cmp > * { order: 3; flex: 1 0 100%; min-width: 0; margin: 0 !important; }
  .abx .abx-cmp > .abx-c-bar { display: contents !important; }
  .abx .abx-cmp .abx-c-mode { order: 1; display: none !important; padding: 2px 0; border: 0 !important; }
  .abx .abx-cmp .abx-c-tools { order: 2; display: none !important; flex: 1 0 100%; gap: 6px !important; padding: 2px 0 4px; flex-wrap: wrap; }
  .abx .abx-cmp.abx-tray-open .abx-c-mode { display: flex !important; }
  .abx .abx-cmp.abx-tray-open .abx-c-tools { display: flex !important; }
  .abx .abx-cmp .abx-c-tools > button { border: 1px solid hsl(var(--border)) !important; border-radius: var(--abx-r-s) !important; min-width: 44px; min-height: 40px !important; }
  .abx .abx-cmp .abx-c-tools .abx-qr { height: 40px; margin: 0; }
  .abx .abx-cmp .abx-c-mode [role=tablist], .abx .abx-cmp .abx-c-mode [role=tab] { border-radius: var(--abx-r-s) !important; }
  .abx .abx-cmp .abx-c-mode [role=tab] { padding-top: 6px !important; padding-bottom: 6px !important; }
  .abx .abx-cmp > .abx-plus { order: 4; flex: 0 0 40px; }
  .abx .abx-cmp > .abx-c-edit { order: 5; flex: 1 1 0; min-width: 0; }
  .abx .abx-cmp .abx-c-send { order: 6; flex: 0 0 auto; }
  .abx .abx-plus {
    width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid hsl(var(--border)); background: hsl(var(--background));
    color: hsl(var(--foreground)); cursor: pointer; padding: 0; touch-action: manipulation;
  }
  .abx .abx-plus svg { width: 20px; height: 20px; transition: transform .15s; }
  .abx .abx-tray-open > .abx-plus { background: var(--abx-accent); border-color: var(--abx-accent); color: #212529; }
  .abx .abx-tray-open > .abx-plus svg { transform: rotate(45deg); }
  .abx .abx-c-edit {
    border: 1px solid hsl(var(--border)); border-radius: var(--abx-r-s); background: hsl(var(--background)); overflow: hidden;
  }
  .abx .abx-c-edit:focus-within { border-color: #212529; }
  .abx .abx-c-edit .editor-wrapper { max-height: 30vh; overflow-y: auto; }
  .abx .abx-c-edit .tiptap, .abx .abx-c-edit .ProseMirror { min-height: 0 !important; padding: 9px 10px; line-height: 1.4; }
  .abx .abx-c-edit .tiptap p.is-editor-empty:first-child::before { content: var(--abx-ph, "输入消息…") !important; }
  .abx .abx-c-send button { height: 40px !important; border-radius: 0 !important; }
  .abx .abx-c-send button:first-child { border-radius: var(--abx-r-s) 0 0 var(--abx-r-s) !important; padding: 0 14px; }
  .abx .abx-c-send button:last-child { border-radius: 0 var(--abx-r-s) var(--abx-r-s) 0 !important; padding: 0 8px; }
  .abx .abx-c-send button:only-child { border-radius: var(--abx-r-s) !important; }
  /* Emoji picker opens above the bar. */
  .abx .abx-cmp .v3-emoji-picker { position: absolute !important; left: 0 !important; right: 0; bottom: 100% !important; margin: 0 auto 6px; max-width: 100%; }

  /* Fullscreen editor (from the tray) fills the visible screen inside the safe area. */
  .abx [role=dialog].max-w-\[60\%\] {
    top: 0 !important; left: 0 !important; transform: none !important; width: 100% !important; max-width: none !important;
    height: var(--abx-vvh, 100dvh) !important; max-height: none !important; border-radius: 0 !important;
    padding-top: max(env(safe-area-inset-top, 0px), var(--abx-sat)) !important; padding-bottom: var(--abx-safe-b) !important;
  }
  .abx.abx-kb [role=dialog].max-w-\[60\%\] { padding-bottom: 0 !important; }
  /* Other sheets/dialogs (contact sheet, drawer, command box) stay inside the safe area too. */
  .abx [role=dialog][data-state=open]:not(.max-w-\[60\%\]) { padding-top: max(env(safe-area-inset-top, 0px), var(--abx-sat)); }
}

/* =====================================================================
 * v0.4.0 (IOS-019): black / white / gray palette. Overrides LibreDesk's theme tokens
 * (html.abx beats its :root) so every upstream green/amber/blue element turns neutral too.
 * ===================================================================== */
html.abx {
  --primary: 0 0% 7%; --primary-foreground: 0 0% 100%;
  --ring: 0 0% 20%;
  --destructive: 0 0% 15%; --destructive-foreground: 0 0% 100%;
  --success: 0 0% 25%; --success-foreground: 0 0% 100%;
  --warning: 0 0% 38%; --warning-foreground: 0 0% 100%;
  --link: 0 0% 7%;
  --private: 0 0% 95%;
  --abx-accent: #111111;
  --abx-out-bg: #ececec; --abx-out-bd: #dadada;
  --abx-note-bg: #f7f7f7; --abx-note-bd: #111111; --abx-note-fg: #3f3f3f;
}
html.abx.dark {
  --primary: 0 0% 95%; --primary-foreground: 0 0% 7%;
  --ring: 0 0% 80%;
  --destructive: 0 0% 88%; --destructive-foreground: 0 0% 7%;
  --success: 0 0% 75%; --success-foreground: 0 0% 7%;
  --warning: 0 0% 65%; --warning-foreground: 0 0% 7%;
  --link: 0 0% 92%;
  --private: 0 0% 14%;
  --background: 0 0% 7%; --foreground: 0 0% 93%; --card: 0 0% 9%; --popover: 0 0% 11%;
  --secondary: 0 0% 12%; --muted: 0 0% 13%; --accent: 0 0% 15%; --border: 0 0% 18%; --input: 0 0% 21%; --canvas: 0 0% 4%;
  --muted-foreground: 0 0% 70%;
  --abx-accent: #f2f2f2;
  --abx-out-bg: #262626; --abx-out-bd: #3a3a3a;
  --abx-note-bg: #161616; --abx-note-bd: #e5e5e5; --abx-note-fg: #cfcfcf;
}
/* Private note: neutral but unmistakable — dashed outline, solid black stripe, label. */
.abx .abx-msg.abx-note .message-bubble { border-style: dashed !important; border-color: #9a9a9a !important; border-left: 4px solid var(--abx-note-bd) !important; }
.abx .box.\!bg-private, .abx .\!bg-private { box-shadow: inset 0 3px 0 var(--abx-note-bd) !important; }
/* Accents that were amber/orange/red. */
.abx .abx-hd-sub.is-unassigned { color: hsl(var(--foreground)); font-weight: 650; }
.abx .abx-take, .abx .abx-tray-open > .abx-plus { background: var(--abx-accent); border-color: var(--abx-accent); color: hsl(var(--primary-foreground)); }
.abx .abx-take:hover { background: #333; }
.abx.dark .abx-take:hover { background: #d4d4d4; }
.abx .abx-qr svg { color: currentColor; }
.abx .abx-chat-head [data-abx-status=Snoozed] { background: #6b6b6b !important; }
.abx .abx-chat-head [data-abx-status=Resolved], .abx .abx-chat-head [data-abx-status=Closed] { background: #a3a3a3 !important; }
.abx .abx-prod b { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.abx .abx-prod { background: hsl(var(--foreground) / .05); border-color: hsl(var(--border)); }
.abx .abx-link { color: hsl(var(--foreground)); }
@media (max-width: 767px) {
  .abx-badge { background: #111; color: #fff; box-shadow: 0 0 0 2px #fff; }
  .abx.dark .abx-badge { background: #f2f2f2; color: #111; box-shadow: 0 0 0 2px hsl(var(--background)); }
  .abx-tab.is-active { color: #111; }
  .abx-tab.is-active .abx-tab-ic svg { fill: #111; stroke: #111; }
  .abx.dark .abx-tab.is-active .abx-tab-ic svg { fill: #f2f2f2; stroke: #f2f2f2; }
  .abx-tab:focus-visible { outline-color: #111; }
  .abx-row-dot { background: #111; }
  .abx-row-admin .abx-row-ic { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
  .abx .abx-c-edit:focus-within { border-color: hsl(var(--foreground)); }
}

/* =====================================================================
 * v0.5.0 (IOS-020): red only where it carries meaning — errors and new messages — and
 * clearer icon states (active / hover / pressed) on a black-white-gray base.
 * ===================================================================== */
html.abx { --destructive: 2 72% 48%; --destructive-foreground: 0 0% 100%; --abx-red: #e02d2d; }
html.abx.dark { --destructive: 2 80% 62%; --destructive-foreground: 0 0% 100%; --abx-red: #f25555; }

/* New-message indicators: tab badges, menu dot, drawer dot, list unread count, jump-to-latest count. */
.abx .abx-badge, .abx.dark .abx-badge { background: var(--abx-red) !important; color: #fff !important; }
.abx .abx-row-dot { background: var(--abx-red); }
.abx a.group .w-5.h-5.bg-primary.rounded-full { background: var(--abx-red); color: #fff; }
.abx button.rounded-full > span.absolute.bg-primary { background: var(--abx-red); color: #fff; }

/* Tab bar icons: outline when idle, light fill + heavier outline when active, press feedback. */
.abx-tab .abx-tab-ic svg { transition: transform .12s ease, stroke-width .12s; }
.abx .abx-tab.is-active .abx-tab-ic svg, .abx.dark .abx-tab.is-active .abx-tab-ic svg {
  fill: hsl(var(--foreground) / .12); stroke: hsl(var(--foreground)); stroke-width: 2.25;
}
.abx-tab:active .abx-tab-ic svg { transform: scale(.88); }
@media (hover: hover) { .abx-tab:hover { color: hsl(var(--foreground)); } }

/* LibreDesk sidebar / rail / drawer icons: muted when idle, full contrast + heavier when active. */
.abx [data-sidebar=menu-button] svg { color: hsl(var(--muted-foreground)); transition: color .12s, transform .12s; }
.abx [data-sidebar=menu-button][data-active=true] { font-weight: 600; }
.abx [data-sidebar=menu-button][data-active=true] svg { color: hsl(var(--foreground)); stroke-width: 2.25; }
.abx [data-sidebar=menu-button]:active svg { transform: scale(.9); }
@media (hover: hover) {
  .abx [data-sidebar=menu-button]:hover svg { color: hsl(var(--foreground)); }
}

/* Overlay buttons: consistent hover / pressed / focus feedback. */
.abx .abx-hd-btn, .abx .abx-qr, .abx .abx-plus, .abx-row, .abx-rail-logo, .abx .abx-trigger {
  transition: background-color .12s, border-color .12s, color .12s, transform .08s;
}
@media (hover: hover) {
  .abx .abx-hd-btn:not(.abx-take):hover, .abx .abx-qr:hover, .abx .abx-plus:hover { background: hsl(var(--accent)); border-color: hsl(var(--foreground) / .35); }
  .abx .abx-take:hover { background: hsl(var(--foreground) / .82); }
  .abx-row:hover { background: hsl(var(--sidebar-accent, var(--accent))); }
}
.abx .abx-hd-btn:active, .abx .abx-qr:active, .abx .abx-plus:active, .abx-row:active { transform: scale(.96); }
.abx .abx-hd-btn:active svg, .abx .abx-qr:active svg, .abx .abx-plus:active svg { transform: scale(.9); }
.abx .abx-hd-btn:focus-visible, .abx .abx-qr:focus-visible, .abx .abx-plus:focus-visible, .abx-row:focus-visible {
  outline: 2px solid hsl(var(--foreground)); outline-offset: 2px;
}
.abx .abx-resolve svg { stroke-width: 2.5; }