/* V24.15 V23 — MOBILE NAV + CHAT VISUAL TARGETED ONLY
 * Baseline: V22.
 * Scope ONLY:
 * 1) remove the full-width rectangular bottom-nav paint and keep one rounded
 *    glass pill around the four existing items; lift it ~4px from the edge.
 * 2) give the mobile chat a stable top header surface so messages never paint
 *    into the iPhone top/status area.
 * 3) keep the existing composer compact and reduce iOS form-assistant noise
 *    via visual/HTML attributes only; no message/Firebase logic changes.
 */

@media (max-width: 767px){
  /* --- Bottom navigation: one rounded pill, no outer rectangle/separator. --- */
  .sidebar-icon{
    left:8px !important;
    right:8px !important;
    bottom:4px !important; /* ~1 mm above the previous edge position */
    width:auto !important;
    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;
    padding:3px !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    position:fixed !important;
    isolation:isolate !important;
  }

  /* The only outer surface: a rounded glass pill that hugs all four items. */
  .sidebar-icon::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;
    border-radius:22px !important;
    background:rgba(248,250,252,.96) !important;
    border:1px solid rgba(15,23,42,.10) !important;
    box-shadow:
      0 7px 22px rgba(15,23,42,.16),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(15,23,42,.05) !important;
    backdrop-filter:blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
    pointer-events:none !important;
  }

  :root[data-theme="dark"] .sidebar-icon::before,
  body[data-theme="dark"] .sidebar-icon::before{
    background:rgba(27,35,45,.96) !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:
      0 8px 24px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.20) !important;
  }

  /* Do not paint a second horizontal line at the list/menu boundary. */
  .sidebar-icon,
  .sidebar-icon .sidebar-top,
  .sidebar-icon .sidebar-bottom,
  .sidebar-icon .nav-icons{
    border-top:0 !important;
    border-bottom:0 !important;
  }

  /* Keep the four existing controls exactly as they are; only their shell is
     repositioned. */
  .sidebar-icon .nav-icons > .nav-icon,
  .sidebar-icon #adminPanelBtn,
  .sidebar-icon #settingsNavBtn{
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    border-radius:18px !important;
  }

  /* --- Mobile chat top frame: messages stay below a real header surface. --- */
  .chat-main.mobile-active .chat-header,
  #chatMainContainer.mobile-active .chat-header,
  body.mobile-chat-focus .chat-header{
    position:relative !important;
    z-index:100 !important;
    flex:0 0 calc(56px + env(safe-area-inset-top, 0px)) !important;
    height:calc(56px + env(safe-area-inset-top, 0px)) !important;
    min-height:calc(56px + env(safe-area-inset-top, 0px)) !important;
    max-height:calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding:env(safe-area-inset-top, 0px) 10px 0 !important;
    box-sizing:border-box !important;
    background:var(--bg-header,#fff) !important;
    border-bottom:1px solid var(--border-color,#e5e7eb) !important;
    box-shadow:0 1px 8px rgba(15,23,42,.06) !important;
    overflow:hidden !important;
  }

  :root[data-theme="dark"] .chat-main.mobile-active .chat-header,
  :root[data-theme="dark"] #chatMainContainer.mobile-active .chat-header,
  body[data-theme="dark"] .chat-main.mobile-active .chat-header,
  body[data-theme="dark"] #chatMainContainer.mobile-active .chat-header{
    background:#111b21 !important;
    border-bottom-color:#26343d !important;
    box-shadow:0 1px 8px rgba(0,0,0,.24) !important;
  }

  .chat-main.mobile-active .chat-window,
  #chatMainContainer.mobile-active .chat-window,
  body.mobile-chat-focus .chat-window{
    position:relative !important;
    z-index:1 !important;
    min-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    box-sizing:border-box !important;
  }

  /* Keep the composer visually continuous with the chat surface. */
  .chat-main.mobile-active .chat-input-zone,
  #chatMainContainer.mobile-active .chat-input-zone,
  body.mobile-chat-focus .chat-input-zone{
    position:relative !important;
    z-index:20 !important;
    border-top:0 !important;
    box-shadow:none !important;
  }

  .chat-main.mobile-active .zalo-input-area,
  #chatMainContainer.mobile-active .zalo-input-area,
  body.mobile-chat-focus .zalo-input-area{
    border-top:0 !important;
    box-shadow:none !important;
  }
}

/* iOS form-assistant hinting: this does not alter send/reply behavior. */
@media (max-width: 767px){
  #messageInput{
    -webkit-appearance:none !important;
    appearance:none !important;
    outline:none !important;
  }
}