/* SuperAI design system — inspired by Claude / ChatGPT, dark with violet accents */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --bg:#0a0a0f;
  --bg-2:#11111a;
  --panel:#15151f;
  --panel-2:#1c1c28;
  --panel-hover:#22222e;
  --border:#262635;
  --border-2:#33334a;
  --text:#f1f2f6;
  --text-2:#c5c8d6;
  --muted:#8b8fa3;
  --accent:#a78bfa;
  --accent-2:#8b5cf6;
  --accent-glow:rgba(167,139,250,.18);
  --grad:linear-gradient(135deg,#a78bfa 0%,#8b5cf6 50%,#6366f1 100%);
  --grad-soft:linear-gradient(135deg,rgba(167,139,250,.12),rgba(99,102,241,.08));
  --ok:#34d399;
  --warn:#fbbf24;
  --err:#f87171;
  --radius:12px;
  --radius-lg:16px;
  --shadow:0 8px 30px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.has-bg{
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(167,139,250,.15), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(99,102,241,.12), transparent 60%),
    var(--bg);
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-weight:700; letter-spacing:-0.01em; margin:0 0 .5em}
h1{font-size:2.2rem; line-height:1.15}
h2{font-size:1.5rem}
h3{font-size:1.15rem}
.muted{color:var(--muted)}
.text-2{color:var(--text-2)}
.center{text-align:center}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 15px/1 "Inter",sans-serif; letter-spacing:.01em;
  padding:12px 20px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; transition:all .18s ease;
  background:var(--panel-2); color:var(--text);
  border-color:var(--border-2);
}
.btn:hover{background:var(--panel-hover); transform:translateY(-1px)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-primary{
  background:var(--grad); color:white; border:0;
  box-shadow:0 4px 20px var(--accent-glow);
}
.btn-primary:hover{filter:brightness(1.1); box-shadow:0 6px 28px var(--accent-glow)}
.btn-ghost{background:transparent; border-color:var(--border-2)}
.btn-ghost:hover{background:var(--panel)}
.btn-sm{padding:7px 14px; font-size:13.5px; border-radius:8px}
.btn-block{width:100%}

/* ===== Forms ===== */
label{display:block; font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:6px}
input[type=text],input[type=password],input[type=email],input:not([type]),textarea,select{
  width:100%; font:15px "Inter",sans-serif;
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:11px 14px; outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow)
}
textarea{font-family:inherit; resize:vertical; min-height:90px}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b8fa3' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
input[type=checkbox]{width:auto; accent-color:var(--accent)}

/* ===== Cards ===== */
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px;
}
.card-glass{
  background:linear-gradient(180deg, rgba(28,28,40,.7), rgba(21,21,31,.7));
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
}

/* ===== Header / Nav ===== */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:14px 28px;
  background:rgba(10,10,15,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font:800 19px/1 "Inter",sans-serif; letter-spacing:-.02em; color:var(--text);
}
.brand .logo{
  width:32px; height:32px; border-radius:9px;
  background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  box-shadow:0 4px 14px var(--accent-glow);
}
.nav-spacer{flex:1}
.nav a.nav-link{color:var(--text-2); font-weight:500; font-size:14.5px; padding:6px 10px; border-radius:8px}
.nav a.nav-link:hover{color:var(--text); background:var(--panel-2); text-decoration:none}
.pill{
  font-size:12.5px; padding:5px 11px; border:1px solid var(--border-2);
  border-radius:999px; color:var(--text-2); background:var(--panel-2);
}
.pill-warn{border-color:rgba(251,191,36,.4); color:var(--warn); background:rgba(251,191,36,.08)}
.pill-ok{border-color:rgba(52,211,153,.4); color:var(--ok); background:rgba(52,211,153,.08)}
.pill-err{border-color:rgba(248,113,113,.45); color:var(--err); background:rgba(248,113,113,.08)}

/* ===== Banner ===== */
.banner{
  display:flex; align-items:center; gap:14px;
  padding:12px 22px; font-size:14.5px;
  border-bottom:1px solid var(--border);
}
.banner-trial{background:linear-gradient(90deg, rgba(167,139,250,.12), rgba(99,102,241,.06))}
.banner-warn{background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.25)}
.banner-err{background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.3)}

/* ===== Tables ===== */
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border)}
th{font-weight:600; color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em}
.tag{font-size:11.5px; padding:2px 9px; background:var(--panel-2); border:1px solid var(--border-2); border-radius:999px; color:var(--text-2)}

/* ===== Misc ===== */
.err{color:var(--err)}
.ok{color:var(--ok)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
hr{border:0; border-top:1px solid var(--border); margin:18px 0}

/* ============ LANDING PAGE ============ */
.landing{max-width:1180px; margin:0 auto; padding:0 28px}
.hero{text-align:center; padding:80px 0 56px}
.hero .eyebrow{
  display:inline-block; padding:6px 14px; border:1px solid var(--border-2);
  border-radius:999px; background:var(--grad-soft); color:var(--accent);
  font-weight:500; font-size:13px; letter-spacing:.02em; margin-bottom:20px;
}
.hero h1{
  font-size:clamp(2.4rem,5.5vw,4.2rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.05; margin:0 0 22px;
}
.hero h1 .grad{
  background:var(--grad); background-clip:text; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero p.lead{
  font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--text-2);
  max-width:740px; margin:0 auto 36px;
}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:18px}
.hero-cta .btn{padding:14px 28px; font-size:16px}
.hero .small{color:var(--muted); font-size:13.5px}

.section{padding:60px 0; border-top:1px solid var(--border)}
.section h2.section-title{
  font-size:clamp(1.7rem,3.3vw,2.4rem); text-align:center;
  margin:0 0 14px; letter-spacing:-.02em;
}
.section .section-sub{
  text-align:center; color:var(--text-2); max-width:640px;
  margin:0 auto 40px; font-size:1.05rem;
}

.features{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px;
}
.feature{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; transition:transform .2s, border-color .2s;
}
.feature:hover{transform:translateY(-3px); border-color:var(--border-2)}
.feature .icon{
  width:44px; height:44px; border-radius:11px; background:var(--grad-soft);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px;
}
.feature h3{font-size:1.15rem; margin:0 0 6px}
.feature p{margin:0; color:var(--text-2); font-size:14.5px}

.compare{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px; margin-top:30px;
}
.compare .col{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px}
.compare .col strong{display:block; font-size:1rem; margin-bottom:8px; color:var(--text)}
.compare .col span{display:block; font-size:13.5px; color:var(--muted); margin-top:4px}
.compare .col.us{border-color:var(--accent); background:linear-gradient(180deg, var(--grad-soft), var(--panel))}
.compare .col.us strong{color:var(--accent)}

.pricing{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 380px));
  gap:20px; justify-content:center; margin-top:20px;
}
.price-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; position:relative;
}
.price-card.featured{
  border-color:var(--accent);
  background:linear-gradient(180deg, var(--grad-soft), var(--panel));
  box-shadow:0 10px 50px var(--accent-glow);
}
.price-card .badge{
  position:absolute; top:-11px; right:24px;
  background:var(--grad); color:white; font-weight:600; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.price-card h3{font-size:1.15rem; color:var(--text-2); margin:0 0 12px; font-weight:600}
.price-card .price{font-size:2.6rem; font-weight:800; letter-spacing:-.02em}
.price-card .price small{font-size:1rem; color:var(--muted); font-weight:500}
.price-card ul{list-style:none; padding:0; margin:22px 0 24px; font-size:14.5px}
.price-card li{padding:7px 0 7px 26px; position:relative; color:var(--text-2)}
.price-card li::before{
  content:""; position:absolute; left:0; top:11px; width:14px; height:14px;
  background:var(--accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain;
}

footer.foot{
  border-top:1px solid var(--border); padding:32px 28px; margin-top:60px;
  text-align:center; color:var(--muted); font-size:13.5px;
}
footer.foot a{color:var(--text-2)}

/* ============ AUTH PAGES ============ */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px 16px}
.auth-card{width:100%; max-width:420px}
.auth-card h2{font-size:1.5rem; margin:0 0 6px}
.auth-card .sub{color:var(--text-2); margin:0 0 22px; font-size:14.5px}
.auth-card .field{margin-bottom:14px}
.auth-card .alt{margin-top:18px; font-size:14px; color:var(--text-2); text-align:center}

/* ============ CHAT APP ============ */
.app-shell{
  display:grid; grid-template-columns:280px 1fr;
  height:calc(100vh - var(--nav-h, 60px) - var(--banner-h, 0px));
  min-height:0;
}
.sidebar{
  border-right:1px solid var(--border); background:var(--bg-2);
  display:flex; flex-direction:column; min-height:0;
}
.sidebar .new-chat{margin:14px}
.sidebar .conv-list{flex:1; overflow-y:auto; padding:0 8px 14px}
.sidebar .conv{
  padding:10px 12px; border-radius:9px; cursor:pointer; font-size:14px;
  color:var(--text-2); margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar .conv:hover{background:var(--panel)}
.sidebar .conv.active{background:var(--panel-2); color:var(--text)}
.sidebar .conv-section{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:14px 14px 6px}

.chat-main{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg)}
.messages{
  flex:1; overflow-y:auto; padding:36px 0;
}
.messages-inner{max-width:780px; margin:0 auto; padding:0 28px}
.empty-state{text-align:center; padding:80px 20px; color:var(--text-2)}
.empty-state h2{font-size:1.7rem; margin:0 0 10px}
.empty-state p{margin:0; color:var(--muted)}
.empty-state .suggestions{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:10px; max-width:680px; margin:30px auto 0;
}
.empty-state .suggestion{
  text-align:left; background:var(--panel); border:1px solid var(--border);
  padding:14px 16px; border-radius:12px; cursor:pointer; font-size:14px;
  color:var(--text-2); transition:border-color .15s, transform .15s;
}
.empty-state .suggestion:hover{border-color:var(--accent); transform:translateY(-1px)}

.msg{margin-bottom:30px}
.msg .meta{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  font-size:13px; color:var(--muted); font-weight:500;
}
.msg .meta .who{
  width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}
.msg.user .who{background:var(--panel-2); color:var(--text)}
.msg.assistant .who{background:var(--grad); color:white}
.msg.system .who{background:rgba(248,113,113,.2); color:var(--err)}
.msg .body{
  font-size:16.5px; line-height:1.7; color:var(--text);
  white-space:pre-wrap; word-wrap:break-word;
}
.msg.user .body{color:var(--text-2)}
.msg .body img{max-width:100%; border-radius:12px; margin-top:8px; border:1px solid var(--border)}
.msg .body code{
  background:var(--panel-2); padding:2px 6px; border-radius:5px;
  font-family:"JetBrains Mono",monospace; font-size:.92em;
}
.msg .body pre{
  background:var(--panel-2); padding:14px 16px; border-radius:10px;
  overflow-x:auto; border:1px solid var(--border); margin:10px 0;
}
.msg .body pre code{background:transparent; padding:0}
.msg .attach-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:13px;
  background:var(--panel-2); border:1px solid var(--border);
  padding:5px 11px; border-radius:7px; margin:6px 6px 0 0; color:var(--text-2);
}

.composer{
  border-top:1px solid var(--border); background:var(--bg);
  padding:18px 28px 22px;
}
.composer-inner{max-width:780px; margin:0 auto}
.composer-box{
  background:var(--panel); border:1px solid var(--border-2); border-radius:16px;
  padding:14px; transition:border-color .15s;
}
.composer-box:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow)}
.composer textarea{
  background:transparent; border:0; padding:6px 4px;
  min-height:46px; max-height:240px; font-size:16px; resize:none; box-shadow:none;
}
.composer textarea:focus{box-shadow:none}
.composer-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:8px; padding-top:10px; border-top:1px solid var(--border);
}
.composer-toolbar .file-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:8px; background:var(--panel-2);
  border:1px solid var(--border); cursor:pointer; font-size:13.5px; color:var(--text-2);
}
.composer-toolbar .file-btn:hover{background:var(--panel-hover); color:var(--text)}
.composer-toolbar input[type=file]{display:none}
.composer-toolbar select{
  padding:6px 28px 6px 12px; font-size:13.5px; height:auto;
  background-color:var(--panel-2);
}
.composer-toolbar .check{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text-2); cursor:pointer}
.composer-toolbar .send-btn{margin-left:auto; padding:9px 22px; font-size:14.5px}
.file-list{font-size:12.5px; color:var(--muted); margin-top:8px}
.composer .hint{font-size:12px; color:var(--muted); text-align:center; margin-top:10px}

.status-bubble{
  display:flex; align-items:center; gap:10px; color:var(--muted);
  font-size:14.5px; padding:14px 0;
}
.spin{
  width:14px; height:14px; border:2px solid var(--border-2); border-top-color:var(--accent);
  border-radius:50%; animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Subscribe modal/overlay ============ */
.gate-overlay{
  position:fixed; inset:0; background:rgba(10,10,15,.85); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.gate-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  max-width:460px; width:100%; padding:34px; text-align:center;
}
.gate-card h2{margin:0 0 8px}
.gate-card p{color:var(--text-2); margin:0 0 22px}

@media(max-width:760px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .nav{padding:12px 18px}
  .messages-inner, .composer-inner{padding-left:18px; padding-right:18px}
  .composer{padding-left:18px; padding-right:18px}
}