/* ═══════════════════════════════════════════════════════════════
   MAITRAYI — Premium conversational UI
   cRyPtO sMaRt
   ═══════════════════════════════════════════════════════════════
   Isolated stylesheet. Remove <link href="/css/maitrayi.css"> to
   revert cleanly. Reuses brand tokens (--gold*, --bg*) from
   /css/style.css. Falls back gracefully without them.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --mt-gold:      var(--gold, #c9a84c);
  --mt-gold-v:    var(--gold-vivid, #d4af37);
  --mt-gold-l:    var(--gold-light, #e8d48b);
  --mt-gold-p:    var(--gold-pale, #f5e6b8);
  --mt-gold-d:    var(--gold-dark, #a08030);
  --mt-glow:      rgba(212,175,55,.45);
  --mt-glow-soft: rgba(212,175,55,.18);

  --mt-ink-0: #050302;
  --mt-ink-1: #0c0905;
  --mt-ink-2: #14100a;
  --mt-ink-3: #1d1810;

  --mt-maroon: #2a0a0a;
  --mt-saffron:#e9852a;
  --mt-lotus:  #fff8e7;

  --mt-chip-bg:   rgba(32,24,12,.75);
  --mt-bubble-me: linear-gradient(145deg, rgba(42,10,10,.92) 0%, rgba(58,14,18,.92) 100%);
  --mt-bubble-her:linear-gradient(145deg, rgba(201,168,76,.08) 0%, rgba(212,175,55,.02) 100%);

  --mt-shadow-deep: 0 30px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(212,175,55,.12) inset, 0 0 40px rgba(212,175,55,.08) inset;
  --mt-shadow-pop:  0 20px 50px rgba(0,0,0,.6);
  --mt-radius-xl: 24px;
  --mt-radius-lg: 18px;
  --mt-radius-md: 12px;
  --mt-radius-sm: 8px;

  --mt-t0: #f5e6b8;
  --mt-t1: #e6d79b;
  --mt-t2: #c4b48a;
  --mt-t3: #8a7b5a;
  --mt-t4: #5a4f3a;

  --mt-panel-w: 420px;
  --mt-panel-h: 660px;
  --mt-z: 99997;
}

/* ═══════════════════════════════════════════════════════════════
   PILL  —  the resting avatar in the bottom-left. Upgraded from
   the original phase3 mentor pill so it can now be a button that
   opens the full panel instead of a link to Telegram.
   ═══════════════════════════════════════════════════════════════ */

.mt-pill{
  position:fixed; bottom:120px; left:24px; z-index:var(--mt-z);
  display:flex; align-items:center;
  font-family:'Outfit',sans-serif;
  background:none; border:none; padding:0; cursor:pointer;
  text-decoration:none;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s;
  -webkit-tap-highlight-color:transparent;
}
.mt-pill:hover{ transform:translateY(-3px); }
.mt-pill.mt-hidden{ opacity:0; pointer-events:none; transform:scale(.9) translateY(10px); }

.mt-pill-label{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  background:linear-gradient(135deg,#0f0c04 0%,#1a1406 50%,#0f0c04 100%);
  border:1.5px solid var(--mt-gold-d); border-right:none;
  padding:10px 38px 10px 16px; height:58px; border-radius:30px 0 0 30px;
  box-shadow:0 6px 22px rgba(0,0,0,.5), inset 0 0 12px rgba(212,175,55,.08);
  position:relative; min-width:86px;
}
.mt-pill-label::before{
  content:""; position:absolute; inset:0; border-radius:30px 0 0 30px;
  background:linear-gradient(135deg,rgba(212,175,55,.10),transparent 60%);
  pointer-events:none;
}
.mt-pill-ask{
  font-size:.48rem; letter-spacing:3px; font-weight:600; color:var(--mt-gold-d);
  text-transform:uppercase; line-height:1; margin-bottom:3px;
}
.mt-pill-name{
  font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700;
  line-height:1; letter-spacing:.5px;
  background:linear-gradient(135deg, #a08030 0%, #f5e6b8 25%, #d4af37 50%, #f5e6b8 75%, #a08030 100%);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation: mt-shimmer 7s linear infinite;
}
@keyframes mt-shimmer { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

.mt-pill-avatar{
  position:relative; width:76px; height:76px; border-radius:50%; margin-left:-24px;
  background:radial-gradient(circle at 30% 30%,rgba(245,230,184,.25),rgba(201,168,76,.1) 55%,rgba(10,8,2,.9) 90%);
  box-shadow:0 0 0 2px var(--mt-gold-d), 0 0 0 4px #0a0800,
             0 0 24px rgba(212,175,55,.4), 0 6px 20px rgba(0,0,0,.6);
  overflow:hidden; flex-shrink:0; z-index:2;
  animation: mt-breathe 5s ease-in-out infinite;
}
.mt-pill:hover .mt-pill-avatar{
  box-shadow:0 0 0 2px var(--mt-gold), 0 0 0 4px #0a0800,
             0 0 32px rgba(212,175,55,.65), 0 6px 24px rgba(0,0,0,.6);
}
.mt-pill-avatar img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block;
}
.mt-pill-avatar::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 70%, rgba(212,175,55,.55) 82%,
             rgba(245,230,184,.7) 88%, rgba(212,175,55,.55) 94%, transparent 100%);
  animation: mt-halo 10s linear infinite; pointer-events:none; z-index:-1; filter:blur(2px);
}
.mt-pill-status{
  position:absolute; bottom:4px; right:4px; width:12px; height:12px; border-radius:50%;
  background:#2ecc71; border:2px solid #050505;
  box-shadow:0 0 8px rgba(46,204,113,.7);
  animation: mt-pulse 2.5s ease-in-out infinite; z-index:3;
}
.mt-pill-close{
  position:absolute; top:-4px; right:-4px; width:22px; height:22px; border-radius:50%;
  background:#0a0800; border:1.5px solid var(--mt-gold-d); color:var(--mt-gold);
  font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  line-height:1; z-index:4; transition:all .3s ease; padding:0; font-family:inherit;
}
.mt-pill-close:hover{ color:var(--mt-gold-p); border-color:var(--mt-gold); background:#1a1406; transform:scale(1.1); }

.mt-pill.mt-pulse .mt-pill-avatar{ animation: mt-breathe 5s ease-in-out infinite, mt-attention 1.4s ease; }
@keyframes mt-attention { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes mt-breathe   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }
@keyframes mt-halo      { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes mt-pulse     { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.7} }

/* ═══════════════════════════════════════════════════════════════
   BACKDROP  —  soft dim behind the panel so focus is on Maitrayi
   ═══════════════════════════════════════════════════════════════ */

.mt-backdrop{
  position:fixed; inset:0; z-index: calc(var(--mt-z) - 1);
  background:radial-gradient(ellipse at 20% 80%, rgba(42,10,10,.35) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mt-backdrop.mt-open{ opacity:1; pointer-events:auto; }

/* ═══════════════════════════════════════════════════════════════
   PANEL  —  the main chat surface. Morphs out of the pill.
   ═══════════════════════════════════════════════════════════════ */

.mt-panel{
  position:fixed; bottom:110px; left:24px; z-index:var(--mt-z);
  width:var(--mt-panel-w); height:var(--mt-panel-h); max-height:calc(100vh - 140px);
  background:
    radial-gradient(ellipse at top left, rgba(201,168,76,.10) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(42,10,10,.55) 0%, transparent 65%),
    linear-gradient(165deg, #0c0906 0%, #0a0705 45%, #0c0906 100%);
  border-radius:var(--mt-radius-xl);
  border:1px solid rgba(212,175,55,.22);
  box-shadow:var(--mt-shadow-deep);
  overflow:hidden;
  display:flex; flex-direction:column;
  font-family:'Outfit',sans-serif;
  color:var(--mt-t1);
  transform-origin:bottom left;
  transform:scale(.3) translateY(20px); opacity:0; pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.9,.25,1.05), opacity .35s ease;
}
.mt-panel.mt-open{
  transform:scale(1) translateY(0); opacity:1; pointer-events:auto;
}

/* Subtle ॐ watermark bleeding through the whole panel */
.mt-panel::before{
  content:"ॐ"; position:absolute; right:-30px; top:30%;
  font-family:'Playfair Display',serif; font-size:300px; line-height:1;
  color:rgba(212,175,55,.022); pointer-events:none; user-select:none;
  transform:rotate(-8deg); z-index:0;
}

/* ═══════════════════════════════════════════════════════════════
   HERO  —  her portrait, name, status line
   ═══════════════════════════════════════════════════════════════ */

.mt-hero{
  position:relative; padding:18px 18px 14px;
  display:flex; align-items:center; gap:14px;
  border-bottom:1px solid rgba(212,175,55,.12);
  background:linear-gradient(180deg, rgba(201,168,76,.05), transparent);
  z-index:2;
}

.mt-hero-portrait{
  position:relative; width:62px; height:62px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 30% 30%,rgba(245,230,184,.3),rgba(201,168,76,.12) 55%,rgba(10,8,2,.95) 90%);
  box-shadow:0 0 0 2px var(--mt-gold-d), 0 0 0 4px #0a0800, 0 0 22px rgba(212,175,55,.35);
  overflow:visible;
}
.mt-hero-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  border-radius:50%; display:block; position:relative; z-index:2;
}
/* chakra ring behind portrait */
.mt-hero-portrait::before{
  content:""; position:absolute; inset:-12px; border-radius:50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,   rgba(212,175,55,.5) 28deg,  transparent 56deg,
      transparent 90deg,  rgba(212,175,55,.5) 118deg, transparent 146deg,
      transparent 180deg, rgba(212,175,55,.5) 208deg, transparent 236deg,
      transparent 270deg, rgba(212,175,55,.5) 298deg, transparent 326deg);
  animation: mt-chakra 24s linear infinite;
  z-index:1; pointer-events:none; filter:blur(.5px);
  mask:radial-gradient(circle, transparent 54%, #000 56%, #000 68%, transparent 70%);
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 56%, #000 68%, transparent 70%);
}
/* soft gold halo behind the ring — brightens during speech */
.mt-hero-portrait::after{
  content:""; position:absolute; inset:-22px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,55,.22) 0%, transparent 70%);
  animation: mt-halo-pulse 5s ease-in-out infinite;
  pointer-events:none; z-index:0;
}
@keyframes mt-chakra      { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes mt-halo-pulse  { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.9;transform:scale(1.05)} }

/* Speaking-mode overrides */
.mt-panel.mt-speaking .mt-hero-portrait{
  animation: mt-portrait-breath 1.6s ease-in-out infinite;
}
.mt-panel.mt-speaking .mt-hero-portrait::before{ animation-duration:6s; filter:blur(0); }
.mt-panel.mt-speaking .mt-hero-portrait::after{
  animation: mt-halo-pulse-fast 1.2s ease-in-out infinite;
  background:radial-gradient(circle, rgba(233,133,42,.38) 0%, rgba(212,175,55,.2) 40%, transparent 75%);
}
@keyframes mt-portrait-breath  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes mt-halo-pulse-fast  { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }

.mt-hero-name-row{ flex:1; min-width:0; }
.mt-hero-name{
  font-family:'Playfair Display',serif; font-size:1.18rem; font-weight:700;
  background:linear-gradient(135deg, #a08030 0%, #f5e6b8 25%, #d4af37 50%, #f5e6b8 75%, #a08030 100%);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation: mt-shimmer 7s linear infinite;
  letter-spacing:.5px; line-height:1.1; margin-bottom:2px;
}
.mt-hero-sub{
  font-size:.65rem; color:var(--mt-t3); letter-spacing:2px; text-transform:uppercase;
  font-weight:500;
}
.mt-hero-status{
  font-size:.78rem; color:var(--mt-t2); margin-top:6px; min-height:1em;
  font-style:italic;
}
.mt-hero-status .mt-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#2ecc71; box-shadow:0 0 6px #2ecc71;
  margin-right:6px; vertical-align:middle;
  animation: mt-pulse 2s ease-in-out infinite;
}
.mt-panel.mt-listening .mt-hero-status .mt-dot{ background:#e9852a; box-shadow:0 0 8px #e9852a; }
.mt-panel.mt-speaking  .mt-hero-status .mt-dot{ background:#d4af37; box-shadow:0 0 8px #d4af37; }

.mt-hero-close{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(212,175,55,.3);
  background:rgba(0,0,0,.4); color:var(--mt-gold); font-size:16px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .25s ease; flex-shrink:0;
}
.mt-hero-close:hover{ background:rgba(212,175,55,.12); border-color:var(--mt-gold); transform:rotate(90deg); }

/* ═══════════════════════════════════════════════════════════════
   SPEAKING RINGS  —  concentric gold waves emanating from portrait
   when each word is spoken (driven by Utterance boundary events)
   ═══════════════════════════════════════════════════════════════ */
.mt-ring-container{
  position:absolute; top:18px; left:18px; width:62px; height:62px;
  pointer-events:none; z-index:3;
}
.mt-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(212,175,55,.65);
  animation: mt-ring-expand 1.4s ease-out forwards;
  pointer-events:none;
}
@keyframes mt-ring-expand {
  0%   { transform:scale(.95); opacity:0.9; border-width:2px; }
  60%  { opacity:.5; }
  100% { transform:scale(3.2); opacity:0; border-width:0.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   PARTICLES  —  gold motes drifting upward from her during speech
   (created by JS, styled here)
   ═══════════════════════════════════════════════════════════════ */
.mt-particle{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, #f5e6b8 0%, rgba(212,175,55,.7) 45%, transparent 80%);
  pointer-events:none; z-index:3;
  animation: mt-float 2.8s ease-out forwards;
}
@keyframes mt-float {
  0%   { opacity:0; transform:translate(0,0) scale(.6); }
  20%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--dx,0), var(--dy,-80px)) scale(.2); }
}

/* ═══════════════════════════════════════════════════════════════
   COMMAND BAR  —  quick actions row under the hero
   ═══════════════════════════════════════════════════════════════ */
.mt-cmd-bar{
  display:flex; gap:6px; padding:10px 14px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid rgba(212,175,55,.1);
  background:rgba(0,0,0,.25);
  z-index:2;
}
.mt-cmd-bar::-webkit-scrollbar{ display:none; }
.mt-cmd-btn{
  flex-shrink:0; font-family:'Outfit',sans-serif; font-size:.72rem; font-weight:500;
  color:var(--mt-t2); background:var(--mt-chip-bg);
  border:1px solid rgba(212,175,55,.18); border-radius:14px;
  padding:6px 12px; cursor:pointer;
  transition:all .25s ease; letter-spacing:.3px;
  display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.mt-cmd-btn:hover{
  color:var(--mt-gold-p); border-color:var(--mt-gold);
  background:rgba(212,175,55,.1); transform:translateY(-1px);
}
.mt-cmd-btn-badge{
  background:var(--mt-gold); color:#0a0800; font-weight:700; font-size:.6rem;
  padding:1px 6px; border-radius:10px; margin-left:2px;
}

/* ═══════════════════════════════════════════════════════════════
   CHAT SCROLL  —  the conversation area
   ═══════════════════════════════════════════════════════════════ */
.mt-chat{
  flex:1; overflow-y:auto; padding:16px 16px 8px;
  scroll-behavior:smooth; z-index:2;
  scrollbar-width:thin; scrollbar-color:var(--mt-gold-d) transparent;
}
.mt-chat::-webkit-scrollbar{ width:6px; }
.mt-chat::-webkit-scrollbar-track{ background:transparent; }
.mt-chat::-webkit-scrollbar-thumb{ background:var(--mt-gold-d); border-radius:3px; }

.mt-msg{
  display:flex; margin-bottom:12px; gap:8px;
  animation: mt-msg-in .45s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes mt-msg-in { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.mt-msg-her{ justify-content:flex-start; }
.mt-msg-me { justify-content:flex-end; }

.mt-msg-av{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 30% 30%,rgba(245,230,184,.25),rgba(10,8,2,.95) 85%);
  box-shadow:0 0 0 1px var(--mt-gold-d), 0 0 8px rgba(212,175,55,.3);
  overflow:hidden; margin-top:2px;
  animation: mt-breathe 5s ease-in-out infinite;
}
.mt-msg-av img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }

.mt-msg-bubble{
  max-width:calc(100% - 44px);
  padding:10px 14px; border-radius:var(--mt-radius-lg); font-size:.88rem; line-height:1.5;
  word-wrap:break-word; position:relative;
}
.mt-msg-her .mt-msg-bubble{
  background:var(--mt-bubble-her);
  border:1px solid rgba(212,175,55,.18);
  color:var(--mt-t0); border-top-left-radius:4px;
  box-shadow:0 2px 12px rgba(0,0,0,.3), inset 0 0 0 1px rgba(212,175,55,.04);
}
.mt-msg-me .mt-msg-bubble{
  background:var(--mt-bubble-me);
  border:1px solid rgba(212,175,55,.1);
  color:var(--mt-lotus); border-top-right-radius:4px;
}
.mt-msg-bubble strong{ color:var(--mt-gold-p); font-weight:600; }
.mt-msg-bubble em{ color:var(--mt-gold-l); font-style:italic; }
.mt-msg-bubble a{ color:var(--mt-gold); text-decoration:underline; text-underline-offset:3px; }

/* word-by-word materialization (mirrors Gurukul) */
.mt-word{
  display:inline-block; opacity:0;
  animation: mt-word-in .28s ease forwards;
  text-shadow:0 0 8px rgba(212,175,55,.25);
}
@keyframes mt-word-in { from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:translateY(0);} }

/* timestamp */
.mt-msg-time{
  font-size:.58rem; color:var(--mt-t4); margin-top:4px; letter-spacing:1px;
  text-transform:uppercase; display:block;
}

/* typing indicator (three dots) */
.mt-typing{
  display:inline-flex; gap:4px; padding:6px 0;
}
.mt-typing span{
  width:7px; height:7px; border-radius:50%; background:var(--mt-gold);
  animation: mt-type 1.2s ease-in-out infinite;
}
.mt-typing span:nth-child(2){ animation-delay:.15s; }
.mt-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes mt-type { 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)} }

/* inline action pill (when Maitrayi executes a command) */
.mt-action-pill{
  display:inline-block; margin-top:6px; padding:5px 11px;
  border-radius:12px; background:rgba(233,133,42,.14);
  border:1px solid rgba(233,133,42,.35); color:#f5c290;
  font-size:.7rem; letter-spacing:.8px; text-transform:uppercase; font-weight:600;
}

/* ═══════════════════════════════════════════════════════════════
   PALETTE  —  categories → subcategories → questions (browse UI)
   ═══════════════════════════════════════════════════════════════ */
.mt-palette{
  padding:10px 14px; border-top:1px solid rgba(212,175,55,.1);
  background:linear-gradient(0deg, rgba(0,0,0,.45), transparent);
  z-index:2;
}
.mt-palette-title{
  font-size:.6rem; letter-spacing:2.5px; color:var(--mt-t3);
  text-transform:uppercase; font-weight:600; margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between;
}
.mt-palette-title .mt-pal-back{
  font-size:.64rem; color:var(--mt-gold); cursor:pointer;
  padding:2px 8px; border:1px solid rgba(212,175,55,.25); border-radius:10px;
  transition:all .2s;
}
.mt-palette-title .mt-pal-back:hover{ background:rgba(212,175,55,.1); }
.mt-palette-chips{
  display:flex; flex-wrap:wrap; gap:6px; max-height:100px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--mt-gold-d) transparent;
}
.mt-palette-chips::-webkit-scrollbar{ width:4px; }
.mt-palette-chips::-webkit-scrollbar-thumb{ background:var(--mt-gold-d); border-radius:2px; }

.mt-chip{
  font-family:'Outfit',sans-serif; font-size:.75rem; font-weight:500;
  color:var(--mt-t1); background:var(--mt-chip-bg);
  border:1px solid rgba(212,175,55,.2); border-radius:14px;
  padding:6px 12px; cursor:pointer;
  transition:all .25s ease; letter-spacing:.2px;
  animation: mt-chip-in .35s ease both;
}
.mt-chip:hover{
  color:var(--mt-gold-p); border-color:var(--mt-gold);
  background:rgba(212,175,55,.1);
}
.mt-chip-cat{
  padding:7px 13px; font-weight:600;
  background:linear-gradient(135deg, rgba(201,168,76,.12), rgba(42,10,10,.6));
}
@keyframes mt-chip-in { from{opacity:0; transform:translateY(6px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);} }

/* ═══════════════════════════════════════════════════════════════
   INPUT ROW  —  mic + text + send
   ═══════════════════════════════════════════════════════════════ */
.mt-input-row{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-top:1px solid rgba(212,175,55,.15);
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  z-index:2;
}

.mt-mic{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(145deg, #1a1406 0%, #0c0906 100%);
  border:1.5px solid var(--mt-gold-d); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--mt-gold); transition:all .3s ease;
  position:relative;
}
.mt-mic:hover{ border-color:var(--mt-gold); box-shadow:0 0 20px var(--mt-glow); }
.mt-mic svg{ width:22px; height:22px; }
.mt-mic.mt-rec{
  background:linear-gradient(145deg, #3a1008, #2a0a0a);
  border-color:#e9852a; color:#fff;
  animation: mt-rec-pulse 1.2s ease-in-out infinite;
}
.mt-mic.mt-rec::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid #e9852a; animation: mt-rec-ring 1.5s ease-out infinite;
}
@keyframes mt-rec-pulse { 0%,100%{box-shadow:0 0 12px rgba(233,133,42,.4)} 50%{box-shadow:0 0 26px rgba(233,133,42,.85)} }
@keyframes mt-rec-ring  { 0%{transform:scale(1); opacity:.9;} 100%{transform:scale(1.6); opacity:0;} }
.mt-mic.mt-disabled{ opacity:.4; cursor:not-allowed; }

.mt-input{
  flex:1; min-width:0;
  background:rgba(0,0,0,.55); border:1px solid rgba(212,175,55,.2);
  color:var(--mt-t0); font-family:'Outfit',sans-serif; font-size:.9rem;
  padding:12px 14px; border-radius:var(--mt-radius-md); outline:none;
  transition:border-color .2s, background .2s;
}
.mt-input:focus{ border-color:var(--mt-gold); background:rgba(0,0,0,.75); }
.mt-input::placeholder{ color:var(--mt-t4); font-style:italic; }

.mt-send{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(145deg, var(--mt-gold-d), var(--mt-gold-v));
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#0a0800; transition:all .25s;
  box-shadow:0 4px 14px rgba(212,175,55,.25);
}
.mt-send:hover{ transform:translateY(-2px); box-shadow:0 6px 22px rgba(212,175,55,.55); }
.mt-send:active{ transform:translateY(0); }
.mt-send svg{ width:18px; height:18px; }
.mt-send:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* live interim transcript (shows while user speaks) */
.mt-interim{
  position:absolute; left:12px; right:12px; bottom:72px;
  background:rgba(0,0,0,.9); border:1px solid rgba(233,133,42,.4);
  padding:8px 14px; border-radius:12px; font-size:.85rem; color:#f5c290;
  font-style:italic; z-index:10; pointer-events:none;
  opacity:0; transform:translateY(6px); transition:all .25s;
}
.mt-interim.mt-show{ opacity:1; transform:translateY(0); }

/* equalizer strip across the bottom edge while she speaks */
.mt-eq{
  position:absolute; left:0; right:0; bottom:0; height:4px;
  display:flex; gap:2px; padding:0 20%; pointer-events:none;
  opacity:0; transition:opacity .25s; z-index:5;
}
.mt-panel.mt-speaking .mt-eq{ opacity:1; }
.mt-eq-bar{
  flex:1; background:linear-gradient(0deg, var(--mt-gold-v), var(--mt-gold-p));
  border-radius:2px; transform-origin:bottom;
  transform:scaleY(.2);
  animation: mt-eq-dance 1s ease-in-out infinite;
}
@keyframes mt-eq-dance {
  0%,100%{ transform:scaleY(.2); }
  50%    { transform:scaleY(1); }
}
.mt-eq-bar:nth-child(1){  animation-delay:0s;    animation-duration:.9s; }
.mt-eq-bar:nth-child(2){  animation-delay:.1s;   animation-duration:1.1s; }
.mt-eq-bar:nth-child(3){  animation-delay:.25s;  animation-duration:.8s; }
.mt-eq-bar:nth-child(4){  animation-delay:.15s;  animation-duration:1.2s; }
.mt-eq-bar:nth-child(5){  animation-delay:.3s;   animation-duration:.95s; }
.mt-eq-bar:nth-child(6){  animation-delay:.05s;  animation-duration:1.05s; }
.mt-eq-bar:nth-child(7){  animation-delay:.2s;   animation-duration:.85s; }
.mt-eq-bar:nth-child(8){  animation-delay:.35s;  animation-duration:1.15s; }
.mt-eq-bar:nth-child(9){  animation-delay:.12s;  animation-duration:.92s; }
.mt-eq-bar:nth-child(10){ animation-delay:.28s;  animation-duration:1.08s; }
.mt-eq-bar:nth-child(11){ animation-delay:.18s;  animation-duration:.88s; }
.mt-eq-bar:nth-child(12){ animation-delay:.33s;  animation-duration:1.0s; }

/* ═══════════════════════════════════════════════════════════════
   TOAST  —  small gold notification (e.g. "coupon applied")
   ═══════════════════════════════════════════════════════════════ */
.mt-toast{
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(40px);
  background:linear-gradient(135deg, #1a1406, #0c0906);
  border:1px solid var(--mt-gold); color:var(--mt-gold-p);
  padding:10px 22px; border-radius:24px; font-size:.8rem; letter-spacing:.6px;
  box-shadow:0 10px 40px rgba(212,175,55,.35);
  opacity:0; pointer-events:none; z-index:calc(var(--mt-z) + 10);
  transition:all .4s cubic-bezier(.2,.9,.25,1.05);
  font-family:'Outfit',sans-serif;
}
.mt-toast.mt-show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   FIRST-OPEN GREETING  —  lotus bloom intro overlay
   ═══════════════════════════════════════════════════════════════ */
.mt-bloom{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  display:flex; align-items:center; justify-content:center;
}
.mt-bloom-petal{
  position:absolute; width:140px; height:140px;
  background:radial-gradient(ellipse, rgba(233,133,42,.55) 0%, rgba(212,175,55,.2) 45%, transparent 75%);
  border-radius:50%; filter:blur(18px);
  opacity:0;
  animation: mt-bloom-open 1.4s ease-out forwards;
}
@keyframes mt-bloom-open {
  0%   { opacity:0; transform:scale(.2); }
  40%  { opacity:.9; transform:scale(1); }
  100% { opacity:0; transform:scale(2.2); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  —  mobile full-sheet takeover
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .mt-pill{ bottom:90px; left:14px; }
  .mt-pill-label{ padding:8px 32px 8px 14px; height:50px; min-width:76px; }
  .mt-pill-ask{ font-size:.42rem; letter-spacing:2.5px; }
  .mt-pill-name{ font-size:.95rem; }
  .mt-pill-avatar{ width:64px; height:64px; margin-left:-20px; }
  .mt-pill-close{ width:20px; height:20px; font-size:10px; }

  .mt-panel{
    left:10px; right:10px; bottom:80px; top:10px;
    width:auto; height:auto; max-height:none;
    border-radius:var(--mt-radius-lg);
    transform-origin:bottom left;
  }
  .mt-hero{ padding:14px 14px 10px; gap:10px; }
  .mt-hero-portrait{ width:54px; height:54px; }
  .mt-hero-name{ font-size:1.02rem; }
  .mt-hero-status{ font-size:.72rem; }
  .mt-cmd-bar{ padding:8px 10px; }
  .mt-cmd-btn{ font-size:.68rem; padding:5px 10px; }
  .mt-chat{ padding:12px 12px 6px; }
  .mt-msg-bubble{ font-size:.85rem; padding:9px 12px; }
  .mt-palette-chips{ max-height:80px; }
  .mt-chip{ font-size:.7rem; padding:5px 10px; }
  .mt-input-row{ padding:8px 10px; gap:6px; }
  .mt-mic{ width:52px; height:52px; }    /* bigger thumb target */
  .mt-mic svg{ width:24px; height:24px; }
  .mt-input{ padding:11px 12px; font-size:.9rem; }
  .mt-send{ width:46px; height:46px; }
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME overrides (follows site's .theme-light if set)
   ═══════════════════════════════════════════════════════════════ */
.theme-light .mt-panel{
  background:
    radial-gradient(ellipse at top left, rgba(201,168,76,.10) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(42,10,10,.08) 0%, transparent 65%),
    linear-gradient(165deg, #fff8e7 0%, #fdf3d8 100%);
  color:#2a2007; border-color:rgba(160,128,48,.3);
  box-shadow:0 30px 80px rgba(42,10,10,.18), 0 0 0 1px rgba(212,175,55,.18) inset;
}
.theme-light .mt-hero{ border-bottom-color:rgba(160,128,48,.18); }
.theme-light .mt-msg-her .mt-msg-bubble{
  background:rgba(255,255,255,.75); border-color:rgba(160,128,48,.2); color:#2a2007;
}
.theme-light .mt-msg-me .mt-msg-bubble{
  background:linear-gradient(145deg, #2a0a0a 0%, #3a0e10 100%); color:#fff8e7;
}
.theme-light .mt-chip, .theme-light .mt-cmd-btn{
  background:rgba(255,255,255,.7); color:#3a2e10; border-color:rgba(160,128,48,.25);
}
.theme-light .mt-input{ background:rgba(255,255,255,.8); color:#2a2007; border-color:rgba(160,128,48,.25); }

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — honour user preference
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .mt-pill-avatar, .mt-hero-portrait, .mt-msg-av,
  .mt-hero-portrait::before, .mt-hero-portrait::after,
  .mt-eq-bar, .mt-ring, .mt-particle, .mt-pill-name, .mt-hero-name{
    animation:none !important;
  }
  .mt-panel{ transition:opacity .2s ease; transform:scale(1); }
}