/* Ehna Assistant (__ehna_assistant.tpl, assistant.js) and the Support Center live chat (__support_live.tpl) */
.eha { --eha-p: var(--color-accent, #f97316); --eha-pc: var(--color-on-accent, #fff); --eha-b1: var(--ehna-card, #fff); --eha-b2: var(--ehna-raised, #f4f4f5); --eha-b3: var(--ehna-line, #e4e4e7); --eha-fg: var(--ehna-ink, #18181b); --eha-mute: var(--ehna-muted, #71717a); }
.eha[hidden] { display: none !important; }
.eha [hidden] { display: none !important; }
.eha { font-family: var(--font-sans, system-ui, sans-serif); font-size: 14px; line-height: 1.45; text-align: start; }
.eha :where(button, input, textarea, select) { font-family: inherit; }
.eha.is-create-menu-open .eha-launcher, .eha.is-publisher-open .eha-launcher { visibility: hidden; pointer-events: none; }

/* launcher */
.eha-launcher { position: fixed; z-index: 1035; inset-inline-end: 1.25rem; bottom: 1.25rem; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; border: 0; cursor: pointer; color: var(--eha-pc); background: linear-gradient(135deg, var(--eha-p), color-mix(in oklab, var(--eha-p) 78%, #be123c)); box-shadow: 0 10px 28px -6px color-mix(in oklab, var(--eha-p) 60%, transparent), 0 2px 6px rgb(0 0 0 / .15); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.eha-launcher:hover { transform: translateY(-2px) scale(1.04); }
.eha-launcher:active { transform: scale(.95); }
.eha-launcher svg { position: absolute; transition: opacity .2s, transform .3s; }
.eha-l-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.eha.is-open .eha-l-open { opacity: 0; transform: rotate(90deg) scale(.6); }
.eha.is-open .eha-l-close { opacity: 1; transform: none; }
.eha-badge { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center; box-shadow: 0 0 0 2px var(--eha-b1); }
@media (max-width: 767.98px) {
  .eha-launcher { width: 3.25rem; height: 3.25rem; bottom: calc(5rem + env(safe-area-inset-bottom)); inset-inline-end: .9rem; }
  html.eh-apps-on .eha-launcher, html.eh-adsticky-on .eha-launcher, html.eh-pwa-on .eha-launcher { bottom: calc(10.2rem + env(safe-area-inset-bottom)); }
  html.eha-open .eha-launcher { display: none; }
}
html.ehna-app-messenger .eha, body:has(.ehna-vr-page) .eha { display: none !important; }

/* panel */
.eha-panel { position: fixed; z-index: 1036; inset-inline-end: 1.25rem; bottom: 5.75rem; width: 25rem; height: min(42rem, calc(100vh - 7.5rem)); display: flex; flex-direction: column; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--eha-b3); background: var(--eha-b1); color: var(--eha-fg); box-shadow: 0 30px 70px -20px rgb(0 0 0 / .35), 0 8px 24px -8px rgb(0 0 0 / .15); opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right; pointer-events: none; visibility: hidden; transition: opacity .22s, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s .28s; }
[dir="rtl"] .eha-panel { transform-origin: bottom left; }
.eha.is-open .eha-panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .22s, transform .28s cubic-bezier(.22, 1, .36, 1); }
@media (max-width: 767.98px) {
  .eha-panel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

.eha-head { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; color: var(--eha-pc); background: linear-gradient(135deg, var(--eha-p), color-mix(in oklab, var(--eha-p) 78%, #be123c)); }
.eha-avatar { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.eha-avatar img { width: 100%; height: 100%; object-fit: cover; }
.eha-title { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.25; }
.eha-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 700; }
.eha-title small { display: flex; align-items: center; gap: .35rem; font-size: .75rem; opacity: .9; }
.eha-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #4ade80; box-shadow: 0 0 0 2px rgb(255 255 255 / .35); }
.eha-icon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; transition: background-color .2s; }
.eha-icon:hover { background: rgb(255 255 255 / .18); }
.eha-menu { position: relative; }
.eha-menu-list { position: absolute; z-index: 2; top: calc(100% + .35rem); inset-inline-end: 0; min-width: 14rem; padding: .35rem; border-radius: 1rem; border: 1px solid var(--eha-b3); background: var(--eha-b1); color: var(--eha-fg); box-shadow: 0 16px 40px -12px rgb(0 0 0 / .3); }
.eha-menu-list[hidden] { display: none; }
.eha-menu-list > * { display: block; width: 100%; padding: .6rem .75rem; border: 0; border-radius: .7rem; background: none; color: inherit; font-size: .875rem; text-align: start; text-decoration: none; cursor: pointer; }
.eha-menu-list > *:hover { background: var(--eha-b2); }

.eha-live { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-bottom: 1px solid var(--eha-b3); background: color-mix(in oklab, #22c55e 10%, var(--eha-b1)); font-size: .8rem; font-weight: 600; }
.eha-live[hidden] { display: none; }
.eha-live span:nth-child(2) { flex: 1; }
.eha-live button { padding: .25rem .7rem; border: 1px solid var(--eha-b3); border-radius: 999px; background: var(--eha-b1); color: var(--eha-fg); font-size: .75rem; font-weight: 600; cursor: pointer; }
.eha-live-dot { width: .55rem; height: .55rem; border-radius: 999px; background: #22c55e; animation: eha-pulse 1.6s infinite; }
@keyframes eha-pulse { 0% { box-shadow: 0 0 0 0 rgb(34 197 94 / .55); } 70% { box-shadow: 0 0 0 7px rgb(34 197 94 / 0); } 100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); } }

/* messages */
.eha-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .65rem; padding: 1rem .9rem; background: radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--eha-p) 6%, var(--eha-b1)) 0%, var(--eha-b1) 70%); }
.eha-row { display: flex; align-items: flex-end; gap: .45rem; max-width: 100%; animation: eha-in .25s cubic-bezier(.22, 1, .36, 1); }
@keyframes eha-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.eha-user { justify-content: flex-end; }
.eha-col { display: flex; min-width: 0; max-width: 86%; flex-direction: column; gap: .35rem; }
.eha-user .eha-col { align-items: flex-end; }
.eha-row-av { width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 999px; object-fit: cover; }
.eha-name { padding-inline: .5rem; font-size: .7rem; font-weight: 600; color: var(--eha-mute); }
.eha-bubble { padding: .6rem .85rem; border-radius: 1.15rem; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.eha-bubble p { margin: 0; }
.eha-bubble p + p { margin-top: .35rem; }
.eha-bubble ul { margin: .3rem 0; padding-inline-start: 1.1rem; list-style: disc; }
.eha-bubble li { margin: .15rem 0; }
.eha-bubble b { font-weight: 700; }
.eha-assistant .eha-bubble, .eha-agent .eha-bubble { border: 1px solid var(--eha-b3); border-end-start-radius: .35rem; background: var(--eha-b1); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.eha-agent .eha-bubble { border-color: color-mix(in oklab, #22c55e 35%, var(--eha-b3)); background: color-mix(in oklab, #22c55e 6%, var(--eha-b1)); }
.eha-user .eha-bubble { border-end-end-radius: .35rem; background: linear-gradient(135deg, var(--eha-p), color-mix(in oklab, var(--eha-p) 85%, #be123c)); color: var(--eha-pc); }
.eha-temp { opacity: .7; }
.eha-time { padding-inline: .5rem; font-size: .68rem; color: var(--eha-mute); }
.eha-sys { align-self: center; max-width: 92%; padding: .45rem .8rem; border-radius: .8rem; background: var(--eha-b2); color: var(--eha-mute); font-size: .78rem; line-height: 1.45; text-align: center; }
.eha-sys p { margin: 0; }
.eha-err { background: color-mix(in oklab, #ef4444 10%, var(--eha-b1)); color: #dc2626; }

/* typing */
.eha-typing .eha-bubble { display: flex; gap: .3rem; padding: .8rem .95rem; }
.eha-typing .eha-bubble span { width: .45rem; height: .45rem; border-radius: 999px; background: var(--eha-mute); animation: eha-dots 1.2s infinite ease-in-out; }
.eha-typing .eha-bubble span:nth-child(2) { animation-delay: .15s; }
.eha-typing .eha-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes eha-dots { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* link cards */
.eha-card { display: flex; align-items: center; gap: .7rem; width: 100%; min-width: 15rem; padding: .55rem .6rem; border: 1px solid var(--eha-b3); border-radius: 1rem; background: var(--eha-b1); color: var(--eha-fg); text-align: start; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / .05); transition: border-color .2s, box-shadow .2s, transform .2s; }
.eha-card:hover { border-color: color-mix(in oklab, var(--eha-p) 45%, var(--eha-b3)); box-shadow: 0 8px 22px -10px rgb(0 0 0 / .25); transform: translateY(-1px); color: var(--eha-fg); }
.eha-card-img, .eha-card-emoji { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3rem; height: 3rem; overflow: hidden; border-radius: .8rem; background: linear-gradient(135deg, color-mix(in oklab, var(--eha-p) 18%, var(--eha-b1)), color-mix(in oklab, #be123c 10%, var(--eha-b1))); font-size: 1.45rem; }
.eha-card-img img { width: 100%; height: 100%; object-fit: cover; }
.eha-card-txt { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: .1rem; }
.eha-card-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 700; }
.eha-card-txt small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .75rem; line-height: 1.35; color: var(--eha-mute); }
.eha-card-go { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--eha-b2); color: var(--eha-p); }
[dir="rtl"] .eha-card-go svg { transform: scaleX(-1); }
.eha-card-action { border-color: color-mix(in oklab, #22c55e 40%, var(--eha-b3)); background: color-mix(in oklab, #22c55e 7%, var(--eha-b1)); }
.eha-card-action .eha-card-go { color: #16a34a; }

/* quick replies */
.eha-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.eha-chip { padding: .4rem .8rem; border: 1px solid color-mix(in oklab, var(--eha-p) 35%, var(--eha-b3)); border-radius: 999px; background: var(--eha-b1); color: var(--eha-p); font-size: .8rem; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.eha-chip:hover { background: var(--eha-p); color: var(--eha-pc); }

/* composer */
.eha-compose { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid var(--eha-b3); background: var(--eha-b1); }
.eha-compose textarea { flex: 1; min-height: 2.6rem; max-height: 8.75rem; padding: .62rem 1rem; resize: none; border: 1px solid var(--eha-b3); border-radius: 1.3rem; outline: none; background: var(--eha-b2); color: var(--eha-fg); font: inherit; font-size: .9rem; line-height: 1.35; transition: border-color .2s, background-color .2s; }
.eha-compose textarea:focus { border-color: color-mix(in oklab, var(--eha-p) 55%, transparent); background: var(--eha-b1); }
@media (max-width: 767.98px) { .eha-compose textarea { font-size: 16px; } }
.eha-send { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 999px; background: var(--eha-p); color: var(--eha-pc); cursor: pointer; transition: transform .15s, opacity .2s; }
.eha-send:active { transform: scale(.92); }
[dir="rtl"] .eha-send svg { transform: scaleX(-1); }
.eha-foot { margin: 0; padding: 0 .9rem .55rem; background: var(--eha-b1); color: var(--eha-mute); font-size: .66rem; text-align: center; }

/* ============ Support Center: live chat (agent side) ============ */
.ehl { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-base-300); border-radius: 1.25rem; background: var(--color-base-100); }
.ehl-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--color-base-300); }
.ehl-avatar img { width: 2.75rem; height: 2.75rem; border-radius: 999px; object-fit: cover; }
.ehl-who { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.ehl-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ehl-who small { display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: color-mix(in oklab, var(--color-base-content) 60%, transparent); }
.ehl-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #22c55e; animation: eha-pulse 1.6s infinite; }
.ehl.is-ended .ehl-dot { background: #a1a1aa; animation: none; }
.ehl-badge { padding: .2rem .55rem; border-radius: 999px; background: var(--color-base-200); font-family: ui-monospace, monospace; font-size: .75rem; }
.ehl-transcript { border-bottom: 1px solid var(--color-base-300); background: var(--color-base-200); }
.ehl-transcript summary { padding: .6rem 1rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
.ehl-transcript-body { max-height: 16rem; overflow-y: auto; padding: 0 1rem .8rem; font-size: .8rem; line-height: 1.55; color: color-mix(in oklab, var(--color-base-content) 75%, transparent); }
.ehl-list { display: flex; height: min(60vh, 34rem); flex-direction: column; gap: .6rem; overflow-y: auto; padding: 1rem; }
.ehl-row { display: flex; align-items: flex-end; gap: .5rem; }
.ehl-me { justify-content: flex-end; }
.ehl-av { width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 999px; object-fit: cover; }
.ehl-col { display: flex; min-width: 0; max-width: 75%; flex-direction: column; gap: .2rem; }
.ehl-me .ehl-col { align-items: flex-end; }
.ehl-name { padding-inline: .5rem; font-size: .7rem; font-weight: 600; color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }
.ehl-bubble { padding: .6rem .9rem; border-radius: 1.15rem; font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; }
.ehl-them .ehl-bubble { border: 1px solid var(--color-base-300); border-end-start-radius: .35rem; background: var(--color-base-100); }
.ehl-team .ehl-bubble { border-end-start-radius: .35rem; background: color-mix(in oklab, #22c55e 10%, var(--color-base-100)); }
.ehl-me .ehl-bubble { border-end-end-radius: .35rem; background: var(--color-primary); color: var(--color-primary-content, #fff); }
.ehl-time { padding-inline: .5rem; font-size: .68rem; color: color-mix(in oklab, var(--color-base-content) 50%, transparent); }
.ehl-compose { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem; border-top: 1px solid var(--color-base-300); }
.ehl-compose textarea { flex: 1; min-height: 2.75rem; max-height: 8.75rem; padding: .65rem 1rem; resize: none; border: 1px solid var(--color-base-300); border-radius: 1.4rem; outline: none; background: var(--color-base-200); color: var(--color-base-content); font: inherit; font-size: .9rem; }
.ehl-compose textarea:focus { border-color: color-mix(in oklab, var(--color-primary) 55%, transparent); background: var(--color-base-100); }
.ehl-compose textarea:disabled { opacity: .6; }
.ehl-send { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: var(--color-primary); color: var(--color-primary-content, #fff); cursor: pointer; }
[dir="rtl"] .ehl-send svg { transform: scaleX(-1); }

/* the bot (launcher + header avatar) */
.eha-bot-visor { fill: #1e1b4b; }
.eha-bot-eyes { fill: #67e8f9; filter: drop-shadow(0 0 1.5px #22d3ee); transform-box: fill-box; transform-origin: center; animation: eha-blink 4.5s infinite; }
.eha-bot-led { fill: #fde047; animation: eha-led 2.4s infinite ease-in-out; }
@keyframes eha-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes eha-led { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.eha-launcher .eha-bot { width: 2rem; height: 2rem; }
.eha-launcher:hover .eha-bot { animation: eha-bob .9s ease-in-out infinite; }
@keyframes eha-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { .eha-bot-eyes, .eha-bot-led, .eha-launcher:hover .eha-bot { animation: none; } }

/* draggable launcher: once moved it keeps its own place (left/top set by assistant.js) */
.eha-launcher { touch-action: none; user-select: none; -webkit-user-select: none; }
.eha-launcher.is-moved { inset-inline-end: auto; right: auto; bottom: auto; }
.eha-launcher.is-dragging { transition: none; cursor: grabbing; transform: scale(1.08); box-shadow: 0 18px 36px -8px rgb(0 0 0 / .4); }
.eha-launcher.is-snapping { transition: left .3s cubic-bezier(.22, 1, .36, 1), top .3s cubic-bezier(.22, 1, .36, 1); }
/* the panel opens on the launcher's side (desktop) */
@media (min-width: 768px) {
  .eha.eha-side-left .eha-panel { left: 1.25rem; right: auto; transform-origin: bottom left; }
  .eha.eha-side-right .eha-panel { right: 1.25rem; left: auto; transform-origin: bottom right; }
}

/* compact sizes that fit every screen */
.eha-panel { width: clamp(18rem, 92vw, 23rem); height: min(36rem, calc(100vh - 7.5rem)); }
.eha-head { padding: .65rem .75rem; gap: .55rem; }
.eha-avatar { width: 2.2rem; height: 2.2rem; }
.eha-title b { font-size: .9rem; }
.eha-title small { font-size: .7rem; }
.eha-list { padding: .8rem .7rem; gap: .55rem; }
.eha-bubble { padding: .5rem .75rem; font-size: .82rem; line-height: 1.5; border-radius: 1rem; }
.eha-col { max-width: 90%; }
.eha-card { min-width: 0; gap: .55rem; padding: .45rem .5rem; border-radius: .85rem; }
.eha-card-img, .eha-card-emoji { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; border-radius: .65rem; }
.eha-card-txt b { font-size: .8rem; }
.eha-card-txt small { font-size: .7rem; }
.eha-card-go { width: 1.6rem; height: 1.6rem; }
.eha-chip { padding: .32rem .7rem; font-size: .74rem; }
.eha-sys { font-size: .72rem; }
.eha-time { font-size: .62rem; }
.eha-compose { padding: .55rem .6rem; }
.eha-compose textarea { min-height: 2.3rem; padding: .5rem .85rem; font-size: .84rem; }
.eha-send { width: 2.3rem; height: 2.3rem; }
.eha-foot { font-size: .62rem; padding-bottom: .45rem; }
.eha-bubble[dir="rtl"], .eha-bubble [dir="rtl"] { text-align: right; }
.eha-bubble[dir="ltr"] { text-align: left; }
@media (max-width: 767.98px) {
  html.eha-open { overflow: hidden; overscroll-behavior: none; }
  .eha-panel { inset: var(--eha-viewport-top, 0px) 0 auto; width: 100%; height: var(--eha-viewport-height, 100dvh); border-radius: 0; border: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
  .eha-compose textarea { font-size: 16px; }
}

/* admin tab */
.eha-tabs { display: flex; gap: .25rem; padding: .4rem .5rem; border-bottom: 1px solid var(--eha-b3); background: var(--eha-b1); }
.eha-tabs button { flex: 1; padding: .4rem .5rem; border: 0; border-radius: .7rem; background: transparent; color: var(--eha-mute); font-size: .78rem; font-weight: 700; cursor: pointer; }
.eha-tabs button.is-on { background: color-mix(in oklab, var(--eha-p) 12%, var(--eha-b1)); color: var(--eha-p); }
.eha:is(.is-admin-tab, .is-me-tab, .is-code-tab) > .eha-panel > :is(.js_eha-list, .js_eha-form, .js_eha-live, .eha-foot) { display: none !important; }
.eha-admin { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.eha-admin[hidden] { display: none; }
.eha .eha-me-bar { position: relative; display: flex; align-items: center; gap: .4rem; min-height: 3rem; padding: .35rem .65rem; border-bottom: 1px solid var(--eha-b3); background: var(--eha-b1); color: var(--eha-fg); font-size: .75rem; }
.eha .eha-me-bar > small { flex: 1; min-width: 0; }
.eha .eha-me-switch { display: flex; flex: 1; min-width: 0; align-items: center; gap: .4rem; font-weight: 600; cursor: pointer; }
.eha .eha-me-switch input { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--eha-p); }
.eha .eha-me-switch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eha .eha-clear, .eha .eha-agent-details > summary { display: grid; flex-shrink: 0; width: 2rem; min-height: 2rem; place-items: center; border: 1px solid var(--eha-b3); border-radius: .65rem; background: var(--eha-b2); color: var(--eha-fg); cursor: pointer; }
.eha .eha-clear:hover, .eha .eha-agent-details > summary:hover { border-color: var(--eha-p); }
.eha .eha-agent-details { flex-shrink: 0; }
.eha .eha-agent-details > summary { list-style: none; font-weight: 700; }
.eha .eha-agent-details > summary::-webkit-details-marker { display: none; }
.eha .eha-agent-details:not([open]) > div { display: none; }
.eha .eha-agent-details > div { position: absolute; z-index: 2; inset-inline: .65rem; top: calc(100% + .25rem); display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .6rem; border: 1px solid var(--eha-b3); border-radius: .8rem; background: var(--eha-b1); color: var(--eha-fg); box-shadow: 0 8px 24px rgb(0 0 0 / .15); }
.eha .eha-agent-details small { flex: 1; font-size: .72rem; }
.eha .eha-upgrade { display: inline-flex; align-items: center; gap: .25rem; color: var(--eha-p); font-size: .72rem; font-weight: 700; text-decoration: none; }
.eha .eha-me.is-off .eha-compose { opacity: .65; }
.eha .eha-compose textarea:disabled { cursor: not-allowed; }
.eha .eha-compose button:disabled { cursor: not-allowed; opacity: .5; }
.eha .eha-me.is-customizing > :is(.js_eha-mlist, .js_eha-mform) { display: none; }
.eha .eha-cust { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .85rem; color: var(--eha-fg); background: var(--eha-b1); }
.eha .eha-cust-h { display: block; margin-bottom: .8rem; font-size: .95rem; }
.eha .eha-cust-l { display: block; margin-block: .8rem .4rem; font-size: .8rem; font-weight: 700; }
.eha .eha-cust input { display: block; width: 100%; box-sizing: border-box; margin-top: .4rem; padding: .6rem; border: 1px solid var(--eha-b3); border-radius: .7rem; background: var(--eha-b2); color: var(--eha-fg); }
.eha .eha-sw-group { margin-block: .65rem; }
.eha .eha-sw-group > small { display: block; margin-bottom: .35rem; color: var(--eha-mute); }
.eha .eha-sw-row, .eha .eha-ic-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.eha .eha-sw, .eha .eha-ic { display: grid; flex-shrink: 0; width: 2.6rem; height: 2.6rem; place-items: center; border: 2px solid var(--eha-b3); border-radius: .75rem; cursor: pointer; }
.eha .eha-ic, .eha .eha-sw.is-default { background: var(--eha-b2); color: var(--eha-fg); font-size: 1.45rem; }
.eha .eha-sw.is-on, .eha .eha-ic.is-on { outline: 2px solid var(--eha-p); outline-offset: 2px; }
.eha .eha-cust .eha-plan-act { position: sticky; bottom: -.85rem; margin: .8rem -.85rem -.85rem; padding: .75rem; border-top: 1px solid var(--eha-b3); background: var(--eha-b1); }
.eha .eha-cust-error { color: #ef4444; font-size: .8rem; }
.eha .eha-cico { display: grid; place-items: center; font-size: 2rem; line-height: 1; }
.eha .eha-avatar .eha-cico { font-size: 1.5rem; }
.eha.has-cicon :is(.eha-launcher, .eha-avatar) > .eha-bot { display: none; }
.eha-list { min-height: 0; }
.eha-head, .eha-tabs, .eha-compose, .eha-foot, .eha-me-bar { flex-shrink: 0; }
.eha-compose textarea { min-width: 0; overflow-y: hidden; }
.eha button:focus-visible, .eha a:focus-visible { outline: 2px solid var(--eha-p); outline-offset: 3px; }
.eha-head button:focus-visible { outline-color: currentColor; }
.eha-panel { max-height: calc(100dvh - 7.5rem); }
@media (max-width: 767.98px) {
  .eha-panel { max-height: var(--eha-viewport-height, 100dvh); }
  .eha-card { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eha *, .eha *::before, .eha *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.eha-admin .eha-list { background: radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, #6366f1 7%, var(--eha-b1)) 0%, var(--eha-b1) 70%); }
.eha-mic { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border: 1px solid var(--eha-b3); border-radius: 999px; background: var(--eha-b2); color: var(--eha-fg); cursor: pointer; }
.eha-mic.is-rec { border-color: #ef4444; background: #ef4444; color: #fff; animation: eha-rec 1.2s infinite; }
@keyframes eha-rec { 0% { box-shadow: 0 0 0 0 rgb(239 68 68 / .5); } 70% { box-shadow: 0 0 0 9px rgb(239 68 68 / 0); } 100% { box-shadow: 0 0 0 0 rgb(239 68 68 / 0); } }
.eha-plan { align-self: stretch; padding: .7rem .8rem; border: 1px solid color-mix(in oklab, #f59e0b 45%, var(--eha-b3)); border-radius: 1rem; background: color-mix(in oklab, #f59e0b 7%, var(--eha-b1)); font-size: .8rem; animation: eha-in .25s; }
.eha-plan-h { display: block; margin-bottom: .35rem; font-size: .84rem; }
.eha-plan ol { margin: 0 0 .55rem; padding-inline-start: 1.1rem; list-style: decimal; }
.eha-plan li { margin: .3rem 0; line-height: 1.45; }
.eha-plan li small { display: block; margin-top: .1rem; font-family: ui-monospace, monospace; font-size: .66rem; color: var(--eha-mute); overflow-wrap: anywhere; text-align: start; }
.eha-plan-act { display: flex; justify-content: flex-end; gap: .4rem; }
.eha-plan-act button { padding: .4rem .95rem; border: 0; border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer; }
.eha-plan-act button:disabled { opacity: .5; cursor: default; }
.eha-plan-no { background: var(--eha-b2); color: var(--eha-fg); }
.eha-plan-yes { background: #16a34a; color: #fff; }

/* bubble text blocks (EhnaAssistant::format): ✦ heading, ✧ sub-heading, • item, ✹ warning; Cairo for Arabic */
.eha-bubble, .eha-card, .eha-chip, .eha-sys, .eha-explain, .eha-compose textarea { font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif; }
.eha-bubble p, .eha-bubble .eha-h, .eha-bubble .eha-sh, .eha-bubble .eha-li, .eha-bubble .eha-warn, .eha-explain p, .eha-explain .eha-h, .eha-explain .eha-sh, .eha-explain .eha-li, .eha-explain .eha-warn { display: block; text-align: start; unicode-bidi: plaintext; }
.eha-h, .eha-sh, .eha-li, .eha-warn { margin: 0; }
.eha-h { margin-top: .4rem; font-size: .9rem; font-weight: 800; line-height: 1.45; }
.eha-sh { margin-top: .3rem; font-size: .84rem; font-weight: 700; line-height: 1.45; }
.eha-h:first-child, .eha-sh:first-child { margin-top: 0; }
.eha-li { margin-top: .15rem; padding-inline-start: .95em; text-indent: -.95em; }
.eha-warn { margin: .35rem 0; padding: .35rem .6rem; border-inline-start: 3px solid #f59e0b; border-radius: .5rem; background: color-mix(in oklab, #f59e0b 12%, var(--eha-b1)); color: color-mix(in oklab, #92400e 80%, var(--eha-fg)); font-weight: 600; }
.eha-sym { color: var(--eha-p); font-weight: 800; }
.eha-li .eha-sym { display: inline-block; width: .6em; text-indent: 0; }
.eha-warn .eha-sym { color: #d97706; }
.eha-bubble p + .eha-li, .eha-bubble p + .eha-warn, .eha-bubble .eha-li + p { margin-top: .3rem; }

/* clickable important terms */
.eha-term { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--eha-p); font: inherit; font-weight: 800; text-align: inherit; text-indent: 0; text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
.eha-term:hover, .eha-term.is-on { text-decoration-style: solid; border-radius: .25rem; background: color-mix(in oklab, var(--eha-p) 10%, transparent); }
.eha-term:focus-visible { outline: 2px solid color-mix(in oklab, var(--eha-p) 55%, transparent); outline-offset: 1px; border-radius: .25rem; }

/* the explanation block under a bubble (tap a term) */
.eha-explain { display: flex; flex-direction: column; gap: .3rem; width: 100%; animation: eha-in .25s cubic-bezier(.22, 1, .36, 1); }
.eha-explain-body { padding: .65rem .85rem; border: 1px solid color-mix(in oklab, var(--eha-p) 35%, var(--eha-b3)); border-inline-start: 3px solid var(--eha-p); border-radius: 1rem; background: color-mix(in oklab, var(--eha-p) 4%, var(--eha-b1)); box-shadow: 0 1px 2px rgb(0 0 0 / .05); font-size: .82rem; line-height: 1.6; overflow-wrap: anywhere; text-align: start; }
.eha-explain-body p { margin: 0; }
.eha-explain-body p + p { margin-top: .35rem; }
.eha-explain-wait { display: flex; gap: .3rem; padding: .8rem .95rem; }
.eha-explain-wait span { width: .45rem; height: .45rem; border-radius: 999px; background: var(--eha-mute); animation: eha-dots 1.2s infinite ease-in-out; }
.eha-explain-wait span:nth-child(2) { animation-delay: .15s; }
.eha-explain-wait span:nth-child(3) { animation-delay: .3s; }
.eha-explain-err { border-color: color-mix(in oklab, #ef4444 35%, var(--eha-b3)); color: #dc2626; }

/* the small tools under a reply */
.eha-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; margin-top: -.15rem; padding-inline: .2rem; }
.eha-tool { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; padding: 0; border: 0; border-radius: .4rem; background: transparent; color: var(--eha-mute); cursor: pointer; opacity: .75; transition: color .15s, background-color .15s, opacity .15s; }
.eha-tool svg { width: 14px; height: 14px; }
.eha-tool:hover, .eha-tool:focus-visible { color: var(--eha-p); background: color-mix(in oklab, var(--eha-p) 9%, transparent); opacity: 1; outline: none; }
.eha-tool.is-on, .eha-tool.is-done { color: var(--eha-p); opacity: 1; }
.eha-tool-dislike.is-on { color: #dc2626; }
.eha-tool.is-on svg { fill: color-mix(in oklab, currentColor 20%, transparent); }

/* ===== the bot v2: body in the theme colour, animated (__ehna_assistant.tpl) ===== */
.eha { --eha-p2: color-mix(in oklab, var(--eha-p) 62%, #ffffff); --eha-p3: color-mix(in oklab, var(--eha-p) 72%, #000000); }
.eha-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.eha-bot { overflow: visible; }
.eha-bot .eha-bot-head, .eha-bot .eha-bot-tail { fill: url(#eha-g-body); }
.eha-bot .eha-bot-ear { fill: var(--eha-p3); }
.eha-bot .eha-bot-shine { fill: #ffffff; opacity: .28; }
.eha-bot .eha-bot-visor { fill: #0b1220; }
.eha-bot .eha-bot-eyes ellipse { fill: url(#eha-g-eye); }
.eha-bot .eha-bot-eyes { filter: drop-shadow(0 0 2.5px rgb(34 211 238 / .85)); transform-box: fill-box; transform-origin: center; animation: eha-look 7s ease-in-out infinite, eha-blink2 5.5s infinite; }
.eha-bot .eha-bot-glint { fill: #ffffff; }
.eha-bot .eha-bot-smile { stroke: #67e8f9; opacity: .9; }
.eha-bot .eha-bot-led { fill: #fde047; filter: drop-shadow(0 0 3px #facc15); animation: eha-led2 2.2s ease-in-out infinite; }
.eha-bot .eha-bot-ant { transform-box: fill-box; transform-origin: 50% 100%; }
.eha-bot { animation: eha-float 3.4s ease-in-out infinite; }
@keyframes eha-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5px; } }
@keyframes eha-look { 0%, 30%, 100% { translate: 0 0; } 38%, 52% { translate: -1.6px 0; } 60%, 74% { translate: 1.6px 0; } 82% { translate: 0 -.8px; } }
@keyframes eha-blink2 { 0%, 46%, 50%, 100% { scale: 1 1; } 48% { scale: 1 .1; } }
@keyframes eha-led2 { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .55; scale: .82; } }
@keyframes eha-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -14deg; } 75% { rotate: 14deg; } }

/* launcher: a light disc with a theme ring, the bot inside takes the theme colour */
.eha-launcher { background: var(--eha-b1); color: var(--eha-p); border: 2px solid color-mix(in oklab, var(--eha-p) 38%, transparent); box-shadow: 0 12px 30px -8px color-mix(in oklab, var(--eha-p) 55%, transparent), 0 2px 8px rgb(0 0 0 / .12); }
.eha-launcher::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid color-mix(in oklab, var(--eha-p) 45%, transparent); opacity: 0; animation: eha-ring 3.2s ease-out infinite; pointer-events: none; }
@keyframes eha-ring { 0% { opacity: .7; scale: .9; } 70%, 100% { opacity: 0; scale: 1.25; } }
.eha.is-open .eha-launcher::before { animation: none; }
.eha-launcher .eha-bot { width: 2.45rem; height: 2.45rem; }
.eha-launcher:hover .eha-bot { animation: eha-float 1.2s ease-in-out infinite; }
.eha-launcher:hover .eha-bot-ant { animation: eha-wiggle .7s ease-in-out 2; }
.eha-l-close { color: var(--eha-p); }
@media (max-width: 767.98px) { .eha-launcher .eha-bot { width: 2.25rem; height: 2.25rem; } }

/* header avatar: white disc so the theme-coloured bot stands out on the theme header */
.eha-avatar { background: #ffffff; box-shadow: 0 2px 10px rgb(0 0 0 / .18), inset 0 0 0 1px rgb(255 255 255 / .6); }
.eha-avatar .eha-bot { width: 1.75rem; height: 1.75rem; }
.eha.is-live .eha-avatar { background: #ffffff; }

/* tab icons */
.eha-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.eha-ti { flex-shrink: 0; fill: currentColor; stroke: currentColor; transition: transform .25s; }
.eha-ti-spark path { stroke: none; }
.eha-ti-spark .eha-ti-mini { opacity: .65; transform-box: fill-box; transform-origin: center; }
.eha-tabs button.is-on .eha-ti-spark path:first-child { transform-box: fill-box; transform-origin: center; animation: eha-twinkle 2.4s ease-in-out infinite; }
.eha-tabs button.is-on .eha-ti-spark .eha-ti-mini { animation: eha-twinkle 2.4s ease-in-out .6s infinite; }
@keyframes eha-twinkle { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: .78; rotate: 20deg; } }
.eha-ti-agent rect { fill: none; stroke-width: 1.8; }
.eha-ti-agent path:last-child { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.eha-ti-agent .eha-ti-eyes circle { stroke: none; }
.eha-tabs button.is-on .eha-ti-agent .eha-ti-eyes { transform-box: fill-box; transform-origin: center; animation: eha-blink2 3.8s infinite; }
.eha-tabs button.is-on .eha-ti-agent .eha-ti-led { stroke: none; animation: eha-led2 1.8s infinite; transform-box: fill-box; transform-origin: center; }
.eha-ti-shield path:first-child { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.eha-ti-shield .eha-ti-check { stroke-dasharray: 12; stroke-dashoffset: 0; }
.eha-tabs button.is-on .eha-ti-shield .eha-ti-check { animation: eha-draw 2.6s ease-in-out infinite; }
@keyframes eha-draw { 0% { stroke-dashoffset: 12; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 12; } }
.eha-tabs button:hover .eha-ti { transform: translateY(-1px) scale(1.08); }

/* send: the plane takes off on hover / when pressed */
.eha-send svg, .ehl-send svg { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.eha-send:hover svg, .ehl-send:hover svg { transform: translate(2px, -2px) rotate(-8deg); }
[dir="rtl"] .eha-send:hover svg, [dir="rtl"] .ehl-send:hover svg { transform: scaleX(-1) translate(2px, -2px) rotate(-8deg); }
.eha-send:active svg { transform: translate(6px, -6px) scale(.8); opacity: .6; }
.eha-mic svg { transition: transform .2s; }
.eha-mic:hover svg { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .eha-bot, .eha-bot *, .eha-launcher::before, .eha-ti, .eha-ti * { animation: none !important; } }