/* public/style.css — HRGen AI Studio · GIA HUD theme
   Every existing class/id selector from the previous stylesheet is preserved
   (agent-card, status-ring, tab, view, panel, feed-item, pill, list-item,
   conn-card, modal-overlay, toggle-switch, etc.) — only the visual language
   changed to the GIA sci-fi HUD direction. app.js needs zero changes. */

:root{
  --bg:#050508; --bg-alt:#0b0a13; --bg-deep:#020203;
  --panel:rgba(255,255,255,0.045); --panel-hi:rgba(255,255,255,0.09); --panel-solid:#0d0c15;
  --border:rgba(155,92,255,0.14); --border-hi:rgba(155,92,255,0.32);
  --text:#f5f3fb; --dim:#a29dc2; --dimmer:#655f80;
  --purple:#6B1FC7; --purple2:#9B5CFF; --purple-glow:rgba(155,92,255,0.55);
  --pink:#E80D9C; --pink2:#FF5FD6; --pink-glow:rgba(255,95,214,0.5);
  --yellow:#FFC838; --teal:#14B8A6; --green:#2FE08A; --sky:#38BDF8; --slate:#94A3B8; --red:#FB6363;
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --shine: linear-gradient(120deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 45%);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 60px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.03);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  position:relative;
  background:
    radial-gradient(ellipse 1000px 620px at 16% -10%, rgba(155,92,255,0.20), transparent 60%),
    radial-gradient(ellipse 820px 560px at 106% 4%, rgba(255,95,214,0.13), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 112%, rgba(20,184,166,0.08), transparent 60%),
    var(--bg);
  color:var(--text); font-family:'Inter',sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased;
  letter-spacing:0.1px;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
::selection{background:var(--purple);color:#fff;}
a{color:inherit;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:rgba(155,92,255,0.18);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(155,92,255,0.3);}

/* ============================ HUD ATMOSPHERE ============================ */
/* hex-grid + circuit-trace texture, low-opacity, non-interactive, behind everything */
.bg-hex,.bg-circuit{position:fixed;inset:0;pointer-events:none;z-index:0;}
.bg-hex{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI1NiIgdmlld0JveD0iMCAwIDY0IDU2Ij4KPHBvbHlnb24gcG9pbnRzPSIxNiwxIDQ4LDEgNjQsMjggNDgsNTUgMTYsNTUgMCwyOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDE1NSw5MiwyNTUsMC4xNikiIHN0cm9rZS13aWR0aD0iMSIvPgo8L3N2Zz4=");
  background-size:70px 61px;opacity:0.4;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(ellipse 1100px 800px at 20% 0%, #000 0%, transparent 70%);
          mask:radial-gradient(ellipse 1100px 800px at 20% 0%, #000 0%, transparent 70%);
}
.bg-circuit{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxODAiIGhlaWdodD0iMTgwIiB2aWV3Qm94PSIwIDAgMTgwIDE4MCI+CjxwYXRoIGQ9Ik0wIDQwIEg2MCBWOTAgSDEzMCBWMzAgSDE4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDIzMiwxMywxNTYsMC4xNCkiIHN0cm9rZS13aWR0aD0iMSIvPgo8cGF0aCBkPSJNMzAgMTgwIFYxMzAgSDkwIFYxNjAgSDE4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDE1NSw5MiwyNTUsMC4xNCkiIHN0cm9rZS13aWR0aD0iMSIvPgo8cGF0aCBkPSJNMCAxNTAgSDQwIFYxMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgxNTUsOTIsMjU1LDAuMTApIiBzdHJva2Utd2lkdGg9IjEiLz4KPGNpcmNsZSBjeD0iNjAiIGN5PSI0MCIgcj0iMi40IiBmaWxsPSJyZ2JhKDIzMiwxMywxNTYsMC40KSIvPgo8Y2lyY2xlIGN4PSIxMzAiIGN5PSI5MCIgcj0iMi40IiBmaWxsPSJyZ2JhKDE1NSw5MiwyNTUsMC40KSIvPgo8Y2lyY2xlIGN4PSI5MCIgY3k9IjEzMCIgcj0iMi40IiBmaWxsPSJyZ2JhKDIzMiwxMywxNTYsMC40KSIvPgo8Y2lyY2xlIGN4PSI0MCIgY3k9IjExMCIgcj0iMiIgZmlsbD0icmdiYSgxNTUsOTIsMjU1LDAuMzUpIi8+Cjwvc3ZnPg==");
  background-size:200px 200px;opacity:0.35;mix-blend-mode:screen;
}
.bg-particles{position:fixed;inset:0;pointer-events:none;z-index:0;}
.bg-particles span{
  position:absolute;width:2.5px;height:2.5px;border-radius:50%;
  background:currentColor;box-shadow:0 0 7px 1.5px currentColor;
  animation:twinkle 3.6s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:0.12;}50%{opacity:0.85;}}
#app{position:relative;z-index:1;}

/* ============================ APP SHELL ============================ */
#app{display:flex;min-height:100vh;}

/* ------ Sidebar (brand + nav lives here; .tab items rendered vertically) ------ */
.sidebar{
  width:238px;flex:none;padding:22px 14px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(180deg, rgba(155,92,255,0.05), rgba(255,255,255,0.01));
  border-right:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.sidebar-scroll{display:flex;flex-direction:column;gap:4px;flex:1;}

/* Header (brand block, sits at top of sidebar) — the GIA mark lives here */
header{display:flex;flex-direction:column;gap:14px;padding:4px 6px 18px;position:relative;}
.brand{display:flex;align-items:center;gap:11px;}
.brand-mark{
  width:44px;height:44px;border-radius:50%;flex:none;position:relative;overflow:visible;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:linear-gradient(145deg,#6B1FC7,#E80D9C 55%,#FF5FD6);
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 24px rgba(232,13,156,.5);
}
.brand-mark::before{
  content:'';position:absolute;inset:-7px;border-radius:50%;z-index:0;
  background:radial-gradient(circle, rgba(255,95,214,0.55), rgba(155,92,255,0.3) 50%, transparent 72%);
  filter:blur(5px);animation:breathe 3.2s ease-in-out infinite;
}
.brand-mark img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;position:relative;z-index:1;
  filter:drop-shadow(0 0 12px rgba(255,95,214,0.75));animation:markFloat 5.5s ease-in-out infinite;
}
@keyframes markFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-2px) rotate(8deg);}}
@keyframes breathe{0%,100%{opacity:0.55;transform:scale(0.92);}50%{opacity:1;transform:scale(1.1);}}
.brand h1{font-size:15.5px;margin:0;font-weight:700;letter-spacing:0.3px;}
.brand p{margin:2px 0 0;font-size:10.5px;color:var(--dim);font-family:'JetBrains Mono',monospace;letter-spacing:0.4px;}

.pulse-pill{
  display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);
  padding:9px 13px;border-radius:12px;font-size:11.5px;color:var(--dim);cursor:pointer;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;text-decoration:none;
}
.pulse-pill:hover{border-color:var(--border-hi);background:var(--panel-hi);transform:translateY(-1px);}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--pink2);animation:pulseDot 2s infinite;flex:none;box-shadow:0 0 10px 1px var(--pink-glow);}
.pulse-dot.off{background:var(--red);animation:none;box-shadow:0 0 10px 1px rgba(251,99,99,0.6);}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(255,95,214,0.55);}70%{box-shadow:0 0 0 8px rgba(255,95,214,0);}100%{box-shadow:0 0 0 0 rgba(255,95,214,0);}}

/* ------ Sidebar nav (the .tab elements) — HUD selector style ------ */
.tabs{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.tab{
  font-family:'Inter',sans-serif;font-weight:600;font-size:13px;color:var(--dim);
  background:transparent;border:1px solid transparent;border-left:2px solid transparent;
  padding:10px 13px;border-radius:0 10px 10px 0;cursor:pointer;
  letter-spacing:0.1px;position:relative;transition:background .16s ease, color .16s ease, border-color .16s ease;
  display:flex;align-items:center;gap:9px;
}
.tab::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--dimmer);flex:none;transition:.16s ease;}
.tab:hover{color:var(--text);background:rgba(155,92,255,0.06);}
.tab.active{
  color:#fff;background:linear-gradient(90deg, rgba(155,92,255,0.22), rgba(255,95,214,0.08));
  border-left-color:var(--pink2);
  box-shadow:0 8px 20px -10px var(--purple-glow) inset;
}
.tab.active::before{background:var(--pink2);box-shadow:0 0 8px 1px var(--pink-glow);}
.tab .badge{background:var(--pink);color:#fff;font-size:9.5px;border-radius:99px;padding:1px 7px;margin-left:auto;font-family:'JetBrains Mono',monospace;}

.sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px;}

.view{display:none;}
.view.active{display:block;animation:viewIn .35s ease;}
@keyframes viewIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ------ Main content ------ */
.main{flex:1;min-width:0;padding:26px 30px 90px;max-width:1180px;position:relative;}

/* ============================== PANELS ============================== */
.panel{
  background:linear-gradient(160deg, var(--panel), rgba(255,255,255,0.014));
  border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px 24px;margin-bottom:18px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--glass-shadow);position:relative;overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(155,92,255,0.6),rgba(255,95,214,0.5),transparent);}
.panel::after{content:'';position:absolute;top:10px;left:10px;width:14px;height:14px;border-top:1px solid rgba(155,92,255,0.35);border-left:1px solid rgba(155,92,255,0.35);pointer-events:none;}
.panel:hover{border-color:var(--border-hi);}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px;}
.panel-head h2{font-size:15px;margin:0 0 2px;letter-spacing:0.15px;font-weight:600;}
.panel-sub{font-size:12.5px;color:var(--dim);margin:0 0 16px;line-height:1.55;}

/* ============================ BUSINESS PULSE ============================ */
.pulse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
@media(max-width:860px){.pulse-grid{grid-template-columns:1fr 1fr;}}
.pulse-card{
  background:linear-gradient(155deg, rgba(155,92,255,0.07), rgba(255,255,255,0.012));
  border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 16px;
  box-shadow:var(--glass-shadow);position:relative;overflow:hidden;
}
.pulse-card::after{content:'';position:absolute;top:-40%;right:-30%;width:70%;height:140%;background:var(--pulse-tint,var(--purple-glow));opacity:0.18;filter:blur(30px);border-radius:50%;}
.pulse-card .pk{font-size:10.5px;color:var(--dimmer);text-transform:uppercase;letter-spacing:0.7px;font-family:'JetBrains Mono',monospace;position:relative;}
.pulse-card .pv{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;margin-top:6px;position:relative;background:linear-gradient(120deg,#fff,var(--purple2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.pulse-card .ps{font-size:11px;color:var(--dim);margin-top:3px;position:relative;}

/* ============================== ROSTER ============================== */
.dept{margin-bottom:16px;}
.dept-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.dept-bar{width:3px;height:13px;border-radius:2px;flex:none;box-shadow:0 0 8px 0 currentColor;}
.dept-head span{font-size:11.5px;color:var(--dim);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;}
.agent-grid{display:flex;flex-wrap:wrap;gap:10px;}
.agent-card{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(160deg, rgba(155,92,255,0.05), rgba(255,255,255,0.01));
  border:1px solid var(--border);border-radius:14px;padding:11px 13px 11px 11px;cursor:pointer;
  min-width:180px;flex:1 1 180px;position:relative;overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.agent-card::before{content:'';position:absolute;inset:0;background:var(--shine);opacity:0;transition:opacity .3s ease;}
.agent-card:hover{transform:translateY(-3px);border-color:var(--border-hi);box-shadow:0 16px 32px -18px rgba(0,0,0,0.75),0 0 24px -10px var(--purple-glow);}
.agent-card:hover::before{opacity:1;}
.agent-icon{
  width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:15px;background:rgba(155,92,255,0.09);border:1px solid var(--border);position:relative;
}
.status-ring{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--dimmer);border:2px solid var(--bg-alt);transition:.2s ease;}
.status-ring.thinking{background:var(--yellow);animation:ringPulse 0.9s infinite;box-shadow:0 0 10px 1px rgba(255,200,56,0.7);}
.status-ring.working{background:var(--pink2);animation:ringPulse 0.7s infinite;box-shadow:0 0 10px 1px var(--pink-glow);}
.status-ring.done{background:var(--green);box-shadow:0 0 10px 1px rgba(47,224,138,0.7);}
.status-ring.error{background:var(--red);box-shadow:0 0 10px 1px rgba(251,99,99,0.7);}
@keyframes ringPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.25);}}
.agent-meta{min-width:0;}
.agent-meta .name{font-size:12.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agent-meta .role{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.agent-meta .sub{font-size:9.5px;color:var(--dimmer);font-family:'JetBrains Mono',monospace;}

/* ============================== CONSOLE / CONVERSATION ============================== */
textarea,input[type=text],input[type=tel],input[type=password],select{
  width:100%;background:rgba(0,0,0,0.32);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-family:'Inter',sans-serif;font-size:13.5px;padding:11px 13px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
textarea{resize:vertical;min-height:64px;line-height:1.55;}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--purple2);box-shadow:0 0 0 3px rgba(155,92,255,0.15);}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px;}
.chip{font-size:11.5px;color:var(--dim);background:rgba(155,92,255,0.05);border:1px solid var(--border);padding:6.5px 12px;border-radius:99px;cursor:pointer;transition:.16s ease;}
.chip:hover{color:var(--text);border-color:var(--purple2);background:rgba(155,92,255,0.12);}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.btn{
  background:linear-gradient(135deg,var(--purple2),var(--pink2));color:#fff;border:none;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;padding:11px 21px;border-radius:11px;
  cursor:pointer;box-shadow:0 12px 26px -8px var(--purple-glow), 0 1px 0 rgba(255,255,255,0.25) inset;
  position:relative;overflow:hidden;transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 32px -8px var(--purple-glow), 0 1px 0 rgba(255,255,255,0.3) inset;}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.btn.secondary{background:rgba(155,92,255,0.08);box-shadow:none;border:1px solid var(--border);}
.btn.secondary:hover{background:rgba(155,92,255,0.14);box-shadow:none;}
.btn.small{padding:7.5px 14px;font-size:11.5px;border-radius:9px;}
.btn.danger{background:linear-gradient(135deg,#dc2626,#b91c1c);}
.btn.wide-auto{width:auto;}
.status-text{font-size:12px;color:var(--dim);font-family:'JetBrains Mono',monospace;}

/* Feed → chat-style workflow bubbles */
#feed{max-height:460px;overflow-y:auto;display:flex;flex-direction:column;gap:11px;padding-right:4px;}
.feed-empty{color:var(--dimmer);font-size:12.5px;text-align:center;padding:34px 10px;}
.feed-item{
  display:flex;gap:10px;font-size:12.8px;line-height:1.55;
  background:rgba(155,92,255,0.035);border:1px solid var(--border);border-radius:12px;padding:10px 13px;
  animation:feedIn .3s ease;
}
@keyframes feedIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.feed-avatar{width:26px;height:26px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;background:rgba(155,92,255,0.1);border:1px solid var(--border);margin-top:1px;}
.feed-body b{font-weight:600;}
.feed-body .arrow{color:var(--dimmer);margin:0 3px;}
.feed-body .txt{color:var(--dim);display:block;margin-top:2px;}
.feed-item.system{background:transparent;border-style:dashed;}
.feed-item.system .feed-body .txt{color:var(--dimmer);font-style:italic;}

/* Report */
.report-headline{font-size:16px;font-weight:600;font-family:'Space Grotesk',sans-serif;line-height:1.4;margin:0 0 14px;}
.report-action{display:flex;gap:10px;align-items:flex-start;background:rgba(155,92,255,0.035);border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-bottom:8px;}
.owner-tag{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--bg);background:var(--yellow);padding:2px 8px;border-radius:99px;flex:none;font-weight:700;white-space:nowrap;margin-top:1px;}
.report-watch{font-size:12px;color:var(--dim);border-top:1px solid var(--border);padding-top:12px;margin-top:6px;}
.report-watch b{color:var(--yellow);}

/* Lists (approvals, schedules, automations, logs) */
.list-item{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--border);font-size:12.5px;flex-wrap:wrap;}
.list-item:last-child{border-bottom:none;}
.list-main{flex:1;min-width:200px;}
.list-title{font-weight:600;font-size:13px;}
.list-sub{color:var(--dim);font-size:11.5px;margin-top:2px;}
.pill{font-family:'JetBrains Mono',monospace;font-size:10px;padding:3.5px 10px;border-radius:99px;border:1px solid var(--border);white-space:nowrap;}
.pill.pending{color:var(--yellow);border-color:rgba(255,200,56,0.4);}
.pill.approved,.pill.configured,.pill.done{color:var(--green);border-color:rgba(47,224,138,0.4);}
.pill.rejected,.pill.failed,.pill.error{color:var(--red);border-color:rgba(251,99,99,0.4);}
.pill.notconfigured{color:var(--dimmer);}
.empty-note{color:var(--dimmer);font-size:12.5px;font-style:italic;padding:8px 0;}

/* Connector grid */
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.conn-card{background:rgba(155,92,255,0.035);border:1px solid var(--border);border-radius:12px;padding:12px 13px;transition:border-color .16s ease;}
.conn-card:hover{border-color:var(--border-hi);}
.conn-card .name{font-weight:600;font-size:12.5px;margin-bottom:4px;}
.conn-card .env{font-size:10px;color:var(--dimmer);font-family:'JetBrains Mono',monospace;margin-top:6px;line-height:1.55;word-break:break-all;}

/* Forms (automation builder / schedules) */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px;}
.form-grid.full{grid-template-columns:1fr;}
label{font-size:11px;color:var(--dimmer);text-transform:uppercase;letter-spacing:0.6px;display:block;margin-bottom:5px;font-family:'JetBrains Mono',monospace;}
.rule-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center;}
.action-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center;}
.remove-x{background:none;border:none;color:var(--dimmer);cursor:pointer;font-size:16px;padding:4px;}
.remove-x:hover{color:var(--red);}
.section-label{font-size:11.5px;color:var(--dim);font-weight:600;margin:16px 0 9px;}

@media(max-width:900px){
  .sidebar{position:relative;width:100%;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;}
  .sidebar-foot{display:none;}
  .tabs{flex-direction:row;flex-wrap:wrap;}
  .main{padding:18px 16px 70px;}
}
@media(max-width:640px){
  .agent-card{min-width:100%;}
  .form-grid,.rule-row,.action-row{grid-template-columns:1fr;}
  .pulse-grid{grid-template-columns:1fr 1fr;}
}

/* ===== New Agent modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(2,2,5,0.75);backdrop-filter:blur(3px);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-box{width:100%;max-width:460px;max-height:86vh;overflow-y:auto;background:var(--panel-solid);border:1px solid var(--border-hi);border-radius:var(--radius);padding:24px;box-shadow:0 40px 80px -20px rgba(0,0,0,0.85), 0 0 60px -20px var(--purple-glow);}
.field{margin-bottom:12px;}
.field label{font-size:11px;color:var(--dimmer);text-transform:uppercase;letter-spacing:0.6px;display:block;margin-bottom:5px;font-family:'JetBrains Mono',monospace;}
.field input,.field select,.field textarea{width:100%;background:rgba(0,0,0,0.32);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:13.5px;padding:10px 12px;font-family:'Inter',sans-serif;}
.field textarea{resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple2);}
.auth-error{color:var(--red);font-size:12px;margin-bottom:10px;min-height:16px;}

/* ===== Enable/disable toggle switch ===== */
.toggle-switch{position:relative;display:inline-block;width:38px;height:21px;flex:none;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,0.14);border-radius:999px;transition:0.18s;}
.toggle-slider::before{content:'';position:absolute;height:15px;width:15px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:0.18s;}
.toggle-switch input:checked + .toggle-slider{background:var(--pink2);box-shadow:0 0 10px 1px var(--pink-glow);}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(17px);}

.agent-card.disabled{opacity:0.42;}
.agent-card .card-toggle{position:absolute;top:10px;right:10px;}
.agent-card{position:relative;}

/* ===== Drawer + overlay (referenced inline in index.html but styled here for the glass look) ===== */
#drawer{background:var(--bg-alt);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:-30px 0 80px -30px rgba(0,0,0,0.85), 0 0 1px var(--border-hi) inset;}

/* ============================== GIA CHAT ============================== */
.gia-chat{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:2px 4px 12px;}
.gia-msg{max-width:78%;font-size:13px;line-height:1.55;padding:10px 14px;border-radius:14px;animation:feedIn .25s ease;white-space:pre-wrap;word-break:break-word;}
.gia-msg.owner{align-self:flex-end;background:linear-gradient(135deg,rgba(155,92,255,0.28),rgba(255,95,214,0.2));border:1px solid var(--border-hi);border-bottom-right-radius:4px;}
.gia-msg.gia{align-self:flex-start;background:rgba(255,255,255,0.045);border:1px solid var(--border);border-bottom-left-radius:4px;}
.gia-msg.gia.pending{color:var(--dimmer);font-style:italic;}
.gia-msg.gia.error{border-color:rgba(251,99,99,0.4);color:var(--red);}
.gia-input-row{display:flex;gap:9px;align-items:flex-end;margin-top:6px;}
.gia-input-row textarea{flex:1;min-height:44px;}
.gia-mic-btn{flex:none;font-size:16px;padding:10px 13px;}
.gia-mic-btn.listening{background:linear-gradient(135deg,var(--pink2),var(--purple2));animation:ringPulse 1s infinite;box-shadow:0 0 14px 2px var(--pink-glow);}
.gia-speak-toggle{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:6px;cursor:pointer;}
#giaDelegateFeed{margin-top:12px;display:flex;flex-direction:column;gap:9px;}

/* ============================== SYSTEM WIRING (R37/R38/R39) ============================== */
/* Additive only — new classes, nothing above this touched. Colors reuse
   the existing palette tokens so this matches the rest of the app:
   green=Working, yellow=Busy, red(blink)=Error, slate/dim=Sleeping,
   sky=Waiting, purple(glow)=GIA-Active. */
@keyframes errorBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(251,99,99,0.6);}50%{opacity:0.35;box-shadow:0 0 14px 4px rgba(251,99,99,0.5);}}

.wire-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;}
.wire-legend-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);}
.wire-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;}
.wire-dot.status-working{background:var(--green);box-shadow:0 0 8px 1px var(--green);}
.wire-dot.status-busy{background:var(--yellow);box-shadow:0 0 8px 1px var(--yellow);}
.wire-dot.status-error{background:var(--red);animation:errorBlink 0.9s infinite;}
.wire-dot.status-sleeping{background:var(--dimmer);}
.wire-dot.status-waiting{background:var(--sky);box-shadow:0 0 8px 1px var(--sky);}
.wire-dot.status-gia{background:var(--purple2);box-shadow:0 0 10px 2px var(--purple-glow);animation:breathe 2.2s ease-in-out infinite;}

.wire-map{display:flex;flex-direction:column;gap:22px;}
.wire-hub-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:4px;}
.wire-hub{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 26px;border-radius:var(--radius-lg);background:var(--panel-hi);border:1px solid var(--border-hi);box-shadow:var(--glass-shadow);min-width:150px;text-align:center;position:relative;}
.wire-hub .wire-hub-icon{font-size:26px;}
.wire-hub .wire-hub-name{font-weight:600;font-size:13px;}
.wire-hub .wire-hub-sub{font-size:11px;color:var(--dim);}
.wire-hub.gia-hub{border-color:rgba(155,92,255,0.4);}
.wire-hub.gia-hub.active{box-shadow:0 0 0 1px var(--purple2), 0 0 22px 4px var(--purple-glow);}

.wire-connector-line{width:2px;height:22px;margin:0 auto;background:linear-gradient(var(--border-hi),transparent);position:relative;}
.wire-connector-line.dashed{background:repeating-linear-gradient(180deg,var(--purple2) 0 6px,transparent 6px 12px);}

.wire-dept-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.wire-dept{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px;}
.wire-dept-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:10px;}
.wire-agent{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--border);margin-bottom:7px;}
.wire-agent:last-child{margin-bottom:0;}
.wire-agent-icon{font-size:16px;flex:none;}
.wire-agent-name{font-size:12.5px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wire-agent-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;}
.wire-chip{font-size:9.5px;padding:2px 6px;border-radius:99px;background:rgba(255,255,255,0.06);color:var(--dimmer);}
.wire-chip.on{color:var(--green);background:rgba(47,224,138,0.12);}
.wire-chip.off{color:var(--dimmer);}

.wire-conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.wire-conn-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--border);font-size:12px;}

.wire-mcp-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--border);margin-bottom:8px;font-size:12.5px;}

/* ============================== WALLPAPER PRESETS (R16/R17) ==============================
   Only overrides body{background}. 'nebula' matches the original default
   exactly — picking it is a no-op visually. Applied via a body class set
   in app.js from GET /api/studio-theme; nothing here changes unless a
   theme is actually saved with a different wallpaper. */
body.wp-nebula{
  background:
    radial-gradient(ellipse 1000px 620px at 16% -10%, rgba(155,92,255,0.20), transparent 60%),
    radial-gradient(ellipse 820px 560px at 106% 4%, rgba(255,95,214,0.13), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 112%, rgba(20,184,166,0.08), transparent 60%),
    var(--bg);
}
body.wp-circuit-teal{
  background:
    radial-gradient(ellipse 1000px 620px at 16% -10%, rgba(20,184,166,0.22), transparent 60%),
    radial-gradient(ellipse 820px 560px at 106% 4%, rgba(56,189,248,0.14), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 112%, rgba(155,92,255,0.08), transparent 60%),
    var(--bg);
}
body.wp-aurora-pink{
  background:
    radial-gradient(ellipse 1000px 620px at 16% -10%, rgba(255,95,214,0.24), transparent 60%),
    radial-gradient(ellipse 820px 560px at 106% 4%, rgba(155,92,255,0.16), transparent 55%),
    radial-gradient(ellipse 700px 500px at 50% 112%, rgba(255,200,56,0.07), transparent 60%),
    var(--bg);
}
body.wp-midnight-mono{
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(155,92,255,0.10), transparent 65%),
    var(--bg-deep);
}

/* ============================== UNIFIED CHAT (R54) ============================== */
.model-switch{display:flex;gap:6px;margin:14px 0;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:12px;padding:4px;width:fit-content;}
.model-switch-btn{background:none;border:none;color:var(--dim);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;padding:8px 16px;border-radius:9px;cursor:pointer;transition:0.15s;}
.model-switch-btn.active{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;box-shadow:0 6px 16px -6px var(--purple-glow);}
.model-switch-btn:not(.active):hover{color:var(--text);}
.gia-msg.gini{align-self:flex-start;background:rgba(255,95,214,0.08);border:1px solid rgba(255,95,214,0.25);border-bottom-left-radius:4px;}
.gia-msg.gini.pending{color:var(--dimmer);font-style:italic;}
.gia-msg.gini.error{border-color:rgba(251,99,99,0.4);color:var(--red);}
.gia-msg-label{font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--pink2);margin-bottom:4px;font-weight:700;}
.gia-msg.gia .gia-msg-label{color:var(--purple2);}

/* ============================== R55 — chat toolbar (Grok-parity controls) ============================== */
.chat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.chat-toolbar-toggle{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);cursor:pointer;}
.gia-msg.owner .attach-thumb{max-width:180px;border-radius:10px;display:block;margin-top:6px;border:1px solid var(--border-hi);}

/* ============================== R34 — ANIMATED HUD MOTION LAYER ==============================
   Additive only, nothing above this touched. Global scanning sweep +
   pulsing panel corner reticle (reuses the existing static .panel::after
   bracket, just adds motion to it) + rotating radar sweep behind the GIA
   brand mark (brand-mark::before already owns the soft glow; ::after was
   free) + a live HUD readout ticker injected into the sidebar footer by
   app.js. All decorative layers are pointer-events:none so nothing here
   can ever block a real click. */
.hud-scanline{
  position:fixed;left:0;right:0;top:-6%;height:130px;z-index:2;
  pointer-events:none;mix-blend-mode:screen;opacity:0.09;
  background:linear-gradient(180deg,transparent,rgba(155,92,255,0.9) 45%,rgba(255,95,214,0.9) 55%,transparent);
  filter:blur(1px);animation:hudScan 7s linear infinite;
}
@keyframes hudScan{0%{transform:translateY(0);}100%{transform:translateY(920%);}}

.panel::after{animation:cornerPulse 3.4s ease-in-out infinite;}
@keyframes cornerPulse{
  0%,100%{opacity:0.55;border-color:rgba(155,92,255,0.35);}
  50%{opacity:1;border-color:rgba(255,95,214,0.75);filter:drop-shadow(0 0 4px rgba(255,95,214,0.5));}
}

.brand-mark::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 250deg,rgba(255,95,214,0.75) 265deg,transparent 300deg 360deg);
  animation:radarSweep 3.6s linear infinite;opacity:0.85;
}
@keyframes radarSweep{to{transform:rotate(360deg);}}

.hud-readout{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);
  padding:8px 12px;margin-bottom:8px;border:1px solid var(--border);border-radius:10px;
  background:rgba(155,92,255,0.04);letter-spacing:0.3px;display:flex;align-items:center;gap:7px;
}
.hud-readout .hud-cursor{display:inline-block;width:6px;height:11px;background:var(--pink2);animation:hudBlink 1s step-end infinite;box-shadow:0 0 6px 1px var(--pink-glow);}
@keyframes hudBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* ============================== R36 — 3D ICON SYSTEM ==============================
   No external icon/asset library reachable from this build environment —
   these are hand-built inline SVG glyphs (registry lives in app.js:
   ICON_SHAPES / CONNECTOR_ICON) rendered inside a beveled gradient badge so
   they read as "3D" instead of flat, matching the app's existing purple/
   magenta HUD palette. Shape + color are set per instance via the
   data-icon attribute and the --i3d-a/--i3d-b custom properties. */
.icon3d{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;flex:none;
  background:linear-gradient(150deg,var(--i3d-a,#9B5CFF),var(--i3d-b,#6B1FC7));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -4px 7px rgba(0,0,0,0.35) inset,
    0 6px 14px -5px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.05);
  transform-style:preserve-3d;transition:transform .22s ease,box-shadow .22s ease;
}
.icon3d::before{
  content:'';position:absolute;top:1px;left:2px;right:2px;height:46%;
  background:linear-gradient(rgba(255,255,255,0.55),rgba(255,255,255,0));
  border-radius:6px 6px 50% 50%/6px 6px 70% 70%;opacity:0.55;pointer-events:none;
}
.icon3d svg{width:56%;height:56%;position:relative;color:#fff;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.45));}
.icon3d:hover{
  transform:perspective(320px) rotateX(10deg) rotateY(-10deg) translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.45) inset,0 -4px 7px rgba(0,0,0,0.3) inset,0 10px 20px -6px rgba(0,0,0,0.7),0 0 16px -2px var(--i3d-a,#9B5CFF);
}
.conn-card-head{display:flex;align-items:center;gap:9px;margin-bottom:6px;}
.conn-card-head .name{margin-bottom:0;}
.wire-hub-icon{display:flex;justify-content:center;}

/* ============================== R40 — CIRCULAR HUD PLATFORM + DNA HELIX ==============================
   Both purely decorative (pointer-events:none) and injected once by app.js
   at init — no new static markup added to index.html for these. */
.hud-ring{
  position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(155,92,255,0.35);transform:translate(-50%,-50%);
}
.hud-ring.r1{width:58px;height:58px;animation:ringSpin 9s linear infinite;}
.hud-ring.r2{width:72px;height:72px;border-color:rgba(255,95,214,0.22);border-style:dotted;animation:ringSpin 14s linear infinite reverse;}
.hud-ring.r3{width:86px;height:86px;border-color:rgba(155,92,255,0.12);animation:ringSpin 20s linear infinite;}
@keyframes ringSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}

.hud-helix{position:absolute;top:6px;right:14px;width:46px;height:56px;pointer-events:none;opacity:0.55;}
.hud-helix svg{width:100%;height:100%;animation:helixDrift 4.5s ease-in-out infinite;}
@keyframes helixDrift{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}

/* ============================== R41 — DRAG-DROP TAB CUSTOMIZER ==============================
   Additive. Normal browsing is unaffected — ".tabs.customizing" is only
   present while the sidebar's "Customize" toggle is on. */
.hud-customize-btn{width:100%;margin:2px 0 8px;}
.tab-handle,.tab-eye{display:none;flex:none;}
.tabs.customizing .tab{cursor:grab;padding-right:56px;}
.tabs.customizing .tab-handle,.tabs.customizing .tab-eye{display:inline-flex;align-items:center;justify-content:center;}
.tab-handle{position:absolute;right:30px;top:50%;transform:translateY(-50%);color:var(--dimmer);font-size:12px;cursor:grab;}
.tab-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,0.05);border:1px solid var(--border);font-size:10.5px;color:var(--dim);cursor:pointer;}
.tab-eye:hover{color:var(--text);border-color:var(--border-hi);}
.tab[data-hidden="true"]{display:none;}
.tabs.customizing .tab[data-hidden="true"]{display:flex;opacity:0.4;}
.tabs.customizing .tab[data-hidden="true"] .tab-eye{color:var(--red);}
.tab.dragging{opacity:0.35;}
.tab.drag-over-top{box-shadow:0 -2px 0 0 var(--pink2) inset;}
.tab.drag-over-bottom{box-shadow:0 -2px 0 0 var(--pink2);}

/* Respect reduced-motion preference — all Part 5 (R34/R40) infinite
   animations off; static HUD look remains via R35's existing palette. */
@media (prefers-reduced-motion: reduce){
  .hud-scanline,.brand-mark::after,.hud-ring,.hud-helix svg{animation:none !important;}
  .panel::after{animation:none !important;}
  .hud-readout .hud-cursor{animation:none !important;opacity:1;}
}