/* Dopetzcom Admin — Jarvis Office v2
 * Loaded AFTER jarvis-command.css. Styles only the "office" dash view.
 * LEFT  = conversation (Jarvis replies + your replies + composer)
 * RIGHT = office / meeting room + each agent's report list
 */

#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-body{
  grid-template-columns:minmax(290px,.7fr) minmax(0,1.6fr);
  grid-template-rows:minmax(0,1fr);
  gap:10px;
}
#aiModal.jarvis-hud .jarvis-deck-body .jarvis-deck-office{display:none}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-body .jarvis-deck-office{
  display:flex!important;flex-direction:column;min-height:0;min-width:0;width:100%;max-width:100%;order:2;
}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-body .jarvis-deck-squad{display:none!important}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-body .jarvis-deck-talk{
  display:flex!important;min-height:0;min-width:0;order:1;height:100%;
}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-talk .jarvis-welcome,
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-talk .dz-ai-suggestions,
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-talk .dz-ai-turn-eager,
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-talk .jarvis-agents{display:none!important}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-talk .jarvis-board{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-talk .dz-ai-chat{flex:1 1 auto;min-height:0;max-height:none!important;overflow:auto}
#aiModal.jarvis-hud[data-dash="office"] #dzAiClearBtn{display:inline-flex}

.jof-chat-head{
  flex:none;display:flex;align-items:center;gap:8px;padding:2px 4px 8px;
  font-size:10px;font-weight:800;letter-spacing:.14em;color:#7dd3fc;
}
.jof-chat-head i{flex:1;height:1px;background:linear-gradient(90deg,rgba(56,189,248,.4),transparent)}
.jof-key{display:inline-flex;align-items:center;gap:5px;font-weight:700;letter-spacing:.04em;color:#8fb7cc}
.jof-key b{width:9px;height:9px;border-radius:3px;display:inline-block}
.jof-key .k-j{background:#38bdf8}.jof-key .k-y{background:#fbbf24}
.jof-chat-head{display:none}
#aiModal.jarvis-hud[data-dash="office"] .jof-chat-head{display:flex}

/* two clearly different voices: Jarvis (blue, left) and You (gold, right) */
#aiModal.jarvis-hud[data-dash="office"] .dz-ai-bubble--staff{
  margin-left:auto;max-width:88%;
  background:linear-gradient(180deg,rgba(251,191,36,.14),rgba(251,191,36,.05))!important;
  border:1px solid rgba(251,191,36,.45)!important;
}
#aiModal.jarvis-hud[data-dash="office"] .dz-ai-bubble--staff .dz-ai-bubble-head b{color:#fde68a!important}
#aiModal.jarvis-hud[data-dash="office"] .dz-ai-bubble--assistant{
  margin-right:auto;max-width:96%;
  background:linear-gradient(180deg,rgba(56,189,248,.14),rgba(56,189,248,.04))!important;
  border:1px solid rgba(56,189,248,.4)!important;
}

/* top bar */
.jof-bar-top{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 2px 8px}
.jof-chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.06em;color:#bfeaff;
  background:rgba(14,165,233,.12);border:1px solid rgba(56,189,248,.35);
}
.jof-chip i{width:8px;height:8px;border-radius:50%;background:#fbbf24;box-shadow:0 0 8px #fbbf24;animation:jof-pulse 1.1s infinite}
.jof-chip[data-s="meeting"] i{background:#34d399;box-shadow:0 0 8px #34d399;animation:none}
.jof-chip[data-s="prep"] i,.jof-chip[data-s="summoning"] i{background:#38bdf8;box-shadow:0 0 8px #38bdf8}
.jof-sub{font-size:11px;color:#8fb7cc;flex:1;min-width:120px;line-height:1.3}
.jof-btn{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:6px 12px;border-radius:9px;
  font-size:11.5px;font-weight:800;color:#d7f6ff;background:rgba(8,24,44,.85);border:1px solid rgba(56,189,248,.45);
}
.jof-btn:hover{background:rgba(14,165,233,.22)}
.jof-btn .material-icons{font-size:15px;width:15px;height:15px;overflow:hidden}
.jof-btn[hidden]{display:none}
.jof-btn.is-primary{background:linear-gradient(180deg,#0ea5e9,#2563eb);border-color:#38bdf8;color:#fff}
.jof-btn.is-warn{background:linear-gradient(180deg,#f59e0b,#d97706);border-color:#fbbf24;color:#1a1100}
.jof-btn[disabled]{opacity:.55;cursor:default}

/* scene */
.jof-viewport{
  position:relative;flex:1 1 auto;min-height:0;overflow:auto;
  border:1px solid rgba(56,189,248,.22);border-radius:14px;
  background:radial-gradient(ellipse at 50% 40%,rgba(14,60,100,.35),rgba(3,9,20,.9));
  -webkit-overflow-scrolling:touch;
}
.jof-sizer{position:relative;margin:0 auto}
.jof-stage{
  position:absolute;left:0;top:0;width:1000px;height:620px;transform-origin:0 0;
  font-family:Inter,system-ui,sans-serif;color:#d7f6ff;user-select:none;
}

/* team reports */
.jof-tray-wrap{flex:none;margin-top:8px;display:flex;flex-direction:column;min-height:0;max-height:36%}
.jof-tray-head{
  flex:none;display:flex;align-items:center;gap:8px;padding:0 2px 5px;
  font-size:10px;font-weight:800;letter-spacing:.14em;color:#7dd3fc;
}
.jof-tray-head i{flex:1;height:1px;background:linear-gradient(90deg,rgba(56,189,248,.4),transparent)}
.jof-tray-head em{font-style:normal;color:#8fb7cc;letter-spacing:.04em;font-weight:700}
.jof-tray{
  flex:1 1 auto;min-height:0;overflow:auto;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr));-webkit-overflow-scrolling:touch;
}
.jof-rep{
  min-width:0;padding:7px 8px;border-radius:10px;cursor:pointer;
  background:rgba(4,14,28,.78);border:1px solid color-mix(in srgb,var(--c) 38%,rgba(125,211,252,.12));
  transition:box-shadow .25s,border-color .25s;
}
.jof-rep:hover{border-color:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 40%,transparent)}
.jof-rep-h{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.jof-rep-h i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);flex:none}
.jof-rep-h b{font-size:11.5px;color:var(--c);font-weight:800}
.jof-rep-h span{font-size:9.5px;color:#8fb7cc;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jof-rep-h em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.05em;padding:1px 6px;border-radius:999px;background:rgba(251,191,36,.15);color:#fde68a;white-space:nowrap}
.jof-rep.is-ready .jof-rep-h em{background:rgba(52,211,153,.16);color:#6ee7b7}
.jof-rep ul{margin:0;padding:0;list-style:none}
.jof-rep li{display:flex;gap:5px;font-size:10.5px;line-height:1.35;color:#cfeefa;margin-bottom:2px}
.jof-rep li .material-icons{font-size:12px;width:12px;height:12px;overflow:hidden;color:#34d399;margin-top:1px;flex:none}
.jof-rep li.k-watch .material-icons{color:#fbbf24}
.jof-rep li.k-job .material-icons{color:#38bdf8}
.jof-rep li span{min-width:0;overflow-wrap:anywhere}
.jof-rep .jof-none{font-size:10.5px;color:#7c9db0}
.jof-rep .jof-more{font-size:9.5px;color:#7c9db0;margin-top:2px}

/* rooms */
.jof-room{
  position:absolute;border-radius:10px;overflow:visible;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,#071426),#061020),repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.035) 24px);
  border:2px solid color-mix(in srgb,var(--c) 55%,#0b2236);
  box-shadow:inset 0 0 28px color-mix(in srgb,var(--c) 14%,transparent);
  transition:box-shadow .4s,border-color .4s,filter .4s;
}
.jof-room.is-empty{box-shadow:inset 0 0 14px rgba(0,0,0,.6);filter:saturate(.55) brightness(.85)}
.jof-room.is-working{box-shadow:inset 0 0 34px color-mix(in srgb,var(--c) 30%,transparent),0 0 14px color-mix(in srgb,var(--c) 28%,transparent)}
.jof-plate{
  position:absolute;left:8px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c);background:rgba(3,10,22,.8);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);
}
.jof-plate small{display:block;font-size:10px;letter-spacing:.03em;font-weight:600;color:#9bbccd;text-transform:none}
.jof-room.A .jof-plate{top:6px}
.jof-room.B .jof-plate{bottom:6px}
.jof-door{position:absolute;left:calc(50% - 22px);width:44px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--c) 80%,#fff);box-shadow:0 0 10px var(--c)}
.jof-room.A .jof-door{bottom:-4px}
.jof-room.B .jof-door{top:-4px}
.jof-desk{position:absolute;left:calc(50% - 46px);width:92px;height:26px;border-radius:6px;background:linear-gradient(180deg,#1d3350,#142640);border:1px solid rgba(125,211,252,.25)}
.jof-room.A .jof-desk{top:34px}
.jof-room.B .jof-desk{top:92px}
.jof-mon{position:absolute;left:calc(50% - 15px);top:-14px;width:30px;height:15px;border-radius:3px 3px 1px 1px;background:#06101c;border:1px solid color-mix(in srgb,var(--c) 70%,#000)}
.jof-room.B .jof-mon{top:auto;bottom:-14px;border-radius:1px 1px 3px 3px}
.jof-mon::after{content:"";position:absolute;inset:2px;border-radius:1px;background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--c) 70%,transparent) 0 2px,transparent 2px 4px);opacity:.25}
.jof-room.is-working .jof-mon::after{opacity:.95;animation:jof-screen .5s steps(2) infinite}

.jof-card{position:absolute;left:8px;right:8px;padding:5px 8px 6px;border-radius:7px;background:rgba(3,10,22,.84);border:1px solid rgba(125,211,252,.18)}
.jof-room.A .jof-card{bottom:8px}
.jof-room.B .jof-card{top:8px}
.jof-card-t{font-size:12px;line-height:1.25;font-weight:650;color:#cfeefa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jof-card-t b{color:var(--c)}
.jof-prog{margin-top:4px;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.jof-prog i{display:block;height:100%;width:0;background:var(--c);box-shadow:0 0 8px var(--c);border-radius:3px}
.jof-card.is-live .jof-prog i{width:38%!important;transition:none!important;animation:jof-slide 1.2s ease-in-out infinite}
.jof-card.is-done .jof-prog i{width:100%!important;background:#34d399;box-shadow:0 0 8px #34d399;transition:none!important;animation:none}

/* meeting room */
.jof-meet{
  position:absolute;left:12px;top:168px;width:976px;height:284px;border-radius:12px;
  background:radial-gradient(ellipse at 50% 50%,rgba(56,189,248,.08),transparent 65%),linear-gradient(180deg,#0a1a30,#071326);
  border:2px solid rgba(56,189,248,.45);box-shadow:inset 0 0 40px rgba(14,165,233,.12);transition:box-shadow .5s,border-color .5s;
}
.jof-meet.is-live{border-color:rgba(52,211,153,.75);box-shadow:inset 0 0 50px rgba(52,211,153,.18),0 0 22px rgba(52,211,153,.25)}
.jof-meet-plate{position:absolute;left:14px;top:8px;font-size:11px;font-weight:800;letter-spacing:.14em;color:#7dd3fc}
.jof-table{
  position:absolute;left:300px;top:94px;width:400px;height:96px;border-radius:48px;
  background:linear-gradient(180deg,#16304f,#0e2038);border:2px solid rgba(125,211,252,.4);
  box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 0 22px rgba(56,189,248,.18);
}
.jof-table::after{content:"DOPETZCOM";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.4em;color:rgba(125,211,252,.35)}
.jof-screen{
  position:absolute;left:380px;top:26px;width:252px;height:26px;border-radius:6px;background:#04101f;border:1px solid rgba(56,189,248,.5);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.05em;color:#7dd3fc;text-align:center;box-shadow:0 0 16px rgba(56,189,248,.25);
}
.jof-board{position:absolute;left:18px;top:44px;width:112px;padding:7px 8px;border-radius:7px;background:rgba(3,10,22,.8);border:1px solid rgba(125,211,252,.25);font-size:10.5px;line-height:1.55;color:#a9cde0}
.jof-board b{display:block;font-size:10px;letter-spacing:.14em;color:#7dd3fc;margin-bottom:2px}
.jof-board span{display:flex;justify-content:space-between;gap:6px}
.jof-board em{font-style:normal;color:#fff;font-weight:800}
.jof-boss{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
.jof-boss .jof-boss-seat{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(251,191,36,.28),rgba(251,191,36,.06));border:2px dashed rgba(251,191,36,.7);color:#fde68a;overflow:hidden;
}
.jof-boss .material-icons{font-size:22px;width:22px;height:22px;overflow:hidden}
.jof-boss b{font-size:11px;letter-spacing:.14em;color:#fde68a}
.jof-boss.is-talking .jof-boss-seat{animation:jof-ring 1s infinite;border-style:solid}

/* people */
.jof-a{position:absolute;width:44px;height:58px;margin:-34px 0 0 -22px;z-index:5;transition-property:left,top;transition-timing-function:linear;transition-duration:.6s;cursor:pointer}
.jof-a.is-walking .jof-fig{animation:jof-bob .28s ease-in-out infinite}
.jof-a.is-typing .jof-fig{animation:jof-type .45s ease-in-out infinite}
.jof-fig{position:absolute;left:8px;top:6px;width:28px;height:40px}
.jof-fig .jof-head{position:absolute;left:7px;top:0;width:14px;height:14px;border-radius:50%;background:var(--skin,#f1c9a5);z-index:2;box-shadow:inset -2px -2px 0 rgba(0,0,0,.12)}
.jof-fig .jof-hair{position:absolute;left:6px;top:-2px;width:16px;height:9px;border-radius:9px 9px 3px 3px;background:var(--hair,#1f2937);z-index:3}
.jof-fig .jof-body{
  position:absolute;left:1px;top:14px;width:26px;height:20px;border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));
  display:grid;place-items:center;color:#fff;box-shadow:0 0 10px color-mix(in srgb,var(--c) 55%,transparent);overflow:hidden;
}
.jof-fig .jof-body .material-icons{font-size:12px;width:12px;height:12px;overflow:hidden;opacity:.95}
.jof-fig .jof-legs{position:absolute;left:6px;top:33px;width:16px;height:7px;border-radius:0 0 4px 4px;background:#0b1a2c;border:1px solid rgba(255,255,255,.12)}
.jof-a.is-seated .jof-legs{display:none}
.jof-a.is-seated .jof-fig{top:10px}
.jof-a.face-l .jof-fig{transform:scaleX(-1)}
.jof-a.face-l.is-walking .jof-fig{animation:jof-bob-l .28s ease-in-out infinite}
.jof-tag{
  position:absolute;left:50%;top:48px;transform:translateX(-50%);white-space:nowrap;font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:1px 6px;border-radius:5px;
  background:rgba(3,10,22,.9);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
}
.jof-bubble{
  position:absolute;left:50%;bottom:62px;transform:translateX(-50%) scale(.9);transform-origin:bottom center;
  width:max-content;max-width:230px;padding:6px 9px;border-radius:10px 10px 10px 3px;font-size:12px;line-height:1.35;font-weight:600;color:#06101c;background:#e8f8ff;
  box-shadow:0 4px 14px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9;
}
.jof-a.has-bubble .jof-bubble{opacity:1;transform:translateX(-50%) scale(1)}
.jof-a.has-bubble{z-index:12}
.jof-wave{position:absolute;left:50%;top:-8px;transform:translateX(-50%);display:none;gap:2px;height:10px;align-items:flex-end}
.jof-wave s{display:block;width:3px;background:var(--c);border-radius:2px;height:4px;animation:jof-wave .6s ease-in-out infinite}
.jof-wave s:nth-child(2){animation-delay:.15s}
.jof-wave s:nth-child(3){animation-delay:.3s}
.jof-a.is-speaking .jof-wave{display:flex}
.jof-a.is-speaking .jof-body{box-shadow:0 0 16px var(--c)}
.jof-a.is-hot .jof-tag{box-shadow:0 0 12px var(--c)}

.jof-pop{
  position:absolute;z-index:30;width:236px;padding:10px 12px;border-radius:12px;
  background:rgba(4,14,28,.97);border:1px solid color-mix(in srgb,var(--c,#38bdf8) 60%,transparent);box-shadow:0 10px 30px rgba(0,0,0,.6);font-size:12px;color:#cfeefa;
}
.jof-pop h4{margin:0 0 1px;font-size:14px;color:var(--c,#38bdf8)}
.jof-pop p{margin:0 0 6px;color:#8fb7cc;font-size:11px;line-height:1.35}
.jof-pop ul{margin:0 0 8px;padding:0;list-style:none;max-height:110px;overflow:auto}
.jof-pop li{display:flex;gap:5px;line-height:1.35;margin-bottom:2px}
.jof-pop li .material-icons{font-size:13px;width:13px;height:13px;overflow:hidden;color:#34d399}
.jof-pop .jof-pop-btns{display:flex;gap:6px}
.jof-pop .jof-pop-btns .jof-btn{flex:1;justify-content:center}
.jof-pop-x{position:absolute;right:8px;top:6px;background:none;border:0;color:#7dd3fc;cursor:pointer;font-size:15px}

@keyframes jof-pulse{50%{opacity:.35}}
@keyframes jof-screen{50%{opacity:.45}}
@keyframes jof-bob{50%{transform:translateY(-3px)}}
@keyframes jof-bob-l{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-3px)}}
@keyframes jof-type{50%{transform:translateY(1.5px)}}
@keyframes jof-wave{0%,100%{height:3px}50%{height:10px}}
@keyframes jof-ring{0%{box-shadow:0 0 0 0 rgba(251,191,36,.6)}100%{box-shadow:0 0 0 14px rgba(251,191,36,0)}}
@keyframes jof-slide{0%{margin-left:-38%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.jof-a,.jof-fig,.jof-wave s,.jof-chip i,.jof-boss-seat,.jof-prog i{animation:none!important}}

/* stop the dashboard grid from forcing the modal wider than the screen */
#aiModal.jarvis-hud .jarvis-dash,
#aiModal.jarvis-hud .jarvis-dash-main,
#aiModal.jarvis-hud .jarvis-dash-nav,
#aiModal.jarvis-hud .jarvis-dash-menu{min-width:0;max-width:100%}

/* tablet / phone: office on top, conversation below */
@media (max-width:980px){
  #aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,52%) minmax(0,1fr)}
  #aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-body .jarvis-deck-office{order:1}
  #aiModal.jarvis-hud[data-dash="office"] .jarvis-deck-body .jarvis-deck-talk{order:2}
  .jof-tray-wrap{max-height:30%}
  .jof-sub{display:none}
}
@media (max-width:600px){.jof-tray-wrap{display:none}}

/* narrow left column: composer wraps, text box gets its own full-width line */
#aiModal.jarvis-hud[data-dash="office"] .jarvis-composer{flex-wrap:wrap;gap:6px;align-items:center}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-composer #dzAiAskInput{order:-1;flex:1 1 100%;min-width:0;width:100%}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-composer #dzAiAskBtn{margin-left:auto}
#aiModal.jarvis-hud[data-dash="office"] .jarvis-composer .jarvis-auto-toggle{flex:0 1 auto}

/* ---------- folder icon in every department room ---------- */
.jof-folder{
  position:absolute;right:8px;z-index:4;width:34px;height:30px;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:8px;color:var(--c);
  background:rgba(3,10,22,.85);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  transition:transform .15s,box-shadow .2s;
}
.jof-room.A .jof-folder{top:6px}
.jof-room.B .jof-folder{bottom:6px}
.jof-folder .material-icons{font-size:20px;width:20px;height:20px;overflow:hidden}
.jof-folder b{
  position:absolute;right:-6px;top:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  font-size:9.5px;font-weight:800;line-height:16px;text-align:center;color:#06101c;background:var(--c);
}
.jof-folder:hover{transform:translateY(-1px) scale(1.08);box-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent)}
.jof-folder:not(.has-items){opacity:.6}
.jof-reports-btn b{font-size:10px;padding:0 6px;border-radius:999px;background:#38bdf8;color:#04101f;line-height:16px}

/* ---------- reports modal (opens over the whole Jarvis window) ---------- */
#aiModal .jarvis-deck{position:relative}
.jof-modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:14px}
.jof-modal[hidden]{display:none}
.jof-modal-bg{position:absolute;inset:0;background:rgba(2,8,18,.72);backdrop-filter:blur(3px)}
.jof-modal-box{
  position:relative;width:min(1080px,100%);max-height:100%;display:flex;flex-direction:column;
  padding:12px 14px 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(8,22,42,.98),rgba(4,10,22,.99));
  border:1px solid rgba(56,189,248,.45);box-shadow:0 0 40px rgba(14,165,233,.25),0 24px 80px rgba(0,0,0,.6);
}
.jof-modal-box .jof-tray-head{padding-bottom:10px;font-size:11px}
.jof-modal-box .jof-tray-head span{display:inline-flex;align-items:center;gap:6px}
.jof-modal-box .jof-tray-head .material-icons{font-size:18px;width:18px;height:18px;overflow:hidden;color:#fbbf24}
.jof-modal-x{margin-left:6px;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:18px;line-height:1;color:#7dd3fc;background:rgba(8,24,44,.9);border:1px solid rgba(56,189,248,.4)}
.jof-modal-box .jof-tray{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:2px}
.jof-modal-box .jof-rep{padding:10px 11px;cursor:default}
.jof-modal-box .jof-rep.is-focus{border-color:var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
.jof-modal-box .jof-rep li{font-size:11.5px;margin-bottom:4px}
.jof-modal-box .jof-rep ul{max-height:280px;overflow:auto}
.jof-rep-ask{margin-top:8px;width:100%;justify-content:center}

/* ---------- left sidebar: icons only (saves space) ---------- */
@media (min-width:768px){
  #aiModal.jarvis-hud .jarvis-dash{grid-template-columns:64px minmax(0,1fr)}
  #aiModal.jarvis-hud .jarvis-dash-nav{padding-left:6px;padding-right:6px;align-items:center}
  #aiModal.jarvis-hud .jarvis-dash-brand{padding:6px 0 10px;justify-content:center}
  #aiModal.jarvis-hud .jarvis-dash-brand h2{display:none}
  #aiModal.jarvis-hud .jarvis-dash-menu,
  #aiModal.jarvis-hud .jarvis-dash-nav-foot{width:100%;align-items:center}
  #aiModal.jarvis-hud .jarvis-dash-item{justify-content:center;padding:12px 0;gap:0}
}
#aiModal.jarvis-hud .jarvis-dash-item > span:not(.material-icons){display:none}
#aiModal.jarvis-hud .jarvis-dash-item .material-icons{font-size:23px;width:23px;height:23px;overflow:hidden}
#aiModal.jarvis-hud .jarvis-dash-item .jarvis-dash-badge{
  position:absolute;top:3px;right:5px;margin:0;min-width:15px;height:15px;line-height:15px;padding:0 4px;font-size:9px;
}
@media (max-width:767px){
  #aiModal.jarvis-hud .jarvis-dash-item{padding:8px 14px}
}
@media (max-width:600px){
  .jof-modal{padding:6px}
  .jof-modal-box .jof-tray{grid-template-columns:1fr}
  .jof-reports-btn span{display:none}
}

/* ---------- needs you: room badge, briefing panel, rows ---------- */
.jof-need{
  position:absolute;right:48px;z-index:4;height:30px;padding:0 9px 0 6px;cursor:pointer;
  display:inline-flex;align-items:center;gap:3px;border-radius:999px;
  color:#1a1100;background:#fbbf24;border:1px solid #fde68a;font-size:11px;font-weight:800;
}
.jof-need[hidden]{display:none}
.jof-room.A .jof-need{top:6px}
.jof-room.B .jof-need{bottom:6px}
.jof-need .material-icons{font-size:15px;width:15px;height:15px;overflow:hidden}
.jof-need.is-urgent{background:#ef4444;border-color:#fecaca;color:#fff;animation:jof-urgent 1.4s infinite}
@keyframes jof-urgent{0%{box-shadow:0 0 0 0 rgba(239,68,68,.65)}100%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}

.jof-needbtn{background:rgba(251,191,36,.18);border-color:#fbbf24;color:#fde68a}
.jof-needbtn b{font-size:10px;padding:0 6px;border-radius:999px;background:#fbbf24;color:#1a1100;line-height:16px}
.jof-needbtn.is-urgent{background:rgba(239,68,68,.22);border-color:#ef4444;color:#fecaca}
.jof-needbtn.is-urgent b{background:#ef4444;color:#fff}

.jof-brief{
  position:absolute;left:30px;top:138px;width:222px;padding:8px 8px 8px;border-radius:9px;
  background:rgba(3,10,22,.88);border:1px solid rgba(251,191,36,.45);box-shadow:0 0 14px rgba(251,191,36,.12);
}
.jof-brief-h{display:flex;align-items:center;gap:5px;margin-bottom:5px;font-size:10px;letter-spacing:.14em;color:#fde68a}
.jof-brief-h .material-icons{font-size:14px;width:14px;height:14px;overflow:hidden}
.jof-brief-h em{margin-left:auto;font-style:normal;font-weight:800;color:#06101c;background:#fbbf24;border-radius:999px;padding:0 7px;line-height:15px}
.jof-brief-row{
  display:flex;align-items:center;gap:6px;width:100%;margin-bottom:3px;padding:4px 6px;text-align:left;cursor:pointer;
  font-size:11px;line-height:1.3;color:#cfeefa;background:rgba(8,24,44,.75);border:1px solid rgba(125,211,252,.18);border-radius:7px;
}
.jof-brief-row:hover{border-color:var(--c);background:rgba(14,165,233,.14)}
.jof-brief-row i{width:7px;height:7px;border-radius:50%;background:#fbbf24;flex:none}
.jof-brief-row.is-urgent i{background:#ef4444;box-shadow:0 0 6px #ef4444}
.jof-brief-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jof-brief-row span b{color:var(--c)}
.jof-brief-row .material-icons{font-size:15px;width:15px;height:15px;overflow:hidden;color:#7dd3fc}
.jof-brief-none{font-size:11px;color:#7c9db0;padding:2px 2px 4px}
.jof-brief-say{
  display:inline-flex;align-items:center;gap:4px;margin-top:2px;padding:3px 9px;cursor:pointer;border-radius:7px;
  font-size:10.5px;font-weight:800;color:#d7f6ff;background:rgba(8,24,44,.9);border:1px solid rgba(56,189,248,.45);
}
.jof-brief-say .material-icons{font-size:14px;width:14px;height:14px;overflow:hidden}

.jof-needs{margin:0 0 7px;padding:6px 7px;border-radius:8px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.35)}
.jof-needs-h{display:flex;align-items:center;gap:4px;margin-bottom:4px;font-size:9.5px;letter-spacing:.14em;font-weight:800;color:#fde68a}
.jof-needs-h .material-icons{font-size:13px;width:13px;height:13px;overflow:hidden}
.jof-needs-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:11.5px;line-height:1.3;color:#e8f8ff}
.jof-needs-row span{flex:1;min-width:0}
.jof-needs-row.is-urgent span{color:#fecaca}
.jof-needs-row .jof-btn{padding:3px 8px;font-size:10.5px;white-space:nowrap;flex:none}

/* ---- quick asks, drafts, since-last-opened, copy ---- */
.jof-asks{flex:none;display:flex;gap:6px;overflow-x:auto;padding:0 2px 8px;scrollbar-width:thin}
.jof-ask{flex:none;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.02em;padding:4px 10px;border-radius:999px;color:#bae6fd;background:rgba(8,24,44,.85);border:1px solid rgba(56,189,248,.35);white-space:nowrap}
.jof-ask:hover{background:rgba(14,165,233,.22);border-color:#38bdf8;color:#fff}
.jof-ask.is-draft{color:#fde68a;border-color:rgba(251,191,36,.45)}
.jof-ask.is-draft:hover{background:rgba(251,191,36,.18);border-color:#fbbf24}
.jof-brief-since{display:flex;gap:6px;align-items:flex-start;margin-top:5px;padding:4px 6px;border-radius:7px;font-size:10.5px;line-height:1.35;color:#bae6fd;background:rgba(14,165,233,.1);border:1px solid rgba(56,189,248,.25)}
.jof-brief-since .material-icons{font-size:14px;width:14px;height:14px;overflow:hidden;flex:none;color:#38bdf8}
.jof-brief-since.is-notes{color:#fde68a;background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.3)}
.jof-brief-since.is-notes .material-icons{color:#fbbf24}
.jof-copy{margin-left:auto;display:inline-flex;align-items:center;gap:3px;cursor:pointer;font:inherit;font-size:10px;padding:1px 7px;border-radius:999px;color:inherit;background:transparent;border:1px solid currentColor;opacity:.55}
.jof-copy:hover{opacity:1}
.jof-copy .material-icons{font-size:12px;width:12px;height:12px;overflow:hidden}
#jofWeekly .jof-tray-head .jof-btn{margin-left:6px}

.jof-strip{flex:none;display:flex;flex-direction:column;gap:4px;padding:0 2px 8px}
.jof-strip[hidden]{display:none}
.jof-strip-row{display:flex;gap:6px;align-items:flex-start;padding:4px 8px;border-radius:8px;font-size:11px;line-height:1.35;color:#bae6fd;background:rgba(14,165,233,.1);border:1px solid rgba(56,189,248,.25)}
.jof-strip-row .material-icons{font-size:15px;width:15px;height:15px;overflow:hidden;flex:none;color:#38bdf8}
.jof-strip-row span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jof-strip-row.is-notes{color:#fde68a;background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.3)}
.jof-strip-row.is-notes .material-icons{color:#fbbf24}
/* v21: highlighted key facts */
.jof-bubble b{background:linear-gradient(transparent 52%,rgba(250,204,21,.55) 52%);color:inherit;font-weight:800;padding:0 1px}
.dz-ai-key{background:linear-gradient(transparent 55%,rgba(250,204,21,.4) 55%);color:inherit;font-weight:800;padding:0 1px;border-radius:2px}
.dz-ai-status-line{font-weight:700}