/* ============================================================================
   AOS_AI_LAYOUT_CSS_FILE_BEGIN | baseline=G1_R10_2P5D
   ============================================================================ */
/* AOS AI G1 FINAL LAYOUT LOCK 2026-09-15
   UI-only overlay. Do NOT change G1 STT / Live Voice runtime JS. */
:root{
  --a8-final-gold:#edcb63;
  --a8-final-purple:#6f3bd5;
  --a8-final-deep:#21142f;
  --a8-final-page-bg:var(--a8-chat-banner-bg, url("./assets/themes/a8-fantasy-2d-official-v1.png"));
}
/* ============================================================================
   A8_STYLE_BEGIN | style_key=AOS_AI_STYLE_01_DESKTOP_2P5D_BACKGROUND
   ============================================================================ */
html,body{width:100%;height:100%;background-color:#130b20!important}
body{
  background-image:linear-gradient(rgba(18,8,30,.08),rgba(18,8,30,.10)),var(--a8-final-page-bg)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
.app,.main,.workspace,#homePanel{background:transparent!important}
.workspace{position:relative!important;padding-top:66px!important}
#homePanel{max-width:980px!important;margin:0 auto!important;padding:0 12px 150px!important}
#homePanel>.hero,#a8OfficialChatBanner{display:none!important}

/* The old white top board is removed. Only the highest transparent control strip remains. */
.top{
  position:fixed!important;left:0!important;right:0!important;top:0!important;
  height:58px!important;min-height:58px!important;margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  overflow:visible!important;z-index:5000!important;pointer-events:none!important;
}
.top>*{visibility:hidden!important;pointer-events:none!important}
#sideToggleTop{
  visibility:visible!important;pointer-events:auto!important;position:fixed!important;
  left:10px!important;top:8px!important;width:42px!important;height:42px!important;min-width:42px!important;
  border-radius:13px!important;border:1px solid rgba(237,203,99,.78)!important;
  background:rgba(40,20,60,.84)!important;color:#f4d978!important;
  box-shadow:0 6px 20px rgba(19,7,33,.22)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:5020!important;
}
#a8DTopActions{right:10px!important;top:8px!important;z-index:5020!important;background:transparent!important;gap:7px!important}
#a8DTopActions>button{
  width:42px!important;height:42px!important;border-radius:13px!important;
  border:1px solid rgba(237,203,99,.72)!important;background:rgba(40,20,60,.84)!important;
  color:#f6dfa0!important;box-shadow:0 6px 20px rgba(19,7,33,.22)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#a8CampaignSlot{
  position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:5010;
  width:min(720px,calc(100vw - 220px));height:42px;min-height:42px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(237,203,99,.42);border-radius:14px;
  color:rgba(255,244,203,.88);font-size:12px;font-weight:700;letter-spacing:.08em;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:auto;
}
#a8CampaignSlot span{opacity:.78;text-shadow:0 1px 8px rgba(25,8,40,.45)}

/* ============================================================================
   A8_STYLE_END | style_key=AOS_AI_STYLE_01_DESKTOP_2P5D_BACKGROUND
   A8_STYLE_BEGIN | style_key=AOS_AI_STYLE_02_CHAT_THREAD
   ============================================================================ */
/* Full-screen background remains visible; chat is a stack of white message cards, not one foggy board. */
#chatThread{
  width:100%!important;max-width:none!important;min-height:calc(100vh - 150px)!important;
  padding:18px 4px 170px!important;margin:0!important;background:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#chatThread .chat-msg{margin:12px 0!important}
#chatThread .chat-bubble{
  max-width:min(780px,86%)!important;background:rgba(255,255,255,.95)!important;
  color:#2b2235!important;border:1px solid rgba(111,59,213,.16)!important;border-radius:16px!important;
  box-shadow:0 10px 28px rgba(30,11,49,.13)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
#chatThread .chat-msg.user .chat-bubble{
  background:rgba(248,244,255,.96)!important;color:#2b2235!important;
  border-color:rgba(111,59,213,.28)!important;
}
#chatThread .a8-message-actions-g1 button{background:rgba(50,27,72,.80)!important;color:#f0d476!important}

/* ============================================================================
   A8_STYLE_END | style_key=AOS_AI_STYLE_02_CHAT_THREAD
   A8_STYLE_BEGIN | style_key=AOS_AI_STYLE_03_COMPOSER
   ============================================================================ */
/* Composer: preserve G1 mic/live/send functions. Only reflow UI. */
.composer{
  position:fixed!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;width:min(920px,calc(100vw - 42px))!important;
  min-height:58px!important;z-index:4900!important;display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 44px 44px 44px!important;grid-template-rows:auto auto!important;
  align-items:center!important;gap:6px!important;padding:7px 8px!important;
  border:1px solid rgba(237,203,99,.72)!important;border-radius:18px!important;
  background:rgba(42,21,63,.92)!important;box-shadow:0 16px 44px rgba(19,7,33,.30)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.composer .attachment-tray{grid-column:1/-1!important;grid-row:1!important}
.composer #plus{grid-column:1!important;grid-row:2!important}
.composer .a8-input-shell{
  grid-column:2!important;grid-row:2!important;position:relative!important;height:44px!important;min-width:0!important;
  display:block!important;background:rgba(255,255,255,.98)!important;border:1px solid rgba(237,203,99,.34)!important;
  border-radius:12px!important;overflow:hidden!important;box-sizing:border-box!important;
}
.composer .a8-input-shell #chatInput{
  display:block!important;width:100%!important;height:42px!important;min-height:42px!important;max-height:42px!important;
  resize:none!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;
  color:#241b31!important;-webkit-text-fill-color:#241b31!important;caret-color:#6f3bd5!important;
  padding:10px 150px 9px 12px!important;line-height:21px!important;box-sizing:border-box!important;
}
.composer .a8-input-shell #chatInput::placeholder{color:#81778f!important;-webkit-text-fill-color:#81778f!important;opacity:1!important}
#a8SpeakInput{display:none!important}
#a8VoiceWave{display:none!important}
.composer .a8-input-shell #a8RealMicWave{
  position:absolute!important;right:9px!important;top:50%!important;transform:translateY(-50%)!important;
  width:132px!important;min-width:0!important;max-width:132px!important;height:30px!important;
  margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;
  filter:drop-shadow(0 0 4px rgba(237,203,99,.34))!important;pointer-events:none!important;box-sizing:border-box!important;
  grid-column:auto!important;grid-row:auto!important;flex:none!important;
}
.composer #mic{grid-column:3!important;grid-row:2!important}
.composer #liveVoice{grid-column:4!important;grid-row:2!important;display:inline-flex!important}
.composer #send{grid-column:5!important;grid-row:2!important}
.composer .round{width:44px!important;height:44px!important;min-width:44px!important}

/* Right menu stays real and clickable, without fogging the page. */
#a8EShareMenu,#a8DMoreMenu{
  right:10px!important;top:58px!important;width:248px!important;z-index:5030!important;
  background:rgba(31,15,47,.97)!important;border:1px solid rgba(237,203,99,.54)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* Recovered Owner Training Studio from the first file. Keep every header action in one row. */
#a8-owner-training-toggle{z-index:5040!important}
#a8-owner-training-studio{
  z-index:5050!important;top:64px!important;right:8px!important;height:calc(100vh - 72px)!important;
  max-height:calc(100vh - 72px)!important;border:1px solid rgba(237,203,99,.70)!important;border-radius:16px!important;
  overflow:hidden!important;box-shadow:0 18px 54px rgba(10,3,18,.38)!important;
}
#a8-owner-training-studio .ots-header{position:sticky!important;top:0!important;z-index:20!important}
#a8-owner-training-studio .ots-header-actions{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;white-space:nowrap!important;max-width:58%!important}
#a8-owner-training-studio .ots-header-actions>*{flex:0 0 auto!important}
#a8-owner-training-studio .ots-tabs{flex-wrap:nowrap!important;overflow-x:auto!important}

/* Reduce competing floating shell visual noise. */
#aos-tiered-brain,#a8ModeV13{display:none!important}

/* ============================================================================
   A8_STYLE_END | style_key=AOS_AI_STYLE_03_COMPOSER
   A8_STYLE_BEGIN | style_key=AOS_AI_STYLE_04_RESPONSIVE_BASE
   ============================================================================ */
@media(max-width:820px){
  .workspace{padding:58px 4px 136px!important}
  #homePanel{padding:0 4px 130px!important}
  #a8CampaignSlot{top:7px;width:calc(100vw - 116px);height:40px;min-height:40px;font-size:10px}
  #sideToggleTop{left:7px!important;top:7px!important;width:40px!important;height:40px!important;min-width:40px!important}
  #a8DTopActions{right:7px!important;top:7px!important}
  #a8DTopActions>button{width:40px!important;height:40px!important}
  #a8EShareBtn{display:none!important}
  #a8DMoreMenu{right:7px!important;top:53px!important;width:min(78vw,260px)!important}
  #chatThread{min-height:calc(100dvh - 120px)!important;padding:10px 2px 142px!important}
  #chatThread .chat-bubble{max-width:92%!important}
  .composer{
    bottom:max(6px,env(safe-area-inset-bottom))!important;width:calc(100vw - 8px)!important;
    grid-template-columns:40px minmax(0,1fr) 40px 40px 40px!important;gap:4px!important;padding:5px!important;border-radius:14px!important;
  }
  .composer .round{width:40px!important;height:40px!important;min-width:40px!important}
  .composer .a8-input-shell{height:40px!important}
  .composer .a8-input-shell #chatInput{height:38px!important;min-height:38px!important;max-height:38px!important;padding:8px 88px 8px 10px!important;font-size:16px!important}
  .composer .a8-input-shell #a8RealMicWave{right:7px!important;width:76px!important;max-width:76px!important;height:26px!important}
  .composer #liveVoice{display:inline-flex!important}
  #a8-owner-training-studio{top:54px!important;right:0!important;width:100vw!important;height:calc(100dvh - 54px)!important;max-height:calc(100dvh - 54px)!important;border-radius:14px 14px 0 0!important}
  #a8-owner-training-studio .ots-header-actions{max-width:64%!important}
}
@media(max-width:430px){
  #a8CampaignSlot span{font-size:9px}
  .composer{grid-template-columns:38px minmax(0,1fr) 38px 38px 38px!important}
  .composer .round{width:38px!important;height:38px!important;min-width:38px!important}
  .composer .a8-input-shell{height:38px!important}
  .composer .a8-input-shell #chatInput{height:36px!important;min-height:36px!important;max-height:36px!important;padding-right:72px!important}
  .composer .a8-input-shell #a8RealMicWave{width:62px!important;max-width:62px!important;height:24px!important}
}

/* ============================================================================
   A8_STYLE_END | style_key=AOS_AI_STYLE_04_RESPONSIVE_BASE
   AOS_AI_LAYOUT_CSS_FILE_END
   ============================================================================ */