/* Elryan Help Center: tokens, components and shell. Generated from the design system. */
:root, [data-theme="ishtar-light"] { --background: #f3f5fb; --card: #ffffff; --muted: #ebeff8; --foreground: #0f1a3c; --muted-foreground: #56628a; --border: #dfe5f1; --primary: #2448d8; --primary-foreground: #ffffff; --accent: #b58116; --ring: var(--primary); --destructive: #d92d4a; --internal-bg: #fff7e3; --internal-stripe: #f6e3b4; --internal-edge: #d99a16; --internal-ink: #8a5a00; --status-new: #0369a1; --status-new-bg: #e0f2fe; --status-review: #4338ca; --status-review-bg: #e0e7ff; --status-customer: #b45309; --status-customer-bg: #fef3c7; --status-vendor: #7e22ce; --status-vendor-bg: #f3e8ff; --status-approval: #c2410c; --status-approval-bg: #ffedd5; --status-resolved: #15803d; --status-resolved-bg: #dcfce7; --status-closed: #475569; --status-closed-bg: #f1f5f9; --status-escalated: #be123c; --status-escalated-bg: #ffe4e6; --type-order: #2563eb; --type-maintenance: #0d9488; --type-coupon: #db2777; --type-points: #b37b04; --type-technical: #7c3aed; --type-finance: #059669; --type-inquiry: #0891b2; --type-listing: #ea580c; --shadow-float: 0 6px 20px -8px rgba(15, 26, 60, 0.25); --shadow-dialog: 0 24px 60px -20px rgba(15, 26, 60, 0.35); }
[data-theme="ishtar-dark"] { --background: #0a1230; --card: #101b40; --muted: #16224d; --foreground: #e9eeff; --muted-foreground: #9aa6cc; --border: #24315f; --primary: #7d96ff; --primary-foreground: #0a1230; --accent: #f4c35c; --ring: var(--primary); --destructive: #ff6b81; --internal-bg: #2a2210; --internal-stripe: #3a2f14; --internal-edge: #e8b44a; --internal-ink: #f2cd7e; --status-new: #7dd3fc; --status-new-bg: rgba(56, 189, 248, 0.16); --status-review: #a5b4fc; --status-review-bg: rgba(129, 140, 248, 0.18); --status-customer: #fcd34d; --status-customer-bg: rgba(251, 191, 36, 0.16); --status-vendor: #d8b4fe; --status-vendor-bg: rgba(192, 132, 252, 0.16); --status-approval: #fdba74; --status-approval-bg: rgba(251, 146, 60, 0.16); --status-resolved: #86efac; --status-resolved-bg: rgba(74, 222, 128, 0.16); --status-closed: #cbd5e1; --status-closed-bg: rgba(148, 163, 184, 0.16); --status-escalated: #fda4af; --status-escalated-bg: rgba(251, 113, 133, 0.16); --type-order: #60a5fa; --type-maintenance: #2dd4bf; --type-coupon: #f472b6; --type-points: #facc15; --type-technical: #a78bfa; --type-finance: #34d399; --type-inquiry: #22d3ee; --type-listing: #fb923c; --shadow-float: 0 6px 20px -8px rgba(0, 0, 0, 0.5); --shadow-dialog: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
[data-theme="tigris-light"] { --background: #f1f7f7; --card: #ffffff; --muted: #e6f0f0; --foreground: #0c2a2c; --muted-foreground: #4f6e70; --border: #d8e7e7; --primary: #0a7d79; --primary-foreground: #ffffff; --accent: #ec5c40; --ring: var(--primary); --destructive: #d92d4a; --internal-bg: #fff7e3; --internal-stripe: #f6e3b4; --internal-edge: #d99a16; --internal-ink: #8a5a00; --status-new: #0369a1; --status-new-bg: #e0f2fe; --status-review: #4338ca; --status-review-bg: #e0e7ff; --status-customer: #b45309; --status-customer-bg: #fef3c7; --status-vendor: #7e22ce; --status-vendor-bg: #f3e8ff; --status-approval: #c2410c; --status-approval-bg: #ffedd5; --status-resolved: #15803d; --status-resolved-bg: #dcfce7; --status-closed: #475569; --status-closed-bg: #f1f5f9; --status-escalated: #be123c; --status-escalated-bg: #ffe4e6; --type-order: #2563eb; --type-maintenance: #0d9488; --type-coupon: #db2777; --type-points: #b37b04; --type-technical: #7c3aed; --type-finance: #059669; --type-inquiry: #0891b2; --type-listing: #ea580c; --shadow-float: 0 6px 20px -8px rgba(15, 26, 60, 0.25); --shadow-dialog: 0 24px 60px -20px rgba(15, 26, 60, 0.35); }
[data-theme="tigris-dark"] { --background: #061b1d; --card: #0c2629; --muted: #113135; --foreground: #e2f4f3; --muted-foreground: #8bafae; --border: #1a3d40; --primary: #39c6bf; --primary-foreground: #04201f; --accent: #ff8c75; --ring: var(--primary); --destructive: #ff6b81; --internal-bg: #2a2210; --internal-stripe: #3a2f14; --internal-edge: #e8b44a; --internal-ink: #f2cd7e; --status-new: #7dd3fc; --status-new-bg: rgba(56, 189, 248, 0.16); --status-review: #a5b4fc; --status-review-bg: rgba(129, 140, 248, 0.18); --status-customer: #fcd34d; --status-customer-bg: rgba(251, 191, 36, 0.16); --status-vendor: #d8b4fe; --status-vendor-bg: rgba(192, 132, 252, 0.16); --status-approval: #fdba74; --status-approval-bg: rgba(251, 146, 60, 0.16); --status-resolved: #86efac; --status-resolved-bg: rgba(74, 222, 128, 0.16); --status-closed: #cbd5e1; --status-closed-bg: rgba(148, 163, 184, 0.16); --status-escalated: #fda4af; --status-escalated-bg: rgba(251, 113, 133, 0.16); --type-order: #60a5fa; --type-maintenance: #2dd4bf; --type-coupon: #f472b6; --type-points: #facc15; --type-technical: #a78bfa; --type-finance: #34d399; --type-inquiry: #22d3ee; --type-listing: #fb923c; --shadow-float: 0 6px 20px -8px rgba(0, 0, 0, 0.5); --shadow-dialog: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
[data-theme="zagros-light"] { --background: #f2f6f1; --card: #ffffff; --muted: #e7efe6; --foreground: #13291b; --muted-foreground: #566d5b; --border: #dce7db; --primary: #2b744a; --primary-foreground: #ffffff; --accent: #2f8fd6; --ring: var(--primary); --destructive: #d92d4a; --internal-bg: #fff7e3; --internal-stripe: #f6e3b4; --internal-edge: #d99a16; --internal-ink: #8a5a00; --status-new: #0369a1; --status-new-bg: #e0f2fe; --status-review: #4338ca; --status-review-bg: #e0e7ff; --status-customer: #b45309; --status-customer-bg: #fef3c7; --status-vendor: #7e22ce; --status-vendor-bg: #f3e8ff; --status-approval: #c2410c; --status-approval-bg: #ffedd5; --status-resolved: #15803d; --status-resolved-bg: #dcfce7; --status-closed: #475569; --status-closed-bg: #f1f5f9; --status-escalated: #be123c; --status-escalated-bg: #ffe4e6; --type-order: #2563eb; --type-maintenance: #0d9488; --type-coupon: #db2777; --type-points: #b37b04; --type-technical: #7c3aed; --type-finance: #059669; --type-inquiry: #0891b2; --type-listing: #ea580c; --shadow-float: 0 6px 20px -8px rgba(15, 26, 60, 0.25); --shadow-dialog: 0 24px 60px -20px rgba(15, 26, 60, 0.35); }
[data-theme="zagros-dark"] { --background: #0a190f; --card: #112418; --muted: #163020; --foreground: #e4f1e7; --muted-foreground: #92ad98; --border: #21402c; --primary: #5bc489; --primary-foreground: #06200f; --accent: #6db9f2; --ring: var(--primary); --destructive: #ff6b81; --internal-bg: #2a2210; --internal-stripe: #3a2f14; --internal-edge: #e8b44a; --internal-ink: #f2cd7e; --status-new: #7dd3fc; --status-new-bg: rgba(56, 189, 248, 0.16); --status-review: #a5b4fc; --status-review-bg: rgba(129, 140, 248, 0.18); --status-customer: #fcd34d; --status-customer-bg: rgba(251, 191, 36, 0.16); --status-vendor: #d8b4fe; --status-vendor-bg: rgba(192, 132, 252, 0.16); --status-approval: #fdba74; --status-approval-bg: rgba(251, 146, 60, 0.16); --status-resolved: #86efac; --status-resolved-bg: rgba(74, 222, 128, 0.16); --status-closed: #cbd5e1; --status-closed-bg: rgba(148, 163, 184, 0.16); --status-escalated: #fda4af; --status-escalated-bg: rgba(251, 113, 133, 0.16); --type-order: #60a5fa; --type-maintenance: #2dd4bf; --type-coupon: #f472b6; --type-points: #facc15; --type-technical: #a78bfa; --type-finance: #34d399; --type-inquiry: #22d3ee; --type-listing: #fb923c; --shadow-float: 0 6px 20px -8px rgba(0, 0, 0, 0.5); --shadow-dialog: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
[data-theme="citadel-light"] { --background: #f6f3f9; --card: #ffffff; --muted: #eee8f4; --foreground: #22163a; --muted-foreground: #6a5d80; --border: #e6deef; --primary: #6a3dc0; --primary-foreground: #ffffff; --accent: #c27b1c; --ring: var(--primary); --destructive: #d92d4a; --internal-bg: #fff7e3; --internal-stripe: #f6e3b4; --internal-edge: #d99a16; --internal-ink: #8a5a00; --status-new: #0369a1; --status-new-bg: #e0f2fe; --status-review: #4338ca; --status-review-bg: #e0e7ff; --status-customer: #b45309; --status-customer-bg: #fef3c7; --status-vendor: #7e22ce; --status-vendor-bg: #f3e8ff; --status-approval: #c2410c; --status-approval-bg: #ffedd5; --status-resolved: #15803d; --status-resolved-bg: #dcfce7; --status-closed: #475569; --status-closed-bg: #f1f5f9; --status-escalated: #be123c; --status-escalated-bg: #ffe4e6; --type-order: #2563eb; --type-maintenance: #0d9488; --type-coupon: #db2777; --type-points: #b37b04; --type-technical: #7c3aed; --type-finance: #059669; --type-inquiry: #0891b2; --type-listing: #ea580c; --shadow-float: 0 6px 20px -8px rgba(15, 26, 60, 0.25); --shadow-dialog: 0 24px 60px -20px rgba(15, 26, 60, 0.35); }
[data-theme="citadel-dark"] { --background: #130c21; --card: #1d142f; --muted: #261b3d; --foreground: #f0eafb; --muted-foreground: #a696bf; --border: #33264d; --primary: #a98bff; --primary-foreground: #150b2a; --accent: #f4b556; --ring: var(--primary); --destructive: #ff6b81; --internal-bg: #2a2210; --internal-stripe: #3a2f14; --internal-edge: #e8b44a; --internal-ink: #f2cd7e; --status-new: #7dd3fc; --status-new-bg: rgba(56, 189, 248, 0.16); --status-review: #a5b4fc; --status-review-bg: rgba(129, 140, 248, 0.18); --status-customer: #fcd34d; --status-customer-bg: rgba(251, 191, 36, 0.16); --status-vendor: #d8b4fe; --status-vendor-bg: rgba(192, 132, 252, 0.16); --status-approval: #fdba74; --status-approval-bg: rgba(251, 146, 60, 0.16); --status-resolved: #86efac; --status-resolved-bg: rgba(74, 222, 128, 0.16); --status-closed: #cbd5e1; --status-closed-bg: rgba(148, 163, 184, 0.16); --status-escalated: #fda4af; --status-escalated-bg: rgba(251, 113, 133, 0.16); --type-order: #60a5fa; --type-maintenance: #2dd4bf; --type-coupon: #f472b6; --type-points: #facc15; --type-technical: #a78bfa; --type-finance: #34d399; --type-inquiry: #22d3ee; --type-listing: #fb923c; --shadow-float: 0 6px 20px -8px rgba(0, 0, 0, 0.5); --shadow-dialog: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
:root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-tile: 8px; --radius-control: 10px; --radius-card: 12px; --radius-panel: 16px; --radius-pill: 999px; --row-comfortable: 56px; --row-compact: 40px; --control-comfortable: 40px; --control-compact: 32px; --hit-touch: 44px; --tile-type: 28px; --tile-journey: 36px; --sidebar: 248px; --sidebar-collapsed: 72px; --topbar: 64px; --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 600ms; --dur-reveal: 450ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1); --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --font-arabic: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; }
/* Elryan Help Center — component styles. Every value comes from tokens.css. */
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 21px; background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; }
[dir="rtl"], :lang(ar) { font-family: var(--font-arabic); line-height: 1.7; letter-spacing: 0; }
.hc-stage { padding: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hc-col { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.hc-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; unicode-bidi: isolate; direction: ltr; }
.hc-muted { color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.hc-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hc-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* Icons: Lucide, stroke 1.75 */
.hc-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hc-ic--sm { width: 16px; height: 16px; }
[dir="rtl"] .hc-ic--dir { transform: scaleX(-1); }

/* Button */
.hc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-comfortable); padding: 0 var(--space-4); border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--card); color: var(--foreground); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.hc-btn:hover { background: var(--muted); }
.hc-btn:active { transform: scale(0.98); }
.hc-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hc-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.hc-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.hc-btn--primary:hover { background: var(--primary); filter: brightness(1.08); }
.hc-btn--ghost { background: transparent; border-color: transparent; color: var(--foreground); }
.hc-btn--escalate { color: var(--status-escalated); border-color: var(--status-escalated); background: var(--card); }
.hc-btn--escalate:hover { background: var(--status-escalated-bg); }
.hc-btn--block { width: 100%; justify-content: flex-start; }
.hc-compact .hc-btn { height: var(--control-compact); padding: 0 var(--space-3); font-size: 13px; }

/* Segmented control */
.hc-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--muted); border-radius: var(--radius-control); }
.hc-seg button { height: 32px; padding: 0 var(--space-3); border: 0; border-radius: 8px; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hc-seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 0 0 1px var(--border); }
.hc-seg button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* Status pill and escalated flag */
.hc-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hc-pill--new { color: var(--status-new); background: var(--status-new-bg); }
.hc-pill--review { color: var(--status-review); background: var(--status-review-bg); }
.hc-pill--customer { color: var(--status-customer); background: var(--status-customer-bg); }
.hc-pill--vendor { color: var(--status-vendor); background: var(--status-vendor-bg); }
.hc-pill--approval { color: var(--status-approval); background: var(--status-approval-bg); }
.hc-pill--resolved { color: var(--status-resolved); background: var(--status-resolved-bg); }
.hc-pill--closed { color: var(--status-closed); background: var(--status-closed-bg); }
.hc-flag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 6px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--status-escalated); background: var(--status-escalated-bg); }
.hc-pill.is-changed::before { animation: hc-pulse var(--dur-4) var(--ease-out) 1; }
@keyframes hc-pulse { 50% { transform: scale(1.6); } }

/* Case-type tile */
.hc-tile { width: var(--tile-type); height: var(--tile-type); border-radius: var(--radius-tile); display: inline-grid; place-items: center; color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, var(--card)); flex: none; }
[data-theme$="-dark"] .hc-tile, .hc-tile[data-mode="dark"] { background: color-mix(in srgb, var(--hue) 20%, var(--card)); }
.hc-tile--order { --hue: var(--type-order); } .hc-tile--maintenance { --hue: var(--type-maintenance); }
.hc-tile--coupon { --hue: var(--type-coupon); } .hc-tile--points { --hue: var(--type-points); }
.hc-tile--technical { --hue: var(--type-technical); } .hc-tile--finance { --hue: var(--type-finance); }
.hc-tile--inquiry { --hue: var(--type-inquiry); } .hc-tile--listing { --hue: var(--type-listing); }

/* Settings marker */
.hc-marker { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); cursor: pointer; vertical-align: middle; transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.hc-marker:hover { color: var(--primary); background: var(--muted); }
.hc-marker:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.hc-rule { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; color: var(--foreground); }

/* Journey rail (signature) */
.hc-rail { display: flex; align-items: flex-start; padding: var(--space-4) var(--space-2); }
.hc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; flex: none; text-align: center; }
.hc-jt { position: relative; width: var(--tile-journey); height: var(--tile-journey); border-radius: var(--radius-tile); border: 1.5px solid var(--border); background: var(--card); color: var(--muted-foreground); display: grid; place-items: center; transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.hc-jt > svg { grid-area: 1 / 1; }
.hc-jt .hc-check { opacity: 0; }
.hc-jt .hc-check path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--dur-2) var(--ease-out); }
.hc-jl { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.hc-step.is-done .hc-jt { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.hc-jt .hc-stage-ic { transition: opacity var(--dur-1) var(--ease-out); }
.hc-step.is-done .hc-jt .hc-stage-ic { opacity: 0; }
.hc-step.is-done .hc-jt .hc-check { opacity: 1; }
.hc-step.is-done .hc-jt .hc-check path { stroke-dashoffset: 0; }
.hc-step.is-current .hc-jt { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); animation: hc-breathe 3s ease-in-out 3; }
.hc-step.is-current .hc-jl { color: var(--foreground); font-weight: 600; }
.hc-step.is-skipped .hc-jt { border-style: dashed; }
.hc-step.is-arriving .hc-jt { animation: hc-settle var(--dur-3) var(--ease-settle) 1, hc-breathe 3s ease-in-out var(--dur-3) 3; }
.hc-step.is-arriving .hc-jt::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; background: var(--accent); opacity: 0; animation: hc-flash 400ms var(--ease-out) 1; pointer-events: none; }
.hc-conn { flex: 1; min-width: 16px; height: 2px; margin-top: 17px; background: var(--border); position: relative; overflow: hidden; }
.hc-conn::after { content: ""; position: absolute; inset: 0; background: var(--primary); transform: scaleX(0); transform-origin: left center; transition: transform 300ms var(--ease-out); }
[dir="rtl"] .hc-conn::after { transform-origin: right center; }
.hc-conn.is-filled::after { transform: scaleX(1); }
@keyframes hc-settle { from { transform: scale(0.92); } to { transform: scale(1); } }
@keyframes hc-flash { 0% { opacity: 0; } 35% { opacity: 0.35; } 100% { opacity: 0; } }
@keyframes hc-breathe { 0%, 100% { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); } 50% { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent); } }

/* Next step card */
.hc-next { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); overflow: hidden; transition: height var(--dur-3) var(--ease-out); }
.hc-next__eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.hc-next__title { margin: var(--space-1) 0 var(--space-1); font-size: 18px; line-height: 24px; font-weight: 600; }
.hc-next__why { margin: 0 0 var(--space-3); color: var(--muted-foreground); font-size: 13px; line-height: 18px; }
.hc-next__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.hc-next__body { transition: opacity var(--dur-2) var(--ease-out); }
.hc-next__body.is-leaving { opacity: 0; }
.hc-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hc-checklist li { display: flex; gap: var(--space-2); align-items: center; font-size: 13px; }
.hc-checklist .hc-ok { color: var(--status-resolved); }
.hc-counters { display: grid; gap: 6px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* Internal surface */
.hc-internal { border: 1px dashed var(--internal-edge); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); color: var(--foreground); background-color: var(--internal-bg); background-image: repeating-linear-gradient(135deg, var(--internal-stripe) 0 1px, transparent 1px 6px); }
.hc-internal__label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--internal-ink); }
.hc-internal__label .hc-ic { color: var(--internal-edge); }
.hc-internal__label span + span { color: var(--internal-ink); font-weight: 400; }
.hc-radio { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0; font-size: 14px; cursor: pointer; }
.hc-radio input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
.hc-radio small { color: var(--muted-foreground); font-size: 12px; }

/* Conversation */
.hc-thread { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.hc-day { align-self: center; font-size: 12px; color: var(--muted-foreground); padding: 2px 10px; border-radius: var(--radius-pill); background: var(--muted); }
.hc-msg { max-width: 78%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); font-size: 16px; line-height: 24px; }
.hc-msg__meta { display: flex; gap: var(--space-2); align-items: center; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.hc-msg--customer { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-start-start-radius: 4px; }
.hc-msg--agent { align-self: flex-end; background: color-mix(in srgb, var(--primary) 10%, var(--card)); border-start-end-radius: 4px; }
.hc-msg[dir="rtl"], .hc-msg :lang(ar) { line-height: 27px; }
.hc-event { align-self: center; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted-foreground); }
.hc-thumbs { display: flex; gap: 6px; margin-top: 6px; }
.hc-thumb { width: 56px; height: 42px; border-radius: 8px; background: var(--muted); border: 1px solid var(--border); display: grid; place-items: center; color: var(--muted-foreground); }
.hc-arrive { animation: hc-rise var(--dur-2) var(--ease-out) 1; }
@keyframes hc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Composer */
.hc-composer { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); padding: var(--space-3); display: grid; gap: var(--space-2); transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.hc-composer textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: 16px; line-height: 24px; padding: 0; }
.hc-composer textarea:focus { outline: none; }
.hc-composer:focus-within { border-color: var(--primary); }
.hc-composer__foot { display: flex; align-items: center; gap: var(--space-2); }
.hc-composer__hint { flex: 1; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.hc-composer.is-internal { border: 1px dashed var(--internal-edge); background-color: var(--internal-bg); background-image: repeating-linear-gradient(135deg, var(--internal-stripe) 0 1px, transparent 1px 6px); }
.hc-composer.is-internal .hc-composer__hint { color: var(--internal-ink); }

/* Eligibility ring */
.hc-ring { display: flex; align-items: center; gap: var(--space-3); }
.hc-ring__wrap svg { width: 64px; height: 64px; transform: rotate(-90deg); }
[dir="rtl"] .hc-ring__wrap svg { transform: rotate(-90deg) scaleY(-1); }
.hc-ring__track { stroke: var(--border); }
.hc-ring__arc { stroke: var(--status-resolved); stroke-linecap: round; }
.hc-ring.is-past .hc-ring__arc { stroke: var(--status-escalated); }
.hc-ring__wrap { position: relative; width: 64px; height: 64px; }
.hc-ring__value { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.hc-ring__text { display: grid; gap: 2px; font-size: 13px; }

/* Approval card and stamp */
.hc-approval { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); display: grid; gap: var(--space-2); overflow: hidden; }
.hc-approval__head { display: flex; align-items: center; gap: var(--space-2); }
.hc-approval__evidence { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-1) var(--space-4); justify-content: start; font-size: 13px; }
.hc-approval__evidence dt { color: var(--muted-foreground); font-size: 12px; }
.hc-approval__evidence dd { margin: 0; }
.hc-approval__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.hc-stamp { position: absolute; inset-inline-end: var(--space-6); top: 56px; padding: 4px 14px; border: 2px solid currentColor; border-radius: var(--radius-control); font-size: 18px; font-weight: 700; transform: rotate(-6deg); opacity: 0; pointer-events: none; }
.hc-stamp.is-approved { color: var(--status-resolved); background: var(--status-resolved-bg); }
.hc-stamp.is-declined { color: var(--status-closed); background: var(--status-closed-bg); }
.hc-stamp.is-in { opacity: 1; animation: hc-stamp var(--dur-3) var(--ease-settle) 1; }
@keyframes hc-stamp { from { opacity: 0; transform: rotate(-6deg) scale(1.3); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }

/* Toast */
.hc-toasts { position: relative; min-height: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.hc-toast { display: flex; align-items: center; gap: var(--space-3); min-width: 260px; padding: var(--space-3) var(--space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-float); font-size: 14px; animation: hc-toast-in var(--dur-2) var(--ease-out) 1; }
.hc-toast .hc-ic { color: var(--status-resolved); }
.hc-toast__msg { flex: 1; }
@keyframes hc-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Ticket row */
.hc-list { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); overflow: hidden; }
.hc-row { display: grid; grid-template-columns: 28px 64px minmax(120px, 1.2fr) minmax(140px, 1.6fr) 84px 150px 20px 28px 64px 8px; align-items: center; gap: var(--space-3); min-height: var(--row-comfortable); padding: 0 var(--space-4); border-top: 1px solid var(--border); cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.hc-row:first-child { border-top: 0; }
.hc-row:hover { background: var(--muted); }
.hc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hc-compact .hc-row { min-height: var(--row-compact); }
.hc-row__num { font-weight: 600; }
.hc-row__who { display: grid; line-height: 18px; }
.hc-row__who small { color: var(--muted-foreground); font-size: 12px; }
.hc-row__subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-dots { display: flex; gap: 4px; }
.hc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.hc-dots i.done { background: var(--primary); }
.hc-dots i.now { background: var(--accent); }
.hc-prio--urgent { color: var(--status-escalated); } .hc-prio--high { color: var(--status-approval); }
.hc-prio--medium { color: var(--status-new); } .hc-prio--low { color: var(--status-closed); }
.hc-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--card)); }
.hc-avatar--none { background: transparent; border: 1.5px dashed var(--border); color: var(--muted-foreground); }
.hc-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }

/* Theme card */
.hc-themes { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: var(--space-3); }
.hc-theme { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-2); background: var(--background); color: var(--foreground); cursor: pointer; text-align: start; font: inherit; display: grid; gap: var(--space-2); transition: box-shadow var(--dur-2) var(--ease-out); }
.hc-theme:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.hc-theme[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--accent); }
.hc-theme__mini { height: 64px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); padding: 8px; display: grid; gap: 6px; align-content: start; }
.hc-theme__bar { height: 8px; width: 60%; border-radius: 4px; background: var(--primary); }
.hc-theme__line { height: 6px; width: 85%; border-radius: 3px; background: var(--muted); }
.hc-theme__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.hc-theme__name { font-size: 13px; font-weight: 600; padding: 0 2px; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important; }
[data-theme$="-dark"] { color-scheme: dark; }


/* ===== Workspace shell and layout ===== */
*,*::before,*::after{box-sizing:border-box}
.app{display:flex;flex-wrap:wrap;width:100%;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:14px;line-height:21px}
.app[lang="ar"]{font-family:var(--font-arabic);line-height:24px}
.app h1,.app h2,.app h3,.app p{margin:0}
.app button{font-family:inherit}
.side{width:var(--sidebar);flex:none;background:var(--card);border-inline-end:1px solid var(--border);padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:var(--space-4)}
.brandrow{display:flex;align-items:center;gap:var(--space-2);padding:4px var(--space-3) var(--space-2)}
.brandrow .hc-btn{margin-inline-start:auto;flex:none}
.brand{font-weight:700;font-size:20px;letter-spacing:-.01em}
.app[lang="ar"] .brand{letter-spacing:0}
.brand-s{color:var(--muted-foreground);font-size:13px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{position:relative;display:flex;align-items:center;gap:var(--space-3);height:40px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--foreground);text-decoration:none;font-weight:500;transition:background var(--dur-1) var(--ease-out)}
.nav a:hover{background:var(--muted)}
.nav a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.nav a[aria-current="page"]{background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary);font-weight:600}
.nav a[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.nav-l{flex:1}
.nav-b{min-width:22px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--muted);color:var(--foreground);font-size:12px;font-weight:600;display:grid;place-items:center}
.nav a[aria-current="page"] .nav-b{background:var(--primary);color:var(--primary-foreground)}
.me{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-top:1px solid var(--border)}
.me-t{display:grid;line-height:18px;flex:1}.me-t small{color:var(--muted-foreground);font-size:12px}
.dot-on{width:8px;height:8px;border-radius:50%;background:var(--status-resolved)}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.top{height:var(--topbar);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-6);background:var(--card);border-bottom:1px solid var(--border);flex-wrap:wrap}
.crumb{font-size:22px;line-height:28px;font-weight:600}
.search{display:flex;align-items:center;gap:var(--space-2);height:40px;width:340px;max-width:100%;padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--muted);color:var(--muted-foreground);font-size:14px;cursor:pointer}
.search span{flex:1;text-align:start}
.search kbd{font:inherit;font-size:12px;padding:1px 6px;border:1px solid var(--border);border-radius:6px;background:var(--card)}
.top-sp{flex:1}
.icb{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);background:var(--card);color:var(--foreground);border-radius:var(--radius-control);cursor:pointer}
.bellc{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;border-radius:var(--radius-pill);background:var(--status-escalated);color:var(--card);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.page{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-6);flex:1}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-panel);padding:var(--space-4) var(--space-6)}
.panel--flush{padding:0;overflow:hidden}
.ph{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.ph h2{font-size:18px;line-height:24px;font-weight:600;flex:1}
.app[lang="ar"] .ph h2{line-height:26px}
.cols{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start}
.grow{flex:999 1 420px;min-width:0}.side-col{flex:1 1 300px;min-width:0;max-width:420px}
.greet{font-size:30px;line-height:36px;font-weight:650;letter-spacing:-.01em}
.app[lang="ar"] .greet{line-height:42px;letter-spacing:0;font-weight:600}
.sub{color:var(--muted-foreground);font-size:16px;line-height:24px}
.band{position:relative;overflow:hidden;border-radius:var(--radius-panel);background:var(--card);border:1px solid var(--border);padding:var(--space-6)}
.band svg.pat{position:absolute;inset-inline-end:0;top:0;height:100%;width:420px;opacity:.06;color:var(--primary);pointer-events:none}
.band>*:not(.pat){position:relative}
.item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-top:1px solid var(--border)}
.item:first-of-type{border-top:0}
.item .grow-t{flex:1;min-width:0;display:grid;line-height:18px}
.item small{color:var(--muted-foreground);font-size:12px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);background:var(--muted);color:var(--foreground);font-size:13px;font-weight:500;white-space:nowrap}
.chip--on{background:var(--primary);color:var(--primary-foreground)}
.chip b{font-weight:700}
.bar{display:flex;height:12px;border-radius:var(--radius-pill);overflow:hidden;gap:2px}
.bar i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-3);font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:50%}
.field{display:grid;gap:6px;font-size:13px;font-weight:500}
.input{height:40px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--card);color:var(--foreground);padding:0 var(--space-3);font:inherit;font-size:14px;width:100%}
.input[readonly]{background:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;padding:var(--space-3) var(--space-4);background:var(--muted);border-bottom:1px solid var(--border)}
.tabs{display:flex;gap:var(--space-4);border-bottom:1px solid var(--border);padding:0 var(--space-4)}
.tabs a,.tabs span{display:inline-flex;align-items:center;gap:6px;height:44px;color:var(--muted-foreground);font-weight:500;border-bottom:2px solid transparent;text-decoration:none}
.tabs .on{color:var(--foreground);border-bottom-color:var(--primary);font-weight:600}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:start;font-weight:500;font-size:12px;color:var(--muted-foreground);padding:10px var(--space-4);background:var(--muted);border-bottom:1px solid var(--border)}
.tbl td{padding:12px var(--space-4);border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-4);font-size:13px}
.kv dt{color:var(--muted-foreground)}.kv dd{margin:0}
.ws{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-start;padding:0 var(--space-6) var(--space-6)}
.ws-ctx{flex:1 1 300px;max-width:340px;display:flex;flex-direction:column;gap:var(--space-4)}
.ws-conv{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.ws-next{flex:1 1 340px;max-width:380px;display:flex;flex-direction:column;gap:var(--space-4)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-4)}
.card h3{font-size:14px;font-weight:600;margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}
.thead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6)}
.thead .tn{font-size:22px;font-weight:600;line-height:28px}
.thead .meta{color:var(--muted-foreground);font-size:13px}
.sel{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-control);background:var(--card);font-size:13px;font-weight:500}
.sel small{color:var(--muted-foreground);font-weight:400}
.railbox{margin:0 var(--space-6) var(--space-4);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-panel);padding:var(--space-2) var(--space-4);overflow-x:auto}
.banner{display:flex;align-items:center;gap:var(--space-3);margin:0 var(--space-6) var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-card);background:var(--status-escalated-bg);color:var(--status-escalated);font-weight:500}
.map{height:84px;border-radius:var(--radius-card);background:var(--muted);border:1px solid var(--border);position:relative;overflow:hidden}
.thumbs{display:flex;gap:6px;flex-wrap:wrap}
.thumb2{width:72px;height:54px;border-radius:8px;background:var(--muted);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted-foreground)}
.opt{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--card)}
.opt[aria-checked="true"]{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card))}
.opt.is-off{opacity:.55}
.opt strong{display:block}.opt small{color:var(--muted-foreground);font-size:12px}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--primary) 12%,var(--card));color:var(--primary);font-size:12px;font-weight:600}
.tag--mgr{background:var(--status-approval-bg);color:var(--status-approval)}
.cd{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-card);background:var(--status-customer-bg);color:var(--status-customer);font-weight:500}
.ledger td.hl,.ledger tr.hl td{background:color-mix(in srgb,var(--accent) 12%,var(--card))}
.sw{display:inline-block;width:40px;height:22px;border-radius:var(--radius-pill);background:var(--border);position:relative;vertical-align:middle}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--border)}
.sw.on{background:var(--primary)}.sw.on::after{inset-inline-start:21px;background:var(--primary-foreground)}
.sw.lock{opacity:.5}
.setrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--border)}
.setrow:first-of-type{border-top:0}
.setrow .lbl{flex:1 1 260px;display:grid;line-height:18px}.setrow .lbl small{color:var(--muted-foreground);font-size:12px}
.setrow .by{color:var(--muted-foreground);font-size:12px}
.subnav{display:flex;flex-direction:column;gap:2px;width:220px;flex:none}
.subnav a{display:flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--foreground);text-decoration:none}
.subnav a[aria-current="page"]{background:var(--muted);font-weight:600}
.chat{display:flex;flex-wrap:wrap;flex:1;min-height:760px}
.chat-l{width:300px;flex:none;border-inline-end:1px solid var(--border);padding:var(--space-4);background:var(--card);display:flex;flex-direction:column;gap:2px}
.chat-l h3{font-size:12px;font-weight:500;color:var(--muted-foreground);margin:var(--space-3) 0 4px}
.chat-l a{display:flex;align-items:center;gap:var(--space-2);height:34px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--foreground);text-decoration:none}
.chat-l a.on{background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary);font-weight:600}
.chat-l a.un{font-weight:700}
.chat-m{flex:999 1 420px;min-width:0;display:flex;flex-direction:column}
.chat-t{width:300px;flex:none;border-inline-start:1px solid var(--border);background:var(--card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.cm{display:flex;gap:var(--space-3);padding:var(--space-2) var(--space-6)}
.cm .nm{font-weight:600}.cm .tm{color:var(--muted-foreground);font-size:12px;margin-inline-start:var(--space-2);font-weight:400}
.cm p{font-size:15px;line-height:22px}
.mention{color:var(--primary);font-weight:500;background:color-mix(in srgb,var(--primary) 10%,transparent);border-radius:4px;padding:0 2px}
.cchip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 4px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--card);vertical-align:middle;font-size:13px}
.newdiv{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-6);color:var(--status-escalated);font-size:12px;font-weight:600}
.newdiv::before,.newdiv::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4}
.overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--foreground) 35%,transparent);display:flex;justify-content:center;padding-top:96px}
.palette{width:640px;max-width:92%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-panel);box-shadow:var(--shadow-dialog);overflow:hidden;align-self:flex-start}
.pal-in{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--border);font-size:16px}
.pal-g{padding:var(--space-2) var(--space-2);}
.pal-g h4{margin:var(--space-2) var(--space-3);font-size:12px;font-weight:500;color:var(--muted-foreground)}
.pal-r{display:flex;align-items:center;gap:var(--space-3);height:44px;padding:0 var(--space-3);border-radius:var(--radius-control)}
.pal-r.on{background:var(--muted)}.pal-r .h{color:var(--muted-foreground);font-size:12px}
.pal-r kbd{margin-inline-start:auto;font:inherit;font-size:12px;border:1px solid var(--border);border-radius:6px;padding:1px 6px;background:var(--card);color:var(--muted-foreground)}
.sheet{position:absolute;inset-block:0;inset-inline-end:0;width:400px;background:var(--card);border-inline-start:1px solid var(--border);box-shadow:var(--shadow-dialog);display:flex;flex-direction:column}
.sheet h3{font-size:18px;font-weight:600}
.nitem{display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border)}
.nitem.un{background:color-mix(in srgb,var(--primary) 6%,var(--card))}
.rel{position:relative}
.chart{width:100%;height:auto;display:block}
.chart text{font-family:inherit;fill:var(--muted-foreground);font-size:12px}
.phone{width:390px;min-height:844px;background:var(--background);color:var(--foreground);font-family:var(--font-sans);display:flex;flex-direction:column;font-size:14px}
.phone[lang="ar"]{font-family:var(--font-arabic)}
.phone h1,.phone h2,.phone h3,.phone p{margin:0}
.phone button{font-family:inherit}
.tabbar{position:sticky;bottom:0;display:flex;border-top:1px solid var(--border);background:var(--card);height:64px;margin-top:auto}
.tabbar a{flex:1;display:grid;place-items:center;align-content:center;gap:2px;font-size:11px;color:var(--muted-foreground);text-decoration:none;min-height:44px}
.tabbar a.on{color:var(--primary);font-weight:600}
.rail--s .hc-step{width:72px}
.jt-sm{width:32px;height:32px}
@media (prefers-reduced-motion:reduce){.app *{animation:none!important}}

/* ===== Prototype additions ===== */
.nav button{position:relative;display:flex;align-items:center;gap:var(--space-3);height:40px;width:100%;padding:0 var(--space-3);border-radius:var(--radius-control);border:0;background:transparent;color:var(--foreground);font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background var(--dur-1) var(--ease-out)}
.nav button:hover{background:var(--muted)}
.nav button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.nav button[aria-current="page"]{background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary);font-weight:600}
.nav button[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.nav button[aria-current="page"] .nav-b{background:var(--primary);color:var(--primary-foreground)}
.is-collapsed .side{width:var(--sidebar-collapsed)}
.is-collapsed .nav-l,.is-collapsed .brand-s,.is-collapsed .me-t,.is-collapsed .nav-b,.is-collapsed .dot-on{display:none}
.is-collapsed .nav button{justify-content:center;padding:0}
.is-collapsed .brandrow{justify-content:center;padding-inline:0}
.app,.app .panel,.app .card,.app .side,.app .top,.app .hc-row,.app .hc-composer,.app .hc-msg,.app .hc-next,.app .railbox,.app .input,.app .sel,.app .hc-btn{transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out)}
[data-motion="reduced"] *,[data-motion="reduced"] *::before,[data-motion="reduced"] *::after{animation-duration:.15s!important;transition-duration:.15s!important}
.toastw{position:fixed;inset-inline-end:24px;bottom:24px;z-index:60}
.dlg-o{position:fixed;inset:0;background:color-mix(in srgb,var(--foreground) 35%,transparent);display:grid;place-items:start center;padding-top:96px;z-index:40}
.dlg{width:480px;max-width:92%;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-panel);box-shadow:var(--shadow-dialog);padding:var(--space-6);display:grid;gap:var(--space-4)}
.demo{position:fixed;inset-inline-start:16px;bottom:16px;z-index:30;display:flex;gap:6px;align-items:center;padding:6px 10px;border:1px dashed var(--muted-foreground);border-radius:var(--radius-pill);background:var(--card);font-size:12px;color:var(--muted-foreground)}
.demo button{height:28px;padding:0 10px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--foreground);font:inherit;font-size:12px;cursor:pointer}
.demo button[aria-pressed="true"]{background:var(--primary);color:var(--primary-foreground)}
button.opt{width:100%;text-align:start;font:inherit;color:inherit;cursor:pointer}
button.opt[aria-pressed="true"]{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card))}
button.opt:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
button.nitem{width:100%;text-align:start;background:transparent;border:0;border-top:1px solid var(--border);font:inherit;color:inherit;cursor:pointer}
button.hc-row{width:100%;text-align:start;background:transparent;border:0;border-top:1px solid var(--border);font:inherit;color:inherit}
button.chip{border:0;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
button.chip:focus-visible,button.cchip:focus-visible,.sel-b:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.sel-b{cursor:pointer;font:inherit}
.hc-seg button:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
.chatbox{display:flex;flex-direction:column;gap:2px;padding:16px 0}

/* ===== Interactive prototype additions ===== */
.nav .navi{position:relative;display:flex;align-items:center;gap:var(--space-3);height:40px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--foreground);text-decoration:none;font:inherit;font-weight:500;background:transparent;border:0;width:100%;text-align:start;cursor:pointer;transition:background var(--dur-1) var(--ease-out)}
.nav .navi:hover{background:var(--muted)}
.nav .navi:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.nav .navi.on{background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary);font-weight:600}
.nav .navi.on::before{content:"";position:absolute;inset-inline-start:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.nav .navi.on .nav-b{background:var(--primary);color:var(--primary-foreground)}
button.hc-row{font:inherit;color:inherit;background:transparent;border:0;border-top:1px solid var(--border);width:100%;text-align:start;display:grid}
button.hc-row:hover{background:var(--muted)}
button.opt{font:inherit;color:inherit;text-align:start;width:100%;cursor:pointer}
.opt.sel{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card))}
.opt:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.chat-l button{display:flex;align-items:center;gap:var(--space-2);height:34px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--foreground);font:inherit;background:transparent;border:0;width:100%;text-align:start;cursor:pointer}
.chat-l button.on{background:color-mix(in srgb,var(--primary) 10%,var(--card));color:var(--primary);font-weight:600}
.chip{font:inherit;border:0;cursor:pointer}
button.chip{height:24px}
.demo{margin:0 var(--space-3);padding:var(--space-2);border:1px dashed var(--border);border-radius:var(--radius-card);display:grid;gap:6px;font-size:12px;color:var(--muted-foreground)}
.demo .hc-seg{width:100%}.demo .hc-seg button{flex:1;padding:0 6px;font-size:12px}
.tabs button{display:inline-flex;align-items:center;gap:6px;height:44px;color:var(--muted-foreground);font:inherit;font-weight:500;background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer}
.tabs button.on{color:var(--foreground);border-bottom-color:var(--primary);font-weight:600}
.hc-approval.is-gone{display:none}
.subnav .subi{display:flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--foreground);font:inherit;background:transparent;border:0;width:100%;text-align:start}
.subnav .subi.on{background:var(--muted);font-weight:600}