/* Astra Anywhere: compact presence bar, with native dialog for optional enlargement. */
.astra-avatar-dock {
  display:flex; flex:none; align-items:center; justify-content:center;
  min-height:94px; padding:9px 20px; gap:16px;
  background:radial-gradient(ellipse at 50% 50%,rgba(239,45,117,.045),transparent 55%),#0F121A;
  border-bottom:1px solid rgba(139,153,187,.16);
}
.astra-avatar {
  --astra-glow:rgba(239,45,117,.45);
  --astra-tone:#EF2D75;
  --astra-size:76px;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:14px; flex:none; max-width:100%; color:#f2ebf4;
}
.astra-avatar[data-state="listening"] { --astra-glow:rgba(7,155,105,.48); --astra-tone:#079B69; }
.astra-avatar[data-state="thinking"] { --astra-glow:rgba(76,111,255,.52); --astra-tone:#4C6FFF; }
.astra-avatar[data-state="speaking"] { --astra-glow:rgba(239,45,117,.78); --astra-tone:#EF2D75; }
.astra-avatar-stage {
  isolation:isolate; position:relative; overflow:hidden; flex:none;
  width:var(--astra-size); height:var(--astra-size);
  border:2px solid var(--astra-tone); border-radius:50%; background:#0F121A;
  box-shadow:0 0 0 4px rgba(255,255,255,.025),0 0 18px 2px var(--astra-glow);
  transition:border-color .3s,box-shadow .3s;
}
.astra-avatar-poster,.astra-avatar-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 24%; border-radius:inherit;
}
.astra-avatar-poster { z-index:0; animation:astra-breathe 6s ease-in-out infinite; }
.astra-avatar-video { z-index:1; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.astra-avatar-video-active .astra-avatar-video { opacity:1; }
.astra-avatar-ring,.astra-avatar-scan { position:absolute; pointer-events:none; }
.astra-avatar-ring { z-index:3; inset:4px; border:2px dashed transparent; border-radius:50%; }
.astra-avatar-scan {
  z-index:2; inset:0; opacity:0;
  background:linear-gradient(transparent 0 38%,rgba(76,111,255,.18) 49%,rgba(154,181,255,.28) 50%,transparent 53%);
}
.astra-avatar[data-state="thinking"] .astra-avatar-ring { border-color:rgba(142,161,255,.92); animation:astra-orbit 7s linear infinite; }
.astra-avatar[data-state="thinking"] .astra-avatar-scan { opacity:1; animation:astra-scan 3.7s ease-in-out infinite; }
.astra-avatar[data-state="speaking"] .astra-avatar-stage { animation:astra-pulse 2.1s ease-in-out infinite; }
.astra-avatar-status {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:29px; min-width:106px; padding:5px 12px;
  border:1px solid var(--astra-glow); border-radius:999px;
  background:#181b2a; color:#f0eaf5;
  font-family:inherit; font-size:12px; font-weight:650; letter-spacing:.01em;
}
.astra-avatar-status::before {
  content:""; display:block; width:7px; height:7px; flex:none;
  border-radius:50%; background:var(--astra-tone);
  box-shadow:0 0 9px var(--astra-glow);
}
.astra-avatar-expand,.astra-avatar-close {
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(143,153,184,.32); border-radius:10px;
  background:rgba(34,41,62,.65); color:#dee2ed;
  cursor:pointer; font:inherit;
}
.astra-avatar-expand { width:38px; height:38px; padding:0; font-size:22px; }
.astra-avatar-expand:hover,.astra-avatar-expand:focus-visible,
.astra-avatar-close:hover,.astra-avatar-close:focus-visible {
  border-color:#EF2D75; background:rgba(239,45,117,.14); outline-offset:3px;
}
.astra-avatar-dialog {
  position:fixed; inset:0; box-sizing:border-box; margin:auto;
  width:min(390px,calc(100vw - 24px)); max-height:calc(100dvh - 24px);
  padding:16px 18px 24px; border:1px solid rgba(239,45,117,.45);
  border-radius:20px; background:#0F121A; color:#f3f0f5;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
}
.astra-avatar-dialog::backdrop { background:rgba(1,3,10,.74); backdrop-filter:blur(3px); }
.astra-avatar-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.astra-avatar-dialog-header strong { font-size:16px; }
.astra-avatar-close { min-height:36px; padding:6px 12px; font-size:13px; }
.astra-avatar-expanded-mount { display:flex; align-items:center; justify-content:center; min-height:260px; }
.astra-avatar-expanded-mount .astra-avatar { flex-direction:column; gap:18px; }
.astra-avatar-expanded-mount .astra-avatar-status { font-size:13px; }
@keyframes astra-breathe { 50% { transform:scale(1.035); } }
@keyframes astra-orbit { to { transform:rotate(360deg); } }
@keyframes astra-scan { 0%,100% { transform:translateY(-60%); } 50% { transform:translateY(60%); } }
@keyframes astra-pulse { 50% { box-shadow:0 0 0 4px rgba(255,255,255,.025),0 0 28px 5px var(--astra-glow); } }
@media(max-width:760px){
  .astra-avatar-dock { justify-content:flex-start; min-height:73px; padding:7px 16px; gap:12px; }
  .astra-avatar { --astra-size:56px!important; gap:12px; }
  .astra-avatar-status { min-width:98px; min-height:26px; padding:4px 9px; font-size:11px; }
  .astra-avatar-expand { width:34px; height:34px; font-size:19px; }
  .astra-avatar-expanded-mount .astra-avatar { --astra-size:200px!important; }
}
@media(max-width:760px) and (max-height:560px){
  .keyboard-open .astra-avatar-dock { display:none; }
}
@media(prefers-reduced-motion:reduce){
  .astra-avatar-stage,.astra-avatar-poster,.astra-avatar-video,.astra-avatar-ring,.astra-avatar-scan {
    animation:none!important; transition:none!important;
  }
}

/* Portrait edition: 1024px fallback is the visual source of truth at rest. */
.sidebar-top .astra-avatar-dock,
.mobile-menu-panel .astra-avatar-dock {
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; width:100%; min-width:0; min-height:0;
  gap:8px; padding:10px 4px 4px; margin:0;
  border:0; background:transparent;
}
.sidebar-top .astra-avatar,.mobile-menu-panel .astra-avatar {
  --astra-size:228px;
  flex-direction:column; align-items:center; gap:10px;
  max-width:100%;
}
.sidebar-top .astra-avatar-stage,
.mobile-menu-panel .astra-avatar-stage {
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(239,45,117,.19),0 8px 34px rgba(0,0,0,.42),0 0 22px 1px var(--astra-glow);
}
.sidebar-top .astra-avatar-stage::after,
.mobile-menu-panel .astra-avatar-stage::after {
  content:""; position:absolute; z-index:4; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 -26px 32px rgba(8,11,24,.2);
}
.sidebar-top .astra-avatar-ring,.mobile-menu-panel .astra-avatar-ring {
  border-radius:17px;
}
.sidebar-top .astra-avatar-status,.mobile-menu-panel .astra-avatar-status {
  min-height:29px; min-width:122px;
  font-family:inherit; font-size:12px;
}
.sidebar-top .astra-avatar-expand,.mobile-menu-panel .astra-avatar-expand {
  position:absolute; top:16px; right:10px; z-index:5;
  width:32px; height:32px; font-size:19px;
  background:rgba(15,18,26,.84);
  backdrop-filter:blur(6px);
}
.astra-avatar-expanded-mount .astra-avatar-stage {border-radius:20px}
.astra-avatar-expanded-mount .astra-avatar-ring {border-radius:17px}
/* The high-resolution poster remains visible while idle; video starts when
   Astra is speaking, avoiding a soft 360p loop on the main portrait. */
@media (max-width:760px) {
  #appView .sidebar-top > .astra-avatar-dock { display:none; }
  #appView .mobile-menu-panel > .astra-avatar-dock {
    flex:0 0 auto; width:100%; padding:12px 15px 8px;
    border-bottom:1px solid rgba(143,135,193,.20);
    overflow:visible;
  }
  #appView .mobile-menu-panel .astra-avatar {
    --astra-size:190px!important; gap:8px;
  }
  #appView .mobile-menu-panel .astra-avatar-expand {right:21px;top:16px}
}
@media (max-width:380px) {
  #appView .mobile-menu-panel .astra-avatar { --astra-size:154px!important; }
}

/* Persistent, single-image Astra presence in compact PWA header.
   The full animated portrait remains a single instance inside the drawer. */
.astra-mobile-presence { display:none; }
@media (max-width:760px) {
  #appView .brand-row > .brand-mark.small { display:none; }
  #appView .brand-row .astra-mobile-presence {
    --presence-tone:#EF2D75;
    display:inline-flex; align-items:center; gap:10px; min-width:0;
    margin:0; padding:0 7px 0 0; min-height:48px;
    color:#f6f1fb; background:transparent; border:0; border-radius:12px;
    text-align:left; cursor:pointer;
  }
  #appView .astra-mobile-presence img {
    flex:none; display:block; width:44px; height:44px;
    border:2px solid var(--presence-tone); border-radius:13px;
    object-fit:cover; object-position:50% 24%; background:#101322;
    box-shadow:0 0 14px rgba(239,45,117,.20);
  }
  #appView .astra-mobile-presence-copy {
    display:flex; min-width:0; flex-direction:column; gap:3px;
  }
  #appView .astra-mobile-presence-copy strong {
    display:block; font-size:14px; font-weight:750; line-height:1.1;
  }
  #appView .astra-mobile-presence-copy small {
    display:block; color:#b6bcd2; font-size:11px; line-height:1.2;
    max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  #appView .astra-mobile-presence[data-state="listening"] { --presence-tone:#079B69; }
  #appView .astra-mobile-presence[data-state="thinking"] { --presence-tone:#4C6FFF; }
  #appView .astra-mobile-presence[data-state="speaking"] { --presence-tone:#EF2D75; }
  #appView .astra-mobile-presence:focus-visible {
    outline:2px solid #EF2D75; outline-offset:2px;
  }
}
@media (max-width:360px) {
  #appView .brand-row .astra-mobile-presence {gap:7px}
  #appView .astra-mobile-presence-copy small {font-size:10px}
}