/* assist.css — AI support assistant. Logical props (inset-inline-end) so RTL flips it
   automatically. Layer 1900: above content/maps, below the deal-detail overlay (2000)
   and modals (2100) so it can never block a checkout-critical flow. */
.as-fab {
  position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 1900;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ink); color: #fff; font-size: 24px; line-height: 1;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .35);
  transition: transform .15s ease;
}
.as-fab:hover { transform: scale(1.06); }
.as-panel {
  position: fixed; inset-inline-end: 18px; bottom: 84px; z-index: 1900;
  width: min(360px, calc(100vw - 28px)); max-height: min(560px, calc(100vh - 110px));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .25); overflow: hidden;
}
.as-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--ink); color: #fff; }
.as-dot { width: 9px; height: 9px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; }
.as-title { font-weight: 700; font-size: 14px; flex: 1; }
.as-x { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
.as-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.as-m { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.as-m.bot { background: var(--bg); border: 1px solid var(--border); color: var(--ink); align-self: flex-start; border-start-start-radius: 4px; }
.as-m.me { background: var(--ink); color: #fff; align-self: flex-end; border-start-end-radius: 4px; }
.as-m.thinking { color: var(--muted); font-style: italic; animation: as-pulse 1.2s ease infinite; }
@keyframes as-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .as-m.thinking { animation: none; } .as-fab { transition: none; } }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.as-chip { border: 1px solid var(--border); background: var(--surface); color: var(--body); border-radius: 999px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; }
.as-chip:hover { border-color: var(--ink); color: var(--ink); }
.as-form { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); }
.as-in { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; min-width: 0; }
.as-send { white-space: nowrap; }
.as-disc { padding: 0 12px 10px; font-size: 11px; color: var(--muted); }
.as-m .as-link { color: #059669; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) {
  .as-fab {
    inset-inline-end: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
    font-size: 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .28);
  }
  .as-panel {
    inset-inline-end: 10px;
    bottom: calc(62px + env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 84px - env(safe-area-inset-bottom));
  }
}