/* ======================================================================
   AI ASSISTANT WIDGET
   Al Modeer for Construction & Building — on-site visitor assistant.
   Mounted by public/js/assistant.bundle.js into #assistantRoot.
   RTL-first (Arabic), matches the site's amber/blueprint palette instead
   of the assistant component's original blue/cyan branding.
====================================================================== */

.em-assistant-root {
  position: fixed;
  /* Physical right/left on purpose: this element is direction:rtl, so the
     logical inset-inline-end would put the widget on the LEFT edge. */
  right: 20px;
  left: auto;
  bottom: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  /* In an rtl column flex container, flex-start is the RIGHT edge, so the
     launcher lines up with the panel's right side. */
  align-items: flex-start;
  gap: 12px;
  font-family: var(--body, 'Inter', sans-serif);
  direction: rtl;
}

@media (min-width:640px) {
  .em-assistant-root {
    right: 28px;
    left: auto;
    bottom: 28px;
  }
}

/* ---------- launcher button (Vibrant Gold) ---------- */
.em-assistant-launcher {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  background: linear-gradient(135deg, #e5a93c 0%, #c98b25 100%);
  color: #ffffff;
  box-shadow: 
    0 12px 28px rgba(229, 169, 60, 0.4),
    0 4px 10px rgba(15, 29, 51, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.em-assistant-launcher:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 18px 36px rgba(229, 169, 60, 0.55),
    0 6px 16px rgba(15, 29, 51, 0.25);
}

.em-assistant-launcher:active {
  transform: translateY(-1px) scale(0.97);
}

.em-assistant-launcher:focus-visible {
  outline: 3px solid #0f1d33;
  outline-offset: 3px;
}

.em-assistant-launcher svg {
  width: 26px;
  height: 26px;
  transition: transform 0.25s ease;
}

.em-assistant-launcher:hover svg {
  transform: rotate(10deg) scale(1.1);
}

/* ---------- panel ---------- */
.em-assistant-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: min(25rem, calc(100vw - 32px));
  height: min(36rem, calc(100dvh - 120px));
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(21, 42, 71, 0.15);
  box-shadow: 0 24px 70px rgba(12, 25, 44, 0.3);
  animation: emAssistantPop .18s ease-out;
}

@keyframes emAssistantPop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .em-assistant-panel {
    animation: none;
  }
}

/* header */
.em-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 16px;
  color: #fff;
  background: linear-gradient(110deg, #101D31 0%, #1A3154 72%, #294A77 100%);
  flex-shrink: 0;
}

.em-assistant-header-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.em-assistant-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0BD5B, #C9821A);
  color: #172A47;
  box-shadow: 0 0 0 3px rgba(255,255,255,.1);
  flex-shrink: 0;
}

.em-assistant-avatar svg {
  width: 22px;
  height: 22px;
}

.em-assistant-header-text {
  min-width: 0;
}

.em-assistant-header-text h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.em-assistant-header-text p {
  margin: 1px 0 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.em-assistant-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.em-assistant-icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}

.em-assistant-icon-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.em-assistant-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.em-assistant-icon-btn:disabled:hover {
  background: transparent;
}

.em-assistant-icon-btn svg {
  width: 17px;
  height: 17px;
}

/* clear-chat confirm bar */
.em-assistant-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12px;
  color: #8A5A12;
  background: #FBF1E0;
  border-bottom: 1px solid #F0DCB0;
  flex-shrink: 0;
}

.em-assistant-confirm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.em-assistant-confirm-actions button {
  border: none;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.em-assistant-confirm-cancel {
  background: transparent;
  color: #8A5A12;
}

.em-assistant-confirm-cancel:hover {
  background: rgba(138, 90, 18, 0.1);
}

.em-assistant-confirm-clear {
  background: #C9821A;
  color: #fff;
}

.em-assistant-confirm-clear:hover {
  background: #a86a15;
}

/* message list */
.em-assistant-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FAFBFC;
}

.em-assistant-msg-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.em-assistant-bubble {
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 88%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.em-assistant-bubble p {
  margin: 0 0 6px;
}

.em-assistant-bubble p:last-child {
  margin-bottom: 0;
}

.em-assistant-bubble ul,
.em-assistant-bubble ol {
  margin: 4px 0;
  padding-inline-start: 20px;
}

.em-assistant-bubble a {
  color: inherit;
  text-decoration: underline;
}

.em-assistant-bubble strong {
  font-weight: 700;
}

.em-assistant-bubble-intro,
.em-assistant-bubble-assistant {
  /* rtl container: flex-end = LEFT edge (assistant side). */
  align-self: flex-end;
  background: #fff;
  color: var(--ink, #14171F);
  border: 1px solid var(--line, #E2E5EA);
  /* Physical, not logical: each bubble has its own dir="rtl|ltr" from its
     text, which would otherwise flip the tail from message to message. */
  border-top-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(20, 23, 31, 0.05);
}

.em-assistant-bubble-user {
  /* rtl container: flex-start = RIGHT edge (user side). */
  align-self: flex-start;
  background: linear-gradient(120deg, var(--halo-amber-deep, #C9821A), var(--halo-blueprint-deep, #1B5FA8));
  color: #fff;
  border-top-right-radius: 5px;
}

/* per-message actions (copy / speak / feedback) */
.em-assistant-msg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 4px;
  align-self: flex-end;
}

.em-assistant-action-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #B7BFC9;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
  position: relative;
}

.em-assistant-action-btn:hover {
  color: var(--ink-soft, #5B6472);
  background: rgba(20, 23, 31, 0.05);
}

.em-assistant-action-btn[data-active="true"] {
  color: var(--halo-blueprint-deep, #1B5FA8);
}

.em-assistant-action-btn[data-active="up"] {
  color: #138066;
  opacity: 1;
}

.em-assistant-action-btn[data-active="down"] {
  color: #C23B3B;
  opacity: 1;
}

.em-assistant-action-btn[data-dim="true"] {
  opacity: .4;
}

.em-assistant-action-btn:disabled {
  cursor: default;
}

.em-assistant-action-btn svg {
  width: 13px;
  height: 13px;
}

.em-assistant-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #14171F;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(20, 23, 31, .2);
}

.em-assistant-wa-link {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  color: #138066;
  text-decoration: none;
}

.em-assistant-wa-link:hover {
  text-decoration: underline;
}

/* typing indicator */
.em-assistant-typing {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
  border-radius: 16px;
  border-top-left-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 23, 31, 0.05);
}

.em-assistant-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint, #9099A6);
  animation: emAssistantTypingDot 1s infinite ease-in-out;
}

.em-assistant-typing span:nth-child(2) {
  animation-delay: .15s;
}

.em-assistant-typing span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes emAssistantTypingDot {

  0%,
  60%,
  100% {
    opacity: .35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .em-assistant-typing span {
    animation: none;
    opacity: .7;
  }
}

/* quick replies */
.em-assistant-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-inline-start: 4px;
}

.em-assistant-quick-reply {
  border: 1px solid rgba(37, 65, 178, 0.25);
  background: var(--accent-soft, #EBEFFC);
  color: var(--accent-ink, #1B3189);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}

.em-assistant-quick-reply:hover {
  background: #dce3f9;
}

.em-assistant-quick-reply:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* error bar */
.em-assistant-error {
  padding: 8px 14px;
  font-size: 12px;
  color: #8A2E2E;
  background: #FBEAEA;
  border-top: 1px solid #F3CFCF;
  flex-shrink: 0;
}

/* composer */
.em-assistant-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line, #E2E5EA);
  background: #fff;
  flex-shrink: 0;
}

.em-assistant-composer-box {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border: 1px solid var(--line, #E2E5EA);
  border-radius: 14px;
  padding: 6px 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.em-assistant-composer-box:focus-within {
  border-color: var(--halo-blueprint, #2541B2);
  box-shadow: 0 0 0 3px var(--accent-soft, #EBEFFC);
}

.em-assistant-composer textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 5px 4px;
  max-height: 120px;
  color: var(--ink, #14171F);
}

.em-assistant-composer textarea::placeholder {
  color: var(--ink-faint, #9099A6);
}

.em-assistant-composer-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

/* send button sits nested inside .em-assistant-composer-box (same pill as
   the textarea) so it reads as one seamless input, Gemini-style, rather
   than a separate control floating outside the field's border. Fully round
   it so it doesn't compete with the pill's own 14px corner radius. */
.em-assistant-composer-send {
  border-radius: 50%;
}

.em-assistant-composer-mic {
  background: transparent;
  color: var(--ink-faint, #9099A6);
}

.em-assistant-composer-mic:hover {
  background: #F4F5F7;
  color: var(--ink-soft, #5B6472);
}

.em-assistant-composer-mic[data-listening="true"] {
  background: #FBEAEA;
  color: #C23B3B;
}

.em-assistant-composer-send {
  background: var(--halo-blueprint, #2541B2);
  color: #fff;
}

.em-assistant-composer-send:hover {
  background: var(--halo-blueprint-deep, #1B5FA8);
}

.em-assistant-composer-send:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.em-assistant-composer textarea:disabled {
  opacity: .7;
}

/* mobile: the site already has a full-width floating contact bar
   (.em-mobile-floating-cta) pinned to the bottom of the screen at the same
   z-index tier; without this the assistant launcher would sit directly on
   top of it. Lift the launcher above that bar's footprint instead. */
@media (max-width:768px) {
  .em-assistant-root {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    left: auto;
  }
}

/* Refined visitor-chat palette: deep blueprint for confidence, amber for
   action, and quiet off-white surfaces for long Arabic conversations. */
.em-assistant-online-dot { display: inline-block; width: 7px; height: 7px; margin-inline-end: 5px; border-radius: 50%; background: #51D19A; box-shadow: 0 0 0 3px rgba(81,209,154,.16); }
.em-assistant-header-text p { color: rgba(255,255,255,.76); }
.em-assistant-messages { background: radial-gradient(circle at 94% 4%, rgba(229,169,60,.1), transparent 28%), linear-gradient(180deg, #F7F9FC 0%, #FBFCFE 100%); }
.em-assistant-bubble-intro, .em-assistant-bubble-assistant { border-color: rgba(21,42,71,.12); }
.em-assistant-bubble-user { background: linear-gradient(135deg, #19345A, #294F80); }
.em-assistant-quick-reply { border-color: rgba(201,130,26,.34); background: #FFF9EE; color: #765018; }
.em-assistant-quick-reply:hover { background: #FCECCB; }
.em-assistant-composer-box:focus-within { border-color: #C9821A; box-shadow: 0 0 0 3px rgba(229,169,60,.18); }
.em-assistant-composer-send { background: #19345A; }
.em-assistant-composer-send:hover { background: #10294B; }

/* ======================================================================
   EXPANDED CHAT: layout, history drawer, rich blocks
   ====================================================================== */

/* ---------- viewport-safe panel ----------
   The root is position:fixed with right/bottom offsets, so the panel may never
   be wider/taller than the space that is actually left. Every width/height is
   clamped to the visual viewport minus those offsets (the root's own margins
   are 14px on phones / 20px small / 28px large). */
/* Vertical budget: the panel sits ABOVE the launcher, so its max height is the
   viewport minus (root bottom offset + launcher 62px + gap 12px + a top margin).
   --em-a-bottom mirrors the root's `bottom` at each breakpoint; keep in sync. */
.em-assistant-root {
  max-width: 100vw;
  --em-a-bottom: 20px;
  --em-a-top-gap: 12px;
  --em-a-avail: calc(100dvh - var(--em-a-bottom) - 62px - 12px - var(--em-a-top-gap));
}

@media (min-width: 640px) {
  .em-assistant-root { --em-a-bottom: 28px; }
}

@media (max-width: 768px) {
  .em-assistant-root { --em-a-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

.em-assistant-panel {
  box-sizing: border-box;
  width: min(26rem, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  height: min(38rem, var(--em-a-avail));
  max-height: var(--em-a-avail);
  min-width: 0;
}

.em-assistant-panel.em-assistant-panel-with-history {
  width: min(46rem, calc(100vw - 28px));
  height: min(40rem, var(--em-a-avail));
}

/* Expanded mode: a roomy chat window, still clamped to the viewport. */
.em-assistant-panel.em-assistant-panel-expanded {
  width: min(58rem, calc(100vw - 28px));
  height: min(52rem, var(--em-a-avail));
}

.em-assistant-body {
  position: relative;      /* anchor for the history drawer on narrow screens */
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;        /* nothing inside may extend past the panel */
}

.em-assistant-conversation {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;            /* lets long content shrink instead of forcing overflow */
  min-height: 0;
}

.em-assistant-messages {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.em-assistant-msg-row,
.em-assistant-bubble {
  min-width: 0;
}

.em-assistant-bubble {
  overflow-wrap: anywhere; /* long words / URLs / titles wrap, never stretch the row */
}

.em-assistant-history-toggle {
  margin-inline-end: 2px;
}

.em-assistant-header-id {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- history sidebar ---------- */
.em-assistant-history {
  display: flex;
  flex-direction: column;
  flex: 0 0 12.5rem;
  width: 12.5rem;
  min-width: 0;
  min-height: 0;
  border-inline-end: 1px solid var(--line, #E2E5EA);
  background: #fff;
}

.em-assistant-history-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  flex-shrink: 0;
}

.em-assistant-history-new {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #19345A;
  background: #FFF9EE;
  white-space: nowrap;
  transition: background .15s ease;
}

.em-assistant-history-new:hover { background: #FCECCB; }
.em-assistant-history-new:disabled { opacity: .45; cursor: not-allowed; }
.em-assistant-history-new:disabled:hover { background: #FFF9EE; }

/* close button only matters when the history is a drawer (narrow screens) */
.em-assistant-history-close {
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: #F4F5F7;
  color: var(--ink-soft, #5B6472);
  cursor: pointer;
}

.em-assistant-history-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 8px;
}

.em-assistant-history-empty {
  margin: 0;
  padding: 20px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint, #9099A6);
}

.em-assistant-history-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin-bottom: 4px;
  border-radius: 10px;
  padding: 2px;
}

.em-assistant-history-item:hover { background: #F6F7F9; }
.em-assistant-history-item.is-active { background: #EBEFFC; }

.em-assistant-history-item-main {
  flex: 1 1 0;
  min-width: 0;            /* the title gets ALL remaining width and ellipsizes */
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: start;
  padding: 6px 8px;
  font: inherit;
}

.em-assistant-history-item-title {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #14171F);
}

.em-assistant-history-item-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Permanent pinned indicator: no hover/active dependency at all. */
.em-assistant-history-pin {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #B96F13;
  background: #FCECCB;
  transform: rotate(35deg);
}

.em-assistant-history-item.is-pinned {
  box-shadow: inset 3px 0 0 #E5A93C;
}

.em-assistant-history-item-time {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-faint, #9099A6);
}

/* single "⋯" trigger; the two actions live in the menu */
.em-assistant-history-item-actions {
  position: relative;
  flex: 0 0 auto;
}

.em-assistant-history-more {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft, #5B6472);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.em-assistant-history-more:hover,
.em-assistant-history-more[aria-expanded="true"] {
  background: rgba(20, 23, 31, .08);
  color: var(--ink, #14171F);
}

.em-assistant-history-more:focus-visible {
  outline: 2px solid rgba(201, 130, 26, .6);
  outline-offset: 1px;
}

.em-assistant-history-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 2px);
  /* Physical, not logical: the "⋯" trigger sits at the LEFT end of each row in
     this RTL layout, so anchoring the menu's left edge to it makes it open
     rightward into the list instead of off the left side of the screen. */
  left: 0;
  right: auto;
  min-width: 9.5rem;
  max-width: min(14rem, calc(100vw - 32px));
  padding: 4px;
  border: 1px solid rgba(21, 42, 71, .14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(12, 25, 44, .2);
}

.em-assistant-history-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #14171F);
  text-align: start;
  cursor: pointer;
}

.em-assistant-history-menu button:hover { background: #F4F5F7; }
.em-assistant-history-menu button.is-danger { color: #C23B3B; }
.em-assistant-history-menu button.is-danger:hover { background: #FBEAEA; }

.em-assistant-history-confirm {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding-inline-end: 4px;
}

.em-assistant-history-confirm-yes,
.em-assistant-history-confirm-no {
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.em-assistant-history-confirm-yes { background: #C23B3B; color: #fff; }
.em-assistant-history-confirm-no { background: transparent; color: var(--ink-soft, #5B6472); }

/* ---------- rich reply blocks ---------- */
.em-assistant-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}

.em-assistant-blocks > * { min-width: 0; max-width: 100%; }

/* team */
.em-assistant-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: 8px;
  width: 100%;
}

.em-assistant-member-card {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(21, 42, 71, .12);
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 23, 31, .06);
  max-width: 14rem;
}

.em-assistant-member-card.is-compact { max-width: none; }

.em-assistant-member-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  background: #EEF1F5;
}

.em-assistant-member-card figcaption { padding: 8px 10px; font-size: 12px; line-height: 1.4; }
.em-assistant-member-card figcaption strong { display: block; font-weight: 700; color: var(--ink, #14171F); overflow-wrap: anywhere; }
.em-assistant-member-card figcaption span { display: block; margin-top: 2px; color: var(--ink-soft, #5B6472); font-size: 11px; overflow-wrap: anywhere; }

.em-assistant-member-card-noimg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }

.em-assistant-member-avatar-fallback {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #19345A; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0;
}

.em-assistant-member-card-text strong { display: block; font-size: 12px; }
.em-assistant-member-card-text span { display: block; font-size: 11px; color: var(--ink-soft, #5B6472); }

/* map + address */
.em-assistant-map-card {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(21, 42, 71, .12);
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 23, 31, .06);
  width: 100%;
  max-width: 100%;
}

.em-assistant-map-card-label {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  font-size: 12px; font-weight: 600; color: var(--ink, #14171F);
  border-bottom: 1px solid var(--line, #E2E5EA);
}

.em-assistant-address-card .em-assistant-map-card-label { border-bottom: none; padding-bottom: 2px; }
.em-assistant-map-card iframe { display: block; width: 100%; height: 200px; border: 0; }
.em-assistant-map-card-address { margin: 0; padding: 8px 10px; font-size: 11.5px; color: var(--ink-soft, #5B6472); line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- contact buttons (WhatsApp / phone) ---------- */
.em-assistant-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.em-assistant-contact-btn {
  flex: 1 1 11rem;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;                 /* comfortable touch target */
  padding: 8px 12px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(20, 23, 31, .14);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.em-assistant-contact-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20, 23, 31, .2); filter: brightness(1.05); }
.em-assistant-contact-btn:active { transform: scale(.98); }
.em-assistant-contact-btn:focus-visible { outline: 3px solid rgba(229, 169, 60, .6); outline-offset: 2px; }

.em-assistant-contact-btn.is-whatsapp { background: linear-gradient(135deg, #25D366, #128C4A); }
.em-assistant-contact-btn.is-phone { background: linear-gradient(135deg, #1F4173, #19345A); }

.em-assistant-contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}

.em-assistant-contact-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.em-assistant-contact-text strong { font-size: 13px; font-weight: 700; }
.em-assistant-contact-text span { font-size: 12px; opacity: .92; letter-spacing: .02em; text-align: start; unicode-bidi: plaintext; }

@media (prefers-reduced-motion: reduce) {
  .em-assistant-contact-btn { transition: none; }
}

/* ---------- media gallery ---------- */
.em-assistant-gallery {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(21, 42, 71, .14);
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 23, 31, .08);
  outline: none;
}

.em-assistant-gallery:focus-visible { box-shadow: 0 0 0 3px rgba(229, 169, 60, .45); }

.em-assistant-gallery-title {
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #19345A;
  background: linear-gradient(180deg, #FFF9EE, #fff);
  border-bottom: 1px solid var(--line, #E2E5EA);
  overflow-wrap: anywhere;
}

.em-assistant-gallery-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: min(22rem, 52dvh);
  background: #0E1727;
  touch-action: pan-y;      /* vertical scroll still works; horizontal swipe is ours */
  user-select: none;
  -webkit-user-select: none;
}

.em-assistant-gallery-stage img,
.em-assistant-gallery-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0E1727;
}

.em-assistant-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(14, 23, 39, .62);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease, transform .15s ease;
}

.em-assistant-gallery-arrow:hover { background: rgba(201, 130, 26, .92); }
.em-assistant-gallery-arrow:active { transform: translateY(-50%) scale(.93); }
.em-assistant-gallery-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* physical sides: prev on the right, next on the left (RTL reading order) */
.em-assistant-gallery-arrow.is-prev { right: 8px; }
.em-assistant-gallery-arrow.is-next { left: 8px; }

/* keep native video controls reachable: arrows sit above the control bar */
.em-assistant-gallery-stage video ~ .em-assistant-gallery-arrow { top: 42%; }

.em-assistant-gallery-counter {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(14, 23, 39, .66);
  pointer-events: none;
}

.em-assistant-gallery-stage video ~ .em-assistant-gallery-counter { bottom: auto; top: 8px; }

.em-assistant-gallery-caption {
  margin: 0;
  padding: 8px 12px 0;
  font-size: 11.5px;
  color: var(--ink-soft, #5B6472);
  overflow-wrap: anywhere;
}

.em-assistant-gallery-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.em-assistant-gallery-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #EEF1F5;
  cursor: pointer;
  opacity: .72;
  transition: opacity .15s ease, border-color .15s ease;
}

.em-assistant-gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.em-assistant-gallery-thumb:hover { opacity: 1; }
.em-assistant-gallery-thumb.is-active { opacity: 1; border-color: #C9821A; }

.em-assistant-gallery-thumb-video {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: #fff; background: #19345A;
}

@media (prefers-reduced-motion: reduce) {
  .em-assistant-gallery-arrow,
  .em-assistant-gallery-thumb { transition: none; }
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */

/* Tablet / small laptop: sidebar + chat would leave the chat too narrow, so
   the history becomes an overlay drawer INSIDE the panel (never wider than the
   panel, so it cannot overflow the viewport). */
@media (max-width: 720px) {
  .em-assistant-panel.em-assistant-panel-with-history,
  .em-assistant-panel.em-assistant-panel-expanded {
    width: calc(100vw - 28px);
  }

  .em-assistant-history {
    position: absolute;
    z-index: 4;
    inset-block: 0;
    inset-inline-start: 0;
    flex: none;
    width: min(18rem, 86%);
    border-inline-end: 1px solid var(--line, #E2E5EA);
    box-shadow: 8px 0 30px rgba(12, 25, 44, .28);
    animation: emAssistantDrawerIn .18s ease-out;
  }

  .em-assistant-history-close { display: grid; }

  /* the conversation keeps the FULL panel width underneath the drawer */
  .em-assistant-panel-with-history .em-assistant-conversation { flex: 1 1 100%; }
}

@keyframes emAssistantDrawerIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .em-assistant-history { animation: none; }
}

/* Phones: bottom sheet that uses the whole width and the dynamic viewport
   height (dvh follows the mobile browser toolbars and on-screen keyboard). */
@media (max-width: 480px) {
  .em-assistant-root {
    left: 8px;
    right: 8px;
    align-items: flex-start;
  }

  .em-assistant-panel,
  .em-assistant-panel.em-assistant-panel-with-history,
  .em-assistant-panel.em-assistant-panel-expanded {
    width: 100%;
    max-width: 100%;
    height: min(40rem, var(--em-a-avail));
    max-height: var(--em-a-avail);
    border-radius: 18px;
  }

  .em-assistant-expand-btn { display: none; }   /* phones are already full-width */

  .em-assistant-header { padding: 12px; }
  .em-assistant-header-text h2 { font-size: 12.5px; }
  .em-assistant-messages { padding: 12px 10px; }
  .em-assistant-bubble { max-width: 94%; }
  .em-assistant-map-card iframe { height: 170px; }
  .em-assistant-gallery-stage { aspect-ratio: 1 / 1; max-height: 46dvh; }
  .em-assistant-gallery-arrow { width: 34px; height: 34px; }
  .em-assistant-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .em-assistant-contact-btn { flex-basis: 100%; }
}

/* Very short viewports (landscape phones): the launcher can't stack under the
   panel, so the panel takes the whole height and the composer stays reachable. */
@media (max-height: 520px) {
  .em-assistant-root { --em-a-avail: calc(100dvh - var(--em-a-bottom) - 12px); }
  .em-assistant-gallery-stage { max-height: 60dvh; }
}