/* oms-rdf-messenger.css — the FACTORY Messages sheet (#fxm) over the shared
   messenger look (/css/oms-messenger.css, .omsm-). Messenger redesign,
   owner-approved 24-10-2026. Built by /js/oms-rdf-shell.js.

   The shared file owns what a conversation LOOKS like (feed, bubbles, rows,
   composer, popovers). This file owns only what is specific to the factory:
     1. the sheet's chrome — header order (title, search, channel tabs), lists;
     2. colour by role RELATIVE TO THE FACTORY VIEWER (owner decision 2):
          you        → right, accent            (shared: .omsm-group--me)
          teammates  → left, teal  (factory)    role 'team',  tone 'factory'
          merchant   → left, navy  (team)       role 'other', tone 'team'
        The shared file tints only 'other' + factory/customer, because on the
        merchant's screen the other party is the factory. Here it is the
        merchant, so its navy tint and the teammates' teal are added below.
     3. phones (≤900px): the sheet is full screen, an open thread hides the
        header, every tap target is 44px, the camera button appears.
   Loaded after oms-rd-factory-shell.css (the r5 sheet), so equal-specificity
   #fxm rules here win. No !important, no inline styles, no remote assets. */

/* ── 1. Chrome ─────────────────────────────────────────────────────────── */
#fxm.omsm-root { font-family: var(--omsm-font); color: var(--omsm-ink); }
/* Sizing pass (owner feedback 24-10-2026): the wide sheet and its list column
   take the shared proportions (--omsm-list-w etc. in oms-messenger.css). */
#fxm.wide { width: min(calc(var(--rd-vw, 100vw) - 40px), clamp(1080px, calc(var(--rd-vw, 100vw) * .8), 1560px)); }
#fxm.wide .fxm-list { flex: 0 0 var(--omsm-list-w, 360px); }
#fxm .fxm-head { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--omsm-line); }
#fxm .fxm-hrow { margin: 0; }
#fxm .fxm-search { margin: 0; height: 34px; border-color: var(--omsm-line); background: var(--omsm-sunk); }
#fxm .fxm-tabs { display: flex; gap: 2px; padding: 0; margin: 0 -2px; border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none; }
#fxm .fxm-tabs::-webkit-scrollbar { display: none; }
#fxm .fxm-tab { flex: 0 0 auto; height: 30px; padding: 0 10px; border-radius: 8px; background: none; box-shadow: none; color: var(--omsm-muted); font-size: 12.5px; font-weight: 600; gap: 6px; }
#fxm .fxm-tab:hover { background: var(--omsm-sunk); color: var(--omsm-ink); }
#fxm .fxm-tab.active { background: var(--omsm-accent-soft); color: var(--omsm-accent); box-shadow: none; }
#fxm .fxm-tb { background: var(--omsm-line-2); color: var(--omsm-ink-2); }
#fxm .fxm-tab.active .fxm-tb { background: var(--omsm-accent); color: var(--omsm-accent-ink); }

/* Lists: the shared .omsm-row, with this sheet's hover tools */
#fxm .fxm-bar { padding: 8px 14px; border-bottom: 0; gap: 6px; }
#fxm .fxm-bar .omsm-filt { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#fxm .fxm-bar .omsm-filt::-webkit-scrollbar { display: none; }
#fxm .fxm-markall { border-color: var(--omsm-line); }
/* In the list bar, Mark all read is the icon (its label is the tooltip), so the four filters keep one line. */
#fxm .fxm-list > .fxm-bar .fxm-markall { width: 30px; padding: 0; justify-content: center; flex: none; }
#fxm .fxm-list > .fxm-bar .fxm-markall span { display: none; }
#fxm #fxm-sup-list > .fxm-bar .fxm-markall { width: auto; padding: 0 10px; }
#fxm #fxm-sup-list > .fxm-bar .fxm-markall span { display: inline; }
#fxm .fxm-rows { padding: 2px 0 8px; }
#fxm .omsm-row { min-height: 54px; box-sizing: border-box; }
#fxm .omsm-row .omsm-pill { margin-left: 2px; }
#fxm .omsm-row-tools { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--omsm-surface); box-shadow: var(--omsm-shadow-sm); opacity: 0; pointer-events: none; transition: opacity .12s; }
#fxm .omsm-row:hover .omsm-row-tools, #fxm .omsm-row:focus-within .omsm-row-tools { opacity: 1; pointer-events: auto; }
#fxm .omsm-row-tools .fxm-rbtn { opacity: 1; }
#fxm .fxm-mute.on { color: var(--omsm-ink-2); }
#fxm .fxm-row-star { color: #D9A21B; }
#fxm .fxm-row-star svg { fill: #F5C451; }
#fxm .omsm-row.starred:not(.active) { background: linear-gradient(90deg, #FFFBEB, transparent 60%); }
#fxm .fxm-row--resolved .omsm-row-nm { color: var(--omsm-ink-2); }
#fxm .fxm-empty { color: var(--omsm-muted); }

/* Thread pane */
#fxm .fxm-thread { background: var(--omsm-sunk); }
#fxm .fxm-thead { min-height: 58px; padding: 10px 16px; gap: 10px; border-bottom-color: var(--omsm-line); }
#fxm .fxm-tav-host { display: flex; flex: none; }
#fxm .fxm-tname { font-size: 15px; gap: 8px; }
#fxm .fxm-tsub { font-size: 12.5px; font-weight: 500; }
#fxm .fxm-ctxstrip[hidden] { display: none; }
#fxm .fxm-msgs { display: block; gap: 0; padding: 14px 0 6px; background: var(--omsm-sunk); }
#fxm .fxm-msgs > :first-child { margin-top: 0; }
#fxm .fxm-msgs > .omsm-col { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
#fxm .fxm-msgs > .fxm-skel, #fxm .fxm-msgs > .fxm-empty { padding-left: 18px; padding-right: 18px; }
#fxm .fxm-jump-wrap { position: relative; height: 0; flex: none; }
#fxm .fxm-jump-wrap .omsm-jump { position: absolute; bottom: 10px; }
#fxm .fxm-typing { flex: none; background: var(--omsm-sunk); }
#fxm .fxm-typing:not(:empty) { width: 100%; max-width: var(--omsm-col-max, 680px); margin: 0 auto; padding: 0 18px 2px; box-sizing: border-box; }
#fxm .omsm-cmp-box { position: relative; }

/* ── 2. Colour by role, from the factory's side ─────────────────────────── */
#fxm .omsm-group--team.omsm-group--factory .omsm-bub { background: var(--omsm-factory-bub); border-color: var(--omsm-factory-line); }
#fxm .omsm-group--other.omsm-group--team .omsm-bub { background: #EEF0FA; border-color: #D5D9EE; }
#fxm .omsm-group--other.omsm-group--team .omsm-org { background: #E4E8EF; color: var(--omsm-team); }
#fxm .omsm-group--other.omsm-group--support .omsm-org { background: var(--omsm-accent-soft); color: var(--omsm-accent); }

/* Translation inside a bubble (OMSTranslate). The r5 sheet styles .omstr-* under
   #fxm, which outranks the shared .omsm-bub rules — so the shared treatment is
   restated here at #fxm strength, or the note vanishes on your own blue bubble. */
#fxm .omsm-bub .omstr-note { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--omsm-line-2); color: var(--omsm-muted); font-size: 11.5px; opacity: 1; }
#fxm .omsm-bub .omstr-link { color: var(--omsm-accent); font-weight: 700; text-decoration: none; }
#fxm .omsm-bub .omstr-alt { margin-top: 6px; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--omsm-sunk); color: var(--omsm-muted); font-size: 13px; }
#fxm .omsm-group--me .omsm-bub .omstr-note { border-top-color: rgba(255,255,255,.35); color: rgba(255,255,255,.85); }
#fxm .omsm-group--me .omsm-bub .omstr-link { color: #fff; text-decoration: underline; }
#fxm .omsm-group--me .omsm-bub .omstr-alt { background: rgba(255,255,255,.14); color: rgba(255,255,255,.92); }

/* Saved replies panel (appended to body, so not under #fxm) — its form button */
.omsm-saved .btn.sm { min-height: 32px; }

/* ── 3. Phones ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    #fxm.fxm-thread-open .fxm-head { display: none; }
    #fxm .fxm-head { padding: 10px 12px 8px; }
    #fxm .fxm-hbtn { width: 44px; height: 44px; }
    #fxm .fxm-tab { height: 36px; }
    #fxm .omsm-chip { min-height: 32px; }
    #fxm .fxm-markall { min-width: 36px; height: 36px; }
    #fxm .omsm-row { min-height: 60px; }
    /* Phones have no hover: the tools sit under the time, the text spans both lines. */
    #fxm .omsm-row { grid-template-rows: auto auto; row-gap: 2px; }
    #fxm .omsm-row > .omsm-av { grid-row: 1 / 3; }
    #fxm .omsm-row-main { grid-column: 2; grid-row: 1 / 3; }
    #fxm .omsm-row-rt { grid-column: 3; grid-row: 1; min-height: 0; }
    #fxm .omsm-row-tools { position: static; transform: none; opacity: 1; pointer-events: auto; box-shadow: none; background: none; grid-column: 3; grid-row: 2; justify-content: flex-end; padding: 0; }
    #fxm .omsm-row-pv { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    #fxm .fxm-rbtn { width: 36px; height: 36px; }
    #fxm .fxm-thead { min-height: 52px; padding: 6px 8px; gap: 6px; }
    #fxm .fxm-back { width: 44px; height: 44px; border: 0; }
    #fxm .omsm-ib { width: 44px; height: 44px; }
    #fxm .fxm-openrec { height: 44px; }
    #fxm .fxm-openrec span { display: none; }
    #fxm .fxm-ctxstrip { padding: 7px 12px; gap: 14px; }
    #fxm .fxm-cmp { padding: 6px 10px 10px; }
    #fxm .omsm-cmp-hint { display: none; }
    #fxm .omsm-cmp-tb { width: 44px; height: 44px; }
    #fxm .omsm-cmp-tb--camera { display: grid; }
    #fxm .omsm-cmp-send { height: 44px; min-width: 44px; padding: 0 12px; }
    #fxm .omsm-cmp-send .omsm-send-l { display: none; }
    #fxm .omsm-cmp-kb { display: none; }
    #fxm .omsm-cmp-input, #fxm .omsm-cmp-input:focus { font-size: 16px; }   /* no iOS focus-zoom */
}
@media (max-width: 420px) {
    #fxm .fxm-tsub { display: none; }
}

/* "Ask Flyte" quick-access button in the sheet header (oms-rdf-shell.js): absent
   until the factory Flyte module answers and .fxm-flyte-on lands on #fxm.
   A class, not [hidden] — .iconbtn sets display. */
#fxm .fxm-hbtn.fxm-flytebtn { display: none; }
#fxm.fxm-flyte-on .fxm-hbtn.fxm-flytebtn { display: grid; place-items: center; }
/* With Flyte's button the header row is one 44px button wider than a 390px
   phone: drop the keyboard-shortcuts button there (no hardware keyboard on a
   phone) so close stays on screen. */
@media (max-width: 600px) {
    #fxm.fxm-flyte-on #fxm-kbdbtn { display: none; }
}