/* A8 V53104G1 RESPONSIVE REAL FUNCTION — one responsive web UI */
:root{--a8-gold:#edcb63;--a8-gold-soft:#f6df9a;--a8-purple:#6f3bd5;--a8-purple-deep:#241231;--a8-chat-banner-bg:url("./assets/themes/a8-fantasy-2d-official-v1.png")}
.a8-hidden-template-controls{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
/* Strong visible hamburger; no duplicate mobile/desktop manual mode. */
#sideToggleTop{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;z-index:5005!important;width:42px!important;height:42px!important;min-width:42px!important;border-radius:13px!important;border:1px solid rgba(237,203,99,.72)!important;background:rgba(40,20,60,.78)!important;box-shadow:0 7px 22px rgba(25,8,39,.18)!important;backdrop-filter:blur(12px)!important}
#collapse{border-color:rgba(237,203,99,.45)!important}.a8-hamburger-lines{width:21px;height:16px;display:flex!important;flex-direction:column;justify-content:space-between}.a8-hamburger-lines i{display:block!important;height:2px!important;width:100%!important;border-radius:3px!important;background:#f3d777!important;box-shadow:0 0 7px rgba(237,203,99,.32)!important}
#a8DTopActions{position:fixed!important;right:12px!important;top:10px!important;z-index:5005!important;display:flex!important;gap:7px!important;background:transparent!important}
#a8DTopActions>button{width:40px;height:40px;border-radius:13px;border:1px solid rgba(237,203,99,.62);background:rgba(40,20,60,.78);color:#f7e7ad;font-size:21px;cursor:pointer;backdrop-filter:blur(12px);box-shadow:0 7px 22px rgba(25,8,39,.18)}
#a8EShareMenu,#a8DMoreMenu{position:fixed;right:12px;top:58px;z-index:5006;width:228px;padding:8px;border-radius:14px;background:rgba(31,15,47,.97);border:1px solid rgba(237,203,99,.50);box-shadow:0 18px 50px rgba(16,5,29,.34);backdrop-filter:blur(18px);color:#fff}#a8EShareMenu[hidden],#a8DMoreMenu[hidden]{display:none!important}
#a8EShareMenu button,#a8DMoreMenu button{display:block;width:100%;padding:10px 11px;margin:3px 0;text-align:left;border-radius:9px;border:1px solid rgba(237,203,99,.16);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:14px}#a8EShareMenu button:hover,#a8DMoreMenu button:hover{background:rgba(111,59,213,.65);border-color:rgba(237,203,99,.62)}
/* Clear visual segmentation: official background banner / chat / composer. */
#homePanel{overflow:visible!important;padding-top:0!important;background:transparent!important}
#homePanel>.hero{display:none!important}
#a8OfficialChatBanner{height:clamp(160px,24vh,248px);width:100%;background-image:linear-gradient(180deg,rgba(31,12,49,.04),rgba(31,12,49,.18)),var(--a8-chat-banner-bg);background-position:center 42%;background-size:cover;background-repeat:no-repeat;border:1px solid rgba(237,203,99,.48);border-radius:20px 20px 10px 10px;box-shadow:0 14px 38px rgba(30,10,49,.16);position:relative;overflow:hidden;margin:0 auto 12px}
#a8OfficialChatBanner::after{content:'AOS AI';position:absolute;left:18px;bottom:13px;padding:6px 11px;border-radius:999px;color:#fff5cb;font-weight:900;letter-spacing:.08em;font-size:12px;background:rgba(43,19,68,.62);border:1px solid rgba(237,203,99,.48);backdrop-filter:blur(10px)}
#chatThread{background:rgba(255,255,255,.88);border:1px solid rgba(111,59,213,.12);border-radius:14px;padding:14px 14px 150px!important;min-height:calc(100vh - 430px);box-shadow:0 10px 30px rgba(38,18,59,.06);backdrop-filter:blur(10px)}
/* Plus menu is a vertical text menu only. */
#plusMenu{width:210px!important;background:rgba(31,15,47,.97)!important;border:1px solid rgba(237,203,99,.46)!important;color:#fff!important;backdrop-filter:blur(16px)!important;border-radius:13px!important;padding:7px!important}#plusMenu button{display:block!important;width:100%!important;text-align:left!important;color:#fff!important;border:1px solid transparent!important;background:transparent!important;border-radius:9px!important;padding:9px 10px!important}#plusMenu button:hover{background:rgba(111,59,213,.50)!important;border-color:rgba(237,203,99,.28)!important}
/* Composer: real STT/TTS/live voice functions preserved, cleaner segmented glass panel. */
.composer{border:1px solid rgba(237,203,99,.54)!important;background:linear-gradient(135deg,rgba(42,21,63,.92),rgba(69,34,96,.88))!important;box-shadow:0 18px 54px rgba(24,8,40,.25)!important;backdrop-filter:blur(20px)!important;border-radius:19px!important;padding:8px 9px!important;gap:7px!important}
.composer #chatInput{color:#fff!important;background:rgba(255,255,255,.075)!important;border:1px solid rgba(237,203,99,.16)!important;border-radius:12px!important;min-height:44px!important;padding:10px 12px!important;caret-color:#f5d86f!important}.composer #chatInput::placeholder{color:rgba(255,255,255,.66)!important}
#plus,#liveVoice,#send{border:1px solid rgba(237,203,99,.32)!important}.composer #plus{color:#f3d777!important;background:rgba(35,16,54,.70)!important}.composer #send{background:linear-gradient(135deg,#7645e5,#5a2dbb)!important;color:#fff!important}
/* Beautiful microphone — SVG survives app state changes. */
#mic.preferred-mic-v53104f2{position:relative!important;overflow:visible!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:radial-gradient(circle at 36% 28%,#9d67ea 0%,#6739b9 52%,#351a55 100%)!important;border:1px solid rgba(244,213,116,.88)!important;box-shadow:0 8px 24px rgba(49,20,80,.28),inset 0 1px 0 rgba(255,255,255,.20),0 0 0 1px rgba(123,71,200,.26)!important;color:#f6d978!important}
#mic.preferred-mic-v53104f2::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(237,203,99,.0);pointer-events:none;transition:.2s}
#mic.preferred-mic-v53104f2.recording::after{border-color:rgba(237,203,99,.65);box-shadow:0 0 24px rgba(237,203,99,.48);animation:a8GoldMicPulse 1s ease-in-out infinite}
.a8-mic-icon{width:23px;height:23px;display:block}.a8-mic-icon svg{width:100%;height:100%;fill:none;stroke:#f6db84;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(237,203,99,.45))}
@keyframes a8GoldMicPulse{50%{transform:scale(1.10);opacity:.55}}
/* GOLD live waveform: this is the real microphone canvas, amplitude driven by PCM/RMS. */
#a8RealMicWave{display:none;flex:0 1 230px!important;min-width:105px!important;max-width:270px!important;height:42px!important;background:rgba(21,10,32,.28)!important;border:1px solid rgba(237,203,99,.18)!important;border-radius:11px!important;padding:3px 5px!important;filter:drop-shadow(0 0 5px rgba(237,203,99,.30));box-sizing:border-box}
#a8VoiceWave{display:none!important}.voice-wave-message-v53104f2{border-color:rgba(237,203,99,.42)!important;background:linear-gradient(135deg,rgba(60,29,91,.88),rgba(91,45,130,.82))!important;color:#fff!important}.voice-wave-label-v53104f2{color:#f1d27a!important}.voice-wave-bars-v53104f2 span{background:#edcb63!important;box-shadow:0 0 7px rgba(237,203,99,.45)}
/* Message actions are real copy/download/share. */
.chat-bubble{position:relative}.a8-message-actions-g1{display:flex;gap:4px;justify-content:flex-end;margin-top:6px;opacity:.45;transition:opacity .15s}.chat-bubble:hover>.a8-message-actions-g1{opacity:1}.a8-message-actions-g1 button{width:27px;height:27px;border-radius:8px;border:1px solid rgba(237,203,99,.30);background:rgba(46,24,70,.72);color:#f1d27a;cursor:pointer}
/* Owner Studio kept as the recovered full panel. */
.owner-studio-edge-tab{border:1px solid rgba(237,203,99,.62)!important;background:linear-gradient(180deg,#7942df,#4e238f)!important}.owner-studio-drawer{border-color:rgba(237,203,99,.78)!important}
/* Custom uploaded background affects the official chat banner, not the whole app shell. */
html,body{background:#f6f4f8!important}
/* AUTOMATIC responsive web UI: no user desktop/mobile switch. */
@media(max-width:820px){
  #side{position:fixed!important;left:0;top:0;bottom:0;z-index:4999!important;width:min(84vw,330px)!important;box-shadow:16px 0 46px rgba(24,10,39,.26)!important}.app.aos-left-hidden #side{display:none!important}
  .top{height:60px!important;padding:0 96px 0 7px!important}.top .title{min-width:0!important}.top .title b{font-size:15px!important}.top .title div{display:none!important}
  #sideToggleTop{width:39px!important;height:39px!important;min-width:39px!important}
  #a8DTopActions{right:6px!important;top:6px!important}#a8DTopActions>button{width:38px;height:38px;border-radius:12px}#a8EShareMenu,#a8DMoreMenu{right:6px;top:50px;width:min(78vw,250px)}
  .workspace{padding:8px 6px 170px!important}
  #a8OfficialChatBanner{height:152px!important;border-radius:15px 15px 9px 9px!important;background-position:center 40%!important;margin-bottom:7px!important}
  #a8OfficialChatBanner::after{left:10px;bottom:8px;font-size:10px;padding:5px 8px}
  #chatThread{width:100%!important;max-width:none!important;margin:0!important;min-height:calc(100dvh - 330px)!important;padding:9px 8px 178px!important;border-radius:10px!important}.chat-bubble{max-width:88%!important}
  .composer{position:fixed!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:calc(max(6px,env(safe-area-inset-bottom)) + var(--aos-keyboard-bottom,0px))!important;width:calc(100vw - 10px)!important;max-width:none!important;z-index:4900!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) 100px 42px 42px!important;grid-template-rows:auto auto!important;gap:5px!important;padding:6px!important;border-radius:15px!important}
  .composer .attachment-tray{grid-column:1/-1!important;grid-row:1!important;max-height:72px!important}.composer #plus{grid-column:1!important;grid-row:2!important}.composer #chatInput{grid-column:2!important;grid-row:2!important;min-width:0!important;min-height:42px!important;font-size:16px!important;padding:8px 9px!important}.composer #a8RealMicWave{grid-column:3!important;grid-row:2!important;width:100%!important;min-width:0!important;max-width:none!important;height:42px!important}.composer #mic{grid-column:4!important;grid-row:2!important}.composer #liveVoice{display:none!important}.composer #send{grid-column:5!important;grid-row:2!important}.composer .round{width:42px!important;height:42px!important;min-width:42px!important}
  #plusMenu{position:fixed!important;left:7px!important;bottom:64px!important;width:min(230px,72vw)!important;z-index:5100!important}
  .owner-studio-drawer{right:0!important;bottom:0!important;width:100vw!important;height:88dvh!important;min-width:0!important;max-width:100vw!important;max-height:94dvh!important;border-radius:16px 16px 0 0!important}.owner-studio-resize-left{display:none!important}.owner-studio-head-actions [data-owner-size]{display:none!important}.a8-message-actions-g1{opacity:.78}
}
@media(max-width:480px){.composer{grid-template-columns:40px minmax(0,1fr) 82px 40px 40px!important}.composer .round{width:40px!important;height:40px!important;min-width:40px!important}.composer #a8RealMicWave{height:40px!important}.top{padding-right:90px!important}.lang-wrap .pill{max-width:86px!important;font-size:10px!important}}


/* G1 cleanup: hide developer/runtime diagnostics from the customer chat surface. */
#aos-tiered-brain,#a8ModeV13{display:none!important}

/* Background upload/official background is only a small chat banner, with no overlay label. */
#a8OfficialChatBanner{height:clamp(105px,15vh,150px)!important;background-position:center 42%!important}
#a8OfficialChatBanner::after{display:none!important;content:none!important}

/* Input text area stays light so dark text is readable; outer composer remains purple/gold. */
.composer{grid-template-columns:auto minmax(0,1fr) minmax(120px,230px) auto auto auto!important}
.composer .a8-input-shell{
  grid-column:2!important;grid-row:2!important;min-width:0!important;height:44px!important;
  display:flex!important;align-items:center!important;gap:4px!important;
  background:rgba(255,255,255,.96)!important;border:1px solid rgba(237,203,99,.28)!important;
  border-radius:12px!important;overflow:hidden!important;box-sizing:border-box!important
}
.composer .a8-input-shell #chatInput{
  flex:1 1 auto!important;width:auto!important;min-width:0!important;height:42px!important;min-height:42px!important;max-height:120px!important;
  grid-column:auto!important;grid-row:auto!important;background:transparent!important;border:0!important;outline:0!important;
  color:#241b31!important;-webkit-text-fill-color:#241b31!important;caret-color:#6f3bd5!important;
  padding:9px 5px 9px 11px!important;box-shadow:none!important
}
.composer .a8-input-shell #chatInput::placeholder{color:#81778f!important;-webkit-text-fill-color:#81778f!important;opacity:1!important}
#a8SpeakInput{
  flex:0 0 36px!important;width:36px!important;height:36px!important;margin-right:3px!important;border:0!important;border-radius:9px!important;
  background:transparent!important;color:#6a3ac7!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important
}
#a8SpeakInput:hover{background:#f1eaff!important}
#a8SpeakInput svg{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.composer #a8RealMicWave{grid-column:3!important;grid-row:2!important}
.composer #mic{grid-column:4!important;grid-row:2!important}
.composer #liveVoice{grid-column:5!important;grid-row:2!important}
.composer #send{grid-column:6!important;grid-row:2!important}

@media(max-width:820px){
  #a8OfficialChatBanner{height:96px!important;margin-bottom:7px!important}
  .composer{grid-template-columns:42px minmax(0,1fr) 100px 42px 42px!important}
  .composer .a8-input-shell{grid-column:2!important;grid-row:2!important;height:42px!important}
  .composer .a8-input-shell #chatInput{height:40px!important;min-height:40px!important;font-size:16px!important}
  #a8SpeakInput{width:34px!important;height:34px!important;flex-basis:34px!important}
  .composer #a8RealMicWave{grid-column:3!important;grid-row:2!important}
  .composer #mic{grid-column:4!important;grid-row:2!important}
  .composer #liveVoice{display:none!important}
  .composer #send{grid-column:5!important;grid-row:2!important}
}
@media(max-width:480px){
  .composer{grid-template-columns:40px minmax(0,1fr) 76px 40px 40px!important}
  #a8SpeakInput{width:32px!important;height:32px!important;flex-basis:32px!important}
}