/* TebTok support — 7.4.17 messenger-style redesign.
   Customer: two panes (conversations · conversation). Staff: three panes (inbox · conversation · details).
   Self-contained; only tokens come from tebtok-core.css. */
.crp-support.sp {
    --sp-blue:var(--tebtok-blue); --sp-navy:var(--tebtok-blue-dark); --sp-aqua:var(--tebtok-aqua); --sp-teal:var(--tebtok-soft-teal);
    --sp-bg:var(--tebtok-bg); --sp-surface:#fff; --sp-ink:var(--tebtok-ink); --sp-muted:var(--tebtok-muted); --sp-line:var(--tebtok-line);
    --sp-blue-soft:var(--tebtok-blue-soft,#eaf1ff); --sp-aqua-soft:var(--tebtok-aqua-soft,#e3f7f4); --sp-amber:#b45309; --sp-amber-soft:#fff5e5; --sp-green:#15803d; --sp-green-soft:#e8f7ee; --sp-red:#b42318;
    --sp-radius:16px; --sp-list-w:330px; --sp-side-w:290px; --sp-h:calc(100dvh - 190px);
    position:relative; max-width:1480px; margin:0 auto; padding:0 0 24px; color:var(--sp-ink); font-family:var(--tebtok-font); font-size:15px; line-height:1.8; text-align:right;
}
.crp-support.sp *,.crp-support.sp *::before,.crp-support.sp *::after { box-sizing:border-box; }
.crp-support.sp button,.crp-support.sp input,.crp-support.sp select,.crp-support.sp textarea { font:inherit; color:inherit; }
.crp-support.sp [hidden] { display:none!important; }
.crp-support.sp:not(.is-embedded) { padding:24px 24px 32px; }
.crp-support.sp.is-embedded { --sp-h:calc(100dvh - 150px); }

/* ---------- buttons & fields ---------- */
.sp-btn,.sp-btn-primary,.sp-icon-btn,.sp-link-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:8px 16px; border-radius:11px; border:1px solid var(--sp-line); background:#fff; color:var(--sp-navy); font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; transition:background-color .15s ease,border-color .15s ease,color .15s ease; }
.sp-btn:hover { border-color:#b9cdf0; background:#f7faff; }
.sp-btn-primary { border-color:var(--sp-blue); background:var(--sp-blue); color:#fff; }
.sp-btn-primary:hover { background:var(--tebtok-blue-hover,#1a58c9); border-color:var(--tebtok-blue-hover,#1a58c9); }
.sp-btn-success { border-color:#bfe3cc; color:var(--sp-green); background:var(--sp-green-soft); }
.sp-btn-success:hover { background:#dcf3e4; }
.sp-icon-btn { width:42px; padding:0; color:var(--sp-muted); }
.sp-icon-btn:hover { color:var(--sp-navy); }
.sp-link-btn { min-height:0; padding:4px 2px; border:0; background:transparent; color:var(--sp-muted); font-weight:600; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.sp-link-btn:hover { color:var(--sp-red); }
.crp-support.sp button:disabled { opacity:.55; cursor:progress; }
.crp-support.sp input:not([type=file]):not([type=checkbox]):not([type=radio]),.crp-support.sp select,.crp-support.sp textarea { width:100%; min-height:44px; padding:9px 13px; border:1px solid #c9d6e3; border-radius:11px; background:#fff; font-size:15px; line-height:1.6; }
.crp-support.sp textarea { resize:vertical; min-height:88px; }
.crp-support.sp input:focus,.crp-support.sp select:focus,.crp-support.sp textarea:focus,.crp-support.sp button:focus-visible { outline:2px solid var(--sp-blue); outline-offset:1px; border-color:var(--sp-blue); }
.sp-field { display:grid; gap:6px; margin:0 0 14px; }
.sp-field>span,.sp-field>legend,.sp-manage label>span,.sp-settings label>span,.sp-auth-card label { color:#35495a; font-size:13px; font-weight:700; }
.sp-hint { display:block; color:var(--sp-muted); font-size:12.5px; line-height:1.7; }
.sp-check { display:flex; align-items:flex-start; gap:9px; margin:0 0 14px; color:var(--sp-ink); font-size:14px; cursor:pointer; }
.sp-check input { width:18px; height:18px; margin-top:4px; accent-color:var(--sp-blue); }
.sp-note { padding:12px 14px; border-radius:12px; background:var(--sp-amber-soft); color:var(--sp-amber); }

/* ---------- top header (standalone only) ---------- */
.sp-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 18px; padding:0 0 16px; border-bottom:1px solid var(--sp-line); }
.sp-top-brand { display:flex; align-items:center; gap:14px; }
.sp-top-brand img { width:118px; height:auto; display:block; }
.sp-top-brand h1 { margin:0; color:var(--sp-navy); font-size:24px; line-height:1.4; }
.sp-top-brand p { margin:0; color:var(--sp-muted); font-size:13px; }
.sp-top-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.sp-portal-link { display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid #cbd9e6; border-radius:10px; background:#fff; color:#123e7c!important; font-size:13px; font-weight:600; text-decoration:none; }
.sp-portal-link:hover { background:#f4f8ff; border-color:#9dbbe5; }

/* ---------- toast ---------- */
.sp-toast { position:fixed; z-index:120; inset-inline-start:50%; bottom:18px; transform:translateX(50%); max-width:min(92vw,560px); margin:0; padding:11px 16px; border-radius:12px; background:var(--sp-navy); color:#fff; font-size:14px; box-shadow:0 12px 30px rgba(7,29,50,.25); }
.sp-toast.is-error { background:#9f1d16; }

/* ---------- auth ---------- */
.sp-auth { display:grid; gap:18px; max-width:980px; margin:0 auto; }
.sp-auth-intro { padding:22px 24px; border:1px solid var(--sp-line); border-radius:var(--sp-radius); background:#fff; }
.sp-auth-intro h2 { margin:0 0 6px; color:var(--sp-navy); font-size:22px; }
.sp-auth-intro p { margin:0 0 14px; color:var(--sp-muted); font-size:14px; max-width:680px; }
.sp-auth-links { display:flex; flex-wrap:wrap; gap:10px; }
.sp-auth-links a { display:grid; gap:1px; min-width:200px; padding:11px 14px; border:1px solid var(--sp-line); border-radius:12px; background:var(--sp-bg); color:var(--sp-ink); text-decoration:none; }
.sp-auth-links a:hover { border-color:var(--sp-blue); background:var(--sp-blue-soft); }
.sp-auth-links b { color:var(--sp-navy); font-size:15px; }
.sp-auth-links span { color:var(--sp-muted); font-size:12.5px; }
.sp-auth-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sp-auth-card { display:grid; gap:12px; align-content:start; padding:20px 22px; border:1px solid var(--sp-line); border-radius:var(--sp-radius); background:#fff; }
.sp-auth-card h3 { margin:0; color:var(--sp-navy); font-size:17px; }
.sp-auth-card label { display:grid; gap:6px; }
.sp-auth-card form { display:grid; gap:12px; }
.sp-auth-card small { color:var(--sp-muted); font-size:12.5px; line-height:1.7; }

/* ---------- workspace layout ---------- */
.sp-work { display:grid; grid-template-columns:var(--sp-list-w) minmax(0,1fr); gap:16px; align-items:start; }
.is-staff .sp-work { grid-template-columns:var(--sp-list-w) minmax(0,1fr) var(--sp-side-w); }
.sp-list,.sp-thread,.sp-side { border:1px solid var(--sp-line); border-radius:var(--sp-radius); background:#fff; min-width:0; }
.sp-list,.sp-thread { height:var(--sp-h); min-height:560px; display:flex; flex-direction:column; overflow:hidden; }
.sp-side { max-height:var(--sp-h); overflow:auto; }

/* ---------- list (inbox) ---------- */
.sp-list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 10px; }
.sp-list-head h2 { margin:0; color:var(--sp-navy); font-size:18px; }
.sp-new-btn { min-height:40px; padding:6px 14px; font-size:13.5px; }
.sp-filters { display:grid; gap:10px; padding:0 16px 12px; border-bottom:1px solid var(--sp-line); }
.sp-segments { display:flex; gap:4px; padding:4px; border-radius:12px; background:var(--sp-bg); }
.sp-segments button { flex:1; min-height:36px; padding:4px 6px; border:0; border-radius:9px; background:transparent; color:var(--sp-muted); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.sp-segments button b { display:inline-block; min-width:18px; margin-inline-start:3px; padding:0 5px; border-radius:999px; background:var(--sp-blue); color:#fff; font-size:11px; line-height:18px; }
.sp-segments button b:empty { display:none; }
.sp-segments button.is-active { background:#fff; color:var(--sp-navy); box-shadow:0 1px 3px rgba(18,62,124,.12); }
.sp-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.sp-search input { min-height:40px!important; font-size:14px!important; }
.sp-search select { width:auto!important; min-height:40px!important; padding:6px 10px!important; font-size:13px!important; }
.sp-tickets { flex:1; overflow:auto; padding:8px; scrollbar-width:thin; }
.sp-list-empty { margin:28px 8px; color:var(--sp-muted); text-align:center; font-size:14px; }
.sp-ticket { position:relative; display:flex; align-items:flex-start; gap:10px; width:100%; padding:11px 12px; margin:0 0 4px; border:1px solid transparent; border-radius:12px; background:transparent; text-align:right; cursor:pointer; transition:background-color .12s ease; }
.sp-ticket:hover { background:var(--sp-bg); }
.sp-ticket.is-selected { background:var(--sp-blue-soft); border-color:#c7dafb; }
.sp-ticket-body { display:grid; gap:2px; min-width:0; flex:1; }
.sp-ticket-row1,.sp-ticket-row2 { display:flex; align-items:center; gap:6px; min-width:0; }
.sp-ticket-row1 b,.sp-ticket-row1 strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14.5px; font-weight:700; color:var(--sp-ink); flex:1; min-width:0; }
.sp-ticket-body>strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; color:var(--sp-ink); }
.sp-ticket.is-unread .sp-ticket-row1 strong,.sp-ticket.is-unread .sp-ticket-body>strong { font-weight:800; color:var(--sp-navy); }
.sp-ticket time { flex:0 0 auto; color:var(--sp-muted); font-size:11px; }
.sp-ticket small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sp-muted); font-size:12px; flex:1; min-width:0; }
.sp-lane { flex:0 0 auto; padding:0 7px; border-radius:999px; font-size:10.5px; font-style:normal; font-weight:700; line-height:18px; }
.sp-lane.is-teal { color:#0b7a70; background:var(--sp-aqua-soft); }
.sp-lane.is-blue { color:var(--sp-blue); background:var(--sp-blue-soft); }
.sp-lane.is-gray { color:#546577; background:#eef2f6; }
.sp-avatar { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border-radius:11px; color:#fff; font-size:15px; font-weight:900; background:#6f8098; }
.sp-avatar.is-teal { background:linear-gradient(145deg,#1dd0bd,#0e9f8f); }
.sp-avatar.is-blue { background:linear-gradient(145deg,#1f67ed,#123e7c); }
.sp-pill { flex:0 0 auto; padding:0 8px; border-radius:999px; font-size:11px; font-style:normal; font-weight:700; line-height:20px; }
.sp-pill.is-new { color:#fff; background:var(--sp-blue); }
.sp-pill.is-requester { color:var(--sp-amber); background:var(--sp-amber-soft); }
.sp-pill.is-done { color:var(--sp-green); background:var(--sp-green-soft); }
.sp-pill.is-high { color:var(--sp-red); background:#fdecea; }
.sp-pill.is-overdue { color:var(--sp-amber); background:var(--sp-amber-soft); }
.sp-pager { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-top:1px solid var(--sp-line); color:var(--sp-muted); font-size:12.5px; }
.sp-pager .sp-btn { min-height:34px; padding:4px 12px; font-size:12.5px; }
.sp-list-foot { padding:12px 16px 14px; border-top:1px solid var(--sp-line); background:var(--sp-bg); }
.sp-list-foot p { display:grid; gap:2px; margin:0; color:var(--sp-muted); font-size:12.5px; line-height:1.7; }
.sp-list-foot p b { color:var(--sp-navy); font-size:13px; }
.sp-contact { display:flex; flex-wrap:wrap; gap:10px; }
.sp-contact a { color:var(--sp-blue); text-decoration:none; }
.sp-faq { margin-top:8px; font-size:12.5px; }
.sp-faq summary { color:var(--sp-blue); font-weight:700; cursor:pointer; }
.sp-faq p { margin:8px 0 0; color:var(--sp-muted); line-height:1.7; }
.sp-faq p b { color:var(--sp-ink); }

/* ---------- thread ---------- */
.sp-empty { flex:1; display:grid; place-content:center; justify-items:center; gap:8px; padding:32px; text-align:center; }
.sp-empty-icon { display:grid; place-items:center; width:64px; height:64px; margin-bottom:6px; border-radius:20px; color:var(--sp-blue); background:var(--sp-blue-soft); }
.sp-empty h2 { margin:0; color:var(--sp-navy); font-size:19px; }
.sp-empty p { margin:0 0 8px; color:var(--sp-muted); font-size:14px; max-width:360px; }
.sp-conv { flex:1; display:flex; flex-direction:column; min-height:0; }
.sp-conv-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--sp-line); }
.sp-conv-title { flex:1; min-width:0; }
.sp-conv-title h2 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sp-navy); font-size:17px; line-height:1.5; }
.sp-conv-title p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sp-muted); font-size:12.5px; }
.sp-state { flex:0 0 auto; padding:2px 11px; border-radius:999px; font-size:12px; font-weight:700; line-height:22px; color:var(--sp-blue); background:var(--sp-blue-soft); }
.sp-state.is-requester { color:var(--sp-amber); background:var(--sp-amber-soft); }
.sp-state.is-done { color:var(--sp-green); background:var(--sp-green-soft); }
.sp-state.is-closed { color:#546577; background:#eef2f6; }
.sp-back { display:none; }
.sp-messages { flex:1; min-height:0; overflow:auto; padding:18px 18px 8px; background:#fafcfe; scrollbar-width:thin; }
.sp-older { display:block; margin:0 auto 14px; padding:6px 14px; border:1px solid var(--sp-line); border-radius:999px; background:#fff; color:var(--sp-blue); font-size:12.5px; font-weight:700; cursor:pointer; }
.sp-msg { position:relative; max-width:min(78%,640px); margin:0 0 12px; padding:10px 14px 8px; border-radius:16px; background:#fff; border:1px solid var(--sp-line); }
.sp-msg.is-mine { margin-inline-start:auto; background:var(--sp-blue-soft); border-color:#d4e2fb; border-end-start-radius:6px; }
.sp-msg:not(.is-mine):not(.is-internal) { border-end-end-radius:6px; }
.sp-msg.is-internal { max-width:100%; margin-inline-start:0; background:#fff8e6; border:1px dashed #d9a441; }
.sp-msg header { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.sp-msg header b { color:var(--sp-navy); font-size:13px; }
.sp-msg-tag { padding:0 7px; border-radius:999px; background:#eef2f6; color:#546577; font-size:10.5px; font-style:normal; font-weight:700; line-height:18px; }
.sp-msg.is-internal .sp-msg-tag { color:#8a5a00; background:#ffe9bd; }
.sp-msg.is-staff:not(.is-internal) .sp-msg-tag { color:#0b7a70; background:var(--sp-aqua-soft); }
.sp-msg p { margin:0; white-space:pre-wrap; word-break:break-word; font-size:15px; line-height:1.85; }
.sp-msg time { display:block; margin-top:4px; color:var(--sp-muted); font-size:11px; text-align:left; }
.sp-msg-files { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sp-msg-files button { padding:4px 10px; border:1px solid #c9d6e3; border-radius:9px; background:#fff; color:var(--sp-blue); font-size:12.5px; font-weight:700; cursor:pointer; direction:ltr; }
.sp-system { margin:6px auto 14px; max-width:90%; color:var(--sp-muted); font-size:12px; text-align:center; }

/* composer */
.sp-composer { padding:10px 14px 12px; border-top:1px solid var(--sp-line); background:#fff; }
.sp-composer textarea { min-height:48px!important; max-height:260px; resize:none; border-radius:12px; }
.sp-composer.is-internal textarea { background:#fffaf0; border-color:#e6c068; }
.sp-tabs { display:flex; gap:4px; margin:0 0 8px; }
.sp-tabs label { padding:5px 12px; border:1px solid transparent; border-radius:999px; color:var(--sp-muted); font-size:12.5px; font-weight:700; cursor:pointer; }
.sp-tabs label.is-active { color:var(--sp-navy); border-color:#c7dafb; background:var(--sp-blue-soft); }
.sp-composer.is-internal .sp-tabs label.is-active { color:#8a5a00; border-color:#e6c068; background:#fff3d6; }
.sp-tabs input { position:absolute; opacity:0; width:0; height:0; }
.sp-composer-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.sp-attach-btn { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 11px; border:1px solid var(--sp-line); border-radius:999px; color:var(--sp-muted); font-size:12.5px; font-weight:700; cursor:pointer; }
.sp-attach-btn:hover { color:var(--sp-navy); border-color:#b9cdf0; }
.sp-attach-btn input { position:absolute; opacity:0; width:0; height:0; }
.sp-canned { width:auto!important; min-height:36px!important; padding:4px 10px!important; border-radius:999px!important; font-size:12.5px!important; color:var(--sp-muted); }
.sp-composer-note { flex:1; min-width:120px; color:var(--sp-muted); font-size:11.5px; line-height:1.5; }
.sp-composer-bar .sp-btn-primary { min-height:40px; padding:6px 20px; margin-inline-start:auto; }
.sp-files { display:flex; flex-wrap:wrap; gap:6px; }
.sp-files:empty { display:none; }
.sp-file-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 10px; border:1px solid #c7dafb; border-radius:999px; background:var(--sp-blue-soft); color:var(--sp-navy); font-size:12px; }
.sp-file-chip bdi { direction:ltr; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-file-chip button { width:20px; height:20px; padding:0; border:0; border-radius:50%; background:#fff; color:var(--sp-red); line-height:1; cursor:pointer; }
.sp-conv-foot { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:8px 16px 12px; border-top:1px solid var(--sp-line); background:#fff; }
.sp-conv-foot:has(> :not([hidden])) { display:flex; }
.sp-done-note { flex:1 1 100%; margin:4px 0; padding:9px 12px; border-radius:10px; background:var(--sp-green-soft); color:var(--sp-green); font-size:13px; }
.sp-conv-foot .sp-btn,.sp-conv-foot .sp-btn-success { min-height:36px; padding:4px 14px; font-size:13px; }
.sp-conv-foot .sp-link-btn { margin-inline-start:auto; }

/* new message */
.sp-new { flex:1; overflow:auto; padding:18px 22px 22px; }
.sp-new-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 6px; }
.sp-new-head h2 { margin:0; color:var(--sp-navy); font-size:19px; }
.sp-new-context { margin:0 0 16px; color:var(--sp-muted); font-size:13px; }
.sp-chipset { padding:0; border:0; }
.sp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sp-chip { min-height:38px; padding:5px 14px; border:1px solid #c9d6e3; border-radius:999px; background:#fff; color:var(--sp-ink); font-size:13.5px; font-weight:600; cursor:pointer; }
.sp-chip:hover { border-color:var(--sp-blue); }
.sp-chip.is-active { border-color:var(--sp-blue); background:var(--sp-blue); color:#fff; }
.sp-case-line { margin:-6px 0 14px; padding:9px 12px; border-radius:10px; background:var(--sp-aqua-soft); color:#0b7a70; font-size:13px; }
.sp-attach { display:grid; gap:8px; margin:0 0 14px; }
.sp-new-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.sp-new-foot small { color:var(--sp-muted); font-size:12.5px; }
.sp-new-foot .sp-btn-primary { padding:8px 26px; }

/* ---------- side panel (staff) ---------- */
.sp-side-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px; }
.sp-side-head h3 { margin:0; color:var(--sp-navy); font-size:15px; }
.sp-side-head .sp-icon-btn { display:none; width:34px; min-height:34px; font-size:20px; }
.sp-who { padding:0 14px 12px; border-bottom:1px solid var(--sp-line); }
.sp-side-placeholder { margin:4px 0 8px; color:var(--sp-muted); font-size:13px; line-height:1.7; }
.crp-support.sp:not(.has-ticket) .sp-manage,.crp-support.sp:not(.has-ticket) .sp-side-mail,.crp-support.sp:not(.has-ticket) .sp-professional { display:none; }
.sp-info-btn { display:none; }
.sp-who-card { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sp-who-card .sp-avatar { width:42px; height:42px; }
.sp-who-top { display:flex; align-items:center; gap:6px; }
.sp-who-top b { color:var(--sp-navy); font-size:15px; }
.sp-who-card small { display:block; color:var(--sp-muted); font-size:12px; }
.sp-facts { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; margin:0; font-size:12.5px; }
.sp-facts dt { color:var(--sp-muted); }
.sp-facts dd { margin:0; overflow:hidden; text-overflow:ellipsis; color:var(--sp-ink); font-weight:600; }
.sp-facts a { color:var(--sp-blue); text-decoration:none; }
.sp-manage { display:grid; gap:10px; padding:12px 14px; border-bottom:1px solid var(--sp-line); }
.sp-manage label { display:grid; gap:4px; }
.sp-manage select { min-height:40px!important; font-size:14px!important; }
.sp-side-mail { margin:0; padding:10px 14px; color:var(--sp-muted); font-size:12px; }
.sp-side-mail:empty { display:none; }
.sp-professional { margin:0 14px 14px; padding:10px 12px; border:1px solid var(--sp-line); border-radius:12px; background:var(--sp-bg); font-size:13px; }
.sp-professional summary { color:var(--sp-navy); font-weight:700; cursor:pointer; }
.sp-professional p { margin:8px 0; color:var(--sp-muted); font-size:12.5px; }
.sp-professional form { display:grid; gap:10px; }
.sp-professional label { display:grid; gap:4px; }

/* ---------- settings dialog ---------- */
.sp-dialog { width:min(94vw,640px); padding:0; border:1px solid var(--sp-line); border-radius:18px; box-shadow:0 24px 60px rgba(7,29,50,.28); direction:rtl; text-align:right; font-family:var(--tebtok-font); color:var(--sp-ink); }
.sp-dialog::backdrop { background:rgba(7,29,50,.45); }
.sp-settings { display:grid; gap:12px; padding:18px 22px 20px; }
.sp-settings header { display:flex; align-items:center; justify-content:space-between; }
.sp-settings h3 { margin:0; color:var(--sp-navy); font-size:18px; }
.sp-settings header .sp-icon-btn { width:34px; min-height:34px; font-size:20px; }
.sp-settings label { display:grid; gap:5px; }
.sp-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sp-settings code { padding:1px 6px; border-radius:6px; background:var(--sp-bg); font-size:12px; }
.sp-settings footer { display:flex; justify-content:space-between; gap:10px; margin-top:4px; }

/* ---------- responsive ---------- */
@media (max-width:1180px) {
    .is-staff .sp-work { grid-template-columns:var(--sp-list-w) minmax(0,1fr); }
    .is-staff .sp-side { position:fixed; z-index:90; inset:0 auto 0 0; width:min(92vw,340px); max-height:none; border-radius:0; box-shadow:12px 0 40px rgba(7,29,50,.25); transform:translateX(-105%); transition:transform .2s ease; }
    .is-staff.is-side-open .sp-side { transform:none; }
    .sp-side-head .sp-icon-btn { display:inline-flex; }
    .sp-info-btn { display:inline-flex; }
}
@media (max-width:900px) {
    .crp-support.sp { --sp-h:auto; }
    .crp-support.sp:not(.is-embedded) { padding:14px 12px 24px; }
    .sp-top { flex-direction:column; align-items:flex-start; gap:12px; }
    .sp-auth-cards { grid-template-columns:minmax(0,1fr); }
    .sp-work,.is-staff .sp-work { grid-template-columns:minmax(0,1fr); gap:12px; }
    .sp-list,.sp-thread { height:auto; min-height:0; }
    .sp-tickets { max-height:none; overflow:visible; }
    .sp-thread { display:none; }
    .sp-show-thread .sp-thread { display:flex; }
    .sp-show-thread .sp-list { display:none; }
    .sp-back { display:inline-flex; }
    .sp-conv-head { padding:12px 12px; align-items:flex-start; }
    .sp-conv-title h2 { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:16px; }
    .sp-conv-title p { white-space:normal; }
    .sp-messages { max-height:none; min-height:220px; padding:14px 12px 6px; }
    .sp-msg { max-width:92%; }
    .sp-composer { position:sticky; bottom:0; z-index:5; padding:8px 10px 10px; box-shadow:0 -8px 24px rgba(7,29,50,.06); }
    .sp-composer-note { display:none; }
    .sp-new { padding:16px 14px 20px; }
    .sp-new-foot { flex-direction:column; align-items:stretch; }
    .sp-new-foot .sp-btn-primary { width:100%; }
    .sp-conv-foot { padding:8px 12px 10px; }
    .sp-grid-2 { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:480px) {
    .sp-segments button { font-size:11.5px; padding:4px 3px; }
    .sp-search { grid-template-columns:minmax(0,1fr); }
    .sp-search select { width:100%!important; }
    .sp-conv-title h2 { font-size:15.5px; }
    .sp-state { font-size:11px; }
}

/* 7.4.20 — گارد رنگ دکمه‌ها در برابر CSS قالب سایت (متن و زمینه همیشه هم‌خوان و خوانا) */
.crp-support.sp button,.crp-support.sp .sp-btn,.crp-support.sp .sp-btn-primary,.crp-support.sp .sp-icon-btn,.crp-support.sp .sp-link-btn,.crp-support.sp .sp-chip,.crp-support.sp .sp-ticket,.crp-support.sp .sp-older,.crp-support.sp .sp-attach-btn { text-shadow:none; box-shadow:none; text-transform:none; letter-spacing:0; line-height:1.6; font-family:inherit; }
.crp-support.sp .sp-btn,.crp-support.sp .sp-icon-btn { background:#fff; color:var(--sp-navy); border:1px solid var(--sp-line); }
.crp-support.sp .sp-btn:hover,.crp-support.sp .sp-icon-btn:hover { background:#f7faff; color:var(--sp-navy); border-color:#b9cdf0; }
.crp-support.sp .sp-btn-primary,.crp-support.sp .sp-btn-primary:hover,.crp-support.sp .sp-btn-primary:focus { color:#fff; }
.crp-support.sp .sp-btn-primary { background:var(--sp-blue); border:1px solid var(--sp-blue); }
.crp-support.sp .sp-btn-primary:hover { background:var(--tebtok-blue-hover,#1a58c9); border-color:var(--tebtok-blue-hover,#1a58c9); }
.crp-support.sp .sp-btn-success,.crp-support.sp .sp-btn-success:hover { color:var(--sp-green); border:1px solid #bfe3cc; background:var(--sp-green-soft); }
.crp-support.sp .sp-link-btn { background:transparent; border:0; color:var(--sp-muted); box-shadow:none; }
.crp-support.sp .sp-link-btn:hover { color:var(--sp-red); background:transparent; }
.crp-support.sp .sp-chip { background:#fff; color:var(--sp-ink); border:1px solid #c9d6e3; }
.crp-support.sp .sp-chip:hover { border-color:var(--sp-blue); color:var(--sp-ink); background:#fff; }
.crp-support.sp .sp-chip.is-active,.crp-support.sp .sp-chip.is-active:hover { background:var(--sp-blue); color:#fff; border-color:var(--sp-blue); }
.crp-support.sp .sp-segments button { background:transparent; color:var(--sp-muted); border:0; }
.crp-support.sp .sp-segments button.is-active { background:#fff; color:var(--sp-navy); }
.crp-support.sp .sp-ticket { background:transparent; color:var(--sp-ink); border:1px solid transparent; }
.crp-support.sp .sp-ticket:hover { background:var(--sp-bg); color:var(--sp-ink); }
.crp-support.sp .sp-ticket.is-selected { background:var(--sp-blue-soft); border-color:#c7dafb; color:var(--sp-ink); }
.crp-support.sp .sp-older,.crp-support.sp .sp-msg-files button { background:#fff; color:var(--sp-blue); }
.crp-support.sp .sp-file-chip button { background:#fff; color:var(--sp-red); border:0; }
.crp-support.sp .sp-attach-btn { background:#fff; color:var(--sp-muted); }
.crp-support.sp .sp-attach-btn:hover { color:var(--sp-navy); }
.crp-support.sp button:disabled { opacity:.55; }