/* ============================================================
   Mobile Layout — Three-layer canvas stack (≤820px)
   ============================================================ */

/* ════════════════════════════════════════════
   Settings sidebar — AUTO-HIDDEN on all devices
   Slides in from left when toggled
   ════════════════════════════════════════════ */
.cs-sidebar--left {
  position: fixed !important;
  top: 0 !important;
  left: -100% !important;
  width: 320px !important;
  max-width: 85vw !important;
  height: 100vh !important;
  z-index: 300 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: rgba(12, 12, 18, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-basis: auto !important;
  min-width: 0 !important;
}

.cs-sidebar--left.mobile-open {
  left: 0 !important;
}

/* ── Backdrop: click to close sidebar ── */
#mobile-settings-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(2px);
}

#mobile-settings-backdrop.active {
  display: block;
}

/* ── Settings toggle button (⚙) ── */
#mobile-settings-btn {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 320 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  backdrop-filter: blur(8px) !important;
  padding: 0 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* ── Settings/modals: always on top ── */
[role="dialog"],
[data-floating-ui-portal],
[data-radix-portal],
[id*="chakra-modal"],
[class*="chakra-modal"],
[class*="chakra-popover"],
[class*="chakra-menu"] {
  z-index: 500 !important;
  pointer-events: auto !important;
}

/* ════════════════════════════════════════════
   Fix Ark UI / Chakra v3 settings drawer on mobile.
   DrawerContent$1 renders inline (no portal), so it
   gets clipped by ancestor overflow:hidden.
   Force position:fixed to escape all overflow constraints.
   ════════════════════════════════════════════ */
@media (max-width: 820px) {
  [data-scope="dialog"][data-part="backdrop"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 598 !important;
    pointer-events: auto !important;
  }

  [data-scope="dialog"][data-part="content"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 600 !important;
    pointer-events: auto !important;
    will-change: transform;
  }

  /* Scrollable inner body of the settings drawer */
  [data-scope="dialog"][data-part="body"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 820px) {

  html,
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    background: #111;
  }

  /* ── Layer 1: Live2D canvas, full-screen ── */
  #root>div:has(#live2d-internal-wrapper) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 11 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  #live2d-internal-wrapper {
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  canvas#canvas {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    touch-action: none !important;
  }

  /* ── Main layout wrapper: position:absolute, NO stacking context ── */
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  /* ── Neutralise title bar / any non-app sibling — must NOT block clicks ── */
  #root>div:not(:has(#live2d-internal-wrapper)):not(:has(textarea)) {
    pointer-events: none !important;
  }

  /* ── Layer 0: Background image, behind canvas ── */
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:not(:first-child) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:not(:first-child) img,
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:not(:first-child) video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* ── Layer 10: Chat UI, full-screen transparent ── */
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 10 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* ── CRITICAL: propagate height through React wrapper divs ──
     Only stretch the child that CONTAINS the textarea (main content).
     The sidebar child (no textarea) must keep flex:0 so it does NOT
     expand to 50 vh and create a black band at the top of the screen. ── */
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child>*:has(textarea) {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Sidebar: must NOT be flex-grown — let Chakra control its own height.
     Make it transparent so the canvas shows through (the collapsed sidebar
     is just a thin toggle-button strip — its dark gray.900 background was
     the "black band" covering the top of the screen on mobile).
     When settings open, the drawer pane renders as a separate fixed overlay
     with its own background, so transparency here is safe. */
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child>*:not(:has(textarea)) {
    flex: 0 0 auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* ── Interactive elements: always tappable ── */
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child button,
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child [role="button"],
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child [role="tab"],
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child input,
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child textarea,
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child select,
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* ════════════════════════════════════════════════
     ChatScope overrides — transparent, full-height
     ════════════════════════════════════════════════ */

  .cs-main-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .cs-chat-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .cs-message-list {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    padding-bottom: 100px !important;
  }

  /* ── Pin input bar at bottom of screen, bypass flex clipping ── */
  .cs-message-input {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    padding-bottom: env(safe-area-inset-bottom, 8px) !important;
  }

  .cs-input-toolbox {
    background: transparent !important;
  }

  .cs-input-toolbox button,
  .cs-input-toolbox [role="button"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Conversation header transparent */
  .cs-conversation-header {
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.60) 0%,
        rgba(0, 0, 0, 0.00) 100%) !important;
    border: none !important;
  }

  /* Mobile sidebar width */
  .cs-sidebar--left {
    width: 82vw !important;
  }
}


/* Fix mic/interrupt buttons - visible on mobile */
@media (max-width: 820px) {

  /* Tombol mic/interrupt position */
  .css-1x0y7ph {
    position: fixed !important;
    bottom: 160px !important;
    left: 16px !important;
    z-index: 400 !important;
  }

  /* Fix overflow clipping pada ancestor containers */
  .css-1ttbp5w,
  .css-1x8c7ai,
  .css-1ctnctu {
    overflow: visible !important;
  }
}


/* Fix: geser input bar supaya tidak ketutupan mic button */
@media (max-width: 820px) {
  .cs-message-input {
    bottom: 0 !important;
    left: 130px !important;
  }
}

/* Fix: tampilkan Footer (input bar + mic button) di mobile */
@media (max-width: 820px) {

  /* Paksa mainContent flex column dan isi penuh */
  #root>div:not(:has(#live2d-internal-wrapper)):has(textarea)>*:first-child>*>* {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  /* Footer harus visible di bawah */
  [class*="chakra"]>div[style*="position"]~div {
    display: flex !important;
  }

  /* Target langsung: footer container dengan height 100px/120px */
  div[style*="height"][style*="position: relative"][style*="z-index: 1"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 200 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(12px) !important;
  }
}

/* Fix: angkat footer ke dalam viewport */
@media (max-width: 820px) {
  .css-agdotf {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(12px) !important;
  }

  /* Parent overflow visible agar tidak ter-clip */
  .css-1ttbp5w {
    overflow: visible !important;
  }
}

/* Fix: chevron footer tetap visible dan bisa diklik saat collapsed */
@media (max-width: 820px) {
  .css-agdotf {
    min-height: 24px !important;
  }

  .css-agdotf>div:first-child {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 201 !important;
    position: relative !important;
  }
}

/* Fix: chevron footer visible saat collapsed */
@media (max-width: 820px) {
  .css-1x8c7ai {
    overflow: visible !important;
  }

  .css-fu3kj1 {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 202 !important;
  }
}

/* Fix: footer collapsed state - clip konten yang translateY keluar viewport */
@media (max-width: 820px) {
  .css-13lwrfm {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    height: 24px !important;
    overflow: hidden !important;
  }

  .css-13lwrfm .css-1fyj7wk {
    transform: translateY(0) !important;
  }
}

/* ════════════════════════════════════════════
   Hide Group Management button — not used
   Target by FiUsers SVG path (Chakra/Ark UI
   does not use native HTML title attribute)
   ════════════════════════════════════════════ */
button:has(svg path[d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"]) {
  display: none !important;
}

/* ════════════════════════════════════════════
   Mobile: Fix sidebar dark-band at top.
   DOM-inspected root cause:
     .css-cpx8ha = sidebar container (max-height: 40vh from Chakra)
     .css-cretge = inner wrapper (flex:1 1 0, background:gray.900)
   Both cause a ~186px (40 vh) dark region even after flex:0 0 auto fix,
   because the inner flex:1 child auto-expands its uncontrained parent.
   CSS-level reinforcement of the JS fix in applyLayout().
   ════════════════════════════════════════════ */
@media (max-width: 820px) {
  .css-cpx8ha {
    max-height: 24px !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .css-cretge {
    max-height: 24px !important;
    overflow: hidden !important;
    background: transparent !important;
  }
}
/* Mobile: hide Chakra drawer fixed content (Camera/Screen panel) */
@media (max-width: 820px) {
  .css-1mx5na3 {
    display: none !important;
  }
}