/**
 * aicost.ai — Chat Widget Styles
 * Companion to aicost-chat.js
 */

/* ═════════════════════════════════════════════════════════════
   SOFT LOCK VIA STICKY POSITIONING

   Approach: when chat becomes active (after first message), the widget
   switches to `position: sticky` so it soft-locks to the top of the
   viewport as the user scrolls. When user scrolls back up past its
   natural position, it un-sticks and rejoins page flow.

   Why this beats a fixed overlay:
     ✓ All in-page links still work (anchor navigation, nav, footer)
     ✓ No body scroll lock
     ✓ Browser's native scroll momentum is preserved
     ✓ Back/forward buttons work as expected
     ✓ No modal state to manage

   When chat is active, the widget becomes a 3-zone flex column
   (header + scrollable thread + composer) with a max-height so the
   whole panel stays visible when pinned to the viewport top.

   IMPORTANT CAVEAT about `position: sticky`:
   Sticky only pins within its nearest scrolling ancestor's bounds.
   The widget lives inside `.v2-hero-chat`, so sticky behavior lasts
   until the bottom of that section scrolls past. After that, the widget
   scrolls away naturally — acceptable because the user has probably
   moved on by then. To sticky across the entire page, the widget would
   need to be a direct child of body, which is a bigger refactor.
   ═════════════════════════════════════════════════════════════ */

/* Chat-active widget: soft-locks to viewport top + becomes flex column
   with scrollable middle thread. */
/* When chat active, expand the widget's parent section to cover the full
   remaining page. Sticky positioning only works within the parent's bounds,
   so by making the parent tall, the widget stays sticky all the way down
   to the footer — user can scroll through the whole page without losing
   access to the chat.

   Uses body class (set by JS) for wider browser support than :has(). */
body.aicost-chat-active .v2-hero-chat {
  min-height: 100vh;
  min-height: 100dvh;
}

/* On mobile: hide the top navigation when chat is active to reclaim ~60px
   of vertical space for the widget. Users don't need Home/About/Contact
   links while actively chatting — they can close the chat (×) to get nav
   back. Desktop keeps the nav visible (plenty of horizontal space). */
@media (max-width: 640px) {
  body.aicost-chat-active .aicost-nav {
    display: none !important;
  }
}

/* Chat-active widget: STICKY positioning so user can scroll the rest of the
   page freely. The widget "follows" the user while they scroll within its
   sticky context (.v2-hero-chat section), then releases when they scroll
   past that section — so they can reach footer, other page sections, etc.

   Max-height is constrained to ~70vh on mobile / ~85vh on desktop so the
   widget doesn't cover the entire viewport. User can always see some page
   content above or below the widget. */
.v2-genie.aicost-chat-active {
  position: sticky;
  top: 12px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  /* Full viewport minus gap — widget takes the space IMMEDIATELY on activation
     rather than growing with content. Thread inside uses flex:1 to claim
     unused space, so incoming reply fills that space rather than expanding
     the widget. */
  height: calc(100vh - 24px);
  height: calc(100dvh - 24px);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

@media (max-width: 640px) {
  .v2-genie.aicost-chat-active {
    top: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
  }
}

/* Zone 1: Header (natural top of flex column).
   Chat-active override — matches AvatarVA red/orange banner aesthetic:
   - Red-orange gradient background (editorial, attention-getting)
   - Black title text (vs. the brown/green used in welcome state)
   - Tagline also black (vs. accent green) for stronger contrast
   - No top border stripe (green was clipping into viewport on mobile) */
.v2-genie.aicost-chat-active {
  border-top: 0 !important;              /* remove 8px green stripe in chat mode */
}
.v2-genie.aicost-chat-active .v2-genie-header {
  flex-shrink: 0;
  position: relative;                    /* anchor for close button */
  background: linear-gradient(135deg, #d94d2f 0%, #c13a1e 100%) !important;
  border-bottom: 0 !important;
  padding: 16px 20px !important;         /* tighter than welcome-state's 24px/28px */
}
.v2-genie.aicost-chat-active .v2-genie-name {
  color: #1a1a1a !important;             /* black title */
  font-size: 1.15rem !important;
}
.v2-genie.aicost-chat-active .v2-genie-tagline {
  color: #1a1a1a !important;             /* black tagline too */
  font-weight: 700;
  font-size: 1rem !important;
}
/* Smaller avatar in chat mode to reclaim vertical space */
.v2-genie.aicost-chat-active .v2-genie-avatar {
  width: 42px !important;
  height: 42px !important;
  font-size: 1.6rem !important;
}

/* Close button — pill-shaped "Close ×" matching AvatarVA reference */
.aicost-chat-close {
  display: none;
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 7px 16px;
  height: auto;
  width: auto;
  border-radius: 100px;                  /* pill shape */
  border: none;
  background: #1a1a1a;                   /* dark, matches AvatarVA */
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  line-height: 1;
  transition: background .15s, transform .15s;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aicost-chat-close:hover {
  background: #d94d2f;                   /* turns red on hover, matches header */
  transform: scale(1.03);
}
.v2-genie.aicost-chat-active .aicost-chat-close {
  display: inline-flex;
}
.aicost-chat-close-x {
  font-size: 1rem;
  line-height: 1;
  margin-left: 2px;
  font-weight: 400;
}

/* Zone 2: Thread — fills middle space, scrolls internally */
.v2-genie.aicost-chat-active .aicost-chat-thread {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;                        /* allow flex shrink so scroll activates */
  overflow-y: auto;
  background: #fffaf3;
}

/* Zone 3: Composer (anchored at bottom of flex column) */
.v2-genie.aicost-chat-active .aicost-chat-composer {
  flex-shrink: 0;
  position: relative;                   /* override any `fixed` legacy rules */
}

/* Welcome panel hidden when chat is active */
.v2-genie.aicost-chat-active #aicostChatWelcome {
  display: none !important;
}

/* Footer garnish (knowledge-covers chips + "Need personalized solution" + Talk-to-human)
   hidden in chat mode. This reclaims ~200px on mobile so the thread + composer have
   room to breathe. Users who want to chat don't need to see knowledge scope pitch;
   users who land on page still see it on the welcome state. "Talk to a human" is
   preserved via the in-thread action buttons on every assistant reply. */
.v2-genie.aicost-chat-active .v2-genie-footer {
  display: none !important;
}

/* When JS has moved the footer OUT of the widget (sibling below widget in chat mode),
   re-show it with some top margin so it doesn't visually touch the widget. The
   `[data-moved="1"]` attribute is set by aicost-chat.js activateChatMode(). */
.v2-genie-footer[data-moved="1"] {
  display: block !important;             /* override the hide-when-active rule above */
  max-width: 920px;
  margin: 20px auto 0;
  padding: 18px 24px;
  background: #fffaf3;
  border: 2px solid #e8dcc4;
  border-radius: 14px;
}
@media (max-width: 640px) {
  .v2-genie-footer[data-moved="1"] {
    margin: 14px 16px 0;
    padding: 14px 18px;
    border-radius: 12px;
  }
}


/* ═ Message Thread ═══════════════════════════════════════ */
.aicost-chat-thread {
  display: none; /* shown once first message sent */
  padding: 20px 24px 8px;
  background: #fffaf3;
  max-height: 600px;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;       /* iOS momentum scroll */
  overscroll-behavior: auto;               /* allow scroll chain so page scrolls when thread exhausted */
  scroll-padding-top: 8px;                 /* offset for scrollIntoView({block:'start'}) */
  scroll-padding-bottom: 12px;             /* offset for scrollIntoView({block:'end'}) */
}
.aicost-chat-thread::-webkit-scrollbar { width: 6px; }
.aicost-chat-thread::-webkit-scrollbar-thumb { background: #d4c4a0; border-radius: 3px; }

.aicost-msg {
  display: flex;
  margin-bottom: 14px;
}
.aicost-msg-user { justify-content: flex-end; }
.aicost-msg-assistant { justify-content: flex-start; }
.aicost-msg-system { justify-content: center; }

.aicost-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  line-height: 1.5;
  font-size: .95rem;
}
.aicost-bubble-user {
  background: #00a67e;
  color: #fff;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.aicost-bubble-assistant {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #e8dcc4;
  border-bottom-left-radius: 4px;
  max-width: 92%;
  width: 92%;
}
.aicost-bubble-error {
  background: #fef5f3;
  border-color: #f5c5c0;
}

.aicost-reply {
  font-size: .95rem;
  line-height: 1.55;
  color: #1a1a1a;
}
.aicost-reply a {
  color: #00a67e;
  text-decoration: underline;
  font-weight: 500;
}

/* Streaming cursor — shows while text is being typed */
.aicost-cursor {
  display: inline-block;
  color: #00a67e;
  font-weight: 700;
  animation: aicost-cursor-blink 0.9s step-end infinite;
  margin-left: 2px;
}
@keyframes aicost-cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Extras (guide cards, tool cards, actions) — fade in after reply streams */
.aicost-extras {
  opacity: 0;
  transition: opacity .4s ease-in-out;
}
.aicost-extras-visible {
  opacity: 1;
}

/* ═ Typing indicator ═════════════════════════════════════ */
.aicost-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 20px;
  min-height: 36px;
}
.aicost-typing span {
  width: 7px;
  height: 7px;
  background: #666;
  border-radius: 50%;
  opacity: .35;
  animation: aicost-typing-pulse 1.2s infinite;
}
.aicost-typing span:nth-child(2) { animation-delay: .2s; }
.aicost-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aicost-typing-pulse {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ═ Card headers ═════════════════════════════════════════ */
.aicost-cards-header {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a2332;
  letter-spacing: -.01em;
  margin: 22px 0 12px;
  padding-top: 18px;
  border-top: 1px dashed #d4c4a0;
  line-height: 1.3;
}

.aicost-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
@media (min-width: 620px) {
  .aicost-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═ Card base ════════════════════════════════════════════ */
.aicost-card {
  display: block;
  padding: 12px 14px;
  background: #fdfbf5;
  border: 1px solid #e8dcc4;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: all .15s;
}
.aicost-card:hover {
  border-color: #00a67e;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 166, 126, .12);
}

/* ═ Guide cards ══════════════════════════════════════════ */
.aicost-card-guide { display: flex; flex-direction: column; }
.aicost-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.aicost-card-icon { font-size: 1.1rem; }
.aicost-card-type {
  font-size: .68rem;
  color: #00a67e;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.aicost-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
  line-height: 1.25;
}
.aicost-card-snippet {
  font-size: .8rem;
  color: #555;
  line-height: 1.45;
  margin-bottom: 8px;
}
.aicost-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  color: #666;
}
.aicost-card-meta-item { font-weight: 600; }
.aicost-card-cta { color: #00a67e; font-weight: 700; }

/* ═ Tool cards ═══════════════════════════════════════════ */
.aicost-card-tool { display: flex; flex-direction: column; }
.aicost-tool-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.aicost-tool-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 3px;
  border: 1px solid #eee;
  flex-shrink: 0;
}
.aicost-tool-logo-placeholder {
  width: 36px;
  height: 36px;
  background: #00a67e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.aicost-tool-info {
  flex: 1;
  min-width: 0;
}
.aicost-tool-name {
  font-size: .95rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}
.aicost-tool-category {
  font-size: .72rem;
  color: #888;
  margin-top: 2px;
}
.aicost-tool-price {
  font-size: .78rem;
  font-weight: 700;
  color: #00a67e;
  white-space: nowrap;
}
.aicost-tool-tagline {
  font-size: .8rem;
  color: #555;
  line-height: 1.4;
  margin: 4px 0 8px;
}
.aicost-tool-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: auto;
}
.aicost-tool-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
}
.aicost-tool-badge-ai { background: #e6f5f0; color: #006b52; }
.aicost-tool-badge-free { background: #fff4e1; color: #a06400; }
.aicost-tool-rating {
  font-size: .7rem;
  color: #f39c12;
  font-weight: 700;
}

/* ═ Actions ══════════════════════════════════════════════ */
.aicost-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e8dcc4;
}

/* End-of-reply CTA row — always shown after each assistant response.
   Nudges the user toward next action (follow-up OR schedule a call). */
/* "More ↓" floating overlay button — appears at bottom of thread when there's
   unseen content below the visible scroll area. Follows AvatarVA UX pattern:
   user lands at the start of each reply, button nudges them to scroll down.

   Positioned absolutely within the widget so it stays at the bottom of the
   thread area regardless of scroll. Hidden by default; shown via JS when
   content overflows. */
.aicost-more-overlay {
  position: absolute;
  bottom: 90px;                          /* above composer height */
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 8px 18px;
  background: #1a1a1a;
  color: #fff;
  border: 0;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aicost-more-overlay-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.aicost-more-overlay:hover {
  background: #00a67e;
}
.aicost-more-arrow {
  display: inline-block;
  animation: aicost-more-bounce 1.4s ease-in-out infinite;
}
@keyframes aicost-more-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

.aicost-end-cta {
  margin-top: 14px;
  padding: 14px 16px;
  background: #f7f8f9;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  text-align: center;
}
.aicost-end-cta-prompt {
  font-size: .88rem;
  color: #555;
  line-height: 1.6;
}
.aicost-end-cta-sep {
  display: inline-block;
  margin: 0 8px;
  color: #bbb;
}
.aicost-end-cta-link {
  color: #00a67e;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.aicost-end-cta-link:hover {
  color: #008060;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .aicost-end-cta-prompt {
    font-size: .85rem;
  }
  .aicost-end-cta-sep {
    display: block;
    margin: 6px 0;
    font-size: 0;                        /* hide dot on mobile — break to new line */
  }
}
.aicost-action {
  padding: 9px 16px;
  border: 0;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all .15s;
}
.aicost-action-primary {
  background: #00a67e;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 166, 126, .2);
}
.aicost-action-primary:hover {
  background: #008060;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 166, 126, .3);
}
.aicost-action-secondary {
  background: #1a1a1a;
  color: #fff;
}
.aicost-action-secondary:hover {
  background: #00a67e;
}
.aicost-action-ghost {
  background: transparent;
  color: #00a67e;
  border: 1px solid #00a67e;
}
.aicost-action-ghost:hover {
  background: #00a67e;
  color: #fff;
}

/* ═ System note (inline confirmations) ═══════════════════ */
.aicost-system-note {
  padding: 10px 16px;
  background: #e6f5f0;
  border: 1px solid #00a67e;
  color: #006b52;
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 600;
}

/* ═ Email Modal ══════════════════════════════════════════ */
.aicost-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: aicost-fade-in .2s;
}
@keyframes aicost-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.aicost-modal {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
  animation: aicost-slide-up .25s;
}
@keyframes aicost-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.aicost-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  cursor: pointer;
  color: #999;
  width: 32px;
  height: 32px;
  line-height: 1;
}
.aicost-modal-close:hover { color: #1a1a1a; }
.aicost-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.aicost-modal-desc {
  font-size: .9rem;
  color: #666;
  line-height: 1.45;
  margin-bottom: 18px;
}
.aicost-modal-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  font-size: .95rem;
  outline: none;
  margin-bottom: 10px;
  box-sizing: border-box;
  transition: border-color .15s;
}
.aicost-modal-input:focus {
  border-color: #00a67e;
}
.aicost-modal-submit {
  width: 100%;
  padding: 13px;
  background: #00a67e;
  color: #fff;
  border: 0;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 6px;
  transition: all .15s;
}
.aicost-modal-submit:hover:not(:disabled) {
  background: #008060;
}
.aicost-modal-submit:disabled {
  opacity: .7;
  cursor: not-allowed;
}
.aicost-modal-footer {
  text-align: center;
  font-size: .72rem;
  color: #888;
  margin-top: 14px;
}

/* ═ Continuation Composer ════════════════════════════════ */
/* Persistent input below the chat thread for follow-up messages */
.aicost-chat-composer {
  padding: 14px 24px 20px;
  background: #fffaf3;
  border-top: 2px solid #b4d0e3;           /* stronger visual separator */
  flex-shrink: 0;                          /* never collapse this */
  position: relative;
  z-index: 2;                              /* sit above any extras shadow */
}
.aicost-chat-composer-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.aicost-chat-composer-input {
  flex: 1;
  padding: 12px 16px;
  font-size: .95rem;
  font-family: inherit;
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #b4d0e3;
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;                            /* allow flex shrink on narrow screens */
}
.aicost-chat-composer-input:focus {
  border-color: #00a67e;
  box-shadow: 0 0 0 3px rgba(0, 166, 126, .15);
}
.aicost-chat-composer-input::placeholder {
  color: #94a3b8;
  font-style: italic;
}
.aicost-chat-composer-input:disabled {
  background: #f3efe7;
  color: #888;
  cursor: not-allowed;
}
.aicost-chat-composer-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  background: linear-gradient(135deg, #00a67e 0%, #008060 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 3px 10px rgba(0, 166, 126, .22);
  white-space: nowrap;
  flex-shrink: 0;                          /* never let the button collapse */
}
.aicost-chat-composer-send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 166, 126, .3);
}
.aicost-chat-composer-send:active:not(:disabled) {
  transform: translateY(0);
}
.aicost-chat-composer-send:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.aicost-chat-composer-send-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.aicost-chat-composer-hint {
  font-size: .72rem;
  color: #8a6a4a;
  margin-top: 8px;
  font-style: italic;
  letter-spacing: .01em;
}

/* ═ Mobile tweaks ════════════════════════════════════════ */
@media (max-width: 640px) {
  .aicost-chat-thread { padding: 16px 14px 8px; min-height: 200px; }
  .aicost-bubble { max-width: 95%; font-size: .9rem; padding: 10px 14px; }
  .aicost-bubble-assistant { width: 95%; }
  .aicost-cards-grid { grid-template-columns: 1fr; }
  .aicost-modal { padding: 22px; border-radius: 14px; }
  .aicost-modal-title { font-size: 1.1rem; }
  .aicost-action { font-size: .78rem; padding: 8px 14px; }
  .aicost-cards-header { font-size: 1rem; }

  /* Composer on mobile — inline (sits inside fullscreen widget via flex) */
  .aicost-chat-composer {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 2px solid #b4d0e3;
    background: #fffaf3;
    box-shadow: 0 -3px 8px rgba(30, 60, 100, .05);
  }
  .aicost-chat-composer-row {
    gap: 6px;
  }
  .aicost-chat-composer-input {
    font-size: 16px;                 /* prevents iOS auto-zoom */
    padding: 12px 14px;
  }
  .aicost-chat-composer-send {
    padding: 0 16px;
    font-size: .88rem;
    min-width: 58px;
    justify-content: center;
  }
  .aicost-chat-composer-send-label {
    display: none;                   /* icon-only on mobile */
  }
  .aicost-chat-composer-send-icon {
    font-size: 1.2rem;
  }
  .aicost-chat-composer-hint {
    display: none;                   /* save vertical space */
  }
}