/* Groweber — guided assistant (assets/js/chatbot.js). Colors: theme variables of theme.css (light and dark). */
.gw-cb { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 2147482000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-family: Satoshi, "Satoshi Placeholder", "Tajawal", system-ui, sans-serif; color: var(--gw-text); }
html[dir="rtl"] .gw-cb { align-items: flex-start; }

/* round button */
.gw-cb-fab { position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--gw-ink); border-radius: 14px; background: var(--gw-accent); color: var(--gw-on-accent); box-shadow: 3px 3px 0 var(--gw-ink); cursor: pointer; transition: transform .15s; }
.gw-cb-fab:hover { transform: translateY(-2px); }
.gw-cb-fab svg { width: 22px; height: 22px; }
html[data-theme="dark"] .gw-cb-fab { border-color: var(--gw-accent); box-shadow: none; }


/* window */
.gw-cb-panel { display: none; flex-direction: column; width: 320px; height: min(470px, calc(100vh - 110px)); overflow: hidden; border: 1.5px solid var(--gw-ink); border-radius: 20px; background: var(--gw-surface); box-shadow: 6px 6px 0 var(--gw-ink), 0 30px 60px var(--gw-shadow); animation: gw-cb-in .2s ease-out; }
.gw-cb.is-open .gw-cb-panel { display: flex; }
html[data-theme="dark"] .gw-cb-panel { border-color: var(--gw-line); box-shadow: 0 30px 60px var(--gw-shadow); }
@keyframes gw-cb-in { from { opacity: 0; transform: translateY(8px); } }

.gw-cb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: var(--gw-ink); color: var(--gw-on-ink); }
.gw-cb-head b { display: block; font-size: 14px; }
.gw-cb-head small { font-size: 12px; opacity: .7; }
.gw-cb-head small i { display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--gw-accent); vertical-align: 1px; }
.gw-cb-x { padding: 0 4px; border: 0; background: none; color: inherit; opacity: .7; font-size: 24px; line-height: 1; cursor: pointer; }
.gw-cb-x:hover { opacity: 1; }

.gw-cb-list { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 13px; overflow-y: auto; overscroll-behavior: contain; background: var(--gw-page); }
.gw-cb-list > * { flex-shrink: 0; }   /* messages never squashed when the conversation gets long */
.gw-cb-msg { align-self: flex-start; max-width: 84%; padding: 10px 13px; border: 1px solid var(--gw-line); border-radius: 14px 14px 14px 4px; background: var(--gw-surface); font-size: 13.5px; line-height: 1.45; white-space: pre-line; animation: gw-cb-in .2s ease-out; }
.gw-cb-msg.is-me { align-self: flex-end; border-color: var(--gw-ink); border-radius: 14px 14px 4px 14px; background: var(--gw-ink); color: var(--gw-on-ink); }
html[dir="rtl"] .gw-cb-msg { border-radius: 14px 14px 4px 14px; }
html[dir="rtl"] .gw-cb-msg.is-me { border-radius: 14px 14px 14px 4px; }
html[data-theme="dark"] .gw-cb-msg.is-me { border-color: var(--gw-accent); background: var(--gw-accent); color: var(--gw-on-accent); }

/* "is typing…" */
.gw-cb-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border: 1px solid var(--gw-line); border-radius: 14px 14px 14px 4px; background: var(--gw-surface); }
html[dir="rtl"] .gw-cb-typing { border-radius: 14px 14px 4px 14px; }
.gw-cb-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--gw-text-muted); animation: gw-cb-dot 1s infinite ease-in-out; }
.gw-cb-typing i:nth-child(2) { animation-delay: .15s; }
.gw-cb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gw-cb-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.gw-cb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gw-cb-chip { padding: 7px 12px; border: 1.5px solid var(--gw-text); border-radius: 999px; background: var(--gw-surface); color: var(--gw-text); font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: start; cursor: pointer; transition: background .15s; }
.gw-cb-chip:hover, .gw-cb-chip:focus-visible { background: var(--gw-accent); color: var(--gw-on-accent); border-color: var(--gw-ink); outline: none; }
.gw-cb-chip.is-main { background: var(--gw-accent); color: var(--gw-on-accent); border-color: var(--gw-ink); }
html[data-theme="dark"] .gw-cb-chip { background: transparent; border-color: var(--gw-line); }
html[data-theme="dark"] .gw-cb-chip.is-main, html[data-theme="dark"] .gw-cb-chip:hover { background: var(--gw-accent); color: var(--gw-on-accent); border-color: var(--gw-accent); }

/* recommended plan */
.gw-cb-plan { align-self: flex-start; width: 92%; overflow: hidden; border: 1.5px solid var(--gw-ink); border-radius: 14px; background: var(--gw-surface); animation: gw-cb-in .2s ease-out; }
html[data-theme="dark"] .gw-cb-plan { border-color: var(--gw-line); }
.gw-cb-plan-in { padding: 12px 14px; }
.gw-cb-plan small { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--gw-accent); color: var(--gw-on-accent); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.gw-cb-plan b { display: block; margin-top: 8px; font-size: 16px; }
.gw-cb-price { margin: 4px 0 0; }   /* numbers read left to right, also in Arabic */
html[dir="rtl"] .gw-cb-price { text-align: right; }
.gw-cb-price strong { font-size: 20px; font-weight: 900; }
.gw-cb-price s { margin-inline-start: 6px; font-size: 13px; color: var(--gw-text-muted); }
.gw-cb-plan ul { margin: 8px 0 0; padding-inline-start: 18px; font-size: 13px; line-height: 1.6; color: var(--gw-text-muted); }
.gw-cb-go { display: block; padding: 11px 14px; border-top: 1.5px solid var(--gw-ink); background: var(--gw-accent); color: var(--gw-on-accent); font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
html[dir="rtl"] .gw-cb-go span { display: inline-block; transform: scaleX(-1); }

.gw-cb-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--gw-line); background: var(--gw-surface); color: var(--gw-text-muted); font-size: 12px; }
.gw-cb-wa { display: inline-flex; align-items: center; gap: 6px; color: var(--gw-text); font-weight: 700; text-decoration: none; }
.gw-cb-wa i { width: 16px; height: 16px; border-radius: 50%; background: #25D366; }   /* WhatsApp brand green, same in both themes */

/* phones: the window takes the whole screen */
@media (max-width: 600px) {
  .gw-cb { inset-inline-end: 14px; bottom: 14px; }
  .gw-cb.is-open { inset: 0; }
  .gw-cb.is-open .gw-cb-fab { display: none; }
  .gw-cb-panel { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
  html[data-theme="dark"] .gw-cb-panel { box-shadow: none; }
}
/* project brief on phones: the bubble sits above the Back / Next bar */
@media (max-width: 809.98px) { html.gw-bf-on .gw-cb:not(.is-open) { bottom: 96px; } }
@media print { .gw-cb { display: none; } }

/* smaller window (desktop / tablet; phones keep the full screen) */
@media (min-width: 601px) {
  .gw-cb-panel { width: 290px; height: min(410px, calc(100vh - 110px)); border-radius: 18px; }
  .gw-cb-head { padding: 11px 14px; }
  .gw-cb-head b { font-size: 13px; }
  .gw-cb-head small { font-size: 11px; }
  .gw-cb-list { gap: 7px; padding: 11px; }
  .gw-cb-msg { padding: 8px 11px; font-size: 12.5px; }
  .gw-cb-chip { padding: 6px 10px; font-size: 11.5px; }
  .gw-cb-plan b { font-size: 14.5px; }
  .gw-cb-price strong { font-size: 17px; }
  .gw-cb-plan ul { font-size: 12px; }
  .gw-cb-go { padding: 9px 12px; font-size: 12px; }
  .gw-cb-foot { padding: 9px 14px; font-size: 11px; }
}

/* Arabic: the chat stays at the bottom right, like in English (its texts stay right to left) */
html[dir="rtl"] .gw-cb { inset-inline-end: auto; right: 20px; left: auto; align-items: flex-start; }   /* right to left: flex-start = the right side */
@media (max-width: 600px) { html[dir="rtl"] .gw-cb { right: 14px; } }