:root {
  --bg: #0a1020;
  --bg-2: #101a31;
  --panel: rgba(20, 31, 57, .74);
  --panel-strong: #16223d;
  --line: rgba(255,255,255,.10);
  --text: #f5f7ff;
  --muted: #aeb9d4;
  --accent: #7c6cff;
  --accent-2: #41d9ff;
  --success: #45d39f;
  --shadow: 0 18px 60px rgba(0,0,0,.28);
}

html { font-size: 15px; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(124,108,255,.22), transparent 32rem),
    radial-gradient(circle at 90% 12%, rgba(65,217,255,.14), transparent 28rem),
    linear-gradient(180deg, #0a1020 0%, #0d1426 56%, #0a1020 100%);
}

a { color: #a7d9ff; text-decoration: none; }
a:hover { color: #d8efff; }

.app-container { max-width: 1500px; padding-left: clamp(1rem, 2vw, 2rem); padding-right: clamp(1rem, 2vw, 2rem); }
.app-header { background: rgba(10,16,32,.86); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.navbar { min-height: 72px; }
.navbar .nav-link { color: #dce4f8 !important; font-weight: 550; padding-left: .75rem !important; padding-right: .75rem !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff !important; }
.brand-wrap { display:flex; gap:.7rem; align-items:center; color:#fff !important; }
.brand-wrap > span:last-child { display:flex; flex-direction:column; line-height:1.05; }
.brand-wrap strong { font-size:1.03rem; letter-spacing:.01em; }
.brand-wrap small { color:#91a1c5; font-size:.68rem; margin-top:.25rem; }
.brand-mark {
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-weight:800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 28px rgba(89,111,255,.32);
}
.language-account-wrap { gap:.25rem; }
.app-dropdown { background:#15203a; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:14px; padding:.45rem; }
.app-dropdown .dropdown-item { color:#e9efff; border-radius:10px; padding:.6rem .75rem; display:flex; gap:.5rem; align-items:center; }
.app-dropdown .dropdown-item:hover { background:rgba(124,108,255,.18); color:#fff; }
.language-menu { max-height: 70vh; overflow:auto; min-width: 180px; }
.soon-badge { margin-left:auto; font-size:.68rem; background:rgba(255,255,255,.08); color:#aeb9d4; padding:.18rem .42rem; border-radius:999px; }

.main-content { min-height: calc(100vh - 146px); }
.app-footer { border-top:1px solid var(--line); color:#8795b7; padding:1.1rem 0; font-size:.9rem; }

.hero-section { position:relative; overflow:hidden; }
.hero-section::after { content:""; position:absolute; width:420px; height:420px; border-radius:50%; filter:blur(80px); background:rgba(124,108,255,.12); right:-120px; top:20px; pointer-events:none; }
.hero-title { font-size: clamp(2.45rem, 5.2vw, 5.2rem); line-height:.98; letter-spacing:-.045em; font-weight:800; max-width: 980px; }
.hero-lead { color:var(--muted); font-size:clamp(1.05rem, 1.6vw, 1.3rem); max-width:800px; margin-top:1.4rem; line-height:1.7; }
.eyebrow { display:inline-flex; align-items:center; gap:.4rem; text-transform:uppercase; letter-spacing:.14em; font-size:.73rem; font-weight:800; color:#8fe8ff; margin-bottom:1rem; }
.hero-pills { display:flex; flex-wrap:wrap; gap:.65rem; }
.hero-pills span { border:1px solid var(--line); background:rgba(255,255,255,.035); color:#cbd5ec; padding:.5rem .75rem; border-radius:999px; font-size:.88rem; }

.btn-primary { background:linear-gradient(135deg,#7168ff,#4aa9ff); border:none; box-shadow:0 10px 30px rgba(92,102,255,.24); }
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn-outline-light { border-color:rgba(255,255,255,.25); color:#f4f7ff; }
.btn-outline-light:hover { background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.42); }

.glass-panel { background:var(--panel); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.companion-preview { padding:1.2rem; max-width:520px; margin-inline:auto; transform:rotate(.7deg); }
.preview-head { display:flex; align-items:center; gap:.75rem; padding:.2rem .2rem 1rem; border-bottom:1px solid var(--line); }
.preview-head > div:nth-child(2) { display:flex; flex-direction:column; flex:1; }
.preview-head small { color:#8f9dbd; }
.online-dot { width:10px; height:10px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px rgba(69,211,159,.12); }
.avatar-orb { width:46px; height:46px; border-radius:16px; display:grid; place-items:center; font-weight:850; background:linear-gradient(135deg,#7c6cff,#3bd6ff); color:white; box-shadow:0 9px 28px rgba(80,120,255,.25); flex:0 0 auto; }
.avatar-orb.small { width:38px; height:38px; border-radius:13px; font-size:.8rem; }
.avatar-orb.large { width:72px; height:72px; border-radius:22px; font-size:1.2rem; }
.preview-message { max-width:82%; padding:.75rem .9rem; border-radius:16px; margin-top:1rem; line-height:1.5; }
.assistant-bubble { background:rgba(255,255,255,.075); color:#edf2ff; border-bottom-left-radius:5px; }
.user-bubble { margin-left:auto; background:linear-gradient(135deg,rgba(124,108,255,.9),rgba(60,150,255,.9)); border-bottom-right-radius:5px; }

.section-pad { padding:2.2rem 0 5rem; }
.section-heading { max-width:780px; margin-bottom:2rem; }
.section-heading h1, .section-heading h2, .page-heading h1 { font-weight:780; letter-spacing:-.025em; }
.section-heading p, .page-heading p { color:var(--muted); line-height:1.7; }
.feature-card { height:100%; background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:20px; padding:1.35rem; transition:.2s ease; }
.feature-card:hover { transform:translateY(-3px); border-color:rgba(123,163,255,.28); background:rgba(255,255,255,.055); }
.feature-card h3 { font-size:1.05rem; margin:.9rem 0 .5rem; }
.feature-card p { color:var(--muted); margin:0; line-height:1.6; }
.feature-icon { font-size:1.45rem; }

.page-shell { min-height:calc(100vh - 145px); }
.page-heading { max-width:1100px; }
.form-panel { padding:clamp(1.1rem,2vw,2rem); }
.form-control, .form-select { color:#f6f8ff; background:#0f1930; border:1px solid rgba(255,255,255,.13); border-radius:13px; }
.form-control:focus, .form-select:focus { color:#fff; background:#111d36; border-color:#6a85ff; box-shadow:0 0 0 .2rem rgba(106,133,255,.14); }
.form-control::placeholder { color:#7382a3; }
.form-select option { background:#0f1930; color:#fff; }
.form-label { font-weight:650; color:#dce4f8; }
.companion-tip-card { padding:1.6rem; }
.companion-tip-card h3 { margin-top:1.2rem; }
.companion-tip-card p { color:var(--muted); line-height:1.65; }
.check-list { list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:.7rem; color:#d9e2f6; }

/* Chat */
.chat-page { min-height:calc(100vh - 145px); }
.chat-shell { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:calc(100vh - 125px); max-height:calc(100vh - 105px); border:1px solid var(--line); border-radius:24px; overflow:hidden; background:rgba(12,20,39,.68); box-shadow:var(--shadow); }
.chat-sidebar { background:rgba(9,15,29,.78); border-right:1px solid var(--line); padding:1rem; display:flex; flex-direction:column; min-height:0; }
.sidebar-label { text-transform:uppercase; font-size:.68rem; color:#6f7fa2; font-weight:800; letter-spacing:.13em; margin:.3rem .3rem .7rem; }
.session-list { overflow:auto; display:grid; gap:.35rem; }
.session-item { display:flex; align-items:center; gap:.6rem; color:#b9c4de; padding:.62rem .7rem; border-radius:11px; min-width:0; }
.session-item:hover, .session-item.active { color:#fff; background:rgba(124,108,255,.13); }
.session-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.empty-sidebar { color:#697899; font-size:.86rem; padding:.6rem; }
.sidebar-bottom { margin-top:auto; border-top:1px solid var(--line); padding-top:.8rem; display:grid; gap:.35rem; }
.sidebar-bottom a { color:#9cabc9; padding:.45rem .3rem; display:flex; align-items:center; gap:.45rem; }
.sidebar-bottom small { margin-left:auto; color:#667696; }
.chat-main { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.chat-topbar { height:68px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; background:rgba(18,28,51,.62); }
.chat-topbar > div > div:last-child { display:flex; flex-direction:column; }
.chat-topbar small { color:#8291b2; font-size:.75rem; }
.message-area { overflow:auto; min-height:0; padding:1rem; scroll-behavior:smooth; }
.message-stack { max-width:900px; margin:0 auto; display:grid; gap:1rem; }
.message-row { display:flex; align-items:flex-end; gap:.6rem; }
.message-row.user { justify-content:flex-end; }
.message-avatar { width:32px; height:32px; border-radius:11px; display:grid; place-items:center; font-size:.63rem; font-weight:800; flex:0 0 auto; background:linear-gradient(135deg,#756aff,#35cfff); }
.message-bubble { max-width:min(78%,760px); background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.055); border-radius:18px 18px 18px 5px; padding:.8rem 1rem .55rem; }
.message-row.user .message-bubble { background:linear-gradient(135deg,rgba(102,91,238,.95),rgba(53,136,229,.95)); border-radius:18px 18px 5px 18px; }
.message-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.message-bubble time { display:block; text-align:right; margin-top:.35rem; color:rgba(227,234,255,.55); font-size:.68rem; }
.chat-empty-state { min-height:100%; max-width:760px; margin:0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:3rem 1rem; }
.chat-empty-state h2 { margin-top:1.2rem; font-weight:750; }
.chat-empty-state p { color:var(--muted); max-width:600px; }
.starter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; width:100%; margin-top:1rem; }
.starter-prompt { background:rgba(255,255,255,.04); color:#cfd9ee; border:1px solid var(--line); border-radius:14px; padding:.85rem; text-align:left; min-height:72px; }
.starter-prompt:hover { background:rgba(124,108,255,.12); color:#fff; border-color:rgba(124,108,255,.28); }
.chat-composer { border-top:1px solid var(--line); padding:.8rem 1rem .65rem; background:rgba(12,19,36,.83); }
.composer-box { max-width:900px; margin:0 auto; display:flex; align-items:flex-end; gap:.65rem; background:#101a30; border:1px solid rgba(255,255,255,.11); border-radius:18px; padding:.6rem .65rem .6rem .9rem; }
.composer-box:focus-within { border-color:rgba(97,125,255,.6); box-shadow:0 0 0 3px rgba(97,125,255,.08); }
.composer-box textarea { flex:1; resize:none; border:0; outline:0; background:transparent; color:#fff; line-height:1.5; max-height:180px; padding:.35rem 0; }
.composer-box textarea::placeholder { color:#7786a8; }
.send-button { width:40px; height:40px; border:0; border-radius:13px; color:#fff; background:linear-gradient(135deg,#766bff,#44b5ff); display:grid; place-items:center; flex:0 0 auto; }
.composer-note { color:#627190; font-size:.7rem; text-align:center; margin-top:.4rem; }
.chat-composer .text-danger { max-width:900px; margin:.3rem auto 0; display:block; }

/* Auth */
.auth-page { min-height:calc(100vh - 145px); display:grid; align-items:center; }
.auth-card { max-width:500px; padding:clamp(1.25rem,3vw,2rem); }
.auth-card h1 { font-weight:780; }
.auth-card p { color:var(--muted); }
.auth-switch { text-align:center; color:#8e9dba; border-top:1px solid var(--line); padding-top:1.1rem; margin-top:1.2rem; }

/* Plans / roadmap */
.plan-card { height:100%; padding:1.4rem; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.plan-card.featured { border-color:rgba(124,108,255,.55); box-shadow:0 0 0 1px rgba(124,108,255,.18), var(--shadow); }
.plan-name { color:#a8b5d2; font-weight:700; }
.plan-card h2 { font-size:2.2rem; margin:.7rem 0; }
.plan-card p { color:var(--muted); min-height:72px; }
.soon-plan { display:inline-block; font-size:.72rem; padding:.25rem .5rem; border-radius:999px; background:rgba(124,108,255,.14); color:#b7b0ff; }
.roadmap-list { display:grid; gap:.8rem; max-width:1050px; }
.roadmap-item { display:grid; grid-template-columns:120px 1fr auto; gap:1.2rem; align-items:start; border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:18px; padding:1.15rem; }
.roadmap-item > strong { color:#8fe8ff; }
.roadmap-item h3 { font-size:1.05rem; margin:0 0 .35rem; }
.roadmap-item p { color:var(--muted); margin:0; }
.roadmap-item > span { color:#63dfa8; font-size:.72rem; border:1px solid rgba(99,223,168,.25); padding:.25rem .5rem; border-radius:999px; }
.roadmap-item.current { border-color:rgba(99,223,168,.25); background:rgba(99,223,168,.035); }
.coming-card { max-width:760px; padding:clamp(1.5rem,4vw,3rem); }
.coming-card p { color:var(--muted); font-size:1.05rem; line-height:1.7; }
.future-orb { font-size:3rem; margin-bottom:1rem; }

.alert { border-radius:14px; border-width:1px; }
.text-light-emphasis { color:#8f9dbc !important; }

@media (max-width: 1199.98px) {
  .chat-shell { grid-template-columns:230px minmax(0,1fr); }
}

@media (max-width: 991.98px) {
  .navbar-collapse { padding:.8rem 0 1rem; max-height:calc(100vh - 75px); overflow:auto; }
  .navbar-nav .dropdown-menu { position:static; box-shadow:none; margin:.25rem 0 .5rem; }
  .language-account-wrap { align-items:stretch !important; }
  .chat-page .app-container { padding-left:.5rem; padding-right:.5rem; }
  .chat-shell { display:flex; flex-direction:column; min-height:calc(100vh - 110px); max-height:none; border-radius:18px; }
  .chat-sidebar { border-right:0; border-bottom:1px solid var(--line); padding:.7rem; display:block; }
  .chat-sidebar > .btn { margin-bottom:.55rem !important; }
  .sidebar-label, .sidebar-bottom { display:none; }
  .session-list { display:flex; overflow-x:auto; overflow-y:hidden; padding-bottom:.25rem; gap:.4rem; }
  .session-item { flex:0 0 auto; max-width:190px; background:rgba(255,255,255,.03); }
  .chat-main { min-height:calc(100vh - 250px); }
  .message-area { min-height:50vh; }
  .starter-grid { grid-template-columns:1fr; }
}

@media (max-width: 767.98px) {
  .hero-title { font-size:clamp(2.25rem,12vw,3.5rem); }
  .hero-lead { font-size:1rem; }
  .companion-preview { transform:none; }
  .page-heading h1 { font-size:1.8rem; }
  .message-bubble { max-width:88%; }
  .chat-topbar { padding:.6rem .7rem; }
  .message-area { padding:.7rem; }
  .chat-composer { padding:.65rem .65rem .55rem; }
  .roadmap-item { grid-template-columns:1fr; gap:.45rem; }
  .roadmap-item > span { justify-self:start; }
}

@media (max-width: 420px) {
  .brand-wrap strong { font-size:.92rem; }
  .brand-mark { width:36px; height:36px; border-radius:12px; }
  .hero-pills { display:grid; }
  .message-bubble { max-width:92%; }
  .composer-box { border-radius:15px; }
}
.logo-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}