/* PTA support-chat bubble — included by client dashboard + account pages.
   Inherits the client design tokens (--panel/--border/--blue/... from
   client_dashboard/style.css). */
#pta-chat-btn { position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--border-hi);
  background: var(--blue); color: #fff; font-size: 1.45rem; cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); display: flex; align-items: center;
  justify-content: center; }
#pta-chat-btn:hover { background: var(--blue-hi); }
#pta-chat-btn .cb-badge { position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; border-radius: 999px; background: #f85149;
  color: #fff; font-size: .7rem; font-weight: 700; display: flex;
  align-items: center; justify-content: center; padding: 0 5px; }

#pta-chat-panel { position: fixed; right: 22px; bottom: 88px; z-index: 91;
  width: 372px; max-width: calc(100vw - 30px); height: 520px;
  max-height: calc(100vh - 120px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border-hi);
  border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,.55);
  overflow: hidden; }
#pta-chat-panel.hidden { display: none; }

.cb-head { padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: var(--panel-hi); display: flex; align-items: center; gap: .7rem; }
.cb-head .cb-t { font-weight: 700; font-size: .95rem; }
.cb-head .cb-s { color: var(--muted); font-size: .72rem; margin-top: 1px; }
.cb-head .cb-x { margin-left: auto; background: transparent; border: 0;
  color: var(--muted); font-size: 1.1rem; cursor: pointer; padding: 4px; }
.cb-head .cb-x:hover { color: var(--text); }

.cb-msgs { flex: 1; overflow-y: auto; padding: 12px 12px 6px;
  display: flex; flex-direction: column; gap: 8px; }
.cb-m { max-width: 84%; border-radius: 12px; padding: 7px 11px;
  font-size: .86rem; line-height: 1.45; white-space: pre-wrap;
  word-wrap: break-word; }
.cb-m .cb-who { display: block; font-size: .66rem; font-weight: 700;
  letter-spacing: .03em; color: var(--muted); margin-bottom: 2px;
  text-transform: uppercase; }
.cb-m.client { align-self: flex-end; background: var(--blue); color: #fff;
  border-bottom-right-radius: 4px; }
.cb-m.bot, .cb-m.admin { align-self: flex-start; background: var(--panel-hi);
  border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.cb-m.system { align-self: center; background: transparent;
  color: var(--muted); font-size: .72rem; padding: 2px 6px; }
.cb-m a { color: var(--blue-hi); }
.cb-m.client a { color: #fff; text-decoration: underline; }

.cb-typing { align-self: flex-start; color: var(--muted); font-size: .8rem;
  padding: 4px 11px; }
.cb-typing i { display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--muted); margin-right: 3px;
  animation: cbBlink 1.2s infinite; font-style: normal; }
.cb-typing i:nth-child(2) { animation-delay: .2s; }
.cb-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes cbBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cb-typing i { animation: none; }
}

.cb-form { display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--border); background: var(--panel-hi); }
.cb-form textarea { flex: 1; resize: none; height: 40px; max-height: 96px;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px;
  font: inherit; font-size: .86rem; line-height: 1.35; }
.cb-form textarea:focus { outline: none; border-color: var(--blue); }
.cb-form button { background: var(--blue); color: #fff; border: 0;
  border-radius: 9px; padding: 0 16px; font: inherit; font-weight: 700;
  cursor: pointer; }
.cb-form button:hover { background: var(--blue-hi); }
.cb-form button:disabled { opacity: .4; cursor: default; }

@media (max-width: 520px) {
  #pta-chat-panel { right: 8px; bottom: 78px; height: 70vh; }
  #pta-chat-btn { right: 14px; bottom: 14px; }
}

/* Design tokens, self-supplied: identical to the client dashboard's values,
   so on dashboard pages nothing changes, and on the landing site (which has
   its own token set) the bubble still renders in the portal style. */
#pta-chat-btn, #pta-chat-panel {
  --panel: #0e141f; --panel-hi: #131b28; --border: #1f2937;
  --border-hi: #2c3a4e; --text: #e8edf4; --muted: #7c8a9d;
  --blue: #2f81f7; --blue-hi: #6fb2ff; --bg-soft: #0a0f18;
  color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
}

/* attachments */
.cb-attach { background: transparent; border: 1px solid var(--border);
  color: var(--muted); border-radius: 9px; width: 40px; flex: none;
  cursor: pointer; font-size: 1rem; }
.cb-attach:hover { color: var(--text); border-color: var(--border-hi); }
.cb-m img.cb-img { max-width: 100%; border-radius: 8px; display: block;
  cursor: pointer; }
.cb-m .cb-file { display: inline-flex; align-items: center; gap: 6px;
  color: inherit; }

/* product card */
.cb-prod { border: 1px solid var(--border-hi); border-radius: 10px;
  padding: 9px 11px; margin-top: 4px; background: var(--bg-soft); }
.cb-prod .p-t { font-weight: 700; font-size: .84rem; }
.cb-prod .p-d { color: var(--muted); font-size: .76rem; margin: 2px 0 8px; }
.cb-prod .p-promo { font-size: .76rem; margin-bottom: 8px; }
.cb-prod .p-promo code { background: var(--panel-hi); border: 1px solid
  var(--border); border-radius: 5px; padding: 1px 6px; }
.cb-prod a.p-buy { display: inline-block; background: var(--blue);
  color: #fff; border-radius: 7px; padding: 6px 14px; font-size: .8rem;
  font-weight: 700; text-decoration: none; }
.cb-prod a.p-buy:hover { background: var(--blue-hi); }

/* CSAT */
.cb-csat { align-self: center; display: flex; gap: 10px; align-items: center;
  color: var(--muted); font-size: .78rem; padding: 4px 0; }
.cb-csat button { background: var(--panel-hi); border: 1px solid var(--border);
  border-radius: 999px; font-size: 1rem; padding: 4px 10px; cursor: pointer; }
.cb-csat button:hover { border-color: var(--blue); }
.cb-csat .done { font-size: 1rem; }

/* anonymous start form (landing) */
.cb-anon { padding: 16px 14px; display: flex; flex-direction: column;
  gap: 9px; overflow-y: auto; }
.cb-anon p { margin: 0; color: var(--muted); font-size: .82rem; }
.cb-anon input, .cb-anon textarea { background: var(--bg-soft);
  color: var(--text); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 11px; font: inherit; font-size: .86rem; width: 100%; }
.cb-anon input:focus, .cb-anon textarea:focus { outline: none;
  border-color: var(--blue); }
.cb-anon textarea { resize: vertical; min-height: 84px; }
.cb-anon button[type=submit] { background: var(--blue); color: #fff;
  border: 0; border-radius: 9px; padding: 10px; font: inherit;
  font-weight: 700; cursor: pointer; }
.cb-anon button[type=submit]:disabled { opacity: .5; }
.cb-anon .cb-err { color: #f85149; font-size: .8rem; min-height: 1em; }