/* ==========================================================================
     VIVID LAYER — loaded last, overrides the console layer.
     The console layer was deliberately near-monochrome and read as flat. This
     puts colour, depth and gradient back on the *chrome* — hero, sidebar, tiles,
     buttons, section headers — while leaving the things that carry meaning
     alone: status badges keep their semantics, data keeps its mono numerals,
     and every text/background pair still clears AA.
     Drop this one file to revert to the restrained look.
     ========================================================================== */

  :root{
    /* The logo is a blue square and a green square. That is the brand gradient. */
    --brand-1:#4f46e5;   /* indigo */
    --brand-2:#3b6ef5;   /* logo blue */
    --brand-3:#22c55e;   /* logo green */
    --brand-grad:linear-gradient(135deg,var(--brand-1) 0%,var(--brand-2) 48%,var(--brand-3) 100%);
    --glow-blue:0 8px 24px -8px rgba(59,110,245,.45);
    --glow-soft:0 10px 30px -12px rgba(38,52,102,.28);
    --tile-r:15px;
  }
  body.dark{
    --glow-soft:0 10px 30px -12px rgba(0,0,0,.7);
  }

  /* ---- page background: a soft wash instead of flat grey -------------------- */
  body{
    background:
      radial-gradient(1200px 520px at 88% -10%, rgba(79,70,229,.10) 0%, rgba(79,70,229,0) 60%),
      radial-gradient(900px 460px at -5% 0%,   rgba(34,197,94,.10) 0%, rgba(34,197,94,0) 55%),
      var(--bg);
    background-attachment:fixed;
  }
  body.dark{
    background:
      radial-gradient(1200px 520px at 88% -10%, rgba(99,102,241,.16) 0%, rgba(99,102,241,0) 60%),
      radial-gradient(900px 460px at -5% 0%,   rgba(34,197,94,.11) 0%, rgba(34,197,94,0) 55%),
      var(--bg);
  }

  /* ---- cards: lift off the page ------------------------------------------- */
  .card{
    border-radius:var(--tile-r);
    border-color:color-mix(in srgb,var(--line-2) 70%,transparent);
    box-shadow:var(--glow-soft);
    transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease;
  }
  .sec-h h3{position:relative;padding-left:12px}
  /* a small brand tick before every section title — cheap, and it reads as designed */
  .sec-h h3::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:15px;border-radius:3px;background:var(--brand-grad);
  }

  /* ---- stat tiles: the main "dull" complaint ------------------------------- */
  .pg-stats{gap:14px}
  .mini{
    padding:16px 17px;border-radius:var(--tile-r);overflow:hidden;position:relative;
    background:
      linear-gradient(160deg, rgba(79,70,229,.07) 0%, rgba(79,70,229,0) 42%),
      var(--card);
  }
  /* accent rail across the top, brand gradient by default */
  .mini::after{
    content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand-grad);opacity:.9;
  }
  .mini:hover{transform:translateY(-3px);box-shadow:var(--glow-blue);border-color:transparent}
  .mini .mic{
    top:14px;right:14px;width:34px;height:34px;border-radius:11px;opacity:1;
    color:#fff;box-shadow:0 4px 12px -4px rgba(23,35,63,.45);
  }
  .mini .mic svg{width:17px;height:17px}
  .mini .mv{font-size:28px;letter-spacing:-.035em}
  .mini .ml{padding-right:42px}

  /* Per-colour tinting, keyed off the icon chip each tile already carries, so
     the palette follows the existing semantic classes rather than card order. */
  .mini:has(.mic.ic-blue)::after   {background:linear-gradient(90deg,#3b6ef5,#60a5fa)}
  .mini:has(.mic.ic-green)::after  {background:linear-gradient(90deg,#16a34a,#4ade80)}
  .mini:has(.mic.ic-purple)::after {background:linear-gradient(90deg,#7c3aed,#a78bfa)}
  .mini:has(.mic.ic-orange)::after {background:linear-gradient(90deg,#d97706,#fbbf24)}
  .mini:has(.mic.ic-red)::after    {background:linear-gradient(90deg,#dc2626,#f87171)}
  .mini:has(.mic.ic-teal)::after   {background:linear-gradient(90deg,#0d9488,#2dd4bf)}
  .mini:has(.mic.ic-blue)   {background:linear-gradient(160deg,rgba(59,110,245,.10),rgba(59,110,245,0) 46%),var(--card)}
  .mini:has(.mic.ic-green)  {background:linear-gradient(160deg,rgba(34,197,94,.10), rgba(34,197,94,0)  46%),var(--card)}
  .mini:has(.mic.ic-purple) {background:linear-gradient(160deg,rgba(139,92,246,.10),rgba(139,92,246,0) 46%),var(--card)}
  .mini:has(.mic.ic-orange) {background:linear-gradient(160deg,rgba(245,158,11,.11),rgba(245,158,11,0) 46%),var(--card)}
  .mini:has(.mic.ic-red)    {background:linear-gradient(160deg,rgba(239,68,68,.10), rgba(239,68,68,0)  46%),var(--card)}
  .mini:has(.mic.ic-teal)   {background:linear-gradient(160deg,rgba(20,184,166,.10),rgba(20,184,166,0) 46%),var(--card)}
  .ic-blue,.mic.ic-blue     {background:linear-gradient(135deg,#3b6ef5,#60a5fa)!important;color:#fff!important}
  .ic-green,.mic.ic-green   {background:linear-gradient(135deg,#16a34a,#4ade80)!important;color:#fff!important}
  .ic-purple,.mic.ic-purple {background:linear-gradient(135deg,#7c3aed,#a78bfa)!important;color:#fff!important}
  .ic-orange,.mic.ic-orange {background:linear-gradient(135deg,#d97706,#fbbf24)!important;color:#fff!important}
  .ic-red,.mic.ic-red       {background:linear-gradient(135deg,#dc2626,#f87171)!important;color:#fff!important}
  .ic-teal,.mic.ic-teal     {background:linear-gradient(135deg,#0d9488,#2dd4bf)!important;color:#fff!important}

  /* ---- KPI cards on the dashboard ----------------------------------------- */
  .kpi{border-radius:var(--tile-r);position:relative;overflow:hidden;
    background:linear-gradient(160deg,rgba(79,70,229,.07),rgba(79,70,229,0) 45%),var(--card)}
  .kpi::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand-grad)}
  .kpi:hover{transform:translateY(-3px);box-shadow:var(--glow-blue)}
  .kpi .ic{border-radius:11px;color:#fff;box-shadow:0 4px 12px -4px rgba(23,35,63,.4)}
  .kpi .val{font-size:27px;letter-spacing:-.035em}

  /* ---- hero: a real brand band -------------------------------------------- */
  .hero{
    background:var(--brand-grad);
    border:none;color:#fff;position:relative;overflow:hidden;
    box-shadow:0 16px 40px -18px rgba(59,110,245,.6);
    padding:26px 28px;
  }
  .hero-glow{
    display:block;position:absolute;inset:auto -10% -60% auto;width:520px;height:320px;
    background:radial-gradient(circle at center, rgba(255,255,255,.25), rgba(255,255,255,0) 65%);
    pointer-events:none;
  }
  .hero-grid{
    display:block;position:absolute;inset:0;pointer-events:none;opacity:.16;
    background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
            mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
  }
  .hero h2{color:#fff;font-size:23px}
  .hero p{color:rgba(255,255,255,.85)}
  .hero-badge{
    background:rgba(255,255,255,.16);color:#fff;
    border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
  }
  .hero-badge i{background:#5eead4;box-shadow:0 0 0 3px rgba(94,234,212,.28)}
  /* glass pills for the hero figures */
  .hero-stats>div{
    background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
    border-radius:12px;padding:10px 14px;backdrop-filter:blur(6px);
  }
  .hero-stats b{color:#fff;font-size:21px}
  .hero-stats small{color:rgba(255,255,255,.8)}
  .hero-btn{background:#fff;color:var(--brand-1);font-weight:700;box-shadow:0 6px 16px -6px rgba(0,0,0,.35)}
  .hero-btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.32)}
  .hero-btn:hover{opacity:1;transform:translateY(-1px)}
  .hero .export{background:#fff;color:var(--brand-1)}

  /* ---- sidebar: depth + a glowing active state ----------------------------- */
  .sidebar{
    background:linear-gradient(180deg,#161d3d 0%,#0d1226 55%,#0a0e1e 100%);
    border-right:1px solid rgba(255,255,255,.07);
    box-shadow:2px 0 24px -12px rgba(0,0,0,.6);
  }
  .nav-i{border-radius:9px}
  .nav-i:hover{background:rgba(255,255,255,.07)}
  .nav-i.active{
    background:linear-gradient(90deg,rgba(79,70,229,.42),rgba(59,110,245,.18) 70%,transparent);
    color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  }
  .nav-i.active::before{
    width:3px;height:20px;background:var(--brand-grad);
    box-shadow:0 0 12px 1px rgba(80,120,255,.85);
  }
  .logo h1 span{color:#3ddc84}
  .bpo-brand{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}

  /* ---- topbar: frosted ----------------------------------------------------- */
  .topbar{
    background:color-mix(in srgb,var(--card) 82%,transparent);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid color-mix(in srgb,var(--line-2) 80%,transparent);
  }

  /* ---- controls ------------------------------------------------------------ */
  .btn-add{
    background:var(--brand-grad);border-radius:10px;
    box-shadow:var(--glow-blue);font-weight:700;
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  }
  .btn-add:hover{background:var(--brand-grad);filter:brightness(1.06);transform:translateY(-1px)}
  .fchip{border-radius:9px}
  .fchip.on{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:var(--glow-blue)}
  .lf-btn{background:var(--brand-grad)!important;box-shadow:var(--glow-blue)}

  /* ---- tables: keep them readable, just warmer ----------------------------- */
  thead th{
    background:linear-gradient(180deg,color-mix(in srgb,var(--brand-2) 7%,var(--card)),var(--card));
    border-bottom:1px solid color-mix(in srgb,var(--brand-2) 22%,var(--line-2));
    color:var(--ink-2);
  }
  tbody tr:hover{background:color-mix(in srgb,var(--brand-2) 6%,transparent)}
  .badge{box-shadow:0 1px 2px rgba(23,35,63,.06)}

  /* ---- assist panel gets the brand treatment too --------------------------- */
  .asst-answer{border-left:3px solid transparent;border-image:var(--brand-grad) 1;padding-left:12px}
  .asst-cite{background:linear-gradient(135deg,rgba(79,70,229,.14),rgba(59,110,245,.10));border-color:transparent;color:var(--brand-1)}
  body.dark .asst-cite{color:#a5b4fc}

  /* ---- entrance: one staggered reveal, then the interface holds still ------ */
  .rise{animation-duration:.42s}
  .pg-stats .card.mini{animation:vividIn .45s cubic-bezier(.2,.8,.2,1) backwards}
  .pg-stats .card.mini:nth-child(1){animation-delay:.02s}
  .pg-stats .card.mini:nth-child(2){animation-delay:.07s}
  .pg-stats .card.mini:nth-child(3){animation-delay:.12s}
  .pg-stats .card.mini:nth-child(4){animation-delay:.17s}
  @keyframes vividIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

  @media (prefers-reduced-motion:reduce){
    .mini:hover,.kpi:hover,.hero-btn:hover,.btn-add:hover{transform:none}
    .pg-stats .card.mini{animation:none}
  }

  /* ---- dialer workspace ---------------------------------------------------- */
  .dlg-grid{display:grid;grid-template-columns:290px 1fr 340px;gap:14px;align-items:start}
  .dlg-left,.dlg-mid,.dlg-right{min-height:520px}
  .dlg-dial{display:flex;gap:8px;margin-bottom:12px}
  .dlg-dial input{flex:1;font-family:var(--mono);font-size:13px;border:1px solid var(--line-2);
    border-radius:9px;padding:9px 11px;background:var(--card);color:var(--ink)}
  .dlg-contacts{max-height:430px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
  .dlg-contact{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 9px;
    border-radius:9px;border:1px solid transparent;transition:background .12s,border-color .12s}
  .dlg-contact:hover{background:color-mix(in srgb,var(--brand-2) 7%,transparent);border-color:color-mix(in srgb,var(--brand-2) 22%,transparent)}
  .dc-av{width:30px;height:30px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
    background:var(--brand-grad);color:#fff;font-size:11px;font-weight:800}
  .dc-b{flex:1;min-width:0}
  .dc-b b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-b small{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-ph{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex-shrink:0}

  .dlg-state{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted);
    border:1px solid var(--line-2);border-radius:20px;padding:2px 10px}
  .dlg-state.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#16a34a,#4ade80)}
  .dlg-caller{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;
    background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(34,197,94,.08));
    border:1px solid color-mix(in srgb,var(--brand-2) 20%,transparent)}
  .dlg-av{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
    background:var(--brand-grad);color:#fff;font-weight:800;font-size:15px}
  .dlg-caller b{display:block;font-size:14px}
  .dlg-caller small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
  .dlg-timer{margin-left:auto;font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.02em}
  .dlg-ctrls{display:flex;gap:8px;margin-top:10px}
  .dlg-end{color:#fff!important;background:linear-gradient(135deg,#dc2626,#f87171)!important;border-color:transparent!important}

  .dlg-cap-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 8px}
  .dlg-cap-h span{font-size:11.5px;color:var(--muted);font-weight:600}
  .dlg-cap-src{font-family:var(--mono);font-size:10.5px;color:var(--brand-1);font-weight:600}
  .dlg-cap-h .fchip.on{background:linear-gradient(135deg,#dc2626,#f87171);border-color:transparent;color:#fff}
  .dlg-captions{height:230px;overflow-y:auto;border:1px solid var(--line-2);border-radius:11px;
    padding:11px 12px;background:color-mix(in srgb,var(--ink) 3%,var(--card))}
  body.dark .dlg-captions{background:color-mix(in srgb,#fff 3%,var(--card))}
  .cap-l{font-size:13px;line-height:1.6;margin-bottom:6px;color:var(--ink)}
  .cap-t{font-family:var(--mono);font-size:10px;color:var(--muted);margin-right:7px}
  .cap-i{opacity:.55;font-style:italic}

  .dlg-assist textarea,#dlgDispo textarea,#dlgDispo select,#dlgDispo .dlg-req{width:100%;font-family:inherit;
    font-size:12.5px;border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;
    background:var(--card);color:var(--ink);margin-bottom:7px}
  .dlg-assist .asst-row{margin-top:0}
  #dlgAsstOut .asst-answer{font-size:12.5px}

  @media (max-width:1200px){ .dlg-grid{grid-template-columns:1fr 1fr} .dlg-right{grid-column:1/-1} }
  @media (max-width:760px){ .dlg-grid{grid-template-columns:1fr} .dlg-left,.dlg-mid,.dlg-right{min-height:0} }

  /* ---- My Day (agent home) ------------------------------------------------- */
  .md-t .mv{display:flex;align-items:baseline;gap:6px}
  .md-of{font-size:13px;color:var(--muted);font-weight:500}
  .md-bar{height:5px;border-radius:4px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden;margin:8px 0 2px}
  .md-bar i{display:block;height:100%;border-radius:4px;background:var(--brand-grad);transition:width .5s cubic-bezier(.2,.8,.2,1)}
  .md-t.md-ok   .md-bar i{background:linear-gradient(90deg,#16a34a,#4ade80)}
  .md-t.md-warn .md-bar i{background:linear-gradient(90deg,#d97706,#fbbf24)}
  .md-t.md-bad  .md-bar i{background:linear-gradient(90deg,#dc2626,#f87171)}
  .md-t.md-ok::after   {background:linear-gradient(90deg,#16a34a,#4ade80)}
  .md-t.md-warn::after {background:linear-gradient(90deg,#d97706,#fbbf24)}
  .md-t.md-bad::after  {background:linear-gradient(90deg,#dc2626,#f87171)}
  .md-t.md-none .md-bar i{background:var(--line-2)}
  .md-sub{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono)}
  .md-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
  .md-row:last-child{border-bottom:none}
  .md-nm{flex:1;min-width:0}
  .md-nm b{display:block;font-size:12.5px}
  .md-nm small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .md-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .md-act{text-align:left;padding:12px;border-radius:11px;border:1px solid var(--line-2);
    background:linear-gradient(160deg,rgba(79,70,229,.06),transparent 60%),var(--card);
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
  .md-act:hover{transform:translateY(-2px);box-shadow:var(--glow-blue);border-color:transparent}
  .md-act b{display:block;font-size:12.5px;margin-bottom:2px}
  .md-act small{display:block;font-size:10.5px;color:var(--muted);line-height:1.4}
  .md-chan{display:flex;flex-direction:column;gap:8px}
  .md-ch{position:relative;text-align:left;padding:11px 34px 11px 12px;border-radius:11px;
    border:1px solid var(--line-2);background:var(--card);transition:border-color .15s,background .15s}
  .md-ch:hover{border-color:color-mix(in srgb,var(--brand-2) 40%,transparent)}
  .md-ch b{display:block;font-size:12.5px}
  .md-ch small{display:block;font-size:10.5px;color:var(--muted)}
  .md-dot{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:9px;height:9px;
    border-radius:50%;background:var(--line-2)}
  .md-dot.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.22)}
  @media (max-width:760px){ .md-actions{grid-template-columns:1fr} }