/* V24.15 V21 — TARGETED FIX ONLY
 * Baseline: V20.
 * Scope:
 * 1) Mobile search surface/input follows the selected primary color.
 * 2) Search focus uses a single primary-color glow (no rainbow fill).
 * 3) Hide only the mobile section labels "Nhóm trò chuyện" / "Trò chuyện gần đây";
 *    keep room/contact rendering and its existing unread/activity sorting intact.
 * 4) Keep the existing Settings screen and add only its Logout action via the
 *    companion JS marker; no chat/Firebase/business logic changes.
 */
@media (max-width:767px){
  /* Search/header: use the same primary color family as the selected accent. */
  .sidebar-menu .search-box-area{
    background:var(--primary,#25D366) !important;
    border-bottom:0 !important;
  }

  .sidebar-menu .search-input,
  .sidebar-menu .search-input.v3-search-input{
    background:color-mix(in srgb,var(--primary,#25D366) 14%,#ffffff) !important;
    color:var(--text-main,#172126) !important;
    border:1.5px solid color-mix(in srgb,var(--primary,#25D366) 58%,#ffffff) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.08) !important;
  }

  .sidebar-menu .search-input::placeholder,
  .sidebar-menu .search-input.v3-search-input::placeholder{
    color:color-mix(in srgb,var(--text-main,#172126) 62%,#ffffff) !important;
  }

  /* Focus = one clean primary-color ring only. */
  .sidebar-menu .search-input:focus,
  .sidebar-menu .search-input.v3-search-input:focus,
  .sidebar-menu .search-box-area.v20-search-active .search-input{
    outline:none !important;
    border-color:var(--primary,#25D366) !important;
    box-shadow:
      0 0 0 2px color-mix(in srgb,var(--primary,#25D366) 34%,transparent),
      0 0 0 4px color-mix(in srgb,var(--primary,#25D366) 12%,transparent),
      inset 0 1px 2px rgba(0,0,0,.08) !important;
  }

  .sidebar-menu .create-btn:focus-visible,
  .sidebar-menu .create-btn:active{
    outline:none !important;
    border-color:var(--primary,#25D366) !important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#25D366) 28%,transparent) !important;
  }

  /* Keep the existing room/contact order and sorting; remove labels only. */
  #tabMessagesSection > #roomSectionWrapper > .section-header,
  #tabMessagesSection > #recentHeader{
    display:none !important;
  }
  #tabMessagesSection > #roomSectionWrapper{margin:0 !important;padding:0 !important;}
  #tabMessagesSection > #recentContactList{margin-top:0 !important;padding-top:0 !important;}
  #tabMessagesSection > #roomSectionWrapper + #recentHeader + #recentContactList{margin-top:0 !important;}

  /* Dark theme: keep the same primary-family surface without becoming white. */
  :root[data-theme="dark"] .sidebar-menu .search-input,
  body[data-theme="dark"] .sidebar-menu .search-input,
  :root[data-theme="dark"] .sidebar-menu .search-input.v3-search-input,
  body[data-theme="dark"] .sidebar-menu .search-input.v3-search-input{
    background:color-mix(in srgb,var(--primary,#25D366) 16%,#10161a) !important;
    color:var(--text-main,#eef5f7) !important;
    border-color:color-mix(in srgb,var(--primary,#25D366) 62%,#ffffff) !important;
  }

  :root[data-theme="dark"] .sidebar-menu .search-input::placeholder,
  body[data-theme="dark"] .sidebar-menu .search-input::placeholder{
    color:rgba(238,245,247,.68) !important;
  }
}

@media (max-width:767px){
  .v21-settings-logout-section{padding-bottom:8px !important;}
  .v21-logout-btn{
    background:rgba(239,68,68,.10) !important;
    color:#ef4444 !important;
    border:1px solid rgba(239,68,68,.28) !important;
  }
  .v21-logout-btn:active,
  .v21-logout-btn:focus-visible{
    outline:none !important;
    box-shadow:0 0 0 3px rgba(239,68,68,.16) !important;
  }
}