/* universe.css – v9 (AI-native dynamic polish; no functional changes) */

/* ── App tokens (fallbacks) ── */
:root{
  --brand:#0ea5e9; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --bg:#fff;

  --glass: rgba(255,255,255,.68);
  --shadow-sm: 0 2px 10px rgba(15,23,42,.06);
  --shadow-md: 0 10px 30px rgba(2,12,27,.10);
  --shadow-lg: 0 18px 50px rgba(2,12,27,.18);
  --radius: 12px;
  --grad: conic-gradient(from 180deg at 50% 50%, #7c3aed 0deg, #06b6d4 120deg, #0ea5e9 240deg, #7c3aed 360deg);
  --brand-grad: linear-gradient(135deg, #0ea5e9, #06b6d4 40%, #7c3aed 100%);
}

/* ── Two–pane layout with neural background ── */
#uv-wrapper{
  display:flex; flex-direction:column; height:calc(100vh - 108px);
  position:relative; isolation:isolate;
}
#uv-wrapper::before{
  /* soft neural grid spotlight that follows pointer (via --mx) */
  content:""; position:absolute; inset:-20px; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 600px at var(--mx,60%) -10%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(1200px 600px at 120% 20%, rgba(124,58,237,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(2,8,23,.04) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(2,8,23,.04) 0 1px, transparent 1px 120px);
  mask: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.25));
}
#uv-wrapper::after{
  content:""; position:absolute; inset:-24px; z-index:-3; pointer-events:none;
  background: var(--grad); opacity:.08; filter: blur(40px); animation: uvSpin 28s linear infinite;
}
@keyframes uvSpin { to { transform: rotate(360deg); } }

#uv-data{flex:0 0 65%; overflow:auto; margin-bottom:12px}

/* Chat pane */
#uv-chat-wrap{flex:1 1 auto; overflow:auto; display:flex; flex-direction:column}

/* slim scrollbar (chat only) */
#uv-chat-wrap::-webkit-scrollbar{width:6px}
#uv-chat-wrap::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* ── Data pane (glassy card) ── */
#uv-data{
  border:1px solid var(--line); border-radius:10px; background:var(--glass);
  backdrop-filter:saturate(160%) blur(6px); box-shadow:var(--shadow-md); padding:0 0 14px;
  position:relative; overflow:auto;
}
#uv-data::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(14,165,233,.35), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* table */
#uv-grid{width:100%; border-collapse:collapse; font-size:14px; table-layout:fixed}
#uv-grid thead th{
  position:sticky; top:0; z-index:1; background:rgba(248,250,252,.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color:var(--ink); padding:8px; text-align:left; border-bottom:1px solid var(--line);
}
#uv-data.scrolled #uv-grid thead th{ box-shadow:0 6px 18px rgba(2,8,23,.08); }
#uv-grid tbody td{ padding:8px; border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#uv-grid tbody tr:nth-child(even){ background:#fcfdff }
#uv-grid.hidden{ display:none }
#uv-grid .uv-name{ color:var(--brand); text-decoration:underline; cursor:pointer }

/* contextual row highlight */
#uv-grid tbody tr:hover{
  background:linear-gradient(90deg, rgba(14,165,233,.06), transparent 60%);
}

/* CRM / Campaign flags */
.uv-crm td{ background:#fff7e3 !important }
.uv-campaign td{ background:#e6f7ff !important }
.uv-crm.uv-campaign td{ background:#d9f7be !important }

#uv-count{ display:block; margin:8px 0 0; font-size:13px; color:var(--muted) }

/* spinner */
#uv-spinner{ display:flex; justify-content:center; align-items:center; padding:40px 0 }
#uv-spinner.hidden{ display:none }
.uv-spin{ width:34px; height:34px; border-radius:50%; border:4px solid var(--brand); border-top-color:transparent; animation:uvSpin .8s linear infinite }

/* Criteria pills */
#uv-criteria-bar{ display:none }
#uv-criteria-bar.shown{
  display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px;
}
.uv-pill{
  background:var(--brand); color:#fff; font-size:13px; font-weight:700; padding:4px 12px;
  border-radius:999px; white-space:nowrap; box-shadow:0 6px 16px rgba(14,165,233,.25);
}

/* ── Chat pane (glassy card) ── */
#uv-chat-wrap{
  border:1px solid var(--line); border-radius:10px; background:var(--glass); padding:0 16px 12px;
  backdrop-filter:saturate(150%) blur(6px); box-shadow:var(--shadow-md);
  position:relative;
}
#uv-chat-wrap::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(180deg, rgba(14,165,233,.35), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
#uv-chat{ flex:1 1 auto; overflow:auto; padding-top:12px }
#uv-entry{ padding-top:8px }
#uv-input{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font:14px/1.4 'Inter',sans-serif; background:#fff; transition: box-shadow .2s ease, border-color .2s ease;
}
#uv-input:focus{
  outline:none; border-color: color-mix(in srgb, var(--brand), #ffffff 30%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* chat bubbles */
.uv-bot,.uv-me{
  max-width:640px; padding:10px 12px; margin:6px 0; font:14px/1.45 'Inter',sans-serif;
  border-radius:12px; white-space:pre-wrap; word-break:break-word; box-shadow:var(--shadow-sm);
}
.uv-bot{ background:#eef4ff; color:#102438; align-self:flex-start; border-bottom-right-radius:2px; }
.uv-me{  background:#e7f6e7; color:#102438; align-self:flex-end;   border-bottom-left-radius:2px; }

/* ── Rich profile modal (glassy + gradient ring) ── */
#uv-profile{ position:fixed; inset:0; background:rgba(15,23,42,.45); display:none; align-items:center; justify-content:center; z-index:1000 }
#uv-profile.open{ display:flex }
.uv-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.28);
  max-width:1100px; width:96%; max-height:92vh; overflow:auto; padding:16px 18px; position:relative;
}
.uv-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(14,165,233,.40), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.uv-card header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.uv-card h3{ margin:0; font-size:18px; font-weight:800; color:var(--ink) }
.uv-close{ background:#fff; border:1px solid var(--line); width:32px; height:32px; border-radius:10px; cursor:pointer; font-size:18px }

/* grid */
.uv-row{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px }
.uv-sec{
  border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--glass);
  backdrop-filter:saturate(160%) blur(6px); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.uv-sec::after{
  /* gentle sheen sweep on hover */
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-120%); opacity:0; pointer-events:none;
}
.uv-sec:hover::after{ animation: uvSheen 950ms ease forwards; }
@keyframes uvSheen { to { transform: translateX(120%); opacity:1; } }

.uv-sec h4{ margin:0 0 8px; font-size:14px; font-weight:800 }

/* stats */
.uv-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
.uv-stat{ border:1px dashed var(--line); border-radius:10px; padding:8px; background:#fff }
.uv-stat b{ display:block; font-size:18px }
.uv-stat span{ color:var(--muted); font-size:12px }

/* lists / key–value rows */
.uv-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px }
.uv-list li{ display:flex; justify-content:space-between; gap:8px; border-bottom:1px dashed #eef2f7; padding:4px 0 }
.uv-kv{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.uv-kv.cols-3{ grid-template-columns:repeat(3,1fr) }
.uv-kv.cols-2{ grid-template-columns:repeat(2,1fr) }
.uv-kv div{ display:flex; justify-content:space-between; border-bottom:1px dashed #eef2f7; padding:4px 0 }
.uv-kv small{ color:var(--muted) }

/* progress / meter */
.uv-meter{ margin-top:10px }
.uv-meter-label{ font-size:12px; color:var(--muted); margin-bottom:6px }
.uv-meter-bar{
  position:relative; height:8px; border-radius:999px; background:#e7eef7; overflow:hidden;
}
.uv-meter-bar::after{
  content:""; position:absolute; inset:0; width:calc(var(--pct,0) * 1%); background:var(--brand); border-radius:999px;
  box-shadow:0 0 12px rgba(14,165,233,.35) inset;
}
@media (prefers-reduced-motion: no-preference){
  .uv-meter-bar::after{ animation: uvGrow .8s cubic-bezier(.2,.8,.2,1) both }
  @keyframes uvGrow{ from{ width:0 } }
}

/* suggestions */
.uv-suggest{ display:flex; flex-direction:column; gap:8px }
.uv-sug{
  display:flex; align-items:flex-start; justify-content:space-between; border:1px solid var(--line);
  border-radius:12px; padding:10px; background:#fff; gap:10px; box-shadow:var(--shadow-sm);
  transform-style:preserve-3d; will-change:transform, box-shadow; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.uv-sug:hover{ transform: translateY(-2px) rotateX(2deg) rotateY(2deg); box-shadow:var(--shadow-md); border-color: color-mix(in srgb, var(--brand), #ffffff 55%); }
.uv-sug .meta{ display:flex; gap:8px; align-items:flex-start }
.uv-sug .meta .uv-tag{ background:#eef2ff; border:1px solid #e0e7ff; color:#3730a3; padding:2px 8px; border-radius:999px; font-size:12px }
.uv-sug-actions{ display:flex; flex-direction:column; gap:6px; margin-left:auto }
.uv-sug-actions .btn-mini,.uv-sug-actions .btn-outline{ min-width:96px }
.uv-sug .btn-mini{
  height:28px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-weight:600;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative; overflow:hidden;
}
.uv-sug .btn-mini:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,8,23,.10) }
.uv-sug .btn-mini.good{ background:var(--brand); border-color:var(--brand); color:#fff }
.uv-sug .btn-mini .ripple, .uv-btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0); animation:uvRipple 600ms ease-out forwards; pointer-events:none;
  background: currentColor; opacity:.18; mix-blend-mode:multiply;
}
@keyframes uvRipple { to { transform:scale(8); opacity:0; } }

/* footer actions */
.uv-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px }
.uv-btn{
  height:36px; padding:6px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-weight:600;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease; position:relative; overflow:hidden;
}
.uv-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,8,23,.10); }
.uv-btn.brand{ background:var(--brand); color:#fff; border-color:var(--brand) }
.uv-btn.brand::after{
  /* subtle sheen on brand buttons */
  content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0 35%, rgba(255,255,255,.35) 50%, transparent 65%); opacity:0;
  transition:opacity .25s ease;
}
.uv-btn.brand:hover::after{ opacity:1 }

/* campaign picker popover */
.uv-pop{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18);
  padding:12px; z-index:1001; width:min(320px,92vw); transform-origin: top left;
  animation: uvPop .14s cubic-bezier(.2,.8,.2,1);
}
@keyframes uvPop{ from{ transform:scale(.96); opacity:0 } to{ transform:none; opacity:1 } }
.uv-pop label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px }
.uv-pop .sel,.uv-pop input{ width:100%; height:36px; border:1px solid var(--line); border-radius:8px; padding:6px 10px }
.uv-pop .row{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px }

/* toast */
#uv-toast{
  position:fixed; right:22px; bottom:22px; background:#111827; color:#fff; padding:10px 14px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0; transform:translateY(8px); transition:.25s; z-index:1200
}
#uv-toast.show{ opacity:1; transform:translateY(0) }

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(12px) scale(.98); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none }

/* Responsive */
@media (max-width: 980px){
  .uv-row{ grid-template-columns:1fr }
  .uv-stats{ grid-template-columns:repeat(2,1fr) }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* --- Remove any tilt inside the modal --- */
#uv-profile .uv-card,
#uv-profile .uv-sec,
#uv-profile .uv-sug { transform: none !important; box-shadow: var(--shadow-sm); }

#uv-profile .uv-sug:hover {           /* keep a tiny lift but no rotation */
  transform: translateY(-2px) !important;
}