/* Lenci · Support — the floating help widget mounted on every page (support.js) and the /support page (support.html + support-page.js).
   Builds on studio.css tokens; logical properties so Arabic mirrors by itself. The widget keeps clear of the Claw lobster, the editor's
   phone rail and open panels (support.js measures them and raises or hides the button). */

/* ----------------------------------------------------------------- the floating button + panel */
.sp-root { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 58; display: grid; justify-items: end; gap: 10px; font-family: var(--latin, Inter, system-ui, sans-serif); font-size: 13.5px; line-height: 1.5; color: var(--ink, #ececf4); direction: inherit; }
[dir="rtl"] .sp-root { font-family: var(--arabic, Cairo, system-ui, sans-serif); justify-items: start; }
.sp-root[hidden] { display: none; }
.sp-root.sp-hide { pointer-events: none; } /* hidden (never while open): the empty corner must not catch the page's clicks */
.sp-root.sp-hide .sp-fab { opacity: 0; pointer-events: none; transform: scale(.85); }
.sp-fab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: linear-gradient(160deg, rgba(31,31,46,.92), rgba(16,16,24,.9)); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); color: var(--ink, #ececf4); font: 600 13px/1 var(--display, Sora, Inter, sans-serif); box-shadow: 0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(139,92,246,.18); cursor: pointer; transition: transform var(--t, .2s) var(--ease, ease), box-shadow var(--t, .2s), opacity var(--t, .2s); }
[dir="rtl"] .sp-fab { padding: 0 14px 0 16px; }
.sp-fab:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(139,92,246,.4); }
.sp-fab:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }
.sp-fab-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--energy, linear-gradient(135deg, #8b5cf6, #d946ef 55%, #22d3ee)); box-shadow: 0 0 14px rgba(139,92,246,.45); flex: none; }
.sp-fab-ico svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-fab-dot { position: absolute; top: -3px; inset-inline-end: -3px; width: 12px; height: 12px; border-radius: 50%; background: #f5b041; border: 2px solid #0a0a0f; }
.sp-fab[aria-expanded="true"] { display: none; }
@media (max-width: 640px) { .sp-fab:not(.sp-docked) .sp-fab-label { display: none; } .sp-fab:not(.sp-docked) { width: 46px; padding: 0; justify-content: center; } .sp-fab:not(.sp-docked) .sp-fab-ico { width: 30px; height: 30px; } .sp-fab:not(.sp-docked) .sp-fab-ico svg { width: 16px; height: 16px; } }
/* floating over a stage (the Studio below the docking width, the editor): the icon alone at every width, so it hides as little of the shot as possible */
.sp-compact .sp-fab:not(.sp-docked) .sp-fab-label { display: none; }
.sp-compact .sp-fab:not(.sp-docked) { width: 46px; padding: 0; justify-content: center; }
.sp-compact .sp-fab:not(.sp-docked) .sp-fab-ico { width: 30px; height: 30px; }
.sp-compact .sp-fab:not(.sp-docked) .sp-fab-ico svg { width: 16px; height: 16px; }
/* docked into the desktop Studio's Advanced bar (#sheet .sheet-actions): the bar's own .ghost look, a small icon, stays visible while open */
.sp-fab.sp-docked { height: auto; padding: 7px 12px; gap: 7px; border: 1px solid var(--line-2, rgba(255,255,255,.12)); border-radius: 9px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); color: var(--muted, #a3a3b6); font: 600 11.5px/1.2 var(--display, Sora, Inter, sans-serif); letter-spacing: .02em; white-space: nowrap; }
.sp-fab.sp-docked:hover { color: var(--ink, #ececf4); border-color: rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.sp-fab.sp-docked[aria-expanded="true"] { display: inline-flex; color: #e8dfff; border-color: rgba(168,85,247,.7); background: linear-gradient(180deg, rgba(139,92,246,.24), rgba(139,92,246,.08)); }
.sp-fab.sp-docked .sp-fab-ico { width: 16px; height: 16px; box-shadow: none; }
.sp-fab.sp-docked .sp-fab-ico svg { width: 10px; height: 10px; }
.sp-fab.sp-docked .sp-fab-dot { top: -4px; inset-inline-end: -4px; width: 10px; height: 10px; }
/* the bar's free space is too narrow for "Help": the icon alone, the bar buttons' height */
.sp-fab.sp-docked.sp-dock-icon { padding: 7px 9px; }
.sp-fab.sp-docked.sp-dock-icon .sp-fab-label { display: none; }
.sp-root.sp-open { z-index: 61; } /* the open panel sits above the Claw lobster and the jobs drawer (z-index 60) */

.sp-panel { width: min(380px, calc(100vw - 32px)); max-height: min(78vh, 640px); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: linear-gradient(170deg, rgba(27,27,40,.96), rgba(14,14,22,.97)); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(139,92,246,.14); overflow: hidden; animation: spIn .22s var(--ease, ease) both; text-align: start; }
.sp-panel[hidden] { display: none; }
@keyframes spIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-panel { animation: none; } .sp-fab { transition: none; } }
.sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.sp-head h2 { margin: 0; font: 700 15.5px/1.25 var(--display, Sora, Inter, sans-serif); letter-spacing: -.01em; }
.sp-head p { margin: 3px 0 0; font-size: 12px; color: var(--muted, #a3a3b6); }
.sp-x { flex: none; width: 32px; height: 32px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted, #a3a3b6); font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.sp-x:hover { background: rgba(255,255,255,.07); color: #fff; }
.sp-tabs { display: flex; gap: 2px; margin: 0 12px 10px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); }
.sp-tab { flex: 1 1 0; min-width: 0; border: 0; border-radius: 9px; padding: 7px 6px; background: transparent; color: var(--muted, #a3a3b6); font: 600 11.5px/1.2 var(--display, Sora, Inter, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.sp-tab[aria-selected="true"] { color: #fff; background: var(--active, linear-gradient(135deg, #7c3aed, #a855f7 55%, #d946ef)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.sp-body { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 0 14px 14px; display: grid; gap: 10px; align-content: start; scrollbar-width: thin; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; color: var(--muted, #a3a3b6); }
.sp-foot a { color: #d6c9ff; text-decoration: none; }
.sp-foot a:hover { text-decoration: underline; }
.sp-foot .sp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #f5b041; margin-inline-end: 6px; vertical-align: middle; }
.sp-note { margin: 0; padding: 9px 12px; border-radius: 12px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3); font-size: 12.5px; }
.sp-note.warn { background: rgba(245,176,65,.12); border-color: rgba(245,176,65,.4); color: #fde3b0; }
.sp-note.bad { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); color: #fecaca; }
.sp-intro { margin: 0; color: var(--muted, #a3a3b6); font-size: 12.5px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--ink, #ececf4); padding: 6px 11px; font-size: 12px; cursor: pointer; text-align: start; }
.sp-chip:hover { border-color: rgba(167,139,250,.6); background: rgba(139,92,246,.14); }
.sp-msgs { display: grid; gap: 8px; }
.sp-msg { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-msg.user { justify-self: end; background: var(--active, linear-gradient(135deg, #7c3aed, #a855f7 55%, #d946ef)); color: #fff; border-end-end-radius: 4px; }
.sp-msg.bot { justify-self: start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-end-start-radius: 4px; }
.sp-msg.bot.busy { color: var(--muted, #a3a3b6); font-style: italic; }
.sp-msg.bad { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); color: #fecaca; }
.sp-msg .sp-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-msg .sp-links a { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: rgba(139,92,246,.18); border: 1px solid rgba(139,92,246,.4); color: #e4dcff; text-decoration: none; font-size: 12px; font-weight: 600; }
.sp-human { margin-top: 8px; font-size: 12px; }
.sp-human button { border: 0; background: transparent; padding: 0; color: #d6c9ff; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 12px; cursor: pointer; }
.sp-form { display: grid; gap: 8px; }
.sp-field { display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted, #a3a3b6); }
.sp-in, .sp-ta { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(8,8,14,.7); color: var(--ink, #ececf4); padding: 9px 12px; font: inherit; font-size: 13.5px; }
.sp-ta { min-height: 72px; resize: vertical; }
.sp-in:focus, .sp-ta:focus { outline: none; border-color: rgba(167,139,250,.75); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.sp-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
/* the composer and each form's action row stay at the bottom of the panel's scroll area: the main action is always in reach */
.sp-body > .sp-ask, .sp-body .sp-form > .sp-row:last-child { position: sticky; bottom: 0; z-index: 1; margin: 0 -14px -14px; padding: 10px 14px 14px; background: rgb(15,15,23); box-shadow: 0 -10px 14px -6px rgb(15,15,23); }
.sp-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.sp-ask .sp-ta { min-height: 44px; max-height: 120px; }
.sp-btn { border: 1px solid rgba(255,255,255,.14); border-radius: 11px; padding: 9px 14px; background: rgba(255,255,255,.05); color: var(--ink, #ececf4); font: 600 12.5px/1.2 var(--display, Sora, Inter, sans-serif); cursor: pointer; white-space: nowrap; }
.sp-btn:hover { background: rgba(255,255,255,.09); }
.sp-btn.primary { border-color: transparent; background: var(--active, linear-gradient(135deg, #7c3aed, #a855f7 55%, #d946ef)); color: #fff; box-shadow: 0 8px 22px rgba(124,58,237,.35); }
.sp-btn:disabled { opacity: .55; cursor: default; }
.sp-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted, #a3a3b6); }
.sp-file input { font-size: 12px; max-width: 100%; }
/* the native file input stays focusable but invisible; its translated label is the button */
.sp-file { position: relative; }
.sp-file .sp-file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.sp-file .sp-file-input:focus-visible + .sp-file-pick { outline: 2px solid #a78bfa; outline-offset: 2px; }
.sp-file-pick { display: inline-flex; align-items: center; padding: 7px 12px; font-size: 12px; }
.sp-file-name { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink, #ececf4); }
.sp-file-x { border: 0; background: transparent; color: #d6c9ff; padding: 0; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sp-file-hint { flex-basis: 100%; font-size: 11.5px; color: var(--muted, #a3a3b6); }
.sp-file [hidden] { display: none !important; }
.sp-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); }
.sp-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink, #ececf4); cursor: pointer; }
.sp-details { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: var(--muted, #a3a3b6); }
.sp-details div { display: flex; gap: 8px; min-width: 0; }
.sp-details b { color: var(--ink, #ececf4); font-weight: 600; flex: none; }
.sp-details span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.sp-done { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 18px 10px; }
.sp-done i { width: 44px; height: 44px; border-radius: 50%; background: rgba(52,211,153,.16); border: 1px solid rgba(52,211,153,.4); color: #86efac; display: grid; place-items: center; font-size: 20px; font-style: normal; }
.sp-done h3 { margin: 0; font: 700 15px/1.3 var(--display, Sora, Inter, sans-serif); }
.sp-done p { margin: 0; color: var(--muted, #a3a3b6); font-size: 12.5px; }
.sp-done a { color: #d6c9ff; }
.acct-item.sp-report { color: #fde3b0; }
@media (max-width: 640px) {
  .sp-root { inset-inline-end: 12px; bottom: 12px; }
  .sp-root.sp-open { inset: auto 8px 8px 8px; justify-items: stretch; }
  .sp-panel { width: 100%; max-height: min(82vh, 640px); border-radius: 18px; }
  .sp-ask { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- the /support page */
.sp-app { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 100vh; height: auto; }
.sp-app body, body.sp-page { overflow: auto; overflow-x: hidden; }
html.sp-page, html.sp-page body { height: auto; min-height: 100%; }
html.sp-page body { overflow: auto; overflow-x: hidden; background: radial-gradient(1000px 600px at 90% -10%, rgba(139,92,246,.12), transparent 60%), radial-gradient(800px 500px at -10% 100%, rgba(34,211,238,.06), transparent 60%), var(--canvas, #0a0a0f); }
.sp-brand { text-decoration: none; color: inherit; }
.sp-sep { color: var(--muted); font-size: 18px; line-height: 1; margin-top: -2px; }
.sp-wordmark { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; line-height: 1; background: linear-gradient(90deg, #c9b8ff, #e9a8ff 52%, #9ae6f7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-pro { color: #d6c9ff; border-color: rgba(139,92,246,.55); background: linear-gradient(180deg, rgba(139,92,246,.18), rgba(34,211,238,.08)); }
.sp-back::before { content: ""; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-inline-end: 2px; flex: none; }
[dir="rtl"] .sp-back::before { transform: rotate(-135deg); }
.sp-app a.ghost { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.sp-main { width: 100%; max-width: 960px; margin: 0 auto; padding: 22px 20px 90px; min-width: 0; display: grid; gap: 16px; align-content: start; }
.sp-gate { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 46px 22px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(23,23,35,.9), rgba(14,14,22,.94)); }
.sp-gate h1 { margin: 0; font-family: var(--display); font-size: 28px; letter-spacing: -.02em; }
.sp-gate p { margin: 0; max-width: 56ch; color: var(--muted); }
.sp-orb { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6, transparent 40%), var(--energy); box-shadow: 0 0 40px rgba(139,92,246,.45); margin-bottom: 6px; }
.sp-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sp-page-head h1 { margin: 0; font-family: var(--display); font-size: 26px; letter-spacing: -.02em; line-height: 1.15; }
.sp-page-head p { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.sp-page-head .sp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-list { display: grid; gap: 10px; }
.sp-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(23,23,35,.9), rgba(14,14,22,.94)); color: inherit; text-align: start; cursor: pointer; font: inherit; }
.sp-card:hover { border-color: rgba(255,255,255,.16); }
.sp-card-main { min-width: 0; display: grid; gap: 4px; }
.sp-card h3 { margin: 0; font: 600 14.5px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.sp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1.3 var(--display); letter-spacing: .03em; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); white-space: nowrap; }
.sp-badge.st-open { color: #bdf3fb; background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.3); }
.sp-badge.st-answered { color: #fde3b0; background: rgba(245,176,65,.14); border-color: rgba(245,176,65,.4); }
.sp-badge.st-closed { color: var(--muted); }
.sp-badge.k-issue { color: #fecaca; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); }
.sp-badge.k-human { color: #e4dcff; background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.35); }
.sp-badge.k-chat { color: var(--muted); }
.sp-unread { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #f5b041; box-shadow: 0 0 0 3px rgba(245,176,65,.18); flex: none; }
.sp-card-end { display: inline-flex; align-items: center; gap: 8px; }
.sp-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 40px 20px; border: 1px dashed var(--line-2); border-radius: 20px; color: var(--muted); }
.sp-thread { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(23,23,35,.9), rgba(14,14,22,.94)); }
.sp-thread-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-thread-head h2 { margin: 0; font: 700 18px/1.3 var(--display); overflow-wrap: anywhere; }
.sp-conv { display: grid; gap: 10px; }
.sp-bubble { max-width: min(100%, 640px); padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-bubble.user { justify-self: end; background: linear-gradient(135deg, rgba(124,58,237,.75), rgba(217,70,239,.55)); color: #fff; border-end-end-radius: 4px; }
.sp-bubble.admin { justify-self: start; background: rgba(245,176,65,.12); border: 1px solid rgba(245,176,65,.35); border-end-start-radius: 4px; }
.sp-bubble.assistant { justify-self: start; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); border-end-start-radius: 4px; }
.sp-bubble small { display: block; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.65); }
.sp-bubble.admin small, .sp-bubble.assistant small { color: var(--muted); }
.sp-bubble img { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin-top: 8px; border: 1px solid var(--line-2); }
.sp-reply { display: grid; gap: 8px; }
.sp-reply .sp-ta { min-height: 80px; }
.sp-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 90; display: none; margin: 0; padding: 10px 16px; border-radius: 12px; background: rgba(18,18,28,.96); border: 1px solid var(--line-2); color: var(--ink); font-size: 12.5px; max-width: min(92vw, 520px); pointer-events: none; }
.sp-toast.show { display: block; }
@media (max-width: 640px) { .sp-main { padding: 14px 12px 90px; } .sp-card { grid-template-columns: minmax(0, 1fr); } .sp-thread { padding: 14px; } }