/* V3 TARGETED ONLY: compact icon-first search on PC/tablet/mobile. */

/* Remove only the separator lines around the two focused search areas. */
.search-box-area.v3-search-area,
.filter-tabs{
  border-bottom:0 !important;
}

/* Sidebar search: full width and visible placeholder */
.search-box-area.v3-search-area{
  position:relative !important;
  display: flex !important;
  align-items: center !important;
  gap:8px !important;
  width: 100% !important;
}
.search-box-area.v3-search-area::before{
  content:'⌕';
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  pointer-events:none;
  color:var(--text-sub);
  font-size:20px;
  line-height:1;
  transition:opacity .16s ease,transform .16s ease;
}
.search-box-area.v3-search-area .v3-search-input{
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 0 12px 0 38px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 20px !important;
  background: var(--input-bg) !important;
  color: var(--text-main) !important;
  cursor: text !important;
  outline: none !important;
  font-size: 13.5px !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.search-box-area.v3-search-area .v3-search-input::placeholder{
  color: var(--text-sub) !important;
  opacity: 0.8 !important;
}
.search-box-area.v3-search-area.v3-search-expanded .v3-search-input,
.search-box-area.v3-search-area .v3-search-input:focus{
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 0.18, transparent) !important;
}

/* Message search: same icon-first behavior on every viewport. */
.chat-header-right .v3-message-search-wrapper{
  position:relative !important;
  width:42px !important;
  flex:0 0 42px !important;
  height:38px !important;
  transition:width .22s ease,flex-basis .22s ease !important;
}
.chat-header-right .v3-message-search-wrapper::before{
  content:'⌕';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-52%);
  color:var(--text-sub);
  font-size:21px;
  line-height:1;
  z-index:3;
  pointer-events:none;
  transition:opacity .16s ease;
}
.chat-header-right .v3-message-search-wrapper .v3-message-search{
  width:42px !important;
  height:38px !important;
  box-sizing:border-box !important;
  padding:0 8px 0 34px !important;
  border:1px solid transparent !important;
  border-radius:11px !important;
  background:var(--input-bg) !important;
  color:transparent !important;
  font-size:13px !important;
  outline:none !important;
  cursor:pointer !important;
  transition:width .22s ease,border-color .18s ease,box-shadow .18s ease,color .12s ease !important;
}
.chat-header-right .v3-message-search-wrapper .v3-message-search::placeholder{color:transparent !important;}
.chat-header-right .v3-message-search-wrapper.v3-search-expanded{
  width:min(280px,32vw) !important;
  flex-basis:min(280px,32vw) !important;
}
.chat-header-right .v3-message-search-wrapper.v3-search-expanded::before{opacity:0;}
.chat-header-right .v3-message-search-wrapper.v3-search-expanded .v3-message-search,
.chat-header-right .v3-message-search-wrapper .v3-message-search:focus{
  width:100% !important;
  color:var(--text-main) !important;
  cursor:text !important;
  padding-left:13px !important;
  border-color:color-mix(in srgb,var(--primary) 42%,transparent) !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 10%,transparent) !important;
}
.chat-header-right .v3-message-search-wrapper.v3-search-expanded .v3-message-search::placeholder,
.chat-header-right .v3-message-search-wrapper .v3-message-search:focus::placeholder{color:var(--text-sub) !important;}

@media(max-width:767px){
  .search-box-area.v3-search-area::before{left:14px;font-size:20px;}
  .search-box-area.v3-search-area .v3-search-input{
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
  }
  .chat-header-right .v3-message-search-wrapper.v3-search-expanded{
    width:min(220px,calc(100vw - 104px)) !important;
    flex-basis:min(220px,calc(100vw - 104px)) !important;
  }
}

@media(min-width:768px){
  .search-box-area.v3-search-area .v3-search-input{
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}