/* Shop assistant chat widget (loaded only when the chatbot is on). */
.cb-launch {
  position: fixed; right: 20px; bottom: calc(18px + 66px * var(--n, 0)); z-index: 62;
  width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 10px 24px rgba(79, 70, 229, .42);
  transition: transform .18s, opacity .2s;
}
.cb-launch:hover { transform: scale(1.07); }
.cb-launch svg { width: 25px; height: 25px; }
.cb-launch .cb-dot { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.cb-launch .cb-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e; animation: cb-ping 1.8s ease-out infinite; }
@keyframes cb-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
body.cb-is-open .cb-launch { opacity: 0; pointer-events: none; transform: scale(.6); }

.cb-hint {
  position: fixed; right: 76px; bottom: calc(19px + 66px * var(--n, 0)); z-index: 62; max-width: 210px;
  background: var(--surface, #fff); color: var(--text, #0f172a); border: 1px solid var(--border, #e3e8ef);
  border-radius: 14px 14px 4px 14px; padding: 9px 28px 9px 12px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16); cursor: pointer; animation: cb-in .35s ease both;
}
.cb-hint button { position: absolute; top: 2px; right: 4px; border: 0; background: transparent; color: var(--text-dim, #5b6475); font-size: 16px; cursor: pointer; line-height: 1; padding: 4px; }
@keyframes cb-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

.cb-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 372px; max-width: calc(100vw - 24px);
  height: min(590px, calc(100vh - 36px)); display: none; flex-direction: column; overflow: hidden;
  background: var(--surface, #fff); color: var(--text, #0f172a); border: 1px solid var(--border, #e3e8ef);
  border-radius: 20px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.cb-panel.open { display: flex; animation: cb-pop .26s cubic-bezier(.2, .9, .3, 1.2) both; transform-origin: bottom right; }
@keyframes cb-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }

.cb-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.cb-av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cb-av svg { width: 22px; height: 22px; }
.cb-head b { display: block; font-size: 15px; line-height: 1.2; }
.cb-head small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; opacity: .92; }
.cb-head small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.cb-head-x { margin-left: auto; display: flex; gap: 2px; }
.cb-head-x button { border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1; }
.cb-head-x button:hover { background: rgba(255, 255, 255, .26); }

.cb-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 6px; background: var(--bg, #f4f6fb); display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.cb-msg { max-width: 88%; padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; animation: cb-in .25s ease both; }
.cb-msg a { color: inherit; text-decoration: underline; word-break: break-all; }
.cb-msg.b { align-self: flex-start; background: var(--surface, #fff); border: 1px solid var(--border, #e3e8ef); border-bottom-left-radius: 4px; }
.cb-msg.u { align-self: flex-end; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; border-bottom-right-radius: 4px; }
.cb-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--surface, #fff); border: 1px solid var(--border, #e3e8ef); border-radius: 16px; border-bottom-left-radius: 4px; }
.cb-typing i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: cb-bounce 1s infinite; }
.cb-typing i:nth-child(2) { animation-delay: .15s; } .cb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cb-bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.cb-cards { display: flex; flex-direction: column; gap: 8px; align-self: stretch; animation: cb-in .3s ease both; }
.cb-card { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 9px; background: var(--surface, #fff); border: 1px solid var(--border, #e3e8ef); border-radius: 14px; }
.cb-card img, .cb-card .cb-ph { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; background: var(--primary-soft, #e2f5ef); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary, #0a7d63); font-size: 22px; }
.cb-card h4 { margin: 0 0 2px; font-size: 13.5px; line-height: 1.35; font-weight: 700; }
.cb-card h4 a { color: inherit; text-decoration: none; }
.cb-card p { margin: 0 0 4px; font-size: 12px; color: var(--text-dim, #5b6475); line-height: 1.4; }
.cb-pr { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cb-pr b { color: var(--primary, #0a7d63); font-size: 15px; }
.cb-pr s { color: var(--text-dim, #5b6475); font-size: 12px; }
.cb-pr em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--sale, #d9480f); background: var(--sale-soft, #fff0e6); border-radius: 99px; padding: 1px 7px; }
.cb-btns { grid-column: 1 / -1; display: flex; gap: 6px; }
.cb-btns a, .cb-btns button { flex: 1; text-align: center; border-radius: 10px; padding: 7px 8px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; border: 1px solid var(--border, #e3e8ef); background: var(--surface-2, #f1f5f9); color: var(--text, #0f172a); }
.cb-btns .go { background: var(--primary, #0a7d63); border-color: var(--primary, #0a7d63); color: #fff; }
.cb-btns .done { background: var(--primary-soft, #e2f5ef); color: var(--primary, #0a7d63); border-color: transparent; }
.cb-link { align-self: flex-start; display: inline-block; padding: 9px 16px; border-radius: 99px; font-size: 13.5px; font-weight: 700; text-decoration: none; color: #fff; background: var(--primary, #0a7d63); animation: cb-in .3s ease both; }

.cb-quick { display: flex; gap: 6px; padding: 8px 12px 4px; overflow-x: auto; scrollbar-width: none; background: var(--bg, #f4f6fb); }
.cb-quick::-webkit-scrollbar { display: none; }
.cb-quick button { flex: none; border: 1px solid var(--border, #e3e8ef); background: var(--surface, #fff); color: var(--text, #0f172a); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.cb-quick button:hover { border-color: #6366f1; color: #4f46e5; }

.cb-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border, #e3e8ef); background: var(--surface, #fff); }
.cb-form input, .cb-form textarea { flex: 1; min-width: 0; border: 1px solid var(--border, #e3e8ef); border-radius: 99px; padding: 10px 14px; font: inherit; font-size: 14px; background: var(--surface-2, #f1f5f9); color: var(--text, #0f172a); outline: none; }
.cb-form input:focus, .cb-form textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); background: var(--surface, #fff); }
.cb-form button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); display: inline-flex; align-items: center; justify-content: center; }
.cb-form button:disabled { opacity: .5; }
.cb-form button svg { width: 19px; height: 19px; }
.cb-foot { text-align: center; font-size: 10.5px; color: var(--text-dim, #5b6475); padding: 0 0 7px; background: var(--surface, #fff); }

@media (max-width: 720px) {
  .cb-launch { bottom: calc(14px + 66px * var(--n, 0)); }
  body.has-order-bar .cb-launch { bottom: calc(92px + 66px * var(--n, 0)); }
  .cb-hint { bottom: calc(22px + 66px * var(--n, 0)); }
  body.has-order-bar .cb-hint { bottom: calc(100px + 66px * var(--n, 0)); }
  .cb-panel { right: 0; left: 0; bottom: 0; width: auto; max-width: none; height: min(82vh, 640px); border-radius: 20px 20px 0 0; }
  .cb-panel.open { transform-origin: bottom center; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-panel.open, .cb-msg, .cb-cards, .cb-hint, .cb-link { animation: none; }
  .cb-launch .cb-dot::after, .cb-typing i { animation: none; }
}
html[data-theme="dark"] .cb-msg.b, html[data-theme="dark"] .cb-card { background: var(--surface); }

/* smaller launcher: slimmer on phones, centred over the 56px WhatsApp/Telegram buttons */
.cb-launch .cb-dot { width: 11px; height: 11px; top: 2px; right: 2px; }
@media (max-width: 720px) {
  .cb-launch { width: 38px; height: 38px; right: 26px; bottom: calc(15px + 66px * var(--n, 0)); }
  body.has-order-bar .cb-launch { bottom: calc(93px + 66px * var(--n, 0)); }
  .cb-launch svg { width: 19px; height: 19px; }
  .cb-hint { right: 70px; bottom: calc(18px + 66px * var(--n, 0)); }
  body.has-order-bar .cb-hint { bottom: calc(96px + 66px * var(--n, 0)); }
}

/* launcher a little bigger again: 50px desktop, 44px phone (still centred over the 56px WhatsApp/Telegram buttons) */
@media (max-width: 720px) {
  .cb-launch { width: 44px; height: 44px; right: 24px; }
  .cb-launch svg { width: 22px; height: 22px; }
  .cb-hint { right: 76px; }
}

/* phone: a smaller chat window (the button keeps its size) */
@media (max-width: 720px) {
  .cb-panel { height: min(62vh, 470px); border-radius: 16px 16px 0 0; }
  .cb-head { padding: 8px 12px; gap: 8px; }
  .cb-av { width: 30px; height: 30px; }
  .cb-av svg { width: 17px; height: 17px; }
  .cb-head b { font-size: 14px; }
  .cb-head small { font-size: 10.5px; }
  .cb-head-x button { width: 26px; height: 26px; font-size: 15px; }
  .cb-body { padding: 10px 10px 4px; gap: 6px; }
  .cb-msg { font-size: 13px; padding: 7px 10px; line-height: 1.45; border-radius: 14px; }
  .cb-card { grid-template-columns: 50px 1fr; gap: 8px; padding: 7px; }
  .cb-card img, .cb-card .cb-ph { width: 50px; height: 50px; }
  .cb-card h4 { font-size: 12.5px; }
  .cb-card p { font-size: 11px; }
  .cb-pr b { font-size: 13.5px; }
  .cb-btns a, .cb-btns button { padding: 5px 6px; font-size: 11.5px; }
  .cb-link { padding: 7px 13px; font-size: 12.5px; }
  .cb-quick { padding: 6px 10px 2px; }
  .cb-quick button { padding: 5px 10px; font-size: 11.5px; }
  .cb-form { padding: 7px 10px; gap: 6px; }
  .cb-form input, .cb-form textarea { padding: 8px 12px; font-size: 13px; }
  .cb-form button { width: 36px; height: 36px; }
  .cb-foot { font-size: 9.5px; padding-bottom: 5px; }
}

/* phone keyboard open: the window fills only the visible area, with everything unneeded folded away */
@media (max-width: 720px) {
  body.cb-is-open { overflow: hidden; }
  .cb-form input, .cb-form textarea { font-size: 16px; }   /* 16px stops iPhones zooming the page when the box is focused */
  .cb-panel.kb { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 60vh); max-height: none; border-radius: 0; }
  .cb-panel.kb .cb-quick, .cb-panel.kb .cb-foot { display: none; }
  .cb-panel.kb .cb-head { padding: 5px 10px; }
  .cb-panel.kb .cb-av { display: none; }
  .cb-panel.kb .cb-head small { display: none; }
  .cb-panel.kb .cb-body { padding: 8px 10px 2px; }
  .cb-panel.kb .cb-form { padding: 6px 8px; }
  .cb-panel.kb .cb-form input, .cb-panel.kb .cb-form textarea { padding: 7px 12px; }
  .cb-panel.kb .cb-form button { width: 34px; height: 34px; }
  .cb-panel.kb .cb-card { grid-template-columns: 40px 1fr; padding: 5px; }
  .cb-panel.kb .cb-card img, .cb-panel.kb .cb-card .cb-ph { width: 40px; height: 40px; }
  .cb-panel.kb .cb-card p { display: none; }
}

/* a little larger chat text */
.cb-msg { font-size: 15px; }
.cb-card h4 { font-size: 14px; }
.cb-card p { font-size: 12.5px; }
.cb-pr b { font-size: 16px; }
.cb-btns a, .cb-btns button { font-size: 13px; }
.cb-quick button { font-size: 13.5px; }
.cb-link { font-size: 14.5px; }
@media (max-width: 720px) {
  .cb-msg { font-size: 14.5px; line-height: 1.5; }
  .cb-card h4 { font-size: 13.5px; }
  .cb-card p { font-size: 12px; }
  .cb-pr b { font-size: 14.5px; }
  .cb-btns a, .cb-btns button { font-size: 12.5px; }
  .cb-quick button { font-size: 12.5px; }
  .cb-link { font-size: 13.5px; }
  .cb-head b { font-size: 15px; }
}

/* quick-reply chips: sideways scrolling that works with a mouse too */
.cb-quick-wrap { position: relative; background: var(--bg, #f4f6fb); }
.cb-quick-wrap .cb-quick { cursor: grab; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.cb-quick-wrap .cb-quick.dragging { cursor: grabbing; }
.cb-quick-wrap .cb-quick.dragging button { pointer-events: none; }
.cb-q-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--border, #e3e8ef); background: var(--surface, #fff); color: #4f46e5; font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .18); }
.cb-q-arrow:hover { background: #eef2ff; }
.cb-q-arrow[hidden] { display: none; }
.cb-q-prev { left: 4px; }
.cb-q-next { right: 4px; }
@media (hover: none) { .cb-q-arrow { display: none; } }
@media (max-width: 720px) { .cb-panel.kb .cb-quick-wrap { display: none; } }

/* screenshot attach */
.cb-attach { flex: none; width: 38px; height: 38px; border: 1px solid var(--border, #e3e8ef); border-radius: 50%; background: var(--surface-2, #f1f5f9); font-size: 17px; cursor: pointer; line-height: 1; }
.cb-attach:hover { background: #eef2ff; }
.cb-prev { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--border, #e3e8ef); background: #eef2ff; font-size: 12px; color: #4338ca; }
.cb-prev[hidden] { display: none; }
.cb-prev img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; border: 1px solid #c7d2fe; }
.cb-prev span { flex: 1; min-width: 0; }
.cb-prev-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #c7d2fe; color: #312e81; cursor: pointer; font-size: 16px; line-height: 1; }
.cb-imgmsg { padding: 4px; background: #6366f1; }
.cb-imgmsg img { display: block; max-width: 180px; max-height: 160px; border-radius: 12px; }
@media (max-width: 720px) { .cb-panel.kb .cb-prev { display: none; } .cb-attach { width: 34px; height: 34px; } }

/* the screenshot button: a clear coloured button with a picture icon and the word "ছবি" */
.cb-attach { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; height: 42px; padding: 0 13px; border: 0; border-radius: 99px; background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; box-shadow: 0 4px 12px rgba(234, 88, 12, .4); animation: cb-attn 2.4s ease-out 1.2s 2; }
.cb-attach:hover { background: linear-gradient(135deg, #fbbf24, #f97316); transform: translateY(-1px); }
.cb-attach svg { width: 19px; height: 19px; flex: none; }
@keyframes cb-attn { 0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, .55); } 70% { box-shadow: 0 0 0 12px rgba(234, 88, 12, 0); } 100% { box-shadow: 0 4px 12px rgba(234, 88, 12, .4); } }
@media (max-width: 720px) { .cb-attach { height: 38px; padding: 0 11px; font-size: 12.5px; } .cb-attach svg { width: 17px; height: 17px; } }
@media (prefers-reduced-motion: reduce) { .cb-attach { animation: none; } }

/* the screenshot button: the generic ".cb-form button" round purple style was winning — this wins back */
.cb-form .cb-attach { width: auto; min-width: 0; height: 40px; padding: 0 14px 0 11px; border-radius: 99px; background: linear-gradient(135deg, #fbbf24, #f97316); color: #fff; border: 0; gap: 6px; font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 4px 12px rgba(234, 88, 12, .38), inset 0 1px 0 rgba(255, 255, 255, .35); }
.cb-form .cb-attach:hover { background: linear-gradient(135deg, #fcd34d, #fb923c); transform: translateY(-1px); }
.cb-form .cb-attach:active { transform: scale(.96); }
.cb-form .cb-attach svg { width: 18px; height: 18px; }
.cb-form .cb-attach span { display: inline; }
.cb-form { align-items: center; }
@media (max-width: 720px) { .cb-form .cb-attach { height: 36px; padding: 0 11px 0 9px; font-size: 12.5px; } .cb-form .cb-attach svg { width: 16px; height: 16px; } }

/* keyboard open on a phone: the picture button becomes a small round icon (the compact rule for ".cb-form button" had squashed it) */
@media (max-width: 720px) {
  .cb-panel.kb .cb-form .cb-attach { width: 34px; height: 34px; min-width: 34px; padding: 0; gap: 0; border-radius: 50%; }
  .cb-panel.kb .cb-form .cb-attach span { display: none; }
  .cb-panel.kb .cb-form .cb-attach svg { width: 18px; height: 18px; }
}

/* phone, keyboard hidden: a somewhat taller chat window (the launcher button is untouched) */
@media (max-width: 720px) {
  .cb-panel:not(.kb) { height: min(74vh, 560px); }
}

/* contact buttons under a reply */
.cb-contacts { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; animation: cb-in .3s ease both; }
.cb-cbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 99px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 12px rgba(15, 23, 42, .18); transition: transform .12s, filter .15s; }
.cb-cbtn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cb-cbtn::before { content: ""; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.cb-c-wa { background: linear-gradient(135deg, #25d366, #128c7e); }
.cb-c-wa::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.4 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .5l-.4.6c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.8-.1 1.4z'/></svg>"); }
.cb-c-tg { background: linear-gradient(135deg, #37aee2, #1e96c8); }
.cb-c-tg::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M21.9 4.1 2.6 11.6c-1.3.5-1.3 1.3-.2 1.6l4.9 1.5 1.9 5.8c.2.6.4.8.8.8.4 0 .6-.2.9-.5l2.4-2.3 4.9 3.6c.9.5 1.5.2 1.8-.8l3.2-15.1c.3-1.3-.5-1.9-1.4-1.5zM8.2 13.9l9.4-5.9c.4-.3.8-.1.5.2l-7.7 7-.3 3.2-1.9-4.5z'/></svg>"); }
@media (max-width: 720px) { .cb-cbtn { padding: 8px 13px; font-size: 13px; } }

/* the message box grows upwards as the text gets longer (up to about five lines), on phone and computer */
.cb-form { align-items: flex-end; }
.cb-form textarea { display: block; resize: none; height: 42px; max-height: 128px; border-radius: 22px; line-height: 1.45; overflow-y: hidden; box-sizing: border-box; font-family: inherit; }
.cb-form .cb-attach, .cb-form button[type="submit"] { align-self: flex-end; }
@media (max-width: 720px) { .cb-form textarea { height: 38px; max-height: 108px; } .cb-panel.kb .cb-form textarea { height: 34px; max-height: 88px; border-radius: 18px; } }

/* computer: the action buttons under a reply (checkout link, coupon, resend, WhatsApp/Telegram) are small and sit side by side */
@media (min-width: 721px) {
  .cb-link { font-size: 13px; padding: 7px 14px; }
  .cb-contacts { gap: 6px; }
  .cb-cbtn { padding: 7px 13px; font-size: 13px; gap: 6px; box-shadow: 0 2px 8px rgba(15, 23, 42, .15); }
  .cb-cbtn::before { width: 16px; height: 16px; }
}

/* computer: product-card buttons are one slim line ("বিস্তারিত" small, the main button takes the rest) */
@media (min-width: 721px) {
  .cb-btns a, .cb-btns button { padding: 6px 10px; font-size: 12.5px; white-space: nowrap; line-height: 1.3; }
  .cb-btns a { flex: 0 0 auto; }
  .cb-btns button { flex: 1 1 auto; }
}

/* a coupon code inside a reply: tap to copy */
.cb-code { display: inline; margin: 0 1px; padding: 1px 8px; border: 1.5px dashed var(--primary, #0a7d63); border-radius: 7px; background: var(--primary-soft, #e2f5ef); color: var(--primary, #0a7d63); font: inherit; font-weight: 800; letter-spacing: .3px; cursor: pointer; line-height: 1.5; }
.cb-code:hover { filter: brightness(.96); }
.cb-code.ok { background: var(--primary, #0a7d63); color: #fff; border-style: solid; }

/* the WhatsApp number written out, with a copy button */
.cb-phone { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; align-self: flex-start; padding: 8px 12px; border: 1px dashed #25d366; border-radius: 14px; background: #f0fdf4; animation: cb-in .3s ease both; }
.cb-phone-l { font-size: 12px; color: #4b5563; width: 100%; }
.cb-phone-n { font-size: 17px; letter-spacing: .5px; color: #064e3b; user-select: all; }
.cb-phone-c { border: 0; border-radius: 99px; padding: 5px 12px; background: #25d366; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .12s, filter .15s; }
.cb-phone-c:hover { filter: brightness(1.08); } .cb-phone-c:active { transform: scale(.95); }
@media (max-width: 720px) { .cb-phone-n { font-size: 16px; } }

/* always-available contact bar (📞 in the header): the number with a copy button and the chat buttons */
.cb-head-x .cb-ct-btn { font-size: 15px; }
.cb-head-x .cb-ct-btn.on { background: rgba(255, 255, 255, .34); }
.cb-ctbar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; animation: cb-in .25s ease both; }
.cb-ctbar[hidden] { display: none; }
.cb-ctbar .cb-contacts, .cb-ctbar .cb-phone { animation: none; align-self: stretch; }
.cb-ctbar .cb-phone { background: #fff; }

/* the always-visible contact strip: one slim row (WhatsApp button, number, copy, Telegram) */
.cb-ctbar { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 6px 8px !important; padding: 6px 12px !important; }
.cb-ctbar .cb-cbtn { padding: 5px 11px; font-size: 12.5px; gap: 5px; box-shadow: none; }
.cb-ctbar .cb-cbtn::before { width: 14px; height: 14px; }
.cb-ct-n { font-size: 14px; letter-spacing: .3px; color: #064e3b; user-select: all; }
.cb-ct-c { border: 1px solid #25d366; background: #fff; color: #047857; border-radius: 99px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cb-ct-c:active { transform: scale(.95); }
.cb-ctbar .cb-c-tg { margin-left: auto; }
/* phones: a single tidy line */
@media (max-width: 720px) {
  .cb-ctbar { padding: 5px 8px !important; gap: 5px 6px !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .cb-ctbar::-webkit-scrollbar { display: none; }
  .cb-ctbar > * { flex: none; }
  .cb-ctbar .cb-cbtn { padding: 4px 9px; font-size: 11.5px; }
  .cb-ct-n { font-size: 12.5px; }
  .cb-ct-c { padding: 2px 8px; font-size: 11px; }
  /* the number box under a reply: label and number on one line, small copy button */
  .cb-phone { padding: 5px 10px; gap: 4px 8px; border-radius: 12px; }
  .cb-phone-l { width: auto; font-size: 11px; }
  .cb-phone-n { font-size: 14px; }
  .cb-phone-c { padding: 3px 9px; font-size: 11.5px; margin-left: auto; }
}

/* computer: a lower chat window (about 460px instead of 590px) */
@media (min-width: 721px) {
  .cb-panel { height: min(460px, calc(100vh - 36px)); }
}

/* computer: everything a size smaller and tighter */
@media (min-width: 721px) {
  .cb-panel { height: min(430px, calc(100vh - 36px)); width: 340px; }
  .cb-head { padding: 7px 12px; gap: 8px; }
  .cb-av { width: 30px; height: 30px; } .cb-av svg { width: 18px; height: 18px; }
  .cb-head b { font-size: 14px; } .cb-head small { font-size: 10.5px; }
  .cb-head-x button { width: 26px; height: 26px; font-size: 15px; }
  .cb-body { padding: 8px 10px; gap: 6px; }
  .cb-msg { font-size: 13px; line-height: 1.45; padding: 6px 10px; border-radius: 13px; }
  .cb-contacts { gap: 5px; }
  .cb-cbtn { padding: 5px 11px; font-size: 12px; }
  .cb-cbtn::before { width: 13px; height: 13px; }
  .cb-phone { padding: 5px 10px; gap: 4px 8px; border-radius: 11px; }
  .cb-phone-l { width: auto; font-size: 11px; }
  .cb-phone-n { font-size: 14px; }
  .cb-phone-c { padding: 3px 9px; font-size: 11.5px; margin-left: auto; }
  .cb-link { font-size: 12px; padding: 5px 11px; }
  .cb-quick { gap: 5px; padding: 4px 8px; }
  .cb-quick button { padding: 5px 10px; font-size: 12px; }
  .cb-form { padding: 6px 8px; gap: 6px; }
  .cb-form textarea { height: 34px; font-size: 13px; padding: 7px 12px; }
  .cb-form button[type="submit"] { width: 34px; height: 34px; }
  .cb-form .cb-attach { height: 34px; padding: 0 10px; font-size: 12px; }
  .cb-foot { font-size: 10px; padding: 2px 8px 5px; }
}

.cb-btns .cb-demo { background: #fff7e0; border-color: #f3d27a; color: #7a5200; }