/* My Singa customer site (FS 4.4), lifted from the approved design
   docs/next/design/approved/telco-customer.html and scoped under .sg. Tokens come
   from sites/singa/theme.css. Layout is the approved HTML's; change the approved
   page first. */
[data-site="singa"][data-look="customer"] body { background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sg { color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.sg * { box-sizing: border-box; }
.sg .num { font-variant-numeric: tabular-nums; }
.sg button { font-family: inherit; }
.sg h1, .sg h2, .sg h3 { margin: 0; }
.sg p { margin: 0; }
.sg .m.ai b { font-weight: 700; }
.sg .m.auto { background: #f1f1ee; color: var(--ink-2); font-size: 14px; }
.sg .aimeta .floor { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-3); }
.sg .aimeta .floor::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b9a9ad; }
.sg .outcome { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 32px; max-width: 760px; margin: 0 auto; }
.sg .outcome h1 { font-size: 28px; letter-spacing: -.02em; margin-top: 6px; }
.sg .outcome .state { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--pri); background: var(--tint); border-radius: 999px; padding: 3px 12px; }
.sg .outcome .state.floor { color: var(--ink-3); background: var(--line-2); }
.sg .outcome .sms { margin-top: 18px; border: 1px solid var(--tint-line); box-shadow: inset 3px 0 0 var(--pri); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.sg .outcome .sms small { display: block; color: var(--ink-3); margin-top: 6px; }
.sg .outcome .actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.sg .outcome .credit-line { display: grid; grid-template-columns: 1fr auto; padding: 12px 14px; margin-top: 18px; border-radius: 10px; background: #eef6f1; border: 1px solid #d6e9de; font-weight: 600; }
.sg .honesty { max-width: 1200px; margin: 0 auto; padding: 20px 24px 36px; }
.sg header.top{ background: #fff; border-bottom: 1px solid var(--line); }
.sg .top-in{ max-width: 1200px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 44px; padding: 0 24px; }
.sg .brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.sg .brand .mark{ width: 34px; height: 34px; border-radius: 10px; background: var(--pri); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; }
.sg .brand .word{ font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.sg .brand .word span{ color: var(--pri); }
.sg nav.main{ display: flex; gap: 4px; height: 64px; }
.sg nav.main a{ color: var(--ink-2); text-decoration: none; font-weight: 500; padding: 0 14px; display: flex; align-items: center; border-bottom: 2px solid transparent; }
.sg nav.main a.on{ color: var(--pri); font-weight: 600; border-bottom-color: var(--pri); }
.sg .me{ margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sg .me .av{ width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--pri); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.sg .page{ max-width: 1200px; margin: 0 auto; padding: 32px 24px 40px; }
.sg .guide{ display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.sg .gs{ display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-3); font-weight: 600; font-size: 15px; transition: all .35s; }
.sg .gs i{ width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; background: var(--line-2); color: var(--ink-3); transition: all .35s; }
.sg .gs.now{ border-color: var(--pri); color: var(--pri); background: var(--tint); }
.sg .gs.now i{ background: var(--pri); color: #fff; }
.sg .gs.done{ color: var(--ink); }
.sg .gs.done i{ background: var(--ok); color: #fff; }
.sg .gsep{ width: 28px; height: 1px; background: var(--line); }
.sg .grid{ display: grid; grid-template-columns: 1fr 460px; gap: 32px; align-items: stretch; }
.sg .bill{ background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 32px 28px; box-shadow: 0 1px 2px rgba(31,26,28,.04); }
.sg .hi{ font-size: 15px; color: var(--ink-3); }
.sg .hi b{ color: var(--ink); }
.sg .bill h1{ margin: 4px 0 2px; font-size: 30px; letter-spacing: -.02em; font-weight: 700; }
.sg .bill .plan{ display: inline-block; font-size: 13px; font-weight: 600; color: var(--pri); background: var(--tint); border-radius: 999px; padding: 3px 12px; margin-top: 6px; }
.sg .lines{ margin-top: 24px; border-top: 1px solid var(--line); }
.sg .ln{ display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 14px; border-bottom: 1px solid var(--line-2); font-size: 16px; }
.sg .ln .d{ display: block; font-size: 13px; color: var(--ink-3); }
.sg .ln .a{ font-weight: 600; }
.sg .dup{ background: var(--tint); box-shadow: inset 3px 0 0 var(--pri); border-bottom-color: var(--tint-line); }
.sg .dup.first{ border-radius: 10px 10px 0 0; margin-top: 8px; }
.sg .dup.second{ border-radius: 0 0 10px 10px; margin-bottom: 8px; border-bottom: 0; }
.sg .dup .a{ color: var(--pri); font-weight: 700; }
.sg .flag{ margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--pri); background: #fff; border: 1px solid var(--tint-line); padding: 2px 10px; border-radius: 999px; vertical-align: 2px; }
.sg .ln.gst{ font-size: 15px; color: var(--ink-2); border-bottom: 0; }
.sg .total{ display: flex; justify-content: space-between; align-items: baseline; padding: 18px 14px 0; border-top: 1px solid var(--line); }
.sg .total .l{ font-size: 17px; font-weight: 600; }
.sg .total .l small{ display: block; font-size: 13px; color: var(--ink-3); font-weight: 500; }
.sg .total .v{ font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.sg .note{ margin-top: 22px; display: flex; gap: 12px; align-items: center; border-radius: 12px; padding: 14px 16px; font-size: 15px; background: var(--ivory); border: 1px solid var(--line-2); color: var(--ink-2); }
.sg .note.ok{ background: #eef6f1; border-color: #d6e9de; color: var(--ink); }
.sg .note svg{ flex: none; }
.sg .chat{ contain: size; min-height: 640px; background: #fff; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 18px 44px -26px rgba(90,20,38,.35); display: flex; flex-direction: column; overflow: hidden; }
.sg .chat-hd{ border-bottom: 1px solid var(--line); padding: 16px 20px; display: flex; align-items: center; gap: 12px; }
.sg .bot{ width: 42px; height: 42px; border-radius: 12px; background: var(--pri); display: grid; place-items: center; position: relative; flex: none; }
.sg .bot::after{ content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #3fa774; border: 2px solid #fff; }
.sg .chat-hd .n{ font-weight: 700; font-size: 17px; line-height: 1.2; }
.sg .chat-hd .s{ font-size: 13px; color: var(--ink-3); }
.sg .msgs{ flex: 1; padding: 20px 18px 12px; display: flex; flex-direction: column; gap: 12px; overflow: auto; min-height: 0; }
.sg .msgs > *{ flex-shrink: 0; }
.sg .m{ max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.sg .m.ai{ background: #f6f2ef; border-bottom-left-radius: 5px; align-self: flex-start; }
.sg .m.you{ background: var(--pri); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.sg .m.typing{ display: flex; gap: 4px; padding: 14px 15px; }
.sg .m.typing span{ width: 7px; height: 7px; border-radius: 50%; background: #b9a9ad; animation: sg-blink 1s infinite; }
.sg .m.typing span:nth-child(2){ animation-delay: .15s; }
.sg .m.typing span:nth-child(3){ animation-delay: .3s; }
@keyframes sg-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.sg .ccard{ background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-top: 10px; overflow: hidden; font-size: 14px; }
.sg .ccard .r{ padding: 9px 12px; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-2); }
.sg .ccard .r:last-child{ border-bottom: 0; }
.sg .ccard .r.hl{ background: var(--tint); box-shadow: inset 3px 0 0 var(--pri); }
.sg .ccard .r b{ font-weight: 700; }
.sg .ccard .r.hl b{ color: var(--pri); }
.sg .tk{ background: #fff; border: 1px solid var(--tint-line); box-shadow: inset 3px 0 0 var(--pri); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.sg .tk .top{ display: flex; justify-content: space-between; align-items: center; }
.sg .tk .id{ font-weight: 700; color: var(--pri); letter-spacing: .03em; }
.sg .tk .st{ font-size: 12px; font-weight: 600; color: var(--pri); background: var(--tint); border-radius: 999px; padding: 2px 10px; }
.sg .tk .t{ font-weight: 600; margin-top: 2px; }
.sg .tk .s{ font-size: 13px; color: var(--ink-3); }
.sg .handoff{ align-self: stretch; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 14px; padding: 14px 16px; }
.sg .handoff .ht{ font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.sg .handoff .ht b{ color: var(--ink); }
.sg .handoff a{ display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--pri); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; border-radius: 10px; padding: 11px 14px; }
.sg .handoff a:hover{ background: var(--hover); }
.sg .replies{ border-top: 1px solid var(--line); padding: 14px 18px 12px; background: var(--ivory); }
.sg .replies .rl{ font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 10px; }
.sg .rbox{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 40px; }
.sg .chip{ font-size: 15px; font-weight: 600; border-radius: 999px; padding: 9px 16px; cursor: pointer; border: 1.5px solid var(--tint-line); background: #fff; color: var(--pri); }
.sg .chip:hover{ border-color: var(--pri); }
.sg .chip.solid{ background: var(--pri); border-color: var(--pri); color: #fff; }
.sg .chip.solid:hover{ background: var(--hover); border-color: var(--hover); }
.sg .aimeta{ align-self: flex-start; display: flex; align-items: center; gap: 8px; margin: -6px 0 2px 4px; font-size: 11.5px; color: var(--ink-3); }
.sg .aimeta .live{ display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); }
.sg .aimeta .live::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3fa774; }
.sg .aimeta button{ border: 0; background: none; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--pri); cursor: pointer; text-decoration: underline; text-decoration-color: var(--tint-line); text-underline-offset: 3px; }
.sg .raw{ display: none; align-self: stretch; margin: -4px 0 4px; background: #fbf9f7; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 11.5px/1.55 "SF Mono", Menlo, Consolas, monospace; color: var(--ink-2); white-space: pre; overflow-x: auto; }
.sg .raw.open{ display: block; }
.sg .raw .k{ color: var(--pri); }
.sg .raw .h{ font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; }
.sg .live-dot{ display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-weight: 600; }
.sg .live-dot::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3fa774; box-shadow: 0 0 0 3px rgba(63,167,116,.18); }
.sg .truth{ margin-left: auto; font-size: 12.5px; color: var(--ink-3); max-width: 330px; text-align: right; line-height: 1.4; }
.sg .chat-ft{ padding: 0 18px 12px; font-size: 12px; color: var(--ink-3); background: var(--ivory); }
.sg footer{ border-top: 1px solid var(--line); background: #fff; }
.sg footer .in{ max-width: 1200px; margin: 0 auto; padding: 16px 24px 20px; font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 24px; }
.sg footer p{ margin: 0; }

/* The phone's tab bar (round 26) is in the markup on every width; the laptop never sees it. */
.sg .ptabs { display: none; }

/* The tablet fold (768 to 1023 px), after the laptop rules it folds; an earlier copy
   sat above them and lost by order. */
@media (max-width: 1023px) { .sg .grid { grid-template-columns: 1fr; } .sg nav.main { display: none; } .sg .truth { display: none; } }

/* ---- Singa Care console (FS 4.5), lifted from the approved design
   docs/next/design/approved/telco-agent.html and scoped under .sgw. Tokens come
   from the workspace block of sites/singa/theme.css. Layout is the approved
   HTML's; change the approved page first. ---- */
[data-site="singa"][data-look="workspace"] body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sgw { color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.sgw *, .sgw *:before, .sgw *:after { box-sizing: border-box; }
.sgw [hidden] { display: none !important; }
.sgw .num { font-variant-numeric: tabular-nums; }
.sgw .mono { font-family: var(--mono); }
.sgw button { font: inherit; cursor: pointer; }
.sgw h1, .sgw h2, .sgw h3 { margin: 0; }
.sgw a { color: inherit; }
.sgw .card { padding: 0; }
.sgw .signout { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 7px; padding: 5px 10px; font-size: 12px; margin-left: 12px; }
.sgw .qi { text-decoration: none; display: block; }
.sgw .error-line { margin: 10px 24px; }
.sgw .st .side .kind { font-size: 10.5px; padding: 1px 7px; }
.sgw .st .res .pv { color: var(--ok); font-weight: 600; }
.sgw .st .res .fb { color: var(--warn); font-weight: 600; }
.sgw .st .res .ai-badge { font-size: 11px; padding: 2px 8px; margin-top: 4px; }
.sgw .gate .edit { margin: 8px 0; }
.sgw .gate textarea { width: 100%; min-height: 72px; border: 1px solid var(--tint-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; }
.sgw .gate .reason { margin: 8px 0; }
.sgw .gate .reason input { width: 100%; border: 1px solid var(--tint-line); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; }
.sgw .gate .note { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.sgw .st.halted .ic { background: var(--warn); box-shadow: none; }
.sgw .liveai .ai-badge { font-size: 11px; }
.sgw .sms[contenteditable="true"] { outline: 2px solid var(--pri); }
.sgw .donecard.on { display: block; }
.sgw .raw.open { display: block; }
.sgw .log { margin: 0 20px 20px; border-top: 1px solid var(--line); padding-top: 10px; }
.sgw .log h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); }
.sgw .log ol { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.sgw .log li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); padding: 2px 0; }
.sgw .log li time { color: var(--ink-3); }
.sgw .log li b { color: var(--deep); font-weight: 600; }
.sgw .log li.p b { color: var(--human); }
.sgw .policies { padding: 20px 24px 40px; max-width: 980px; }
.sgw .policies .panel { margin-bottom: 14px; }
.sgw .policies .clause { padding: 10px 0; border-top: 1px solid var(--line); }
.sgw .policies .clause.cited { background: var(--tint); margin: 0 -18px; padding: 10px 18px; }
.sgw .policies .clause b { display: block; }
.sgw .policies .clause q { display: block; margin-top: 4px; color: var(--ink-2); font-style: normal; }
@media (max-width: 1279px) { .sgw .desk { grid-template-columns: 1fr; } }
.sgw button{ font-family: inherit; }
.sgw .bar{ background: var(--deep); color: #f4e6ea; }
.sgw .bar-in{ height: 58px; display: flex; align-items: center; gap: 28px; padding: 0 24px; }
.sgw .brand{ display: flex; align-items: center; gap: 10px; }
.sgw .brand .mark{ width: 32px; height: 32px; border-radius: 9px; background: #fff; color: var(--pri); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.sgw .brand .w{ font-weight: 700; font-size: 17px; color: #fff; line-height: 1.1; }
.sgw .brand .w small{ display: block; font-weight: 500; font-size: 11.5px; color: #d9b8c1; letter-spacing: .02em; }
.sgw .kpis{ display: flex; gap: 6px; margin-left: 12px; }
.sgw .kpi{ background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 5px 12px; font-size: 11.5px; color: #d9b8c1; line-height: 1.25; }
.sgw .kpi b{ display: block; color: #fff; font-size: 15px; font-weight: 700; }
.sgw .kpi.risk b{ color: #f3c98b; }
.sgw .agent{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sgw .agent .av{ width: 34px; height: 34px; border-radius: 50%; background: #f4e6ea; color: var(--pri); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.sgw .agent .nm{ color: #fff; font-weight: 600; line-height: 1.2; }
.sgw .agent .sb{ font-size: 11.5px; color: #d9b8c1; }
.sgw .avail{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); border-radius: 999px; padding: 4px 10px; }
.sgw .avail::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5cc995; }
.sgw .demo-id{ font-size: 10.5px; color: #d9b8c1; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.sgw .desk{ display: grid; grid-template-columns: 292px minmax(0, 1fr) 356px; align-items: start; }
.sgw .queue{ background: #fff; border-right: 1px solid var(--line); align-self: stretch; padding: 18px 14px 20px; }
.sgw .qh{ display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 10px; }
.sgw .qh h2{ margin: 0; font-size: 16px; }
.sgw .qh .live{ font-size: 11.5px; color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.sgw .qh .live::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3fa774; box-shadow: 0 0 0 3px rgba(63,167,116,.18); }
.sgw .qi{ display: block; border-radius: 12px; padding: 11px 12px 11px 14px; border: 1px solid transparent; margin-bottom: 4px; cursor: pointer; position: relative; }
.sgw .qi:hover{ background: var(--ivory); }
.sgw .qi.sel{ background: var(--tint); border-color: var(--tint-line); }
.sgw .qi.sel::before{ content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pri); }
.sgw .qi .r1{ display: flex; justify-content: space-between; align-items: baseline; }
.sgw .qi .cust{ font-weight: 600; }
.sgw .qi .amt{ font-weight: 600; font-size: 13px; }
.sgw .qi .what{ font-size: 12.5px; color: var(--ink-2); }
.sgw .qi .r3{ white-space: nowrap; display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.sgw .qi .cid{ font-family: var(--mono); font-size: 10.5px; }
.sgw .qi.closed .sla{ color: var(--ok); }
.sgw .sla{ margin-left: auto; font-weight: 600; color: var(--ok); font-variant-numeric: tabular-nums; }
.sgw .sla.warn{ color: var(--warn); }
.sgw .sla.risk{ color: #a3392f; }
.sgw .hint{ display: inline-block; font-size: 11px; font-weight: 600; color: var(--pri); background: #fff; border: 1px solid var(--tint-line); border-radius: 999px; padding: 0 7px; }
.sgw .qi:not(.sel) .hint{ background: var(--ivory); border-color: var(--line); color: var(--ink-2); }
.sgw .qnote{ font-size: 11.5px; color: var(--ink-3); padding: 8px 6px 0; border-top: 1px solid var(--line-2); margin-top: 10px; }
.sgw .team{ margin: 16px 6px 0; }
.sgw .team .th{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: 8px; }
.sgw .team .tg{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sgw .team .tg div{ background: var(--ivory); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 9px; font-size: 11px; color: var(--ink-3); }
.sgw .team .tg b{ display: block; font-size: 14px; color: var(--ink); }
.sgw .reset{ display: inline-block; margin: 12px 6px 0; font-size: 12.5px; font-weight: 600; color: var(--pri); background: none; border: 0; padding: 0; cursor: pointer; }
.sgw .work{ padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sgw .case{ background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.sgw .case .top{ display: flex; align-items: flex-start; gap: 16px; }
.sgw .crumb{ font-size: 12px; color: var(--ink-3); }
.sgw .crumb b{ font-family: var(--mono); font-weight: 600; color: var(--pri); font-size: 11.5px; }
.sgw .case h1{ margin: 2px 0 0; font-size: 22px; letter-spacing: -.015em; }
.sgw .tags{ display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sgw .tag{ white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: #f4f1ee; color: var(--ink-2); }
.sgw .tag.m{ background: var(--tint); color: var(--pri); }
.sgw .tag.ok{ background: var(--ok-tint); color: var(--ok); }
.sgw .tag.warn{ background: var(--warn-tint); color: var(--warn); }
.sgw .dispute{ margin-left: auto; text-align: right; }
.sgw .dispute .l{ font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 600; }
.sgw .dispute .v{ font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.sgw .said{ margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ivory); border: 1px solid var(--line-2); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.sgw .said .av{ width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--pri); display: grid; place-items: center; font-weight: 700; font-size: 11.5px; }
.sgw .said .q{ font-size: 15px; }
.sgw .said .src{ font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.sgw .run{ background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sgw .run-hd{ padding: 16px 20px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.sgw .run-hd .ico{ width: 42px; height: 42px; border-radius: 12px; background: var(--pri); display: grid; place-items: center; flex: none; }
.sgw .run-hd .t{ font-weight: 700; font-size: 16px; }
.sgw .run-hd .s{ font-size: 12.5px; color: var(--ink-3); }
.sgw .start{ margin-left: auto; background: var(--pri); color: #fff; border: 0; border-radius: 12px; padding: 12px 22px; font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.sgw .start:hover{ background: var(--hover); }
.sgw .start[hidden]{ display: none; }
.sgw .status{ display: flex; align-items: center; gap: 12px; padding: 11px 20px; background: var(--ivory); border-bottom: 1px solid var(--line); font-size: 13px; }
.sgw .status .now{ white-space: nowrap; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.sgw .status .now i{ width: 8px; height: 8px; border-radius: 50%; background: #c9bfc2; }
.sgw .status.running .now i{ background: var(--pri); animation: sgw-pulse 1s infinite; }
.sgw .status.paused .now{ color: var(--pri); }
.sgw .status.paused .now i{ background: var(--pri); }
.sgw .status.done .now{ color: var(--ok); }
.sgw .status.done .now i{ background: var(--ok); }
@keyframes sgw-pulse { 50% { opacity: .3; } }
.sgw .status .ai{ margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.sgw .status .ai b{ color: var(--ink-2); font-weight: 600; }
.sgw .live-ai{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3fa774; margin-right: 6px; vertical-align: 1px; }
.sgw .prog{ height: 3px; background: var(--line-2); }
.sgw .prog i{ display: block; height: 100%; width: 0; background: var(--pri); transition: width .5s; }
.sgw .plan-note{ padding: 10px 20px 0; font-size: 12px; color: var(--ink-3); }
.sgw .feed{ list-style: none; margin: 0; padding: 4px 20px 10px; }
.sgw .ph{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); padding: 14px 0 4px; }
.sgw .st{ display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.sgw .st:last-child{ border-bottom: 0; }
.sgw .st .ic{ width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #ddd4d6; }
.sgw .st .tt{ font-weight: 600; color: var(--ink-3); }
.sgw .st .side{ display: flex; align-items: center; gap: 6px; justify-self: end; }
.sgw .st .tm{ font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.sgw .st .body{ grid-column: 2 / 4; display: none; }
.sgw .st .tool{ font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.sgw .st .res{ font-size: 13.5px; color: var(--ink-2); margin-top: 1px; }
.sgw .st .res b{ color: var(--ink); }
.sgw .st .work-line{ grid-column: 2 / 4; font-size: 12.5px; color: var(--pri); display: none; }
.sgw .st.running .work-line{ display: block; }
.sgw .st.running .ic{ box-shadow: none; position: relative; }
.sgw .st.running .ic::after{ content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid var(--pri); border-right-color: transparent; animation: sgw-spin .7s linear infinite; }
.sgw .st.running .tt{ color: var(--ink); }
@keyframes sgw-spin { to { transform: rotate(360deg); } }
.sgw .st.done .ic{ background: var(--ok); box-shadow: none; }
.sgw .st.done .tt{ color: var(--ink); }
.sgw .st.done .body{ display: block; }
.sgw .st.pending .badge{ opacity: .55; }
.sgw .st.skipped .ic{ background: #c9bfc2; box-shadow: none; }
.sgw .st.skipped .tt{ color: var(--ink-2); }
.sgw .st.skipped .body{ display: block; }
.sgw .badge{ font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 1px 7px; border-radius: 5px; text-transform: uppercase; }
.sgw .badge.rule{ background: #ece7e5; color: #4d4549; }
.sgw .badge.ai{ background: var(--tint); color: var(--pri); box-shadow: inset 0 0 0 1px var(--tint-line); }
.sgw .badge.guard{ background: #2f2a2c; color: #fff; }
.sgw .badge.person{ background: var(--ok-tint); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok-line); }
.sgw .dupes{ display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.sgw .dupes span{ font-family: var(--mono); font-size: 11.5px; background: var(--tint); color: var(--pri); border: 1px solid var(--tint-line); border-radius: 7px; padding: 3px 9px; }
.sgw .liveai{ display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }
.sgw .liveai .l{ display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); }
.sgw .liveai .l::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3fa774; }
.sgw .liveai button{ border: 0; background: none; padding: 0; font-size: 11.5px; font-weight: 600; color: var(--pri); cursor: pointer; text-decoration: underline; text-decoration-color: var(--tint-line); text-underline-offset: 3px; }
.sgw .raw{ display: none; margin-top: 8px; background: #fbf9f7; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 11.5px/1.55 var(--mono); color: var(--ink-2); white-space: pre-wrap; }
.sgw .raw.open{ display: block; }
.sgw .raw .k{ color: var(--pri); }
.sgw .raw .h{ font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 4px; }
.sgw .gate{ grid-column: 1 / 4; display: none; margin: 8px 0 4px; border: 1.5px solid var(--pri); background: var(--tint); border-radius: 14px; padding: 16px 18px; }
.sgw .st.wait .gate{ display: block; }
.sgw .st.wait .ic{ background: var(--pri); box-shadow: 0 0 0 4px rgba(123,30,53,.15); }
.sgw .st.wait .tt{ color: var(--pri); }
.sgw .gate .k{ font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pri); }
.sgw .gate .q{ font-size: 16px; font-weight: 600; margin: 4px 0 4px; color: var(--ink); line-height: 1.4; }
.sgw .gate .why{ font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
.sgw .gate .opts{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sgw .btn{ white-space: nowrap; font-size: 14px; font-weight: 600; border-radius: 10px; padding: 10px 16px; cursor: pointer; border: 1.5px solid var(--tint-line); background: #fff; color: var(--pri); }
.sgw .btn:hover{ border-color: var(--pri); }
.sgw .btn.pri{ background: var(--pri); color: #fff; border-color: var(--pri); }
.sgw .btn.pri:hover{ background: var(--hover); border-color: var(--hover); }
.sgw .gate .aside{ font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.sgw .donecard{ display: none; margin: 4px 20px 20px; border: 1px solid var(--ok-line); background: var(--ok-tint); border-radius: 14px; padding: 16px 18px; }
.sgw .donecard.on{ display: block; }
.sgw .donecard .k{ font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ok); }
.sgw .donecard .t{ font-size: 16px; font-weight: 600; margin: 4px 0 12px; }
.sgw .donecard .opts{ display: flex; gap: 8px; }
.sgw .donecard a{ text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.sgw .rail{ padding: 22px 24px 28px 0; display: flex; flex-direction: column; gap: 16px; }
.sgw .panel{ background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.sgw .panel h3{ margin: 0 0 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.sgw .panel h3 .tag{ text-transform: none; letter-spacing: 0; }
.sgw .who{ display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.sgw .who .av{ width: 42px; height: 42px; border-radius: 50%; background: var(--tint); color: var(--pri); display: grid; place-items: center; font-weight: 700; }
.sgw .who .nm{ font-weight: 700; font-size: 16px; line-height: 1.2; }
.sgw .who .sb{ font-size: 12px; color: var(--ink-3); }
.sgw dl.kv{ display: grid; grid-template-columns: 98px 1fr; gap: 7px 10px; margin: 0; font-size: 13px; }
.sgw dl.kv dt{ color: var(--ink-3); }
.sgw dl.kv dd{ margin: 0; font-weight: 600; }
.sgw dl.kv dd small{ display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; }
.sgw .senti{ display: flex; gap: 3px; margin-top: 4px; }
.sgw .senti i{ width: 20px; height: 5px; border-radius: 99px; background: #ece7e5; }
.sgw .senti i.on{ background: #c08a2a; }
.sgw .empty{ border: 1.5px dashed var(--line); border-radius: 12px; padding: 20px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }
.sgw .empty b{ display: block; color: var(--ink-2); margin-bottom: 2px; }
.sgw .credit{ display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--ivory); border: 1px solid var(--line-2); margin-bottom: 12px; }
.sgw .credit .v{ font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sgw .credit .l{ font-size: 12px; color: var(--ink-3); text-align: right; line-height: 1.35; }
.sgw .credit .l b{ color: var(--ink-2); }
.sgw .sms{ background: #f6f2ef; border-radius: 14px 14px 14px 5px; padding: 11px 13px; font-size: 13.5px; line-height: 1.5; }
.sgw .sms .from{ font-size: 11px; font-weight: 700; color: var(--pri); margin-bottom: 3px; display: flex; justify-content: space-between; }
.sgw .sms .from span{ color: var(--ink-3); font-weight: 500; }
.sgw .sms-meta{ font-size: 11.5px; color: var(--ink-3); margin-top: 8px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; }
.sgw .sms-meta b{ color: var(--ink-2); font-weight: 600; }
.sgw .rule-note{ font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.sgw .pattern .pt{ margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.sgw .pattern .inc{ font-size: 12.5px; font-weight: 600; }
.sgw .hide{ display: none !important; }
.sgw footer{ border-top: 1px solid var(--line); background: #fff; }
.sgw footer .in{ padding: 14px 24px 18px; font-size: 11.5px; color: var(--ink-3); display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 24px; }
.sgw footer p{ margin: 0; }
.sgw footer b{ color: var(--ink-2); font-weight: 600; }

/* The Care console's phone-only parts (round 26, telco-agent-phone.html) exist in the markup
   on every width; the laptop never sees them. */
.sgw .bar .back, .sgw .qkpis, .sgw .run-hd .fn, .sgw .foldbar, .sgw .ptabs, .sgw .shead, .sgw .dots, .sgw .stitle, .sgw .smsview, .sgw .qrs, .sgw .dsum, .sgw .dnav, .sgw .replay-ph, .sgw .bbar, .sgw .scrim, .sgw .opts .od { display: none; }

/* ---- The phone (round 26, telco-customer-phone.html): the header under the
   rail, the guide as compact pills with only the current step named, two tabs
   (the bill, Singa Assist), the chat at its natural height with the replies
   sticky at the bottom. The breakpoint is PHONE_MAX_WIDTH in core/phone.js. ---- */
@media (max-width: 767px) {
  .sg { font-size: 14px; }
  .sg header.top { position: sticky; top: 30px; z-index: 29; }
  .sg .top-in { height: 52px; gap: 10px; padding: 0 14px; }
  .sg .brand .mark { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
  .sg .brand .word { font-size: 18px; }
  .sg nav.main { display: none; }
  .sg .me { gap: 8px; font-size: 13px; }
  .sg .me .av { width: 30px; height: 30px; font-size: 11px; }
  .sg .page { padding: 0 0 8px; }
  /* the guide: pills, only the current step named */
  .sg .guide { flex-wrap: wrap; gap: 6px; margin: 0; padding: 10px 12px 8px; }
  .sg .gs { gap: 6px; padding: 5px 10px 5px 5px; font-size: 11px; white-space: nowrap; }
  .sg .gs i { width: 18px; height: 18px; font-size: 10px; }
  .sg .gs:not(.now) span { display: none; }
  .sg .gs:not(.now) { padding-right: 5px; }
  .sg .gsep { width: 10px; }
  .sg .truth { display: block; width: 100%; max-width: none; margin: 2px 2px 0; text-align: left; font-size: 11px; }
  /* the two tabs (rule 2), sticky under the rail and the header */
  .sg .ptabs { position: sticky; top: 82px; z-index: 28; display: grid; grid-template-columns: 1fr 1fr; padding: 0 6px; background: var(--ivory); border-bottom: 1px solid var(--line); }
  .sg .ptabs button { padding: 11px 2px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
  .sg .ptabs button.on { color: var(--pri); border-bottom-color: var(--pri); }
  .sg .ptabs button em { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #3fa774; vertical-align: 1px; }
  .sg .grid { display: block; padding: 12px 12px 0; }
  .sg [data-panel] { display: none; }
  .sg[data-tab="bill"] [data-panel="bill"] { display: block; }
  .sg[data-tab="assist"] [data-panel="assist"] { display: flex; }
  /* the bill */
  .sg .bill { padding: 16px 14px 14px; border-radius: 16px; }
  .sg .hi { font-size: 13px; }
  .sg .bill h1 { margin: 2px 0 4px; font-size: 24px; }
  .sg .bill .plan { margin-top: 0; padding: 2px 10px; font-size: 11.5px; }
  .sg .lines { margin-top: 14px; }
  .sg .ln { gap: 10px; padding: 11px 10px; font-size: 14px; }
  .sg .ln .d { font-size: 11.5px; }
  .sg .flag { margin-left: 6px; padding: 1px 7px; font-size: 10.5px; }
  .sg .ln.gst { font-size: 13px; }
  .sg .total { padding: 12px 10px 0; }
  .sg .total .l { font-size: 15px; }
  .sg .total .l small { font-size: 11.5px; }
  .sg .total .v { font-size: 28px; }
  .sg .note { margin-top: 14px; padding: 12px; font-size: 13px; align-items: flex-start; }
  .sg .note > span { flex: 1; min-width: 0; }
  .sg .note .lap { display: none; }
  .sg .note .go { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 11px 12px; border-radius: 10px; background: var(--pri); color: #fff; text-decoration: none; font-weight: 600; font-size: 13.5px; }
  /* the chat at its natural height; the replies stay at the bottom of the screen */
  .sg .chat { contain: none; min-height: 0; border-radius: 16px; box-shadow: none; }
  .sg .chat-hd { padding: 12px 14px; gap: 10px; }
  .sg .bot { width: 36px; height: 36px; border-radius: 10px; }
  .sg .chat-hd .n { font-size: 15px; }
  .sg .chat-hd .s { font-size: 12px; }
  .sg .msgs { flex: none; overflow: visible; padding: 14px 12px 10px; gap: 10px; }
  .sg .m { max-width: 90%; padding: 10px 13px; border-radius: 15px; font-size: 14px; }
  .sg .ccard { margin-top: 8px; border-radius: 10px; font-size: 12.5px; }
  .sg .ccard .r { padding: 8px 10px; }
  .sg .tk { margin-top: 8px; padding: 10px 12px; border-radius: 10px; }
  .sg .tk .t { font-size: 13.5px; }
  .sg .tk .s { font-size: 12px; }
  .sg .aimeta { flex-wrap: wrap; gap: 6px 8px; margin: -4px 0 0 4px; font-size: 11px; }
  .sg .raw { padding: 9px 10px; font-size: 10.5px; }
  .sg .handoff { padding: 12px; border-radius: 12px; }
  .sg .handoff .ht { margin-bottom: 8px; font-size: 13px; }
  .sg .handoff a { padding: 11px 12px; font-size: 13.5px; }
  .sg .replies { position: sticky; bottom: 0; z-index: 5; padding: 10px 12px; }
  .sg .replies .rl { margin-bottom: 8px; font-size: 10.5px; }
  .sg .rbox { align-items: stretch; gap: 6px; min-height: 36px; }
  .sg .chip { padding: 11px 14px; border-radius: 12px; font-size: 14px; text-align: left; }
  .sg .chat-ft { padding: 0 12px 10px; font-size: 11px; }
  /* the complaint's outcome page */
  .sg .outcome { margin: 12px; padding: 18px 16px; border-radius: 14px; }
  .sg .outcome h1 { font-size: 22px; }
  .sg .outcome .actions .chip { padding: 9px 12px; font-size: 13px; }
  /* footer */
  .sg footer .in { display: block; padding: 12px 14px 10px; font-size: 10.5px; line-height: 1.45; }
  .sg .honesty { padding: 8px 14px 16px; font-size: 10.5px; }
  .sg .error-line { margin: 8px 0; }
}

/* ---- The Singa Care console on the phone (round 26, telco-agent-phone.html): the
   queue or the complaint, one column; the bar under the rail; the complaint, the
   agent run, then the customer and the resolution behind tabs; the mid-run check
   and the decision as bottom sheets, the decision in three steps; one result card
   when finished, the run and the panels folded. The breakpoint is PHONE_MAX_WIDTH
   in core/phone.js. ---- */
@media (max-width: 767px) {
  .sgw { font-size: 14px; }
  /* the bar */
  .sgw .bar { position: sticky; top: 30px; z-index: 29; }
  .sgw .bar-in { height: 52px; gap: 10px; padding: 0 14px; }
  .sgw[data-view="case"] .bar .back { display: block; color: #fff; text-decoration: none; font-size: 28px; line-height: 1; padding: 0 4px 3px 0; }
  .sgw .brand { min-width: 0; }
  .sgw .brand .mark { width: 30px; height: 30px; font-size: 15px; flex: none; }
  .sgw .brand .w { font-size: 15px; white-space: nowrap; }
  .sgw .brand .w small { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
  .sgw .kpis, .sgw .agent > div, .sgw .bar .signout { display: none; }
  .sgw .agent { gap: 8px; }
  .sgw .avail { gap: 0; padding: 0; font-size: 0; background: none; }
  .sgw .avail::before { width: 9px; height: 9px; }
  .sgw .agent .av { width: 30px; height: 30px; font-size: 11px; }
  .sgw .error-line { margin: 8px 12px; }
  /* one column: the queue view or the complaint view; every card as wide as the phone */
  .sgw .desk { display: flex; flex-direction: column; align-items: stretch; padding: 12px 12px 0; }
  .sgw .work, .sgw .rail { display: contents; }
  .sgw[data-view="queue"] .work > *, .sgw[data-view="queue"] .rail > * { display: none; }
  .sgw[data-view="case"] .queue { display: none; }
  .sgw .case { order: 1; margin: 0 0 12px; }
  .sgw .run { order: 2; margin: 0 0 12px; }
  .sgw .foldbar { order: 3; }
  .sgw .ptabs { order: 4; }
  .sgw .panel { order: 5; margin: 0 0 12px; }
  /* the queue */
  .sgw .queue { padding: 0; background: none; border: 0; }
  .sgw .qkpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
  .sgw .qkpis div { padding: 10px 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-align: center; font-size: 11px; line-height: 1.25; color: var(--ink-3); }
  .sgw .qkpis b { display: block; margin-bottom: 2px; font-size: 20px; font-weight: 700; color: var(--pri); }
  .sgw .qkpis .risk b { color: #a3392f; }
  .sgw .qh { padding: 0 2px 8px; }
  .sgw .qi { margin: 0 0 8px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
  .sgw .qi .r3 { flex-wrap: wrap; white-space: normal; }
  .sgw .qnote { padding: 8px 2px 0; }
  .sgw .team { margin: 14px 0 0; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
  .sgw .reset { margin: 12px 2px 0; }
  /* the complaint */
  .sgw .case { display: flex; flex-direction: column; padding: 14px; }
  .sgw .case .top { display: contents; }
  .sgw .case .top > div:first-child { order: 1; min-width: 0; }
  .sgw .said { order: 2; grid-template-columns: minmax(0, 1fr); margin-top: 12px; padding: 10px 12px; }
  .sgw .said .av { display: none; }
  .sgw .said .q { font-size: 14px; }
  .sgw .dispute { order: 3; display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); text-align: left; }
  .sgw .dispute .v { font-size: 24px; }
  .sgw .crumb { font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
  .sgw .case h1 { font-size: 20px; line-height: 1.2; }
  /* the agent run */
  .sgw .run-hd { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .sgw .run-hd .ico, .sgw .run-hd .btn[data-action="replay"], .sgw .run-hd .t .tool { display: none; }
  .sgw .run-hd > div { flex: 1 1 0; min-width: 0; }
  .sgw .run-hd .t { font-size: 16px; overflow-wrap: anywhere; }
  .sgw .start { flex: 1 1 100%; justify-content: center; height: 48px; margin: 0; }
  .sgw .status { flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; }
  .sgw .status .now, .sgw .status .ai { margin-left: 0; white-space: normal; }
  .sgw .plan-note { padding: 10px 14px 0; }
  .sgw .feed { padding: 4px 14px 10px; }
  .sgw .st { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; }
  .sgw .st .tt { min-width: 0; overflow-wrap: anywhere; }
  .sgw .st .tool { display: block; margin: 1px 0 0; overflow-wrap: anywhere; }
  .sgw .st .tm { min-width: 0; }
  .sgw .liveai { flex-wrap: wrap; }
  .sgw .liveai span, .sgw .raw { overflow-wrap: anywhere; }
  .sgw .run-hd .fn { margin-left: auto; padding: 0; background: none; border: 0; color: var(--pri); font-size: 12px; font-weight: 600; }
  .sgw .run-hd .fn u { text-decoration: none; }
  .sgw[data-idle] .run-hd .fn, .sgw[data-fin] .run-hd .fn { display: inline; }
  .sgw[data-idle]:not([data-runopen]) .feed { display: none; }
  /* finished: one result card, the run and the panels folded */
  .sgw[data-fin] .case .said, .sgw[data-fin] .case .dispute, .sgw[data-fin] .case .tags .tag:not(#caseStatus) { display: none; }
  .sgw[data-fin] .run { display: contents; }
  .sgw[data-fin] .status, .sgw[data-fin] .prog, .sgw[data-fin] .plan-note, .sgw[data-fin] .run-hd > div .s, .sgw[data-fin] .run-hd > div .tool { display: none; }
  .sgw[data-fin] .run-hd { order: 3; margin: 0 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
  .sgw[data-fin] .feed { order: 3; margin: 0 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
  .sgw[data-fin]:not([data-runopen]) .feed { display: none; }
  .sgw[data-fin] .donecard { order: 2; margin: 0 0 12px; padding: 18px 16px 14px; background: #fff; border: 1px solid var(--ok-line); border-radius: 14px; }
  .sgw[data-fin] .foldbar { order: 3; }
  .sgw .donecard { margin: 4px 14px 14px; padding: 16px 14px; }
  .sgw .donecard .t { font-size: 18px; line-height: 1.35; }
  .sgw .donecard .opts { flex-direction: column-reverse; gap: 8px; }
  .sgw .donecard .opts a { justify-content: space-between; width: 100%; padding: 12px 14px; white-space: normal; }
  .sgw .replay-ph { display: block; width: 100%; margin-top: 10px; padding: 8px; background: none; border: 0; color: var(--ink-3); font-size: 13px; text-decoration: underline; }
  .sgw[data-fin] .foldbar { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 0 12px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); font-size: 15px; font-weight: 700; text-align: left; }
  .sgw .foldbar span { color: var(--pri); font-size: 12px; font-weight: 600; }
  /* the customer, the resolution and the pattern behind tabs */
  .sgw .ptabs { position: sticky; top: 82px; z-index: 20; display: flex; gap: 4px; margin: 0 0 12px; padding: 0 4px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .sgw .ptabs button { flex: 1; margin-bottom: -1px; padding: 10px 2px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-3); font-size: 13px; font-weight: 600; }
  .sgw .ptabs button.on { color: var(--pri); border-bottom-color: var(--pri); }
  .sgw [data-panel] { display: none; }
  .sgw[data-ptab="customer"] [data-panel="customer"], .sgw[data-ptab="resolution"] [data-panel="resolution"], .sgw[data-ptab="pattern"] [data-panel="pattern"] { display: block; }
  .sgw[data-view="queue"] .rail [data-panel] { display: none; }
  .sgw[data-fin]:not([data-tabsopen]) .ptabs, .sgw[data-fin]:not([data-tabsopen]) [data-panel] { display: none; }
  .sgw .panel { padding: 14px; }
  .sgw dl.kv { grid-template-columns: 92px minmax(0, 1fr); }
  .sgw .sms { overflow-wrap: anywhere; }
  /* the bar that opens a waiting sheet; the sheets (rule 3) */
  .sgw .bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
  .sgw:not([data-sheet]) .bbar { display: block; }
  .sgw .bbar button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; padding: 0 16px; background: var(--pri); border: 0; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 600; }
  .sgw .bbar button small { font-size: 12px; font-weight: 500; opacity: .9; }
  .sgw .bbar ~ footer { padding-bottom: 80px; }
  .sgw[data-sheet] .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(40,20,26,.45); }
  .sgw .st.wait .gate:not(.held) { display: none; }
  .sgw[data-sheet="check"] .st.wait .gate.cgate, .sgw[data-sheet="decision"] .st.wait .gate.dgate { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 88vh; overflow: auto; margin: 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); background: #fff; border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(40,20,26,.25); }
  .sgw[data-sheet] .st.wait .gate::before { content: ""; display: block; flex: none; align-self: center; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--line); }
  .sgw .gate .q { font-size: 17px; line-height: 1.3; }
  .sgw .gate .opts { flex-direction: column; align-items: stretch; }
  .sgw .gate .opts .btn { display: block; padding: 12px 14px; white-space: normal; text-align: left; border-radius: 12px; }
  .sgw .gate .opts .od { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; opacity: .85; }
  .sgw .gate .opts .btn.picked { box-shadow: 0 0 0 2px var(--pri); }
  .sgw .gate .edit textarea { min-height: 96px; font-size: 14px; }
  .sgw .gate .reason input { padding: 11px 12px; font-size: 14px; }
  /* the decision sheet in three steps: pick, the SMS and the reason, confirm and record */
  .sgw .dgate > .k, .sgw .dgate > .why { display: none; }
  .sgw .dgate .shead { display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
  .sgw .shead .k { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sgw .shead .k i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-tint); font-style: normal; font-size: 11px; }
  .sgw .shead .stepn { margin-left: auto; color: var(--ink-3); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .sgw .dgate .dots { display: flex; gap: 6px; margin: 10px 0 12px; }
  .sgw .dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
  .sgw .dots i.on { background: var(--ok); }
  .sgw .stitle { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
  .sgw .dgate[data-dstep="1"] .stitle.s1, .sgw .dgate[data-dstep="2"] .stitle.s2, .sgw .dgate[data-dstep="3"] .stitle.s3 { display: block; }
  .sgw .dgate:not([data-dstep="1"]) > .q, .sgw .dgate:not([data-dstep="1"]) > .why, .sgw .dgate:not([data-dstep="1"]) > .opts, .sgw .dgate[data-dstep="1"] .edit { display: none; }
  .sgw .dgate > .q { font-size: 14px; font-weight: 500; color: var(--ink-2); }
  .sgw .dgate[data-dstep="2"] .edit .opts, .sgw .dgate .edit [data-cancel] { display: none; }
  .sgw .dgate[data-dstep="2"] .smsview { display: block; margin: 0 0 10px; padding: 12px; background: #f6f2ef; border-radius: 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  .sgw .smsview .from { margin-bottom: 4px; color: var(--ink-3); font-size: 11.5px; }
  .sgw .dgate[data-dstep="2"] .edit { display: flex; flex-direction: column; }
  .sgw .dgate[data-dstep="2"] .qrs { display: flex; flex-wrap: wrap; order: 1; gap: 8px; margin: 2px 0 10px; }
  .sgw .dgate[data-dstep="2"] .edit .reason { order: 2; }
  .sgw .dgate[data-dstep="2"] .edit > .aside { order: 3; }
  .sgw .qrs button { padding: 9px 12px; background: #fff; border: 1.5px solid var(--tint-line); border-radius: 12px; color: var(--ink); font-size: 13.5px; }
  .sgw .qrs button.on { background: var(--tint); border-color: var(--pri); color: var(--pri); }
  .sgw .dgate[data-dstep="3"] .edit { display: contents; }
  .sgw .dgate[data-dstep="3"] .edit > *:not(.opts):not(.aside) { display: none; }
  .sgw .dgate[data-dstep="3"] .dsum { display: block; order: 4; margin: 0 0 12px; padding: 12px 14px; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 12px; }
  .sgw .dsum .row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; }
  .sgw .dsum .row span { color: var(--ink-3); }
  .sgw .dsum .row b { max-width: 64%; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
  .sgw .dsum .row.big b { color: var(--pri); font-size: 16px; }
  .sgw .dsum b.soft { color: var(--ink-2); font-weight: 500; }
  .sgw .dgate[data-dstep="3"] .edit > .opts { order: 5; }
  .sgw .dgate[data-dstep="3"] .edit > .opts .btn.pri { width: 100%; height: 50px; justify-content: center; text-align: center; background: var(--ok); border-color: var(--ok); }
  .sgw .dgate .dnav { display: flex; order: 6; gap: 8px; margin-top: 14px; }
  .sgw .dgate > .aside, .sgw .dgate .edit > .aside { order: 7; }
  .sgw .dgate[data-dstep="1"] .nb.back, .sgw .dgate[data-dstep="3"] .nb.next { display: none; }
  .sgw .nb { flex: 1; height: 50px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 15px; font-weight: 600; }
  .sgw .nb.next { flex: 2; background: var(--pri); border-color: var(--pri); color: #fff; }
  .sgw .nb:disabled { background: var(--line); border-color: var(--line); color: var(--ink-3); }
  /* footer */
  .sgw footer .in { display: block; padding: 12px 14px 10px; font-size: 10.5px; line-height: 1.45; }
  .sgw footer p { margin: 0 0 6px; }
}