/* ═════════════════════════════════════════════
   AI CHAT — BrickBot
   A chunky LEGO brick that opens into a chat
═════════════════════════════════════════════ */

/* ─── LAUNCHER: a tiny LEGO brick ─── */
.chatbot-launcher {
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:120;
  background:var(--orange);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:14px 18px 16px;
  color:var(--white);
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:-0.3px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow: 0 6px 0 var(--ink), 0 10px 24px -6px rgba(21,21,26,.35);
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:transform .2s, box-shadow .2s;
}
.chatbot-launcher:hover {
  transform:translate(-2px, -3px);
  box-shadow: 0 9px 0 var(--ink), 0 14px 28px -6px rgba(21,21,26,.4);
}
.chatbot-launcher:active {
  transform:translate(0, 2px);
  box-shadow: 0 3px 0 var(--ink);
}
.chatbot-launcher.hidden {
  transform:translateY(140%) scale(.8);
  opacity:0;
  pointer-events:none;
}

/* Studs on top of launcher brick */
.chatbot-launcher-studs {
  position:absolute;
  top:-12px;
  left:0; right:0;
  display:flex;
  justify-content:space-around;
  padding:0 14px;
  pointer-events:none;
}
.chatbot-launcher-stud {
  width:18px; height:18px;
  background:var(--orange);
  border:2px solid var(--ink);
  border-bottom:none;
  border-radius:50% 50% 0 0;
  position:relative;
}
.chatbot-launcher-stud::after {
  content:'';
  position:absolute;
  inset:3px 3px 0;
  border-radius:50% 50% 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, transparent 60%);
}

/* Live pulse dot */
.chatbot-launcher-pulse {
  position:absolute;
  bottom:-4px; right:-4px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--green);
  border:2px solid var(--ink);
  z-index:2;
}
.chatbot-launcher-pulse::after {
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:var(--green);
  opacity:.4;
  animation:chatpulse 2s ease-out infinite;
}
@keyframes chatpulse {
  0% { transform:scale(1); opacity:.4 }
  100% { transform:scale(2); opacity:0 }
}

/* ─── PROACTIVE NUDGE BUBBLE — appears above the launcher ─── */
.chatbot-nudge {
  position:fixed;
  right:24px;
  bottom:96px;
  z-index:118;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:12px;
  padding:11px 38px 13px 14px;
  display:flex;
  flex-direction:column;
  gap:5px;
  max-width:calc(100vw - 48px);
  width:max-content;
  min-width:220px;
  box-shadow: 0 3px 0 var(--ink), 0 14px 28px -10px rgba(21,21,26,.22);
  font-family:var(--font-ui);
  cursor:pointer;
  opacity:0;
  transform:translateY(16px);
  transform-origin: bottom right;
  pointer-events:none;
  transition:opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.chatbot-nudge[hidden] { display:none }
.chatbot-nudge.show {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.chatbot-nudge:hover {
  transform:translateY(-2px);
  box-shadow: 0 5px 0 var(--ink), 0 16px 32px -10px rgba(21,21,26,.28);
}

.chatbot-nudge-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--ink-soft);
  line-height:1;
}
.chatbot-nudge-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--green);
  border:1px solid var(--ink);
  position:relative;
  flex-shrink:0;
}
.chatbot-nudge-dot::after {
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:var(--green);
  opacity:.4;
  animation: nudgepulse 2s ease-out infinite;
}
@keyframes nudgepulse {
  0%   { transform:scale(1);   opacity:.4 }
  100% { transform:scale(2.4); opacity:0 }
}

.chatbot-nudge-text {
  font-family:var(--font-display);
  font-size:15px;
  font-weight:400;
  color:var(--ink);
  letter-spacing:-0.4px;
  line-height:1.15;
  text-transform:none;
  white-space:normal;
  max-width:280px;
}

.chatbot-nudge-close {
  position:absolute;
  top:6px;
  right:6px;
  width:22px; height:22px;
  background:transparent;
  border:none;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--gray-2);
  padding:0;
  transition:background .15s, color .15s;
  z-index:2;
}
.chatbot-nudge-close:hover {
  background:var(--bg-warm);
  color:var(--ink);
}
.chatbot-nudge-close svg { width:11px; height:11px }

/* Tail pointing down toward launcher */
.chatbot-nudge-tail {
  position:absolute;
  right:28px;
  bottom:-7px;
  width:12px; height:12px;
  background:var(--white);
  border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg);
}

/* Hide nudge once the chat is open */
.chatbot-panel.open ~ .chatbot-nudge,
.chatbot-nudge.dismissed { display:none }

@media (max-width:640px) {
  .chatbot-nudge {
    right:14px;
    bottom:80px;
    padding:10px 34px 11px 12px;
    min-width:0;
    max-width:calc(100vw - 28px);
    border-radius:11px;
    gap:4px;
  }
  .chatbot-nudge-text { font-size:14px; letter-spacing:-0.3px; max-width:none }
  .chatbot-nudge-eyebrow { font-size:8.5px; letter-spacing:1.1px }
  .chatbot-nudge-tail { right:22px; width:10px; height:10px; bottom:-6px }
}

/* ─── BACKDROP ─── */
.chatbot-backdrop {
  position:fixed;
  inset:0;
  background:rgba(21,21,26,.5);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:130;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.chatbot-backdrop.open {
  opacity:1;
  pointer-events:auto;
}

/* ─── CHAT PANEL — a giant LEGO brick ─── */
.chatbot-panel {
  position:fixed;
  bottom:24px;
  right:24px;
  width:400px;
  max-width:calc(100vw - 48px);
  height:580px;
  max-height:calc(100vh - 48px);
  background:var(--bg);
  border:2px solid var(--ink);
  border-radius:18px;
  box-shadow: 0 10px 0 var(--ink), 0 20px 50px -8px rgba(21,21,26,.4);
  z-index:140;
  display:flex;
  flex-direction:column;
  transform:translateY(20px) scale(.94);
  opacity:0;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
  isolation:isolate;
}
.chatbot-panel.open {
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}

/* Studs running across top of panel */
.chatbot-panel-studs {
  position:absolute;
  top:-16px;
  left:0; right:0;
  display:flex;
  justify-content:space-around;
  padding:0 28px;
  pointer-events:none;
  z-index:50;
}
.chatbot-panel-stud {
  width:30px;
  height:30px;
  border:2px solid var(--ink);
  border-bottom:none;
  border-radius:50% 50% 0 0;
  position:relative;
}
.chatbot-panel-stud::after {
  content:'';
  position:absolute;
  inset:4px 4px 0;
  border-radius:50% 50% 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, transparent 60%);
}
.chatbot-panel-stud:nth-child(1) { background:var(--orange) }
.chatbot-panel-stud:nth-child(2) { background:var(--yellow) }
.chatbot-panel-stud:nth-child(3) { background:var(--red) }
.chatbot-panel-stud:nth-child(4) { background:var(--blue) }
.chatbot-panel-stud:nth-child(5) { background:var(--green) }

/* ─── HEADER ─── */
.chatbot-header {
  padding:24px 16px 18px 22px;
  border-bottom:2px solid var(--ink);
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--white);
  border-radius:16px 16px 0 0;
}

/* BrickBot avatar — a tiny LEGO minifigure */
.chatbot-avatar {
  position:relative;
  width:50px; height:50px;
  flex-shrink:0;
}
.chatbot-avatar-head {
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:32px; height:32px;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:8px 8px 6px 6px;
  z-index:2;
}
.chatbot-avatar-head::before,
.chatbot-avatar-head::after {
  content:'';
  position:absolute;
  top:11px;
  width:4px; height:4px;
  background:var(--ink);
  border-radius:50%;
}
.chatbot-avatar-head::before { left:7px }
.chatbot-avatar-head::after { right:7px }
.chatbot-avatar-smile {
  position:absolute;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  width:10px; height:5px;
  border:2px solid var(--ink);
  border-top:none;
  border-radius:0 0 10px 10px;
  z-index:3;
}
.chatbot-avatar-body {
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:36px; height:22px;
  background:var(--orange);
  border:2px solid var(--ink);
  border-radius:4px 4px 8px 8px;
  z-index:1;
}

/* Online indicator */
.chatbot-avatar-status {
  position:absolute;
  top:-2px; right:-2px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--green);
  border:2px solid var(--white);
  z-index:4;
}

.chatbot-meta { flex:1; min-width:0 }
.chatbot-name {
  font-family:var(--font-display);
  font-size:18px;
  color:var(--ink);
  letter-spacing:-0.5px;
  text-transform:uppercase;
  line-height:1;
  margin-bottom:5px;
}
.chatbot-name em {
  font-style:normal;
  color:var(--orange-d);
}
.chatbot-status {
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--gray-1);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chatbot-status::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow: 0 0 0 0 rgba(6,167,125,.7);
  animation:livedot 2s infinite;
}
@keyframes livedot {
  0%, 100% { opacity:1 }
  50% { opacity:.5 }
}

.chatbot-close {
  width:36px; height:36px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  cursor:pointer;
  padding:0;
  box-shadow: 0 3px 0 var(--ink);
  transition:transform .15s, box-shadow .15s, background .2s;
  flex-shrink:0;
}
.chatbot-close:hover {
  background:var(--orange);
  color:var(--white);
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--ink);
}
.chatbot-close:active {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--ink);
}
.chatbot-close svg { width:14px; height:14px }

/* ─── MESSAGES AREA ─── */
.chatbot-messages {
  flex:1;
  overflow-y:auto;
  padding:20px 18px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  scroll-behavior:smooth;
  background:
    radial-gradient(circle at 24px 24px, rgba(21,21,26,.06) 2px, transparent 2.5px);
  background-size:36px 36px;
}
.chatbot-messages::-webkit-scrollbar { width:6px }
.chatbot-messages::-webkit-scrollbar-track { background:transparent }
.chatbot-messages::-webkit-scrollbar-thumb {
  background:rgba(21,21,26,.25);
  border-radius:3px;
}

/* Messages = chunky brick speech bubbles */
.chat-msg {
  display:flex;
  gap:8px;
  max-width:86%;
  animation:msgIn .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes msgIn {
  from { opacity:0; transform:translateY(10px) }
  to { opacity:1; transform:translateY(0) }
}

/* Bot bubble — white brick */
.chat-msg-bot { align-self:flex-start }
.chat-msg-bot .chat-msg-bubble {
  position:relative;
  background:var(--white);
  color:var(--ink);
  padding:12px 16px;
  border:2px solid var(--ink);
  border-radius:14px;
  border-bottom-left-radius:4px;
  font-family:var(--font-ui);
  font-size:13.5px;
  line-height:1.5;
  letter-spacing:-0.1px;
  box-shadow: 0 3px 0 var(--ink);
}

/* User bubble — dark brick with orange shadow */
.chat-msg-user {
  align-self:flex-end;
  flex-direction:row-reverse;
}
.chat-msg-user .chat-msg-bubble {
  background:var(--ink);
  color:var(--white);
  padding:12px 16px;
  border:2px solid var(--ink);
  border-radius:14px;
  border-bottom-right-radius:4px;
  font-family:var(--font-ui);
  font-size:13.5px;
  line-height:1.5;
  letter-spacing:-0.1px;
  box-shadow: 0 3px 0 var(--orange-d);
}

/* Mini avatar next to bot messages */
.chat-msg-avatar {
  width:28px; height:28px;
  background:var(--orange);
  border:1.5px solid var(--ink);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--white);
  flex-shrink:0;
  align-self:flex-end;
  position:relative;
  box-shadow: 0 2px 0 var(--ink);
}
.chat-msg-avatar::before {
  content:'';
  position:absolute;
  top:-4px;
  left:50%;
  transform:translateX(-50%);
  width:8px; height:5px;
  background:var(--orange);
  border:1.5px solid var(--ink);
  border-bottom:none;
  border-radius:50% 50% 0 0;
}
.chat-msg-avatar::after {
  content:'';
  width:5px; height:5px;
  background:var(--ink);
  border-radius:50%;
  box-shadow: 7px 0 0 var(--ink);
  margin-right:7px;
  margin-top:-2px;
}

/* Typing indicator */
.chat-typing {
  display:none;
  align-self:flex-start;
  gap:8px;
  align-items:flex-end;
}
.chat-typing.show { display:flex }
.chat-typing-bubble {
  padding:14px 16px;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:14px;
  border-bottom-left-radius:4px;
  box-shadow: 0 3px 0 var(--ink);
  display:inline-flex;
  gap:5px;
  align-items:center;
}
.chat-typing-dot {
  width:7px; height:7px;
  border-radius:50%;
  background:var(--orange);
  border:1.5px solid var(--ink);
  animation:typingdot 1.2s infinite;
}
.chat-typing-dot:nth-child(2) {
  animation-delay:.2s;
  background:var(--yellow);
}
.chat-typing-dot:nth-child(3) {
  animation-delay:.4s;
  background:var(--red);
}
@keyframes typingdot {
  0%, 60%, 100% { transform:translateY(0) }
  30% { transform:translateY(-5px) }
}

/* ─── SUGGESTION PILLS — as colored brick chips ─── */
.chat-suggestions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 18px 14px;
  background:var(--bg);
  border-top:1px dashed var(--line);
  padding-top:12px;
}
.chat-suggestions.hidden { display:none }
.chat-suggestion {
  font-family:var(--font-ui);
  font-size:11.5px;
  font-weight:700;
  color:var(--ink);
  padding:7px 12px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:8px;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .2s;
  letter-spacing:-0.1px;
  box-shadow: 0 3px 0 var(--ink);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.chat-suggestion::before {
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  border:1.5px solid var(--ink);
}
.chat-suggestion:nth-child(1)::before { background:var(--orange) }
.chat-suggestion:nth-child(2)::before { background:var(--yellow) }
.chat-suggestion:nth-child(3)::before { background:var(--red) }
.chat-suggestion:nth-child(4)::before { background:var(--blue) }
.chat-suggestion:hover {
  background:var(--yellow);
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--ink);
}
.chat-suggestion:active {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--ink);
}

/* ─── INPUT AREA — orange brick footer ─── */
.chatbot-input-wrap {
  padding:14px 14px 16px;
  background:var(--white);
  border-top:2px solid var(--ink);
  border-radius:0 0 16px 16px;
  display:flex;
  gap:8px;
  align-items:flex-end;
  position:relative;
}
.chatbot-input {
  flex:1;
  font-family:var(--font-ui);
  font-size:13.5px;
  color:var(--ink);
  padding:11px 14px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:10px;
  resize:none;
  outline:none;
  line-height:1.4;
  max-height:100px;
  transition:box-shadow .15s, border-color .15s;
  letter-spacing:-0.1px;
  box-shadow: inset 0 1px 0 rgba(21,21,26,.05);
}
.chatbot-input::placeholder { color:var(--gray-2) }
.chatbot-input:focus {
  border-color:var(--orange);
  box-shadow: 0 0 0 3px rgba(242,107,31,.18);
}

/* Send button = a chunky orange brick with stud */
.chatbot-send {
  position:relative;
  width:46px; height:46px;
  background:var(--orange);
  color:var(--white);
  border:1.5px solid var(--ink);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  box-shadow: 0 4px 0 var(--ink);
  transition:transform .15s, box-shadow .15s, background .2s;
}
.chatbot-send::before {
  content:'';
  position:absolute;
  top:-5px;
  left:50%;
  transform:translateX(-50%);
  width:12px; height:7px;
  background:var(--orange);
  border:1.5px solid var(--ink);
  border-bottom:none;
  border-radius:50% 50% 0 0;
}
.chatbot-send:hover:not(:disabled) {
  background:var(--orange-l);
  transform:translate(-1px,-2px);
  box-shadow: 0 6px 0 var(--ink);
}
.chatbot-send:hover:not(:disabled)::before { background:var(--orange-l) }
.chatbot-send:active:not(:disabled) {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--ink);
}
.chatbot-send:disabled {
  background:var(--gray-3);
  cursor:not-allowed;
  box-shadow: 0 2px 0 var(--ink);
}
.chatbot-send:disabled::before { background:var(--gray-3) }
.chatbot-send svg { width:17px; height:17px; position:relative; z-index:1 }

.chatbot-disclaimer {
  text-align:center;
  font-family:var(--font-mono);
  font-size:8.5px;
  color:var(--gray-2);
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding:0 14px 12px;
  background:var(--white);
  border-radius:0 0 16px 16px;
}

/* ─── MOBILE ─── */
@media (max-width:640px) {
  .chatbot-launcher {
    bottom:calc(14px + env(safe-area-inset-bottom, 0px));
    right:14px;
    padding:11px 14px 12px;
    font-size:12px;
    gap:7px;
    border-radius:11px;
    box-shadow: 0 5px 0 var(--ink), 0 8px 18px -4px rgba(21,21,26,.35);
  }
  .chatbot-launcher-stud { width:12px; height:12px; border-width:1.5px }
  .chatbot-launcher-studs { padding:0 12px; top:-8px }
  .chatbot-launcher-pulse { width:12px; height:12px; bottom:-3px; right:-3px }

  /* Full-screen chat sheet — slide up from bottom */
  .chatbot-backdrop { backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px) }
  .chatbot-panel {
    bottom:0;
    right:0;
    left:0;
    top:0;
    width:100%;
    max-width:100%;
    height:100dvh;
    max-height:100dvh;
    border:none;
    border-radius:0;
    box-shadow:none;
    background:var(--white);
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .2s;
  }
  .chatbot-panel.open { transform:translateY(0) }

  /* Hide oversized panel studs on mobile — they don't fit a full-screen sheet */
  .chatbot-panel-studs { display:none }

  /* Header — compact, with safe-area for notch */
  .chatbot-header {
    padding:calc(env(safe-area-inset-top, 0px) + 14px) 14px 14px 16px;
    gap:12px;
    border-radius:0;
    position:relative;
  }
  /* Thin colored brand strip across the top — keeps the LEGO vibe without studs */
  .chatbot-header::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:4px;
    background:
      linear-gradient(90deg,
        var(--orange) 0 20%,
        var(--yellow) 20% 40%,
        var(--red) 40% 60%,
        var(--blue) 60% 80%,
        var(--green) 80% 100%);
  }
  .chatbot-avatar { width:42px; height:42px }
  .chatbot-avatar-head { width:26px; height:26px; border-radius:7px 7px 5px 5px }
  .chatbot-avatar-head::before, .chatbot-avatar-head::after { top:9px; width:3.5px; height:3.5px }
  .chatbot-avatar-head::before { left:6px }
  .chatbot-avatar-head::after { right:6px }
  .chatbot-avatar-smile { bottom:5px; width:9px; height:4.5px }
  .chatbot-avatar-body { width:30px; height:18px }
  .chatbot-avatar-status { width:10px; height:10px }
  .chatbot-name { font-size:15px; margin-bottom:3px }
  .chatbot-status { font-size:9px; letter-spacing:.8px }
  .chatbot-close { width:34px; height:34px; box-shadow: 0 2px 0 var(--ink) }
  .chatbot-close svg { width:12px; height:12px }

  /* Messages — denser, less wasted background */
  .chatbot-messages {
    padding:14px 14px 8px;
    gap:10px;
    background-size:28px 28px;
  }
  .chat-msg { max-width:90% }
  .chat-msg-bubble { font-size:14px; padding:10px 13px; line-height:1.45 }
  .chat-msg-bot .chat-msg-bubble { border-radius:14px; border-bottom-left-radius:4px }
  .chat-msg-user .chat-msg-bubble { border-radius:14px; border-bottom-right-radius:4px }
  .chat-msg-avatar { width:26px; height:26px }

  /* Suggestions — single neat row that scrolls if needed */
  .chat-suggestions {
    padding:10px 14px 12px;
    gap:6px;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .chat-suggestions::-webkit-scrollbar { display:none }
  .chat-suggestion {
    font-size:11.5px;
    padding:7px 11px;
    border-radius:8px;
    flex-shrink:0;
    white-space:nowrap;
  }

  /* Input — taller tap target, font-size:16px to stop iOS zoom-on-focus */
  .chatbot-input-wrap {
    padding:10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
    gap:8px;
    border-radius:0;
  }
  .chatbot-input {
    font-size:16px;
    padding:11px 14px;
    border-radius:12px;
    min-height:44px;
  }
  .chatbot-send {
    width:44px; height:44px;
    border-radius:12px;
    box-shadow: 0 3px 0 var(--ink);
  }
  .chatbot-send::before { width:11px; height:6px; top:-4px }
  .chatbot-send svg { width:16px; height:16px }

  .chatbot-disclaimer {
    font-size:8px;
    padding:0 14px calc(env(safe-area-inset-bottom, 0px) + 6px);
    letter-spacing:.4px;
    border-radius:0;
  }
}

/* iPhone SE / very narrow */
@media (max-width:380px) {
  .chatbot-launcher { font-size:11.5px; padding:10px 12px 11px }
  .chatbot-header { padding-left:14px; gap:10px }
  .chatbot-avatar { width:38px; height:38px }
  .chatbot-name { font-size:14px }
  .chatbot-status { font-size:8.5px }
  .chat-suggestion { font-size:11px; padding:6px 10px }
}