/* STAGE-04.2.7.1 — Unified Floating Assistant + Prayer Control Authority
   Goal: one premium Malath-owned control group on the physical RIGHT edge while
   the official Saudi Business Center widget keeps the physical LEFT edge.
   Desktop controls share one width/height/radius rhythm; mobile collapses to a
   compact icon-only vertical stack with safe-area protection. Provider-owned
   government markup is never selected, moved or restyled here. */
:root{
  --malath-float-size:56px;
  --malath-float-inner-size:44px;
  --malath-float-radius:18px;
  --malath-float-inner-radius:14px;
  --malath-float-inline-gap:14px;
  --malath-float-bottom-gap:14px;
  --malath-float-stack-gap:9px;
  --malath-float-desktop-width:184px;
  --malath-float-desktop-height:58px;
  --malath-float-shadow:0 16px 38px rgba(3,39,84,.18);
  --malath-float-shadow-hover:0 20px 44px rgba(3,39,84,.24);
}

/* Shared desktop rhythm — assistant is the primary teal control, prayer/audio is
   the supporting light prayer control directly above it. Both remain physically right
   in Arabic and English so the official verification seal owns the left edge. */
@media (min-width:721px){
  .site-audio-dock,
  .malath-ai{
    width:var(--malath-float-desktop-width);
    max-width:var(--malath-float-desktop-width);
    box-sizing:border-box;
  }
  .site-audio-dock{
    inset:auto calc(18px + env(safe-area-inset-right)) calc(18px + var(--malath-float-desktop-height) + var(--malath-float-stack-gap) + env(safe-area-inset-bottom)) auto;
    min-height:var(--malath-float-desktop-height);
    border-radius:var(--malath-float-radius);
    box-shadow:var(--malath-float-shadow);
  }
  .malath-ai{
    inset:auto calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) auto;
  }
  .malath-ai-launcher,
  .site-audio-toggle{
    width:100%;
    min-width:100%;
    max-width:100%;
    min-height:var(--malath-float-desktop-height);
    border-radius:var(--malath-float-radius);
    box-sizing:border-box;
  }
  .malath-ai-launcher{
    justify-content:flex-start;
    box-shadow:var(--malath-float-shadow);
  }
  .site-audio-toggle{justify-content:flex-start;}
  .site-audio-copy,
  .malath-ai-launcher-copy{min-width:0;flex:1;}
  .site-audio-copy b,
  .malath-ai-launcher-copy b{font-size:13.5px;line-height:1.15;}
  .site-audio-copy small,
  .malath-ai-launcher-copy small{font-size:9.5px;line-height:1.25;margin-top:4px;}
  .malath-ai .malath-ai-panel{
    left:auto;
    right:0;
    transform-origin:bottom right;
  }

  html[dir="ltr"] .site-audio-dock{
    inset:auto calc(18px + env(safe-area-inset-right)) calc(18px + var(--malath-float-desktop-height) + var(--malath-float-stack-gap) + env(safe-area-inset-bottom)) auto;
  }
  html[dir="ltr"] .malath-ai{
    inset:auto calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) auto;
  }
  html[dir="ltr"] .malath-ai .malath-ai-panel{
    left:auto;
    right:0;
    transform-origin:bottom right;
  }
}

/* When the assistant surface is open on pages that also render prayer/audio,
   retire the secondary control visually until the assistant closes. This avoids
   a click target sitting behind the chat/voice panel without stopping audio. */
.malath-ai.is-open ~ .site-audio-dock{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
}

/* Mobile — two compact 56px controls with the same geometry. Prayer/audio stays above the assistant. Copy is carried by accessible labels; prayer emits a short
   status toast after user interaction. */
@media (max-width:720px){
  .malath-ai,
  .site-audio-dock{
    width:var(--malath-float-size);
    max-width:var(--malath-float-size);
    height:var(--malath-float-size);
    min-height:var(--malath-float-size);
    border-radius:var(--malath-float-radius);
    box-sizing:border-box;
  }
  .site-audio-dock{
    inset:auto calc(var(--malath-float-inline-gap) + env(safe-area-inset-right)) calc(var(--malath-float-bottom-gap) + var(--malath-float-size) + var(--malath-float-stack-gap) + env(safe-area-inset-bottom)) auto;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
  }
  .malath-ai{
    inset:auto calc(var(--malath-float-inline-gap) + env(safe-area-inset-right)) calc(var(--malath-float-bottom-gap) + env(safe-area-inset-bottom)) auto;
  }
  .malath-ai-launcher,
  .site-audio-toggle{
    width:100%;
    min-width:100%;
    max-width:100%;
    height:100%;
    min-height:100%;
    padding:6px;
    border-radius:var(--malath-float-radius);
    display:grid;
    place-items:center;
    box-sizing:border-box;
  }
  .malath-ai-launcher{
    box-shadow:0 13px 28px rgba(6,93,89,.24);
  }
  .site-audio-toggle{
    border:1px solid rgba(7,52,87,.10);
    background:rgba(255,255,255,.97);
    box-shadow:0 13px 28px rgba(3,39,84,.17);
    backdrop-filter:blur(12px);
  }
  .malath-ai-mark,
  .site-audio-icon{
    width:var(--malath-float-inner-size);
    min-width:var(--malath-float-inner-size);
    height:var(--malath-float-inner-size);
    min-height:var(--malath-float-inner-size);
    border-radius:var(--malath-float-inner-radius);
    margin:0;
    box-sizing:border-box;
  }
  .malath-ai-launcher-copy,
  .site-audio-copy{display:none;}
  .site-audio-dock:hover,
  .malath-ai-launcher:hover,
  .site-audio-toggle:hover{transform:none;}

  /* User-feedback bubble for the prayer/audio control. */
  .site-audio-toast{
    position:absolute;
    right:calc(100% + 9px);
    bottom:50%;
    transform:translateY(50%) translateX(6px) scale(.97);
    max-width:min(230px,calc(100vw - 94px));
    width:max-content;
    padding:8px 11px;
    border-radius:12px;
    background:rgba(6,31,65,.96);
    color:#fff;
    font-size:11px;
    font-weight:800;
    line-height:1.35;
    white-space:nowrap;
    box-shadow:0 10px 28px rgba(3,26,55,.22);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.18s ease;
  }
  .site-audio-toast:after{
    content:"";
    position:absolute;
    right:-5px;
    top:50%;
    width:10px;
    height:10px;
    transform:translateY(-50%) rotate(45deg);
    background:inherit;
    border-radius:2px;
  }
  .site-audio-dock.show-toast .site-audio-toast{
    opacity:1;
    visibility:visible;
    transform:translateY(50%) translateX(0) scale(1);
  }

  html[dir="ltr"] .site-audio-dock{
    inset:auto calc(var(--malath-float-inline-gap) + env(safe-area-inset-right)) calc(var(--malath-float-bottom-gap) + var(--malath-float-size) + var(--malath-float-stack-gap) + env(safe-area-inset-bottom)) auto;
  }
  html[dir="ltr"] .malath-ai{
    inset:auto calc(var(--malath-float-inline-gap) + env(safe-area-inset-right)) calc(var(--malath-float-bottom-gap) + env(safe-area-inset-bottom)) auto;
  }

  /* Keep legal/footer copy clear of the Malath-owned right-side stack. */
  .footer-bottom{
    padding-top:16px;
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
    gap:5px;
  }
  .footer-bottom>span{max-width:100%;line-height:1.65;text-align:center;}
}

@media (max-width:340px){
  :root{--malath-float-size:54px;--malath-float-inner-size:42px;--malath-float-inline-gap:10px;--malath-float-bottom-gap:10px;}
  .site-audio-toast{font-size:10.5px;padding:7px 9px;}
}

@media (prefers-reduced-motion:reduce){
  .malath-ai.is-open ~ .site-audio-dock,
  .site-audio-toast{transition:none!important;}
}

/* STAGE-04.2.7.4 — Central surface/layer authority.
   One canonical root state now decides which Malath-owned surface may visually
   dominate. Feature CSS retains component styling, while these rules prevent
   recovery/floating controls from painting above an active priority surface. */
:root{
  --malath-layer-floating:2147481200;
  --malath-layer-recovery:2147483000;
  --malath-layer-modal:2147483647;
}
.malath-ai{z-index:var(--malath-layer-floating)!important}
.conversion-resume-bar{z-index:var(--malath-layer-recovery)!important}
.app-promo-modal,.conversion-modal{z-index:var(--malath-layer-modal)!important}
html.malath-surface-modal .malath-ai,
html.malath-surface-modal .site-audio-dock,
html.malath-surface-modal .conversion-resume-bar{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.malath-surface-assistant .site-audio-dock,
html.malath-surface-assistant .conversion-resume-bar{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.malath-surface-app-promo [data-conversion-modal],
html.malath-surface-conversion-modal [data-app-promo-popup]{
  pointer-events:none!important;
}
@media(prefers-reduced-motion:reduce){
  html.malath-surface-modal .malath-ai,
  html.malath-surface-modal .site-audio-dock,
  html.malath-surface-modal .conversion-resume-bar,
  html.malath-surface-assistant .site-audio-dock,
  html.malath-surface-assistant .conversion-resume-bar{transition:none!important}
}