/* ============================================================
   The registration assistant.

   Everything here is prefixed cb- and stands on its own, so the widget can
   be dropped onto another page with this file and chat.js and nothing else.
   Colours and fonts come from the variables styles.css already defines.
   ============================================================ */

/* ---------- the page that hosts it (chat.html only) ---------- */
.cb-intro{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px 24px 22px;margin:-18px 0 16px;
  position:relative;z-index:2;
}
.cb-intro-h{margin:0 0 10px;font:400 30px/1.15 var(--font-display);color:var(--ink)}
.cb-intro p{margin:0 0 12px;color:var(--ink-2);font-size:15px;line-height:1.65}
.cb-intro-btn{margin-top:6px}
.cb-intro-alt{margin:14px 0 0 !important;font-size:14px !important;text-align:center}
.cb-intro-alt a{color:var(--accent)}

/* ---------- launcher ---------- */
.cb-launch{
  position:fixed;right:20px;bottom:20px;z-index:200;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 18px 13px 15px;border:0;border-radius:99px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);
  font:600 15px var(--font);
  box-shadow:0 10px 28px -8px rgba(16,16,20,.45);
  -webkit-tap-highlight-color:transparent;
}
.cb-launch:hover{background:var(--accent-hover)}
.cb-launch:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring),0 10px 28px -8px rgba(16,16,20,.45)}
.cb-launch svg{flex:0 0 auto}
.cb-launch[hidden]{display:none}
/* The registration page has scroll buttons in the same corner. While the chat
   button is showing they sit above it instead of underneath it. */
html.cb-has-launch .scroll-fab{bottom:84px}

/* ---------- panel ---------- */
.cb-panel{
  position:fixed;right:20px;bottom:20px;z-index:201;
  width:min(410px,calc(100vw - 40px));
  height:min(660px,calc(100vh - 40px));
  display:flex;flex-direction:column;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 70px -20px rgba(16,16,20,.5);
  font:15px/1.5 var(--font);
}
.cb-panel[hidden]{display:none}

.cb-head{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:12px 10px 12px 16px;
  background:linear-gradient(160deg,var(--aqua-1),var(--aqua-2));
  color:var(--purple);
}
.cb-head-t{flex:1 1 auto;min-width:0}
.cb-head-t strong{display:block;font-size:15px;line-height:1.25}
.cb-head-t span{display:block;font-size:12px;opacity:.8}
.cb-icon{
  flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.45);color:var(--purple);
  -webkit-tap-highlight-color:transparent;
}
.cb-icon:hover{background:rgba(255,255,255,.8)}
.cb-icon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

.cb-track{flex:0 0 auto;height:4px;background:var(--line)}
.cb-fill{height:100%;width:0;background:var(--accent);transition:width .3s}

/* ---------- conversation ---------- */
.cb-log{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:16px 14px 8px;background:var(--bg);
  display:flex;flex-direction:column;gap:8px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.cb-msg{
  max-width:86%;padding:10px 13px;border-radius:15px;
  overflow-wrap:anywhere;white-space:pre-line;
}
.cb-bot{
  align-self:flex-start;background:var(--card);border:1px solid var(--line);
  border-bottom-left-radius:5px;color:var(--ink);
}
.cb-user{
  align-self:flex-end;background:var(--accent);color:var(--accent-ink);
  border-bottom-right-radius:5px;
}
.cb-warn{border-color:var(--err-line);background:var(--err-bg);color:var(--ink)}
.cb-rich{white-space:normal;max-width:94%}
.cb-msg a{color:var(--accent);font-weight:600}
.cb-msg p{margin:0 0 8px}
.cb-msg p:last-child{margin-bottom:0}

/* rich blocks: documents, bank details, size chart, summary, reference */
.cb-doc{
  display:flex;align-items:center;gap:9px;margin-top:8px;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:10px;text-decoration:none;
  background:var(--bg);
}
.cb-doc small{display:block;font-weight:400;color:var(--muted);font-size:12px}

/* The privacy advisory, read where it is asked about. Long, so it scrolls
   in its own box rather than pushing the question off the screen. */
.cb-advisory{
  max-height:210px;overflow-y:auto;margin:8px 0;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--bg);
  font-size:13.5px;line-height:1.55;white-space:pre-line;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.cb-advisory:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

.cb-dl{margin:0;display:grid;gap:8px}
.cb-dl dt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cb-dl dd{margin:0;font-weight:500}
.cb-acct{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cb-acct b{font-size:17px;letter-spacing:.02em}

.cb-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.cb-table th,.cb-table td{padding:5px 8px;text-align:left;border-bottom:1px solid var(--line)}
.cb-table th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cb-table tr:last-child td{border-bottom:0}
.cb-note{margin:8px 0 0 !important;font-size:12.5px;color:var(--muted)}

.cb-jersey{display:block;width:150px;max-width:100%;height:auto;margin:6px auto 0}

.cb-sum{margin:6px 0 0;padding:0;list-style:none}
.cb-sum li{
  display:flex;align-items:flex-start;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);
}
.cb-sum li:last-child{border-bottom:0}
.cb-sum-t{flex:1 1 auto;min-width:0}
.cb-sum-t span{display:block;font-size:11.5px;color:var(--muted)}
.cb-sum-t b{display:block;font-weight:600;overflow-wrap:anywhere;white-space:pre-line}

.cb-ref{
  margin:8px 0;padding:12px;text-align:center;border-radius:10px;
  background:var(--accent-soft);border:1px dashed var(--accent);
}
.cb-ref span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cb-ref b{display:block;font-size:26px;letter-spacing:.06em;color:var(--accent)}

.cb-mini{
  flex:0 0 auto;padding:6px 12px;min-height:34px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--card);color:var(--accent);
  font:600 13px var(--font);-webkit-tap-highlight-color:transparent;
}
.cb-mini:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.cb-mini:disabled{opacity:.45;cursor:default}

/* ---------- answers ---------- */
.cb-quick{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;
  padding:8px 14px 2px;background:var(--bg);
  max-height:42%;overflow-y:auto;
}
.cb-quick:empty{display:none}
.cb-chip{
  padding:10px 16px;min-height:44px;border-radius:99px;cursor:pointer;
  border:1px solid var(--accent);background:var(--card);color:var(--accent);
  font:600 14.5px var(--font);-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.cb-chip:hover{background:var(--accent-soft)}
.cb-chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.cb-chip.cb-primary{background:var(--accent);color:var(--accent-ink)}
.cb-chip.cb-primary:hover{background:var(--accent-hover)}
.cb-chip.cb-quiet{border-color:var(--line-2);color:var(--ink-2)}
.cb-chip small{font-weight:400;opacity:.8}

/* The picker is the real control and covers the whole button: a tap lands on
   the input itself, which is the arrangement every iPhone opens reliably. */
.cb-attach{
  position:relative;flex:1 1 100%;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:12px 16px;border-radius:12px;cursor:pointer;
  border:2px dashed var(--accent);background:var(--card);color:var(--accent);
  font:600 15px var(--font);
}
.cb-attach input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
  font-size:16px;
}
.cb-attach:focus-within{box-shadow:0 0 0 3px var(--accent-ring)}

.cb-compose{
  flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);
}
.cb-compose[hidden]{display:none}
/* 16px exactly: anything smaller and iOS zooms the page when the box is tapped. */
.cb-input{
  flex:1 1 auto;min-width:0;min-height:46px;max-height:120px;
  padding:11px 14px;border:1px solid var(--line-2);border-radius:23px;
  background:var(--bg);color:var(--ink);font:16px/1.4 var(--font);
  resize:none;touch-action:manipulation;
}
.cb-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.cb-input::placeholder{color:var(--muted);opacity:.8}
.cb-input[hidden]{display:none}
.cb-send{
  flex:0 0 auto;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.cb-send:hover{background:var(--accent-hover)}
.cb-send:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
.cb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- phones: the chat is the screen ----------
   A small floating panel with a text box above the iOS keyboard is where
   floating chat windows go wrong. Full screen, sized by chat.js to the part
   of the screen the keyboard leaves showing, has nothing to drift. */
@media (max-width:600px){
  .cb-panel{
    left:0;right:0;top:0;bottom:auto;width:100%;height:100vh;
    border:0;border-radius:0;box-shadow:none;
  }
  @supports (height:100dvh){ .cb-panel{height:100dvh} }
  .cb-launch{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  html.cb-has-launch .scroll-fab{bottom:calc(78px + env(safe-area-inset-bottom))}
  .cb-head{padding-top:calc(12px + env(safe-area-inset-top))}
  html.cb-lock,html.cb-lock body{overflow:hidden}
  .cb-msg{max-width:90%}
}

@media (prefers-reduced-motion:reduce){
  .cb-fill{transition:none}
}

/* ---------- pictures in the conversation ---------- */
/* A picture is a button: tapping it opens it over the chat (.cb-viewer). */
.cb-shot{
  display:block;width:100%;margin:8px 0 0;padding:0;cursor:zoom-in;
  border:1px solid var(--line-2);border-radius:10px;overflow:hidden;
  background:var(--bg);color:var(--ink-2);font:600 12px var(--font);
  -webkit-tap-highlight-color:transparent;
}
.cb-shot img{display:block;width:100%;height:auto}
.cb-shot span{display:block;padding:5px 0 6px;text-transform:capitalize;text-align:center}
.cb-shot:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}
/* The shirt's three views, side by side. */
.cb-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cb-shots .cb-shot{margin:8px 0 0;background:#fff}
.cb-shots .cb-shot img{aspect-ratio:3/4;object-fit:contain;padding:4px}

/* The two ways to pay, each in its own box. */
.cb-option{margin:10px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.cb-option-h{margin:0 0 6px !important;font-weight:700;color:var(--accent)}

.cb-acct span{flex:1 1 auto;min-width:0}
.cb-copyall{margin:10px 0 0 !important}

/* A wide size table scrolls on its own instead of widening the message. */
.cb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cb-tips{margin:4px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-2)}
.cb-tips li{margin:0 0 4px}

/* ---------- a picture, full size, over the chat ---------- */
.cb-viewer{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  background:rgba(16,16,20,.92);
}
.cb-viewer[hidden]{display:none}
.cb-viewer-x{position:absolute;top:10px;right:10px;z-index:1;background:rgba(255,255,255,.9)}
.cb-viewer-body{
  flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 12px 16px;
}
.cb-viewer-body img{display:block;max-width:100%;height:auto;border-radius:8px;background:#fff}
.cb-viewer-body p{margin:10px 0 0;color:#fff;font-size:13px;text-align:center}

/* ---------- the iPhone choice: chat or form ---------- */
.cb-offer{
  position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(28,10,44,.55);padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.cb-offer[hidden]{display:none}
.cb-offer-card{
  width:100%;max-width:440px;padding:22px 20px 16px;border-radius:16px;
  background:var(--card);color:var(--ink);box-shadow:0 24px 70px -20px rgba(16,16,20,.5);
  font:15px/1.5 var(--font);
}
.cb-offer-h{margin:0 0 6px;font:400 24px/1.2 var(--font-display)}
.cb-offer-p{margin:0 0 16px;color:var(--ink-2)}
.cb-offer-chat{width:100%}
.cb-offer-form{
  display:block;width:100%;margin-top:8px;min-height:46px;border:0;background:none;cursor:pointer;
  color:var(--accent);font:600 15px var(--font);text-decoration:underline;
}