/*
 * THE SUPPORT BUBBLE — its own stylesheet.
 *
 * These rules lived inside creators.css, which meant the bubble could only
 * appear on pages willing to adopt the whole Creator Program design. The
 * landing page is not one of those: pulling creators.css in there would
 * redefine every token the page already uses.
 *
 * So they live here, and every colour carries a literal fallback. On a page
 * that defines the tokens they win; on a page that does not, the bubble still
 * looks like itself rather than unstyled.
 */

.sup-close {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--muted, #9aa8bd);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sup-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--text, #f5f7ff); }
.sup-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 56px; height: 56px; border-radius: 999px; border: 0;
  background: var(--accent, #00d2ff); color: #04121f;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  transition: transform .15s;
}
.sup-btn:hover { transform: scale(1.05); }
.sup[hidden] { display: none; }
.sup {
  position: fixed; right: 18px; bottom: 86px; z-index: 79;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - 120px);
  display: flex; flex-direction: column;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); border-radius: 16px;
  /* Opaque: you have to be able to read what you are typing. */
  background: var(--panel-2, #1c1f2b);
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  overflow: hidden;
}
.sup-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.09)); background: rgba(0,210,255,0.09); }
.sup-body { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start; }
.sup-msg { max-width: 88%; border-radius: 14px 14px 14px 4px; border: 1px solid var(--border, rgba(255,255,255,0.09)); background: rgba(0,0,0,0.3); padding: 9px 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted, #9aa8bd); }
.sup-mine { max-width: 88%; margin-left: auto; border-radius: 14px 14px 4px 14px; background: rgba(0,210,255,0.16); border: 1px solid var(--line-accent, rgba(0,210,255,0.22)); padding: 9px 12px; font-size: 12.5px; line-height: 1.6; }
.sup-sent { font-size: 10.5px; color: var(--success, #24d970); text-align: right; margin-top: 3px; }
.sup-who { border-top: 1px solid var(--border, rgba(255,255,255,0.09)); padding: 10px 14px; display: grid; gap: 7px; }
.sup-foot { border-top: 1px solid var(--border, rgba(255,255,255,0.09)); padding: 11px; display: flex; gap: 8px; align-items: flex-end; }
.sup-foot textarea { flex: 1; resize: none; min-height: 40px; max-height: 110px; }

/* A real answer from a person, as distinct from the widget's own greeting.
   Every "us" line used to share .sup-msg — muted grey at 12.5px — so the one
   thing in this window somebody actually needs to read looked like furniture. */
.sup-reply { max-width: 88%; }
.sup-reply-who {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent, #00d2ff);
}
.sup-reply-who i { width: 6px; height: 6px; border-radius: 999px; background: var(--success, #24d970); flex: none; }
.sup-reply-body {
  border-radius: 14px 14px 14px 4px;
  border: 1px solid rgba(0,210,255,.34);
  border-left: 3px solid var(--accent, #00d2ff);
  background: rgba(255,255,255,0.07);
  padding: 11px 13px;
  font-size: 13.5px; font-weight: 500; line-height: 1.6;
  color: var(--text, #f5f7ff);
  white-space: pre-wrap;      /* a multi-paragraph answer keeps its shape */
  overflow-wrap: anywhere;
}

/* An answer arrived while the panel was shut. */
.sup-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; display: grid; place-items: center;
  background: var(--success, #24d970); color: #04202e;
  font-size: 11px; font-weight: 800; line-height: 1;
  border: 2px solid var(--bg, #0f1117);
}

/* The Done control on the name/email editor. */
.sup-done {
  all: unset; cursor: pointer; flex: none;
  padding: 4px 10px; border-radius: 8px;
  background: var(--accent, #00d2ff); color: #04202e;
  font-size: 11.5px; font-weight: 800;
}
.sup-done:hover { filter: brightness(1.1); }

/* ── the controls the widget borrows ──────────────────────────────────────
 * .field, .btn and .mono are creators.css classes. Inside the Creator Program
 * they resolve; on any other page they did not, and the inputs fell back to
 * browser-default white boxes on a dark panel.
 *
 * Redefined here, but SCOPED UNDER .sup on purpose. A bare `.btn` rule in a
 * stylesheet the landing page loads would restyle that page's own buttons —
 * fixing one bug by causing a worse one. Inside the panel these win; outside
 * it they do not exist.
 */
.sup .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.sup .field {
  width: 100%;
  border: 1px solid var(--border, rgba(255,255,255,0.09));
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
  color: var(--text, #f5f7ff);
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.sup .field:focus { border-color: var(--accent, #00d2ff); }
.sup .field::placeholder { color: var(--faint, #6b7b91); }

.sup .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px; font-weight: 600;
  background: var(--accent, #00d2ff); color: #04121f;
  cursor: pointer;
  transition: opacity .15s, transform .06s;
}
.sup .btn:hover { opacity: .9; }
.sup .btn:active { transform: scale(.985); }
.sup .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── attachments, times, the NEW mark, the ring ─────────────────────────── */
.sup-reply-who .sup-new {
  margin-left: 2px; padding: 1px 6px; border-radius: 999px;
  background: var(--success, #24d970); color: #04202e;
  font-size: 9px; font-weight: 800; letter-spacing: 0;
}
.sup-reply-who .sup-time { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--faint, #6b7b91); }
.sup-time-mine { color: var(--faint, #6b7b91); }
.sup-reply-body.bare { padding: 5px; }
.sup-link { color: var(--accent, #00d2ff); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.sup-att-img { display: block; margin-top: 8px; }
.sup-att-img.bare { margin-top: 0; }
.sup-att-img img { display: block; max-width: 100%; max-height: 280px; width: auto; border-radius: 10px; border: 1px solid var(--border, rgba(255,255,255,0.09)); }
.sup-att-file {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); border-radius: 10px; padding: 7px 10px;
  color: var(--text, #f5f7ff); text-decoration: none; font-size: 12px; font-weight: 600;
}
.sup-att-file.bare { margin-top: 0; }
.sup-att-file svg { color: var(--accent, #00d2ff); flex: none; }
.sup-att-file span { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-shot { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; color: var(--muted, #9aa8bd); }
.sup-shot svg { width: 11px; height: 11px; }

.sup-badge { overflow: visible; }
.sup-ping {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--success, #24d970); opacity: .55;
  animation: sup-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes sup-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* ── attaching ──────────────────────────────────────────────────────────── */
.sup-attach {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.09)); background: rgba(0,0,0,0.3);
  color: var(--muted, #9aa8bd); display: grid; place-items: center; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.sup-attach:hover { color: var(--accent, #00d2ff); border-color: var(--accent, #00d2ff); }
.sup-picked {
  display: flex; align-items: center; gap: 8px; margin: 0 11px;
  border: 1px solid rgba(36,217,112,.35); border-radius: 10px; background: rgba(36,217,112,.08);
  padding: 6px 10px; font-size: 12px; color: var(--text, #f5f7ff);
}
.sup-picked svg { color: var(--success, #24d970); flex: none; }
.sup-picked span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-picked button { all: unset; cursor: pointer; padding: 0 6px; font-size: 18px; line-height: 1; color: var(--muted, #9aa8bd); }
.sup-picked button:hover { color: var(--text, #f5f7ff); }
.sup-err {
  margin: 8px 11px 0; border: 1px solid rgba(242,96,125,.4); border-radius: 10px;
  background: rgba(242,96,125,.08); color: #f2607d; padding: 8px 10px; font-size: 12px; line-height: 1.45;
}

/* ── the scrollbar ──────────────────────────────────────────────────────────
 * The panel scrolls inside a dark, rounded card, and the browser's default
 * bar — pale, square, a quarter of the width — was the one thing in it that
 * did not belong. Thin and tinted, hidden until the mouse is over it. */
.sup-body { scrollbar-width: thin; scrollbar-color: rgba(0,210,255,.28) transparent; scrollbar-gutter: stable; }
.sup-body::-webkit-scrollbar { width: 6px; }
.sup-body::-webkit-scrollbar-track { background: transparent; }
.sup-body::-webkit-scrollbar-thumb { background: rgba(0,210,255,.22); border-radius: 999px; }
.sup-body:hover::-webkit-scrollbar-thumb { background: rgba(0,210,255,.4); }
.sup-foot textarea { scrollbar-width: thin; scrollbar-color: rgba(0,210,255,.28) transparent; }
.sup-foot textarea::-webkit-scrollbar { width: 6px; }
.sup-foot textarea::-webkit-scrollbar-thumb { background: rgba(0,210,255,.22); border-radius: 999px; }