/* Support sheet (static/js/support.js opens it in a modal <dialog>) and the /support/ page.
   Phones: an Apple-style bottom sheet with a grabber (drag down to close), safe-area aware for the Android app.
   Desktop: a floating panel anchored above the launcher. Motion: transform/opacity only; data-motion="0" = fades. */

.sp-sheet { position: fixed; inset: auto 0 0; margin: 0 auto; padding: 0; border: 0; inline-size: 100%; max-inline-size: 100%;
  block-size: auto; max-block-size: calc(100dvh - var(--safe-t) - 24px); overflow: hidden; color: var(--ink); background: var(--paper);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e3); direction: rtl; text-align: start; overscroll-behavior: contain; }
.sp-sheet[open] { display: flex; flex-direction: column; }
.sp-sheet::backdrop { background: var(--scrim); }
.sp-sheet > .sp-inner { display: flex; flex-direction: column; min-block-size: 0; flex: 1; padding-block-end: var(--safe-b);
  padding-inline: var(--safe-r) var(--safe-l); }
html[data-motion]:not([data-motion="0"]) .sp-sheet[open] { animation: sp-rise var(--dur-3) var(--spring); }
html[data-motion]:not([data-motion="0"]) .sp-sheet[open]::backdrop { animation: sp-fade var(--dur-3) var(--ease-std); }
html[data-motion="0"] .sp-sheet[open], html:not([data-motion]) .sp-sheet[open] { animation: sp-fade var(--dur-2) linear; }
.sp-sheet.is-closing { animation: sp-sink var(--dur-2) var(--ease-std) forwards !important; }
.sp-sheet.is-closing::backdrop { animation: sp-fade var(--dur-2) var(--ease-std) reverse forwards !important; }
html[data-motion="0"] .sp-sheet.is-closing { animation: sp-fade var(--dur-1) linear reverse forwards !important; }
.sp-sheet.is-dragging { animation: none !important; transition: none; }
.sp-sheet.is-settling { transition: transform var(--dur-2) var(--spring); }
@keyframes sp-rise { from { transform: translateY(100%); } }
@keyframes sp-sink { to { transform: translateY(100%); } }
@keyframes sp-fade { from { opacity: 0; } }
body:has(.sp-sheet[open]) { overflow: hidden; }

@media (min-width: 700px) {
  .sp-sheet { inset: auto; inset-block-end: 88px; inset-inline-start: 24px; margin: 0; inline-size: 400px;
    block-size: min(640px, calc(100dvh - 120px)); max-block-size: none; border-radius: var(--r-xl); box-shadow: var(--e2), 0 30px 80px -30px rgb(0 0 0 / 0.35); }
  .sp-sheet::backdrop { background: rgb(0 0 0 / 0.12); }
  .sp-sheet > .sp-inner { padding: 0; }
  html[data-motion]:not([data-motion="0"]) .sp-sheet[open] { animation: sp-pop var(--dur-3) var(--spring); transform-origin: bottom right; }
  .sp-sheet.is-closing { animation: sp-pop var(--dur-2) var(--ease-std) reverse forwards !important; }
  .sp-grabber { visibility: hidden; block-size: 0 !important; margin: 0 !important; }
}
@keyframes sp-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } }

/* head: grabber, title row (new · title · close) */
.sp-head { flex: none; display: grid; gap: 2px; padding: 6px 12px 10px; touch-action: none; user-select: none;
  border-block-end: 0.5px solid var(--sep); background: var(--paper); }
.sp-grabber { justify-self: center; inline-size: 36px; block-size: 5px; border-radius: 3px; margin-block: 2px 4px;
  background: color-mix(in srgb, var(--ink) 22%, transparent); }
.sp-head-row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.sp-head h2 { margin: 0; text-align: center; font-family: var(--f-display); font-size: var(--fs-md); font-weight: 700; line-height: 1.4; outline: none; }
.sp-sub { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--ink-2); }
.sp-icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; padding: 0; color: var(--indigo);
  background: transparent; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sp-icon .ic { inline-size: 22px; block-size: 22px; }
.sp-icon[data-sp-close] { color: var(--ink-2); }
.sp-icon[data-sp-close] .ic { inline-size: 16px; block-size: 16px; }
.sp-icon[data-sp-close]::before { content: ""; position: absolute; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--paper-2); z-index: -1; }
.sp-icon { position: relative; isolation: isolate; }
.sp-icon:active { transform: scale(0.92); }
@media (hover: hover) { .sp-icon:hover { background: var(--tint); } }

/* body: scrolls; messages and the new-ticket form */
.sp-body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; padding: 14px 16px 16px; display: grid; gap: 14px; align-content: start; }
.sp-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-msg { display: grid; gap: 3px; justify-items: start; max-inline-size: 88%; }
.sp-msg.is-user { justify-self: end; justify-items: end; }
.sp-bubble { margin: 0; padding: 9px 13px; border-radius: 18px; font-size: var(--fs-base); line-height: 1.7; overflow-wrap: anywhere;
  background: var(--card); box-shadow: var(--e1); white-space: normal; }
.is-user .sp-bubble { color: var(--on-indigo); background: var(--indigo); box-shadow: none; border-end-end-radius: 6px; }
.is-ai .sp-bubble, .is-staff .sp-bubble { border-end-start-radius: 6px; }
.is-staff .sp-bubble { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--teal) 55%, transparent), var(--e1); }
.sp-who { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-2xs); font-weight: 650; color: var(--ink-2); flex-wrap: wrap; }
.sp-who small { font-weight: 500; }
.sp-who .ic { inline-size: 14px; block-size: 14px; color: var(--indigo); }
.is-staff .sp-who .ic { color: var(--teal); }
.sp-msg time { font-size: var(--fs-2xs); color: var(--ink-2); }
.sp-msg.is-pending .sp-bubble { opacity: 0.7; }
.sp-typing .sp-bubble { display: inline-flex; gap: 5px; align-items: center; min-block-size: 40px; }
.sp-typing i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ink-2); opacity: 0.4; }
html[data-motion]:not([data-motion="0"]) .sp-typing i { animation: sp-blink 1.2s infinite var(--ease-std); }
.sp-typing i:nth-child(2) { animation-delay: 0.2s !important; }
.sp-typing i:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes sp-blink { 50% { opacity: 1; } }

.sp-note, .sp-err { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.65; }
.sp-note { background: color-mix(in srgb, var(--ok) 12%, var(--card)); }
.sp-note.subtle { background: var(--paper-2); color: var(--ink-2); }
.sp-err { background: color-mix(in srgb, var(--bad) 12%, var(--card)); color: var(--ink); }
.sp-note .ic, .sp-err .ic { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px; }
.sp-note .ic { color: var(--ok); }
.sp-note.subtle .ic { color: var(--ink-2); }
.sp-err .ic { color: var(--bad); }

/* new ticket form: kind tiles (iOS inset-grouped radio rows), fields */
.sp-new { display: grid; gap: 14px; }
.sp-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.sp-kinds legend { padding: 0; margin-block-end: 8px; font-size: var(--fs-sm); font-weight: 650; }
.sp-kind { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; min-block-size: 64px; padding: 10px;
  border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--dur-2) var(--ease-std), transform var(--dur-1) var(--ease-std); }
.sp-kind:active { transform: scale(0.98); }
.sp-kind input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.sp-kind-i { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 9px; color: var(--indigo); background: var(--tint); }
.sp-kind-i .ic { inline-size: 18px; block-size: 18px; }
.sp-kind-t { display: grid; gap: 1px; line-height: 1.45; }
.sp-kind-t b { font-size: var(--fs-sm); }
.sp-kind-t small { font-size: var(--fs-2xs); color: var(--ink-2); }
.sp-kind:has(input:checked) { box-shadow: inset 0 0 0 2px var(--indigo), var(--e1); }
.sp-kind:has(input:checked) .sp-kind-i { color: var(--on-indigo); background: var(--indigo); }
.sp-kind:has(input:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 2px; }

.sp-field { display: grid; gap: 6px; }
.sp-field label { font-size: var(--fs-sm); font-weight: 650; }
.sp-field label small { font-weight: 500; color: var(--ink-2); }
.sp-field textarea, .sp-field input, .sp-compose textarea { inline-size: 100%; border: 0; border-radius: var(--r-md); padding: 10px 12px;
  font: inherit; font-size: var(--fs-base); line-height: 1.7; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--hair); resize: none; }
.sp-field input[dir="ltr"] { text-align: left; }
.sp-field textarea:focus-visible, .sp-field input:focus-visible, .sp-compose textarea:focus-visible { outline: 2px solid var(--indigo); outline-offset: 0; }
.sp-help, .sp-count { font-size: var(--fs-xs); color: var(--ink-2); }
.sp-count:empty { display: none; }
.sp-count.is-near { color: var(--bad); }
.sp-hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.sp-wide { inline-size: 100%; justify-content: center; min-block-size: 50px; }
.sp-wide .ic { inline-size: 18px; block-size: 18px; }
.sp-fine { margin: 0; font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-2); }
.sp-fine a { color: var(--indigo); }

.sp-recent { display: grid; gap: 6px; }
.sp-recent h3 { margin: 0; font-size: var(--fs-xs); font-weight: 650; color: var(--ink-2); padding-inline: 4px; }
.sp-recent .glist a { justify-content: space-between; }
.sp-r-t { display: grid; min-inline-size: 0; }
.sp-r-t b { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-r-t small { font-size: var(--fs-2xs); color: var(--ink-2); }
.sp-dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--bad); }

/* composer (thread): pinned under the scrolling messages */
.sp-compose { flex: none; display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px 10px; border-block-start: 0.5px solid var(--sep);
  background: color-mix(in srgb, var(--paper) 92%, transparent); }
.sp-compose textarea { flex: 1; min-block-size: 44px; max-block-size: 140px; border-radius: 22px; padding-block: 9px; }
.sp-send { flex: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; padding: 0;
  color: var(--on-indigo); background: var(--indigo); cursor: pointer; transition: transform var(--dur-1) var(--ease-std), opacity var(--dur-2); }
.sp-send .ic { inline-size: 20px; block-size: 20px; }
.sp-send:active { transform: scale(0.92); }
.sp-send:disabled, [data-sp-submit]:disabled { opacity: 0.5; cursor: progress; }

/* /support/ page (no JavaScript, or opened directly) */
.sp-page { padding-block: 16px 40px; }
.sp-card { max-inline-size: 520px; margin-inline: auto; border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--e2); overflow: hidden;
  display: flex; flex-direction: column; }
.sp-card .sp-grabber { display: none; }

@media (prefers-reduced-transparency: reduce) { .sp-compose { background: var(--paper); } }
@media (prefers-contrast: more) { .sp-kind, .sp-bubble { box-shadow: inset 0 0 0 1px var(--line); } }