/* VENTI 9.0-A8.3.2 — Smart Responsive Handoff UX
   Scoped only to the manager handoff selector. */

.vnt-ai-handoff-context-card{
  --hf-ink:#0f172a;
  --hf-muted:#64748b;
  --hf-muted-2:#94a3b8;
  --hf-surface:rgba(255,255,255,.98);
  --hf-line:rgba(148,163,184,.16);
  --hf-shadow:0 18px 50px rgba(15,23,42,.07);
  --hf-radius:24px;
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  padding:16px;
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 0%,rgba(79,70,229,.055),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.985),rgba(246,248,252,.985));
  border:1px solid var(--hf-line);
  box-shadow:var(--hf-shadow);
  animation:vntHandoffShellIn .34s cubic-bezier(.2,.72,.28,1) both;
}

.vnt-ai-handoff-context-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.55) 50%,transparent 58% 100%);
  transform:translateX(-115%);
  animation:vntHandoffSheen 1.15s .18s ease-out 1 both;
}

.vnt-handoff-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.vnt-handoff-head-main{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}

.vnt-handoff-head-icon{
  width:40px;
  height:40px;
  min-width:40px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#4f46e5;
  background:linear-gradient(135deg,rgba(79,70,229,.14),rgba(59,130,246,.12));
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.12);
  animation:vntHandoffIconFloat 3.8s ease-in-out infinite;
}

.vnt-handoff-head-icon i{font-size:18px}

.vnt-handoff-head-copy{min-width:0;flex:1 1 auto}
.vnt-handoff-head-copy strong{
  display:block;
  color:#111827;
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.015em;
}
.vnt-handoff-head-copy small{
  display:block;
  margin-top:4px;
  color:var(--hf-muted);
  font-size:12px;
  line-height:1.45;
  font-weight:600;
}

.vnt-handoff-head-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(79,70,229,.08);
  color:#4f46e5;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.vnt-handoff-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.vnt-handoff-choice{
  --hf-accent:#475569;
  --hf-accent-soft:rgba(100,116,139,.10);
  --hf-accent-bg:linear-gradient(135deg,rgba(100,116,139,.14),rgba(148,163,184,.12));
  --hf-accent-line:rgba(100,116,139,.24);

  position:relative;
  display:flex;
  align-items:stretch;
  gap:12px;
  width:100%;
  min-width:0;
  padding:12px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px rgba(15,23,42,.05);
  text-align:left;
  cursor:pointer;
  transform:translateY(8px);
  opacity:0;
  animation:vntHandoffCardIn .38s cubic-bezier(.2,.72,.28,1) var(--vnt-handoff-delay,0ms) forwards;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    opacity .18s ease;
}

.vnt-handoff-choice.is-product{
  --hf-accent:#2563eb;
  --hf-accent-soft:rgba(59,130,246,.10);
  --hf-accent-bg:linear-gradient(135deg,rgba(59,130,246,.16),rgba(99,102,241,.16));
  --hf-accent-line:rgba(59,130,246,.30);
}
.vnt-handoff-choice.is-cart{
  --hf-accent:#059669;
  --hf-accent-soft:rgba(16,185,129,.10);
  --hf-accent-bg:linear-gradient(135deg,rgba(16,185,129,.16),rgba(45,212,191,.14));
  --hf-accent-line:rgba(16,185,129,.28);
}
.vnt-handoff-choice.is-support_ticket{
  --hf-accent:#7c3aed;
  --hf-accent-soft:rgba(139,92,246,.10);
  --hf-accent-bg:linear-gradient(135deg,rgba(139,92,246,.16),rgba(217,70,239,.14));
  --hf-accent-line:rgba(139,92,246,.28);
}
.vnt-handoff-choice.is-order{
  --hf-accent:#ea580c;
  --hf-accent-soft:rgba(249,115,22,.10);
  --hf-accent-bg:linear-gradient(135deg,rgba(249,115,22,.16),rgba(245,158,11,.14));
  --hf-accent-line:rgba(249,115,22,.28);
}
.vnt-handoff-choice.is-favorite{
  --hf-accent:#db2777;
  --hf-accent-soft:rgba(236,72,153,.10);
  --hf-accent-bg:linear-gradient(135deg,rgba(236,72,153,.16),rgba(244,114,182,.14));
  --hf-accent-line:rgba(236,72,153,.28);
}

.vnt-handoff-choice:hover{
  transform:translateY(-2px);
  border-color:var(--hf-accent-line);
  box-shadow:0 18px 38px rgba(15,23,42,.08);
  background:linear-gradient(180deg,#fff,rgba(248,250,252,.98));
}

.vnt-handoff-choice:focus-visible{
  outline:none;
  border-color:var(--hf-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--hf-accent) 16%,transparent),0 18px 38px rgba(15,23,42,.08);
}

.vnt-handoff-choice:disabled{cursor:default}
.vnt-handoff-choice:disabled:not(.is-loading):not(.is-selected){opacity:.48}

.vnt-handoff-rail{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:20px 0 0 20px;
  background:var(--hf-accent);
  transform:scaleY(.68);
  transform-origin:center;
  transition:transform .18s ease;
}
.vnt-handoff-choice:hover .vnt-handoff-rail{transform:scaleY(1)}

.vnt-handoff-icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--hf-accent);
  background:var(--hf-accent-bg);
  box-shadow:inset 0 0 0 1px var(--hf-accent-line);
  transition:transform .18s ease,box-shadow .18s ease;
}
.vnt-handoff-icon i{font-size:22px}
.vnt-handoff-choice:hover .vnt-handoff-icon{
  transform:translateY(-1px) rotate(-2deg) scale(1.025);
  box-shadow:inset 0 0 0 1px var(--hf-accent-line),0 10px 22px color-mix(in srgb,var(--hf-accent) 10%,transparent);
}

.vnt-handoff-body{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.vnt-handoff-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.vnt-handoff-title-wrap{min-width:0;flex:1 1 auto}
.vnt-handoff-title{
  display:block;
  color:var(--hf-ink);
  font-size:15px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.01em;
}
.vnt-handoff-subtitle{
  display:block;
  margin-top:4px;
  color:var(--hf-muted);
  font-size:12px;
  line-height:1.45;
  font-weight:600;
  overflow-wrap:anywhere;
}

.vnt-handoff-action{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:var(--hf-accent-soft);
  color:var(--hf-accent);
  font-size:11px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  transition:transform .18s ease,background .18s ease;
}
.vnt-handoff-action i{
  font-size:14px;
  transition:transform .18s ease;
}
.vnt-handoff-choice:hover .vnt-handoff-action{transform:translateX(1px)}
.vnt-handoff-choice:hover .vnt-handoff-action i{transform:translateX(2px)}

.vnt-handoff-detail{
  color:#475569;
  font-size:11.5px;
  line-height:1.5;
  font-weight:500;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.vnt-handoff-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.vnt-handoff-kind{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(15,23,42,.035);
  color:#334155;
  font-size:11px;
  line-height:1;
  font-weight:700;
}
.vnt-handoff-kind i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--hf-accent);
  box-shadow:0 0 0 4px var(--hf-accent-soft);
}
.vnt-handoff-kind span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vnt-handoff-note{
  color:var(--hf-muted-2);
  font-size:11px;
  font-weight:800;
}

.vnt-handoff-choice.is-loading{
  pointer-events:none;
  border-color:var(--hf-accent-line);
}
.vnt-handoff-choice.is-loading .vnt-handoff-action span{font-size:0}
.vnt-handoff-choice.is-loading .vnt-handoff-action span::after{
  content:"Hazırlanıyor";
  font-size:11px;
}
.vnt-handoff-choice.is-loading .vnt-handoff-action i{
  animation:vntHandoffSpin .8s linear infinite;
}
.vnt-handoff-choice.is-loading .vnt-handoff-action i::before{content:"\f130"}

.vnt-handoff-choice.is-selected{
  border-color:var(--hf-accent-line);
  background:linear-gradient(180deg,#fff,var(--hf-accent-soft));
  transform:scale(.99);
}
.vnt-handoff-choice.is-error{animation:vntHandoffShake .34s ease both}

/* Smart CSS — reacts to the actual panel/card width, not only viewport. */
@container (max-width:560px){
  .vnt-ai-handoff-context-card{
    padding:12px;
    border-radius:20px;
  }
  .vnt-handoff-head{
    gap:10px;
    margin-bottom:10px;
  }
  .vnt-handoff-head-icon{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:12px;
  }
  .vnt-handoff-head-icon i{font-size:16px}
  .vnt-handoff-head-copy strong{font-size:14px}
  .vnt-handoff-head-copy small{
    font-size:11px;
    line-height:1.35;
  }
  .vnt-handoff-head-meta{
    padding:6px 8px;
    font-size:10px;
  }
  .vnt-handoff-grid{
    grid-template-columns:1fr;
    gap:8px;
  }
  .vnt-handoff-choice{
    gap:10px;
    padding:10px 11px;
    border-radius:16px;
    min-height:88px;
  }
  .vnt-handoff-rail{border-radius:16px 0 0 16px}
  .vnt-handoff-icon{
    flex-basis:44px;
    width:44px;
    height:44px;
    border-radius:13px;
  }
  .vnt-handoff-icon i{font-size:18px}
  .vnt-handoff-body{gap:6px}
  .vnt-handoff-top{gap:8px}
  .vnt-handoff-title{font-size:13px}
  .vnt-handoff-subtitle{
    margin-top:2px;
    font-size:10.8px;
    line-height:1.32;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .vnt-handoff-action{
    padding:6px 8px;
    font-size:10px;
  }
  .vnt-handoff-detail{
    font-size:10.8px;
    line-height:1.38;
    -webkit-line-clamp:1;
  }
  .vnt-handoff-kind{
    padding:5px 8px;
    font-size:9.8px;
  }
  .vnt-handoff-note{font-size:9.8px}
}

@container (max-width:390px){
  .vnt-handoff-head-meta span{display:none}
  .vnt-handoff-head-meta{width:30px;height:30px;padding:0;justify-content:center}
  .vnt-handoff-choice{
    min-height:78px;
    padding:9px 10px;
  }
  .vnt-handoff-icon{
    flex-basis:40px;
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .vnt-handoff-action span{display:none}
  .vnt-handoff-action{
    width:28px;
    height:28px;
    padding:0;
    justify-content:center;
  }
  .vnt-handoff-detail{display:none}
  .vnt-handoff-footer{margin-top:1px}
}

/* Browser fallback when container queries are unavailable. */
@media (max-width:767.98px){
  .vnt-ai-handoff-context-card{
    padding:12px;
    border-radius:20px;
  }
  .vnt-handoff-grid{grid-template-columns:1fr;gap:8px}
  .vnt-handoff-choice{padding:10px 11px;gap:10px;border-radius:16px}
  .vnt-handoff-icon{flex-basis:44px;width:44px;height:44px;border-radius:13px}
  .vnt-handoff-title{font-size:13px}
  .vnt-handoff-detail{font-size:10.8px;-webkit-line-clamp:1}
}

@media (max-width:420px){
  .vnt-handoff-head-copy small{display:none}
  .vnt-handoff-choice{padding:9px 10px}
  .vnt-handoff-note{display:none}
}

@media (prefers-reduced-motion:reduce){
  .vnt-ai-handoff-context-card,
  .vnt-ai-handoff-context-card::after,
  .vnt-handoff-head-icon,
  .vnt-handoff-choice,
  .vnt-handoff-choice.is-error,
  .vnt-handoff-choice.is-loading .vnt-handoff-action i{
    animation:none !important;
    transition:none !important;
  }
  .vnt-handoff-choice{opacity:1;transform:none}
}

@keyframes vntHandoffShellIn{
  from{opacity:0;transform:translateY(8px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes vntHandoffCardIn{
  from{opacity:0;transform:translateY(9px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes vntHandoffSheen{
  0%{transform:translateX(-115%)}
  100%{transform:translateX(115%)}
}
@keyframes vntHandoffIconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes vntHandoffSpin{to{transform:rotate(360deg)}}
@keyframes vntHandoffShake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-3px)}
  60%{transform:translateX(3px)}
}


/* A8.3.3 — desktop density tune */
@media (min-width:768px){
  .vnt-ai-handoff-context-card{
    padding:15px;
    border-radius:21px;
  }
  .vnt-handoff-head{
    margin-bottom:11px;
  }
  .vnt-handoff-head-icon{
    width:39px;
    height:39px;
    min-width:39px;
  }
  .vnt-handoff-head-copy strong{
    font-size:14.5px;
  }
  .vnt-handoff-grid{
    gap:10px;
  }
  .vnt-handoff-choice{
    padding:11px 12px;
    gap:11px;
    border-radius:17px;
  }
  .vnt-handoff-icon{
    flex-basis:50px;
    width:50px;
    height:50px;
    border-radius:15px;
  }
  .vnt-handoff-icon i{
    font-size:19px;
  }
  .vnt-handoff-title{
    font-size:13.5px;
  }
  .vnt-handoff-subtitle,
  .vnt-handoff-detail{
    font-size:11px;
  }
  .vnt-handoff-action,
  .vnt-handoff-kind,
  .vnt-handoff-note{
    font-size:10px;
  }
}