/* ═══════════════════════════════════════════════════════════════════════════
   Kenzed — glass and motion.

   A layer over app.css, not a replacement for it. The console prototype is the
   spec of record for UX, so layout, spacing and information hierarchy are left
   exactly as they were. What changes here is material and movement.

   One rule governs the whole file: §A6 property 6 asks for 10,000 rows that
   scroll smoothly, and property 7 asks for a 5-inch screen over 3G. So there
   is deliberately NO backdrop-filter and NO transform transition on .q-row.
   A blur is a per-frame repaint of everything behind the element; sixteen of
   them moving under a finger is exactly how a queue starts to stutter. Glass
   goes on containers, which are few and mostly still. The motion budget is
   spent where nothing is being dragged.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Two easings do almost all the work here. --ease is a quint-out: quick to
     leave, long soft landing, which reads as responsive. --spring overshoots
     a little and is reserved for things that *appear*, where a slight bounce
     reads as physical rather than careless. */
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  --fast:140ms; --med:260ms; --slow:420ms;

  --glass:color-mix(in oklab, #fff 74%, transparent);
  --glass-line:color-mix(in oklab, #fff 65%, var(--blue-200));
  --blur:saturate(1.5) blur(18px);

  /* Shadows are tinted with the page's own ink rather than neutral black, so
     depth reads as the same material and not a grey wash laid on top of it. */
  --sh-1:0 1px 2px rgba(8,25,44,.06), 0 4px 12px -6px rgba(8,25,44,.14);
  --sh-2:0 2px 4px rgba(8,25,44,.05), 0 14px 30px -12px rgba(8,25,44,.20);
  --sh-3:0 30px 70px -28px rgba(8,25,44,.42);
  --glow:0 0 0 1px color-mix(in oklab,var(--blue-400) 50%,transparent),
         0 8px 26px -10px color-mix(in oklab,var(--blue-500) 60%,transparent);
}

/* ══ ambient field ════════════════════════════════════════════════════════ */
/* Two very slow, very faint colour fields. They exist so the glass has
   something to refract: over a flat background, blur is invisible and the
   material just looks like a paler box. Fixed and pointer-events:none, so they
   never join the layout or swallow a click. */
body::before, body::after {
  content:''; position:fixed; z-index:0; pointer-events:none;
  width:min(52vw,720px); aspect-ratio:1; border-radius:50%;
  filter:blur(90px); opacity:.5; will-change:transform;
}
body::before {
  top:-14vh; right:-10vw;
  background:radial-gradient(circle, color-mix(in oklab,var(--blue-300) 60%,transparent), transparent 70%);
  animation:drift-a 34s var(--ease) infinite alternate;
}
body::after {
  bottom:-18vh; left:-12vw;
  background:radial-gradient(circle, color-mix(in oklab,var(--blue-400) 42%,transparent), transparent 70%);
  animation:drift-b 46s var(--ease) infinite alternate;
}
@keyframes drift-a { to { transform:translate3d(-7vw, 6vh, 0) scale(1.14); } }
@keyframes drift-b { to { transform:translate3d(6vw, -5vh, 0) scale(1.10); } }

/* Only the in-flow containers get a stacking context. The overlays are
   deliberately excluded: .modal-scrim, .drawer-scrim and .toasts are
   position:fixed, and listing them here overrode that with position:relative,
   which dropped the drawer out of its full-screen overlay and into normal
   flow - a half-blank page with the panel stranded at the bottom. They already
   carry their own z-index (60/80/90) in app.css, well above the ambient
   field's 0, so they need nothing from this rule. */
.app, .signin-wrap { position:relative; z-index:1; }

/* ══ entrances ════════════════════════════════════════════════════════════ */
@keyframes rise    { from{opacity:0; transform:translate3d(0,14px,0)} to{opacity:1; transform:none} }
@keyframes pop     { from{opacity:0; transform:scale(.965) translate3d(0,10px,0)} to{opacity:1; transform:none} }
@keyframes slidein { from{opacity:0; transform:translate3d(36px,0,0)} to{opacity:1; transform:none} }
@keyframes shimmer { to { background-position:200% 0; } }
@keyframes halo {
  0%,100% { box-shadow:0 0 0 0 color-mix(in oklab,var(--blue-400) 45%,transparent); }
  50%     { box-shadow:0 0 0 7px color-mix(in oklab,var(--blue-400) 0%,transparent); }
}

/* Children of the screen stagger in behind it. Six steps only: past that, the
   last card waits long enough that the page reads as slow rather than
   considered. */
.screen > * { animation:rise var(--med) var(--ease) both; }
.screen > *:nth-child(1){ animation-delay:0ms }   .screen > *:nth-child(2){ animation-delay:35ms }
.screen > *:nth-child(3){ animation-delay:70ms }  .screen > *:nth-child(4){ animation-delay:105ms }
.screen > *:nth-child(5){ animation-delay:140ms } .screen > *:nth-child(6){ animation-delay:170ms }
.stat { animation:pop var(--med) var(--spring) both; }
.stat:nth-child(2){ animation-delay:45ms }  .stat:nth-child(3){ animation-delay:90ms }
.stat:nth-child(4){ animation-delay:135ms } .stat:nth-child(5){ animation-delay:180ms }

/* ══ glass surfaces ═══════════════════════════════════════════════════════ */
.card, .stat, .rail-box, .objection, .doc, .toast, .modal, .signin {
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.card, .doc {
  background:var(--glass); border-color:var(--glass-line); box-shadow:var(--sh-1);
  transition:box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
}
.card:hover { box-shadow:var(--sh-2); border-color:color-mix(in oklab,var(--blue-300) 70%,transparent); }
.stat {
  background:var(--glass); border-color:var(--glass-line); box-shadow:var(--sh-1);
  transition:transform var(--med) var(--spring), box-shadow var(--med) var(--ease);
}
.stat:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
/* The number is the point of a stat card, so it gets the gradient. */
.stat .value {
  background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.topbar {
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:linear-gradient(100deg,
    color-mix(in oklab,var(--blue-950) 93%,transparent) 0%,
    color-mix(in oklab,var(--blue-900) 91%,transparent) 40%,
    color-mix(in oklab,var(--blue-800) 89%,transparent) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 8px 24px -16px rgba(8,25,44,.7);
}
.nav {
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  background:color-mix(in oklab,#fff 72%,transparent); border-bottom-color:var(--glass-line);
}

/* ══ buttons ══════════════════════════════════════════════════════════════ */
.btn {
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--fast) var(--ease), box-shadow var(--med) var(--ease),
             border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:var(--sh-1); }
/* The press is faster than the release on purpose: input should feel instant,
   the return can afford to be graceful. */
.btn:active:not(:disabled) { transform:translateY(0) scale(.975); transition-duration:60ms; }
.btn-primary { box-shadow:0 6px 18px -8px color-mix(in oklab,var(--blue-700) 75%,transparent); }
.btn-primary:hover:not(:disabled) { box-shadow:var(--glow); }
/* A light sweep crossing the primary button on hover. */
.btn-primary::after {
  content:''; position:absolute; inset:0; z-index:-1; transform:translateX(-120%);
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
}
.btn-primary:hover:not(:disabled)::after { transition:transform 620ms var(--ease); transform:translateX(120%); }

/* ══ new lead ═════════════════════════════════════════════════════════════ */
/* The halo runs twice, shortly after the queue first paints, and then never
   again. It is there to be noticed once; a control that pulses forever stops
   being a signal and becomes wallpaper you learn to ignore. */
.btn-new-lead { padding-left:12px; gap:8px; animation:halo 3.4s var(--ease) 1.2s 2; }
.btn-new-lead .plus {
  width:15px; height:15px; position:relative; flex:0 0 auto;
  transition:transform var(--med) var(--spring);
}
.btn-new-lead .plus::before, .btn-new-lead .plus::after {
  content:''; position:absolute; background:currentColor; border-radius:2px;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.btn-new-lead .plus::before { width:15px; height:2px; }
.btn-new-lead .plus::after  { width:2px; height:15px; }
.btn-new-lead:hover .plus { transform:rotate(90deg) scale(1.1); }

.nl-form { display:flex; flex-direction:column; gap:14px; }
.nl-row { display:flex; gap:12px; flex-wrap:wrap; }
.nl-col { flex:1; min-width:170px; }
.nl-form .f { display:flex; flex-direction:column; }
.nl-form label {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mut); margin-bottom:6px;
}
.nl-form input[type=text], .nl-form input[type=email], .nl-form select, .nl-form textarea {
  width:100%; background:color-mix(in oklab,#fff 55%,transparent); border:1px solid var(--line);
  border-radius:9px; padding:11px 12px; font-size:13.5px; min-height:44px;
  transition:border-color var(--fast) var(--ease), box-shadow var(--med) var(--ease),
             background-color var(--fast) var(--ease);
}
.nl-form textarea { min-height:64px; resize:vertical; }
.nl-form input:focus, .nl-form select:focus, .nl-form textarea:focus {
  outline:none; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 4px color-mix(in oklab,var(--blue-400) 22%,transparent);
}
.nl-form .hint { font-size:11.5px; color:var(--faint); margin-top:5px; line-height:1.45; }
.nl-form .err  { font-size:12px; color:var(--sev-fatal); margin-top:5px; animation:rise 200ms var(--ease) both; }
.nl-form .has-err input, .nl-form .has-err select, .nl-form .has-err textarea { border-color:var(--sev-fatal); }
.nl-form .has-err input:focus { box-shadow:0 0 0 4px color-mix(in oklab,var(--sev-fatal) 20%,transparent); }
.nl-consent {
  display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink2);
  line-height:1.5; cursor:pointer;
}
.nl-consent input { width:17px; height:17px; margin-top:1px; accent-color:var(--accent); flex:0 0 auto; }
.nl-foot { font-family:var(--mono); font-size:10.5px; color:var(--faint); margin:0; }

/* ══ tabs, pills, chips ═══════════════════════════════════════════════════ */
.tab { transition:color var(--fast) var(--ease), border-color var(--med) var(--ease); }
.tab .count { transition:transform var(--med) var(--spring); }
.tab:hover .count { transform:scale(1.09); }
.tab.active .count { box-shadow:0 3px 10px -4px color-mix(in oklab,var(--blue-600) 70%,transparent); }
.pill { transition:transform var(--fast) var(--spring); }
.pill:hover { transform:translateY(-1px); }
.tpl, .persona {
  transition:transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
             box-shadow var(--med) var(--ease);
}
.tpl:hover { transform:translateY(-1px); box-shadow:var(--sh-1); }
.persona:hover { transform:translateX(3px); box-shadow:var(--sh-1); }

/* ══ inputs elsewhere ═════════════════════════════════════════════════════ */
.q-search, .composer input, .signin input,
.field input, .field select, .field textarea, .topbar select {
  transition:border-color var(--fast) var(--ease), box-shadow var(--med) var(--ease),
             background-color var(--fast) var(--ease);
}
.q-search:focus, .composer input:focus, .signin input:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 4px color-mix(in oklab,var(--blue-400) 22%,transparent);
}
/* Keyboard focus stays obvious even where the design is quiet. */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ══ queue rows ═══════════════════════════════════════════════════════════ */
/* Colour only. These are the sixteen elements that move continuously while
   10,000 records scroll under them, so they get no blur and no transform. */
.q-row { transition:background-color var(--fast) linear; }
.q-row:hover { background:color-mix(in oklab,var(--blue-100) 55%,transparent); }
.q-row.od:hover { background:color-mix(in oklab,var(--sev-fatal) 9%,transparent); }
.q-alert { animation:pop var(--med) var(--spring) both; }

/* ══ modal, drawer, toasts ════════════════════════════════════════════════ */
@keyframes fadein { from{opacity:0} to{opacity:1} }
.modal-scrim {
  background:color-mix(in oklab,var(--blue-950) 48%,transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:fadein var(--med) var(--ease) both;
}
.modal {
  background:color-mix(in oklab,#fff 90%,transparent); border-color:var(--glass-line);
  box-shadow:var(--sh-3); animation:pop var(--med) var(--spring) both;
}
.drawer-scrim {
  background:color-mix(in oklab,var(--blue-950) 42%,transparent);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:fadein var(--fast) var(--ease) both;
}
.drawer {
  animation:slidein var(--slow) var(--ease) both; box-shadow:var(--sh-3);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  background:color-mix(in oklab,var(--paper) 88%,transparent);
}
.picklist button {
  transition:transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
             box-shadow var(--med) var(--ease);
}
.picklist button:hover { transform:translateX(4px); box-shadow:var(--sh-1); }
.toast {
  animation:slidein var(--med) var(--spring) both; box-shadow:var(--sh-2);
  background:color-mix(in oklab,#fff 88%,transparent); border-color:var(--glass-line);
  transition:transform var(--fast) var(--ease);
}
.toast:hover { transform:translateX(-3px); }
.bubble { animation:pop 240ms var(--spring) both; }

/* ══ loading ══════════════════════════════════════════════════════════════ */
/* A travelling highlight rather than a fade: it reads as "arriving" instead of
   "broken", which matters most on the slow connection §A6 assumes. */
.skeleton {
  background:linear-gradient(90deg, var(--line2) 25%,
             color-mix(in oklab,#fff 70%,var(--line2)) 50%, var(--line2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite;
}
.bar { transition:width var(--slow) var(--ease); }

/* ══ view transitions ═════════════════════════════════════════════════════ */
/* Used where supported, ignored silently everywhere else. Nothing depends on
   it, so a browser without it simply gets an instant switch. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(screen) { animation:vt-out 180ms var(--ease) both; }
  ::view-transition-new(screen) { animation:vt-in  300ms var(--ease) both; }
}
@keyframes vt-out { to { opacity:0; transform:translate3d(0,-8px,0); } }
@keyframes vt-in  { from { opacity:0; transform:translate3d(0,12px,0); } }

/* ══ drawer as a CRM record ═══════════════════════════════════════════════ */
/* The conversation used to own half of this panel. It is now one tab among
   three, because a CRM is a record of a person and their money, and WhatsApp
   is a channel that record happens to speak. */
.dtabs { display:flex; gap:2px; padding:0 20px; border-bottom:1px solid var(--line);
  background:color-mix(in oklab,#fff 60%,transparent); flex-wrap:wrap; }
.dtab { padding:11px 14px; font-size:13.5px; font-weight:500; min-height:44px; color:var(--mut);
  border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:7px;
  transition:color var(--fast) var(--ease), border-color var(--med) var(--ease); }
.dtab:hover { color:var(--ink); }
.dtab.active { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
.dtab .count { font-family:var(--mono); font-size:11px; padding:2px 6px; border-radius:4px;
  background:var(--line2); color:var(--mut); }
.dtab.active .count { color:#fff; background:linear-gradient(135deg,var(--blue-500),var(--blue-700)); }

.dpanel { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:16px; }
.dpanel-flush { padding:0; gap:0; }
.dpanel-flush .conv { border-right:none; height:100%; }
.dpanel > .actions { position:sticky; top:-18px; z-index:2; padding:10px 0;
  background:linear-gradient(180deg, color-mix(in oklab,var(--paper) 96%,transparent) 70%, transparent); }

/* Facts read as a table, not prose: a counsellor scans this in the two seconds
   before the call connects. */
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px 16px; }
.fact-k { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.fact-v { font-size:13.5px; color:var(--ink); margin-top:2px; }

.remark { border-left:2px solid var(--line); padding:8px 0 8px 12px; margin-top:10px; }
.remark.oncall { border-left-color:var(--accent); }
.remark-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.remark-meta { font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.remark-note { font-size:13.5px; color:var(--ink2); line-height:1.55; margin-top:5px; }

/* ══ the name is the control ══════════════════════════════════════════════ */
.drawer-name { cursor:pointer; display:inline-flex; align-items:center; gap:9px; border-radius:8px;
  padding:2px 8px; margin-left:-8px; transition:background var(--fast) var(--ease); }
.drawer-name:hover { background:color-mix(in oklab,var(--blue-100) 70%,transparent); }
.drawer-name .caret { width:8px; height:8px; border-right:2px solid var(--mut); border-bottom:2px solid var(--mut);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--med) var(--spring); }
.drawer-name.open .caret { transform:rotate(-135deg) translate(-3px,-3px); }
.name-menu { position:absolute; top:56px; left:20px; z-index:20; min-width:210px;
  background:color-mix(in oklab,#fff 92%,transparent); backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur); border:1px solid var(--glass-line); border-radius:11px;
  box-shadow:var(--sh-3); padding:6px; display:flex; flex-direction:column;
  animation:pop 180ms var(--spring) both; }
.name-menu button { text-align:left; padding:10px 12px; border-radius:7px; font-size:13.5px;
  color:var(--ink); min-height:42px; transition:background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.name-menu button:hover { background:color-mix(in oklab,var(--blue-100) 80%,transparent); transform:translateX(3px); }
.drawer-head { position:relative; }

@media (max-width:720px) {
  .dtabs { padding:0 12px; }
  .dpanel { padding:14px 12px; }
  .name-menu { left:12px; right:12px; }
}

/* ══ reduced motion ═══════════════════════════════════════════════════════ */
/* Not a courtesy. For a vestibular disorder, a drifting background and
   overshooting panels cause real symptoms, and this interface is somebody's
   entire working day. Everything still changes state - it just stops moving. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  body::before, body::after { animation:none; }
  .btn:hover:not(:disabled), .stat:hover, .picklist button:hover,
  .persona:hover, .tpl:hover, .toast:hover, .pill:hover { transform:none; }
}