/* PostaraAI Tool Pro — app.css */
:root {
  --bg:       #080c14;
  --bg2:      #0d1220;
  --bg3:      #111827;
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.13);
  --gold:     #c9a227;
  --gold2:    #e8c547;
  --gold-bg:  rgba(201,162,39,0.1);
  --gold-glow:rgba(201,162,39,0.06);
  --text:     #eef0f5;
  --text2:    #8b91a0;
  --text3:    #515a6e;
  --green:    #22c55e;
  --green-bg: rgba(34,197,94,0.1);
  --red:      #ef4444;
  --red-bg:   rgba(239,68,68,0.1);
  --blue:     #3b82f6;
  --blue-bg:  rgba(59,130,246,0.1);
  --sidebar-w:220px;
  --header-h: 54px;
  --r:        10px;
  --r2:       16px;
  --font:     'Sora', sans-serif;
  --mono:     'JetBrains Mono', monospace;
  --body:     'DM Sans', sans-serif;
  --ease:     cubic-bezier(0.4,0,0.2,1);
  --t:        200ms;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
::-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;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(201,162,39,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(59,130,246,0.04) 0%, transparent 70%);
}
.auth-brand {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 60px;
  border-right: 1px solid var(--border);
}
.brand-logo {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.logo-p { font-family:var(--font); font-weight:800; font-size:22px; color:#000; }
.brand-title { font-family:var(--font); font-size:32px; font-weight:700; color:var(--text); letter-spacing:-0.03em; margin-bottom:10px; }
.brand-title span { color:var(--gold); }
.brand-sub { font-size:15px; color:var(--text2); margin-bottom:32px; line-height:1.6; }
.brand-features { display:flex; flex-direction:column; gap:10px; }
.bf { font-size:13px; color:var(--text2); display:flex; align-items:center; gap:8px; }

.auth-form-wrap {
  width: 420px; flex-shrink:0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.auth-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 32px;
}
.auth-title    { font-family:var(--font); font-size:20px; font-weight:700; margin-bottom:4px; letter-spacing:-0.02em; }
.auth-sub-text { font-size:13px; color:var(--text2); margin-bottom:24px; }
.auth-error    { background:var(--red-bg); border:1px solid rgba(239,68,68,0.2); border-radius:8px; padding:10px 14px; font-size:13px; color:var(--red); margin-bottom:16px; }
.auth-switch   { font-size:13px; color:var(--text2); text-align:center; margin-top:20px; }
.auth-switch a { color:var(--gold); font-weight:600; text-decoration:none; }

/* ── FIELDS ─────────────────────────────────────────────────── */
.field-group  { margin-bottom:14px; }
.field-label  { display:block; font-size:11px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.field-input  {
  width:100%; background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px; color:var(--text);
  font-size:13px; font-family:var(--body); outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.field-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,0.08); }
.field-input::placeholder { color:var(--text3); }
textarea.field-input { resize:vertical; min-height:90px; line-height:1.6; }
select.field-input { cursor:pointer; appearance:none; }
.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); cursor:pointer; font-size:14px; padding:4px; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-gold {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#000; font-family:var(--body); font-weight:700; font-size:13px;
  padding:11px 20px; border-radius:8px; border:none; cursor:pointer;
  transition:all var(--t) var(--ease);
}
.btn-gold:hover:not(:disabled) { opacity:.88; transform:translateY(-1px); box-shadow:0 4px 16px rgba(201,162,39,0.35); }
.btn-gold:disabled { opacity:.5; cursor:not-allowed; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; color:var(--text2);
  border:1px solid var(--border); border-radius:8px;
  padding:8px 14px; font-size:12px; font-family:var(--body);
  cursor:pointer; transition:all var(--t);
}
.btn-ghost:hover { background:var(--surface2); color:var(--text); border-color:var(--border2); }
.btn-green {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green-bg); color:var(--green);
  border:1px solid rgba(34,197,94,0.2); border-radius:8px;
  padding:9px 16px; font-size:13px; font-family:var(--body); font-weight:600;
  cursor:pointer; transition:all var(--t);
}
.btn-green:hover { background:rgba(34,197,94,0.18); }
.btn-red { background:var(--red-bg); color:var(--red); border:1px solid rgba(239,68,68,0.2); border-radius:8px; padding:7px 12px; font-size:12px; cursor:pointer; }
.w-full { width:100%; }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:7px; }

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

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  z-index:100;
}
.sidebar-logo {
  display:flex; align-items:center; gap:10px;
  padding:0 16px; height:var(--header-h);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.logo-mark {
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-weight:800; font-size:14px; color:#000;
  box-shadow:0 0 16px rgba(201,162,39,0.25);
}
.logo-text { font-family:var(--font); font-size:14px; font-weight:600; color:var(--text); }
.logo-text strong { color:var(--gold); }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 8px; display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:8px; cursor:pointer;
  transition:all var(--t); color:var(--text2); font-size:13px; font-weight:500;
  text-decoration:none; border:1px solid transparent;
}
.nav-item:hover  { background:var(--surface); color:var(--text); }
.nav-item.active { background:var(--gold-bg); color:var(--gold2); border-color:rgba(201,162,39,0.15); }
.nav-ic { font-size:15px; width:18px; text-align:center; flex-shrink:0; }
.sidebar-user {
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-top:1px solid var(--border); flex-shrink:0;
}
.user-av   { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold2)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#000; flex-shrink:0; }
.user-info { flex:1; min-width:0; }
.user-name { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-plan { font-size:10px; color:var(--gold); font-weight:600; text-transform:uppercase; }
.logout-btn { background:none; border:none; color:var(--text3); cursor:pointer; font-size:16px; padding:4px; transition:color var(--t); flex-shrink:0; }
.logout-btn:hover { color:var(--red); }

/* ── MOBILE ─────────────────────────────────────────────────── */
.mobile-topbar { display:none; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:99; }

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

/* ── BUILDER LAYOUT ─────────────────────────────────────────── */
.builder-layout {
  display:grid; grid-template-columns:340px 1fr;
  height:100%; overflow:hidden;
}
.builder-chat {
  display:flex; flex-direction:column;
  border-right:1px solid var(--border); overflow:hidden;
  background:var(--bg);
}
.builder-editor { display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }

/* Panel headers */
.panel-hdr {
  height:44px; display:flex; align-items:center; gap:8px;
  padding:0 14px; border-bottom:1px solid var(--border);
  flex-shrink:0; background:var(--bg2);
}
.panel-hdr-title { font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.08em; }

/* Chat messages */
.chat-msgs { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.msg { display:flex; gap:10px; animation:msgIn 180ms ease; }
@keyframes msgIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.msg-av {
  width:28px; height:28px; border-radius:8px; flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.msg-av.ai   { background:var(--gold-bg); color:var(--gold); border:1px solid rgba(201,162,39,0.2); }
.msg-av.user { background:var(--surface2); color:var(--text2); }
.msg-body  { flex:1; min-width:0; }
.msg-role  { font-size:10px; font-weight:700; color:var(--text3); margin-bottom:5px; text-transform:uppercase; letter-spacing:.07em; }
.msg-text  { font-size:13px; color:var(--text); line-height:1.65; }
.msg-text strong { color:var(--gold2); }

/* Thinking dots */
.thinking { display:flex; gap:4px; padding:4px 0; }
.thinking span { width:5px; height:5px; border-radius:50%; background:var(--gold); animation:blink .8s ease infinite; }
.thinking span:nth-child(2) { animation-delay:.15s; }
.thinking span:nth-child(3) { animation-delay:.3s; }
@keyframes blink { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }

/* Quick prompts */
.quick-prompts { padding:10px 12px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:5px; flex-shrink:0; }
.qp {
  padding:5px 10px; background:var(--surface); border:1px solid var(--border);
  border-radius:99px; font-size:11px; color:var(--text2); cursor:pointer; transition:all var(--t);
  white-space:nowrap;
}
.qp:hover { border-color:var(--gold); color:var(--gold2); background:var(--gold-bg); }

/* Chat input */
.chat-input-area { padding:12px; border-top:1px solid var(--border); flex-shrink:0; }
.provider-select { width:100%; margin-bottom:8px; }
.chat-box {
  background:var(--surface2); border:1px solid var(--border); border-radius:12px;
  display:flex; align-items:flex-end; gap:8px; padding:10px 10px 10px 14px;
  transition:border-color var(--t), box-shadow var(--t);
}
.chat-box:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,0.07); }
.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:130px; overflow-y:auto; line-height:1.55;
}
.chat-ta::placeholder { color:var(--text3); }
.send-btn {
  width:32px; height:32px; flex-shrink:0; border-radius:8px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border:none; cursor:pointer; color:#000; font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t);
}
.send-btn:hover:not(:disabled) { transform:scale(1.08); box-shadow:0 3px 10px rgba(201,162,39,0.4); }
.send-btn:disabled { opacity:.35; cursor:not-allowed; }

/* Editor area */
.editor-toolbar {
  height:44px; display:flex; align-items:center; gap:8px;
  padding:0 14px; border-bottom:1px solid var(--border);
  flex-shrink:0; background:var(--bg2);
}
.editor-filename { font-family:var(--mono); font-size:12px; color:var(--text2); }
.code-area {
  flex:1; overflow:auto; padding:16px;
  background:var(--bg); font-family:var(--mono); font-size:12.5px;
  color:#abb2bf; line-height:1.75;
}
.code-area pre { margin:0; white-space:pre-wrap; word-break:break-all; }
.code-empty {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  color:var(--text3);
}
.code-empty-icon { font-size:40px; }
.code-empty-title { font-size:15px; font-weight:600; color:var(--text2); }
.code-empty-sub   { font-size:13px; color:var(--text3); text-align:center; max-width:280px; line-height:1.55; }

/* Download section */
.download-section {
  padding:14px; border-top:1px solid var(--border); flex-shrink:0;
  background:var(--bg2);
}
.download-info { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.dl-stat { background:var(--surface); border-radius:8px; padding:10px 12px; }
.dl-stat-label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.dl-stat-value { font-size:13px; font-weight:600; color:var(--text); font-family:var(--mono); }

/* Tags */
.tag { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:600; }
.tag-green  { background:var(--green-bg);  color:var(--green); }
.tag-gold   { background:var(--gold-bg);   color:var(--gold2); }
.tag-red    { background:var(--red-bg);    color:var(--red); }
.tag-blue   { background:var(--blue-bg);   color:var(--blue); }
.tag-muted  { background:var(--surface2);  color:var(--text2); }

/* ── PROJECTS PAGE ──────────────────────────────────────────── */
.page-wrap  { flex:1; overflow-y:auto; padding:24px; }
.page-title { font-family:var(--font); font-size:22px; font-weight:700; letter-spacing:-0.03em; margin-bottom:4px; }
.page-sub   { font-size:13px; color:var(--text2); margin-bottom:24px; }

.projects-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.project-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r2);
  padding:18px; transition:all var(--t) var(--ease); cursor:default;
}
.project-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,0.35); }
.project-icon  { width:38px; height:38px; border-radius:10px; background:var(--gold-bg); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px; }
.project-name  { font-family:var(--font); font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; }
.project-desc  { font-size:12px; color:var(--text2); line-height:1.55; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.project-meta  { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.project-actions { display:flex; gap:6px; padding-top:12px; border-top:1px solid var(--border); }

/* Empty state */
.empty-state { text-align:center; padding:60px 20px; }
.empty-icon  { font-size:48px; margin-bottom:14px; }
.empty-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; }
.empty-sub   { font-size:13px; color:var(--text2); }

/* History */
.history-item {
  display:flex; align-items:center; gap:12px;
  padding:14px; border-bottom:1px solid var(--border);
  transition:background var(--t);
}
.history-item:hover { background:var(--surface); }
.history-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }

/* Usage bar */
.usage-row  { display:flex; justify-content:space-between; font-size:12px; margin-bottom:6px; }
.usage-bar  { height:5px; background:var(--surface2); border-radius:3px; overflow:hidden; margin-bottom:4px; }
.usage-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold2)); transition:width 800ms var(--ease); }

/* ── TOASTS ─────────────────────────────────────────────────── */
.toasts { position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--bg2); border:1px solid var(--border2); border-radius:10px;
  padding:12px 16px; display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5); animation:toastIn 200ms var(--ease);
  min-width:240px; max-width:320px; cursor:pointer;
}
@keyframes toastIn { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:translateX(0)} }
.toast-icon { font-size:16px; flex-shrink:0; }
.toast-msg  { font-size:13px; color:var(--text); flex:1; }

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:fadeIn 180ms ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--r2); width:460px; max-width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,0.7);
  animation:slideUp 200ms var(--ease);
  max-height:90vh; overflow-y:auto;
}
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.modal-hdr  { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--border); }
.modal-title { font-family:var(--font); font-size:16px; font-weight:700; }
.modal-body  { padding:20px; display:flex; flex-direction:column; gap:14px; }
.modal-foot  { padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }
.modal-close { background:none; border:none; color:var(--text3); cursor:pointer; font-size:16px; padding:4px; }

/* ── SKELETON ───────────────────────────────────────────────── */
.skeleton { background:var(--surface2); border-radius:8px; animation:shimmer 1.6s ease infinite; }
@keyframes shimmer { 0%,100%{opacity:.4} 50%{opacity:.8} }

/* ── SYNTAX COLORS ──────────────────────────────────────────── */
.kw  { color:#c678dd; }
.fn  { color:#61afef; }
.str { color:#98c379; }
.cm  { color:#5c6370; font-style:italic; }
.vc  { color:#e06c75; }
.nu  { color:#d19a66; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-brand { display:none; }
  .auth-form-wrap { width:100%; padding:20px; }

  .sidebar {
    position:fixed; top:0; left:0; height:100%;
    transform:translateX(-100%); transition:transform var(--t) var(--ease);
    z-index:100;
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.visible { display:block; }

  .mobile-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 14px; height:54px; flex-shrink:0;
    background:var(--bg2); border-bottom:1px solid var(--border);
  }
  .mobile-menu-btn { background:none; border:none; color:var(--text2); font-size:20px; cursor:pointer; }
  .mobile-title { font-family:var(--font); font-size:14px; font-weight:600; }

  .builder-layout { grid-template-columns:1fr; }
  .builder-editor { display:none; }
  .builder-editor.show { display:flex; }

  .page-wrap { padding:16px; padding-bottom:80px; }
  .projects-grid { grid-template-columns:1fr; }
}