/* ═══════════════════════════════════════════════════════════════════════════
   /support — Discord-shaped support app.
   Loaded on the marketing support page; the app only mounts once the session
   check says the visitor is logged in, so everything here is scoped under
   .sup-app and cannot leak into the page underneath.
   ═══════════════════════════════════════════════════════════════════════════ */

.sup-boot{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:var(--bg,#0b0d12);}
.sup-boot i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.14);
  border-top-color:var(--crimson,#E8192C);animation:sup-spin .7s linear infinite;display:block;}
@keyframes sup-spin{to{transform:rotate(360deg);}}

.sup-app{position:fixed;inset:0;z-index:9000;display:grid;grid-template-columns:72px 320px 1fr;
  background:var(--bg,#0b0d12);color:var(--text,#e7e9ee);font-size:15px;overflow:hidden;}

/* ── Rail ─────────────────────────────────────────────────────────────── */
.sup-rail{background:rgba(0,0,0,.38);border-right:1px solid var(--border,#20242e);
  display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:10px;}
.sup-pill{position:relative;width:48px;height:48px;border-radius:16px;border:0;cursor:pointer;
  background:var(--surface,#161a22);color:var(--text,#e7e9ee);font-size:21px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:border-radius .16s ease,background .16s ease,transform .16s ease;}
.sup-pill:hover{border-radius:14px;background:var(--crimson,#E8192C);transform:translateY(-1px);}
.sup-pill.is-on{border-radius:14px;background:var(--crimson,#E8192C);}
.sup-pill.is-on::before,.sup-pill:hover::before{content:"";position:absolute;left:-10px;top:50%;
  transform:translateY(-50%);width:4px;height:22px;border-radius:0 4px 4px 0;background:#fff;}
.sup-pill:hover::before{height:14px;}
.sup-pill-new{background:rgba(59,165,92,.14);color:#3BA55C;font-size:24px;}
.sup-pill-new:hover{background:#3BA55C;color:#fff;}
.sup-rail-sep{width:32px;height:2px;border-radius:2px;background:var(--border,#20242e);margin:2px 0;}
.sup-dot{position:absolute;right:-2px;bottom:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:#E8192C;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;
  border:3px solid var(--bg,#0b0d12);}
.sup-tip{position:absolute;left:60px;white-space:nowrap;background:#0a0c10;color:#fff;font-size:13px;
  font-weight:600;padding:7px 10px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .12s;
  box-shadow:0 8px 24px -10px #000;z-index:5;}
.sup-pill:hover .sup-tip{opacity:1;}

/* Profile, bottom-left — Discord's user panel. */
.sup-profile{margin-top:auto;position:relative;}
.sup-avatar{width:44px;height:44px;border-radius:50%;cursor:pointer;display:block;object-fit:cover;
  border:2px solid transparent;transition:border-color .16s;background:var(--surface,#161a22);}
.sup-avatar:hover{border-color:var(--crimson,#E8192C);}
.sup-avatar-ini{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;
  color:#fff;background:var(--crimson,#E8192C);}
.sup-menu{position:absolute;bottom:52px;left:8px;min-width:214px;background:#12151c;
  border:1px solid var(--border,#20242e);border-radius:12px;padding:8px;display:none;
  box-shadow:0 26px 60px -22px #000;z-index:20;}
.sup-menu.is-open{display:block;}
.sup-menu-who{padding:8px 10px 10px;border-bottom:1px solid var(--border,#20242e);margin-bottom:6px;}
.sup-menu-name{font-weight:700;font-size:14px;}
.sup-menu-sub{font-size:12px;color:var(--text-muted,#8b93a7);margin-top:2px;}
.sup-menu a,.sup-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;
  border-radius:8px;border:0;background:none;color:var(--text,#e7e9ee);font-size:14px;text-align:left;
  cursor:pointer;text-decoration:none;}
.sup-menu a:hover,.sup-menu button:hover{background:rgba(255,255,255,.06);}
.sup-menu button.danger:hover{background:rgba(232,25,44,.16);color:#ff6b78;}

/* ── List column ──────────────────────────────────────────────────────── */
.sup-list{background:rgba(255,255,255,.015);border-right:1px solid var(--border,#20242e);
  display:flex;flex-direction:column;min-width:0;}
.sup-list-head{padding:16px 16px 12px;border-bottom:1px solid var(--border,#20242e);}
.sup-list-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;}
.sup-list-sub{font-size:12.5px;color:var(--text-muted,#8b93a7);margin-top:3px;}
.sup-new-btn{margin-top:12px;width:100%;padding:10px;border-radius:9px;border:0;cursor:pointer;
  background:var(--crimson,#E8192C);color:#fff;font-size:14px;font-weight:600;}
.sup-new-btn:hover{filter:brightness(1.08);}
.sup-filter{margin-top:10px;width:100%;padding:8px 11px;border-radius:8px;font-size:13.5px;
  background:var(--bg,#0b0d12);border:1px solid var(--border,#20242e);color:var(--text,#e7e9ee);display:none;}
.sup-filter.is-shown{display:block;}
.sup-scroll{flex:1;overflow-y:auto;padding:10px;}
.sup-group{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted,#8b93a7);padding:12px 8px 7px;display:flex;align-items:center;gap:6px;cursor:pointer;
  user-select:none;}
.sup-group span{color:var(--text-dim,#5d6579);font-weight:600;}
.sup-card{width:100%;text-align:left;background:var(--surface,#161a22);border:1px solid var(--border,#20242e);
  border-radius:11px;padding:11px 12px;margin-bottom:8px;cursor:pointer;display:block;
  transition:border-color .14s,transform .14s;}
.sup-card:hover{border-color:var(--crimson-border,#3a1520);transform:translateY(-1px);}
.sup-card.is-on{border-color:var(--crimson,#E8192C);background:rgba(232,25,44,.06);}
.sup-card-top{display:flex;align-items:center;gap:8px;}
.sup-card-ic{font-size:15px;}
.sup-card-subj{font-weight:600;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.sup-card-unread{width:9px;height:9px;border-radius:50%;background:#E8192C;flex:0 0 auto;}
.sup-card-snip{font-size:12.5px;color:var(--text-muted,#8b93a7);margin-top:5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.sup-card-foot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.sup-id{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--text-dim,#5d6579);}
.sup-chip{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;}
.sup-chip-open{background:rgba(59,165,92,.16);color:#3BA55C;}
.sup-chip-progress{background:rgba(255,165,0,.16);color:#FFA500;}
.sup-chip-resolved{background:rgba(88,101,242,.16);color:#8891f2;}
.sup-chip-closed{background:rgba(255,255,255,.07);color:var(--text-muted,#8b93a7);}
.sup-chip-pending{background:rgba(255,165,0,.16);color:#FFA500;}
.sup-chip-accepted{background:rgba(59,165,92,.16);color:#3BA55C;}
.sup-chip-declined{background:rgba(232,25,44,.16);color:#ff6b78;}
.sup-warn{font-size:11.5px;color:#FFA500;margin-top:7px;display:flex;align-items:center;gap:5px;}
.sup-empty{text-align:center;padding:44px 22px;color:var(--text-muted,#8b93a7);font-size:14px;}
.sup-empty b{display:block;color:var(--text,#e7e9ee);font-size:15px;margin-bottom:6px;}
.sup-empty a{color:var(--crimson-2,#ff5a6a);}

/* ── Thread column ────────────────────────────────────────────────────── */
.sup-thread{display:flex;flex-direction:column;min-width:0;}
.sup-thread-head{padding:14px 18px;border-bottom:1px solid var(--border,#20242e);display:flex;
  align-items:center;gap:12px;min-height:60px;}
.sup-back{display:none;background:none;border:0;color:var(--text,#e7e9ee);font-size:20px;cursor:pointer;}
.sup-thread-title{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sup-thread-meta{font-size:12px;color:var(--text-muted,#8b93a7);margin-top:2px;}
.sup-thread-actions{margin-left:auto;display:flex;gap:8px;}
.sup-btn{padding:7px 12px;border-radius:8px;border:1px solid var(--border,#20242e);background:none;
  color:var(--text,#e7e9ee);font-size:13px;cursor:pointer;}
.sup-btn:hover{background:rgba(255,255,255,.05);}
.sup-btn-danger:hover{background:rgba(232,25,44,.14);color:#ff6b78;border-color:#5a1a22;}
.sup-msgs{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px;}
.sup-msg{max-width:min(720px,84%);display:flex;flex-direction:column;gap:6px;}
.sup-msg.is-mine{align-self:flex-end;align-items:flex-end;}
.sup-msg-who{font-size:12px;color:var(--text-muted,#8b93a7);display:flex;align-items:center;gap:6px;}
.sup-staff-badge{background:var(--crimson,#E8192C);color:#fff;font-size:9.5px;font-weight:700;
  padding:2px 5px;border-radius:4px;letter-spacing:.04em;}
.sup-bubble{background:var(--surface,#161a22);border:1px solid var(--border,#20242e);border-radius:14px;
  padding:11px 14px;font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.sup-msg.is-mine .sup-bubble{background:rgba(232,25,44,.1);border-color:var(--crimson-border,#3a1520);}
.sup-msg.is-system .sup-bubble{background:none;border:0;color:var(--text-muted,#8b93a7);font-size:13px;
  font-style:italic;padding:2px 0;}
.sup-msg.is-pending{opacity:.55;}
.sup-shots{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.sup-shots img{width:132px;height:92px;object-fit:cover;border-radius:9px;border:1px solid var(--border,#20242e);
  cursor:zoom-in;background:var(--bg,#0b0d12);}
.sup-bubble a{color:var(--crimson-2,#ff5a6a);}

/* ── Composer ─────────────────────────────────────────────────────────── */
.sup-composer{border-top:1px solid var(--border,#20242e);padding:12px 18px 16px;}
.sup-drop{border:1px solid var(--border,#20242e);border-radius:12px;background:var(--surface,#161a22);
  padding:10px 12px;transition:border-color .14s;}
.sup-drop.is-drag{border-color:var(--crimson,#E8192C);background:rgba(232,25,44,.06);}
.sup-composer textarea{width:100%;background:none;border:0;color:var(--text,#e7e9ee);font:inherit;
  font-size:14.5px;resize:none;outline:none;min-height:44px;max-height:180px;}
.sup-composer-row{display:flex;align-items:center;gap:10px;margin-top:8px;}
.sup-attach{background:none;border:0;color:var(--text-muted,#8b93a7);font-size:18px;cursor:pointer;
  padding:4px 6px;border-radius:7px;}
.sup-attach:hover{color:var(--text,#e7e9ee);background:rgba(255,255,255,.05);}
.sup-hint{font-size:11.5px;color:var(--text-dim,#5d6579);}
.sup-send{margin-left:auto;padding:8px 18px;border-radius:9px;border:0;background:var(--crimson,#E8192C);
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;}
.sup-send:disabled{opacity:.5;cursor:not-allowed;}
.sup-tray{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.sup-tray-item{position:relative;width:76px;height:58px;border-radius:8px;overflow:hidden;
  border:1px solid var(--border,#20242e);}
.sup-tray-item img{width:100%;height:100%;object-fit:cover;display:block;}
.sup-tray-x{position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;border:0;
  background:rgba(0,0,0,.72);color:#fff;font-size:12px;line-height:19px;cursor:pointer;padding:0;}
.sup-closed-note{text-align:center;color:var(--text-muted,#8b93a7);font-size:13.5px;padding:10px;}

/* ── New-ticket / new-suggestion form ─────────────────────────────────── */
.sup-form{max-width:640px;margin:0 auto;padding:26px 18px 40px;width:100%;}
.sup-form h2{font-size:21px;margin:0 0 6px;}
.sup-form p.sub{color:var(--text-muted,#8b93a7);font-size:13.5px;margin:0 0 22px;}
.sup-field{margin-bottom:16px;}
.sup-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted,#8b93a7);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.sup-input,.sup-select,.sup-textarea{width:100%;padding:10px 12px;border-radius:9px;font:inherit;font-size:14px;
  background:var(--bg,#0b0d12);border:1px solid var(--border,#20242e);color:var(--text,#e7e9ee);outline:none;}
.sup-input:focus,.sup-select:focus,.sup-textarea:focus{border-color:var(--crimson,#E8192C);}
.sup-textarea{min-height:150px;resize:vertical;line-height:1.55;}
.sup-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;}
.sup-type{padding:12px 10px;border-radius:10px;border:1px solid var(--border,#20242e);background:var(--surface,#161a22);
  color:var(--text,#e7e9ee);font-size:13.5px;font-weight:600;cursor:pointer;text-align:center;}
.sup-type:hover{border-color:var(--crimson-border,#3a1520);}
.sup-type.is-on{border-color:var(--crimson,#E8192C);background:rgba(232,25,44,.1);}
.sup-type i{display:block;font-size:19px;font-style:normal;margin-bottom:5px;}
.sup-err{color:#ff6b78;font-size:13px;margin-bottom:12px;min-height:17px;}
.sup-ok{text-align:center;padding:36px 18px;}
.sup-ok-id{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:19px;color:var(--crimson-2,#ff5a6a);
  margin:10px 0 18px;}

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.sup-lightbox{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.88);display:flex;
  align-items:center;justify-content:center;padding:30px;cursor:zoom-out;}
.sup-lightbox img{max-width:100%;max-height:100%;border-radius:10px;}

/* ── Login card (logged-out state, lives in the static HTML) ──────────── */
.sup-gate{max-width:470px;margin:0 auto;background:var(--surface,#161a22);border:1px solid var(--border,#20242e);
  border-radius:16px;padding:32px 28px;text-align:center;}
.sup-gate h2{font-size:22px;margin:0 0 8px;}
.sup-gate p{color:var(--text-muted,#8b93a7);font-size:14px;margin:0 0 22px;line-height:1.6;}
.sup-gate .btn{width:100%;justify-content:center;}
.sup-gate-note{font-size:12.5px;color:var(--text-dim,#5d6579);margin-top:16px;}

/* ── Responsive: rail becomes a top switch, list ↔ thread swap ────────── */
@media (max-width:900px){
  .sup-app{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .sup-rail{flex-direction:row;justify-content:flex-start;gap:8px;padding:8px 10px;
    border-right:0;border-bottom:1px solid var(--border,#20242e);}
  .sup-pill{width:42px;height:42px;font-size:19px;border-radius:12px;}
  .sup-pill.is-on::before,.sup-pill:hover::before{display:none;}
  .sup-rail-sep{width:2px;height:28px;}
  .sup-profile{margin-top:0;margin-left:auto;}
  .sup-avatar{width:38px;height:38px;}
  .sup-menu{bottom:auto;top:46px;left:auto;right:0;}
  .sup-tip{display:none;}
  .sup-list{border-right:0;}
  .sup-app[data-pane="thread"] .sup-list{display:none;}
  .sup-app[data-pane="list"] .sup-thread{display:none;}
  .sup-back{display:block;}
  .sup-msg{max-width:94%;}
  /* "Close ticket" wraps to two lines in a phone-width header. */
  .sup-thread-actions .sup-btn{white-space:nowrap;font-size:12.5px;padding:7px 10px;}
}