:root {
  --paper: #FBF7EE;
  --paper-deep: #F2EBDB;
  --ink: #0C3B2E;
  --ink-2: #11503E;
  --muted: #4A5F57;
  --brass: #A8863D;
  --brass-text: #6B5219;
  --brass-bright: #C2A055;
  --brass-soft: #D8C48F;
  --line: #E3D9C2;
  /* 3.05:1 on white - decorative --line fails 1.4.11 as a control boundary */
  --line-control: #B9AC8B;
  --line-soft: #EDE5D2;
  --wa-bubble: #E5F7D0;
  --wa-green: #1FA855;
  --white: #FFFFFF;
  --danger: #A8452E;
  --danger-bg: #F8E9E2;
  --danger-line: #E7C6B6;
  --radius: 14px;
}
:root{
  --shadow-lg: 0 30px 70px -25px rgba(12, 59, 46, .35);
  --shadow-md: 0 14px 34px -14px rgba(12, 59, 46, .22);
}
.conn-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
#pausedBanner{ color:#7A5F16; background:#fbf3dd; border-radius:10px; padding:8px 12px; }
/* in-app confirm dialog - replaces the native browser confirm() */
.modal-overlay{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(12,59,46,.45); }
.modal-box{ background:var(--white); border-radius:16px; max-width:410px; width:100%; padding:26px 24px 20px; box-shadow:0 28px 64px -20px rgba(12,59,46,.5); }
.modal-box p{ margin:0 0 20px; font-size:15.5px; line-height:1.65; color:var(--ink); }
.modal-actions{ display:flex; gap:10px; justify-content:flex-start; }
.modal-actions .btn{ min-width:96px; justify-content:center; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  /* trailing color-emoji fonts render ❤️🎤📷 in full color, like WhatsApp/Gmail */
  font-family: 'Heebo', "Segoe UI", Arial, sans-serif, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji";
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* paper grain (same as landing) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.035'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--brass-soft); color: var(--ink); }

button { font-family: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* skip link + screen-reader-only text */
.skip-link {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 10px 22px; border-radius: 9px; font-weight: 600; font-size: 15px;
  text-decoration: none; transform: translateY(-300%); transition: transform .2s;
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- topbar (app view) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 247, 238, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  padding: 14px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--brass-soft), var(--brass));
}
body.guest .topbar { display: none; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
a.brand:hover .logo-name { text-decoration: underline; text-underline-offset: 3px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 11px; position: relative; flex: none;
  background: linear-gradient(150deg, var(--ink-2), var(--ink));
  color: var(--paper); display: flex; align-items: center; justify-content: center;
  font-family: 'Frank Ruhl Libre', serif; font-weight: 900; font-size: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 8px -2px rgba(12, 59, 46, .4);
}
.logo-mark::after {
  content: ""; position: absolute; bottom: 5px; inset-inline: 9px; height: 2px;
  background: var(--brass-bright); border-radius: 2px;
}
.logo-name { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; font-size: 23px; letter-spacing: .02em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.user-email { font-size: 13px; color: var(--muted); }

/* ---------- auth: split hero ---------- */
.auth-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100dvh;
  position: relative; z-index: 2;
}

.auth-hero {
  background:
    radial-gradient(ellipse 60% 45% at 85% 0%, rgba(194, 160, 85, .12), transparent),
    linear-gradient(165deg, var(--ink-2), var(--ink) 55%);
  color: var(--paper);
  display: flex;
  align-items: center;
  padding: 48px 56px;
  position: relative; overflow: hidden;
}
.auth-hero::before {
  content: "קשר"; position: absolute; bottom: -70px; left: -20px;
  font-family: 'Frank Ruhl Libre', serif; font-weight: 900; font-size: 290px; line-height: 1;
  color: rgba(251, 247, 238, .03); pointer-events: none;
}
.hero-inner { max-width: 600px; margin-inline: auto; position: relative; }

.hero-brand {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 21px; font-weight: 700; letter-spacing: .02em;
  margin-bottom: 44px;
}
.hero-brand .logo-mark { background: var(--paper); color: var(--ink); box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .35); }

.auth-hero h1 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0 0 16px;
}
.auth-hero h1 .hl { color: var(--brass-bright); }

.hero-sub {
  font-size: 16.5px;
  line-height: 1.7;
  color: #A9C4B6;
  margin: 0 0 30px;
  font-weight: 300;
}

.hero-points { list-style: none; margin: 0 0 36px; padding: 0; display: grid; gap: 14px; }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: #C3D7CB; }
.hero-points b { font-weight: 600; color: var(--paper); }
.hero-points svg {
  width: 21px; height: 21px; flex-shrink: 0; margin-top: 2px;
  color: var(--brass-soft);
}

/* mini product demo - a mail that looks like a chat */
.hero-demo { max-width: 600px; }
.demo-window {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.demo-head {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, #F6F0E1, #F0E9D7); color: var(--ink);
  border-bottom: 1px solid var(--line);
  margin: -14px -16px 13px; padding: 12px 18px;
  border-radius: 16px 16px 0 0;
  font-size: 16px; font-weight: 700;
  font-family: 'Frank Ruhl Libre', serif;
}
.demo-badge {
  background: linear-gradient(140deg, var(--brass-bright), var(--brass)); color: #07251B;
  border-radius: 20px;
  font-size: 13px; padding: 3px 12px; font-weight: 500;
  font-family: 'Heebo', sans-serif;
}
.demo-bubble {
  position: relative;
  max-width: 82%;
  border-radius: 10px;
  padding: 10px 14px 20px;
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(12, 59, 46, .09);
}
.demo-bubble.in { background: #FDFBF5; border: 1px solid var(--line-soft); margin-inline-start: 0; }
.demo-bubble.out { background: var(--wa-bubble); margin-inline-start: auto; }
.demo-sender { display: block; font-size: 14px; font-weight: 700; color: #A9502A; margin-bottom: 1px; }
.demo-time { position: absolute; bottom: 4px; inset-inline-end: 12px; font-size: 12px; color: rgba(12, 59, 46, .7); direction: ltr; }
.demo-note {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: #157B40; font-weight: 600;
  background: rgba(31, 168, 85, .12); border-radius: 9px; padding: 7px 13px;
  width: fit-content;
}
.demo-note svg { width: 15px; height: 15px; }

/* ---------- auth: form panel ---------- */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--paper);
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: var(--shadow-md);
}
.auth-card h2 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 27px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em;
}
.auth-note {
  display: flex; align-items: center; gap: 8px;
  color: var(--brass-text); font-size: 13.5px; font-weight: 600; letter-spacing: .04em;
  margin: 0 0 22px;
}
.auth-note::before { content: "◆"; font-size: 8px; }

.tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper-deep); border: 1px solid var(--line);
  border-radius: 11px; padding: 4px;
  margin-bottom: 22px;
}
.tab {
  border: none; background: none; border-radius: 8px;
  padding: 9px 0; font-size: 14.5px; font-weight: 600; color: var(--muted);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.tab.active { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(12, 59, 46, .14); }

label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number] {
  width: 100%; min-height: 46px; padding: 0 14px;
  border: 1.5px solid var(--line-control); border-radius: 9px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: #6F6A55; direction: ltr; text-align: right; }
input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(168, 134, 61, .18); }
.num { width: 84px !important; min-height: 40px !important; height: auto !important; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-inline-end: 44px; }
.pw-toggle {
  position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: none; background: none; border-radius: 8px;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.pw-toggle:hover { color: var(--ink); background: var(--paper-deep); }
.pw-toggle svg { width: 19px; height: 19px; }

.field-hint { font-size: 12.5px; color: var(--muted); margin: 6px 2px 0; line-height: 1.5; }
.error {
  color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line);
  border-radius: 9px; padding: 9px 12px;
  font-size: 13.5px; margin-top: 14px;
}
.ok { color: var(--brass-text); font-size: 13.5px; font-weight: 600; margin-inline-start: 8px; }
/* "you arrived through <partner> - the code was filled in for you" */
.ref-banner {
  color: #146A38; background: rgba(31, 168, 85, .1); border: 1px solid rgba(31, 168, 85, .32);
  border-radius: 9px; padding: 9px 12px;
  font-size: 13.5px; font-weight: 600; line-height: 1.5; margin: 14px 0 0;
}

/* "no chat is mirrored" - amber rather than red: nothing is broken and no
   message is lost, but the inbox will stay empty and that is worth saying. */
.no-mirror-note {
  color: #7A5A16; background: rgba(216, 160, 45, .12); border: 1px solid rgba(216, 160, 45, .42);
  border-radius: 9px; padding: 10px 12px;
  font-size: 13.5px; font-weight: 600; line-height: 1.6; margin: 12px 0 0;
}

/* which products the person came for - registration only, lead data for the
   onboarding call. Chips, not a dropdown: several can be marked at once. */
#productsField { margin: 14px 0 0; }
#productsField[hidden] { display: none; }
.products-label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.products-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.product-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--paper-deep); font-size: 13.5px; line-height: 1.2; user-select: none;
  transition: border-color .15s, background .15s;
}
.product-chip:hover { border-color: var(--brass, #A8863D); }
.product-chip input { accent-color: #0C3B2E; width: 15px; height: 15px; margin: 0; }
.product-chip:has(input:checked) { background: #0C3B2E; color: #FBF7EE; border-color: #0C3B2E; }

/* explicit consent, registration only: ONE checkbox covering the documents,
   being over 18, and the WhatsApp-ban risk. */
.consent-field {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0 0; padding: 12px 13px;
  background: var(--paper-deep); border: 1px solid var(--line); border-radius: 10px;
}
.consent-field[hidden] { display: none; }
/* 44x44 tap target around a 20px box - the negative margins keep the visual spacing tight */
.consent-box {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -11px -10px; cursor: pointer;
}
.consent-box input[type=checkbox] {
  width: 20px; height: 20px; margin: 0; accent-color: var(--brass); cursor: pointer;
}
.consent-box input[type=checkbox]:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.consent-text {
  margin: 0; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--ink-2);
  cursor: pointer;
}
.consent-text a {
  color: var(--brass-text); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.consent-text a:hover { color: var(--ink); }
.consent-risk { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 400; color: var(--muted); }

.btn {
  border: 1px solid var(--line); border-radius: 9px; padding: 0 22px; min-height: 44px;
  font-size: 15px; font-weight: 600;
  background: var(--paper-deep); color: var(--ink);
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { border-color: var(--brass-soft); }
.btn:active { transform: scale(.98); }
.btn.primary {
  border: none;
  background: linear-gradient(160deg, var(--ink-2), var(--ink)); color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 14px -6px rgba(12, 59, 46, .5);
}
.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 28px -10px rgba(12, 59, 46, .55);
}
.btn.primary:active { transform: scale(.98); }
.btn.ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); min-height: 40px; font-weight: 600; }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.danger.ghost { border-color: var(--danger); color: var(--danger); }
.btn.danger.ghost:hover { background: var(--danger); color: #FDF8EA; }
.btn.wide { width: 100%; margin-top: 20px; min-height: 48px; font-size: 16px; }

.auth-foot {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--muted); line-height: 1.6; text-align: center;
}

/* ---------- forgot password ---------- */
.forgot-row { margin-top: 14px; text-align: center; }
.link-btn {
  border: none; background: none; padding: 4px 6px; border-radius: 6px;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  color: var(--brass-text); text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }
.link-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.forgot-panel {
  margin-top: 14px; padding: 16px;
  background: var(--paper-deep); border: 1px solid var(--line); border-radius: 12px;
}
.forgot-panel label { margin-top: 0; }
.forgot-panel .btn.wide { margin-top: 14px; }
.forgot-msg { display: block; margin: 14px 0 0; line-height: 1.5; }

/* ---------- app view ---------- */
.app-wrap { max-width: 800px; margin: 0 auto; padding: 24px 16px 60px; display: grid; gap: 18px; position: relative; z-index: 2; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-md);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.card h2 {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 20px; margin: 0; font-weight: 700; letter-spacing: -.01em;
}
.muted { color: var(--muted); font-size: 13.5px; }
.card a { color: var(--brass-text); font-weight: 500; }

.status-pill {
  font-size: 12.5px; padding: 3px 12px; border-radius: 12px;
  background: var(--paper-deep); color: var(--muted); font-weight: 600;
  border: 1px solid var(--line);
}
.status-pill.open { background: rgba(31, 168, 85, .13); color: #157B40; border-color: rgba(31, 168, 85, .25); }
.status-pill.qr { background: rgba(168, 134, 61, .13); color: var(--brass-text); border-color: var(--brass-soft); }
.status-pill.closed, .status-pill.logged_out { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }

.qr:not(.status-pill) {
  display: block; margin: 14px auto; width: 260px; height: 260px;
  background: #fff; padding: 8px;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(31, 168, 85, .18), var(--shadow-md);
}
code {
  background: var(--paper-deep); border: 1px solid var(--line-soft);
  padding: 2px 6px; border-radius: 5px; font-size: 13px; direction: ltr; display: inline-block;
}

.chats-bulk { display: flex; gap: 8px; margin: 10px 0 0; }
.chats-bulk .btn-sm { padding: 5px 14px; font-size: 13px; min-height: 32px; }

/* collapsible chats list - the list can be hundreds of rows long */
.chats-toggle {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer; color: inherit;
}
.chats-toggle h2 { margin: 0; }
.chats-toggle .chev { color: var(--brass); transition: transform .2s ease; flex: none; }
.chats-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.chats-collapsed #chatList, .chats-collapsed #chatsDesc { display: none; }

/* ---------- chats: summary strip ---------- */
/* Three at-a-glance numbers above the list, in the spirit of a proper inbox
   dashboard: how many chats, how many actually reach the mail, how many hold
   something unread. Stays visible when the long list is collapsed. */
.chat-stats { display: flex; gap: 10px; margin: 12px 0 2px; flex-wrap: wrap; }
.cstat {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 14px; min-width: 118px;
}
.cstat .ci {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 168, 85, .1); color: #157B40;
}
.cstat .ci svg { width: 17px; height: 17px; }
.cstat.is-unread .ci { background: rgba(194, 160, 85, .16); color: var(--brass-text); }
.cstat b { font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cstat span:last-child { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }

/* ---------- chats: the list ---------- */
.chat-list { display: grid; gap: 8px; margin-top: 10px; }
.chat-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-item:hover { border-color: var(--brass-soft); box-shadow: 0 6px 16px -8px rgba(12, 59, 46, .2); }
/* Initials avatar, WhatsApp-style: a soft colour picked from the name so the
   same person keeps the same colour on every visit. Groups get the group glyph. */
.chat-item .avatar {
  position: relative; width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; user-select: none;
}
.chat-item .avatar svg { width: 19px; height: 19px; }
.av-0 { background: #E8F1EC; color: #1C6B4C; }
.av-1 { background: #FDF0E2; color: #A8632B; }
.av-2 { background: #EAEFF8; color: #35558E; }
.av-3 { background: #F6E9EE; color: #96455F; }
.av-4 { background: #EFEAF7; color: #5D4890; }
.av-5 { background: #E9F3F4; color: #2A6E74; }
.av-6 { background: #F7F0DE; color: #85682B; }
.av-7 { background: #F0EDE7; color: #5B5346; }
/* the unread count rides the avatar's corner, like every messaging app */
.avatar .unread-dot { position: absolute; top: -5px; inset-inline-start: -5px; }
.chat-item .info { flex: 1; min-width: 0; }
.chat-item .name { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The address is a button, not a label: for a group that has never emailed,
   copying it is the only way to open a conversation - and selecting 40 LTR
   characters by hand inside an RTL row is not realistic on a phone. */
.chat-item .addr {
  font-size: 11px; color: var(--muted); direction: ltr; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px;
  opacity: .8;
  font-family: inherit; background: none; border: 0; padding: 2px 0; margin: 0;
  cursor: pointer; display: block; width: 100%;
  text-decoration: underline dotted; text-underline-offset: 3px;
  transition: color .15s, opacity .15s;
}
.chat-item .addr:hover { color: var(--ink); opacity: 1; }
.chat-item .addr:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }
.chat-item .addr.copied { color: #146A38; opacity: 1; text-decoration-color: #146A38; }
.chat-item .addr.copied::after { content: " ✓"; font-weight: 700; }
/* The number under the contact name. Its own line, and always LTR-isolated:
   in an RTL row an un-isolated number reads back with the parts reordered. */
.chat-item .phone {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  direction: ltr; unicode-bidi: isolate; text-align: right;
  font-variant-numeric: tabular-nums; line-height: 1.5;
}
.chat-item select {
  border: 1.5px solid var(--line-control); border-radius: 99px; padding: 6px 12px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  background: #fff; color: var(--ink); cursor: pointer;
}
.chat-item select:hover { border-color: var(--brass-soft); }
/* "open chat" as a quiet outlined pill - the reference look */
.chat-item .open-chat {
  border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
  border-radius: 99px; padding: 6px 14px; font-weight: 600;
}
.chat-item .open-chat:hover { background: var(--ink); color: var(--paper); }
/* pin: a bare icon that lights up brass when the chat is pinned */
.chat-item .chat-pin { opacity: .45; transition: opacity .12s ease, color .12s ease; }
.chat-item:hover .chat-pin { opacity: .85; }
.chat-item.is-pinned .chat-pin { opacity: 1; color: var(--brass); }
/* the ⋮ menu holding the rare, careful actions (leave group / remove) */
.chat-menu { position: relative; flex: none; }
.chat-menu summary {
  list-style: none; cursor: pointer; border-radius: 8px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 18px; font-weight: 700; letter-spacing: 1px;
}
.chat-menu summary::-webkit-details-marker { display: none; }
.chat-menu summary:hover { background: var(--paper-deep); color: var(--ink); }
.chat-menu[open] summary { background: var(--paper-deep); color: var(--ink); }
.chat-menu .menu-pop {
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px -10px rgba(12, 59, 46, .3);
  display: grid; min-width: 150px; padding: 4px; gap: 2px;
}
.chat-menu .menu-pop .chat-act {
  border: 0; background: none; text-align: start; width: 100%;
  padding: 8px 10px; border-radius: 7px; font-size: 13px;
}
.chat-menu .menu-pop .chat-act:hover { background: var(--paper-deep); }
.chat-menu .menu-pop .chat-act.danger:hover { background: #fff6f6; color: #a33; }
/* the quiet "load earlier messages" pill above the oldest bubble */
.load-older {
  display: block; margin: 2px auto 10px; padding: 6px 16px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer;
}
.load-older:hover { background: var(--paper-deep); }
.load-older:disabled { opacity: .6; cursor: default; }
.switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: #9E9376; border-radius: 22px; cursor: pointer;
  transition: background .15s ease;
}
.switch .slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; right: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
  box-shadow: 0 0 0 1px #6F6A55, 0 1px 2px rgba(12, 59, 46, .25);
}
.switch input:checked + .slider { background: var(--wa-green); }
.switch input:checked + .slider::before { transform: translateX(-18px); }
.switch input:focus-visible + .slider { outline: 3px solid var(--brass); outline-offset: 2px; }

.settings .row { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 14.5px; }
.settings .btn { margin-top: 8px; }
.settings input[type=checkbox] { accent-color: var(--brass); width: 17px; height: 17px; }
.hour-select {
  border: 1.5px solid var(--line-control); border-radius: 8px; padding: 6px 8px;
  font-family: inherit; font-size: 13px; background: #fff; color: var(--ink);
}

/* ---------- pairing code (QR alternative) ---------- */
.pairing { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.pairing summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--brass-text); }
.pairing-row { display: flex; gap: 8px; margin: 10px 0; }
.pairing-row input { direction: ltr; text-align: left; flex: 1; }
.pairing-code {
  font-size: 28px; font-weight: 800; letter-spacing: 5px; text-align: center;
  color: var(--ink);
  background: var(--paper-deep); border: 1px dashed var(--brass-soft);
  border-radius: 10px; padding: 12px; margin: 12px 0 8px;
  font-family: Consolas, monospace;
}

/* ---------- API keys ---------- */
.api-new { display: flex; gap: 8px; margin: 12px 0; }
.api-new input { flex: 1; }
.new-key {
  background: var(--paper-deep); border: 1px solid var(--brass-soft); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px;
}
.key-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.key-row code { flex: 1; overflow-x: auto; white-space: nowrap; padding: 8px 10px; background: #fff; }
.key-list { display: grid; gap: 8px; margin-top: 10px; }
.key-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  background: #FFFEFA;
}
.key-item .info { flex: 1; min-width: 0; }
.key-item .name { font-weight: 600; font-size: 14.5px; }
.key-item .meta { font-size: 12px; color: var(--muted); }
.key-item.revoked .name { text-decoration: line-through; color: var(--muted); }
.btn.small { min-height: 34px; padding: 0 14px; font-size: 13px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-hero { padding: 40px 24px 44px; }
  .hero-brand { margin-bottom: 28px; }
  .hero-demo { display: none; }
  .hero-points { margin-bottom: 8px; }
  .auth-panel { padding: 32px 20px 48px; }
  .auth-card { padding: 28px 22px; }
}

/* narrow phones: let settings rows with a label + control wrap instead of cramming */
@media (max-width: 460px) {
  .settings .row { flex-wrap: wrap; }
  .settings .row select { flex: 1 1 auto; min-width: 0; }
  .app-wrap { padding-inline: 12px; }
}
/* On a narrow screen the chat row folds into two lines: who on the first,
   controls on the second - instead of six controls fighting for one line. */
@media (max-width: 640px) {
  .chat-item { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .chat-item .info { flex: 1 1 55%; }
  .chat-item .open-chat, .chat-item select { padding: 5px 10px; font-size: 12px; }
  .chat-item .addr { max-width: 180px; }
  .cstat { min-width: 0; flex: 1; padding: 8px 10px; }
  .cstat span:last-child { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- web chat ---------- */
.settings-group {
  margin: 16px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #FFFEFA;
}
.settings-group .group-title {
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 15.5px; font-weight: 700; color: var(--ink);
  margin-bottom: 2px;
}
.settings-group .muted { margin: 6px 0 0; line-height: 1.5; }
.settings .row.indent { margin-inline-start: 27px; }
.settings .row.indent input:disabled + span { color: var(--muted); }

.chat-item .open-chat { flex: none; }

.chat-panel { display: flex; flex-direction: column; padding: 16px 18px 18px; }
/* Pinned, because a customer asked for exactly this: the back button sat at the
   top of a long page, so leaving a chat meant scrolling all the way up first.
   The contact name rides along, which also keeps you oriented while reading.
   --sticky-top is the live height of the bar above (app topbar or panel bar);
   it is set from JS because that bar wraps on narrow screens and has no fixed
   height to hard-code. */
.chat-panel-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: var(--sticky-top, 0px); z-index: 40;
  background: var(--white);
  /* bleed over the card's own padding, or messages show through at the edges */
  margin-inline: -24px; padding-inline: 24px; padding-top: 10px;
}
.chat-panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-panel-title .icon {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: rgba(168, 134, 61, .12); color: var(--brass);
  border: 1px solid rgba(216, 196, 143, .45);
  display: flex; align-items: center; justify-content: center;
}
.chat-panel-title .icon svg { width: 18px; height: 18px; }
.chat-panel-title .name {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700; font-size: 17px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-panel-title .name { line-height: 1.3; }
/* the number under the name - LTR-isolated, or RTL reorders its parts */
.chat-panel-title .phone {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  direction: ltr; unicode-bidi: isolate; text-align: start;
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
.chat-panel-title .phone[hidden] { display: none; }
.chat-panel-title .kind { font-size: 12px; color: var(--muted); line-height: 1.35; }
.chat-panel-title .info { display: flex; flex-direction: column; justify-content: center; }

.chat-messages {
  height: min(52dvh, 460px);
  overflow-y: auto;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-empty { text-align: center; margin: auto; }

.day-divider { display: flex; justify-content: center; margin: 6px 0 2px; }
.day-divider span {
  font-size: 11.5px; color: var(--muted); font-weight: 600;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 2px 12px; direction: ltr;
}

.bubble {
  position: relative;
  max-width: 78%;
  border-radius: 10px;
  padding: 7px 11px 38px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 1px 3px rgba(12, 59, 46, .09);
}
.bubble.in { background: var(--white); border: 1px solid var(--line-soft); align-self: flex-start; }
.bubble.out { background: var(--wa-bubble); align-self: flex-end; }
.bubble-sender { font-size: 12px; font-weight: 700; margin-bottom: 0; line-height: 1.35; }
/* the sender's number, under their name in a group. LTR-isolated: inside an RTL
   bubble an un-isolated number reads back with its parts reordered. */
.bubble-sender-phone {
  font-size: 10.5px; color: var(--muted); direction: ltr; unicode-bidi: isolate;
  text-align: start; margin-bottom: 2px; font-variant-numeric: tabular-nums;
}
.bubble-text { white-space: pre-wrap; word-break: break-word; }
.bubble-transcript { font-style: italic; color: var(--muted); font-size: 13px; margin-top: 3px; white-space: pre-wrap; }
.bubble-time {
  position: absolute; bottom: 3px; inset-inline-end: 9px;
  font-size: 10.5px; color: rgba(12, 59, 46, .7); direction: ltr;
  display: inline-flex; align-items: center; gap: 3px;
}

/* delivery ticks: ✓ sent · ✓✓ delivered · ✓✓ blue read · clock = not yet sent.
   Drawn as SVG so they look identical in every browser and font. */
.ticks { display: inline-flex; align-items: center; flex: none; }
.ticks svg {
  width: 15px; height: 11px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.ticks.queued { color: rgba(12, 59, 46, .45); }
.ticks.queued svg { width: 11px; height: 11px; stroke-width: 1.6; }
.ticks.sent, .ticks.delivered { color: rgba(12, 59, 46, .55); }
.ticks.read { color: #34b7f1; }                 /* WhatsApp's blue */

@media (prefers-contrast: more) {
  .ticks.sent, .ticks.delivered { color: rgba(12, 59, 46, .9); }
  .ticks.read { color: #0a7ea8; }
}
.bubble-quote {
  border-inline-start: 3px solid var(--brass-soft);
  background: rgba(12, 59, 46, .05);
  border-radius: 6px; padding: 4px 8px; margin-bottom: 5px;
  font-size: 12.5px;
}
.bubble-quote .q-sender { font-weight: 700; font-size: 11.5px; }
.bubble-quote .q-text { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.media-chip {
  display: inline-block;
  background: var(--paper-deep); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px 10px;
  font-size: 13px; color: var(--ink-2);
  margin-bottom: 3px;
}
.reveal-btn { display: block; margin: 4px 0 2px; }
.bubble-img {
  display: block; max-width: 100%; max-height: 280px;
  border-radius: 8px; margin: 4px 0 2px;
  border: 1px solid var(--line);
}
.media-dl {
  display: inline-block; margin: 2px 0;
  font-size: 13px; font-weight: 600; color: var(--brass-text);
}
/* Said before the click, not after a failure: the browser owns the download, so
   a filter refusing it is invisible to us. Quiet on purpose - it is a heads-up,
   not an error. */
.media-note {
  font-size: 12px; line-height: 1.5; color: var(--muted);
  margin-top: 4px; max-width: 42ch;
}

.chat-composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.chat-composer textarea {
  flex: 1; resize: none;
  min-height: 44px; max-height: 140px;
  padding: 10px 14px;
  border: 1.5px solid var(--line-control); border-radius: 9px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff; line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chat-composer textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(168, 134, 61, .18); }
.chat-composer .btn { flex: none; }

/* ---------- language toggle + English (LTR) adjustments ---------- */
.lang-toggle { min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.auth-card { position: relative; }
.auth-lang { position: absolute; top: 14px; inset-inline-end: 14px; }
html[dir="ltr"] input::placeholder { text-align: left; }
html[dir="ltr"] .chat-item .addr, html[dir="ltr"] .chat-item .phone { text-align: left; }
html[dir="ltr"] .auth-hero::before { content: "Kesher"; font-size: 210px; }

/* ---------- panel mode (?panel=1 - the app embedded in the extension side panel) ---------- */
.panel-bar { display: none; }
.chat-item .chat-time { display: none; }

body.panel-mode { overflow-x: hidden; }
body.panel-mode .topbar { display: none; }

/* compact top bar: logo + two tabs + language + logout */
body.panel-mode .panel-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: rgba(251, 247, 238, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}
body.panel-mode.guest .panel-bar { display: none; }
body.panel-mode .panel-bar::before {
  content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--brass-soft), var(--brass));
}
.panel-bar .logo-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 17px; }
.panel-bar .logo-mark::after { bottom: 4px; inset-inline: 7px; }
.panel-tabs {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper-deep); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px;
}
.panel-tab {
  border: none; background: none; border-radius: 7px;
  padding: 6px 0; font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.panel-tab.active { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(12, 59, 46, .14); }
.panel-bar .lang-toggle { min-height: 32px; padding: 0 9px; font-size: 12px; }
.icon-btn {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: 9px; background: none;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--brass-soft); background: #F6F1E3; }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
.icon-btn svg { width: 16px; height: 16px; }

/* tab routing: chats tab ⇄ settings tab */
body.panel-mode.panel-tab-chats #connCard,
body.panel-mode.panel-tab-chats #settingsCard,
body.panel-mode.panel-tab-chats #refCard,
body.panel-mode.panel-tab-chats #apiCard,
/* Billing, Telegram and the org card were assigned to NEITHER tab, so all
   three rendered on both - the chats tab opened on "מנוי ותשלומים" with the
   conversations somewhere below it. Chats shows conversations; money and
   product setup live in Settings. */
body.panel-mode.panel-tab-chats #billingCard,
body.panel-mode.panel-tab-chats #tgCard,
body.panel-mode.panel-tab-chats #orgCard,
/* It belongs to Settings like the rest of them. Left out of this list it
   rendered under the open conversation on the chats tab, which is where it was
   reported as an irritation. */
body.panel-mode.panel-tab-chats #pwCard { display: none !important; }
body.panel-mode.panel-tab-settings #chatsCard,
body.panel-mode.panel-tab-settings #chatPanel,
/* the new-number send box lives on the chats tab - that is where a person
   stands when the number they need is not in the list */
body.panel-mode.panel-tab-settings #newChatCard,
body.panel-mode.panel-tab-settings #panelChatGate { display: none !important; }

/* The panel's original order, restored by request: the chat list first, the
   new-number box after it. A person scrolls down to compose; they should not
   have to scroll past the compose box to find who wrote to them. Grid order
   moves it visually without touching the DOM. */
body.panel-mode.panel-tab-chats #newChatCard { order: 10; }

/* compact cards for a 320 - 900px iframe */
body.panel-mode .app-wrap { max-width: none; padding: 10px 10px 20px; gap: 10px; }
/* grid items default to min-width:auto - long nowrap chat names would force the card wider than the panel */
body.panel-mode .app-wrap > * { min-width: 0; }
body.panel-mode .card { padding: 14px; border-radius: 12px; box-shadow: 0 6px 18px -12px rgba(12, 59, 46, .2); }
body.panel-mode .card h2 { font-size: 17px; }
body.panel-mode .settings .row { flex-wrap: wrap; font-size: 13.5px; margin: 10px 0; }
body.panel-mode .qr:not(.status-pill) { width: min(260px, 100%); height: auto; aspect-ratio: 1 / 1; }
body.panel-mode .api-new { flex-wrap: wrap; }
body.panel-mode .api-new input { min-width: 0; }
body.panel-mode .pairing-row { flex-wrap: wrap; }
body.panel-mode .pairing-row input { min-width: 0; }
body.panel-mode #connOpen code { white-space: normal; word-break: break-all; }

/* chats tab: WhatsApp-Web-like list - row = open chat; mirror controls live on the full dashboard */
body.panel-mode #chatsCard #chatsDesc,
body.panel-mode #chatsCard .chats-bulk,
body.panel-mode .chats-toggle .chev,
body.panel-mode .chat-item .addr,
body.panel-mode .chat-item .open-chat,
body.panel-mode .chat-item select,
body.panel-mode .chat-item .switch { display: none !important; }
body.panel-mode .chats-toggle { pointer-events: none; }
body.panel-mode #chatList { display: grid !important; gap: 6px; margin-top: 8px; }
body.panel-mode .chat-item { padding: 9px 10px; gap: 10px; min-width: 0; }
body.panel-mode .chat-item.tappable { cursor: pointer; }
body.panel-mode .chat-item.tappable:hover { background: var(--paper-deep); border-color: var(--brass-soft); }
body.panel-mode .chat-item .chat-time { display: block; flex: none; font-size: 11.5px; color: var(--muted); direction: ltr; }
body.panel-mode .chat-item .phone { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* chat view: fill the panel, composer pinned at the bottom */
body.panel-mode #chatPanel { padding: 10px; height: calc(100dvh - 84px); }
body.panel-mode .chat-panel-head {
  gap: 8px; padding-bottom: 8px; margin-bottom: 8px;
  margin-inline: -14px; padding-inline: 14px; padding-top: 8px;   /* panel cards are padded 14px */
}
/* long chat/group names must ellipsize instead of forcing the row (and the whole panel) wider */
body.panel-mode .chat-panel-title { min-width: 0; flex: 1; }
body.panel-mode .chat-panel-title .info { min-width: 0; flex: 1; }
body.panel-mode .chat-messages { flex: 1; height: auto; min-height: 160px; padding: 10px 10px 8px; }
body.panel-mode .bubble { max-width: 88%; }
body.panel-mode .chat-composer { margin-top: 8px; }

/* web-chat gate (chats tab while web_chat is off) */
body.panel-mode .panel-gate { text-align: center; padding: 30px 18px; }
body.panel-mode .panel-gate .gate-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(168, 134, 61, .12); color: var(--brass);
  border: 1px solid rgba(216, 196, 143, .45);
  margin-bottom: 8px;
}
body.panel-mode .panel-gate .gate-icon svg { width: 26px; height: 26px; }
body.panel-mode .panel-gate p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* auth (420px-wide iframe): form only, no marketing hero */
body.panel-mode .auth-hero { display: none; }
body.panel-mode .auth-split { grid-template-columns: 1fr; }
body.panel-mode .auth-panel { padding: 20px 12px 32px; align-items: flex-start; }
body.panel-mode .auth-card { max-width: none; padding: 24px 16px; }

/* ---------- message a new number (connected card) ---------- */
.newchat {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.newchat h3 {
  margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--ink);
}
.newchat .field-hint { margin-bottom: 10px; }
.newchat-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.newchat-row input[type=tel] {
  flex: 0 1 190px; min-height: 46px; padding: 0 14px;
  border: 1.5px solid var(--line-control); border-radius: 9px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff; direction: ltr; text-align: start;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.newchat-row textarea {
  flex: 1 1 240px; resize: none; min-width: 0;
  min-height: 46px; max-height: 140px; padding: 11px 14px;
  border: 1.5px solid var(--line-control); border-radius: 9px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: #fff; line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.newchat-row input:focus, .newchat-row textarea:focus {
  outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(168, 134, 61, .18);
}
.newchat-row .btn { flex: none; }
.newchat .err { color: var(--danger); font-weight: 600; }
@media (max-width: 560px) {
  .newchat-row input[type=tel], .newchat-row textarea { flex-basis: 100%; }
  .newchat-row .btn { width: 100%; justify-content: center; }
}

/* ---------- chatbot buttons inside a bubble ---------- */
.bubble-buttons {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(12, 59, 46, .12);
}
.bot-btn {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--ink-2);
  font-family: inherit; font-size: 14px; font-weight: 600;
  text-align: start; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.bot-btn:hover:not(:disabled) { background: #F6F1E3; border-color: var(--brass-soft); }
.bot-btn:disabled { opacity: .5; cursor: default; }
.bot-btn-desc { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* attach button - .icon-btn's red hover belongs to logout, not to this */
.chat-composer .attach-btn { width: 44px; height: 44px; align-self: flex-end; }
.chat-composer .attach-btn:hover {
  color: var(--brass-text); border-color: var(--brass-soft); background: #F6F1E3;
}
.chat-composer .attach-btn svg { width: 19px; height: 19px; }
#composerFileHint { margin: 6px 2px 0; }

/* ---------- reply-to strip + emoji picker ---------- */
.quote-strip {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 10px;
  background: #F6F1E3; border-inline-start: 3px solid var(--brass);
  border-radius: 8px;
}
.quote-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quote-sender { font-size: 12.5px; font-weight: 700; color: var(--brass-text); }
.quote-text {
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quote-cancel { width: 28px; height: 28px; flex: none; border: none; }
.quote-cancel svg { width: 14px; height: 14px; }

/* the reply affordance sits on the bubble and stays out of the way until wanted */
.bubble { position: relative; }
.bubble-reply {
  position: absolute; bottom: 2px; inset-inline-start: 2px;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 6px; background: rgba(255, 255, 255, .82);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.bubble-reply svg { width: 15px; height: 15px; }
.bubble:hover .bubble-reply, .bubble-reply:focus-visible { opacity: 1; }
.bubble-reply:hover { color: var(--ink); }
/* no hover on touch - always show it there, or it is unreachable */
@media (hover: none) { .bubble-reply { opacity: 1; } }

.emoji-pop {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
  margin-top: 10px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md);
  /* sized to its content: nothing to scroll, nothing cut off */
}
body.panel-mode .emoji-pop {
  grid-template-columns: repeat(8, 1fr);
  flex: none;                            /* the messages box gives way, not the picker */
  max-height: 55dvh; overflow-y: auto;   /* the one place height is scarce */
  padding: 6px; margin-top: 6px; gap: 1px;
}
body.panel-mode .emoji-cell { font-size: 18px; padding: 3px 0; }
body.panel-mode .emoji-cell.wide { grid-column: span 4; }
.emoji-cell {
  border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 5px 0; border-radius: 6px;
}
.emoji-cell.wide {
  grid-column: span 3; font-size: 13px; font-weight: 600;
  font-family: inherit; color: var(--ink-2);
}
.emoji-cell:hover { background: #F6F1E3; }
@media (max-width: 480px) {
  .emoji-pop { grid-template-columns: repeat(8, 1fr); }
  .emoji-cell.wide { grid-column: span 4; }
}

/* WhatsApp text formatting inside a bubble */
.bubble-text code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .92em; background: rgba(12, 59, 46, .07);
  padding: 1px 5px; border-radius: 4px;
  direction: ltr; display: inline-block; unicode-bidi: embed;
}
.bubble-text s { opacity: .75; }

/* ---------- formatting toolbar ---------- */
.fmt-bar { display: flex; gap: 4px; margin-top: 10px; }
.fmt-btn {
  width: 30px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: var(--muted); font-size: 13px; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fmt-btn:hover { color: var(--ink); border-color: var(--brass-soft); background: #F6F1E3; }
.fmt-btn code { font-size: 11px; background: none; padding: 0; }

/* referral link row */
.ref-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.ref-link-row code {
  flex: 1 1 240px; min-width: 0; padding: 10px 12px;
  background: #F6F1E3; border: 1px solid var(--line); border-radius: 9px;
  font-size: 13.5px; direction: ltr; text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref-link-row .btn { flex: none; }

/* ---------- forward picker + inline rename ---------- */
.fwd-box { max-width: 420px; }
.fwd-box h3 { margin: 0 0 12px; font-size: 17px; color: var(--ink); }
.fwd-box input[type=search] {
  width: 100%; min-height: 42px; padding: 0 12px; margin-bottom: 10px;
  border: 1.5px solid var(--line-control); border-radius: 9px;
  font-size: 15px; font-family: inherit; color: var(--ink); background: #fff;
}
.fwd-box input[type=search]:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(168,134,61,.18); }
.fwd-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.fwd-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  text-align: start; cursor: pointer;
}
.fwd-item:hover { background: #F6F1E3; }
.fwd-item .icon { flex: none; display: flex; color: var(--muted); }
.fwd-item .icon svg { width: 17px; height: 17px; }
.fwd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bubble-fwd {
  position: absolute; bottom: 2px; inset-inline-start: 34px;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 6px; background: rgba(255,255,255,.82);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.bubble-fwd svg { width: 15px; height: 15px; }
.bubble:hover .bubble-fwd, .bubble-fwd:focus-visible { opacity: 1; }
.bubble-fwd:hover { color: var(--ink); }
@media (hover: none) { .bubble-fwd { opacity: 1; } }

.name-edit {
  width: 100%; min-height: 30px; padding: 2px 8px;
  border: 1.5px solid var(--brass); border-radius: 7px;
  font-size: 15px; font-weight: 700; font-family: inherit; color: var(--ink); background: #fff;
}
.rename-btn { width: 30px; height: 30px; flex: none; }
.rename-btn:hover { color: var(--brass-text); border-color: var(--brass-soft); background: #F6F1E3; }
.rename-btn svg { width: 15px; height: 15px; }

/* what was sent when a bot menu was answered - replaces the vanished buttons */
.bot-chosen {
  font-size: 13px; font-weight: 600; color: var(--brass-text);
  padding: 6px 2px 0;
}
/* the h2 now wraps the collapse button; keep the previous visual weight */
.chats-h { margin: 0; font-size: inherit; font-weight: inherit; }

/* unread badge - "which chats have something new" without opening each one */
.unread-dot {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--wa-green); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
  margin-inline-start: 6px;
}

/* ---------- animated bot demo in the login hero ---------- */
.demo-menu {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px solid rgba(12, 59, 46, .12);
  display: flex; flex-direction: column; gap: 4px;
}
.demo-opt {
  border: 1px solid var(--line-control); border-radius: 7px;
  padding: 8px 12px; font-size: 15px; font-weight: 600; color: var(--ink);
  background: #fff; transition: background .25s ease, border-color .25s ease, transform .25s ease, opacity .3s ease;
}
.demo-opt.press { background: #D3EFDE; border-color: var(--wa-green); transform: scale(.97); }
.demo-opt.dim { opacity: .3; }
.demo-chosen { font-size: 14.5px; font-weight: 700; color: #157B40; padding-top: 5px; }
/* bubbles fade in rather than appearing, so the loop reads as a conversation */
.demo-bubble.enter { opacity: 0; transform: translateY(6px); }
.demo-bubble { transition: opacity .38s ease, transform .38s ease; }

/* ---------- @-mention picker ---------- */
.mention-pop {
  position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0;
  max-height: 210px; overflow-y: auto; min-width: 220px; max-width: 320px; z-index: 40;
  background: var(--white); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-md); padding: 5px;
}
.mention-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 8px; background: none;
  font-family: inherit; font-size: 14.5px; color: var(--ink); text-align: start; cursor: pointer;
}
.mention-item:hover, .mention-item.active { background: #F6F1E3; }
.mention-item .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-item .num { margin-inline-start: auto; font-size: 12px; color: var(--muted); direction: ltr; }
/* the composer is the positioning context for the popup */
.chat-composer { position: relative; }


/* ---------- change your own password (settings) ---------- */
.pw-change { display: grid; gap: 6px; max-width: 420px; }
.pw-change h3 { font-family: 'Frank Ruhl Libre', serif; font-size: 17px; margin: 0 0 6px; }
.pw-change label { font-size: 13.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.pw-change input {
  font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--white); color: var(--ink); direction: ltr; text-align: start;
}
.pw-change input:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.pw-change .muted { font-size: 12.5px; line-height: 1.6; margin: 6px 0 2px; }
.pw-change .error { font-size: 13.5px; margin: 2px 0 0; }
.pw-change .btn { justify-self: start; margin-top: 8px; }
/* the panel is 420px wide - a three-field form there is more noise than help */
/* It IS shown in the panel. Hiding it there was why a customer reported the
   feature as missing: the panel is where he works. */
body.panel-mode #pwCard { display: block; }
body.panel-mode .pw-change { max-width: none; }
body.panel-mode .pw-change input { font-size: 14px; }

/* ---------- transient confirmation ---------- */
.app-toast {
  position: fixed; top: 16px; inset-inline-start: 50%; transform: translate(-50%, -16px);
  z-index: 9000; max-width: min(520px, calc(100vw - 32px));
  background: var(--ink); color: var(--paper);
  font-size: 14.5px; line-height: 1.55; padding: 11px 20px; border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgba(12, 59, 46, .6);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.app-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .app-toast { transition: opacity .18s; } }

/* ---------- per-row actions (inside the ⋮ menu) ---------- */
.chat-act {
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  color: var(--muted);
}
.chat-act:hover { color: var(--ink); }

/* ---------- join a group by invite ---------- */
.join-box {
  margin: 12px 0 4px; padding: 16px 18px; display: grid; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-deep);
}
.join-box label { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.join-box input {
  font: inherit; font-size: 14.5px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink);
}
.join-box .muted { font-size: 12.5px; margin: 0; }
.join-box .error { font-size: 13.5px; margin: 2px 0 0; }
.join-preview {
  background: var(--white); border: 1px solid var(--brass-soft); border-radius: 9px;
  padding: 10px 13px; font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.join-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* the guide link in the dashboard header - quiet, but always there */
.guide-link { text-decoration: none; }
/* the side panel is 420px: the header there has room for the essentials only */
body.panel-mode .guide-link { display: none; }

/* ---------- the chat screen inside the side panel ----------
   420px is not a dashboard. Everything here is about giving the conversation
   the room, and making it obvious at a glance which side of it you are on. */
body.panel-mode .chat-panel-title .phone { font-size: 11.5px; font-weight: 500; color: var(--muted); }
body.panel-mode .chat-panel-title .name { font-size: 15.5px; }

/* Bubbles: a clear side, a clear tail, and enough contrast between the two
   directions that the eye sorts them without reading a word. */
body.panel-mode .bubble { max-width: 82%; border-radius: 12px; padding: 7px 11px 38px; }
body.panel-mode .bubble.out { background: #d9fdd3; border: 1px solid #c5efbe; }
body.panel-mode .bubble.in  { background: #ffffff; border: 1px solid var(--line); }
body.panel-mode .bubble-time { font-size: 10px; bottom: 4px; }
body.panel-mode .bubble-text { font-size: 14px; line-height: 1.5; }

/* The composer is the thing people look for; give it presence. */
body.panel-mode .composer { gap: 6px; padding-top: 8px; }
body.panel-mode .composer textarea {
  font-size: 14.5px; border-radius: 11px; padding: 9px 12px; min-height: 42px;
}
body.panel-mode .composer .btn { padding: 9px 16px; font-size: 14px; }
/* the formatting strip is a power feature - quiet until wanted */
body.panel-mode .fmt-bar { opacity: .55; transition: opacity .15s; }
body.panel-mode .fmt-bar:hover, body.panel-mode .fmt-bar:focus-within { opacity: 1; }

/* ---------- emoji reactions ----------
   Chips sit UNDER the bubble, the way WhatsApp puts them, so they read as
   something attached to the message rather than part of what it says. */
.bubble-reacts {
  position: absolute; bottom: -11px; inset-inline-end: 8px;
  display: flex; gap: 3px; z-index: 1;
}
.react-chip {
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  padding: 3px 7px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 1px 3px rgba(12, 59, 46, .12);
  display: inline-flex; align-items: center; gap: 3px;
}
.react-chip:hover { border-color: var(--brass-soft); }
/* your own reaction is outlined, so "did I already react" needs no thought */
.react-chip.mine { border-color: var(--wa-green); background: #eafaf0; }

/* a bubble carrying chips needs room under it, or they overlap the next one */
.bubble:has(.bubble-reacts) { margin-bottom: 14px; }

/* third in the row: reply at 2, forward at 34, react at 66 */
.bubble-react {
  position: absolute; bottom: 2px; inset-inline-start: 66px;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 6px; background: rgba(255, 255, 255, .82);
  color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.bubble:hover .bubble-react, .bubble-react:focus-visible { opacity: 1; }
.bubble-react:hover { color: var(--ink); }
@media (hover: none) { .bubble-react { opacity: 1; } }

/* the quick-pick row */
.react-pop {
  position: absolute; bottom: 34px; inset-inline-start: 2px; z-index: 20;
  /* the bubble clips nothing, but the messages list scrolls - keep it inside */
  max-width: calc(100% - 8px);
  display: flex; gap: 2px; padding: 5px 7px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.react-pop button {
  border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 3px 4px; border-radius: 999px;
}
.react-pop button:hover, .react-pop button:focus-visible { background: var(--paper-deep); transform: scale(1.15); }

/* ---------- chat search ----------
   With hundreds of chats the list is unusable without it; below a dozen the
   box is more furniture than help, so loadChats hides it. */
.chat-search {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 4px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--white);
}
.chat-search:focus-within { border-color: var(--brass-soft); box-shadow: 0 0 0 3px rgba(194, 160, 85, .16); }
.chat-search svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.chat-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--ink); padding: 10px 0;
}
/* the browser's own clear button would sit next to ours */
.chat-search input::-webkit-search-cancel-button { display: none; }
.chat-search-x {
  flex: none; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 15px; line-height: 1; padding: 4px 2px;
}
.chat-search-x:hover { color: var(--ink); }
body.panel-mode .chat-search { margin: 8px 0 2px; }
body.panel-mode .chat-search input { font-size: 14px; padding: 8px 0; }

/* ---------- organisation screen (owner only) ---------- */
.org-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 14px; }
.org-table th {
  text-align: start; font-weight: 600; color: var(--muted); font-size: 12.5px;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.org-table td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.org-member-name { font-weight: 600; }
.org-member-mail { font-size: 12px; color: var(--muted); direction: ltr; text-align: end; }
.org-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 7px; vertical-align: 1px; }
.org-dot.ok { background: #1FA855; }
.org-dot.down { background: #C43C3C; }
.org-dot.paused { background: #D8A02D; }
.org-billing {
  font-weight: 700; padding: 10px 12px; border-radius: 10px;
  background: var(--paper-deep); border: 1px solid var(--line); margin: 4px 0 8px;
}

/* ---------- Telegram self-connect card ---------- */
.tg-steps { margin: 8px 0 16px; padding-inline-start: 20px; font-size: 14px; line-height: 1.9; color: var(--ink); }
.tg-steps li { margin-bottom: 4px; }
.tg-steps code { background: var(--paper-deep); padding: 1px 6px; border-radius: 5px; font-size: 13px; direction: ltr; display: inline-block; }
#tgToken { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; background: #FDFCF8; }
#tgToken:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.tg-actions { margin-top: 12px; }
.tg-live { font-weight: 700; color: #146A38; padding: 10px 12px; border-radius: 10px; background: rgba(31,168,85,.1); border: 1px solid rgba(31,168,85,.3); margin: 4px 0 12px; }

/* ---------- channel switch (WhatsApp / Telegram separation) ---------- */
.chan-switch{display:flex;gap:6px;background:var(--paper-deep);border:1px solid var(--line);border-radius:14px;padding:5px;margin:0 0 18px;width:max-content;max-width:100%}
.chan-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;color:var(--muted);padding:9px 22px;border-radius:10px;transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.chan-tab svg{width:17px;height:17px;flex:none}
.chan-tab:hover{color:var(--ink)}
.chan-tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px -3px rgba(12,59,46,.25)}
.chan-tab#chanWa.active{color:#0a5a40}
.chan-tab#chanWa.active svg{color:#1FA855}
.chan-tab#chanTg.active{color:#0A5C86}
.chan-tab#chanTg.active svg{color:#2AABEE}
.chan-tab:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

/* Telegram context: a tint so the mirror reads as a clearly separate channel */
.tg-context #chatsCard .card-head h2::after,
.tg-context #chatPanel .name::after{content:none}
.chat-chan-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:99px;padding:2px 9px;margin-inline-start:8px;vertical-align:middle}
.chat-chan-badge svg{width:11px;height:11px}
.chat-chan-badge.tg{background:rgba(42,171,238,.12);color:#0A5C86}
.chat-chan-badge.wa{background:rgba(31,168,85,.12);color:#0a5a40}

/* ---------- message bookmarks (★) ---------- */
.bubble-star {
  position: absolute; bottom: 2px; inset-inline-start: 100px;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 6px; background: rgba(255, 255, 255, .82);
  color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s ease, color .15s ease;
}
.bubble:hover .bubble-star, .bubble-star:focus-visible { opacity: 1; }
.bubble-star:hover { color: var(--brass); }
.bubble-star.on { opacity: 1; color: var(--brass); }
@media (hover: none) { .bubble-star { opacity: 1; } }
.star-btn.on { color: var(--brass); border-color: var(--brass-soft); background: #F6F1E3; }

/* ---------- one-time welcome after the first successful connect ---------- */
.welcome-box{ max-width:520px; text-align:center; padding:30px 26px 24px; }
.welcome-check{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:27px; font-weight:700; color:var(--white);
  background:linear-gradient(150deg, var(--wa-green), #158D44);
  box-shadow:0 10px 22px -10px rgba(31,168,85,.85);
}
.welcome-box h2{ margin:0 0 8px; font-size:22px; color:var(--ink); }
.welcome-lead{ margin:0 0 20px !important; font-size:15px; line-height:1.7; color:var(--muted) !important; }
.welcome-picks{ display:grid; gap:12px; text-align:right; }
.welcome-pick{
  position:relative; display:block; width:100%; cursor:pointer;
  font-family:inherit; text-align:right;
  background:var(--paper); border:2px solid var(--line); border-radius:13px;
  padding:16px 18px; transition:border-color .15s, background .15s, transform .15s;
}
.welcome-pick:hover{ border-color:var(--brass-soft); background:var(--white); transform:translateY(-1px); }
.welcome-pick:first-child{ border-color:var(--brass-soft); background:var(--white); }
.welcome-pick[disabled]{ opacity:.55; cursor:default; transform:none; }
.wp-badge{
  position:absolute; top:-10px; inset-inline-start:16px;
  background:var(--brass); color:var(--white); font-size:11.5px; font-weight:700;
  padding:2.5px 9px; border-radius:20px; letter-spacing:.2px;
}
.wp-title{ display:block; font-size:16.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.wp-desc{ display:block; font-size:13.5px; line-height:1.65; color:var(--muted); }
.welcome-note{ margin:18px 0 0 !important; font-size:12.5px !important; line-height:1.6; color:var(--muted) !important; }
@media (max-width:420px){
  .welcome-box{ padding:24px 18px 18px; }
  .welcome-box h2{ font-size:19.5px; }
  .welcome-pick{ padding:14px 15px; }
}

/* ---------- pinned chats ---------- */
/* The pin sits first in the row so it is always in the same place, and stays
   faint until used: it is a tool, not a decoration competing with the name. */
.chat-pin{
  flex:none; width:30px; height:30px; padding:5px; margin-inline-end:2px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:8px; cursor:pointer;
  color:var(--line-control); opacity:.55; transition:opacity .15s, color .15s, background .15s;
}
.chat-pin svg{ width:100%; height:100%; }
.chat-pin:hover{ opacity:1; color:var(--brass-text); background:var(--paper-deep); }
.chat-item.is-pinned .chat-pin{ opacity:1; color:var(--brass); }
.chat-item.is-pinned .chat-pin svg{ fill:currentColor; stroke:currentColor; }
/* A pinned row is tinted so the block at the top reads as one group at a glance. */
.chat-item.is-pinned{ background:linear-gradient(90deg, var(--brass-tint, #F4EAD3), transparent 62%); }
@media (hover: none){ .chat-pin{ opacity:.8; } }

/* The register tab is the primary action here: most people who open this screen
   came to sign up, not to return. It reads as a button, not as an afterthought. */
.tabs .tab[data-tab="register"]{
  background:linear-gradient(160deg, var(--brass-bright), var(--brass));
  color:#07251B; font-weight:800; box-shadow:0 6px 14px -8px rgba(168,134,61,.9);
}
.tabs .tab[data-tab="register"]:hover{ filter:brightness(1.04); }
.tabs .tab[data-tab="register"].active{
  background:var(--white); color:var(--ink); box-shadow:0 1px 3px rgba(12,59,46,.14);
}
/* The way out of the invite-code dead end. */
.no-code{ margin:10px 0 0; font-size:13.5px; color:var(--muted); line-height:1.6; }
.no-code a{ color:var(--brass-text); font-weight:700; }

/* A failed load is a different thing from an empty account, and has to look it. */
.chats-failed{ margin:0 0 10px; font-size:14px; line-height:1.65; color:#7A5F16;
  background:#fbf3dd; border:1px solid var(--brass-soft); border-radius:10px; padding:11px 14px; }

/* The action buttons used to be 19px targets pitched 20px apart, sitting on top
   of the bubble's own first line - so on a media message the bin landed right
   on the "תמונה" chip and people deleted messages they meant to open. Two fixes:
   every bubble that carries actions reserves a band at the top so nothing can
   slide under them, and the targets are now 28px with a real gap between them. */
.bubble:has(> .bubble-del), .bubble:has(> .bubble-edit){ padding-top:34px; }
.bubble-tool-base,
.bubble-del,
.bubble-edit{
  position:absolute; top:4px;
  width:28px; height:28px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; font-size:14px; line-height:1; cursor:pointer;
  opacity:0; color:var(--muted); border-radius:7px;
  transition:opacity .15s, color .15s, background .15s;
}
/* Edit sits nearest the edge; delete is pushed furthest from the message body,
   because a stray tap should land on the reversible action, not the final one. */
.bubble-edit{ inset-inline-start:6px; }
.bubble-del{ inset-inline-start:42px; }
.bubble:hover .bubble-del{ opacity:.75; }
.bubble-del:hover{ opacity:1; color:var(--danger); background:var(--danger-bg); }
/* On touch there is no hover to reveal intent, so the destructive one is tinted
   from the start - it should never look like just another grey glyph. */
@media (hover: none){
  .bubble-del{ opacity:.85; color:var(--danger); background:var(--danger-bg); }
  .bubble-edit{ opacity:.7; }
}
/* A deleted message keeps its place in the thread and says what happened. */
.bubble.is-deleted .msg-body{ font-style:italic; color:var(--muted); }

.bubble:hover .bubble-edit{ opacity:.75; }
.bubble-edit:hover{ opacity:1; color:var(--brass-text); background:var(--paper-deep); }
@media (hover: none){ .bubble-edit{ opacity:.7; } }
/* Editing happens where the message already is, so there is no doubt which one. */
.edit-box{ margin-top:6px; }
.edit-box textarea{ width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px;
  border:1px solid var(--brass-soft); border-radius:9px; padding:7px 10px; resize:vertical; }
.edit-box textarea:focus{ outline:2px solid var(--brass); outline-offset:1px; }
.edit-actions{ display:flex; gap:7px; margin-top:6px; }
.bubble-edited{ font-size:11px; color:var(--muted); margin-inline-start:5px; }

/* Group media that has not been fetched: an invitation, not a file. */
.fetch-btn{ margin-top:6px; }

/* Dropping a file onto the conversation. The cue covers the whole panel so the
   target is unmistakable, and pointer-events:none so it can never swallow the
   drop it is advertising. */
#chatPanel { position: relative; }
#chatPanel.drop-active::after {
  content: attr(data-drop-label);
  position: absolute; inset: 8px; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--brand, #0C3B2E); border-radius: 14px;
  background: rgba(251, 247, 238, 0.92); color: var(--brand, #0C3B2E);
  font-weight: 700; font-size: 16px; text-align: center; padding: 0 24px;
  pointer-events: none;
}

/* --- payment history + receipts (billing card) --- */
.payments-title { margin: 20px 0 6px; font-size: 15px; color: var(--ink); }
.payments-scroll { overflow-x: auto; }
.payments-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.payments-table th { text-align: right; font-weight: 600; color: var(--muted); }
.payments-table th, .payments-table td { padding: 7px 0 7px 14px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.payments-table tbody tr:last-child td { border-bottom: none; }
.payments-table a { color: var(--ink-2); }

/* --- billing facts row (subscription card) --- */
.bill-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px; }
.bill-fact { background: var(--line-soft); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bill-fact-label { font-size: 12px; color: var(--muted); }
.bill-fact-value { font-size: 15.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.bill-line { margin: 0 0 4px; }
.payments-empty { color: var(--muted); font-size: 13.5px; background: var(--line-soft); border-radius: 10px; padding: 12px 14px; margin: 0; }
@media (max-width: 560px) { .bill-facts { grid-template-columns: 1fr; gap: 8px; } }

/* --- embedded payment window (customer checkout) --- */
.pay-frame-box{position:relative;max-width:min(1000px,96vw);width:100%;height:min(860px,92vh);padding:0;overflow:hidden;display:flex;flex-direction:column}
.pay-frame-box iframe{flex:1;width:100%;border:0;display:block;background:#fff}
.pay-frame-close{position:absolute;top:8px;inset-inline-end:10px;z-index:1;background:#fff;border:1px solid var(--line);border-radius:50%;width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer;color:var(--muted);box-shadow:0 1px 6px rgba(0,0,0,.15)}
.pay-frame-close:hover{color:var(--ink)}
.pay-frame-fallback{margin:0;padding:8px 14px;font-size:12.5px;color:var(--muted);background:#fff;border-top:1px solid var(--line-soft);text-align:center}

/* text field inside the shared confirm dialog (see promptDialog) */
.modal-input {
  width: 100%; margin: 12px 0 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 16px; background: #fff; color: var(--ink);
}
.modal-input:focus { outline: 2px solid var(--brass); border-color: var(--brass); }

/* image lightbox (chat screen). The thumbnail is capped at 280px, so tapping
   it is the only way to actually read a document photo or a screenshot. */
.bubble-img { cursor: zoom-in; }
.img-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(7, 37, 27, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 22px; cursor: zoom-out;
}
.img-lightbox[hidden] { display: none; }
.img-lightbox img {
  max-width: 96vw; max-height: 94vh; border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.img-lb-close {
  position: absolute; top: 14px; inset-inline-end: 16px;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); border: 0; border-radius: 50%;
  color: #fff; cursor: pointer;
}
.img-lb-close svg { width: 20px; height: 20px; }
.img-lb-close:hover { background: rgba(255, 255, 255, .3); }
.img-lb-close:focus-visible { outline: 2px solid #D8C48F; outline-offset: 2px; }

/* a group sender's name, when it can open a private chat */
.bubble-sender.is-dm { cursor: pointer; }
.bubble-sender.is-dm:hover, .bubble-sender.is-dm:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.bubble-sender.is-dm:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; border-radius: 3px; }

/* the staged attachment, waiting beside the composer for the send button */
.composer-pending {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; margin-bottom: 6px;
  background: var(--paper-deep, #F2EBDB); border: 1px dashed var(--brass-soft, #D8C48F);
  border-radius: 9px; font-size: 13px;
}
.composer-pending img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; flex: none; }
.composer-pending .cp-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink, #0C3B2E); text-align: left;
}
.composer-pending .cp-remove {
  flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--muted, #4A5F57); cursor: pointer; font-size: 14px; line-height: 1;
}
.composer-pending .cp-remove:hover { color: #B42318; background: rgba(180, 35, 24, .08); }

/* The panel-only switch: the one line a side-panel user needs, so it stays
   visible there and reads as a mode, not as one more checkbox. */
.row-panel-only { align-items: flex-start; }
.row-panel-only > span { display: flex; flex-direction: column; gap: 2px; }
.row-panel-only small { font-size: 12.5px; line-height: 1.5; }

/* A quote that links to its original: reads as a control, not a label. */
.bubble-quote.is-link { cursor: pointer; transition: background .12s ease; }
.bubble-quote.is-link:hover, .bubble-quote.is-link:focus-visible { background: rgba(12, 59, 46, .11); outline: none; }
/* The bubble a jump lands on, lit for a moment so the eye finds it. */
.bubble.flash { animation: bubbleFlash 1.5s ease-out; }
@keyframes bubbleFlash {
  0% { box-shadow: 0 0 0 3px var(--brass); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
/* "New messages" pill: sticks to the foot of the list while the reader is scrolled up. */
.new-msgs-pill {
  position: sticky; bottom: 6px; z-index: 2;
  align-self: center; flex: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--brass-text);
  font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 5px 14px; cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(12, 59, 46, .45);
}
.new-msgs-pill::after { content: ' ↓'; }
.new-msgs-pill[hidden] { display: none; }

/* the microphone: red and pulsing while it records */
.chat-composer .mic-btn { width: 44px; height: 44px; align-self: flex-end; }
.chat-composer .mic-btn svg { width: 18px; height: 18px; }
.chat-composer .mic-btn.rec { color: #fff; background: var(--danger); border-color: var(--danger); animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 40, 40, .45); } 50% { box-shadow: 0 0 0 7px rgba(200, 40, 40, 0); } }

/* WhatsApp's attach menu, above the composer */
.attach-menu {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 10px; padding: 6px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); max-width: 260px;
}
.attach-item {
  display: flex; align-items: center; gap: 12px;
  border: none; background: none; cursor: pointer; text-align: start;
  font: inherit; font-size: 14.5px; color: var(--ink); padding: 8px 12px; border-radius: 8px;
}
.attach-item:hover, .attach-item:focus-visible { background: #F6F1E3; outline: none; }
.attach-item .ai-icon { font-size: 20px; width: 26px; text-align: center; }
.camera-box video { width: min(92vw, 520px); max-height: 60vh; border-radius: 10px; background: #000; display: block; margin-bottom: 12px; }

/* the two tracks at registration: one question, two priced answers */
.track-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.track-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--white);
}
.track-opt:has(input:checked) { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(168, 134, 61, .16); }
.track-opt input { margin-top: 3px; accent-color: var(--brass); }
.track-opt > span { display: flex; flex-direction: column; gap: 2px; }
.track-opt b { font-size: 14px; }
.track-opt small { font-size: 12.5px; color: var(--muted); }

.track-sim { margin-top: 2px; }

/* held for non-payment: impossible to miss, on the dashboard and in the panel */
.billing-hold {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line);
  border-radius: 12px; padding: 12px 16px; font-weight: 600; font-size: 14px; line-height: 1.5;
}
.billing-hold.is-soft { background: #FBF3DC; color: #7a5a00; border-color: #E6D39A; }
.billing-hold > span { flex: 1; min-width: 200px; }
.billing-hold .btn { flex: none; }
.billing-hold[hidden] { display: none; }