@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════
   TOKENS — NexaVerse-style light SaaS
══════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --crimson:   #8B0045;
  --crimson2:  #6D0036;
  --magenta:   #CC0066;
  --magenta2:  #E8007A;
  --sand:      #C8B4A0;
  --sand2:     #B8A490;
  --teal:      #00A8C8;
  --teal2:     #0090AC;
  --charcoal:  #2C3830;
  --charcoal2: #1E2820;

  /* UI */
  --bg:        #F2F3F5;
  --bg2:       #EAEBEE;
  --white:     #FFFFFF;
  --sidebar:   #8B0045;
  --sidebar2:  #7A003D;

  /* Text */
  --text:      #111827;
  --text2:     #4B5563;
  --text3:     #9CA3AF;
  --text-inv:  rgba(255,255,255,0.92);
  --text-inv2: rgba(255,255,255,0.6);
  --text-inv3: rgba(255,255,255,0.35);

  /* Borders */
  --border:    #E5E7EB;
  --border2:   #D1D5DB;

  /* Semantic */
  --green:     #10B981;
  --green-bg:  #ECFDF5;
  --red:       #EF4444;
  --red-bg:    #FEF2F2;
  --warning:   #F59E0B;
  --warn-bg:   #FFFBEB;

  /* Dimensions */
  --sidebar-w: 220px;
  --hdr:       56px;
  --tab-h:     50px;
  --r:         8px;
  --r-lg:      12px;
  --r-xl:      16px;

  /* Typography */
  --font:      'Sora', sans-serif;
  --body:      'Inter', sans-serif;
  --mono:      'JetBrains Mono', monospace;

  /* Motion */
  --ease:      cubic-bezier(0.4,0,0.2,1);
  --t:         160ms;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow:    0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.14);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.18);
}

/* ══════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--text);height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

/* ══════════════════════════════════════════════════════
   AUTH
══════════════════════════════════════════════════════ */
.auth-screen{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:var(--bg);
  background-image:radial-gradient(ellipse 60% 50% at 10% 20%,rgba(139,0,69,0.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 80%,rgba(0,168,200,0.06) 0%,transparent 60%);
}
.auth-card{
  width:100%;max-width:420px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-xl);
}
.auth-header{
  padding:28px 28px 22px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,var(--crimson) 0%,var(--magenta) 100%);
}
.auth-logo-mark{
  width:42px;height:42px;border-radius:var(--r);
  background:rgba(255,255,255,0.2);
  border:2px solid rgba(255,255,255,0.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-weight:800;font-size:18px;color:#fff;
  flex-shrink:0;
}
.auth-brand-name{font-family:var(--font);font-size:16px;font-weight:700;color:#fff;letter-spacing:-0.02em;margin-bottom:2px}
.auth-brand-name span{color:rgba(255,255,255,0.75)}
.auth-brand-sub{font-size:12px;color:rgba(255,255,255,0.6)}
.auth-body{padding:24px 28px 28px}
.auth-seg{display:flex;gap:3px;background:var(--bg);border-radius:var(--r);padding:3px;margin-bottom:22px;border:1px solid var(--border)}
.auth-seg-btn{flex:1;padding:8px 12px;border:none;border-radius:6px;font-family:var(--body);font-size:13px;font-weight:500;transition:all var(--t) var(--ease);color:var(--text2);background:transparent}
.auth-seg-btn.active{background:var(--magenta);color:#fff;box-shadow:0 2px 8px rgba(204,0,102,0.35)}
.auth-error{background:var(--red-bg);border:1px solid rgba(239,68,68,0.2);border-radius:var(--r);padding:10px 13px;font-size:13px;color:var(--red);margin-bottom:14px;display:none;line-height:1.4}

/* Fields */
.field{margin-bottom:14px}
.field-label{display:block;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:6px}
.field-input{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);padding:10px 14px;color:var(--text);font-size:13px;outline:none;transition:border-color var(--t),box-shadow var(--t)}
.field-input:focus{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(204,0,102,0.1)}
.field-input::placeholder{color:var(--text3)}
.pw-wrap{position:relative}
.pw-wrap .field-input{padding-right:40px}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);font-size:14px;padding:3px;transition:color var(--t)}
.pw-eye:hover{color:var(--text2)}

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:var(--r);border:none;font-family:var(--body);font-size:13px;font-weight:600;transition:all var(--t) var(--ease);white-space:nowrap;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}
.btn-primary{background:linear-gradient(135deg,var(--crimson),var(--magenta));color:#fff;box-shadow:0 2px 8px rgba(204,0,102,0.3)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(204,0,102,0.4)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 2px 8px rgba(0,168,200,0.3)}
.btn-teal:hover:not(:disabled){background:var(--teal2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,168,200,0.35)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--bg);color:var(--text);border-color:var(--border2)}
.btn-ghost-primary{background:rgba(204,0,102,0.06);color:var(--magenta);border:1px solid rgba(204,0,102,0.2)}
.btn-ghost-primary:hover{background:rgba(204,0,102,0.1)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(239,68,68,0.2)}
.btn-danger:hover{background:rgba(239,68,68,0.12)}
.btn-sm{padding:6px 12px!important;font-size:12px!important;border-radius:6px!important}
.btn-xs{padding:4px 9px!important;font-size:11px!important;border-radius:5px!important}
.btn-icon{width:32px;height:32px;padding:0;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.w-full{width:100%}

/* ══════════════════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════════════════ */
.app-screen{display:flex;flex-direction:row;height:100dvh;overflow:hidden}

/* SIDEBAR */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--sidebar);
  display:flex;flex-direction:column;
  height:100%;overflow:hidden;z-index:100;
}
.sidebar-close-btn{position:absolute;top:14px;right:14px;background:rgba(255,255,255,0.15);border:none;color:#fff;width:28px;height:28px;border-radius:6px;display:none;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all var(--t)}
.sidebar-close-btn:hover{background:rgba(255,255,255,0.25)}
.sidebar{position:relative}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 20px;height:var(--hdr);
  border-bottom:1px solid rgba(255,255,255,0.1);
  flex-shrink:0;
}
.logo-mark{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:rgba(255,255,255,0.2);
  border:1.5px solid rgba(255,255,255,0.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-weight:800;font-size:14px;color:#fff;
}
.logo-text{font-family:var(--font);font-size:14px;font-weight:700;color:#fff;letter-spacing:-0.02em}
.logo-text em{color:rgba(255,255,255,0.65);font-style:normal}

.sidebar-nav{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:1px}
.nav-section-label{font-size:9px;font-weight:700;color:var(--text-inv3);text-transform:uppercase;letter-spacing:0.1em;padding:10px 10px 5px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r);
  cursor:pointer;transition:all var(--t);
  color:var(--text-inv2);font-size:13px;font-weight:500;
  text-decoration:none;
}
.nav-item:hover{background:rgba(255,255,255,0.1);color:#fff}
.nav-item.active{background:rgba(255,255,255,0.18);color:#fff;font-weight:600}
.nav-icon{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.nav-live{width:6px;height:6px;border-radius:50%;background:#4ADE80;margin-left:auto;flex-shrink:0;box-shadow:0 0 6px #4ADE80}

.sidebar-footer{border-top:1px solid rgba(255,255,255,0.12);padding:14px 12px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.sidebar-user-info{display:flex;align-items:center;gap:10px;overflow:hidden}
.user-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:var(--magenta);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;border:2px solid rgba(255,255,255,0.3)}
.mobile-user-av{width:28px;height:28px;border-radius:50%;background:var(--magenta);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#fff;flex-shrink:0}
.user-details{flex:1;min-width:0}
.user-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-plan{font-size:11px;color:rgba(255,255,255,0.5);font-weight:400}
.sidebar-logout-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:9px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.7);font-size:13px;font-weight:500;font-family:var(--body);transition:all var(--t)}
.sidebar-logout-btn:hover{background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.25)}

/* MOBILE TOPBAR */
.mobile-topbar{display:none;width:100%}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99}

/* MAIN */
.main-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;}

/* ══════════════════════════════════════════════════════
   BUILDER
══════════════════════════════════════════════════════ */
.builder-wrap{display:flex;flex:1;min-height:0;overflow:hidden;min-height:0}

/* Chat panel — always visible on desktop */
.chat-panel{
  width:400px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--border);
  background:var(--white);
  overflow:hidden;
  box-shadow:2px 0 8px rgba(0,0,0,0.04);
}
.panel-hdr{
  height:var(--hdr);display:flex;align-items:center;gap:8px;
  padding:0 16px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--white);
}
.panel-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;flex:1}
.provider-chip{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border2);border-radius:99px;padding:5px 12px 5px 9px;transition:all var(--t)}
.provider-chip:hover{border-color:var(--border2);box-shadow:var(--shadow-sm)}
.provider-dot{width:7px;height:7px;border-radius:50%;background:#10B981;flex-shrink:0}
.provider-select{background:none;border:none;outline:none;color:var(--text);font-size:11px;font-weight:600;font-family:var(--body);cursor:pointer}
.provider-select option{background:var(--white)}

.chat-messages{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:16px;background:var(--bg)}
.msg{display:flex;gap:10px;animation:msgIn 150ms ease}
@keyframes msgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.msg-avatar{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:1px}
.msg-avatar.ai{background:linear-gradient(135deg,var(--crimson),var(--magenta));color:#fff}
.msg-avatar.user{background:var(--white);color:var(--text2);border:1px solid var(--border2)}
.msg-content{flex:1;min-width:0}
.msg-role{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px}
.msg-bubble{background:var(--white);border:1px solid var(--border);border-radius:0 12px 12px 12px;padding:10px 13px;font-size:13px;color:var(--text);line-height:1.6;box-shadow:var(--shadow-sm)}
.msg-bubble.user-bubble{background:linear-gradient(135deg,var(--crimson),var(--magenta));border:none;color:#fff;border-radius:12px 12px 0 12px}
.msg-bubble strong{color:var(--teal);font-weight:600}
.msg-bubble.user-bubble strong{color:rgba(255,255,255,0.85)}

.thinking{display:flex;gap:4px;padding:4px 0}
.thinking-dot{width:6px;height:6px;border-radius:50%;background:var(--magenta);animation:think .8s ease infinite}
.thinking-dot:nth-child(2){animation-delay:.14s}
.thinking-dot:nth-child(3){animation-delay:.28s}
@keyframes think{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

.quick-prompts{padding:10px 12px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:5px;flex-shrink:0;background:var(--white)}
.prompt-chip{padding:5px 11px;background:var(--bg);border:1px solid var(--border2);border-radius:99px;font-size:11px;color:var(--text2);cursor:pointer;transition:all var(--t);white-space:nowrap}
.prompt-chip:hover{border-color:var(--magenta);color:var(--magenta);background:rgba(204,0,102,0.05)}

.chat-input-area{padding:12px;border-top:1px solid var(--border);flex-shrink:0;background:var(--white)}
.plugin-fields{display:flex;gap:8px;margin-bottom:9px}
.plugin-field{flex:1}
.plugin-field-label{font-size:10px;color:var(--text3);font-weight:500;margin-bottom:3px}
.chat-composer{background:var(--bg);border:1.5px solid var(--border2);border-radius:var(--r-lg);display:flex;align-items:flex-end;gap:8px;padding:10px 10px 10px 14px;transition:border-color var(--t),box-shadow var(--t)}
.chat-composer:focus-within{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(204,0,102,0.1)}
.chat-ta{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--body);font-size:13px;resize:none;min-height:20px;max-height:110px;overflow-y:auto;line-height:1.55}
.chat-ta::placeholder{color:var(--text3)}
.send-btn{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:linear-gradient(135deg,var(--crimson),var(--magenta));border:none;color:#fff;font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center;transition:all var(--t);box-shadow:0 2px 8px rgba(204,0,102,0.35)}
.send-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 4px 14px rgba(204,0,102,0.5)}
.send-btn:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}

/* Code panel */
.code-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--white);min-width:0;min-height:0}/* always visible desktop */
.code-panel-hdr{height:var(--hdr);display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--white)}
.code-filename{font-family:var(--mono);font-size:12px;color:var(--text2);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.code-actions{display:flex;gap:5px}
.code-body{flex:1;overflow:auto;padding:16px;background:#1E1E2E}
.code-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 40px;text-align:center;background:var(--bg);flex:1;min-height:0}
.code-placeholder-icon{font-size:44px;opacity:.25}
.code-placeholder-title{font-family:var(--font);font-size:15px;font-weight:600;color:var(--text2)}
.code-placeholder-sub{font-size:13px;color:var(--text3);max-width:240px;line-height:1.6}
.code-block{font-family:var(--mono);font-size:12.5px;color:#abb2bf;line-height:1.72;white-space:pre-wrap;word-break:break-all}
.code-line{display:flex}
.ln{color:#4a5060;user-select:none;min-width:32px;text-align:right;margin-right:16px;font-size:11px;flex-shrink:0;padding-top:1px}
.kw{color:#c678dd}.fn{color:#61afef}.str{color:#98c379}.cm{color:#5c6370;font-style:italic}.vc{color:#e06c75}.nu{color:#d19a66}

.download-bar{padding:14px 16px;border-top:1px solid var(--border);background:var(--white);flex-shrink:0;display:none}
.download-bar.show{display:block}
.dl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.dl-stat{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:9px 12px}
.dl-stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px}
.dl-stat-value{font-size:13px;font-weight:700;color:var(--text)}

/* ══════════════════════════════════════════════════════
   MOBILE TABS
══════════════════════════════════════════════════════ */
.mobile-tabs{display:none;flex-shrink:0}
.mobile-tab-bar{display:flex;height:var(--tab-h);background:var(--white);border-bottom:1px solid var(--border);padding:7px;gap:3px}
.mobile-tab-btn{flex:1;border:none;background:transparent;color:var(--text2);font-family:var(--body);font-size:12px;font-weight:600;border-radius:7px;transition:all var(--t);display:flex;align-items:center;justify-content:center;gap:5px}
.mobile-tab-btn.active{background:var(--magenta);color:#fff;box-shadow:0 2px 8px rgba(204,0,102,0.35)}
.mobile-tab-btn span{font-size:13px}

/* ══════════════════════════════════════════════════════
   PAGES
══════════════════════════════════════════════════════ */
.page{flex:1;overflow-y:auto;padding:24px}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.page-title{font-family:var(--font);font-size:22px;font-weight:700;letter-spacing:-0.03em;color:var(--text)}
.page-sub{font-size:13px;color:var(--text2);margin-top:3px}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.project-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:10px;transition:all var(--t) var(--ease);box-shadow:var(--shadow-sm)}
.project-card:hover{border-color:var(--magenta);transform:translateY(-2px);box-shadow:var(--shadow)}
.project-icon{width:38px;height:38px;border-radius:var(--r);background:linear-gradient(135deg,var(--crimson),var(--magenta));display:flex;align-items:center;justify-content:center;font-size:18px}
.project-name{font-family:var(--font);font-size:14px;font-weight:600;color:var(--text)}
.project-desc{font-size:12px;color:var(--text2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.project-meta{display:flex;gap:5px;flex-wrap:wrap}
.project-time{font-size:11px;color:var(--text3)}
.project-actions{display:flex;gap:6px;padding-top:10px;border-top:1px solid var(--border);margin-top:auto}

.tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
.tag-green{background:var(--green-bg);color:var(--green)}
.tag-primary{background:rgba(204,0,102,0.08);color:var(--magenta)}
.tag-teal{background:rgba(0,168,200,0.1);color:var(--teal2)}
.tag-muted{background:var(--bg);color:var(--text2);border:1px solid var(--border)}
.tag-warn{background:var(--warn-bg);color:var(--warning)}

.empty{text-align:center;padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-icon{font-size:48px;opacity:.3}
.empty-title{font-family:var(--font);font-size:17px;font-weight:600;color:var(--text)}
.empty-sub{font-size:13px;color:var(--text2);max-width:280px;line-height:1.6}

.history-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border);transition:background var(--t)}
.history-row:hover{background:var(--bg)}
.history-icon{width:34px;height:34px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}

.usage-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.usage-track{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.usage-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--crimson),var(--magenta));transition:width 800ms var(--ease)}

.skel{background:var(--bg2);border-radius:var(--r);animation:pulse 1.6s ease infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.8}}

/* TOASTS */
.toast-wrap{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);animation:slideIn 180ms var(--ease);min-width:220px;max-width:300px;cursor:pointer;pointer-events:all}
@keyframes slideIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.toast-icon{font-size:16px;flex-shrink:0}
.toast-msg{font-size:13px;color:var(--text);flex:1;line-height:1.4;font-weight:500}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   BUILDER ROOT — complete layout
══════════════════════════════════════════════════════ */
.builder-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Mobile tabs — hidden on desktop */
.mob-tabs {
  display: none;
  flex-shrink: 0;
}
.mob-tab-bar {
  display: flex;
  height: 48px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  gap: 4px;
}
.mob-tab-btn {
  flex: 1; border: none; background: transparent;
  color: var(--text2); font-family: var(--body);
  font-size: 12px; font-weight: 600; border-radius: 7px;
  transition: all var(--t); cursor: pointer;
}
.mob-tab-btn.active {
  background: var(--magenta); color: #fff;
  box-shadow: 0 2px 8px rgba(204,0,102,0.35);
}

/* Panels container */
.builder-panels {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Chat panel */
.builder-chat {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--white);
  overflow: hidden;
  min-height: 0;
}

/* Code panel */
.builder-code {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--white);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

/* Panel visibility on mobile */
.builder-chat.panel-active { display: flex; }
.builder-code.panel-active  { display: flex; }

/* Builder footer */
.builder-footer {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-top: 1px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text3);
  gap: 8px;
  overflow: hidden;
}
.bf-live { display: flex; align-items: center; gap: 5px; color: var(--text2); font-weight: 500; }
.bf-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex-shrink: 0; }
.bf-sep  { color: var(--border2); }
.bf-right { margin-left: auto; color: var(--text2); font-weight: 500; font-size: 11px; }

/* Chat internals */
.chat-msgs {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg);
  min-height: 0;
}
.msg { display: flex; gap: 10px; animation: msgIn 150ms ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.ai-msg  { flex-direction: row; }
.user-msg { flex-direction: row; }
.msg-av { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
.ai-av   { background: linear-gradient(135deg,var(--crimson),var(--magenta)); color: #fff; }
.user-av { background: var(--white); color: var(--text2); border: 1px solid var(--border2); }
.msg-body { flex: 1; min-width: 0; }
.msg-name { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
.msg-bubble { background: var(--white); border: 1px solid var(--border); border-radius: 0 11px 11px 11px; padding: 10px 13px; font-size: 13px; color: var(--text); line-height: 1.6; box-shadow: var(--shadow-sm); }
.user-bubble { background: linear-gradient(135deg,var(--crimson),var(--magenta)); border: none; color: #fff; border-radius: 11px 11px 0 11px; }
.user-bubble strong { color: rgba(255,255,255,0.85); }

.thinking { display: flex; gap: 4px; padding: 4px 0; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--magenta); animation: think .8s ease infinite; }
.thinking span:nth-child(2) { animation-delay: .14s; }
.thinking span:nth-child(3) { animation-delay: .28s; }
@keyframes think { 0%,100%{opacity:.25;transform:scale(.7)} 50%{opacity:1;transform:scale(1)} }

.chat-prompts {
  padding: 9px 12px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 5px;
  flex-shrink: 0;
  background: var(--white);
}
.prompt-pill {
  padding: 5px 11px;
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: 99px; font-size: 11px; color: var(--text2);
  cursor: pointer; transition: all var(--t); white-space: nowrap;
}
.prompt-pill:hover { border-color: var(--magenta); color: var(--magenta); background: rgba(204,0,102,0.05); }

.chat-input-box {
  padding: 11px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--white);
}
.input-row { display: flex; gap: 8px; margin-bottom: 9px; }
.input-field-wrap { display: flex; flex-direction: column; }
.input-label { font-size: 10px; color: var(--text3); font-weight: 500; margin-bottom: 3px; }

.composer {
  background: var(--bg); border: 1.5px solid var(--border2);
  border-radius: 12px; display: flex; align-items: flex-end;
  gap: 8px; padding: 9px 9px 9px 13px;
  transition: border-color var(--t), box-shadow var(--t);
}
.composer:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(204,0,102,0.1); }
.composer-ta { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--body); font-size: 13px; resize: none; min-height: 20px; max-height: 110px; overflow-y: auto; line-height: 1.55; }
.composer-ta::placeholder { color: var(--text3); }
.composer-send { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: linear-gradient(135deg,var(--crimson),var(--magenta)); border: none; color: #fff; font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; transition: all var(--t); box-shadow: 0 2px 8px rgba(204,0,102,0.3); }
.composer-send:hover:not(:disabled) { transform: scale(1.08); box-shadow: 0 4px 14px rgba(204,0,102,0.5); }
.composer-send:disabled { opacity: .3; cursor: not-allowed; transform: none; box-shadow: none; }

/* Code panel internals */
.code-file { font-family: var(--mono); font-size: 12px; color: var(--text2); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.code-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px; text-align: center; background: var(--bg); }
.ces-icon  { font-size: 40px; opacity: .25; }
.ces-title { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--text2); }
.ces-sub   { font-size: 13px; color: var(--text3); max-width: 230px; line-height: 1.6; }
.code-body { flex: 1; overflow: auto; padding: 16px; background: #1E1E2E; min-height: 0; }
.code-block { font-family: var(--mono); font-size: 12.5px; color: #abb2bf; line-height: 1.72; white-space: pre-wrap; word-break: break-all; }
.code-line  { display: flex; }
.ln { color: #4a5060; user-select: none; min-width: 32px; text-align: right; margin-right: 16px; font-size: 11px; flex-shrink: 0; padding-top: 1px; }

.download-section { padding: 14px 16px; border-top: 1px solid var(--border); background: var(--white); flex-shrink: 0; }
.dl-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.dl-item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 9px 12px; }
.dl-lbl  { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.dl-val  { font-size: 13px; font-weight: 700; color: var(--text); }

/* History extra styles */
.usage-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px; }
.usage-sub  { font-size: 11px; color: var(--text3); margin-top: 5px; }
.history-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.hist-title { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.hist-meta  { font-size: 11px; color: var(--text3); }

@media(max-width:960px){.chat-panel{width:340px}}
@media(max-width:700px){
  .sidebar{position:fixed;top:0;left:0;height:100%;transform:translateX(-100%);transition:transform 250ms var(--ease);z-index:100;width:240px!important}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-xl)}
  .sidebar-close-btn{display:flex}
  .sidebar-overlay.visible{display:block}
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:var(--hdr);flex-shrink:0;background:var(--sidebar);z-index:50;gap:10px}
  .mobile-menu-btn{background:none;border:none;color:rgba(255,255,255,0.8);font-size:22px;padding:4px;display:flex;align-items:center;border-radius:var(--r);transition:all var(--t);flex-shrink:0}
  .mobile-menu-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
  .mobile-topbar-center{display:flex;align-items:center;gap:8px;flex:1}
  .mob-tabs{display:flex}
  .mobile-tabs{display:flex;flex-direction:column}
  .builder-wrap{flex-direction:column;min-height:0}
  .chat-panel{width:100%!important;border-right:none;border-bottom:1px solid var(--border);display:none;flex:1;min-height:0}
  .code-panel{display:none;flex:1;min-height:0}
  .chat-panel.mob-show{display:flex}
  .code-panel.mob-show{display:flex}
  .page{padding:16px}
  .cards-grid{grid-template-columns:1fr}
  .dl-stats{grid-template-columns:repeat(2,1fr)}
}

/* ── Builder footer bar ────────────────────────────────────── */
.builder-footer{
  height:44px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  border-top:1px solid var(--border);
  background:var(--white);
  flex-shrink:0;
  font-size:12px;color:var(--text3);
  gap:12px;
}
.builder-footer-left{display:flex;align-items:center;gap:12px}
.builder-footer-right{display:flex;align-items:center;gap:8px}
.footer-stat{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text3)}
.footer-stat strong{color:var(--text2);font-weight:600}
.footer-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 5px var(--green)}

/* ══════════════════════════════════════════════════════
   BUILDER — SINGLE PANEL SYSTEM (replaces all old)
══════════════════════════════════════════════════════ */

/* Step 8 — main-content */
.main-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* Step 3 — builder root */
.builder-root{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:var(--bg)}

/* Step 3 — panels container */
.builder-panels{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column}

/* Step 3 — each panel hidden by default */
.builder-chat,
.builder-code{
  display:none;
  flex-direction:column;
  width:100%;
  flex:1;
  min-height:0;
  background:var(--white);
  overflow:hidden;
}

/* Step 3 — active panel shows */
.builder-chat.panel-active,
.builder-code.panel-active{
  display:flex;
}

/* Step 5 — tab bar */
.mob-tabs{
  display:none;
  flex-shrink:0;
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.mob-tab-btn{
  flex:1;
  height:40px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text2);
  font-size:12px;
  font-weight:600;
  font-family:var(--body);
  cursor:pointer;
  transition:all var(--t);
}
.mob-tab-btn.active{
  background:var(--magenta);
  color:#fff;
  box-shadow:0 2px 8px rgba(204,0,102,0.35);
}

/* Step 6 — chat internals */
.panel-hdr{
  height:var(--hdr);
  display:flex;align-items:center;gap:8px;
  padding:0 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  background:var(--white);
}
.panel-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;flex:1}
.provider-chip{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border2);border-radius:99px;padding:5px 12px 5px 9px;transition:all var(--t)}
.provider-dot{width:7px;height:7px;border-radius:50%;background:#10B981;flex-shrink:0}
.provider-select{background:none;border:none;outline:none;color:var(--text);font-size:11px;font-weight:600;font-family:var(--body);cursor:pointer}
.provider-select option{background:var(--white)}

.chat-msgs{
  flex:1;
  overflow-y:auto;
  min-height:0;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--bg);
}
.msg{display:flex;gap:10px;animation:msgIn 150ms ease;width:100%;align-self:flex-start}
@keyframes msgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.ai-msg{}
.user-msg{align-self:flex-end;flex-direction:row-reverse}
.msg-av{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:2px}
.ai-av{background:linear-gradient(135deg,var(--crimson),var(--magenta));color:#fff}
.user-av{background:var(--white);color:var(--text2);border:1px solid var(--border2)}
.msg-body{flex:1;min-width:0}
.msg-name{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:5px}
.user-msg .msg-name{text-align:right}
.msg-bubble{background:var(--white);border:1px solid var(--border);border-radius:0 12px 12px 12px;padding:11px 14px;font-size:13px;color:var(--text);line-height:1.62;box-shadow:var(--shadow-sm)}
.user-bubble{background:linear-gradient(135deg,var(--crimson),var(--magenta));border:none;color:#fff;border-radius:12px 0 12px 12px}
.user-bubble strong{color:rgba(255,255,255,0.85)}

.thinking{display:flex;gap:4px;padding:4px 0}
.thinking span{width:6px;height:6px;border-radius:50%;background:var(--magenta);animation:think .8s ease infinite}
.thinking span:nth-child(2){animation-delay:.14s}
.thinking span:nth-child(3){animation-delay:.28s}
@keyframes think{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

.chat-prompts{padding:9px 12px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:5px;flex-shrink:0;background:var(--white)}
.prompt-pill{padding:5px 11px;background:var(--bg);border:1px solid var(--border2);border-radius:99px;font-size:11px;color:var(--text2);cursor:pointer;transition:all var(--t);white-space:nowrap}
.prompt-pill:hover{border-color:var(--magenta);color:var(--magenta);background:rgba(204,0,102,0.05)}

.chat-input-box{
  flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--white);
  padding:12px;
}
.input-row{display:flex;gap:8px;margin-bottom:9px}
.input-field-wrap{display:flex;flex-direction:column}
.input-label{font-size:10px;color:var(--text3);font-weight:500;margin-bottom:3px}
.composer{background:var(--bg);border:1.5px solid var(--border2);border-radius:12px;display:flex;align-items:flex-end;gap:8px;padding:9px 9px 9px 13px;transition:border-color var(--t),box-shadow var(--t)}
.composer:focus-within{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(204,0,102,0.1)}
.composer-ta{flex:1;background:none;border:none;outline:none;color:var(--text);font-family:var(--body);font-size:13px;resize:none;min-height:20px;max-height:120px;overflow-y:auto;line-height:1.55}
.composer-ta::placeholder{color:var(--text3)}
.composer-send{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:linear-gradient(135deg,var(--crimson),var(--magenta));border:none;color:#fff;font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center;transition:all var(--t);box-shadow:0 2px 8px rgba(204,0,102,0.3)}
.composer-send:hover:not(:disabled){transform:scale(1.08);box-shadow:0 4px 14px rgba(204,0,102,0.5)}
.composer-send:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none}

/* Step 7 — code panel internals */
.code-file{font-family:var(--mono);font-size:12px;color:var(--text2);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.code-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px;text-align:center;background:var(--bg)}
.ces-icon{font-size:42px;opacity:.25}
.ces-title{font-family:var(--font);font-size:15px;font-weight:600;color:var(--text2)}
.ces-sub{font-size:13px;color:var(--text3);max-width:240px;line-height:1.6}
.code-body{
  flex:1;
  overflow:auto;
  min-height:0;
  padding:16px;
  background:#1E1E2E;
}
.code-block{font-family:var(--mono);font-size:12.5px;color:#abb2bf;line-height:1.72;white-space:pre-wrap;word-break:break-all}
.code-line{display:flex}
.ln{color:#4a5060;user-select:none;min-width:32px;text-align:right;margin-right:16px;font-size:11px;flex-shrink:0;padding-top:1px}

.download-section{
  flex-shrink:0;
  border-top:1px solid var(--border);
  background:var(--white);
  padding:14px 16px;
  display:none;
}
.dl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.dl-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:9px 12px}
.dl-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:3px}
.dl-val{font-size:13px;font-weight:700;color:var(--text)}

/* Builder footer */
.builder-footer{height:38px;display:flex;align-items:center;padding:0 16px;border-top:1px solid var(--border);background:var(--white);flex-shrink:0;font-size:12px;color:var(--text3);gap:8px;overflow:hidden}
.bf-live{display:flex;align-items:center;gap:5px;color:var(--text2);font-weight:500}
.bf-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);flex-shrink:0}
.bf-sep{color:var(--border2)}
.bf-right{margin-left:auto;color:var(--text2);font-weight:500;font-size:11px}

/* History extras */
.usage-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:16px}
.usage-sub{font-size:11px;color:var(--text3);margin-top:5px}
.history-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.hist-title{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.hist-meta{font-size:11px;color:var(--text3)}

/* Step 4 — NO desktop split. Mobile and desktop same */
@media(max-width:700px){
  .sidebar{position:fixed;top:0;left:0;height:100%;transform:translateX(-100%);transition:transform 250ms var(--ease);z-index:100;width:260px!important}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-xl)}
  .sidebar-overlay.visible{display:block}
  .sidebar-close-btn{display:flex}
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 14px;height:var(--hdr);flex-shrink:0;background:var(--sidebar);z-index:50;gap:10px}
  .mobile-menu-btn{background:none;border:none;color:rgba(255,255,255,0.85);font-size:22px;padding:4px;display:flex;align-items:center;border-radius:var(--r);transition:all var(--t);flex-shrink:0}
  .mobile-topbar-center{display:flex;align-items:center;gap:8px;flex:1}
  .mob-tabs{display:flex}
  .page{padding:14px}
  .cards-grid{grid-template-columns:1fr}
  .dl-grid{grid-template-columns:repeat(2,1fr)}
  .builder-footer{padding:0 12px;font-size:11px}
}

/* ── MOBILE FINAL FIXES ──────────────────────────── */
@media(max-width:700px){
  /* Hide panel header on mobile — topbar already shows title */
  .builder-chat .panel-hdr{display:none}

  /* Provider chip moves to mob-tabs area — handled via JS */
  
  /* Msg bubble full width on mobile */
  .msg{max-width:100%}
  .msg-bubble{font-size:13px}

  /* Chat fills full space */
  .chat-msgs{padding:12px}
  .chat-prompts{padding:8px 10px}
  .chat-input-box{padding:10px}
  
  /* Input fields stack on mobile */
  .input-row{flex-direction:column;gap:6px}
  
  /* Download grid 2 cols */
  .dl-grid{grid-template-columns:repeat(2,1fr)}

  /* Builder footer compact */
  .builder-footer{height:36px;padding:0 12px;font-size:11px;gap:6px}
}

/* ══ CRITICAL MOBILE HEIGHT FIX ══ */
@media(max-width:700px){
  .app-screen{
    flex-direction:column;
  }
  .mobile-topbar{
    flex-shrink:0;
    height:var(--hdr);
    min-height:var(--hdr);
  }
  .main-content{
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .builder-root{
    flex:1;
    min-height:0;
    overflow:hidden;
  }
  .builder-panels{
    flex:1;
    min-height:0;
  }
  .builder-chat.panel-active,
  .builder-code.panel-active{
    flex:1;
    min-height:0;
  }
}