/* AA.OS, jarvis.css: de assistent-pagina. Alleen zichtbaar voor de owner.
   Bewust de enige donkere pagina van AA.OS, en de enige die het hele scherm
   overneemt: dit is Alecs cockpit, niet het CRM dat hij aan klanten verkoopt.
   Rood blijft de huisstijlkleur, alleen nu als licht op zwart. */

/* ============ HELE SCHERM ============ */
/* body.jv-mode wordt gezet door go() in core.js. */
body.jv-mode .topbar,
body.jv-mode .portal-bar,
body.jv-mode .app-foot{display:none}
/* De veegrand boven en onder krijgt zijn kleur van <html>, niet van <body>:
   style.css zet daar een eigen witte achtergrond, dus die moet hier mee om.
   go() zet de klasse daarom op allebei. */
html.jv-mode{background:#08080b;color-scheme:dark}
html.jv-mode,body.jv-mode{overscroll-behavior:none}
body.jv-mode{background:#08080b}
body.jv-mode .shell,
body.jv-mode .main,
body.jv-mode #app{background:#08080b}
body.jv-mode .content{padding:0}
/* De zijbalk blijft staan om te kunnen navigeren, maar wordt donker. */
body.jv-mode .sidebar{background:#0b0b0f;border-right-color:rgba(255,255,255,.07)}
body.jv-mode .sidebar .wm,
body.jv-mode .tenant-badge .nm,
body.jv-mode #whoami{color:#e8e8ec}
body.jv-mode .wm .os{color:rgba(255,255,255,.45)}
body.jv-mode .tenant-badge{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}
body.jv-mode .tenant-badge .sub,
body.jv-mode .sb-foot{color:rgba(255,255,255,.4)}
body.jv-mode .nav button{color:rgba(255,255,255,.62)}
body.jv-mode .nav button:hover{background:rgba(255,255,255,.06);color:#fff}
body.jv-mode .nav button.active{background:rgba(229,50,42,.16);color:#ff938c}
body.jv-mode .sb-foot{border-top-color:rgba(255,255,255,.07)}
body.jv-mode .sb-foot b{color:rgba(255,255,255,.7)}

.jv{
  min-height:100vh;padding:1.5rem 1.9rem 1.7rem;background:#08080b;color:#e8e8ec;
  position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.jv::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 78% 58% at 50% 34%,#000 28%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 58% at 50% 34%,#000 28%,transparent 76%);
}
.jv>*{position:relative;z-index:1}

/* ============ KOPREGEL ============ */
.jv-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.07)}
.jv-mark{font-family:var(--ff-d);font-weight:700;font-size:.82rem;letter-spacing:.42em;color:rgba(255,255,255,.72)}
.jv-top-r{display:flex;align-items:center;gap:1rem;min-width:0}
/* Stemkiezer: de stemmen die op dit toestel staan, vrouwen en Premium bovenaan. */
.jv-stemkeuze{max-width:210px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.34rem 1.8rem .34rem .8rem;
  font:inherit;font-size:.72rem;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 13px) 55%,calc(100% - 9px) 55%;background-size:4px 4px;background-repeat:no-repeat;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.jv-stemkeuze:hover{border-color:rgba(255,255,255,.3)}
.jv-stemkeuze:focus{outline:none;border-color:var(--red)}
.jv-stemkeuze option{background:#141418;color:#e8e8ec}
.jv-state{display:flex;align-items:center;gap:.5rem;font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.jv-dot{width:6px;height:6px;border-radius:50%;background:#37d67a;flex-shrink:0;box-shadow:0 0 8px currentColor}
.jv-dot.busy{background:var(--red);animation:jvPulse 1.1s infinite}
.jv-dot.off{background:#5a5a63;box-shadow:none}
@keyframes jvPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ============ MIDDEN: JARVIS ZELF ============ */
.jv-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1.2rem 0 1.6rem;min-height:0}
/* Jarvis heeft iets klaarstaan: het hele middenvlak is dan de knop. */
.jv-stage.wacht{cursor:pointer}
.jv-stage.wacht .jv-hello{animation:jvAdem 2.4s ease-in-out infinite}
.jv-stage.wacht .jv-play{pointer-events:none}
@keyframes jvAdem{0%,100%{opacity:1}50%{opacity:.55}}
.jv-orb-wrap{position:relative;width:280px;height:280px;cursor:pointer;-webkit-tap-highlight-color:transparent}
#jvOrb{display:block;width:280px;height:280px}
.jv-hello{font-family:var(--ff-d);font-weight:600;font-size:1.8rem;letter-spacing:-.02em;color:#fff;line-height:1.15}
.jv-brief-hint{color:rgba(255,255,255,.34);font-size:.84rem;margin-top:.55rem}
.jv-hero-act{display:flex;gap:.6rem;justify-content:center;align-items:center;margin-top:1.4rem;flex-wrap:wrap}

.jv-ico{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;transition:.16s;flex-shrink:0}
.jv-ico:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}
.jv-ico.on{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(229,50,42,.18)}
.jv-ico svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.jv-play,.jv-hang{height:48px;padding:0 1.4rem;border-radius:999px;color:#fff;font-weight:600;font-size:.9rem;
  display:flex;align-items:center;gap:.55rem;transition:.16s;flex-shrink:0}
.jv-play{background:var(--red);box-shadow:0 0 24px rgba(229,50,42,.36)}
.jv-play:hover{background:var(--red-dark);box-shadow:0 0 32px rgba(229,50,42,.52)}
.jv-play svg,.jv-hang svg{width:17px;height:17px;fill:#fff;stroke:none}
.jv-hang{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.jv-hang:hover{background:rgba(255,255,255,.17)}
.jv-hang svg{transform:rotate(134deg)}

/* ============ ONDERSTE STROOK ============ */
.jv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start;flex-shrink:0}
.jv-panel{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:.95rem 1.05rem}
.jv-sec{display:flex;align-items:center;gap:.55rem;font-size:.64rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:.7rem}
.jv-sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)}
.jv-sec .tel{color:var(--red);letter-spacing:.06em}

/* ============ TAKEN ============ */
.jv-taak{display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.jv-taak:last-child{border-bottom:none}
.jv-taak.voorstel{background:linear-gradient(90deg,rgba(229,50,42,.12),transparent 72%);
  margin:0 -1.05rem;padding-left:1.05rem;padding-right:1.05rem;border-left:2px solid var(--red)}
.jv-taak.af .tt{color:rgba(255,255,255,.3);text-decoration:line-through}
.jv-wie{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .45rem;
  border-radius:4px;white-space:nowrap;flex-shrink:0}
.jv-wie.alec{background:rgba(255,255,255,.09);color:rgba(255,255,255,.7)}
.jv-wie.claude{background:rgba(229,50,42,.17);color:#ff8d86}
.jv-taak .tt{flex:1;min-width:0;font-size:.85rem;color:#e8e8ec}
.jv-taak .tt .sub{font-size:.73rem;color:rgba(255,255,255,.36);margin-top:.1rem}
.jv-taak .st{font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.jv-vink{width:20px;height:20px;border-radius:5px;border:1.5px solid rgba(255,255,255,.22);background:transparent;
  flex-shrink:0;font-size:.72rem;font-weight:700;color:transparent;transition:.14s;display:flex;align-items:center;justify-content:center}
.jv-vink:hover{border-color:#37d67a}
.jv-vink.af{background:#37d67a;border-color:#37d67a;color:#08080b}
.jv-ja,.jv-nee{width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,.18);background:transparent;
  flex-shrink:0;font-size:.82rem;font-weight:700;transition:.14s}
.jv-ja{color:#37d67a} .jv-ja:hover{background:#37d67a;color:#08080b;border-color:#37d67a}
.jv-nee{color:rgba(255,255,255,.45)} .jv-nee:hover{background:rgba(255,255,255,.12);color:#fff}
.jv-leeg{padding:1rem .2rem;text-align:center;color:rgba(255,255,255,.28);font-size:.82rem}

/* ============ AGENDA ============ */
.jv-afspr{display:flex;gap:.7rem;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.jv-afspr:last-child{border-bottom:none}
.jv-afspr.voorbij{opacity:.38}
.jv-afspr .tijd{flex-shrink:0;width:44px;font-size:.76rem;font-weight:600;color:var(--red);
  font-variant-numeric:tabular-nums;padding-top:.05rem}
.jv-afspr .tt{flex:1;min-width:0;font-size:.85rem;color:#e8e8ec}
.jv-afspr .tt .sub{font-size:.73rem;color:rgba(255,255,255,.36);margin-top:.1rem}

/* ============ TRANSCRIPT ============ */
/* Hoeft niet in beeld te staan: een bolletje rechtsonder klapt het open. */
.jv-log-knop{position:fixed;right:1.4rem;bottom:1.4rem;z-index:30;width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;transition:.16s}
.jv-log-knop:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.34)}
.jv-log-knop.op{background:var(--red);border-color:var(--red)}
.jv-log-knop svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jv-log-knop .tel{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--red);color:#fff;font-size:.64rem;font-weight:700;display:flex;align-items:center;justify-content:center}

.jv-log{position:fixed;right:1.4rem;bottom:5.2rem;z-index:30;width:min(380px,calc(100vw - 2.8rem));
  background:rgba(14,14,18,.97);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);
  padding:.95rem 1.05rem;backdrop-filter:blur(12px);box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;transition:.18s}
.jv-log.op{opacity:1;transform:none;pointer-events:auto}
.jv-log .jv-sec{margin-bottom:.6rem}
.jv-log .dicht{margin-left:auto;color:rgba(255,255,255,.45);font-size:.85rem;line-height:1;padding:.2rem}
.jv-log .dicht:hover{color:#fff}
.jv-log .jv-sec::after{display:none}

.jv-chat{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.7rem;max-height:240px;overflow-y:auto}
.jv-chat::-webkit-scrollbar{width:3px}
.jv-chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.jv-reg{display:flex;gap:.55rem;font-size:.79rem;line-height:1.5}
.jv-reg .w{flex-shrink:0;width:48px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.32);padding-top:.16rem}
.jv-reg .z{flex:1;min-width:0;color:rgba(255,255,255,.78);overflow-wrap:anywhere}
.jv-reg.denkt .z{color:rgba(255,255,255,.3)}

.jv-vraag{display:flex;gap:.5rem;align-items:flex-end}
.jv-vraag textarea{flex:1;padding:.6rem .8rem;border:1px solid rgba(255,255,255,.14);border-radius:var(--rsm);
  background:rgba(255,255,255,.04);color:#fff;resize:none;font:inherit;font-size:.85rem;line-height:1.5;max-height:120px;
  transition:border-color .15s,box-shadow .15s}
.jv-vraag textarea::placeholder{color:rgba(255,255,255,.28)}
.jv-vraag textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,50,42,.16);outline:none}
.jv-stuur{width:38px;height:38px;border-radius:var(--rsm);background:rgba(255,255,255,.08);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.jv-stuur:hover{background:var(--red)}
.jv-stuur svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============ MOBIEL ============ */
@media(max-width:900px){.jv-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  .jv{padding:1.2rem 1.1rem 1.3rem}
  .jv-orb-wrap,#jvOrb{width:214px;height:214px}
  .jv-hello{font-size:1.45rem}
}