/* EZ Ask AI – front-end v2.1. Everything is scoped under .ezai so the theme is untouched. */

.ezai {
  --ezai-primary: #2563eb;
  --ezai-accent: #7c3aed;
  --ezai-primary-soft: #eff6ff;
  --ezai-primary-soft: color-mix(in srgb, var(--ezai-primary) 8%, #fff);
  --ezai-primary-line: #bfdbfe;
  --ezai-primary-line: color-mix(in srgb, var(--ezai-primary) 26%, #fff);
  --ezai-primary-dark: #1d4ed8;
  --ezai-primary-dark: color-mix(in srgb, var(--ezai-primary) 80%, #000);
  --ezai-grad: linear-gradient(135deg, var(--ezai-primary) 0%, var(--ezai-accent) 100%);
  --ezai-text: #0f172a;
  --ezai-text-2: #334155;
  --ezai-muted: #64748b;
  --ezai-faint: #94a3b8;
  --ezai-line: #e5e9f0;
  --ezai-soft: #f7f9fc;
  --ezai-danger: #dc2626;
  --ezai-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --ezai-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -6px rgba(15, 23, 42, .10);
  --ezai-shadow-lg: 0 2px 6px rgba(15, 23, 42, .04), 0 24px 48px -12px rgba(15, 23, 42, .18);
  --ezai-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ezai-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  position: relative;
  isolation: isolate;
  max-width: 860px;
  margin: 0 auto;
  padding: 44px 20px 48px;
  color: var(--ezai-text);
  font-family: var(--ezai-font);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.ezai *, .ezai *::before, .ezai *::after { box-sizing: border-box; }
.ezai svg { display: block; flex: 0 0 auto; }
.ezai [hidden] { display: none !important; }
.ezai .ezai-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Theme-proof resets for controls */
.ezai button, .ezai .ezai-icon-btn, .ezai .ezai-pill, .ezai textarea {
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  line-height: 1.2;
  color: inherit;
}
.ezai button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ezai button:focus-visible, .ezai a:focus-visible, .ezai .ezai-hist-item:focus-visible, .ezai .ezai-pill:focus-within {
  outline: 2px solid var(--ezai-primary);
  outline-offset: 2px;
}

/* ---------- Decorative background ---------- */
.ezai .ezai-bg {
  position: absolute; inset: 0 0 auto 0; height: 420px; z-index: -1;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 30%, #000 35%, transparent 75%);
}
.ezai .ezai-bg span {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: ezai-float 14s ease-in-out infinite;
}
.ezai .ezai-bg span:nth-child(1) { width: 300px; height: 300px; left: 8%; top: -80px; background: #dbeafe; background: color-mix(in srgb, var(--ezai-primary) 22%, #fff); }
.ezai .ezai-bg span:nth-child(2) { width: 260px; height: 260px; right: 6%; top: -40px; background: #ede9fe; animation-delay: -5s; }
.ezai .ezai-bg span:nth-child(3) { width: 220px; height: 220px; left: 42%; top: 90px; background: #fce7f3; opacity: .45; animation-delay: -9s; }
@keyframes ezai-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, 22px); } }
.ezai.is-active .ezai-bg { height: 220px; opacity: .6; }

/* ---------- Hero ---------- */
.ezai .ezai-hero { text-align: center; margin-bottom: 30px; }
.ezai .ezai-hero-badge {
  width: 52px; height: 52px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; color: #fff; background: var(--ezai-grad);
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--ezai-primary) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.ezai .ezai-hero-badge svg { width: 26px; height: 26px; }
.ezai .ezai-title {
  margin: 0; padding: 0; border: 0;
  font-family: var(--ezai-font);
  font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -.035em;
  color: var(--ezai-text);
  background: linear-gradient(120deg, #0f172a 20%, var(--ezai-primary) 60%, var(--ezai-accent) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ezai .ezai-title::before, .ezai .ezai-title::after { display: none; }
.ezai .ezai-subtitle { margin: 12px auto 0; max-width: 520px; color: var(--ezai-muted); font-size: 16px; }

.ezai .ezai-features {
  display: inline-grid !important; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: stretch; gap: 10px;
  margin: 22px auto 0 !important; padding: 0 !important; border: 0; background: none;
}
.ezai .ezai-features .ezai-feat {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; height: 40px; min-height: 0; min-width: 164px;
  margin: 0 !important; padding: 0 16px 0 8px !important;
  border: 1px solid var(--ezai-line); border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--ezai-shadow-sm);
  font-size: 13px; font-weight: 600; line-height: 1; color: var(--ezai-text-2);
  white-space: nowrap;
}
.ezai .ezai-features .ezai-feat::before, .ezai .ezai-features .ezai-feat::after { content: none !important; display: none !important; }
.ezai .ezai-feat-text { display: block; line-height: 1; padding: 0; margin: 0; }
.ezai .ezai-feat-ico {
  width: 26px; height: 26px; margin: 0; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ezai-primary-soft); color: var(--ezai-primary);
}
.ezai .ezai-feat-ok .ezai-feat-ico { background: #ecfdf5; color: #059669; }
.ezai .ezai-feat-photo .ezai-feat-ico { background: #f3efff; color: #7c3aed; }
.ezai .ezai-feat-web .ezai-feat-ico { background: #eff6ff; color: #2563eb; }
.ezai .ezai-feat-math .ezai-feat-ico { background: #fff4ec; color: #ea580c; }

/* Compact hero once a chat is open */
.ezai.is-active { padding-top: 24px; }
.ezai.is-active .ezai-hero { margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ezai.is-active .ezai-hero-badge { width: 36px; height: 36px; margin: 0; border-radius: 11px; }
.ezai.is-active .ezai-hero-badge svg { width: 18px; height: 18px; }
.ezai.is-active .ezai-title { font-size: 26px; }
.ezai.is-active .ezai-subtitle, .ezai.is-active .ezai-features, .ezai.is-active .ezai-bg { display: none !important; }
.ezai.is-active .ezai-hero-badge { flex: 0 0 auto; }
.ezai.is-active .ezai-title { white-space: nowrap; }

/* ---------- Composer ---------- */
.ezai .ezai-composer { max-width: 720px; margin: 0 auto; position: relative; z-index: 4; }
.ezai.is-active .ezai-composer {
  position: sticky; bottom: 0;
  max-width: 100%; margin-top: 0; padding: 14px 0 12px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 26%);
}

.ezai .ezai-box {
  position: relative;
  background: #fff;
  border: 1px solid var(--ezai-line);
  border-radius: 26px;
  padding: 12px 12px 12px 18px;
  box-shadow: var(--ezai-shadow-lg);
  transition: border-color .2s, box-shadow .2s;
}
.ezai .ezai-box:focus-within {
  border-color: var(--ezai-primary-line);
  box-shadow: 0 0 0 4px var(--ezai-primary-soft), var(--ezai-shadow-lg);
}
.ezai .ezai-box.is-locked { background: #fcfdfe; }
.ezai .ezai-box.is-locked .ezai-textarea { opacity: .55; }

.ezai .ezai-textarea {
  display: block;
  width: 100%;
  height: 52px;
  min-height: 52px;
  max-height: 220px;
  padding: 12px 2px 8px;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--ezai-text);
  font-size: 17px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  -webkit-appearance: none;
  appearance: none;
}
.ezai .ezai-textarea::placeholder { color: var(--ezai-faint); opacity: 1; }
.ezai.is-active .ezai-textarea { height: 46px; min-height: 46px; font-size: 16px; padding-top: 10px; }

.ezai .ezai-toolbar { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.ezai .ezai-tools { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }

.ezai .ezai-icon-btn {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 13px;
  background: var(--ezai-soft); color: #475569;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.ezai .ezai-icon-btn:hover { background: var(--ezai-primary-soft); color: var(--ezai-primary); border-color: var(--ezai-primary-line); }
.ezai .ezai-icon-btn:active { transform: scale(.94); }
.ezai .ezai-voice.is-on {
  background: #fee2e2; border-color: #fecaca; color: var(--ezai-danger);
  animation: ezai-pulse 1.2s ease-in-out infinite;
}
@keyframes ezai-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .35); } 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } }

.ezai .ezai-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--ezai-soft); color: #475569;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}
.ezai .ezai-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ezai .ezai-pill:hover { color: var(--ezai-primary); background: var(--ezai-primary-soft); }
.ezai .ezai-pill:has(input:checked) { background: var(--ezai-primary-soft); border-color: var(--ezai-primary-line); color: var(--ezai-primary); }
.ezai .ezai-pill:has(input:checked)::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ezai-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ezai-primary) 20%, transparent);
}

.ezai .ezai-charcount { font-size: 12px; color: var(--ezai-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ezai .ezai-charcount.is-over { color: var(--ezai-danger); font-weight: 700; }

.ezai .ezai-send {
  position: relative;
  width: 44px; height: 44px; padding: 0;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 15px;
  background: var(--ezai-grad); color: #fff;
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--ezai-primary) 60%, transparent);
  transition: transform .15s, opacity .15s, box-shadow .15s, filter .15s;
}
.ezai .ezai-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.ezai .ezai-send:active:not(:disabled) { transform: scale(.95); }
.ezai .ezai-send:disabled { background: #e2e8f0; color: #94a3b8; box-shadow: none; cursor: not-allowed; }
.ezai .ezai-spinner {
  display: none; width: 18px; height: 18px;
  border: 2px solid #fff; border-top-color: transparent; border-radius: 50%;
  animation: ezai-spin .8s linear infinite;
}
.ezai.is-busy .ezai-send { background: var(--ezai-grad); color: #fff; }
.ezai.is-busy .ezai-send-icon { display: none; }
.ezai.is-busy .ezai-spinner { display: block; }
@keyframes ezai-spin { to { transform: rotate(360deg); } }

/* Context chip & image preview */
.ezai .ezai-context {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px -6px; padding: 8px 10px;
  border-radius: 14px; background: var(--ezai-primary-soft);
  border: 1px solid var(--ezai-primary-line);
}
.ezai .ezai-context-icon {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: #fff; color: var(--ezai-primary);
  box-shadow: var(--ezai-shadow-sm);
}
.ezai .ezai-context-text {
  flex: 1; min-width: 0; font-size: 14px; color: var(--ezai-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ezai .ezai-context-remove, .ezai .ezai-preview-remove {
  width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(15, 23, 42, .08); color: #475569; font-size: 17px; line-height: 1;
}
.ezai .ezai-context-remove:hover { background: #fff; color: var(--ezai-primary); }

.ezai .ezai-preview { position: relative; width: max-content; margin: 4px 0 6px; }
.ezai .ezai-preview img { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 14px; border: 1px solid var(--ezai-line); box-shadow: var(--ezai-shadow-sm); }
.ezai .ezai-preview-remove { position: absolute; top: -8px; right: -8px; background: #0f172a; color: #fff; border: 2px solid #fff; }

.ezai .ezai-drop {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--ezai-primary); border-radius: 26px;
  background: rgba(255, 255, 255, .94); color: var(--ezai-primary); font-weight: 700;
  pointer-events: none;
}

/* Meta row */
.ezai .ezai-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 14px; margin-top: 10px; padding: 0 8px;
  font-size: 12.5px; color: var(--ezai-muted);
}
.ezai .ezai-quota { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ezai .ezai-quota-bar { width: 56px; height: 6px; border-radius: 99px; background: #e9edf3; overflow: hidden; }
.ezai .ezai-quota-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ezai-grad); transition: width .3s; }
.ezai .ezai-quota.is-low { color: #b45309; }
.ezai .ezai-quota.is-low .ezai-quota-bar i { background: #f59e0b; }
.ezai .ezai-quota-link { color: var(--ezai-primary); font-weight: 700; text-decoration: none; }
.ezai .ezai-quota-link:hover { text-decoration: underline; }
.ezai .ezai-note { margin-left: auto; color: var(--ezai-faint); }

/* ---------- Section titles ---------- */
.ezai .ezai-section-title {
  margin: 0 0 14px; padding: 0; border: 0;
  font-family: var(--ezai-font); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ezai-faint);
}

/* ---------- Suggestions ---------- */
.ezai .ezai-suggestions { max-width: 720px; margin: 34px auto 0; }
.ezai .ezai-suggestions .ezai-section-title { text-align: center; }
.ezai .ezai-suggestions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.ezai .ezai-sug {
  --c: var(--ezai-primary);
  --c-soft: var(--ezai-primary-soft);
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px;
  text-align: left;
  border: 1px solid var(--ezai-line); border-radius: 18px;
  background: #fff;
  box-shadow: var(--ezai-shadow-sm);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.ezai .ezai-sug:nth-child(4n+2) { --c: #7c3aed; --c-soft: #f3efff; }
.ezai .ezai-sug:nth-child(4n+3) { --c: #059669; --c-soft: #ecfdf5; }
.ezai .ezai-sug:nth-child(4n+4) { --c: #ea580c; --c-soft: #fff4ec; }
.ezai .ezai-sug:hover { border-color: color-mix(in srgb, var(--c) 35%, #fff); box-shadow: var(--ezai-shadow); transform: translateY(-2px); }
.ezai .ezai-sug:active { transform: translateY(0) scale(.99); }
.ezai .ezai-sug-icon {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px; background: var(--c-soft); color: var(--c);
}
.ezai .ezai-sug-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ezai .ezai-sug-text strong { font-size: 14.5px; color: var(--ezai-text); line-height: 1.3; font-weight: 700; }
.ezai .ezai-sug-text small {
  font-size: 13px; color: var(--ezai-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Chat ---------- */
.ezai .ezai-chat {
  background: #fff;
  border: 1px solid var(--ezai-line);
  border-radius: 28px;
  padding: 14px 26px 10px;
  box-shadow: var(--ezai-shadow);
}
.ezai .ezai-chat-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -10px 4px; padding: 6px 10px 12px;
  border-bottom: 1px solid #f1f4f8;
}
.ezai .ezai-counter {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px;
  background: var(--ezai-soft); color: var(--ezai-muted); font-size: 12.5px; font-weight: 600;
}
.ezai .ezai-counter::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.ezai .ezai-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--ezai-line); border-radius: 99px;
  background: #fff; color: var(--ezai-text-2); font-size: 13px; font-weight: 600;
  transition: .15s;
}
.ezai .ezai-btn-ghost:hover { background: var(--ezai-primary-soft); border-color: var(--ezai-primary-line); color: var(--ezai-primary); }

.ezai .ezai-msg { margin: 22px 0; scroll-margin-top: 90px; animation: ezai-in .3s ease both; }
@keyframes ezai-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.ezai .ezai-msg-user { display: flex; justify-content: flex-end; }
.ezai .ezai-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 22px 22px 6px 22px;
  background: var(--ezai-grad);
  color: #fff;
  font-size: 15.5px; line-height: 1.55;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ezai-primary) 70%, transparent);
  overflow-wrap: anywhere;
}
.ezai .ezai-bubble .ezai-msg-body { color: #fff; }
.ezai .ezai-msg-user.is-failed .ezai-bubble { opacity: .55; }
.ezai .ezai-quote {
  margin-bottom: 8px; padding: 6px 10px;
  border-radius: 10px; background: rgba(255, 255, 255, .16);
  font-size: 13px; color: rgba(255, 255, 255, .9);
}
.ezai .ezai-msg-img { display: block; max-width: 240px; max-height: 240px; margin-bottom: 8px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255, 255, 255, .35); }
.ezai .ezai-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px;
  padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .18);
  font-size: 12px; color: #fff;
}

.ezai .ezai-ai-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ezai .ezai-avatar {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: #fff; background: var(--ezai-grad);
  box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--ezai-primary) 60%, transparent);
}
.ezai .ezai-ai-name { font-size: 14px; font-weight: 700; color: var(--ezai-text); }
.ezai .ezai-ai-main { min-width: 0; padding-left: 40px; }
.ezai .ezai-error {
  padding: 12px 14px; border-radius: 14px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 15px;
}

.ezai .ezai-typing { display: inline-flex; align-items: center; gap: 5px; color: var(--ezai-muted); font-size: 14px; font-weight: 600; }
.ezai .ezai-typing span { margin-right: 3px; }
.ezai .ezai-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ezai-primary);
  animation: ezai-dot 1.1s infinite ease-in-out;
}
.ezai .ezai-typing i:nth-of-type(2) { animation-delay: .12s; background: color-mix(in srgb, var(--ezai-primary) 50%, var(--ezai-accent)); }
.ezai .ezai-typing i:nth-of-type(3) { animation-delay: .24s; background: var(--ezai-accent); }
@keyframes ezai-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }

.ezai .ezai-skeleton { margin-top: 12px; display: grid; gap: 9px; }
.ezai .ezai-skeleton b {
  display: block; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%);
  background-size: 200% 100%;
  animation: ezai-shimmer 1.4s linear infinite;
}
.ezai .ezai-skeleton b:nth-child(1) { width: 92%; }
.ezai .ezai-skeleton b:nth-child(2) { width: 78%; }
.ezai .ezai-skeleton b:nth-child(3) { width: 55%; }
@keyframes ezai-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.ezai .ezai-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ezai .ezai-mini-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--ezai-line); border-radius: 99px;
  background: #fff; color: var(--ezai-muted);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.ezai .ezai-mini-btn:hover { color: var(--ezai-primary); border-color: var(--ezai-primary-line); background: var(--ezai-primary-soft); }
.ezai .ezai-mini-btn.is-done { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.ezai a.ezai-mini-btn { text-decoration: none !important; box-shadow: none; }
.ezai .ezai-mini-btn.ezai-mini-primary,
.ezai a.ezai-mini-btn.ezai-mini-primary:link,
.ezai a.ezai-mini-btn.ezai-mini-primary:visited {
  height: 38px; padding: 0 16px;
  background: var(--ezai-primary) !important;
  background-image: var(--ezai-grad) !important;
  background-size: 100% 100% !important;
  border-color: transparent !important;
  color: #fff !important; -webkit-text-fill-color: #fff;
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ezai-primary) 70%, transparent);
}
.ezai a.ezai-mini-btn.ezai-mini-primary:hover,
.ezai a.ezai-mini-btn.ezai-mini-primary:focus,
.ezai a.ezai-mini-btn.ezai-mini-primary:active {
  color: #fff !important; -webkit-text-fill-color: #fff;
  background-image: var(--ezai-grad) !important;
  filter: brightness(1.08); opacity: 1;
}

.ezai .ezai-sources {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px;
  padding-top: 12px; border-top: 1px dashed var(--ezai-line);
}
.ezai .ezai-sources-label { font-size: 12px; font-weight: 700; color: var(--ezai-muted); margin-right: 2px; text-transform: uppercase; letter-spacing: .05em; }
.ezai .ezai-source {
  display: inline-flex; align-items: center; gap: 5px; max-width: 260px;
  padding: 5px 11px; border-radius: 99px;
  background: var(--ezai-soft); border: 1px solid var(--ezai-line);
  font-size: 12.5px; color: var(--ezai-text-2); text-decoration: none;
}
.ezai .ezai-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ezai .ezai-source:hover { border-color: var(--ezai-primary-line); color: var(--ezai-primary); background: #fff; }

/* ---------- Markdown answer ---------- */
.ezai .ezai-md { color: #1e293b; font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.ezai .ezai-md > :first-child { margin-top: 0; }
.ezai .ezai-md > :last-child { margin-bottom: 0; }
.ezai .ezai-md p { margin: 0 0 14px; }
.ezai .ezai-md h2, .ezai .ezai-md h3, .ezai .ezai-md h4, .ezai .ezai-md h5, .ezai .ezai-md h6 {
  margin: 24px 0 10px; padding: 0; border: 0;
  font-family: var(--ezai-font); color: var(--ezai-text); font-weight: 750; letter-spacing: -.015em;
}
.ezai .ezai-md h2 { font-size: 22px; line-height: 1.3; }
.ezai .ezai-md h3 { font-size: 19px; line-height: 1.35; }
.ezai .ezai-md h4, .ezai .ezai-md h5, .ezai .ezai-md h6 { font-size: 16.5px; }
.ezai .ezai-md ul, .ezai .ezai-md ol { margin: 8px 0 16px; padding-left: 24px; }
.ezai .ezai-md ul { list-style: disc; }
.ezai .ezai-md ol { list-style: decimal; }
.ezai .ezai-md li { margin: 6px 0; padding-left: 2px; }
.ezai .ezai-md li::marker { color: var(--ezai-primary); font-weight: 700; }
.ezai .ezai-md li > ul, .ezai .ezai-md li > ol { margin: 4px 0; }
.ezai .ezai-md strong { color: var(--ezai-text); font-weight: 700; }
.ezai .ezai-md a.ezai-link { color: var(--ezai-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: break-word; }
.ezai .ezai-md blockquote {
  margin: 16px 0; padding: 12px 16px;
  border: 0; border-left: 4px solid var(--ezai-primary); border-radius: 4px 14px 14px 4px;
  background: var(--ezai-primary-soft); color: var(--ezai-text-2); font-style: normal; font-size: 15.5px;
}
.ezai .ezai-md blockquote::before { display: none; }
.ezai .ezai-md hr { border: 0; border-top: 1px solid var(--ezai-line); margin: 22px 0; height: 0; }
.ezai .ezai-md code {
  padding: 2px 6px; border-radius: 6px;
  background: #f1f5f9; color: #be123c;
  font-family: var(--ezai-mono); font-size: .88em;
}

.ezai .ezai-code { margin: 16px 0; border-radius: 16px; overflow: hidden; background: #0b1220; border: 1px solid #1e293b; box-shadow: var(--ezai-shadow); }
.ezai .ezai-code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px 7px 14px; background: #131c2e; color: #94a3b8;
  font-size: 12px; font-family: var(--ezai-mono);
}
.ezai .ezai-code-head > span::before { content: "● ● ●"; margin-right: 10px; letter-spacing: 1px; color: #334155; font-size: 9px; vertical-align: 1px; }
.ezai .ezai-code-head .ezai-mini-btn { height: 28px; background: transparent; border-color: #2a3650; color: #cbd5e1; }
.ezai .ezai-code-head .ezai-mini-btn:hover { background: #22304a; color: #fff; }
.ezai .ezai-code pre {
  margin: 0 !important; padding: 16px 18px !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  overflow: auto; max-height: 540px;
  font-size: 13.5px; line-height: 1.6; white-space: pre; tab-size: 4;
}
.ezai .ezai-code pre code {
  padding: 0; background: transparent !important; color: #e2e8f0;
  font-size: inherit; white-space: pre; word-break: normal; overflow-wrap: normal; text-shadow: none;
}

.ezai .ezai-table { margin: 16px 0; overflow-x: auto; border: 1px solid var(--ezai-line); border-radius: 16px; -webkit-overflow-scrolling: touch; box-shadow: var(--ezai-shadow-sm); }
.ezai .ezai-table table { width: 100%; min-width: 420px; margin: 0; border-collapse: collapse; border: 0; background: #fff; font-size: 15px; }
.ezai .ezai-table th, .ezai .ezai-table td {
  padding: 10px 14px; border: 0; border-bottom: 1px solid #eef1f5;
  text-align: left; vertical-align: top; overflow-wrap: break-word;
}
.ezai .ezai-table th { background: var(--ezai-soft); font-weight: 700; color: var(--ezai-text); white-space: nowrap; font-size: 13.5px; }
.ezai .ezai-table tr:last-child td { border-bottom: 0; }
.ezai .ezai-table tbody tr:hover td { background: #fafbfd; }

.ezai .ezai-math { overflow-wrap: normal; }
.ezai .ezai-math-block {
  display: block; margin: 14px 0; padding: 12px 14px;
  overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--ezai-line); border-radius: 14px; background: var(--ezai-soft);
  text-align: center;
}
.ezai mjx-container { max-width: 100%; }
.ezai mjx-container[display="true"] { margin: 0 !important; overflow-x: auto; overflow-y: hidden; }

/* ---------- History ---------- */
.ezai .ezai-history { max-width: 720px; margin: 36px auto 0; }
.ezai.is-active .ezai-history { max-width: 100%; margin-top: 22px; }
.ezai .ezai-history-head { display: flex; align-items: center; justify-content: space-between; }
.ezai .ezai-history-clear {
  padding: 4px 10px; margin-bottom: 14px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ezai-danger); font-size: 12.5px; font-weight: 600;
}
.ezai .ezai-history-clear:hover { background: #fef2f2; }
.ezai .ezai-history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ezai .ezai-hist-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px 11px 12px;
  border: 1px solid var(--ezai-line); border-radius: 16px; background: #fff;
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  min-width: 0;
}
.ezai .ezai-hist-item:hover { border-color: var(--ezai-primary-line); box-shadow: var(--ezai-shadow-sm); }
.ezai .ezai-hist-item.is-current { border-color: var(--ezai-primary-line); background: var(--ezai-primary-soft); }
.ezai .ezai-hist-icon {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--ezai-soft); color: var(--ezai-muted);
}
.ezai .ezai-hist-item.is-current .ezai-hist-icon { background: #fff; color: var(--ezai-primary); }
.ezai .ezai-hist-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ezai .ezai-hist-title { font-size: 14px; font-weight: 600; color: var(--ezai-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ezai .ezai-hist-meta { font-size: 12px; color: var(--ezai-muted); }
.ezai .ezai-hist-del {
  width: 30px; height: 30px; padding: 0; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: transparent; color: var(--ezai-faint);
  opacity: .7;
}
.ezai .ezai-hist-item:hover .ezai-hist-del { opacity: 1; }
.ezai .ezai-hist-del:hover { background: #fee2e2; color: var(--ezai-danger); }

/* ---------- Toast ---------- */
.ezai .ezai-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 99999;
  max-width: calc(100vw - 32px); padding: 11px 18px;
  border-radius: 14px; background: #0f172a; color: #fff; font-size: 14px; font-weight: 500;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .3);
  transform: translate(-50%, 20px); opacity: 0; transition: .25s ease;
}
.ezai .ezai-toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- "Ask about" popover (lives in <body>) ---------- */
.ezai-askpop {
  position: fixed; z-index: 999999; display: none; align-items: center; gap: 7px;
  margin: 0; padding: 6px 13px 6px 6px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important; border-radius: 999px !important;
  background: #0f172a !important; color: #fff !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .28) !important;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-transform: none !important; letter-spacing: normal !important;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.ezai-askpop.show { display: inline-flex; animation: ezai-pop .16s cubic-bezier(.2, .9, .2, 1.1); }
.ezai-askpop:hover { background: #1e293b !important; }
.ezai-askpop-icon {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--ezai-primary, #2563eb), #7c3aed);
}
.ezai-askpop-icon svg { display: block; }
@keyframes ezai-pop { from { opacity: 0; transform: translateY(-4px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Tablet ---------- */
@media (max-width: 860px) {
  .ezai .ezai-history-list { grid-template-columns: 1fr; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .ezai { padding: 26px 12px 28px; }
  .ezai .ezai-bg { height: 320px; }
  .ezai .ezai-bg span:nth-child(1) { width: 220px; height: 220px; left: -40px; }
  .ezai .ezai-bg span:nth-child(2) { width: 200px; height: 200px; right: -50px; }
  .ezai .ezai-bg span:nth-child(3) { display: none; }

  .ezai .ezai-hero { margin-bottom: 22px; }
  .ezai .ezai-hero-badge { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 12px; }
  .ezai .ezai-title { font-size: 34px; }
  .ezai .ezai-subtitle { font-size: 14.5px; margin-top: 8px; }
  .ezai .ezai-features {
    display: grid !important; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; max-width: 360px; gap: 8px; margin-top: 18px;
  }
  .ezai .ezai-features-1 { grid-template-columns: 1fr; max-width: 200px; }
  .ezai .ezai-features .ezai-feat { justify-content: flex-start; min-width: 0; height: 42px; gap: 7px; padding: 0 8px 0 7px !important; font-size: 12.5px; border-radius: 14px; }
  .ezai .ezai-feat-ico { width: 24px; height: 24px; }
  .ezai .ezai-features .ezai-feat:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; min-width: 50%; }
  .ezai .ezai-feat-text { overflow: hidden; text-overflow: ellipsis; }

  .ezai.is-active { padding-top: 14px; }
  .ezai.is-active .ezai-hero { margin-bottom: 10px; }
  .ezai.is-active .ezai-title { font-size: 22px; }
  .ezai.is-active .ezai-hero-badge { width: 32px; height: 32px; border-radius: 10px; }

  .ezai .ezai-box { padding: 8px 8px 8px 14px; border-radius: 24px; }
  .ezai .ezai-textarea { font-size: 16px; height: 48px; min-height: 48px; }
  .ezai .ezai-icon-btn { width: 40px; height: 40px; }
  .ezai .ezai-pill { height: 40px; padding: 0 12px; }
  .ezai .ezai-meta { padding: 0 6px; margin-top: 8px; }
  .ezai .ezai-note { margin-left: 0; width: 100%; font-size: 11.5px; }
  .ezai.is-active .ezai-composer { padding: 10px 0 calc(8px + env(safe-area-inset-bottom)); }
  .ezai.is-active .ezai-note { display: none; }
  .ezai .ezai-quota { flex-wrap: nowrap; gap: 6px; font-size: 12px; white-space: nowrap; }
  .ezai .ezai-quota-bar { display: none; }
  .ezai.is-active .ezai-box { padding: 6px 6px 6px 12px; border-radius: 22px; }
  .ezai.is-active .ezai-textarea { height: 42px; min-height: 42px; padding-top: 9px; }
  .ezai.is-active .ezai-icon-btn { width: 36px; height: 36px; border-radius: 12px; }
  .ezai.is-active .ezai-pill { height: 36px; }
  .ezai.is-active .ezai-send { width: 40px; height: 40px; border-radius: 13px; }
  .ezai.is-active .ezai-meta { margin-top: 6px; }

  /* Suggestions become a swipeable row */
  .ezai .ezai-suggestions { margin-top: 26px; }
  .ezai .ezai-suggestions .ezai-section-title { text-align: left; padding-left: 4px; }
  .ezai .ezai-suggestions-grid {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%;
    grid-template-rows: repeat(2, auto);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -12px; padding: 2px 12px 10px; gap: 10px;
    scrollbar-width: none;
  }
  .ezai .ezai-suggestions-grid::-webkit-scrollbar { display: none; }
  .ezai .ezai-sug { scroll-snap-align: start; padding: 12px 14px; border-radius: 16px; }
  .ezai .ezai-sug-icon { width: 38px; height: 38px; border-radius: 12px; }
  .ezai .ezai-sug-text small { -webkit-line-clamp: 1; }

  /* Chat goes edge-to-edge without a card */
  .ezai .ezai-chat { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .ezai .ezai-chat-bar { margin: 0 -12px; padding: 8px 12px 10px; }
  .ezai .ezai-msg { margin: 18px 0; }
  .ezai .ezai-bubble { max-width: 88%; padding: 11px 14px; font-size: 15.5px; border-radius: 20px 20px 6px 20px; }
  .ezai .ezai-msg-img { max-width: 100%; }
  .ezai .ezai-ai-head { margin-bottom: 6px; }
  .ezai .ezai-avatar { width: 28px; height: 28px; border-radius: 9px; }
  .ezai .ezai-ai-main { padding-left: 0; }
  .ezai .ezai-md { font-size: 16px; line-height: 1.7; }
  .ezai .ezai-md h2 { font-size: 20px; }
  .ezai .ezai-md h3 { font-size: 18px; }
  .ezai .ezai-md ul, .ezai .ezai-md ol { padding-left: 20px; }
  .ezai .ezai-code { margin-left: -2px; margin-right: -2px; border-radius: 14px; }
  .ezai .ezai-code pre { font-size: 12.5px; padding: 14px !important; }
  .ezai .ezai-table { border-radius: 14px; }
  .ezai .ezai-table table { font-size: 14px; }
  .ezai .ezai-mini-btn { height: 34px; }

  .ezai .ezai-history { margin-top: 28px; }
}

@media (max-width: 380px) {
  .ezai .ezai-pill span { display: none; }
  .ezai .ezai-pill { padding: 0 11px; }
  .ezai .ezai-title { font-size: 30px; }
}

@media (hover: none) {
  .ezai .ezai-hist-del { opacity: 1; }
  .ezai .ezai-sug:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ezai *, .ezai-askpop { animation: none !important; transition: none !important; }
}

/* ---------- Graphs & charts ---------- */
.ezai .ezai-graph {
  margin: 16px 0 6px; padding: 14px 14px 12px;
  border: 1px solid var(--ezai-line); border-radius: 18px; background: #fff;
  box-shadow: var(--ezai-shadow-sm);
}
.ezai .ezai-graph.is-failed { padding: 12px 14px; color: #991b1b; background: #fef2f2; border-color: #fecaca; font-size: 14px; }
.ezai .ezai-graph-loading { height: 260px; border-radius: 12px; background: linear-gradient(90deg, #f1f5f9 25%, #f8fafc 50%, #f1f5f9 75%); background-size: 200% 100%; animation: ezai-shimmer 1.4s linear infinite; }
.ezai .ezai-graph-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.ezai .ezai-graph-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--ezai-text); line-height: 1.3; }
.ezai .ezai-graph-title > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ezai .ezai-graph-ico { width: 26px; height: 26px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--ezai-primary-soft); color: var(--ezai-primary); }
.ezai .ezai-graph-head .ezai-mini-btn { height: 30px; flex: 0 0 auto; }
.ezai .ezai-graph-canvas { position: relative; width: 100%; touch-action: pan-y; }
.ezai .ezai-graph-canvas svg { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }
.ezai .ezai-graph-tip {
  position: absolute; z-index: 2; pointer-events: none;
  min-width: 96px; padding: 7px 10px; border-radius: 10px;
  background: rgba(15, 23, 42, .92); color: #fff; font-size: 12px; line-height: 1.5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .25); font-variant-numeric: tabular-nums;
}
.ezai .ezai-tip-x { color: #cbd5e1; font-weight: 600; margin-bottom: 2px; }
.ezai .ezai-tip-row { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ezai .ezai-tip-row i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ezai .ezai-graph-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; }
.ezai .ezai-graph-key { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ezai-text-2); font-weight: 600; }
.ezai .ezai-graph-key i { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.ezai .ezai-graph-src { margin: 4px 0 14px; }
.ezai .ezai-graph-src summary { display: inline-block; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ezai-muted); padding: 2px 4px; list-style: none; }
.ezai .ezai-graph-src summary::-webkit-details-marker { display: none; }
.ezai .ezai-graph-src summary::before { content: "▸ "; }
.ezai .ezai-graph-src[open] summary::before { content: "▾ "; }
.ezai .ezai-graph-src summary:hover { color: var(--ezai-primary); }
.ezai .ezai-graph-src .ezai-code { margin-top: 6px; }
@media (max-width: 640px) {
  .ezai .ezai-graph { margin-left: -2px; margin-right: -2px; padding: 12px 10px 10px; border-radius: 16px; }
  .ezai .ezai-graph-title { font-size: 13.5px; }
}

/* ---------- Site search results (tool cards) ---------- */
.ezai .ezai-site { margin-top: 16px; }
.ezai .ezai-site-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ezai-muted);
}
.ezai .ezai-site-label svg { color: var(--ezai-primary); }
.ezai .ezai-site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ezai .ezai-site-grid:has(> :only-child) { grid-template-columns: 1fr; }
.ezai a.ezai-site-card {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 11px 10px 11px 11px;
  border: 1px solid var(--ezai-line); border-radius: 16px; background: #fff;
  color: inherit; text-decoration: none !important;
  box-shadow: var(--ezai-shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ezai a.ezai-site-card:hover { border-color: var(--ezai-primary-line); box-shadow: var(--ezai-shadow); transform: translateY(-1px); }
.ezai .ezai-site-ico, .ezai .ezai-site-thumb {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
}
.ezai .ezai-site-ico { display: flex; align-items: center; justify-content: center; background: var(--ezai-grad); color: #fff; }
.ezai .ezai-site-thumb { object-fit: cover; background: var(--ezai-soft); border: 1px solid var(--ezai-line); margin: 0; }
.ezai .ezai-site-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ezai .ezai-site-text strong { font-size: 14.5px; font-weight: 700; color: var(--ezai-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ezai .ezai-site-text small {
  font-size: 12.5px; line-height: 1.4; color: var(--ezai-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ezai .ezai-site-go {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ezai-primary-soft); color: var(--ezai-primary);
  transition: transform .15s;
}
.ezai a.ezai-site-card:hover .ezai-site-go { transform: translateX(2px); }
@media (max-width: 640px) {
  .ezai .ezai-site-grid { grid-template-columns: 1fr; gap: 8px; }
  .ezai .ezai-site-ico, .ezai .ezai-site-thumb { width: 40px; height: 40px; }
}

/* ---------- Voice: language picker & read aloud ---------- */
.ezai .ezai-voice-group { display: inline-flex; align-items: stretch; border-radius: 13px; background: var(--ezai-soft); }
.ezai .ezai-voice-group .ezai-voice { border-radius: 13px 0 0 13px; }
.ezai .ezai-voice-group .ezai-lang-btn:not([style*="none"]) { display: inline-flex; }
.ezai .ezai-voice-group .ezai-voice:only-child, .ezai .ezai-voice-group .ezai-voice:has(+ .ezai-lang-btn[style*="none"]) { border-radius: 13px; }
.ezai .ezai-lang-btn {
  display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 8px 0 4px;
  margin: 0; border: 0; border-left: 1px solid #e6eaf0; border-radius: 0 13px 13px 0;
  background: var(--ezai-soft); color: #475569; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  transition: background .15s, color .15s;
}
.ezai .ezai-lang-btn:hover, .ezai .ezai-lang-btn[aria-expanded="true"] { background: var(--ezai-primary-soft); color: var(--ezai-primary); }
.ezai .ezai-lang-code { min-width: 18px; text-align: center; }
.ezai.is-listening .ezai-box { border-color: #fecaca; box-shadow: 0 0 0 4px #fef2f2, var(--ezai-shadow-lg); }

.ezai .ezai-lang-menu {
  position: absolute; left: 8px; bottom: calc(100% + 8px); z-index: 20;
  width: min(420px, calc(100% - 16px)); max-height: 320px; overflow: auto;
  padding: 10px; border: 1px solid var(--ezai-line); border-radius: 18px; background: #fff;
  box-shadow: var(--ezai-shadow-lg);
  animation: ezai-in .18s ease both;
}
.ezai.is-active .ezai-lang-menu { bottom: calc(100% + 8px); }
.ezai .ezai-lang-title { padding: 2px 6px 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ezai-faint); }
.ezai .ezai-lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.ezai .ezai-lang-opt {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 9px;
  border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left;
  font-size: 13.5px; color: var(--ezai-text-2);
}
.ezai .ezai-lang-opt b {
  min-width: 30px; height: 22px; padding: 0 5px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ezai-soft); color: var(--ezai-muted); font-size: 11px; font-weight: 800;
}
.ezai .ezai-lang-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ezai .ezai-lang-opt:hover { background: var(--ezai-soft); }
.ezai .ezai-lang-opt.is-on { background: var(--ezai-primary-soft); border-color: var(--ezai-primary-line); color: var(--ezai-primary); font-weight: 700; }
.ezai .ezai-lang-opt.is-on b { background: var(--ezai-primary); color: #fff; }

.ezai .ezai-mini-btn.ezai-speak.is-speaking { color: #fff; border-color: transparent; background: var(--ezai-grad); }
.ezai .ezai-mini-btn.ezai-speak.is-speaking svg { animation: ezai-pulse-s 1s ease-in-out infinite; }
@keyframes ezai-pulse-s { 50% { opacity: .5; } }

@media (max-width: 640px) {
  .ezai .ezai-lang-menu { left: 4px; width: calc(100% - 8px); max-height: 300px; }
  .ezai .ezai-lang-grid { grid-template-columns: 1fr; }
  .ezai .ezai-lang-opt { padding: 9px 10px; font-size: 14.5px; }
  .ezai .ezai-lang-btn { height: 40px; padding: 0 6px 0 3px; }
  .ezai.is-active .ezai-lang-btn { height: 36px; }
}

/* AI voice recording: live level ring + transcribing state */
.ezai .ezai-voice.is-on {
  animation: none;
  box-shadow: 0 0 0 calc(2px + var(--lvl, 0) * 9px) rgba(220, 38, 38, .22);
  transition: box-shadow .08s linear;
}
.ezai.is-transcribing .ezai-voice { color: var(--ezai-primary); background: var(--ezai-primary-soft); }
.ezai.is-transcribing .ezai-voice svg { animation: ezai-pulse-s .9s ease-in-out infinite; }
.ezai.is-transcribing .ezai-box { border-color: var(--ezai-primary-line); }

/* ---------- MathJax: keep inline formulas inline (fixes line breaks around $x$) ---------- */
.ezai .ezai-md mjx-container svg,
.ezai .ezai-md mjx-container svg * { flex: none; }
.ezai .ezai-md mjx-container:not([display="true"]) {
  display: inline !important;
  margin: 0 .08em !important; padding: 0 !important;
  max-width: none; overflow: visible !important;
  white-space: nowrap;
}
.ezai .ezai-md mjx-container:not([display="true"]) > svg { display: inline !important; max-width: none; }
.ezai .ezai-md mjx-container[display="true"] {
  display: block !important; text-align: center;
  margin: 0 !important; padding: 0 !important;
  overflow-x: auto; overflow-y: hidden; max-width: 100%;
}
.ezai .ezai-md mjx-container[display="true"] > svg { display: inline-block !important; max-width: none; }
.ezai .ezai-md .ezai-math:not(.ezai-math-block) { display: inline; }
.ezai .ezai-md .ezai-math-block { -webkit-overflow-scrolling: touch; }

/* ---------- Streaming, stop, regenerate, edit, follow-ups ---------- */
.ezai .ezai-stop-icon { display: none; }
.ezai.is-busy .ezai-send { background: #0f172a; box-shadow: 0 6px 16px -6px rgba(15, 23, 42, .6); }
.ezai.is-busy .ezai-send:hover:not(:disabled) { filter: none; background: #1e293b; }
.ezai.is-busy .ezai-send .ezai-stop-icon { display: block; }
.ezai.is-busy .ezai-send .ezai-send-icon, .ezai.is-busy .ezai-spinner { display: none !important; }
.ezai.is-busy .ezai-box.is-locked .ezai-textarea { opacity: .7; }

.ezai .ezai-msg-ai.is-streaming .ezai-md > :last-child::after,
.ezai .ezai-msg-ai.is-streaming .ezai-md:empty::after {
  content: ""; display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -2px;
  border-radius: 2px; background: var(--ezai-primary); animation: ezai-caret .9s steps(2) infinite;
}
.ezai .ezai-msg-ai.is-streaming .ezai-md > .ezai-code:last-child::after,
.ezai .ezai-msg-ai.is-streaming .ezai-md > .ezai-table:last-child::after,
.ezai .ezai-msg-ai.is-streaming .ezai-md > ul:last-child::after,
.ezai .ezai-msg-ai.is-streaming .ezai-md > ol:last-child::after { display: none; }
.ezai .ezai-msg-ai.is-streaming .ezai-md > ul:last-child > li:last-child::after,
.ezai .ezai-msg-ai.is-streaming .ezai-md > ol:last-child > li:last-child::after {
  content: ""; display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -2px;
  border-radius: 2px; background: var(--ezai-primary); animation: ezai-caret .9s steps(2) infinite;
}
@keyframes ezai-caret { 0% { opacity: 1; } 100% { opacity: 0; } }

.ezai .ezai-user-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.ezai .ezai-msg-user { flex-direction: column; align-items: flex-end; }
.ezai .ezai-mini-btn.ezai-icon-only { width: 32px; padding: 0; justify-content: center; }
.ezai .ezai-msg-user .ezai-user-actions { opacity: .55; transition: opacity .15s; }
.ezai .ezai-msg-user:hover .ezai-user-actions { opacity: 1; }
@media (hover: none) { .ezai .ezai-msg-user .ezai-user-actions { opacity: 1; } }

.ezai .ezai-note-chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 10px;
  border-radius: 99px; background: #fff7ed; color: #c2410c; font-size: 12px; font-weight: 600;
}

.ezai .ezai-followups { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.ezai .ezai-follow {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  padding: 9px 14px 9px 11px; text-align: left;
  border: 1px solid var(--ezai-primary-line); border-radius: 14px;
  background: var(--ezai-primary-soft); color: var(--ezai-primary-dark);
  font-size: 14px; font-weight: 600; line-height: 1.35;
  transition: background .15s, transform .15s, box-shadow .15s;
  animation: ezai-in .3s ease both;
}
.ezai .ezai-follow:nth-child(2) { animation-delay: .06s; }
.ezai .ezai-follow:nth-child(3) { animation-delay: .12s; }
.ezai .ezai-follow svg { flex: 0 0 auto; opacity: .7; }
.ezai .ezai-follow:hover { background: #fff; box-shadow: var(--ezai-shadow-sm); transform: translateX(2px); }
@media (max-width: 640px) {
  .ezai .ezai-follow { width: 100%; font-size: 14.5px; padding: 11px 14px 11px 12px; }
}

/* ---------- Tables: <br> inside cells, stacked cards on phones ---------- */
@media (max-width: 640px) {
  .ezai .ezai-table.ezai-table-stack { overflow: visible; border: 0; box-shadow: none; background: transparent; }
  .ezai .ezai-table-stack table { min-width: 0 !important; background: transparent; }
  .ezai .ezai-table-stack thead { display: none; }
  .ezai .ezai-table-stack table, .ezai .ezai-table-stack tbody, .ezai .ezai-table-stack tr, .ezai .ezai-table-stack td { display: block; width: 100%; }
  .ezai .ezai-table-stack tr {
    margin: 0 0 12px; padding: 4px 14px;
    border: 1px solid var(--ezai-line); border-radius: 16px; background: #fff;
    box-shadow: var(--ezai-shadow-sm);
  }
  .ezai .ezai-table-stack tbody tr:hover td { background: transparent; }
  .ezai .ezai-table-stack td {
    padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid #eef1f5 !important;
    text-align: left !important; font-size: 15px; line-height: 1.55;
  }
  .ezai .ezai-table-stack td:last-child { border-bottom: 0 !important; }
  .ezai .ezai-table-stack td::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ezai-muted);
  }
  .ezai .ezai-table-stack td:first-child { font-size: 16.5px; font-weight: 700; color: var(--ezai-text); }
  .ezai .ezai-table-stack td:first-child::before { display: none; }
}