/* 2.91.0: the case in the Service center (sc-case.js): one column, one scroll. The header (title, quick edits,
   actions), the conversation (the only scroller), the reply box pinned under it; the customer slides over from the end
   side (left in Hebrew), or is a 320px column at the end when the case is 1150px wide or more. Logical sides (Hebrew
   mirrors), colours from the tokens (light and dark). */

/* the case fills the pane; the pane itself does not scroll (other panes, a risk call's or a supplier's, as they were) */
.svc .svc-pane:has(> .scx) { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.svc .svc-pane > .scx { flex: 1 1 auto; min-height: 0; }
.scx.ibx-item { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; padding: 0; border: 0; box-shadow: none; background: transparent; position: relative; }
.scx.ibx-item > * { margin-inline: 0; }
.scx .ibx-item-top { flex: none; padding: 10px 16px 0; }
.scx .ibx-item-top > :not(.scx-head) { margin: 0 0 8px; }
.scx .ibx-item-top .note-box { padding: 5px 10px; margin: 0; }
.scx .ibx-item-top > .ibx-presence:empty, .scx .ibx-item-top > .ibx-live-call:empty { display: none; }

/* the header: line 1 the subject in full and the #ref */
.scx-head { display: grid; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.scx-h1 { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.scx-h1 .ibx-ico { flex: none; width: 30px; height: 30px; margin-top: 1px; }
.scx-h1 .ibx-ico svg { width: 16px; height: 16px; }
.scx-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.scx-ref { flex: none; border: 0; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: .82rem; font-variant-numeric: tabular-nums; padding: 3px 9px; min-height: 0; border-radius: 999px; cursor: copy; margin-top: 3px; }
.scx-ref:hover { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.scx-back { display: none; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); text-decoration: none; }
.scx-back:hover { background: var(--sunk); color: var(--ink); }
[dir="rtl"] .scx-back .ico, [dir="rtl"] .scx-back svg { transform: scaleX(-1); }
.scx.scx-full .scx-back { display: inline-flex; }

/* line 2: the quick edits, one row (it wraps on a narrow case) */
.scx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.scx-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; box-sizing: border-box; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: .82rem; font-weight: 500; max-width: 100%; min-width: 0; white-space: nowrap; }
.scx-chip.bad { color: var(--fault); background: var(--fault-soft); border-color: color-mix(in srgb, var(--fault) 40%, transparent); }
.scx-chip.warn { background: color-mix(in srgb, var(--wait) 14%, var(--panel)); border-color: color-mix(in srgb, var(--wait) 45%, transparent); }
.scx-chip > bdi { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.scx-sel { padding-inline: 4px 2px; cursor: pointer; }
.scx-sel:hover, .scx-sel:focus-within { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.scx .scx-sel select { width: auto; max-width: 130px; min-width: 0; height: 26px; border: 0; background-color: transparent; padding: 0 4px; font-size: .82rem; font-weight: 500; color: inherit; box-shadow: none; }
.scx .scx-sel .htl-av.sm { margin-inline-start: 1px; }
.scx-pri.p-urgent { color: var(--fault); border-color: color-mix(in srgb, var(--fault) 40%, transparent); }
.scx-pri.p-high { border-color: color-mix(in srgb, var(--wait) 55%, transparent); }
.scx .scx-status { --st: #64748B; width: auto; max-width: 150px; height: 28px; padding: 0 26px 0 12px; border-radius: 999px; border: 1px solid var(--st); background-color: var(--st); color: #fff; font-size: .84rem; font-weight: 600; cursor: pointer; }
[dir="rtl"] .scx .scx-status { padding: 0 12px 0 26px; }
.scx .scx-status option { color: var(--ink); background: var(--panel); }
.scx-state { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: .84rem; white-space: nowrap; }
.scx-state.closed { background: var(--sunk); color: var(--muted); }
.scx-wait { display: inline-flex; min-width: 0; }
.scx-wait .ibx-wait-btn { height: 28px; min-height: 0; border-radius: 999px; padding: 0 6px 0 2px; }
.scx-wait.late .ibx-wait { color: var(--fault); background: var(--fault-soft); border-color: color-mix(in srgb, var(--fault) 40%, transparent); font-weight: 600; }
.scx-cust { cursor: pointer; padding-inline: 3px 10px; max-width: 240px; }
.scx-cust:hover { border-color: var(--accent); }
.scx-cust[aria-expanded="true"] { background: var(--accent-soft); border-color: transparent; }
.scx-go { font-size: 1.05rem; line-height: 1; color: var(--muted); }
[dir="rtl"] .scx-go { transform: scaleX(-1); }
.scx-open-ticket { cursor: pointer; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); border-style: dashed; }
.scx-open-ticket:hover { background: var(--accent-soft); }

/* line 3: the actions, icon and word (34px) */
.scx-acts { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
.scx-act { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 0; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: .86rem; font-weight: 500; white-space: nowrap; }
.scx-act:hover { background: var(--sunk); }
.scx-act svg { flex: none; }
.scx-act.scx-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.scx-act.scx-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.scx-act.scx-ok { color: var(--ok, #15803D); border-color: color-mix(in srgb, var(--ok, #15803D) 40%, var(--line)); }
.scx-act.scx-more { padding: 0 8px; }
.scx-gap { flex: 1 1 0; min-width: 0; }
.scx-pick { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); min-width: 0; flex: 0 1 auto; }
.scx .scx-pick select { width: auto; min-width: 0; max-width: 210px; height: 30px; padding: 0 6px; font-size: .82rem; border-radius: 8px; }

/* the body: the conversation (and the customer's column when wide) */
.scx-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.scx-conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.scx .svc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 12px 16px 8px; }
.scx .ibx-tl-slot, .scx .ibx-tl, .scx .ibx-tl-scroll { max-height: none; overflow: visible; display: block; border: 0; background: none; padding: 0; }
.scx .ibx-tl-slot[hidden] { display: none; }
.scx .ibx-tl .tl-item { max-width: min(82%, 720px); }
.scx .ibx-tl .tl-item.tl-note, .scx .ibx-tl .tl-item.tl-call, .scx .ibx-tl .tl-item.tl-event { max-width: none; }
.scx-sum { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.scx-sum[hidden] { display: none; }
.scx-sum > summary { display: flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: .86rem; list-style: none; }
.scx-sum > summary::-webkit-details-marker { display: none; }
.scx-sum > summary::after { content: '▾'; margin-inline-start: auto; color: var(--muted); transition: transform .15s; }
.scx-sum:not([open]) > summary::after { transform: rotate(-90deg); }
[dir="rtl"] .scx-sum:not([open]) > summary::after { transform: rotate(90deg); }
.scx-sum > summary .small { font-weight: 400; }
.scx-sum > .htn-points { padding: 0 14px 10px 32px; margin: 0; }
[dir="rtl"] .scx-sum > .htn-points { padding: 0 32px 10px 14px; }
.scx-hist[hidden] { display: none; }

/* the reply box, pinned under the conversation: one line until it is used, then up to 40% of the case */
.scx .ibx-compose-slot { flex: none; padding: 0 16px 10px; }
.scx .ibx-compose-slot .ibx-compose { margin: 0; gap: 4px; padding: 8px 10px; border-radius: 12px; }
.scx .ibx-compose-slot .ibx-compose textarea { min-height: 44px; max-height: max(60px, calc(40vh - 150px)); overflow-y: auto !important; }
/* expanded, it stays short: one row of tabs and tools (the words on hover), the text, one row to send */
.scx .ibx-compose-head { flex-wrap: nowrap; gap: 6px; }
.scx .ibx-compose-head > .ibx-hint { flex: 1 1 0; }
.scx .ibx-compose-head .seg button, .scx .ibx-compose-head .ibx-call-btn { min-height: 28px; padding-block: 2px; }
.scx .ibx-compose-head .ibx-rt-word { display: none; }
.scx .ibx-compose-foot { row-gap: 4px; }
.scx .ibx-compose .ws-grip { margin: -4px 0 0; }
@container (max-width: 760px) {
  .scx .ibx-compose-foot .ibx-then > .muted:first-child, .scx .ibx-compose-head > .ibx-hint { display: none; }
  .scx .ibx-compose-head .ibx-call-btn { font-size: 0; gap: 0; padding-inline: 8px; }
  .scx .scx-after .scx-after-w { display: none; }
  .scx .scx-after { padding-inline: 9px; }
}
.scx-min-note { display: none; }
.scx .ibx-compose.scx-min { flex-direction: row; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; }
[dir="rtl"] .scx .ibx-compose.scx-min { padding: 5px 10px 5px 6px; }
.scx .ibx-compose.scx-min > * { display: none; }
.scx .ibx-compose.scx-min > textarea { display: block; flex: 1 1 auto; order: 1; height: 34px !important; min-height: 34px; max-height: 34px; resize: none; border-color: transparent; background: transparent; padding-block: 6px; overflow: hidden !important; box-shadow: none; }
.scx .ibx-compose.scx-min > .scx-min-note { display: inline-flex; order: 2; flex: none; }
.scx-after { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--line); background: none; border-radius: 999px; padding: 2px 10px; min-height: 0; height: 28px; color: var(--muted); white-space: nowrap; }
.scx-after[hidden] { display: none; }
.scx-after:hover, .scx-after[aria-expanded="true"] { color: var(--ink); border-style: solid; }
.scx-after.changed { color: var(--accent); border-color: var(--accent); }
.scx .svc-reply-extra { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 2px 0; }
.scx .svc-reply-extra[hidden] { display: none; }
.scx .svc-sendas { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.scx .svc-sendas .htn-pill { margin: 0; }
.scx .svc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.scx .htn-chip-sel { white-space: nowrap; }
.scx .htn-sig[hidden] { display: none; }
.scx .htn-slash { position: relative; z-index: 5; max-height: 240px; overflow-y: auto; }

/* the customer: over the case from the end side (left in Hebrew) */
.scx-side { position: absolute; z-index: 20; top: 0; bottom: 0; inset-inline-end: 0; width: min(360px, 100%); box-sizing: border-box; background: var(--panel); border-inline-start: 1px solid var(--line); box-shadow: 0 10px 34px rgb(15 23 42 / .18); overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: thin; visibility: hidden; transform: translateX(105%); transition: transform .18s ease, visibility 0s linear .18s; }
[dir="rtl"] .scx-side { transform: translateX(-105%); }
.scx.scx-cust-open .scx-side, [dir="rtl"] .scx.scx-cust-open .scx-side { visibility: visible; transform: none; transition: transform .18s ease; overflow-y: auto; }
.scx-scrim { display: none; position: absolute; inset: 0; z-index: 19; background: rgb(15 23 42 / .18); }
.scx.scx-cust-open .scx-scrim { display: block; }
.scx-side-body { display: grid; gap: 10px; padding: 12px 14px 16px; align-content: start; }
.scx-side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scx-side-top .htn-cap { margin: 0; }
.scx-x { border: 0; background: none; padding: 4px; min-height: 0; border-radius: 50%; color: var(--muted); }
.scx-x:hover { background: var(--sunk); color: var(--ink); }
.scx-side .ibx-mem { border: 0; padding: 6px 0; background: none; margin: 0; }
.scx-side-body > .ibx-mem + .ibx-mem, .scx-side-body > section + section { border-top: 1px solid var(--line); }
.scx-side .htn-sec { border: 1px solid var(--line); border-radius: var(--r-md); }
.scx-side .grid2 { grid-template-columns: minmax(0, 1fr); }
.scx-side input, .scx-side select, .scx-side textarea { max-width: 100%; }
.scx-followers { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .scx-side, .scx.scx-cust-open .scx-side { transition: none; } }

/* a wide case (1920): the same column, and the customer as a 320px column at the end */
@container (min-width: 1150px) {
  .scx-body { grid-template-columns: minmax(0, 1fr) 320px; }
  .scx .scx-side, [dir="rtl"] .scx .scx-side { position: static; visibility: visible; transform: none; transition: none; box-shadow: none; width: auto; min-height: 0; overflow-y: auto; background: var(--sunk); }
  .scx-scrim, .scx.scx-cust-open .scx-scrim { display: none; }
  .scx.scx-ctx-off .scx-body { grid-template-columns: minmax(0, 1fr); }
  .scx.scx-ctx-off .scx-side { display: none; }
  .scx .svc-scroll { padding-inline: 24px; }
  .scx .ibx-compose-slot { padding-inline: 24px; }
  .scx .ibx-item-top { padding-inline: 24px; }
}

/* a phone-sized screen: the way back to the list */
@media (max-width: 960px) {
  .scx .scx-back { display: inline-flex; }
  .scx .ibx-item-top, .scx .svc-scroll, .scx .ibx-compose-slot { padding-inline: 10px; }
}

/* Compact (2.79.1): tighter still */
.svc-compact .scx .ibx-item-top { padding-top: 6px; }
.svc-compact .scx-head { gap: 6px; padding-bottom: 6px; }
.svc-compact .scx-title { font-size: 1.02rem; }
.svc-compact .scx-chip, .svc-compact .scx .scx-status, .svc-compact .scx-state, .svc-compact .scx-wait .ibx-wait-btn { height: 26px; }
.svc-compact .scx-act { height: 30px; padding: 0 9px; font-size: .82rem; }
.svc-compact .scx .svc-scroll { padding-top: 8px; }
.svc-compact .scx .ibx-tl .tl-item { padding: 6px 12px 7px; margin-bottom: 6px; }