/* V30 — VISUAL ONLY: search + lists + mobile bottom navigation
 * Baseline: V29. No JS, Firebase, data, sorting, unread or navigation logic.
 */

:root{
  --v30-green: var(--primary,#25D366);
  --v30-light-bg: var(--bg-main,#f7f9fb);
  --v30-light-panel: var(--bg-header,#ffffff);
  --v30-light-input: var(--input-bg,#f0f2f5);
  --v30-dark-bg: var(--bg-main,#0b141a);
  --v30-dark-panel: var(--bg-header,#111b21);
  --v30-dark-input: var(--input-bg,#202c33);
}

/* ---------- Search: same visual language on PC/tablet and mobile ---------- */
.search-box-area{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
}
.search-box-area .search-input,
.search-box-area #searchInput{
  border-radius:999px !important;
  border:1px solid color-mix(in srgb,var(--border-color,#d8dee3) 78%,var(--v30-green) 22%) !important;
  background:var(--v30-light-input) !important;
  color:var(--text-main,#172126) !important;
  -webkit-text-fill-color:var(--text-main,#172126) !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.06) !important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease !important;
}
.search-box-area .search-input:focus,
.search-box-area #searchInput:focus{
  outline:none !important;
  border-color:var(--v30-green) !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--v30-green) 22%,transparent), inset 0 1px 2px rgba(15,23,42,.04) !important;
}
.search-box-area::before{
  content:"" !important;
  position:absolute !important;
  left:24px !important;
  top:50% !important;
  width:14px !important;
  height:14px !important;
  transform:translateY(-50%) !important;
  border:1.7px solid var(--text-sub,#667781) !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:.9 !important;
}
.search-box-area::after{
  content:"" !important;
  position:absolute !important;
  left:36px !important;
  top:calc(50% + 5px) !important;
  width:6px !important;
  height:1.7px !important;
  transform:rotate(45deg) !important;
  transform-origin:left center !important;
  background:var(--text-sub,#667781) !important;
  border-radius:2px !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:.9 !important;
}
.search-box-area .search-input{padding-left:46px !important;}

:root[data-theme="dark"] .search-box-area .search-input,
body[data-theme="dark"] .search-box-area .search-input,
:root[data-theme="dark"] .search-box-area #searchInput,
body[data-theme="dark"] .search-box-area #searchInput{
  background:var(--v30-dark-input) !important;
  color:#e9edef !important;
  -webkit-text-fill-color:#e9edef !important;
  border-color:rgba(255,255,255,.10) !important;
}
:root[data-theme="dark"] .search-box-area .search-input:focus,
body[data-theme="dark"] .search-box-area .search-input:focus,
:root[data-theme="dark"] .search-box-area #searchInput:focus,
body[data-theme="dark"] .search-box-area #searchInput:focus{
  border-color:var(--v30-green) !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--v30-green) 24%,transparent) !important;
}

/* ---------- Lists: app-like rows, no business logic changes ---------- */
.sidebar-scroll-content{
  background:var(--v30-light-bg) !important;
}
#roomList,#recentContactList,#contactList{width:100% !important;}
.room-item,
.contact-item,
#recentContactList > *,
#contactList > *{
  box-sizing:border-box !important;
}

@media (max-width:767px){
  .sidebar-menu .search-box-area{
    padding:8px 12px !important;
    min-height:54px !important;
    background:var(--v30-light-panel) !important;
    border:0 !important;
  }
  .sidebar-menu .search-box-area .search-input,
  .sidebar-menu .search-box-area #searchInput{
    height:38px !important;
    min-height:38px !important;
    font-size:13px !important;
    padding-right:44px !important;
  }
  .sidebar-menu .search-box-area::before{left:26px !important;width:13px !important;height:13px !important;}
  .sidebar-menu .search-box-area::after{left:37px !important;top:calc(50% + 5px) !important;width:6px !important;}

  /* Keep the existing create button, but make it the same circular language as the search pill. */
  .sidebar-menu .create-btn{
    width:38px !important;height:38px !important;min-width:38px !important;
    border-radius:50% !important;
    border:1px solid color-mix(in srgb,var(--v30-green) 38%,transparent) !important;
    background:color-mix(in srgb,var(--v30-green) 88%,white 12%) !important;
    color:#fff !important;
    box-shadow:0 4px 12px color-mix(in srgb,var(--v30-green) 24%,transparent) !important;
  }

  .sidebar-scroll-content{
    padding:4px 8px 10px !important;
    overflow-x:hidden !important;
    background:var(--v30-light-bg) !important;
  }
  .sidebar-scroll-content .section-header{display:none !important;}
  #roomSectionWrapper{margin:0 !important;padding:0 !important;}
  #tabMessagesSection,#tabContactsSection{gap:0 !important;}
  #roomList,#recentContactList,#contactList{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
  }

  .room-item,
  .contact-item,
  #recentContactList > *,
  #contactList > *{
    width:100% !important;
    min-height:58px !important;
    margin:0 !important;
    padding:7px 10px !important;
    border:1px solid rgba(15,23,42,.045) !important;
    border-radius:14px !important;
    background:var(--v30-light-panel) !important;
    box-shadow:0 1px 2px rgba(15,23,42,.035) !important;
  }
  .room-item:hover,.room-item:focus-visible,
  .contact-item:hover,.contact-item:focus-visible,
  #recentContactList > *:hover,#contactList > *:hover{
    background:color-mix(in srgb,var(--v30-green) 5%,var(--v30-light-panel)) !important;
  }
  .room-item + .room-item,
  .contact-item + .contact-item{border-top:1px solid rgba(15,23,42,.045) !important;}

  .room-title,.contact-name{
    color:var(--text-main,#172126) !important;
    font-size:13px !important;
    font-weight:650 !important;
  }
  .room-sub,.contact-sub,.status-text{
    color:var(--text-sub,#667781) !important;
    font-size:10px !important;
  }
  .online-name,.online-text,.chat-label,.room-sub .chat-label{color:var(--v30-green) !important;}
  .room-avt-wrap,.room-avt.is-private,.room-avt.is-group{flex:0 0 auto !important;}

  :root[data-theme="dark"] .sidebar-menu .search-box-area,
  body[data-theme="dark"] .sidebar-menu .search-box-area{background:var(--v30-dark-panel) !important;}
  :root[data-theme="dark"] .sidebar-scroll-content,
  body[data-theme="dark"] .sidebar-scroll-content{background:var(--v30-dark-bg) !important;}
  :root[data-theme="dark"] .room-item,
  :root[data-theme="dark"] .contact-item,
  :root[data-theme="dark"] #recentContactList > *,
  :root[data-theme="dark"] #contactList > *,
  body[data-theme="dark"] .room-item,
  body[data-theme="dark"] .contact-item,
  body[data-theme="dark"] #recentContactList > *,
  body[data-theme="dark"] #contactList > *{
    background:var(--v30-dark-panel) !important;
    border-color:rgba(255,255,255,.055) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.16) !important;
  }
  :root[data-theme="dark"] .room-title,
  :root[data-theme="dark"] .contact-name,
  body[data-theme="dark"] .room-title,
  body[data-theme="dark"] .contact-name{color:#e9edef !important;}
  :root[data-theme="dark"] .room-sub,
  :root[data-theme="dark"] .contact-sub,
  :root[data-theme="dark"] .status-text,
  body[data-theme="dark"] .room-sub,
  body[data-theme="dark"] .contact-sub,
  body[data-theme="dark"] .status-text{color:#8696a0 !important;}

  /* One outer rounded glass shell wrapping the four existing items. */
  .sidebar-icon{
    left:12px !important;
    right:12px !important;
    bottom:calc(6px + env(safe-area-inset-bottom,0px)) !important;
    width:auto !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    padding:3px !important;
    border-radius:24px !important;
    background:rgba(248,250,252,.92) !important;
    border:1px solid rgba(15,23,42,.10) !important;
    box-shadow:0 8px 24px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.98) !important;
    backdrop-filter:blur(22px) saturate(145%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
  }
  .sidebar-icon::before{display:none !important;}
  .sidebar-icon .nav-icons > .nav-icon,
  .sidebar-icon #adminPanelBtn,
  .sidebar-icon #settingsNavBtn{
    border-radius:20px !important;
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
    background:transparent !important;
    color:#667781 !important;
  }
  .sidebar-icon .nav-icons > .nav-icon.active,
  .sidebar-icon #adminPanelBtn.active,
  .sidebar-icon #settingsNavBtn.nav-settings-active{
    background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.40)) !important;
    border:1px solid rgba(255,255,255,.92) !important;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.98),0 3px 10px rgba(15,23,42,.13) !important;
    color:var(--v30-green) !important;
    transform:translateY(-1px) !important;
  }
  .sidebar-icon .nav-icons > .nav-icon.active::before,
  .sidebar-icon #adminPanelBtn.active::before,
  .sidebar-icon #settingsNavBtn.nav-settings-active::before{
    content:"" !important;display:block !important;left:18% !important;right:18% !important;top:3px !important;height:9px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0)) !important;
    border-radius:999px !important;position:absolute !important;z-index:1 !important;
  }
  .sidebar-icon .nav-icons > .nav-icon svg,
  .sidebar-icon #adminPanelBtn svg,
  .sidebar-icon #settingsNavBtn svg{width:20px !important;height:20px !important;z-index:2 !important;}
  .sidebar-icon .nav-icons > .nav-icon::after,
  .sidebar-icon #adminPanelBtn::after,
  .sidebar-icon #settingsNavBtn::after{font-size:8px !important;font-weight:650 !important;z-index:2 !important;}

  :root[data-theme="dark"] .sidebar-icon,
  body[data-theme="dark"] .sidebar-icon{
    background:rgba(17,27,33,.94) !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:0 9px 25px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  :root[data-theme="dark"] .sidebar-icon .nav-icons > .nav-icon,
  :root[data-theme="dark"] .sidebar-icon #adminPanelBtn,
  :root[data-theme="dark"] .sidebar-icon #settingsNavBtn,
  body[data-theme="dark"] .sidebar-icon .nav-icons > .nav-icon,
  body[data-theme="dark"] .sidebar-icon #adminPanelBtn,
  body[data-theme="dark"] .sidebar-icon #settingsNavBtn{color:#8696a0 !important;}
  :root[data-theme="dark"] .sidebar-icon .nav-icons > .nav-icon.active,
  :root[data-theme="dark"] .sidebar-icon #adminPanelBtn.active,
  :root[data-theme="dark"] .sidebar-icon #settingsNavBtn.nav-settings-active,
  body[data-theme="dark"] .sidebar-icon .nav-icons > .nav-icon.active,
  body[data-theme="dark"] .sidebar-icon #adminPanelBtn.active,
  body[data-theme="dark"] .sidebar-icon #settingsNavBtn.nav-settings-active{
    color:var(--v30-green) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.045)) !important;
    border-color:rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 3px 12px rgba(0,0,0,.28) !important;
  }
}

@media (min-width:768px){
  .sidebar-menu .search-box-area{padding:10px 12px !important;gap:8px !important;}
  .sidebar-menu .search-box-area .search-input{height:38px !important;min-height:38px !important;padding-left:42px !important;font-size:13px !important;}
  .sidebar-scroll-content{background:var(--bg-main,#f7f9fb) !important;}
  .room-item{border-radius:12px !important;}
}

:root[data-theme="dark"] .sidebar-scroll-content,
body[data-theme="dark"] .sidebar-scroll-content{background:var(--v30-dark-bg) !important;}