/* 2.94.0 (desk, part c): the header rail (Take, Follow up, the pins), the context rail (.scr-rail, 44px at the end
   edge, always there) and the customer's panel in its sections, the strip on the folded reply line. Logical sides
   (Hebrew mirrors), the app's tokens (light and dark). */

/* the header rail */
.htn.scx .scx-act.scr-take { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.htn.scx .scx-act.scr-take svg { color: var(--accent); }
.htn.scx .scx-act .scr-emoji { font-size: 15px; line-height: 1; width: 16px; text-align: center; }
.scr-pin-list { display: grid; gap: 2px; max-height: 50vh; overflow-y: auto; }
.scr-pin-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; }
.scr-pin-row:hover { background: var(--sunk); }
.scr-pin-row input { margin: 0; }

/* the context rail: at the end edge of the case, beside the conversation (and the panel when it is a column) */
.scx-body.scr-has-rail { grid-template-columns: minmax(0, 1fr) 44px; }
.scx-body.scr-has-rail > .scx-conv { grid-column: 1; grid-row: 1; }
.scx-body.scr-has-rail > .scr-rail { grid-column: -2 / -1; grid-row: 1; }
.scx-body.scr-has-rail > .scx-side, .scx-body.scr-has-rail > .scx-scrim { inset-inline-end: 44px; }
@container (min-width: 1150px) {
  .scx-body.scr-has-rail { grid-template-columns: minmax(0, 1fr) 320px 44px; }
  .scx-body.scr-has-rail > .scx-side { grid-column: 2; grid-row: 1; }
  .scx.scx-ctx-off .scx-body.scr-has-rail { grid-template-columns: minmax(0, 1fr) 44px; }
}
.scr-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; min-height: 0; overflow-y: auto; scrollbar-width: none; border-inline-start: 1px solid var(--line); background: var(--panel); z-index: 21; }
.scr-r { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; box-shadow: none; color: var(--muted); flex: none; }
.scr-r:hover { background: var(--sunk); color: var(--ink); }
.scr-r.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.scr-r:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 0; }
.scr-r .scr-dot { display: none; position: absolute; top: 5px; inset-inline-end: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--wait); box-shadow: 0 0 0 2px var(--panel); }
.scr-r.dot .scr-dot { display: block; }

/* the panel, in sections (each folded or open as the user left it) */
.scx-side-body:has(> .scr-sec) { gap: 0; }
.scx-side-body > .scr-sec { border-top: 1px solid var(--line); }
.scx-side-top + .scr-sec { border-top: 0; }
.scr-sec > summary { display: flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; font-weight: 600; font-size: .88rem; list-style: none; border-radius: var(--r-sm); }
.scr-sec > summary::-webkit-details-marker { display: none; }
.scr-sec > summary svg { flex: none; color: var(--muted); }
.scr-sec > summary::after { content: '▾'; margin-inline-start: auto; color: var(--muted); transition: transform .15s; }
.scr-sec:not([open]) > summary::after { transform: rotate(90deg); }
[dir="rtl"] .scr-sec:not([open]) > summary::after { transform: rotate(-90deg); }
.scr-sec > summary:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.scr-sec .scr-dot.on { width: 7px; height: 7px; border-radius: 50%; background: var(--wait); }
.scr-sec-b { display: grid; gap: 8px; padding: 0 0 12px; min-width: 0; }
.scr-sec-b > .ibx-mem, .scr-sec-b > .ibx-mems { border: 0; padding: 0; margin: 0; background: none; }
.scr-sec-b > .ibx-mems { display: grid; gap: 8px; }
.scr-sec-b > .htb-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.scr-sec-b > .htb-bar[hidden] { display: none; }
.scr-empty { display: none; margin: 0; }
.scr-sec-b:not(:has(> :not(.scr-empty):not([hidden]))) > .scr-empty { display: block; }
.scr-hist-btn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }

/* the strip on the folded reply line: the channel, Call (a big target), attach, "/" */
.scx .ibx-compose > .scr-strip { display: none; }
.scx .ibx-compose.scx-min > .scr-strip { display: inline-flex; order: 0; flex: none; align-items: center; gap: 2px; }
.scr-s { display: inline-flex; align-items: center; gap: 4px; height: 30px; min-height: 0; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: none; box-shadow: none; color: var(--muted); font: inherit; font-size: .82rem; white-space: nowrap; text-decoration: none; cursor: pointer; }
.scr-s:hover { background: var(--sunk); color: var(--ink); }
.scr-s svg { flex: none; }
.scr-s.scr-ch { border: 1px solid var(--line); border-radius: 999px; height: 28px; padding: 0 10px; max-width: 160px; }
.scr-s.scr-ch > span { overflow: hidden; text-overflow: ellipsis; }
.scr-s.scr-call { height: 34px; padding: 0 12px; color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.scr-s.scr-call:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.scr-s.scr-slash kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 20px; padding: 0 4px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; font: 600 .78rem/1 ui-monospace, monospace; color: var(--muted); background: var(--panel); }
@container (max-width: 640px) {
  .scr-s.scr-ch > span, .scr-s.scr-call > span { display: none; }
}