:root {
    --bg: #0a0a0f; --bg2: #111118; --bg3: #1a1a24;
    --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.12);
    --accent: #7c6bff; --accent2: #4fffb0; --accent3: #ff6b9d;
    --text: #e8e8f0; --text2: #8888a8; --text3: #55556a;
    --mono: 'JetBrains Mono', monospace; --sans: 'Syne', sans-serif;
    --radius: 12px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { background:var(--bg); color:var(--text); font-family:var(--sans); height:100vh; display:flex; flex-direction:column; overflow:hidden; }

  body::before {
    content:''; position:fixed; inset:0; z-index:0;
    background-image: linear-gradient(rgba(124,107,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(124,107,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px; pointer-events:none;
  }

  /* HEADER */
  header { position:relative; z-index:10; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:rgba(10,10,15,0.8); backdrop-filter:blur(10px); flex-shrink:0; cursor:pointer; }
  .logo { display:flex; align-items:center; gap:10px; }
  .logo-icon { width:32px; height:32px; background:var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:12px; color:#fff; }
  .logo-text { font-size:18px; font-weight:800; letter-spacing:-0.02em; }
  .logo-text span { color:var(--accent); }
  .header-right { display:flex; align-items:center; gap:12px; }
  .status-pill { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--accent2); }
  .status-pill::before { content:''; width:7px; height:7px; background:var(--accent2); border-radius:50%; animation:pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
  .header-badge { font-family:var(--mono); font-size:11px; color:var(--accent2); border:1px solid rgba(79,255,176,0.2); padding:4px 12px; border-radius:20px; }

  /* VIEWS */
  .view { display:none; flex:1; flex-direction:column; position:relative; z-index:1; }
  .view.active { display:flex; animation:fadeIn 0.4s ease forwards; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);} }

  /* HOME */
  #homeView { overflow-y:auto; padding-bottom:80px; align-items:center; }
  .hero { text-align:center; margin-top:80px; margin-bottom:48px; max-width:800px; padding:0 24px; }
  .hero h1 { font-size:clamp(40px,6vw,64px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; margin-bottom:24px; }
  .hero h1 span { color:var(--accent); }
  .hero p { font-size:18px; color:var(--text2); max-width:600px; margin:0 auto 32px; line-height:1.7; }
  .btn-primary { background:var(--accent); color:#fff; border:none; border-radius:var(--radius); padding:16px 36px; font-family:var(--sans); font-size:16px; font-weight:700; cursor:pointer; transition:all 0.2s; box-shadow:0 8px 24px rgba(124,107,255,0.2); }
  .btn-primary:hover { background:#9080ff; transform:translateY(-2px); box-shadow:0 12px 32px rgba(124,107,255,0.3); }
  .about-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:24px; max-width:900px; margin:0 auto; padding:0 24px; }
  .about-card { background:var(--bg2); border:1px solid var(--border2); padding:32px; border-radius:24px; text-align:left; }
  .about-card-icon { width:48px; height:48px; background:var(--bg3); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:20px; margin-bottom:20px; border:1px solid var(--border); }
  .about-card h3 { font-size:18px; margin-bottom:12px; }
  .about-card p { font-size:14px; color:var(--text2); line-height:1.6; }

  /* CHAT */
  #chatView { overflow:hidden; }
  .chat-container { flex:1; overflow-y:auto; padding:32px; display:flex; flex-direction:column; gap:24px; scroll-behavior:smooth; }
  .chat-container::-webkit-scrollbar { width:6px; }
  .chat-container::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
  .msg-row { display:flex; width:100%; max-width:900px; margin:0 auto; }
  .msg-row.user { justify-content:flex-end; }
  .msg-row.ai { justify-content:flex-start; }
  .msg-bubble { max-width:85%; padding:16px 20px; border-radius:16px; font-size:14px; line-height:1.6; }
  .msg-row.user .msg-bubble { background:var(--bg3); border:1px solid var(--border2); color:var(--text); border-bottom-right-radius:4px; }
  .msg-row.ai .msg-bubble { background:transparent; color:var(--text); max-width:100%; padding:0; }
  .ai-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .ai-avatar { width:24px; height:24px; background:var(--accent); border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:700; color:#fff; }
  .ai-name { font-weight:700; font-size:13px; color:var(--text2); }
  .ai-text { font-size:15px; color:var(--text); line-height:1.7; margin-bottom:16px; }
  .error-text { color:#ff6b6b; font-family:var(--mono); font-size:12px; padding:12px; background:rgba(255,107,107,0.1); border-radius:8px; border:1px solid rgba(255,107,107,0.2); }

  /* OLD WORKFLOW WIDGET (kept for non-agentic responses) */
  .workflow-widget { background:var(--bg2); border:1px solid var(--border2); border-radius:16px; padding:20px; margin-top:4px; overflow:hidden; }
  .workflow-visual { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--border); }
  .workflow-visual::-webkit-scrollbar { height:4px; }
  .workflow-visual::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
  .step-node { flex-shrink:0; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; min-width:140px; max-width:160px; }
  .step-num { color:var(--accent); font-family:var(--mono); font-size:10px; margin-bottom:4px; }
  .step-name { font-size:12px; font-weight:600; color:var(--text); margin-bottom:4px; }
  .step-desc { font-size:11px; color:var(--text2); line-height:1.4; }
  .step-connector { flex-shrink:0; display:flex; align-items:center; padding:0 8px; color:var(--text3); font-size:16px; margin-top:15px; }
  .script-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .script-filename { font-family:var(--mono); font-size:12px; color:var(--accent2); }
  .btn-copy-sm { font-family:var(--mono); font-size:10px; padding:4px 10px; border-radius:6px; border:1px solid var(--border2); color:var(--text2); background:transparent; cursor:pointer; transition:all 0.2s; }
  .btn-copy-sm:hover { border-color:var(--accent); color:var(--accent); }
  pre { padding:16px; font-family:var(--mono); font-size:12px; line-height:1.6; color:#c8c8e8; background:var(--bg); border-radius:8px; border:1px solid var(--border); overflow-x:auto; max-height:400px; }
  .kw{color:#7c6bff;} .fn{color:#4fffb0;} .str{color:#ff9d5c;} .cm{color:#555570;} .num{color:#ffc850;}

  /* AGENT EXECUTION LOG */
  .exec-log { background:var(--bg2); border:1px solid var(--border2); border-radius:16px; padding:18px; margin-top:4px; }
  .exec-log-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .exec-log-title { font-family:var(--mono); font-size:12px; color:var(--text2); display:flex; align-items:center; gap:7px; }
  .exec-log-title-icon { color:var(--accent); font-size:13px; }
  .exec-badge { font-family:var(--mono); font-size:10px; padding:3px 10px; border-radius:20px; }
  .exec-badge.running { background:rgba(124,107,255,0.12); color:var(--accent); border:1px solid rgba(124,107,255,0.25); }
  .exec-badge.done { background:rgba(79,255,176,0.10); color:var(--accent2); border:1px solid rgba(79,255,176,0.2); }
  .exec-badge.error { background:rgba(255,107,107,0.08); color:#ff6b6b; border:1px solid rgba(255,107,107,0.18); }
  .exec-steps { display:flex; flex-direction:column; gap:8px; }
  .exec-step { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:12px 14px; transition:border-color 0.3s, background 0.3s; }
  .exec-step.active { border-color:var(--accent); background:rgba(124,107,255,0.05); }
  .exec-step.done { border-color:rgba(79,255,176,0.25); background:rgba(79,255,176,0.03); }
  .exec-step.fail { border-color:rgba(255,107,107,0.25); }
  .exec-step-row { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
  .exec-step-icon { width:22px; height:22px; border-radius:6px; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; transition:all 0.3s; }
  .exec-step.done .exec-step-icon { background:rgba(79,255,176,0.12); border-color:rgba(79,255,176,0.25); color:var(--accent2); }
  .exec-step.active .exec-step-icon { background:rgba(124,107,255,0.12); border-color:rgba(124,107,255,0.25); }
  .exec-step-name { font-size:13px; font-weight:600; color:var(--text); }
  .exec-step-sub { font-size:11px; color:var(--text2); font-family:var(--mono); padding-left:32px; }
  .exec-step-result { font-family:var(--mono); font-size:11px; padding:4px 10px; border-radius:6px; margin-top:6px; display:inline-block; }
  .exec-step.done .exec-step-result { background:rgba(79,255,176,0.07); color:var(--accent2); border:1px solid rgba(79,255,176,0.15); }
  .exec-step.fail .exec-step-result { background:rgba(255,107,107,0.07); color:#ff6b6b; border:1px solid rgba(255,107,107,0.15); }
  .exec-step.active .exec-step-result { background:rgba(124,107,255,0.07); color:var(--accent); border:1px solid rgba(124,107,255,0.2); }

  /* INPUT */
  .input-wrapper { padding:20px 32px 32px; background:linear-gradient(to top, var(--bg) 80%, transparent); flex-shrink:0; }
  .input-container { max-width:900px; margin:0 auto; position:relative; }
  .examples { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
  .example-chip { font-family:var(--mono); font-size:11px; color:var(--text2); border:1px solid var(--border2); border-radius:20px; padding:6px 14px; cursor:pointer; transition:all 0.2s; background:var(--bg2); }
  .example-chip:hover { border-color:var(--accent); color:var(--accent); background:rgba(124,107,255,0.08); }
  .chat-input-box { display:flex; background:var(--bg2); border:1px solid var(--border2); border-radius:20px; padding:8px 16px; align-items:flex-end; transition:border-color 0.2s; }
  .chat-input-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,107,255,0.1); }
  textarea { flex:1; background:transparent; border:none; color:var(--text); font-family:var(--sans); font-size:15px; padding:12px 0; resize:none; outline:none; max-height:150px; min-height:44px; }
  textarea::placeholder { color:var(--text3); }
  .btn-send { background:var(--accent); color:#fff; border:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; margin-left:12px; margin-bottom:2px; flex-shrink:0; }
  .btn-send:hover { background:#9080ff; transform:scale(1.05); }
  .btn-send:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
  .btn-send svg { width:18px; height:18px; fill:currentColor; }

  /* TYPING */
  .typing-indicator { display:none; align-items:center; gap:6px; padding:12px 20px; background:var(--bg3); border-radius:16px; width:fit-content; border-bottom-left-radius:4px; }
  .typing-indicator.show { display:flex; }
  .dot { width:6px; height:6px; background:var(--text3); border-radius:50%; animation:bounce 1.4s infinite ease-in-out both; }
  .dot:nth-child(1){animation-delay:-0.32s;} .dot:nth-child(2){animation-delay:-0.16s;}
  @keyframes bounce { 0%,80%,100%{transform:scale(0);}40%{transform:scale(1);} }

  /* EMAIL MODAL */
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); z-index:100; display:none; align-items:center; justify-content:center; }
  .modal-overlay.show { display:flex; animation:fadeIn 0.2s ease; }
  .modal { background:var(--bg2); border:1px solid var(--border2); border-radius:20px; padding:28px; width:min(460px,92vw); }
  .modal-head { margin-bottom:18px; }
  .modal-title { font-size:17px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
  .modal-sub { font-size:13px; color:var(--text2); }
  .email-preview { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; }
  .email-row { display:flex; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); }
  .email-row:last-child { border-bottom:none; }
  .email-label { font-family:var(--mono); font-size:10px; color:var(--text3); width:48px; flex-shrink:0; padding-top:2px; }
  .email-val { font-size:13px; color:var(--text); line-height:1.5; }
  .modal-btns { display:flex; gap:10px; }
  .btn-modal-cancel { flex:1; background:transparent; border:1px solid var(--border2); color:var(--text2); border-radius:var(--radius); padding:12px; font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s; }
  .btn-modal-cancel:hover { border-color:var(--text2); color:var(--text); }
  .btn-modal-confirm { flex:1; background:var(--accent2); border:none; color:#0a0a0f; border-radius:var(--radius); padding:12px; font-family:var(--sans); font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; }
  .btn-modal-confirm:hover { background:#6fffc4; }

  /* TOAST */
  .toast { position:fixed; bottom:24px; right:24px; background:var(--bg2); border:1px solid var(--accent); color:var(--text); font-family:var(--mono); font-size:12px; padding:10px 18px; border-radius:var(--radius); z-index:200; opacity:0; transform:translateY(6px); transition:all 0.3s; pointer-events:none; }
  .toast.show { opacity:1; transform:translateY(0); }