/* Global image search camera UI */

.home-search-bar.home-search-bar-split{
  display:grid !important;
  grid-template-columns:1fr 1px 1fr !important;
  align-items:center !important;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden !important;
}

.home-search-bar.home-search-bar-split .visual-search-header-trigger,
.home-search-bar.home-search-bar-split .search-text-link{
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  text-decoration:none !important;
}

.home-search-bar.home-search-bar-split .visual-search-header-trigger{
  border-radius:999px 0 0 999px !important;
  background:linear-gradient(135deg,#ff2fa8,#7b2cff,#0ea5e9) !important;
  color:#fff !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

.home-search-bar.home-search-bar-split .visual-search-header-trigger svg{
  width:17px !important;
  height:17px !important;
  stroke:#fff !important;
  stroke-width:2.15 !important;
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.home-search-bar.home-search-bar-split .visual-search-split-divider{
  width:1px;
  height:58%;
  display:block;
  background:linear-gradient(180deg,transparent,rgba(123,44,255,.32),transparent);
}

.home-search-bar.home-search-bar-split .search-text-link{
  border-radius:0 999px 999px 0 !important;
  padding:0 6px !important;
  color:#5d5368 !important;
  font-size:13px !important;
  font-weight:850 !important;
  letter-spacing:.1px;
  background:rgba(255,255,255,.72);
}

.home-search-bar.home-search-bar-split .search-placeholder{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.visual-search-scanner[hidden],
.visual-search-status[hidden]{
  display:none !important;
}

html.visual-search-scanner-open,
html.visual-search-scanner-open body{
  overflow:hidden;
}

.visual-search-scanner{
  position:fixed;
  inset:0;
  z-index:2000;
  overflow:hidden;
  background:#02030a;
  color:#fff;
  isolation:isolate;
}

.visual-search-camera-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#02030a;
  z-index:1;
}

.visual-search-capture-canvas{
  display:none !important;
}

.visual-search-scanner-shade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.54),transparent 21%,transparent 72%,rgba(0,0,0,.74));
}

.visual-search-scanner-top{
  position:absolute;
  top:calc(16px + env(safe-area-inset-top, 0px));
  left:18px;
  right:18px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.visual-search-top-tools{
  display:flex;
  align-items:center;
  gap:8px;
}

.visual-search-tool-button{
  width:35px;
  height:35px;
  border:0;
  border-radius:14px;
  color:#fff;
  background:rgba(20,20,24,.72);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:16px;
  font-weight:950;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.visual-search-tool-button:disabled{
  opacity:.42;
}

.visual-search-tool-button.is-active,
.visual-search-qr-button.is-active{
  background:linear-gradient(135deg,#22c55e,#0ea5e9);
}

.visual-search-close{
  margin-left:auto;
  font-size:24px;
  line-height:1;
}

.visual-search-scan-frame{
  display:none;
  position:absolute;
  left:10%;
  right:10%;
  top:22%;
  height:34%;
  z-index:4;
  pointer-events:none;
  border-radius:28px;
}

.visual-search-scanner.visual-search-qr-mode .visual-search-scan-frame{
  display:block;
}

.visual-search-corner{
  position:absolute;
  width:42px;
  height:42px;
  border-color:rgba(255,255,255,.90);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
}

.visual-search-corner.top-left{top:0;left:0;border-top:4px solid;border-left:4px solid;border-radius:18px 0 0 0;}
.visual-search-corner.top-right{top:0;right:0;border-top:4px solid;border-right:4px solid;border-radius:0 18px 0 0;}
.visual-search-corner.bottom-left{bottom:0;left:0;border-bottom:4px solid;border-left:4px solid;border-radius:0 0 0 18px;}
.visual-search-corner.bottom-right{right:0;bottom:0;border-bottom:4px solid;border-right:4px solid;border-radius:0 0 18px 0;}

.visual-search-scan-line{
  position:absolute;
  left:16px;
  right:16px;
  top:50%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#22d3ee,#f472b6,transparent);
  box-shadow:0 0 18px rgba(34,211,238,.75);
  animation:visualSearchScanMove 2.4s ease-in-out infinite;
}

@keyframes visualSearchScanMove{
  0%,100%{transform:translateY(-70px);opacity:.45;}
  50%{transform:translateY(70px);opacity:1;}
}

.visual-search-scanner-bottom{
  position:absolute;
  left:20px;
  right:20px;
  bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  z-index:6;
  display:grid;
  grid-template-columns:64px 1fr 64px;
  align-items:center;
  gap:12px;
}

.visual-search-round-button{
  border:0;
  background:transparent;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:850;
}

.visual-search-round-button span{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:22px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.visual-search-capture-button{
  justify-self:center;
  width:57px;
  height:57px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.23);
  box-shadow:0 0 0 5px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.28);
}

.visual-search-capture-button span{
  width:43px;
  height:43px;
  border-radius:50%;
  display:block;
  background:linear-gradient(135deg,#ff7a18,#ff2fa8,#7b2cff);
}

.visual-search-file-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.visual-search-status{
  position:absolute;
  left:18px;
  right:18px;
  bottom:calc(124px + env(safe-area-inset-bottom, 0px));
  z-index:7;
  max-width:calc(100% - 36px);
  margin:0 auto;
  border-radius:16px;
  padding:11px 12px;
  font-size:12.5px;
  line-height:1.45;
  font-weight:850;
  text-align:center;
  color:#eaf2ff;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.visual-search-status-error{
  color:#fff1f2;
  background:rgba(127,29,29,.68);
  border-color:rgba(244,63,94,.38);
}

.visual-search-status-info{
  color:#eaf2ff;
}

.visual-search-result-stage .search-state,
.visual-search-result-message{
  display:block;
  border-radius:18px;
  padding:18px 16px;
  background:rgba(255,255,255,.96);
  color:#3f354a;
  font-weight:900;
  text-align:center;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}

@media (max-width:380px){
  .visual-search-tool-button{width:34px;height:34px;font-size:15px;}
  .visual-search-round-button span{width:39px;height:39px;font-size:21px;}
  .visual-search-scanner-bottom{grid-template-columns:60px 1fr 60px;gap:10px;}
  .visual-search-capture-button{width:56px;height:56px;}
  .visual-search-capture-button span{width:42px;height:42px;}
}


/* Feed Management visual search camera switch */
html.visual-search-camera-disabled .home-search-bar.home-search-bar-split{
  grid-template-columns:1fr !important;
}

html.visual-search-camera-disabled .home-search-bar.home-search-bar-split .visual-search-header-trigger,
html.visual-search-camera-disabled .home-search-bar.home-search-bar-split .visual-search-split-divider{
  display:none !important;
}

html.visual-search-camera-disabled .home-search-bar.home-search-bar-split .search-text-link{
  grid-column:1 / -1 !important;
  border-radius:999px !important;
}