/* V24.15 V22 — SEARCH FOCUS ONLY
 * Baseline: V21.
 * Scope ONLY: mobile sidebar search visual surface + focus ring.
 * No navigation, settings, sorting, chat, Firebase, or business-logic changes.
 */
@media (max-width:767px){
  /* The input must visually belong to the same top/header surface.
     Transparent is intentional: it removes the legacy dark input fill. */
  .sidebar-menu .search-box-area.v3-search-area .search-input,
  .sidebar-menu .search-box-area.v3-search-area .v3-search-input,
  .sidebar-menu .search-box-area .search-input.v3-search-input{
    background:transparent !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    color:var(--text-main,#172126) !important;
    -webkit-text-fill-color:var(--text-main,#172126) !important;
    border:1.5px solid color-mix(in srgb,var(--primary,#25D366) 42%,transparent) !important;
    box-shadow:none !important;
    outline:none !important;
  }

  /* Placeholder stays readable without adding a second colored surface. */
  .sidebar-menu .search-box-area.v3-search-area .search-input::placeholder,
  .sidebar-menu .search-box-area.v3-search-area .v3-search-input::placeholder{
    color:color-mix(in srgb,var(--text-main,#172126) 66%,transparent) !important;
    opacity:1 !important;
  }

  /* Focus/active = one clean primary-color luminous ring only. */
  .sidebar-menu .search-box-area.v3-search-area .search-input:focus,
  .sidebar-menu .search-box-area.v3-search-area .v3-search-input:focus,
  .sidebar-menu .search-box-area.v3-search-area.v20-search-active .search-input,
  .sidebar-menu .search-box-area.v3-search-area.v3-search-expanded .v3-search-input{
    background:transparent !important;
    outline:none !important;
    border-color:var(--primary,#25D366) !important;
    box-shadow:
      0 0 0 1.5px color-mix(in srgb,var(--primary,#25D366) 72%,transparent),
      0 0 9px color-mix(in srgb,var(--primary,#25D366) 42%,transparent) !important;
  }

  /* Keep the search surface identical in dark mode; only text contrast changes. */
  :root[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area .search-input,
  :root[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area .v3-search-input,
  body[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area .search-input,
  body[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area .v3-search-input{
    background:transparent !important;
    color:var(--text-main,#eef5f7) !important;
    -webkit-text-fill-color:var(--text-main,#eef5f7) !important;
    border-color:color-mix(in srgb,var(--primary,#25D366) 48%,transparent) !important;
    box-shadow:none !important;
  }

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

  :root[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area .search-input:focus,
  :root[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area .v3-search-input:focus,
  :root[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area.v20-search-active .search-input,
  :root[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area.v3-search-expanded .v3-search-input,
  body[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area .search-input:focus,
  body[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area .v3-search-input:focus,
  body[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area.v20-search-active .search-input,
  body[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area.v3-search-expanded .v3-search-input{
    background:transparent !important;
    border-color:var(--primary,#25D366) !important;
    box-shadow:
      0 0 0 1.5px color-mix(in srgb,var(--primary,#25D366) 76%,transparent),
      0 0 10px color-mix(in srgb,var(--primary,#25D366) 48%,transparent) !important;
  }
}