/* MDx Code Workspace — Terminal Aesthetic
   Dark theme #0a0a0b, green accent #34d399, monospace for code/traces */

*{margin:0;padding:0;box-sizing:border-box}
body.code-workspace{background:#0a0a0b;color:#f0f0f2;font-family:'DM Sans',sans-serif;overflow:hidden;height:100vh}

/* Layout: sidebar + main */
.code-layout{display:flex;height:100vh}

/* Left sidebar nav */
.code-sidebar{width:220px;min-width:220px;background:#0f0f11;border-right:1px solid #1a1a1e;display:flex;flex-direction:column;height:100vh}
.code-sidebar-header{padding:16px 16px 12px;border-bottom:1px solid #1a1a1e}
.code-sidebar-logo{font-size:.95rem;font-weight:700;color:#f0f0f2;text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.code-sidebar-logo span{color:#34d399;font-family:'JetBrains Mono',monospace;font-size:.85rem}

.code-new-run{display:block;margin:12px 12px 8px;padding:10px 16px;background:#34d399;color:#0a0a0b;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;transition:background .15s}
.code-new-run:hover{background:#4ade80}

.code-nav{flex:1;overflow-y:auto;padding:8px 0}
.code-nav a{display:flex;align-items:center;gap:10px;padding:8px 16px;color:#71717a;text-decoration:none;font-size:.8rem;transition:all .15s;border-left:2px solid transparent}
.code-nav a:hover{color:#f0f0f2;background:rgba(255,255,255,.03)}
.code-nav a.active{color:#34d399;border-left-color:#34d399;background:rgba(52,211,153,.06)}
.code-nav-icon{font-family:'JetBrains Mono',monospace;font-size:.75rem;width:20px;text-align:center;opacity:.7}
.code-nav a.active .code-nav-icon{opacity:1}

.code-sidebar-footer{padding:12px 16px;border-top:1px solid #1a1a1e}
.code-sidebar-footer a{color:#52525b;font-size:.7rem;text-decoration:none;transition:color .15s}
.code-sidebar-footer a:hover{color:#a1a1aa}

/* Main content area */
.code-main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.code-topbar{padding:12px 24px;border-bottom:1px solid #1a1a1e;display:flex;align-items:center;justify-content:space-between;min-height:48px}
.code-topbar-title{font-size:.85rem;font-weight:600;color:#f0f0f2}
.code-topbar-actions{display:flex;gap:8px;align-items:center}

.code-content{flex:1;padding:32px 24px;overflow-y:auto}

/* Empty states */
.code-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}
.code-empty-icon{font-size:2.5rem;margin-bottom:16px;opacity:.3}
.code-empty-title{font-size:1.1rem;font-weight:600;color:#f0f0f2;margin-bottom:8px}
.code-empty-desc{font-size:.85rem;color:#71717a;max-width:400px;line-height:1.6;margin-bottom:20px}
.code-empty-cta{display:inline-block;padding:10px 20px;background:#34d399;color:#0a0a0b;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s}
.code-empty-cta:hover{background:#4ade80}

/* Terminal-style blocks */
.code-term{background:#111113;border:1px solid #1a1a1e;border-radius:10px;overflow:hidden;font-family:'JetBrains Mono',monospace;font-size:.75rem}
.code-term-bar{height:32px;background:#161618;display:flex;align-items:center;padding:0 12px;gap:6px;border-bottom:1px solid #1a1a1e}
.code-term-dot{width:8px;height:8px;border-radius:50%}
.code-term-dot.r{background:#ff5f57}.code-term-dot.y{background:#febc2e}.code-term-dot.g{background:#28c840}
.code-term-body{padding:16px;line-height:1.8;color:#a1a1aa;white-space:pre-wrap;word-break:break-word}
.code-term-body .green{color:#34d399}
.code-term-body .white{color:#f0f0f2;font-weight:500}
.code-term-body .dim{color:#52525b}

/* Cards */
.code-card{background:#111113;border:1px solid #1a1a1e;border-radius:10px;padding:20px;transition:border-color .2s}
.code-card:hover{border-color:#252528}
.code-card-title{font-size:.85rem;font-weight:600;margin-bottom:6px}
.code-card-desc{font-size:.78rem;color:#71717a;line-height:1.5}

/* Progress bar */
.code-progress{height:4px;background:#1a1a1e;border-radius:2px;overflow:hidden;width:100%}
.code-progress-bar{height:100%;background:#34d399;border-radius:2px;transition:width .3s ease}

/* Banners */
.code-banner{background:#111113;border:1px solid #1a1a1e;border-radius:10px;padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
.code-banner-dismiss{margin-left:auto;background:none;border:none;color:#52525b;cursor:pointer;font-size:1rem;padding:4px}

/* Badges */
.code-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.code-badge.queued{background:rgba(251,191,36,.1);color:#fbbf24}
.code-badge.running{background:rgba(52,211,153,.1);color:#34d399}
.code-badge.completed{background:rgba(52,211,153,.15);color:#34d399}
.code-badge.failed{background:rgba(239,68,68,.1);color:#ef4444}

/* Loading context */
.code-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px}
.code-loading-text{font-size:.8rem;color:#71717a}
.code-loading-dots{display:flex;gap:4px}
.code-loading-dots span{width:6px;height:6px;border-radius:50%;background:#34d399;animation:code-dot-pulse 1.4s infinite ease-in-out}
.code-loading-dots span:nth-child(2){animation-delay:.2s}
.code-loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes code-dot-pulse{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

/* Mobile */
@media(max-width:768px){
  .code-sidebar{position:fixed;left:-240px;z-index:100;transition:left .3s;width:240px}
  .code-sidebar.open{left:0}
  .code-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}
  .code-overlay.visible{display:block}
}

/* Docs-specific */
.docs-layout{display:flex;height:100%}
.docs-nav{width:200px;min-width:200px;border-right:1px solid #1a1a1e;overflow-y:auto;padding:12px 0}
.docs-nav a{display:block;padding:6px 16px;color:#71717a;text-decoration:none;font-size:.78rem;transition:all .15s;border-left:2px solid transparent}
.docs-nav a:hover{color:#f0f0f2}
.docs-nav a.active{color:#34d399;border-left-color:#34d399}
.docs-reader{flex:1;overflow-y:auto;padding:32px 40px;max-width:800px}
.docs-reader h1{font-size:1.6rem;font-weight:700;margin-bottom:8px;letter-spacing:-.03em}
.docs-reader h2{font-size:1.2rem;font-weight:600;margin-top:32px;margin-bottom:8px;color:#f0f0f2}
.docs-reader h3{font-size:1rem;font-weight:600;margin-top:24px;margin-bottom:6px;color:#e4e4e7}
.docs-reader p{font-size:.85rem;color:#a1a1aa;line-height:1.7;margin-bottom:12px}
.docs-reader code{font-family:'JetBrains Mono',monospace;font-size:.78rem;background:#161618;padding:2px 6px;border-radius:4px;color:#34d399}
.docs-reader pre{background:#111113;border:1px solid #1a1a1e;border-radius:8px;padding:16px;overflow-x:auto;margin:12px 0;font-family:'JetBrains Mono',monospace;font-size:.75rem;line-height:1.7;color:#a1a1aa}
.docs-reader pre code{background:none;padding:0;color:inherit}
.docs-reader a{color:#34d399;text-decoration:none}
.docs-reader a:hover{text-decoration:underline}
.docs-reader ul,
.docs-reader ol{margin:8px 0 12px 20px;font-size:.85rem;color:#a1a1aa;line-height:1.7}
.docs-reader table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.78rem}
.docs-reader th{text-align:left;padding:8px 12px;border-bottom:1px solid #252528;color:#f0f0f2;font-weight:600}
.docs-reader td{padding:8px 12px;border-bottom:1px solid #1a1a1e;color:#a1a1aa}
.docs-search{padding:8px 12px;border-bottom:1px solid #1a1a1e}
.docs-search input{width:100%;padding:6px 10px;background:#111113;border:1px solid #1a1a1e;border-radius:6px;color:#f0f0f2;font-size:.75rem;outline:none}
.docs-search input:focus{border-color:#34d399}
.docs-feedback{margin-top:40px;padding-top:20px;border-top:1px solid #1a1a1e;font-size:.78rem;color:#52525b}
.docs-feedback a{color:#34d399;text-decoration:none;cursor:pointer}

/* Onboarding-specific */
.onboard-container{max-width:640px;margin:0 auto;padding:40px 20px}
.onboard-step{display:none}
.onboard-step.active{display:block}
.onboard-step-label{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#34d399;margin-bottom:8px}
.onboard-step-title{font-size:1.6rem;font-weight:700;letter-spacing:-.03em;margin-bottom:8px}
.onboard-step-desc{font-size:.85rem;color:#a1a1aa;line-height:1.6;margin-bottom:24px}
.onboard-progress-wrap{margin:20px 0}
.onboard-progress-label{font-size:.75rem;color:#71717a;margin-bottom:6px;display:flex;justify-content:space-between}
.onboard-form textarea{width:100%;min-height:80px;padding:12px;background:#111113;border:1px solid #1a1a1e;border-radius:8px;color:#f0f0f2;font-size:.85rem;font-family:inherit;resize:vertical;outline:none}
.onboard-form textarea:focus{border-color:#34d399}
.onboard-actions{display:flex;gap:10px;margin-top:16px}
.onboard-btn-primary{padding:10px 24px;background:#34d399;color:#0a0a0b;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s}
.onboard-btn-primary:hover{background:#4ade80}
.onboard-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.onboard-btn-secondary{padding:10px 24px;background:transparent;color:#71717a;border:1px solid #252528;border-radius:8px;font-size:.8rem;cursor:pointer;transition:all .15s}
.onboard-btn-secondary:hover{color:#f0f0f2;border-color:#3f3f46}
.onboard-result{background:#111113;border:1px solid #1a1a1e;border-radius:10px;padding:20px;margin-top:20px}
.onboard-result-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.78rem;color:#a1a1aa;border-bottom:1px solid #1a1a1e}
.onboard-result-row:last-child{border-bottom:none}
.onboard-result-label{color:#71717a}
.onboard-result-value{color:#f0f0f2;font-family:'JetBrains Mono',monospace}

/* --- Runs page --- */

/* Buttons */
.code-btn-sm{padding:6px 14px;background:#34d399;color:#0a0a0b;border:none;border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .15s;text-decoration:none;display:inline-block}
.code-btn-sm:hover{background:#4ade80}
.code-btn-primary{padding:10px 20px;background:#34d399;color:#0a0a0b;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s}
.code-btn-primary:hover{background:#4ade80}
.code-btn-primary:disabled{opacity:.5;cursor:not-allowed}
.code-btn-ghost{padding:8px 16px;background:transparent;color:#71717a;border:1px solid #252528;border-radius:6px;font-size:.78rem;cursor:pointer;transition:all .15s}
.code-btn-ghost:hover{color:#f0f0f2;border-color:#3f3f46}

/* Form inputs */
.code-label{display:block;font-size:.72rem;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.code-label-opt{font-weight:400;text-transform:none;letter-spacing:0;color:#52525b}
.code-input{width:100%;padding:8px 12px;background:#111113;border:1px solid #1a1a1e;border-radius:6px;color:#f0f0f2;font-size:.8rem;font-family:inherit;outline:none;transition:border-color .15s}
.code-input:focus{border-color:#34d399}
.code-input-textarea{width:100%;padding:10px 12px;background:#111113;border:1px solid #1a1a1e;border-radius:8px;color:#f0f0f2;font-size:.8rem;font-family:inherit;resize:vertical;outline:none;transition:border-color .15s}
.code-input-textarea:focus{border-color:#34d399}
.code-select{width:100%;padding:8px 12px;background:#111113;border:1px solid #1a1a1e;border-radius:6px;color:#f0f0f2;font-size:.8rem;font-family:inherit;outline:none;cursor:pointer;appearance:auto}
.code-select:focus{border-color:#34d399}
.code-select-sm{padding:6px 10px;background:#111113;border:1px solid #1a1a1e;border-radius:6px;color:#a1a1aa;font-size:.75rem;font-family:inherit;outline:none;cursor:pointer;appearance:auto}
.code-select-sm:focus{border-color:#34d399}

/* CLI hint */
.code-cli-hint{font-family:'JetBrains Mono',monospace;font-size:.72rem;padding:10px 14px;background:#0f0f11;border:1px solid #1a1a1e;border-radius:6px;color:#a1a1aa;line-height:1.6}
.code-cli-hint .green{color:#34d399}
.code-cli-hint .dim{color:#52525b}

/* Filters bar */
.code-filters{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.code-filter-group{display:flex;align-items:center;gap:8px}

/* Run row (clickable list item) */
.code-run-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#111113;border:1px solid #1a1a1e;border-radius:8px;margin-bottom:8px;text-decoration:none;color:inherit;transition:border-color .15s}
.code-run-row:hover{border-color:#252528}
.code-run-intent{font-size:.82rem;color:#f0f0f2;flex:1;margin-right:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-run-meta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.code-run-duration,.code-run-cost,.code-run-time{font-size:.72rem;color:#52525b;font-family:'JetBrains Mono',monospace}

/* Links */
.code-link{color:#34d399;text-decoration:none;font-size:.8rem}
.code-link:hover{text-decoration:underline}

/* New Run form */
.code-new-run-form{margin-bottom:24px}

/* --- Run detail page --- */

/* Detail grid (label/value rows) */
.code-detail-grid{display:flex;flex-direction:column;gap:0}
.code-detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #1a1a1e;font-size:.78rem}
.code-detail-row:last-child{border-bottom:none}
.code-detail-label{color:#71717a}
.code-detail-value{color:#f0f0f2;font-family:'JetBrains Mono',monospace;text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Step rows */
.code-step-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.78rem;border-bottom:1px solid #1a1a1e}
.code-step-row:last-child{border-bottom:none}
.code-step-name{flex:1;color:#a1a1aa}
.code-step-duration{color:#52525b;font-family:'JetBrains Mono',monospace;font-size:.72rem}

/* Feedback buttons */
.code-btn-feedback{width:36px;height:36px;border:1px solid #252528;border-radius:6px;background:transparent;color:#71717a;font-size:1rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.code-btn-feedback:hover{border-color:#3f3f46;color:#f0f0f2}
.code-btn-feedback.selected{border-color:#34d399;color:#34d399;background:rgba(52,211,153,.06)}

/* --- Agents page --- */

.code-agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.code-agent-card{background:#111113;border:1px solid #1a1a1e;border-radius:10px;padding:20px;transition:border-color .2s}
.code-agent-card:hover{border-color:#252528}
.code-agent-card-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.code-agent-card-icon{width:36px;height:36px;background:#161618;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:.85rem;color:#34d399;flex-shrink:0}
.code-agent-card-name{font-size:.85rem;font-weight:600;color:#f0f0f2}
.code-agent-card-type{font-size:.7rem;color:#52525b;margin-top:2px}
.code-agent-card-desc{font-size:.78rem;color:#71717a;line-height:1.5;margin-bottom:14px}
.code-agent-card-actions{display:flex;gap:8px}
.code-badge-inline{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;margin-left:4px}
.code-badge-inline.shared{background:rgba(99,102,241,.1);color:#818cf8}
.code-badge-inline.custom{background:rgba(251,191,36,.1);color:#fbbf24}

/* --- Sessions page --- */

/* Session cards */
.session-card{display:block;background:#111113;border:1px solid #1a1a1e;border-radius:10px;padding:16px 20px;margin-bottom:10px;text-decoration:none;color:inherit;transition:border-color .2s}
.session-card:hover{border-color:#34d399}
.session-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.session-card-title{font-size:.85rem;font-weight:600;color:#f0f0f2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:12px}
.session-card-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.session-card-repo{font-size:.72rem;color:#34d399;font-family:'JetBrains Mono',monospace}
.session-card-model,.session-card-msgs,.session-card-cost,.session-card-time{font-size:.72rem;color:#52525b;font-family:'JetBrains Mono',monospace}

/* Mobile adjustments for runs/agents */
@media(max-width:768px){
  .code-run-meta{flex-wrap:wrap;gap:6px}
  .code-run-duration,.code-run-cost{display:none}
  .code-agent-grid{grid-template-columns:1fr}
  .code-detail-value{max-width:50%}
  .code-new-run-form .code-card{max-width:100%!important}
  .session-card-meta{gap:6px}
  .session-card-cost{display:none}
}