/* mode-scoping-modal.css — matches Studios scoping modal design */
:root {
  --m-accent:     hsl(170, 84%, 31%);
  --m-accent-h:   hsl(170, 84%, 26%);
  --m-accent-10:  hsla(170, 84%, 31%, 0.1);
  --m-accent-20:  hsla(170, 84%, 31%, 0.2);
  --m-muted:      var(--sm-text-muted, hsl(220, 9%, 40%));
  --m-faint:      var(--sm-text-faint, hsl(220, 9%, 65%));
  --m-green:      hsl(160, 70%, 35%);
  --font:         'Noto Sans', system-ui, -apple-system, sans-serif;
  --mono:         ui-monospace, 'Cascadia Mono', 'Courier New', monospace;
}

.msc-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99000;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.msc-overlay.msc-open{display:flex;animation:msc-bg .2s ease}
@keyframes msc-bg{from{opacity:0}to{opacity:1}}

.msc-shell{width:100%;max-width:900px;background:var(--sm-card, #fff);border-radius:16px;box-shadow:0 32px 80px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.2);overflow:hidden;display:flex;flex-direction:column;height:87vh;max-height:710px;animation:msc-in .22s ease}
@keyframes msc-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* Header */
.msc-hdr{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-bottom:1px solid var(--sm-border);flex-shrink:0}
.msc-hdr-l{display:flex;align-items:center;gap:10px}
.msc-logo{width:34px;height:34px;background:var(--m-accent-10);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.msc-logo svg{width:17px;height:17px;stroke:var(--m-accent);fill:none;stroke-width:2;stroke-linecap:round}
.msc-title{font-size:15px;font-weight:700;letter-spacing:-.3px;color:var(--sm-text)}
.msc-sub{font-size:11px;color:var(--m-faint);margin-top:1px}
.msc-hdr-r{display:flex;align-items:center;gap:10px}
.msc-close{width:30px;height:30px;border:none;background:var(--sm-bg);border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--m-muted);transition:background .12s;line-height:1}
.msc-close:hover{background:var(--sm-border);color:var(--sm-text)}

/* Journey bar — matches Studios .journey-bar */
.msc-journey{display:flex;align-items:flex-start;justify-content:center;padding:10px 20px 0;position:relative;gap:0;flex-shrink:0}
.msc-journey::before{content:'';position:absolute;top:18px;left:calc(50% - 42%);width:84%;height:1.5px;background:var(--sm-border);z-index:0}
.msc-j-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1;cursor:default}
.msc-j-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid var(--sm-border);background:var(--sm-card, #fff);transition:background .2s,border-color .2s}
.msc-j-label{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--m-faint);text-align:center;line-height:1.3;white-space:nowrap;transition:color .2s}
.msc-j-step.jb-done .msc-j-dot{background:var(--m-accent);border-color:var(--m-accent)}
.msc-j-step.jb-done .msc-j-dot::after{content:'';display:block;width:4px;height:7px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translate(1px,-1px);margin:1px auto 0}
.msc-j-step.jb-done .msc-j-label{color:var(--m-accent)}
.msc-j-step.jb-active .msc-j-dot{background:var(--m-accent);border-color:var(--m-accent);box-shadow:0 0 0 3px var(--m-accent-10)}
.msc-j-step.jb-active .msc-j-label{color:var(--m-accent);font-weight:700}
.msc-j-step.jb-future .msc-j-dot{border-style:dashed}
.msc-j-step.jb-future .msc-j-label{color:var(--m-faint)}

/* Tabs */
.msc-tabs{display:flex;gap:3px;background:var(--sm-bg);border-radius:10px;padding:3px;margin:15px 22px 0;flex-shrink:0}
.msc-tab{flex:1;padding:8px 14px;border-radius:8px;border:none;background:transparent;color:var(--m-muted);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .15s;white-space:nowrap}
.msc-tab.on{background:var(--m-accent);color:#fff;box-shadow:0 2px 8px var(--m-accent-20)}
.msc-tab:hover:not(.on):not(.msc-locked){background:var(--sm-border);color:var(--sm-text)}
.msc-locked{opacity:.38;cursor:default;pointer-events:none}
.msc-locked.msc-ready{opacity:1;pointer-events:auto;cursor:pointer}

/* Panels */
.msc-panels{flex:1;min-height:0;overflow:hidden}
.msc-panel{display:none;height:100%}
.msc-panel.on{display:flex}

/* Chat messages */
.msc-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:13px;padding-right:4px;margin-bottom:14px;scroll-behavior:smooth}
.msc-msgs::-webkit-scrollbar{width:4px}
.msc-msgs::-webkit-scrollbar-thumb{background:var(--sm-border);border-radius:2px}
.msc-msg{display:flex;gap:9px}
.msc-msg.ai{align-self:flex-start;max-width:94%}
.msc-msg.usr{align-self:flex-end;flex-direction:row-reverse;max-width:80%}
.msc-av{width:27px;height:27px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.ai .msc-av{background:var(--m-accent-10);color:var(--m-accent)}
.usr .msc-av{background:hsla(221,83%,53%,.1);color:hsl(221,83%,53%)}
.msc-bub{padding:10px 14px;border-radius:13px;font-size:13.5px;line-height:1.65}
.ai .msc-bub{background:var(--sm-card);border:1px solid var(--sm-border);color:var(--sm-text)}
.usr .msc-bub{background:var(--m-accent);color:#fff}

/* Input */
.msc-input{display:flex;gap:8px;padding-top:2px;flex-shrink:0}
.msc-input textarea{flex:1;border:1px solid var(--sm-border);border-radius:12px;padding:11px 15px;font-family:var(--font);font-size:13.5px;resize:none;height:44px;overflow-y:hidden;color:var(--sm-text);background:var(--sm-card);outline:none;transition:border-color .15s}
.msc-input textarea:focus{border-color:var(--m-accent)}
.msc-input textarea::placeholder{color:var(--m-faint)}
.msc-send{width:40px;height:40px;border-radius:10px;border:none;background:var(--m-accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;align-self:flex-end}
.msc-send:hover{background:var(--m-accent-h)}
.msc-send:disabled{opacity:.4;cursor:default}
.msc-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Sidebar — matches Studios .sidebar / .cl-card */
.sidebar{width:210px;flex-shrink:0;padding:18px 14px;overflow-y:auto;background:var(--sm-bg)}
.cl-card{background:var(--sm-card);border:1px solid var(--sm-border);border-radius:var(--sm-radius, 12px);padding:14px 15px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.cl-lbl{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--m-faint);margin-bottom:12px;font-family:var(--mono)}
.cl-list{display:flex;flex-direction:column;gap:8px}
.cl-item{display:flex;align-items:center;gap:8px;font-size:12px}
.cl-item svg{width:14px;height:14px;flex-shrink:0}
.cl-done{color:var(--m-green);font-weight:600}
.cl-cur{color:var(--m-accent);font-weight:600}
.cl-pend{color:var(--m-faint)}
.cl-foot{margin-top:13px;padding-top:11px;border-top:1px solid var(--sm-bg)}
.cl-prog-txt{font-size:11px;color:var(--m-muted);margin-bottom:5px}
.prog-bar{height:5px;background:var(--sm-bg);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:var(--m-accent);border-radius:3px;transition:width .5s ease}

/* Summary */
.msc-scope{background:var(--sm-card);border:1px solid var(--sm-border);border-radius:14px;padding:28px 26px;margin-bottom:20px}
.msc-scope-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.msc-scope-top-t{font-size:16px;font-weight:700;color:var(--sm-text)}
.msc-pill{font-size:11px;font-weight:600;padding:4px 12px;border-radius:99px;background:var(--m-accent-10);color:var(--m-accent)}
.msc-sec{margin-bottom:18px}
.msc-sec-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--m-faint);margin-bottom:8px}
.msc-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid var(--sm-bg)}
.msc-row .sk{color:var(--m-muted);font-weight:500}
.msc-row .sv{color:var(--sm-text);font-weight:600;text-align:right;max-width:55%}
.msc-narrative{font-size:13.5px;line-height:1.7;color:var(--sm-text);white-space:pre-wrap}

/* Email capture */
.msc-sso{margin-top:24px;padding-top:20px;border-top:1px solid var(--sm-border);text-align:center}
.msc-sso-title{font-size:14px;font-weight:600;color:var(--sm-text);margin-bottom:4px}
.msc-sso-sub{font-size:12px;color:var(--m-muted);margin-bottom:16px;line-height:1.5}
.msc-em-row{display:flex;gap:8px;max-width:360px;margin:0 auto}
.msc-em-row input{flex:1;padding:10px 14px;border:1px solid var(--sm-border);border-radius:10px;font-family:var(--font);font-size:13px;outline:none;color:var(--sm-text);background:var(--sm-card)}
.msc-em-row input:focus{border-color:var(--m-accent)}
.msc-em-row input.err{border-color:hsl(0,72%,51%)}
.msc-em-send{padding:10px 20px;border:none;border-radius:10px;background:var(--m-accent);color:#fff;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.msc-em-send:hover{background:var(--m-accent-h)}
.msc-em-send:disabled{opacity:.5;cursor:default}
.msc-em-ok{display:none;margin-top:14px;padding:14px;background:hsla(160,70%,35%,.08);border-radius:10px;font-size:13px;color:var(--m-green);font-weight:500;line-height:1.5}

/* Typing */
.msc-typing{color:var(--m-faint);font-style:italic;font-size:13px}

/* Responsive */
@media (max-width: 700px) {
  .msc-shell{height:95vh;max-height:none;border-radius:12px}
  .sidebar{display:none}
  .msc-scope{padding:20px 18px}
  .msc-j-label{display:none}
  .msc-journey{gap:0;padding:10px 16px 0}
}