:root{
  --bg:#12100e;
  --surface:#1c1916;
  --surface-2:#26221e;
  --fg:#f3ece4;
  --muted:#9a8d80;
  --faint:#6e645a;
  --primary:#c96a3a;
  --primary-fg:#1a100c;
  --border:#3a332c;
  --user:#2a241f;
  --shadow-border:0 0 0 1px rgba(243,236,228,.08);
  --shadow-border-hover:0 0 0 1px rgba(243,236,228,.14);
  --quick:150ms;
  --fast:250ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --sidebar-w:288px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);overscroll-behavior:none}
body{
  font-family:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
button,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
button:disabled{cursor:default}
img{display:block;max-width:100%}
p{margin:0;text-wrap:pretty}
h1{margin:0;text-wrap:balance}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- shell ---------- */
.app{display:flex;height:100vh;height:100dvh;min-height:0;overflow:hidden}
.col{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}

/* ---------- sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  display:flex;flex-direction:column;min-height:0;
  background:var(--surface);border-right:1px solid rgba(58,51,44,.8);
}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px}
.sidebar-new{padding:0 12px}
.sidebar-list{
  margin-top:16px;flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:0 8px calc(24px + env(safe-area-inset-bottom));
}
.recent-label{padding:0 8px 8px;font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.empty-note{padding:0 8px;font-size:14px;color:var(--muted)}
.thread{position:relative}
.thread-btn{
  display:flex;align-items:center;width:100%;height:44px;
  padding:0 44px 0 12px;border-radius:12px;
  text-align:left;font-size:14px;color:var(--muted);
  transition:background-color var(--quick) var(--ease),color var(--quick) var(--ease);
}
.thread-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread.active .thread-btn{background:var(--surface-2);color:var(--fg)}
.thread-del{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:10px;color:var(--faint);
  transition:opacity var(--quick) var(--ease),background-color var(--quick) var(--ease),color var(--quick) var(--ease);
}
.thread-del:hover{background:var(--bg);color:var(--fg)}
@media (hover:hover) and (pointer:fine){
  .thread-btn:hover{background:rgba(38,34,30,.7);color:var(--fg)}
  .thread-del{opacity:0}
  .thread:hover .thread-del,.thread:focus-within .thread-del,.thread.active .thread-del{opacity:1}
}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand.compact{gap:8px}
.brand img{width:32px;height:32px;border-radius:999px;object-fit:cover;box-shadow:0 0 0 1px rgba(243,236,228,.15) inset}
.brand-text{min-width:0;line-height:1.2}
.brand-name{font-family:"Fraunces",ui-serif,Georgia,serif;font-size:18px;font-weight:500;letter-spacing:-.01em}
.brand-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;
  transition:background-color var(--quick) var(--ease),color var(--quick) var(--ease),transform var(--quick) var(--ease),box-shadow var(--quick) var(--ease);
}
.btn:active:not(:disabled){transform:scale(.98)}
.btn-primary{background:var(--primary);color:var(--primary-fg);width:100%}
.btn-primary:hover:not(:disabled){background:#d57644}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--fg)}
.btn-icon{width:40px;height:40px;padding:0;border-radius:12px}
.btn-send{
  width:36px;height:36px;padding:0;border-radius:999px;flex-shrink:0;
  background:var(--primary);color:var(--primary-fg);
  display:inline-flex;align-items:center;justify-content:center;
  transition:opacity var(--quick) var(--ease),transform var(--quick) var(--ease);
}
.btn-send:disabled{opacity:.4}
.btn-send:active:not(:disabled){transform:scale(.94)}

/* ---------- header ---------- */
.topbar{
  display:flex;align-items:center;gap:8px;height:56px;flex-shrink:0;
  padding:0 12px;border-bottom:1px solid rgba(58,51,44,.8);
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
}
.topbar .spacer{margin-left:auto}
.menu-btn{display:inline-flex}

/* ---------- messages ---------- */
.stage{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.scroller{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.thread-wrap{
  display:flex;flex-direction:column;gap:24px;
  width:100%;max-width:704px;margin:0 auto;padding:24px 16px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
.row-user{display:flex;justify-content:flex-end}
.bubble{
  max-width:min(28rem,86%);padding:10px 16px;
  border-radius:20px 20px 6px 20px;background:var(--user);
  font-size:16px;line-height:1.6;box-shadow:var(--shadow-border);
  overflow-wrap:anywhere;white-space:pre-wrap;
}
.row-bot{display:flex;gap:12px;scroll-margin-top:16px}
.row-bot .avatar{
  width:32px;height:32px;flex-shrink:0;margin-top:2px;
  border-radius:999px;object-fit:cover;box-shadow:0 0 0 1px rgba(243,236,228,.15) inset;
}
.bot-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:12px}
.bot-text{font-size:16px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}

.meme{margin:0;overflow:hidden;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-border)}
.meme-frame{position:relative;background:var(--surface-2);min-height:120px}
.meme-frame img{width:100%;max-height:264px;object-fit:contain;margin:0 auto}
.meme-frame.loading::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(243,236,228,.05),transparent);
  animation:sweep 1.2s linear infinite;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.meme-caps{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:12px;pointer-events:none;
}
.cap{
  font-family:Impact,Haettenschweiler,"Arial Black",sans-serif;
  text-transform:uppercase;letter-spacing:.04em;color:#fff;
  font-size:20px;line-height:1.1;text-align:center;font-weight:400;
  text-shadow:-2px -2px 0 #111,2px -2px 0 #111,-2px 2px 0 #111,2px 2px 0 #111,0 3px 8px rgba(0,0,0,.45);
}
.meme-foot{
  display:flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;
}
.meme-foot .title{color:var(--muted);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meme-foot .kind{color:var(--faint);margin-left:auto;flex-shrink:0}
.swap{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 10px;border-radius:999px;flex-shrink:0;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  transition:background-color var(--quick) var(--ease),color var(--quick) var(--ease);
}
.swap:hover{background:var(--surface-2);color:var(--fg)}
.swap.spin svg{animation:spin .6s linear}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- thinking ---------- */
.thinking{display:flex;gap:12px;scroll-margin-top:16px}
.thinking .line{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.dots{display:inline-flex;gap:3px}
.dot{width:4px;height:4px;border-radius:999px;background:var(--primary);animation:pulse-soft 1.1s ease-in-out infinite}
.dot:nth-child(2){animation-delay:.15s}
.dot:nth-child(3){animation-delay:.3s}
.skeleton{
  margin-top:12px;height:160px;width:100%;max-width:24rem;
  border-radius:20px;background:var(--surface);animation:pulse-soft 1.8s ease-in-out infinite;
}
@keyframes pulse-soft{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- empty state ---------- */
.empty{
  min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;max-width:512px;margin:0 auto;padding:32px 20px;
}
.empty img{width:96px;height:96px;border-radius:24px;object-fit:cover;box-shadow:0 0 0 1px rgba(243,236,228,.12) inset}
.empty h1{margin-top:20px;font-family:"Fraunces",ui-serif,Georgia,serif;font-size:38px;font-weight:500;letter-spacing:-.02em}
.empty .tagline{margin-top:8px;max-width:24rem;text-align:center;color:var(--muted)}
.starters{display:grid;grid-template-columns:1fr;gap:8px;width:100%;margin-top:28px}
.starter{
  min-height:48px;padding:14px 16px;border-radius:20px;background:var(--surface);
  text-align:left;font-size:14px;color:var(--fg);box-shadow:var(--shadow-border);
  transition:box-shadow var(--quick) var(--ease),transform var(--quick) var(--ease);
}
.starter:hover{box-shadow:var(--shadow-border-hover)}
.starter:active{transform:scale(.98)}
.shuffle{
  margin-top:14px;height:36px;padding:0 14px;border-radius:999px;
  font-size:13px;color:var(--faint);
  display:inline-flex;align-items:center;gap:6px;
  transition:color var(--quick) var(--ease)}
.shuffle:hover{color:var(--muted)}

.error{padding:0 16px 8px;text-align:center;font-size:14px;color:var(--primary)}

/* ---------- composer ---------- */
.composer{
  flex-shrink:0;border-top:1px solid rgba(58,51,44,.8);background:var(--bg);padding:12px;
  padding-bottom:max(12px,env(safe-area-inset-bottom));
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
}
.composer-inner{
  display:flex;align-items:flex-end;gap:8px;width:100%;max-width:704px;margin:0 auto;
  padding:8px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-border);
}
#prompt{
  flex:1;min-width:0;min-height:40px;max-height:min(144px,26vh);
  padding:9px 12px;border:0;background:transparent;resize:none;outline:none;
  font-size:16px;line-height:1.4;
}
#prompt::placeholder{color:var(--faint)}
#prompt:disabled{opacity:.5}

/* ---------- drawer ---------- */
.scrim{
  position:fixed;inset:0;z-index:40;background:rgba(18,16,14,.7);
  opacity:0;pointer-events:none;transition:opacity var(--fast) var(--ease);
}
body.menu-open .scrim{opacity:1;pointer-events:auto}

@media (max-width:767px){
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;z-index:50;
    transform:translateX(-100%);transition:transform var(--fast) var(--ease);
    box-shadow:0 0 40px rgba(0,0,0,.5);width:min(288px,84vw);
    padding-left:env(safe-area-inset-left);
  }
  body.menu-open .sidebar{transform:none}
  .empty h1{font-size:34px}
  .cap{font-size:18px}
}
@media (min-width:768px){
  .scrim{display:none}
  .menu-btn{display:none}
  .close-btn{display:none}
  .topbar{padding-left:24px;padding-right:24px}
  .thread-wrap{padding-left:24px;padding-right:24px}
  .composer{padding-left:24px;padding-right:24px}
  .starters{grid-template-columns:1fr 1fr}
  .empty img{width:112px;height:112px}
  .empty h1{font-size:44px}
  .cap{font-size:24px}
  .meme-caps{padding:16px}
}

/* ---------- motion ---------- */
.rise-in{animation:rise-in var(--fast) var(--ease) both}
.stagger-1{animation-delay:40ms}
.stagger-2{animation-delay:90ms}
.stagger-3{animation-delay:140ms}
@keyframes rise-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}