/* ============ TOKENS ============ */
:root{
  --bg: #0b1320;
  --panel: #121a2b;
  --panel-2: #0f1726;
  --ink: #e9f0ff;
  --muted: #a6b3d1;
  --accent: #36b0c9;
  --accent-2: #3d79ff;
  --ring: rgba(54,176,201,.35);

  --card: rgba(255,255,255,.06);
  --hover: rgba(255,255,255,.12);

  --bubble-bot: linear-gradient(135deg,#1a3145, #17445a);
  --bubble-user: linear-gradient(135deg,#2445ff, #1a79c7);

  --composer-h: 64px;   /* input + send */
  --dock-h: 64px;       /* bottom nav approx */
}

/* ============ GLOBAL ============ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font: 16px/1.5 system-ui, Segoe UI, Roboto, "Noto Sans", sans-serif;

  /* 🔧 Gradientni biroz yaqinlashtirdik, lekin yopishmaydi */
  background:
    radial-gradient(1100px 720px at 16% -6%, #122035 0, #0b1320 60%, #07101c 100%);
  padding-bottom: calc(var(--dock-h) + 8px); /* dock uchun joy */
}

/* Girih pattern (yengil) */
.pattern{
  position:fixed; inset:0; pointer-events:none; opacity:.07;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\
<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
<stop offset='0' stop-color='%2336b0c9'/>\
<stop offset='1' stop-color='%23427cff'/>\
</linearGradient></defs>\
<g fill='none' stroke='url(%23g)' stroke-width='1.2'>\
<path d='M70,5 135,70 70,135 5,70z'/>\
<path d='M70,25 115,70 70,115 25,70z'/>\
<circle cx='70' cy='70' r='12'/>\
</g></svg>");
  background-size: 160px 160px;
  z-index:0;
}

/* ============ TOP BAR ============ */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:14px 16px; background:linear-gradient(0deg, rgba(10,16,28,.65), rgba(10,16,28,.75));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:42px; height:42px; filter: drop-shadow(0 6px 14px rgba(61,121,255,.35))}
.brand h1{margin:0; font-size:20px; letter-spacing:.3px}
.brand p{margin:0; color:var(--muted); font-size:12.5px}
.actions{display:flex; gap:10px}
.btn-mode,.btn-apply{
  display:flex; align-items:center; gap:6px; padding:8px 14px;
  color:var(--ink); background:var(--card); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; cursor:pointer; transition:.2s ease; text-decoration:none;
}
.btn-mode:hover,.btn-apply:hover{transform:translateY(-1px); background:var(--hover)}

/* ============ SHELL ============ */
.shell{max-width:980px; margin:14px auto 96px; padding:0 16px}

/* ============ QUICK BUTTONS ============ */
.quick{
  display:flex; gap:10px; overflow:auto; padding:8px 2px 2px;
  scrollbar-width:none;
}
.quick::-webkit-scrollbar{display:none}
.qbtn{
  flex:0 0 auto;
  background:linear-gradient(180deg, #17314a, #0f2438);
  color:#eaf3ff; border:1px solid rgba(255,255,255,.08);
  padding:10px 14px; border-radius:12px; font-size:14px; cursor:pointer;
  transition:.15s; white-space:nowrap;
}
.qbtn:hover{border-color:var(--accent); box-shadow:0 6px 20px var(--ring)}

/* ============ CHAT ============ */
.chat{
  position:relative;
  margin-top:12px;
  background: linear-gradient(180deg, rgba(18,26,43,.75), rgba(18,26,43,.45));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:18px;
  min-height:50vh; max-height:62vh;
  overflow-y:auto;
  /* 🔧 Pastki elementlar (composer + dock) uchun joy */
  padding-bottom: calc(var(--composer-h) + 20px);
  scroll-behavior:smooth;
}

.bubble{
  max-width:85%; padding:14px 16px; border-radius:16px; margin:8px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.05);
  line-height:1.45; word-wrap:break-word; overflow-wrap:anywhere;
}
.bubble.bot{background:var(--bubble-bot); border-top-left-radius:8px}
.bubble.user{background:var(--bubble-user); border-top-right-radius:8px; margin-left:auto}

/* ============ TYPING (Yozmoqda...) ============ */
.typing-bubble{display:inline-flex; align-items:center; gap:6px}
.typing-bubble .dots span{
  animation: blink 1.2s infinite;
  display:inline-block; font-size:20px; line-height:0;
}
.typing-bubble .dots span:nth-child(2){animation-delay:.15s}
.typing-bubble .dots span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:0}40%{opacity:1}}

/* ============ COMPOSER ============ */
.composer{
  display:flex; gap:10px; margin-top:12px;
  position:sticky; bottom: calc(var(--dock-h) + 10px);
  z-index:5;
  height:var(--composer-h);
}
.composer input{
  flex:1; background:rgba(255,255,255,.06); color:var(--ink);
  border:1px solid rgba(255,255,255,.12);
  padding:14px 16px; border-radius:14px; outline:none;
}
.composer input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.send{
  width:52px; border-radius:14px; border:none;
  background:linear-gradient(120deg, #2196F3, #00BCD4); color:white; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(61,121,255,.35); transition:.15s;
}
.send:hover{transform: translateY(-1px)}

/* ============ DOCK ============ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:6;
  display:flex; justify-content:space-around; gap:10px;
  padding:10px 8px; height:var(--dock-h);
  background:rgba(9,14,24,.9); backdrop-filter: blur(12px);
  border-top:1px solid rgba(255,255,255,.10);
}
.dock-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; min-width:96px; border-radius:12px; color:#eaf3ff; text-decoration:none;
  font-size:13px; gap:6px; transition:.15s; border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.04);
}
.dock-item:hover{border-color:var(--accent); box-shadow:0 8px 26px var(--ring); transform:translateY(-2px)}
.dock-item i{font-size:18px}

/* Rangli ikonalar */
.dock-item.telegram i{color:#26A5E4}
.dock-item.about i{color:#9aa4ff}
.dock-item.home i{color:#66e3ff}

/* ============ LIGHT THEME ============ */
body.light{
  --bg:#f7f9fd; --panel:#ffffff; --panel-2:#f4f7ff; --ink:#0c1a2b; --muted:#55637d;
  --card:#ffffff; --hover:#eef3ff;
  background:#f5f8ff;
}
body.light .pattern{opacity:.11}
body.light .topbar{
  background:linear-gradient(0deg, rgba(255,255,255,.88), rgba(255,255,255,.95));
  border-bottom-color:rgba(0,0,0,.06)
}
body.light .btn-mode,.btn-apply{color:#0c1a2b; border-color:rgba(0,0,0,.08)}
body.light .btn-mode:hover,.btn-apply:hover{background:#eef3ff}

body.light .qbtn{
  background:linear-gradient(180deg,#e9f2ff,#dfeaff); color:#0d1a2c; border-color:rgba(0,0,0,.08)
}
body.light .chat{background:#ffffff;border-color:rgba(0,0,0,.06)}
body.light .bubble.bot{background:linear-gradient(135deg,#e7f5ff,#dff0ff)}
body.light .bubble.user{background:linear-gradient(135deg,#cfe2ff,#a8c2ff)}
body.light .composer input{background:#fff;color:#0c1a2b;border-color:rgba(0,0,0,.10)}
body.light .send{box-shadow:0 8px 22px rgba(0,0,0,.12)}

body.light .dock{
  background:rgba(255,255,255,.98); border-top-color:rgba(0,0,0,.08)
}
body.light .dock-item{
  color:#0c1a2b; background:#ffffff; border-color:rgba(0,0,0,.08)
}
body.light .dock-item:hover{
  color:#0c1a2b; border-color:#bcd4ff; box-shadow:0 8px 20px rgba(28,106,255,.12)
}

/* ============ MOBILE ============ */
@media (max-width:640px){
  .brand p{display:none}
  .brand h1{font-size:18px}
  .bubble{max-width:92%}
}