/* ============================================================
   OMNICHAT V2 - Navigation, Hero, Unified Inbox product UI
   ============================================================ */

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(8,9,11,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:28px; }

.brand{ display:flex; align-items:center; gap:11px; }
/* Semnul din LOGO.svg. Nu mai are cutie in jur si nici inelul care se rotea:
   logo-ul are forma lui, nu are nevoie de rama. */
.brand__mark{
  width:30px; height:30px; position:relative; flex:none;
  display:grid; place-items:center;
}
/* Logo-ul cu wordmark din antet. Inaltimea o dam noi, latimea vine din
   proportia desenului (~5.1:1), ca sa nu-l deformam. */
.brand--full{ flex:none; }
.oc-wordmark{ height:30px; width:auto; display:block; }
@media (max-width:520px){ .oc-wordmark{ height:26px; } }

.oc-logo{ width:100%; height:100%; display:block; }
.oc-logo--mark{
  filter:drop-shadow(0 0 10px rgba(var(--teal-rgb),.28));
  transition:filter .35s var(--ease), transform .35s var(--ease-out);
}
.brand:hover .oc-logo--mark{
  filter:drop-shadow(0 0 16px rgba(var(--teal-rgb),.5));
  transform:scale(1.06);
}
@media (prefers-reduced-motion: reduce){
  .oc-logo--mark{ transition:none; }
  .brand:hover .oc-logo--mark{ transform:none; }
}
.brand__name{ font-size:.98rem; font-weight:600; letter-spacing:-.02em; }
.brand__name span{ font-weight:400; color:var(--text-2); }

.nav__links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav__link{
  font-size:.86rem; color:var(--text-2); position:relative; padding:6px 0;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--uv); transition:width .35s var(--ease);
}
.nav__link:hover{ color:var(--text); }
.nav__link:hover::after{ width:100%; }

.nav__cta{ display:flex; align-items:center; gap:12px; }

.nav__burger{ display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:2px; place-items:center; }
.nav__burger span{ display:block; width:16px; height:1px; background:var(--text); position:relative; }
.nav__burger span::before,.nav__burger span::after{
  content:""; position:absolute; left:0; width:16px; height:1px; background:var(--text); transition:.3s var(--ease);
}
.nav__burger span::before{ top:-5px; } .nav__burger span::after{ top:5px; }
.nav.is-open .nav__burger span{ background:transparent; }
.nav.is-open .nav__burger span::before{ transform:rotate(45deg); top:0; }
.nav.is-open .nav__burger span::after{ transform:rotate(-45deg); top:0; }

.navdrop{
  position:fixed; top:72px; left:0; right:0; z-index:79;
  background:rgba(8,9,11,.98); border-bottom:1px solid var(--line);
  padding:8px clamp(20px,4vw,56px) 28px;
  display:none; flex-direction:column;
}
.navdrop.is-open{ display:flex; }
.navdrop a{ padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:1.05rem; color:var(--text-2); }
.navdrop .btn{ margin-top:22px; }

/* Scroll progress */
.progress{ position:fixed; top:0; left:0; height:1px; background:var(--uv); z-index:90; width:0; box-shadow:0 0 10px var(--uv-glow); }

/* ---------------- HERO ---------------- */
.hero{ position:relative; padding-top:clamp(120px, 15vh, 172px); padding-bottom:clamp(60px,7vw,110px); }
.hero__top{ align-items:end; }
.hero__copy{ grid-column:1 / span 7; }
.hero__aside{ grid-column:9 / span 4; padding-bottom:10px; }

.hero__h1{ margin:0; font-family:var(--display); font-size:clamp(2.45rem, 5.3vw, 5rem); line-height:1.02; letter-spacing:-.04em; font-weight:800; }
.hero__h1 .ser{ font-size:1em; line-height:inherit; }
.hero__sub{ margin:32px 0 0; max-width:46ch; }

.hero__actions{ display:flex; align-items:center; gap:14px; margin-top:40px; flex-wrap:wrap; }
.hero__meta{
  margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3);
}
.hero__meta i{ width:3px; height:3px; border-radius:50%; background:var(--uv); display:inline-block; }

.hero__aside .kpi{ border-top:1px solid var(--line); padding-top:14px; }
.hero__aside .kpi + .kpi{ margin-top:18px; }
.kpi__n{ font-family:var(--display); font-size:1.9rem; letter-spacing:-.03em; line-height:1; font-weight:800; }
.kpi__n small{ font-size:.9rem; color:var(--text-3); margin-left:2px; }
.kpi__l{ margin-top:7px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }

/* ---------------- PRODUCT UI : UNIFIED INBOX ---------------- */
.stage{ position:relative; margin-top:clamp(56px,7vw,96px); }

.stage__frame{
  position:relative; border:1px solid var(--line); background:var(--bg-panel);
  border-radius:4px; overflow:hidden;
  box-shadow:0 60px 160px -60px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset;
  transform:perspective(2200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s var(--ease-out);
}
.stage__frame::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(600px 300px at var(--mx,50%) var(--my,0%), rgba(var(--uv-rgb),.09), transparent 70%);
  transition:background .2s linear;
}

/* window chrome */
.win{ display:flex; align-items:center; gap:14px; height:44px; padding:0 16px; border-bottom:1px solid var(--line); background:var(--bg-raised); }
.win__dots{ display:flex; gap:6px; }
.win__dots i{ width:8px; height:8px; border-radius:50%; background:#212228; display:block; }
.win__path{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--text-3); text-transform:uppercase; }
.win__right{ margin-left:auto; display:flex; align-items:center; gap:16px; }

.pill-ai{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--uv-hair); background:var(--uv-wash);
  padding:5px 11px; border-radius:2px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--uv-bright);
}
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--uv-bright); position:relative; flex:none; }
.pulse::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:inherit;
  animation:pulsering 2s var(--ease-out) infinite;
}
@keyframes pulsering{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3.4); opacity:0; } }

/* inbox grid */
.inbox{ display:grid; grid-template-columns:58px 262px minmax(0,1fr) 268px; min-height:520px; }
.inbox > * + *{ border-left:1px solid var(--line); }

/* rail */
.rail{ display:flex; flex-direction:column; align-items:center; padding:14px 0; gap:6px; background:var(--bg-inset); }
.rail__btn{
  width:34px; height:34px; display:grid; place-items:center; border-radius:2px;
  color:var(--text-4); border:1px solid transparent; transition:.3s var(--ease); position:relative;
}
.rail__btn svg{ width:16px; height:16px; }
.rail__btn:hover{ color:var(--text-2); background:rgba(255,255,255,.03); }
.rail__btn.is-on{ color:var(--uv-bright); border-color:var(--uv-hair); background:var(--uv-wash); }
.rail__sp{ flex:1; }
.rail__av{ width:26px; height:26px; border-radius:50%; background:linear-gradient(140deg,#2A2B33,#15161B); border:1px solid var(--line); }

/* thread list */
.threads{ display:flex; flex-direction:column; background:var(--bg-raised); }
.threads__hd{
  height:46px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; border-bottom:1px solid var(--line);
}
.threads__title{ font-size:.82rem; font-weight:500; letter-spacing:-.01em; }
.threads__count{ font-family:var(--mono); font-size:10px; color:var(--text-3); }
.threads__list{ overflow:hidden; flex:1; }

.thread{
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:11px;
  padding:13px 14px; border-bottom:1px solid var(--line-soft);
  cursor:pointer; position:relative; transition:background .3s var(--ease);
}
.thread::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--uv);
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease-out);
}
.thread:hover{ background:rgba(255,255,255,.02); }
.thread.is-active{ background:rgba(var(--uv-rgb),.055); }
.thread.is-active::before{ transform:scaleY(1); }

.thread__ch{
  width:26px; height:26px; border-radius:3px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--bg-panel); color:var(--text-2);
}
.thread__ch svg{ width:13px; height:13px; }
.thread__name{ font-size:.82rem; font-weight:500; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.thread__time{ font-family:var(--mono); font-size:9.5px; color:var(--text-4); font-weight:400; flex:none; }
.thread__prev{
  font-size:.76rem; color:var(--text-3); margin-top:3px; padding-right:38px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.thread__badge{
  position:absolute; right:14px; bottom:13px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  color:var(--uv-bright); background:var(--uv-wash); border:1px solid var(--uv-hair);
  padding:1px 5px; border-radius:2px; opacity:0; transform:translateY(4px);
  transition:.4s var(--ease-out);
}
.thread.is-new .thread__badge{ opacity:1; transform:none; }

/* conversation */
.conv{ display:flex; flex-direction:column; background:var(--bg-panel); min-width:0; }
.conv__hd{
  height:46px; display:flex; align-items:center; gap:11px; padding:0 18px;
  border-bottom:1px solid var(--line);
}
.conv__av{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:linear-gradient(140deg, #33344080, #1A1B21); border:1px solid var(--line);
  display:grid; place-items:center; font-size:10px; font-weight:600; color:var(--text-2);
}
.conv__who{ font-size:.83rem; font-weight:500; line-height:1.2; }
.conv__ch{ font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3); margin-top:2px; display:flex; align-items:center; gap:6px; }
.conv__ch b{ color:var(--uv-bright); font-weight:500; }
.conv__hd-r{ margin-left:auto; display:flex; align-items:center; gap:8px; }

.chipbtn{
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px;
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); transition:.3s var(--ease); white-space:nowrap;
}
.chipbtn svg{ width:12px; height:12px; }
.chipbtn:hover{ color:var(--text); border-color:var(--line-strong); }
.chipbtn.is-hot{ color:var(--sig-warn); border-color:rgba(226,177,94,.35); background:rgba(226,177,94,.07); }

.conv__body{
  flex:1; padding:20px 18px; display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
  overflow:hidden; position:relative;
  background-image:radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:22px 22px;
}

.msg{ max-width:78%; display:flex; flex-direction:column; gap:5px; animation:msgin .55s var(--ease-out) both; }
@keyframes msgin{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.msg__b{
  padding:11px 14px; border-radius:3px; font-size:.845rem; line-height:1.5;
  border:1px solid var(--line); background:var(--bg-elevated); color:var(--text);
}
.msg__m{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-4); }
.msg--in{ align-self:flex-start; }
.msg--out{ align-self:flex-end; align-items:flex-end; }
.msg--out .msg__b{
  background:linear-gradient(160deg, rgba(var(--uv-rgb),.20), rgba(var(--uv-rgb),.10));
  border-color:var(--uv-hair); color:#EDE9FF;
}
.msg--op .msg__b{ background:rgba(var(--teal-rgb),.09); border-color:rgba(var(--teal-rgb),.28); color:#DCF3EB; }
.msg--sys{
  align-self:center; max-width:100%;
}
.msg--sys .msg__b{
  background:transparent; border:1px dashed var(--line); color:var(--text-3);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:7px 12px;
}

.typing{ display:inline-flex; gap:4px; align-items:center; padding:13px 15px; }
.typing i{ width:4px; height:4px; border-radius:50%; background:var(--text-3); animation:typedot 1.3s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes typedot{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.conv__ai{
  border-top:1px solid var(--line); padding:11px 18px;
  display:flex; align-items:center; gap:12px; background:var(--bg-raised);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3);
}
.conv__ai .bar{ flex:1; height:1px; background:var(--line); position:relative; overflow:hidden; }
.conv__ai .bar b{
  position:absolute; inset:0; background:linear-gradient(90deg, transparent, var(--uv), transparent);
  transform:translateX(-100%); animation:scan 2.4s var(--ease) infinite;
}
@keyframes scan{ to{ transform:translateX(100%); } }
.conv__ai .state{ color:var(--uv-bright); }

/* context panel */
.ctx{ background:var(--bg-raised); display:flex; flex-direction:column; }
.ctx__hd{ height:46px; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid var(--line); }
.ctx__hd span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.ctx__body{ padding:18px 16px; display:flex; flex-direction:column; gap:18px; }

.prof{ display:flex; align-items:center; gap:11px; }
.prof__av{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:linear-gradient(150deg,#2E2F3A,#161720); border:1px solid var(--line);
  display:grid; place-items:center; font-size:11px; font-weight:600; color:var(--text-2);
}
.prof__n{ font-size:.86rem; font-weight:500; }
.prof__s{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--text-4); margin-top:3px; }

.meter{ }
.meter__hd{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.meter__l{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); }
.meter__v{ font-size:1.02rem; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.meter__track{ height:2px; background:var(--line); position:relative; }
.meter__fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--uv); transition:width 1s var(--ease-out); box-shadow:0 0 10px var(--uv-glow); }
.meter__fill--pos{ background:var(--sig-pos); box-shadow:0 0 10px rgba(var(--teal-rgb),.4); }

.ctx__facts{ display:flex; flex-direction:column; }
.fact{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid var(--line-soft); font-size:.78rem; }
.fact span{ color:var(--text-3); font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; }
.fact b{ font-weight:500; }

.handoff{
  border:1px solid var(--line); border-radius:2px; padding:12px; background:var(--bg-panel);
}
.handoff__t{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:9px; }
.handoff .btn{ --h:34px; font-size:.78rem; }

/* floating micro labels */
.micro{
  position:absolute; z-index:6; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-2); background:rgba(8,9,11,.82); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:2px; padding:5px 9px; white-space:nowrap;
  animation:floaty 7s ease-in-out infinite;
}
.micro i{ width:5px; height:5px; border-radius:50%; background:var(--uv); box-shadow:0 0 9px var(--uv-glow); }
.micro::after{ content:""; position:absolute; top:50%; width:14px; height:1px; background:var(--line-strong); }
.micro--tl::after,.micro--bl::after{ right:-15px; }
.micro--tr::after,.micro--br::after{ left:-15px; }
.micro--tl{ top:86px; left:-16px; transform:translateX(-100%); }
.micro--tr{ top:148px; right:-16px; transform:translateX(100%); animation-delay:-1.6s; }
.micro--bl{ bottom:132px; left:-16px; transform:translateX(-100%); animation-delay:-3.1s; }
.micro--br{ bottom:64px; right:-16px; transform:translateX(100%); animation-delay:-4.6s; }
@keyframes floaty{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }

@media (max-width:1479px){ .micro{ display:none; } }

/* trust strip */
.trust{ padding:28px 0 0; }
.trust__row{ display:flex; align-items:center; gap:clamp(24px,4vw,64px); flex-wrap:wrap; justify-content:space-between; }
.trust__l{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-4); }
.trust__logos{ display:flex; align-items:center; gap:clamp(22px,3.4vw,48px); flex-wrap:wrap; }
.trust__logos span{ font-size:.95rem; font-weight:500; letter-spacing:-.01em; color:var(--text-4); transition:color .3s var(--ease); }
.trust__logos span:hover{ color:var(--text-2); }