/* TWF sales chat widget — styles. Scoped under .twf-chat to avoid bleeding into
   the host page. Load alongside widget.js, or inline it in the embed snippet. */

.twf-chat { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.twf-chat__bubble {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: #1f7a4d; color: #fff; font-size: 26px; line-height: 56px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); transition: transform .15s ease; }
.twf-chat__bubble:hover { transform: scale(1.06); }

.twf-chat__panel {
  position: absolute; right: 0; bottom: 70px; width: 340px; max-width: 92vw;
  height: 460px; max-height: 72vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.28); }
/* The hidden attribute must win over display:flex above, or the panel won't close. */
.twf-chat__panel[hidden] { display: none !important; }

.twf-chat__header {
  display: flex; align-items: center; justify-content: space-between;
  background: #1f7a4d; color: #fff; padding: 12px 14px; font-weight: 600; font-size: 15px; }
.twf-chat__close {
  background: transparent; border: none; color: #fff; font-size: 22px; cursor: pointer;
  line-height: 1; padding: 0 4px; }

.twf-chat__log {
  flex: 1; overflow-y: auto; padding: 12px; background: #f6f8f7;
  display: flex; flex-direction: column; gap: 8px; }

.twf-msg {
  max-width: 84%; padding: 8px 11px; border-radius: 12px; font-size: 14px;
  line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.twf-msg--bot  { align-self: flex-start; background: #fff; color: #1c2b24;
  border: 1px solid #e2e8e5; border-bottom-left-radius: 4px; }
.twf-msg--user { align-self: flex-end; background: #1f7a4d; color: #fff;
  border-bottom-right-radius: 4px; }

.twf-menu { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
.twf-menu__btn {
  background: #fff; border: 1px solid #1f7a4d; color: #1f7a4d; border-radius: 16px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; }
.twf-menu__btn:hover { background: #1f7a4d; color: #fff; }

/* The Urdu reading of the name in the header — elegant, right-to-left, slightly larger. */
.twf-chat__urdu { font-size: 16px; opacity: .92; margin-left: 4px; font-weight: 500; }

/* Activity status: a warm, evolving "💬 BOT Saab is getting that for you ···" line. Sits just
   above the input so the visitor sees the bot is actively working while they wait. */
.twf-chat__status {
  padding: 7px 12px; font-size: 12.5px; font-style: italic; color: #4a5a52;
  background: #eef3f1; border-top: 1px solid #e2e8e5; }
.twf-chat__status[hidden] { display: none !important; }

.twf-chat__form { display: flex; border-top: 1px solid #e2e8e5; background: #fff; }
.twf-chat__input {
  flex: 1; border: none; padding: 12px; font-size: 14px; outline: none; }
.twf-chat__send {
  border: none; background: #1f7a4d; color: #fff; padding: 0 16px; cursor: pointer;
  font-size: 14px; font-weight: 600; }
.twf-chat__send:hover { background: #19633e; }

/* ── Robustness against host-theme bleed ──────────────────────────────────────────
   WordPress themes commonly restyle bare `button`/`input`/`a` (uppercase text,
   letter-spacing, box-shadows, odd line-heights, border-radius). Re-assert our own
   so the widget looks the same on any theme. All scoped under .twf-chat. */
.twf-chat, .twf-chat * { box-sizing: border-box; }
.twf-chat button, .twf-chat input {
  margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal;
  box-shadow: none; -webkit-appearance: none; appearance: none; }
.twf-chat button { line-height: normal; }
.twf-chat__input { border-radius: 0; background: #fff; color: #1c2b24; min-width: 0; }
.twf-chat__bubble { padding: 0; }

/* Links inside messages — readable in BOTH the white bot bubble and the green user bubble. */
.twf-msg a { text-decoration: underline; word-break: break-word; }
.twf-msg--bot a  { color: #1f7a4d; }
.twf-msg--user a { color: #fff; }

/* Hide the launcher bubble while the panel is open (less clutter, esp. on mobile). */
.twf-chat--open .twf-chat__bubble { display: none; }

/* Pre-open teaser: a one-line invite that appears just before the panel auto-opens. */
.twf-chat__teaser {
  position: absolute; right: 0; bottom: 70px; width: max-content; max-width: 240px;
  text-align: left; background: #fff; color: #1c2b24; border: 1px solid #e2e8e5;
  border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.4; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: twf-teaser-in .25s ease both; }
.twf-chat__teaser:hover { border-color: #1f7a4d; }
@keyframes twf-teaser-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .twf-chat__bubble, .twf-chat__teaser { transition: none; animation: none; }
}