/* Claude-inspired demo layout — mor/beyaz, şık, sakin. */
.demo-shell{ display:flex; min-height:100vh; position:relative; z-index:1; }

/* ---- sidebar ---- */
.demo-side{ width:274px; flex:0 0 274px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px; padding:18px 14px 14px; background:rgba(255,255,255,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-right:1px solid rgba(24,16,60,.08); }
.side-brand{ display:flex; align-items:center; gap:10px; font-size:17px; font-weight:850; letter-spacing:-.3px; color:var(--violet-ink); padding:2px 8px 12px; }
.side-new{ display:flex; align-items:center; gap:10px; width:100%; border:1px solid rgba(124,92,255,.35); background:linear-gradient(135deg,#F6F2FF,#EDE8FF); color:#5A3FE0; padding:11px 12px; border-radius:14px; font-weight:800; font-size:13.5px; cursor:pointer; transition:transform .12s, box-shadow .2s; font-family:inherit; }
.side-new:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(124,92,255,.25); }
.side-new svg{ flex:0 0 auto; }
.side-nav{ display:flex; flex-direction:column; gap:2px; margin-top:6px; padding-bottom:10px; border-bottom:1px solid rgba(24,16,60,.1); }
.side-item{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px; color:#3B2E73; font-weight:600; font-size:13.5px; transition:background .15s,color .15s; }
.side-item svg{ width:19px; height:19px; stroke:currentColor; }
.side-item:hover{ background:#F1ECFF; }
.side-item.active{ background:#E9E3FF; color:#4A2FE0; }
.side-recents{ flex:1; min-height:0; display:flex; flex-direction:column; padding-top:12px; overflow:hidden; }
.side-recents-title{ font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); font-weight:800; padding:0 10px 8px; }
.recents-list{ list-style:none; overflow-y:auto; padding:0 2px; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; }
.recent-item{ display:block; width:100%; text-align:left; background:transparent; border:0; padding:9px 10px; border-radius:12px; color:#332B5E; font-size:12.5px; line-height:1.35; cursor:pointer; transition:background .12s; font-family:inherit; }
.recent-item:hover{ background:#F1ECFF; }
.recents-empty{ padding:10px; color:var(--muted); font-size:12px; }
.side-footer{ display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid rgba(24,16,60,.12); }
.side-avatar{ width:36px; height:36px; border-radius:12px; background:var(--grad-btn); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; box-shadow:0 6px 16px rgba(124,92,255,.4); }
.side-user-meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.side-user-meta b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--violet-ink); }
.side-user-meta span{ font-size:10.5px; color:var(--muted); }
.side-upgrade{ display:flex; align-items:center; gap:4px; padding:8px 10px; border-radius:12px; background:linear-gradient(180deg,#FFF8E7,#FCEFC5); border:1px solid #E7D9A4; color:#7A5B00; font-size:11px; font-weight:800; transition:transform .15s; }
.side-upgrade:hover{ transform:translateY(-1px); }
.side-upgrade span{ font-size:10px; }
.side-toggle{ display:none; position:fixed; top:10px; left:10px; z-index:60; width:38px; height:38px; border-radius:12px; border:1px solid rgba(24,16,60,.12); background:#FFFFFF; box-shadow:0 4px 14px rgba(24,16,60,.12); color:var(--violet-ink); align-items:center; justify-content:center; cursor:pointer; }

/* ---- main area ---- */
.demo-main{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
.demo-topbar{ display:flex; align-items:center; justify-content:center; padding:14px 22px 0; position:relative; }
.demo-top-title{ font-size:15px; font-weight:850; color:var(--violet-ink); letter-spacing:-.2px; position:absolute; left:24px; }
.plan-pill{ font-size:11.5px; color:var(--muted); background:rgba(24,16,60,.05); border:1px solid rgba(24,16,60,.1); border-radius:999px; padding:6px 12px; text-decoration:none; }
.plan-pill b{ color:var(--violet); }
.demo-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:6px 24px 0; }
.demo-empty{ display:flex; flex-direction:column; align-items:center; gap:22px; max-width:820px; width:100%; text-align:center; }
.sparkle{ filter:drop-shadow(0 8px 22px rgba(139,92,246,.45)); animation:sparkle 6s ease-in-out infinite; }
@keyframes sparkle{ 0%,100%{ transform:rotate(0deg) scale(1); } 50%{ transform:rotate(12deg) scale(1.08); } }
.serif{ font-family:Georgia,'Times New Roman',serif; }
.demo-headline{ font-size:clamp(2rem,5vw,3.3rem); letter-spacing:-1.5px; line-height:1.08; color:var(--violet-ink); font-weight:850; }
.demo-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:640px; }
.chip{ background:#FFFFFF; border:1px solid rgba(124,92,255,.3); color:#4A3BB3; font-size:12px; padding:8px 13px; border-radius:999px; cursor:pointer; transition:transform .12s, box-shadow .2s; font-family:inherit; }
.chip:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(124,92,255,.22); border-color:rgba(124,92,255,.6); }
.chat-scroll{ flex:0 0 auto; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:8px 24px; width:100%; scrollbar-width:thin; }
.bubble{ max-width:820px; width:100%; padding:4px 2px; font-size:15px; line-height:1.7; }
.bubble.user{ align-self:flex-end; background:#EDE8FF; border:1px solid rgba(124,92,255,.35); border-radius:18px; padding:10px 14px; width:auto; max-width:min(680px,100%); }
.bubble.ai{ align-self:flex-start; background:transparent; padding:2px 4px; color:var(--text); }
.bubble.typing{ color:var(--muted); font-style:italic; }
.bubble.ai.image-bubble{ background:transparent; align-self:flex-start; padding:0; }
.bubble-image{ max-width:360px; border-radius:18px; border:1px solid rgba(24,16,60,.12); box-shadow:0 16px 44px rgba(24,16,60,.18); }

/* ---- composer box (Claude-like) ---- */
.composer-box{ margin:6px auto 4px; width:min(860px,96%); background:var(--panel); border:1px solid rgba(24,16,60,.12); border-radius:24px; box-shadow:0 18px 46px rgba(24,16,60,.14); display:flex; flex-direction:column; overflow:hidden; }
.composer-box textarea{ width:100%; border:0; outline:none; resize:none; padding:16px 18px 4px; font-size:16px; line-height:1.55; font-family:inherit; background:transparent; color:var(--text); min-height:52px; max-height:180px; }
.composer-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; }
.composer-left{ display:flex; align-items:center; gap:8px; }
.composer-right{ display:flex; align-items:center; gap:8px; }
.plus-btn{ width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:#F6F4FD; color:var(--violet-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.plus-btn:hover{ background:#ECE7FF; }
.plus-wrap{ position:relative; }
.plus-menu{ position:absolute; bottom:46px; left:0; z-index:50; background:#FFFFFF; border:1px solid rgba(24,16,60,.12); border-radius:14px; box-shadow:0 18px 44px rgba(24,16,60,.18); padding:6px; min-width:230px; }
.plus-item{ display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; padding:10px 12px; border-radius:10px; text-align:left; font-size:13px; color:var(--text); cursor:pointer; font-family:inherit; }
.plus-item svg{ width:18px; height:18px; stroke:currentColor; }
.plus-item:hover{ background:#F1ECFF; }
.plus-note{ margin-left:auto; font-size:10px; color:var(--muted); background:#F4F1FC; padding:2px 6px; border-radius:6px; }
.dialogue-btn{ display:flex; align-items:center; gap:6px; border-radius:12px; border:1px solid var(--line); background:#F6F4FD; color:var(--violet-ink); padding:9px 12px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.dialogue-btn svg{ width:16px; height:16px; }
.dialogue-btn.on{ background:var(--grad-btn); color:#fff; border-color:transparent; }
.dialogue-state{ font-size:10.5px; color:var(--muted); letter-spacing:.6px; font-weight:700; text-transform:uppercase; }
.mic-btn{ width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#F6F4FD; color:var(--violet-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mic-btn.rec{ background:linear-gradient(135deg,#EF4444,#B91C1C); color:#fff; border-color:#FCA5A5; }
.send-btn{ width:46px; height:46px; border-radius:14px; border:0; background:var(--grad-btn); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 26px rgba(124,92,255,.42); transition:transform .15s; }
.send-btn:hover{ transform:translateY(-1px); }
.meta-note{ font-size:10.5px; color:#5A3FE0; font-weight:700; }
.auth-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; padding:8px 16px 2px; font-size:11px; color:var(--muted); }
.auth-row input{ background:#FFFFFF; border:1px solid var(--line-2); color:var(--text); border-radius:10px; padding:8px 10px; font-size:12px; outline:none; width:140px; font-family:inherit; }
.auth-row input:focus{ border-color:var(--violet); }
.auth-row button{ border:1px solid rgba(124,92,255,.4); background:#F3EFFE; color:#4A2FE0; border-radius:10px; padding:8px 12px; font-size:12px; cursor:pointer; font-weight:700; font-family:inherit; }
.auth-row button.guest-btn{ background:var(--grad-btn) !important; color:#fff !important; border:0 !important; font-weight:800 !important; }
.model-note{ text-align:center; font-size:10.5px; color:var(--muted); padding:8px 0 14px; }

/* ---- responsive ---- */
@media (max-width: 980px){
  .demo-shell{ min-height:100vh; }
  .demo-side{ position:fixed; left:-280px; top:0; z-index:70; height:100vh; transition:left .25s ease; box-shadow:0 24px 60px rgba(0,0,0,.25); }
  .demo-side.open{ left:0; }
  .side-toggle{ display:flex; }
  .demo-top-title{ display:none; }
  .demo-topbar{ justify-content:flex-end; padding-right:14px; }
  .demo-empty{ gap:16px; }
  .demo-headline{ font-size:clamp(1.7rem,8vw,2.4rem); }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}