/* V31 — TARGETED SEARCH + CONTACT DIVIDER CONTRAST ONLY
 * Baseline: V30. CSS-only; no JS/Firebase/data/navigation changes.
 * 1) Make the complete search/header strip use the same surface as the search field.
 * 2) Keep readable text/icon contrast in both themes.
 * 3) Restore WhatsApp-like separators between employee rows; separator starts
 *    after the avatar area so it does not cut through the avatar.
 */

:root{
  --v31-search-surface-light:var(--input-bg,#f0f2f5);
  --v31-search-surface-dark:var(--input-bg,#202c33);
  --v31-search-text-light:var(--text-main,#172126);
  --v31-search-text-dark:#e9edef;
  --v31-search-muted-light:var(--text-sub,#667781);
  --v31-search-muted-dark:#aebac1;
}

/* PC / tablet: the complete search strip follows the search-field surface. */
.search-box-area{
  background:var(--v31-search-surface-light) !important;
  color:var(--v31-search-text-light) !important;
  border-color:color-mix(in srgb,var(--v31-search-surface-light) 84%,var(--border-color,#d8dee3) 16%) !important;
}
.search-box-area .search-input,
.search-box-area #searchInput{
  background:var(--v31-search-surface-light) !important;
  color:var(--v31-search-text-light) !important;
  -webkit-text-fill-color:var(--v31-search-text-light) !important;
}
.search-box-area::before,
.search-box-area::after{
  border-color:var(--v31-search-muted-light) !important;
  background:var(--v31-search-muted-light) !important;
}
.search-box-area .search-input::placeholder,
.search-box-area #searchInput::placeholder{
  color:var(--v31-search-muted-light) !important;
  opacity:1 !important;
}

/* Mobile: no second-colored strip around the pill. */
@media (max-width:767px){
  .sidebar-menu .search-box-area,
  .sidebar-menu .search-box-area.v3-search-area{
    background:var(--v31-search-surface-light) !important;
    color:var(--v31-search-text-light) !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .sidebar-menu .search-box-area .v3-search-input,
  .sidebar-menu .search-box-area .search-input,
  .sidebar-menu .search-box-area #searchInput{
    background:var(--v31-search-surface-light) !important;
    color:var(--v31-search-text-light) !important;
    -webkit-text-fill-color:var(--v31-search-text-light) !important;
    border-color:color-mix(in srgb,var(--v31-search-surface-light) 76%,var(--border-color,#d8dee3) 24%) !important;
  }

  .sidebar-menu .search-box-area .v3-search-input::placeholder,
  .sidebar-menu .search-box-area .search-input::placeholder,
  .sidebar-menu .search-box-area #searchInput::placeholder{
    color:var(--v31-search-muted-light) !important;
    opacity:1 !important;
  }

  .sidebar-menu .search-box-area::before{
    color:var(--v31-search-muted-light) !important;
    border-color:var(--v31-search-muted-light) !important;
  }
  .sidebar-menu .search-box-area::after{
    background:var(--v31-search-muted-light) !important;
  }

  /* Employee/group rows: a clean divider begins after the avatar, like a
     native messenger list. It never crosses the avatar/presence-dot area. */
  .sidebar-menu #roomList > .room-item,
  .sidebar-menu #recentContactList > .room-item,
  .sidebar-menu #contactList > .room-item{
    position:relative !important;
    border-bottom:0 !important;
  }
  .sidebar-menu #roomList > .room-item::after,
  .sidebar-menu #recentContactList > .room-item::after,
  .sidebar-menu #contactList > .room-item::after{
    content:"" !important;
    position:absolute !important;
    left:64px !important;
    right:0 !important;
    bottom:0 !important;
    height:1px !important;
    background:rgba(15,23,42,.075) !important;
    pointer-events:none !important;
  }
  .sidebar-menu #roomList > .room-item:last-child::after,
  .sidebar-menu #recentContactList > .room-item:last-child::after,
  .sidebar-menu #contactList > .room-item:last-child::after{
    display:none !important;
  }
}

:root[data-theme="dark"] .search-box-area,
body[data-theme="dark"] .search-box-area{
  background:var(--v31-search-surface-dark) !important;
  color:var(--v31-search-text-dark) !important;
  border-color:rgba(255,255,255,.08) !important;
}
:root[data-theme="dark"] .search-box-area .search-input,
:root[data-theme="dark"] .search-box-area #searchInput,
body[data-theme="dark"] .search-box-area .search-input,
body[data-theme="dark"] .search-box-area #searchInput{
  background:var(--v31-search-surface-dark) !important;
  color:var(--v31-search-text-dark) !important;
  -webkit-text-fill-color:var(--v31-search-text-dark) !important;
  border-color:rgba(255,255,255,.12) !important;
}
:root[data-theme="dark"] .search-box-area .search-input::placeholder,
:root[data-theme="dark"] .search-box-area #searchInput::placeholder,
body[data-theme="dark"] .search-box-area .search-input::placeholder,
body[data-theme="dark"] .search-box-area #searchInput::placeholder{
  color:var(--v31-search-muted-dark) !important;
  opacity:1 !important;
}
:root[data-theme="dark"] .search-box-area::before,
body[data-theme="dark"] .search-box-area::before{
  border-color:var(--v31-search-muted-dark) !important;
}
:root[data-theme="dark"] .search-box-area::after,
body[data-theme="dark"] .search-box-area::after{
  background:var(--v31-search-muted-dark) !important;
}

@media (max-width:767px){
  :root[data-theme="dark"] .sidebar-menu .search-box-area,
  body[data-theme="dark"] .sidebar-menu .search-box-area,
  :root[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area,
  body[data-theme="dark"] .sidebar-menu .search-box-area.v3-search-area{
    background:var(--v31-search-surface-dark) !important;
  }
  :root[data-theme="dark"] .sidebar-menu #roomList > .room-item::after,
  :root[data-theme="dark"] .sidebar-menu #recentContactList > .room-item::after,
  :root[data-theme="dark"] .sidebar-menu #contactList > .room-item::after,
  body[data-theme="dark"] .sidebar-menu #roomList > .room-item::after,
  body[data-theme="dark"] .sidebar-menu #recentContactList > .room-item::after,
  body[data-theme="dark"] .sidebar-menu #contactList > .room-item::after{
    background:rgba(255,255,255,.095) !important;
  }
}