/* static/css/conv_dock.css
 * ------------------------------------------------------------------
 * Messenger drawer program. Two things live in this file, both gated
 * behind `conv.inbox` (loaded from templates/base.html under a single
 * `{% if conv.inbox %}` guard, mirroring static/css/ranger.css's own
 * "exactly one <link>, never a per-surface partial" discipline -- see
 * that file's header comment):
 *
 *   1. #ag-conv-dock's OWN inner styling -- segment bar, presence dot,
 *      recency/unread, Requests-lane accept/decline actions, inquiry
 *      context chip. MOVED here verbatim from templates/social/
 *      chat_search_page.html's own nonce'd inline <style> block, which
 *      used to be the ONLY place #ag-conv-dock was ever mounted. It no
 *      longer is: the drawer (section 2 below, templates/social/
 *      _conv_drawer.html) mounts the SAME container id, reusing
 *      static/js/conversations/{inbox,thread}.js entirely unmodified in
 *      spirit (see those files' own header comments on the hardcoded
 *      `getElementById("ag-conv-dock")` mount contract). Two surfaces
 *      that mount the identical container need the identical CSS -- a
 *      copy-pasted second block here would drift from the page's copy
 *      the moment either one changed, which is exactly the trap this
 *      program's own history documents happening seven separate times.
 *      One rule set, loaded once, consumed by both.
 *
 *   2. The drawer chrome itself (veil/panel/header/back/expand/close) --
 *      new in this program. Modeled on static/css/ranger.css's own
 *      "2. THE STAGE" section (same veil-plus-panel shape, same
 *      [hidden]/open-class toggle, same reduced-motion belt-and-braces)
 *      rather than a new pattern -- see static/js/ranger/stage.js and
 *      static/js/conversations/drawer.js for the matching behavior. The
 *      one real difference: the stage is a CENTERED modal (no direction-
 *      sensitive placement), while this is a right-side-in-LTR panel --
 *      so unlike the stage, this section needs an explicit RTL mirror
 *      for its slide transform (see ".ag-conv-drawer" below);
 *      inset-inline-end alone already places the panel on the correct
 *      edge in both directions, but the horizontal slide-in transform is
 *      a physical-axis property with no logical equivalent, so it gets
 *      one explicit [dir="rtl"] override, matching the existing
 *      convention in static/css/notification_center_v2.css's own
 *      [dir="rtl"] .notif-toast rule.
 *
 * Tokens only, logical properties throughout -- same discipline
 * static/css/ranger.css's own header comment documents (var(--ag-token,
 * fallback) everywhere, inset-inline-start, inset-inline-end,
 * inset-block-start, inset-block-end and margin-inline-* properties
 * throughout) so this mirrors correctly in Arabic RTL with no
 * direction-specific rules beyond the one slide-transform override noted
 * above). This file's own
 * comments never spell out the two-character comment-closing sequence
 * (asterisk immediately followed by slash) inside their own prose, for
 * the same reason ranger.css's header comment gives: a past incident in
 * this repo dropped an entire stylesheet exactly that way.
 * ------------------------------------------------------------------ */

/* ==================================================================
   1. #ag-conv-dock -- shared inner styling (moved verbatim from
      chat_search_page.html; see this file's header comment above)
   ================================================================== */

#ag-conv-dock{
  --ag-chat-primary: var(--ag-color-brand-primary, #2E74B8);
  --ag-chat-primary-hover: var(--ag-color-brand-primary-hover, #2563eb);
  --ag-chat-primary-soft: var(--ag-color-brand-primary-softer, rgba(46, 116, 184, 0.12));
  --ag-chat-ink: var(--ag-color-text-heading, #1E284A);
  --ag-chat-text: var(--ag-color-text-body, #2A2A55);
  --ag-chat-muted: var(--ag-color-text-muted, #6B7491);
  --ag-chat-border: var(--ag-color-border, #D9E1EE);
  --ag-chat-border-subtle: var(--ag-color-border-subtle, rgba(46, 116, 184, 0.12));
  --ag-chat-surface: var(--ag-color-bg-surface, #FFFFFF);
  --ag-chat-surface-alt: var(--ag-color-bg-surface-alt, #F9FAFD);
  --ag-chat-shadow-sm: var(--ag-shadow-md, 0 10px 22px rgba(24, 33, 51, 0.08));
  --ag-chat-focus: var(--ag-shadow-focus, 0 0 0 4px rgba(46, 116, 184, 0.16));
  --ag-chat-error: var(--ag-color-error, #dc2626);
  --ag-chat-success: var(--ag-color-success, #059669);
}

/* Inbox search field -- the row above the segment bar, painted by static/js/
   conversations/inbox.js's renderSearchRow on BOTH mount surfaces (see that
   function's own note on why there is no drawer-only branch). Sized off the
   same tokens as the segment bar below so the two read as one control
   stack; `width:100%` with its OWN box-sizing (stated here rather than
   inherited -- the drawer half of this file declares border-box for the
   panel's subtree, but the docked PAGE's copy of this container is not
   inside that subtree) is what keeps it inside a 420px drawer and a
   full-width page column alike with no per-surface override.

   The type=search reset is deliberate and narrow: WebKit gives a search
   input its own rounded-rect appearance and its own font, neither of which
   matches this stack, so `appearance:none` and `font:inherit` bring it back
   under this file's tokens. The platform clear affordance is NOT reset away
   -- it is load-bearing (inbox.js relies on it firing a plain input event
   to return the unfiltered list). */
#ag-conv-dock .ag-conv-search{
  margin-bottom: var(--ag-space-2, 8px);
}
#ag-conv-dock .ag-conv-search__input{
  width:100%;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--ag-chat-border);
  border-radius: var(--ag-radius-full, 999px);
  padding: var(--ag-space-2, 8px) var(--ag-space-3, 12px);
  font: inherit;
  font-size: var(--ag-font-size-sm, 12px);
  color: var(--ag-chat-text);
  background: var(--ag-chat-surface);
  outline:none;
  transition: var(--ag-transition-all, all 150ms ease);
}
#ag-conv-dock .ag-conv-search__input::placeholder{ color: var(--ag-chat-muted); }
#ag-conv-dock .ag-conv-search__input:focus{
  border-color: var(--ag-chat-primary);
  box-shadow: var(--ag-chat-focus);
}

/* Segment bar (All / Requests / Hosts / Communities) -- Task W3.2, no
   pre-existing widget equivalent to reuse (the floating popup's own
   inbox has never had segments). Pill-shaped segmented control, mirroring
   the approved mockup's proportions (scratchpad/messenger-audit-site/
   mockups/inbox.html's .seg/.seg button rules) but built entirely from
   this app's own design tokens -- no hex/hardcoded colors are ported from
   that mockup. */
#ag-conv-dock .ag-conv-segbar{
  display:flex;
  gap: var(--ag-space-1, 4px);
  background: var(--ag-chat-surface-alt);
  padding: var(--ag-space-1, 4px);
  border-radius: var(--ag-radius-full, 999px);
  margin-bottom: var(--ag-space-2, 8px);
}
#ag-conv-dock .ag-conv-segbar__btn{
  flex:1;
  border:0;
  background:none;
  padding: var(--ag-space-2, 8px);
  border-radius: var(--ag-radius-full, 999px);
  font: inherit;
  font-size: var(--ag-font-size-xs, 11px);
  font-weight: var(--ag-font-weight-medium, 500);
  color: var(--ag-chat-muted);
  cursor:pointer;
  transition: var(--ag-transition-colors, background-color 150ms ease, color 150ms ease);
}
#ag-conv-dock .ag-conv-segbar__btn:hover{ color: var(--ag-chat-ink); }
#ag-conv-dock .ag-conv-segbar__btn:focus-visible{ outline:none; box-shadow: var(--ag-chat-focus); }
#ag-conv-dock .ag-conv-segbar__btn--active{
  background: var(--ag-chat-surface);
  color: var(--ag-chat-primary);
  box-shadow: var(--ag-chat-shadow-sm);
  font-weight: var(--ag-font-weight-bold, 700);
}
#ag-conv-dock .ag-conv-segbar__count{
  display:inline-block;
  min-width:16px;
  padding: 0 5px;
  margin-inline-start: var(--ag-space-1, 4px);
  border-radius: var(--ag-radius-full, 999px);
  background: var(--ag-chat-error);
  color: var(--ag-color-text-on-primary, #fff);
  font-size: 10px;
  font-weight: var(--ag-font-weight-bold, 700);
  line-height:16px;
}

/* Presence dot, anchored to the row avatar. Two states only, per the
   Task 4.6 `presence.update` payload (`online:bool`) -- no "away" tier. */
#ag-conv-dock .ag-convo__ava{ position:relative; }
#ag-conv-dock .ag-convo__presence{
  position:absolute;
  inset-block-end:0;
  inset-inline-end:0;
  width:11px;
  height:11px;
  border-radius: var(--ag-radius-full, 999px);
  background: var(--ag-chat-border);
  box-shadow: 0 0 0 2px var(--ag-chat-surface);
}
#ag-conv-dock .ag-convo__presence--online{ background: var(--ag-chat-success); }

/* Recency time + unread badge, stacked at the row's trailing edge. */
#ag-conv-dock .ag-convo__side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: var(--ag-space-1, 4px);
  flex-shrink:0;
}
#ag-conv-dock .ag-convo__time{
  font-size: var(--ag-font-size-xs, 11px);
  color: var(--ag-chat-muted);
  white-space:nowrap;
}

/* Task W3.3: Requests-lane Accept/Decline actions. `.ag-convo--pending`
   turns on flex-wrap on the existing `.ag-convo` row (display:flex, no
   wrap by default -- see that rule above) so `.ag-conv-req-actions`
   (flex-basis:100%) drops onto its own line under the avatar/name/
   snippet/time content instead of being squeezed onto the same line as
   them -- the shared row markup itself (renderConvoRow, render.js) is
   untouched. Tokens only, matching the segment bar's own rules above --
   no hex/hardcoded colors ported from the mockup (scratchpad/messenger-
   audit-site/mockups/inbox.html), which only prescribes the BEHAVIOR
   ("Accept to connect, decline to block -- no dead-end disabled button"),
   not markup. */
#ag-conv-dock .ag-convo--pending{ flex-wrap:wrap; }
#ag-conv-dock .ag-conv-req-actions{
  flex-basis:100%;
  display:flex;
  align-items:center;
  gap: var(--ag-space-2, 8px);
  margin-block-start: var(--ag-space-2, 8px);
  padding-inline-start: calc(var(--ag-avatar-size-md, 40px) + var(--ag-space-2, 8px));
}
#ag-conv-dock .ag-conv-req-btn{
  border:1px solid var(--ag-chat-border);
  background: var(--ag-chat-surface);
  color: var(--ag-chat-ink);
  border-radius: var(--ag-radius-full, 999px);
  padding: var(--ag-space-1, 4px) var(--ag-space-3, 12px);
  font: inherit;
  font-size: var(--ag-font-size-xs, 11px);
  font-weight: var(--ag-font-weight-bold, 700);
  cursor:pointer;
  transition: var(--ag-transition-colors, background-color 150ms ease, color 150ms ease, opacity 150ms ease);
}
#ag-conv-dock .ag-conv-req-btn:disabled{ opacity:.55; cursor:default; }
#ag-conv-dock .ag-conv-req-btn:focus-visible{ outline:none; box-shadow: var(--ag-chat-focus); }
#ag-conv-dock .ag-conv-req-btn--accept{
  background: var(--ag-chat-primary);
  border-color: var(--ag-chat-primary);
  color: var(--ag-color-text-on-primary, #fff);
}
#ag-conv-dock .ag-conv-req-btn--accept:hover:not(:disabled){
  background: var(--ag-chat-primary-hover);
  border-color: var(--ag-chat-primary-hover);
}
#ag-conv-dock .ag-conv-req-btn--reject:hover:not(:disabled){ background: var(--ag-chat-surface-alt); }
#ag-conv-dock .ag-conv-req-error{
  color: var(--ag-chat-error);
  font-size: var(--ag-font-size-xs, 11px);
}
/* Neutral, non-interactive state the message-request SENDER (initiator)
   sees instead of Accept/Decline -- only the recipient can respond (the v2
   API's per-item can_respond). Muted italic label, no button affordance. */
#ag-conv-dock .ag-conv-req-waiting{
  color: var(--ag-chat-muted);
  font-size: var(--ag-font-size-xs, 11px);
  font-style: italic;
}

/* Task W3.4: inquiry-context chip -- thumbnail + title + optional dates,
   rendered by render.js's renderConvoRow (item.context, from apps.social.
   views._serialize_inquiry_context) under the preview line inside
   .ag-convo__meta -- e.g. "About your booking · Apr 4-6" for a thread that
   started from a listing inquiry. Pill shape/spacing mirrors the approved
   mockup's .chip-ctx (scratchpad/messenger-audit-site/mockups/inbox.html)
   -- soft-primary pill, xs text, 4px top margin -- but reuses this block's
   OWN --ag-chat-primary/-soft custom properties (declared above for the
   segment bar) rather than any hex from that mockup, and swaps its
   decorative emoji glyph for a real thumbnail: render.js only ever emits
   the <img> when context.thumb passes the safeAttachmentSrc/isSafeMediaUrl
   guard, so an unsafe/missing thumb renders the label alone, no broken
   image. */
#ag-conv-dock .ag-convo__ctx{
  display:inline-flex;
  align-items:center;
  gap: var(--ag-space-1, 4px);
  max-width:100%;
  margin-block-start: var(--ag-space-1, 4px);
  padding: 2px var(--ag-space-2, 8px);
  border-radius: var(--ag-radius-full, 999px);
  background: var(--ag-chat-primary-soft);
}
#ag-conv-dock .ag-convo__ctx-thumb{
  width:14px;
  height:14px;
  flex-shrink:0;
  border-radius: var(--ag-radius-sm, 6px);
  object-fit:cover;
}
#ag-conv-dock .ag-convo__ctx-label{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size: var(--ag-font-size-xs, 11px);
  font-weight: var(--ag-font-weight-medium, 500);
  color: var(--ag-chat-primary);
}

/* ==================================================================
   2. THE DRAWER -- right-side (LTR) overlay panel over the current page.
      Markup: templates/social/_conv_drawer.html. Behavior: static/js/
      conversations/drawer.js (that file's own header comment carries the
      open/close/focus-trap/Escape contract, mirrored from static/js/
      ranger/stage.js -- see this file's own header note above on the one
      place the two shapes genuinely differ: a side slide vs. a centered
      scale/fade).
   ================================================================== */

.ag-conv-drawer-veil,
.ag-conv-drawer-veil *{ box-sizing:border-box; }

#ag-conv-drawer-veil{
  position: fixed;
  inset: 0;
  z-index: var(--ag-z-modal, 200);
  background: var(--ag-color-bg-overlay, rgba(15, 23, 42, 0.5));
  opacity: 0;
  pointer-events: none;
  transition: var(--ag-transition-opacity, opacity 200ms ease);
}
/* Belt-and-braces, matching static/css/ranger.css's own #ag-stage-veil[hidden]
   note: [hidden] already wins on specificity, stated explicitly anyway. */
#ag-conv-drawer-veil[hidden]{ display: none; }
#ag-conv-drawer-veil.ag-conv-drawer-veil--open{
  opacity: 1;
  pointer-events: auto;
}

#ag-conv-drawer{
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--ag-color-bg-surface, #FFFFFF);
  box-shadow: var(--ag-shadow-2xl, 0 30px 80px rgba(2, 8, 20, 0.35));
  font: var(--ag-font-size-base, 13px)/var(--ag-line-height-normal, 1.5) var(--ag-font-sans, "Poppins", system-ui, sans-serif);
  color: var(--ag-color-text-body, #2A2A55);
  /* Slide in from the trailing (inline-end) edge. inset-inline-end above
     already puts this on the correct PHYSICAL side in both directions;
     this transform is the one property in this section with no logical
     axis (translateX is always the physical horizontal axis), so it gets
     its own explicit RTL mirror just below -- see this file's header note. */
  transform: translateX(100%);
  transition: var(--ag-transition-transform, transform 240ms ease);
}
[dir="rtl"] #ag-conv-drawer{ transform: translateX(-100%); }
#ag-conv-drawer-veil.ag-conv-drawer-veil--open #ag-conv-drawer{
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce){
  #ag-conv-drawer-veil,
  #ag-conv-drawer{ transition: opacity var(--ag-duration-normal, 150ms) ease; }
  /* Review finding F10: the bare #ag-conv-drawer selector alone is (1,0,0)
     specificity -- lower than the [dir="rtl"] #ag-conv-drawer rule above
     (1,1,0), which therefore always outranks it regardless of source
     order (source order only breaks TIES, not specificity mismatches). An
     explicit [dir="rtl"] copy here matches that rule's specificity exactly,
     so normal source order (this block comes later in the file) correctly
     decides it instead. Without this, closing the drawer in RTL with
     reduced motion active SNAPPED the panel off-screen via transform (no
     transition covers transform here, so the wrong value still applies
     instantly) instead of leaving it in place while only opacity fades. */
  #ag-conv-drawer,
  [dir="rtl"] #ag-conv-drawer,
  #ag-conv-drawer-veil.ag-conv-drawer-veil--open #ag-conv-drawer{ transform: none; }
}

/* Phone widths: a side panel makes no sense at this size -- the drawer
   becomes a full-height, full-width sheet instead (design brief, "On
   phone widths the drawer becomes a full-height sheet"). Matches this
   program's existing mobile breakpoint (static/css/ranger.css's own
   .ag-dock__seg responsive tiers use the same max-width:767.98px cut). */
@media (max-width: 767.98px){
  #ag-conv-drawer{
    inset-inline-start: 0;
    width: auto;
    max-width: none;
  }
}

/* ---- header: back (thread view only) / title / expand+close ---------- */

.ag-conv-drawer__head{
  display: flex;
  align-items: center;
  gap: var(--ag-space-2, 8px);
  padding: var(--ag-space-3, 12px) var(--ag-space-4, 16px);
  border-block-end: 1px solid var(--ag-color-border, #D9E1EE);
  flex-shrink: 0;
}
.ag-conv-drawer__title{
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ag-font-size-lg, 15px);
  font-weight: var(--ag-font-weight-bold, 600);
  color: var(--ag-color-text-heading, #1E284A);
}
.ag-conv-drawer__acts{ display: flex; gap: var(--ag-space-1, 4px); flex-shrink: 0; }

/* Reuses static/css/ranger.css's .ag-iconbtn (a small round icon button,
   already loaded by the same conv.inbox-or-conv.ranger guard that loads
   ranger.css -- see templates/base.html) rather than a second copy of the
   same shape -- the back/expand/close controls below all carry that class
   instead of a bespoke .ag-conv-drawer__btn rule. */
#ag-conv-drawer-back[hidden]{ display: none; }

/* ---- body: the scrollable #ag-conv-dock mount -------------------------- */

#ag-conv-drawer-body{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Review finding F8: scrolling to the end of the message list must not
     chain into a scroll of the page behind the drawer. body{overflow:hidden}
     would reflow the page and violate the overlay-only constraint this
     drawer is already built around (see this file's header note) --
     overscroll-behavior:contain stops the chain at this element's own
     boundary instead.

     This rule covers ONLY the chain out of this scroller. A wheel or
     touch-drag anywhere ELSE over the drawer -- the veil, which is
     position:fixed inset:0 and therefore most of the viewport, or the
     non-scrollable header -- has no scroll container to chain out of and
     went straight to the document; overscroll-behavior cannot see those
     gestures at all. drawer.js's onScrollIntent() handles them, and
     deliberately lets anything inside THIS element through untouched
     precisely because this line already handles it. Its sibling
     setBackgroundInert() covers the focus/pointer half of F8, not the
     scroll half -- inert does not stop scrolling. */
  overscroll-behavior: contain;
  padding: var(--ag-space-3, 12px);
}
/* The drawer's own copy of chat_search_page.html's `style="min-height:60vh"`
   inline sizing hint -- genuinely page-specific (that page wants the mount
   to claim generous vertical space inside an otherwise-tall page column;
   the drawer instead wants it to fill whatever the flex body above already
   gives it) -- see this file's header comment on what stayed behind. */
#ag-conv-drawer-body #ag-conv-dock{ min-height: 100%; }

/* ── The thread view, re-laid-out for a 420px panel ──────────────────────
   conversations.css authors the thread for the FULL-WIDTH page:
   #ag-conv-dock.ag-conv-thread is a flex ROW whose context rail
   (.ag-conv-rail) is a fixed `flex: 0 0 240px` column beside the
   messages. On the page that is right. In this drawer the dock is 396px
   wide, so the rail took 240 of it and left the entire message column
   and composer 156px: bubbles collapsed to a few words per line and the
   Send button truncated to "Se". Measured, not guessed -- rail 240 /
   main 156 inside a 420px drawer at a 1440px viewport.

   The first fix hid the rail outright in the drawer. That solved the
   proportions and took three real controls with it -- Voice call, Video
   call and Mute this thread are the rail's "Quick actions" group, and
   they were the only way to reach any of them from a docked thread.

   So: keep the rail, change its AXIS. The dock becomes a column here and
   the rail becomes a compact horizontal action bar across the top of it,
   not a side column at all. Two properties do that, and both are needed:

     order: -1   because static/js/conversations/thread.js's mount()
                 appends the rail AFTER .ag-conv-thread__main (which owns
                 the composer). In a column, DOM order alone would hang
                 the bar UNDER a composer that must stay pinned to the
                 bottom edge -- the exact objection the previous version
                 of this comment raised against stacking. `order` answers
                 it without touching mount()'s DOM order, which the page
                 layout depends on (there, source order is what puts the
                 rail on the trailing edge in LTR and the leading edge in
                 RTL, with no direction-specific rule).
     flex:0 0 auto  so the bar is exactly as tall as its buttons and every
                 remaining pixel goes to the messages/composer column.

   The buttons keep their `data-rail-action` attributes and stay INSIDE
   the rail element: thread.js binds ONE delegated click listener to the
   rail itself (onRailClick), so relocating them anywhere else in the tree
   -- however tidy the markup looked -- would silently unbind Voice call,
   Video call and Mute. Nothing about this is a JS change; it is the same
   markup, on the other axis.

   Only the bulky parts are hidden: the About card, the shared-media grid,
   and the section headings (a 420px bar has no room for a "QUICK ACTIONS"
   caption above three buttons that already say what they are). Those
   remain the expand control's job -- #ag-conv-drawer-expand promotes the
   thread to the full page in one click, where the rail renders in full.

   Chrome (padding, fill, separator) sits on .ag-conv-rail__actions rather
   than on the rail: with every other section hidden, a rail that carried
   its own padding would leave an empty ~24px band across a thread whose
   actions list happened to be empty. On the actions element instead, no
   actions means no bar at all, and no rule has to detect that case.

   Scoped to [data-dock-host="drawer"] throughout so the full page -- the
   one surface with room for the real rail -- keeps it untouched. */
#ag-conv-dock[data-dock-host="drawer"].ag-conv-thread{
  flex-direction: column;
}
#ag-conv-dock[data-dock-host="drawer"] .ag-conv-rail{
  order: -1;
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
  padding: 0;
  border-inline-start: 0;
  background: none;
}
#ag-conv-dock[data-dock-host="drawer"] .ag-conv-rail__heading,
#ag-conv-dock[data-dock-host="drawer"] .ag-conv-rail__about,
#ag-conv-dock[data-dock-host="drawer"] .ag-conv-rail__media-grid{
  display: none;
}
/* Row, wrapping: `row` follows the writing mode, so Arabic mirrors this
   with no [dir="rtl"] rule of its own; wrap (rather than truncation) is
   what keeps a longer translation readable instead of clipped, at the cost
   of one extra line of height on the narrowest phones. */
#ag-conv-dock[data-dock-host="drawer"] .ag-conv-rail__actions{
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ag-space-1, 4px);
  padding: var(--ag-space-2, 8px);
  border-block-end: 1px solid var(--ag-chat-border-subtle);
  background: var(--ag-chat-surface-alt);
}
#ag-conv-dock[data-dock-host="drawer"] .ag-conv-rail__action{
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--ag-space-1, 4px) var(--ag-space-2, 8px);
  font-size: var(--ag-font-size-xs, 11px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}