/* Shilo Workspace — Premium Studio  v1 */
:root{
  --bg: #08080A;
  --bg-soft:#0E0E10;
  --surface:#121214;
  --surface-2:#17171A;
  --surface-3:#1C1C1F;
  --border: rgba(255,255,255,0.073);
  --border-strong: rgba(255,255,255,0.11);
  --border-focus: rgba(255,255,255,0.16);
  --text: #F5F5F3;
  --text-2:#A8A8AE;
  --text-3:#7A7A81;
  --muted:#6B6B71;
  --accent:#FFFFFF;
  --accent-text:#0A0A0B;
  --radius-xl:22px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-pill:999px;
  --shadow-soft: 0 8px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-card: 0 20px 60px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  --ring: 0 0 0 1px rgba(255,255,255,0.12), 0 0 24px rgba(255,255,255,0.08);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --composer-w: 760px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scrollbar-gutter:stable}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(255,255,255,0.06), transparent 65%),
    radial-gradient(700px 700px at 92% 18%, rgba(255,255,255,0.032), transparent 60%),
    radial-gradient(800px 600px at 12% 92%, rgba(255,255,255,0.025), transparent 65%);
  opacity:1;
}
a{color:inherit; text-decoration:none}
button{font:inherit}
img{display:block; max-width:100%}

/* scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1); border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15)}
*{scrollbar-width:thin; scrollbar-color: rgba(255,255,255,0.12) transparent}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  background: rgba(8,8,10,0.72);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: 1240px;
  margin:0 auto;
  padding: 12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  letter-spacing:-0.02em;
}
.brand-mark{
  width:28px; height:28px; border-radius:9px;
  background: #fff;
  display:grid; place-items:center;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 16px rgba(0,0,0,0.25);
  position:relative;
  overflow:hidden;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:1px;
  border-radius:8px;
  background: radial-gradient(120% 120% at 30% 20%, #fff, #E8E8E6 55%, #D6D6D2);
}
.brand-mark::before{
  content:"◆";
  position:relative; z-index:1;
  font-size:11px; color:#0A0A0B; opacity:0.9;
  transform: translateY(-0.5px);
}
.brand-type{font-weight:600; font-size:14.5px; letter-spacing:-0.03em}
.brand-dot{width:3px; height:3px; border-radius:50%; background: var(--text-3); opacity:0.9}
.brand-sub{font-size:12px; color: var(--text-3); font-weight:500; letter-spacing:0.02em}
.topbar-actions{display:flex; align-items:center; gap:10px}
.topbar-divider{width:1px; height:20px; background: var(--border); margin:0 2px}

.key-indicator{
  display:flex; align-items:center; gap:9px;
  padding:6px 10px 6px 11px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  font-size:12px; color: var(--text-2);
  line-height:1;
  transition: background .18s, border-color .18s, transform .12s;
  user-select:none;
}
.key-indicator:hover{background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.13)}
.key-indicator:active{transform: scale(0.97)}
.key-indicator:focus-visible{outline:2px solid rgba(255,255,255,0.85); outline-offset:2px}
.key-indicator-label{font-weight:600; letter-spacing:0.06em; text-transform:uppercase; font-size:10.5px; color: var(--text-3)}
.key-dots{display:flex; gap:4px; align-items:center}
.key-dot{
  width:7px; height:7px; border-radius:50%;
  background: rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.08);
  transition: background .22s, box-shadow .22s, transform .22s;
}
.key-dot.is-ok{background:#22c55e; border-color: rgba(34,197,94,0.5); box-shadow:0 0 10px rgba(34,197,94,0.45)}
.key-dot.is-busy{background:#F59E0B; border-color: rgba(245,158,11,0.5); box-shadow:0 0 10px rgba(245,158,11,0.35); animation: pulseBusy 1.2s ease-in-out infinite}
.key-dot.is-cooldown{background:#EF4444; border-color: rgba(239,68,68,0.45); box-shadow:0 0 10px rgba(239,68,68,0.35); opacity:0.9}
.key-dot.is-cooldown::after{content:""}
@keyframes pulseBusy{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.key-indicator-text{font-variant-numeric: tabular-nums; min-width: 64px; text-align:right; color: var(--text-2)}

.icon-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size:13px; font-weight:500;
  cursor:pointer;
  transition: background .18s, border-color .18s, transform .12s, opacity .18s;
  white-space:nowrap;
}
.icon-btn:hover{background: rgba(255,255,255,0.09); border-color: var(--border-strong)}
.icon-btn:active{transform: scale(0.98)}
.icon-btn--ghost{padding:0 10px; width:36px; justify-content:center}
.icon-btn--small{height:32px; padding:0 10px; font-size:12px}
.history-count{
  background:#fff; color:#0A0A0B;
  font-size:11px; font-weight:700;
  padding:1px 6px; border-radius:999px; min-width:18px; text-align:center;
  line-height:1.6;
}

/* Workspace */
.workspace{
  max-width: 1240px;
  margin:0 auto;
  padding: 0 20px 220px;
  min-height: calc(100vh - 53px);
  display:flex; flex-direction:column; align-items:center;
}
.conversation{
  width:100%; max-width: var(--composer-w);
  padding-top: 54px;
  display:flex; flex-direction:column; gap:28px;
}

/* Hero */
.hero{
  padding: 28px 0 8px;
  animation: heroIn .7s var(--ease-out) both;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--text-3); font-weight:600;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
}
.eyebrow-dot{width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,0.45)}
.hero-title{
  margin:18px 0 10px;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight:400;
  font-size: clamp(42px, 7vw, 64px);
  line-height:0.96;
  letter-spacing:-0.04em;
  color: var(--text);
}
.hero-title-line{ display:block; overflow:hidden }
.hero-title-line-1{
  animation: revealLine .9s var(--ease-out) .12s both;
}
.hero-subtitle{
  margin:0;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height:1.35;
  color: var(--text-2);
  letter-spacing:-0.02em;
  font-weight:400;
  animation: fadeUp .7s var(--ease-out) .28s both;
}
.hero-suggestions{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:22px;
  animation: fadeUp .7s var(--ease-out) .34s both;
}
.suggestion{
  appearance:none;
  padding:9px 13px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color: var(--text-2);
  font-size:13px; font-weight:500;
  cursor:pointer;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
  text-align:left;
  line-height:1.3;
}
.suggestion:hover{background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.13); color: var(--text)}
.suggestion:active{transform: scale(0.98)}
.hero-hint{
  margin:16px 0 0;
  font-size:12.5px; color: var(--text-3);
  letter-spacing:0.01em;
  animation: fadeUp .7s var(--ease-out) .42s both;
}

@keyframes heroIn{ from{opacity:0; transform: translateY(8px)} to{opacity:1; transform:none}}
@keyframes revealLine{ from{transform: translateY(100%); opacity:0} to{transform:none; opacity:1}}
@keyframes fadeUp{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none}}

/* Thread */
.thread{
  display:flex; flex-direction:column; gap:22px;
  padding-bottom: 8px;
}
.message{
  display:flex; flex-direction:column; gap:12px;
  animation: msgIn .45s var(--ease-out) both;
}
@keyframes msgIn{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none}}

.msg-role{
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  font-weight:600; color: var(--text-3);
}
.msg-role-dot{width:5px; height:5px; border-radius:50%; background: currentColor; opacity:0.9}
.msg-role--user{color: var(--text-2)}
.msg-role--assistant{color: var(--text-3)}
.msg-prompt{
  margin:0;
  font-size:15.5px; line-height:1.55;
  color: var(--text);
  letter-spacing:-0.01em;
  white-space:pre-wrap; word-break:break-word;
  padding:14px 16px;
  background: rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  max-width: 100%;
}
.msg-meta{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:12px; color: var(--text-3);
}
.meta-pill{
  padding:4px 8px; border-radius:999px;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);
  font-size:11px; letter-spacing:0.02em;
  color: var(--text-2);
}
.msg-ref-thumb{
  width:72px; height:72px; border-radius:12px; object-fit:cover;
  border:1px solid rgba(255,255,255,0.08);
}

/* Generation card */
.gen-card{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  background: var(--surface-2);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-soft);
}
.gen-card-media{
  position:relative;
  background: #0B0B0D;
  min-height: 260px;
  display:grid; place-items:center;
  overflow:hidden;
}
.gen-card-media img{
  width:100%; height:auto; display:block;
  opacity:0; transform: scale(0.985);
  transition: opacity .55s var(--ease-out), transform .6s var(--ease-out);
}
.gen-card-media img.is-loaded{opacity:1; transform: scale(1)}
.gen-card-shimmer{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
    #111113;
  background-size: 200% 100%, 100% 100%, auto;
  animation: shimmerMove 1.35s linear infinite;
}
@keyframes shimmerMove{0%{background-position: -80% 0, 0 0, 0 0}100%{background-position: 120% 0, 0 0, 0 0}}
.gen-loader{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background: rgba(10,10,12,0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align:center;
  padding:24px;
}
.gen-loader-dots{display:flex; gap:6px; align-items:center}
.gen-loader-dots span{
  width:6px; height:6px; border-radius:50%; background:#fff;
  opacity:0.9;
  animation: dotBounce 1.05s ease-in-out infinite;
}
.gen-loader-dots span:nth-child(2){animation-delay:.14s}
.gen-loader-dots span:nth-child(3){animation-delay:.28s}
@keyframes dotBounce{0%,80%,100%{transform: translateY(0); opacity:0.65} 40%{transform: translateY(-7px); opacity:1}}
.gen-loader-text{font-size:13px; color: var(--text-2); letter-spacing:-0.01em}
.gen-loader-sub{font-size:12px; color: var(--text-3); margin-top:2px}
.gen-progress{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: rgba(255,255,255,0.08);
  overflow:hidden;
}
.gen-progress-bar{
  height:100%; width:42%;
  background:#fff;
  border-radius:999px;
  animation: progressSlide 1.15s var(--ease-inout) infinite;
}
@keyframes progressSlide{0%{transform: translateX(-100%)}100%{transform: translateX(280%)}}

.gen-card-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 12px 12px 14px;
  background: rgba(255,255,255,0.02);
  border-top:1px solid rgba(255,255,255,0.06);
  flex-wrap:wrap;
}
.gen-card-info{ display:flex; flex-direction:column; gap:2px; min-width:0}
.gen-card-title{font-size:13px; font-weight:600; color: var(--text); letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 32ch}
.gen-card-sub{font-size:11.5px; color: var(--text-3); font-variant-numeric: tabular-nums}
.gen-card-actions{display:flex; gap:8px; align-items:center}
.btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 14px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:13px; font-weight:600; letter-spacing:-0.01em;
  cursor:pointer;
  transition: background .18s, border-color .18s, transform .12s, opacity .18s, color .18s;
  white-space:nowrap;
}
.btn:active{transform: scale(0.98)}
.btn--primary{background:#fff; color:#0A0A0B; border-color:#fff}
.btn--primary:hover{background:#F2F2F2}
.btn--ghost{background: rgba(255,255,255,0.07); color: var(--text); border-color: rgba(255,255,255,0.09)}
.btn--ghost:hover{background: rgba(255,255,255,0.11)}
.btn--subtle{background: transparent; color: var(--text-2); border-color: rgba(255,255,255,0.08)}
.btn--subtle:hover{color: var(--text); border-color: rgba(255,255,255,0.14)}
.btn--icon{width:34px; padding:0}

/* Error card */
.error-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 14px;
  border-radius: 14px;
  background: rgba(239,68,68,0.08);
  border:1px solid rgba(239,68,68,0.18);
}
.error-icon{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(239,68,68,0.16);
  color:#FCA5A5; flex:0 0 auto;
}
.error-title{font-size:13.5px; font-weight:600; color:#FECACA; margin:0 0 2px; letter-spacing:-0.01em}
.error-desc{font-size:12.5px; line-height:1.5; color:#FCA5A5; margin:0}
.error-actions{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}

/* Composer dock */
.composer-dock{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:center;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(8,8,10,0.96) 22%, rgba(8,8,10,0.72) 58%, transparent);
  backdrop-filter: blur(0px);
  z-index:20;
}
.composer-shell{
  width:100%; max-width: var(--composer-w);
  display:flex; flex-direction:column; gap:8px;
}
.ref-preview{
  align-self:flex-start;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 14px;
  padding:6px;
  display:flex;
  animation: refIn .28s var(--ease-out) both;
}
@keyframes refIn{from{opacity:0; transform: translateY(6px) scale(0.98)} to{opacity:1; transform:none}}
.ref-preview[hidden]{display:none !important}
.ref-preview-inner{
  display:flex; align-items:center; gap:10px;
  padding-right:4px;
}
.ref-preview-inner img{
  width:44px; height:44px; border-radius:10px; object-fit:cover;
  border:1px solid rgba(255,255,255,0.08);
}
.ref-preview-meta{display:flex; flex-direction:column; gap:1px; min-width:0}
.ref-preview-meta span:first-child{font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 18ch}
.ref-preview-meta span:last-child{font-size:11px; color: var(--text-3)}
.ref-remove{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  color: var(--text-2);
  cursor:pointer; margin-left:6px;
  transition: background .18s, color .18s;
}
.ref-remove:hover{background: rgba(255,255,255,0.13); color: var(--text)}

.composer{
  background: rgba(20,20,23,0.82);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border:1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 1px rgba(255,255,255,0.02) inset;
  padding:8px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.composer:focus-within{
  border-color: rgba(255,255,255,0.14);
  box-shadow: var(--ring), 0 18px 50px rgba(0,0,0,0.58);
}
.composer-top{
  display:flex; align-items:flex-end; gap:8px;
  padding:4px 4px 2px 4px;
}
.attach-btn{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color: var(--text-2);
  cursor:pointer; flex:0 0 auto;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.attach-btn:hover{background: rgba(255,255,255,0.10); color: var(--text); border-color: rgba(255,255,255,0.12)}
.attach-btn:active{transform: scale(0.97)}
.attach-btn.has-file{background:#fff; color:#0A0A0B; border-color:#fff}

.prompt-wrap{flex:1; min-width:0; position:relative; display:flex; align-items:center}
.prompt-input{
  width:100%;
  min-height:40px; max-height: 132px;
  padding:10px 6px;
  background: transparent;
  border:0; outline:0;
  color: var(--text);
  font-size:15px; line-height:1.45;
  resize:none; overflow-y:auto;
  font-family: Inter, sans-serif;
  letter-spacing:-0.01em;
}
.prompt-input::placeholder{color: rgba(245,245,243,0.38)}
.prompt-input:focus{outline:none}

.generate-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 14px 0 16px;
  border-radius:999px;
  background:#fff; color:#0A0A0B;
  border:1px solid #fff;
  font-size:13.5px; font-weight:650; letter-spacing:-0.02em;
  cursor:pointer; flex:0 0 auto;
  transition: background .18s, transform .12s, opacity .18s, box-shadow .18s;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.generate-btn:hover{background:#F3F3F1}
.generate-btn:active{transform: scale(0.98)}
.generate-btn:disabled{opacity:0.55; cursor:not-allowed; transform:none}
.generate-btn-icon{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background: #0A0A0B; color:#fff}
.generate-btn.is-loading .generate-btn-icon{ animation: spin 0.9s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}}
.generate-btn-shortcut{
  font-size:11px; font-weight:600;
  padding:2px 6px; border-radius:6px;
  background: rgba(10,10,11,0.08);
  border:1px solid rgba(10,10,11,0.08);
  color: rgba(10,10,11,0.55);
  line-height:1;
}
.generate-btn.is-loading .generate-btn-shortcut{opacity:0.5}

.composer-controls{
  display:flex; align-items:center; gap:12px;
  padding:8px 6px 4px;
  border-top:1px solid rgba(255,255,255,0.06);
  margin-top:6px;
  flex-wrap:wrap;
}
.control-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.control-label{
  font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  font-weight:650; color: var(--text-3);
}
.pill-row{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.pill{
  appearance:none;
  height:28px; padding:0 11px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color: var(--text-2);
  font-size:12px; font-weight:600; letter-spacing:0.01em;
  cursor:pointer;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
  white-space:nowrap;
}
.pill[aria-checked="true"], .pill.is-active{
  background:#fff; color:#0A0A0B; border-color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.pill:hover{border-color: rgba(255,255,255,0.13)}
.pill:active{transform: scale(0.97)}
.control-divider{width:1px; height:18px; background: rgba(255,255,255,0.08); margin:0 2px}
.composer-meta{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:11.5px; color: var(--text-3)}
.composer-meta kbd{
  display:inline-grid; place-items:center;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:5px;
  background: rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);
  border-bottom-color: rgba(255,255,255,0.12);
  font-family: JetBrains Mono, ui-monospace, monospace;
  font-size:10px; color: var(--text-2);
  line-height:1;
}
.composer-footnote{
  margin:0; text-align:center;
  font-size:11px; color: rgba(255,255,255,0.32);
  letter-spacing:0.01em; padding:0 8px;
}

/* History */
.history-panel{
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width: 92vw;
  background: rgba(12,12,14,0.96);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-left:1px solid rgba(255,255,255,0.08);
  box-shadow: -20px 0 60px rgba(0,0,0,0.45);
  z-index:40;
  display:flex; flex-direction:column;
  transform: translateX(100%);
  transition: transform .42s var(--ease-out);
  overflow:hidden;
}
.history-panel.is-open{transform:none}
.history-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.history-title{margin:0; font-size:15px; font-weight:650; letter-spacing:-0.02em}
.history-subtitle{font-size:12px; color: var(--text-3)}
.history-actions{display:flex; align-items:center; gap:8px}
.history-tools{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.text-btn{
  appearance:none;
  height:28px; padding:0 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color: var(--text-2); font-size:12px; font-weight:600;
  cursor:pointer;
}
.text-btn:hover{color: var(--text); background: rgba(255,255,255,0.09)}
.text-btn--danger{color:#FCA5A5; border-color: rgba(239,68,68,0.18); background: rgba(239,68,68,0.08)}
.text-btn--danger:hover{background: rgba(239,68,68,0.13); color:#FECACA}
.history-grid{
  flex:1; overflow:auto;
  padding:14px 14px 20px;
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
  align-content:start;
}
.history-empty{
  padding:24px 16px; text-align:center;
  font-size:13px; color: var(--text-3); line-height:1.5;
}
.history-item{
  position:relative;
  border-radius:14px; overflow:hidden;
  background: var(--surface-2);
  border:1px solid rgba(255,255,255,0.07);
  cursor:pointer;
  transition: transform .18s, border-color .18s;
  animation: histIn .35s var(--ease-out) both;
}
@keyframes histIn{from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none}}
.history-item:hover{transform: translateY(-1px); border-color: rgba(255,255,255,0.12)}
.history-item img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.history-item-meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 8px 7px;
  background: linear-gradient(to top, rgba(0,0,0,0.68), transparent);
  display:flex; flex-direction:column; gap:2px;
}
.history-item-prompt{font-size:11px; line-height:1.3; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.history-item-time{font-size:10.5px; color: rgba(255,255,255,0.65)}
.history-backdrop{
  position:fixed; inset:0; z-index:39;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(2px);
  animation: fadeIn .2s ease both;
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:50;
  display:none;
}
.lightbox.is-open{display:block}
.lightbox-backdrop{
  position:absolute; inset:0;
  background: rgba(4,4,6,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity:0; transition: opacity .28s ease;
}
.lightbox.is-open .lightbox-backdrop{opacity:1}
.lightbox-inner{
  position:relative;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:14px;
  gap:14px;
  opacity:0; transform: scale(0.985) translateY(6px);
  transition: opacity .34s var(--ease-out), transform .42s var(--ease-out);
}
.lightbox.is-open .lightbox-inner{opacity:1; transform:none}
.lightbox-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width: 1200px; width:100%; margin:0 auto;
  color: #fff;
}
.lightbox-caption{
  font-size:13px; color: rgba(255,255,255,0.82);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.lightbox-actions{display:flex; gap:8px; align-items:center}
.lightbox-btn{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 16px;
  border-radius:999px;
  background:#fff; color:#0A0A0B; border:1px solid #fff;
  font-size:13px; font-weight:650; cursor:pointer;
}
.lightbox-btn--icon{width:38px; padding:0; justify-content:center; background: rgba(255,255,255,0.10); color:#fff; border-color: rgba(255,255,255,0.12); backdrop-filter: blur(10px)}
.lightbox-img{
  flex:1; min-height:0;
  max-width: min(1200px, 96vw);
  max-height: calc(100vh - 88px);
  margin:0 auto;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  background:#0B0B0D;
  border:1px solid rgba(255,255,255,0.08);
}

/* Drag overlay */
.drag-overlay{
  position:fixed; inset:0; z-index:60;
  display:none; place-items:center;
  background: rgba(8,8,10,0.62);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  padding:20px;
}
.drag-overlay.is-active{display:grid}
.drag-card{
  width:min(420px, 90vw);
  background: rgba(18,18,20,0.9);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:22px;
  padding:28px 22px;
  text-align:center;
  box-shadow: var(--shadow-card);
  transform: scale(0.98);
  animation: dragPop .22s var(--ease-out) both;
}
@keyframes dragPop{to{transform: none}}
.drag-icon{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background: #fff; color:#0A0A0B;
  margin:0 auto 14px;
}
.drag-title{margin:0; font-size:16px; font-weight:650; letter-spacing:-0.02em}
.drag-subtitle{margin:4px 0 0; font-size:13px; color: var(--text-3)}

/* Toast */
.toast-region{
  position:fixed; left:50%; bottom:92px;
  transform: translateX(-50%);
  z-index:45;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
  width:min(420px, calc(100vw - 24px));
}
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px 10px 12px;
  border-radius:999px;
  background: rgba(24,24,27,0.96);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  font-size:13px; color: var(--text);
  backdrop-filter: blur(14px);
  animation: toastIn .32s var(--ease-out) both;
  max-width:100%;
}
.toast--error{ border-color: rgba(239,68,68,0.22); background: rgba(32,18,18,0.96)}
@keyframes toastIn{from{opacity:0; transform: translateY(8px) scale(0.98)} to{opacity:1; transform:none}}
.toast-dot{width:6px; height:6px; border-radius:50%; background: #fff; flex:0 0 auto}
.toast--error .toast-dot{background:#EF4444}

/* Responsive */
@media (max-width: 760px){
  .topbar-inner{padding:10px 14px}
  .brand-sub{display:none}
  .key-indicator-text{display:none}
  .key-indicator{padding:6px 8px}
  .workspace{padding:0 14px 220px}
  .conversation{padding-top:28px}
  .hero{padding:18px 0 4px}
  .composer-dock{padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .composer{border-radius: 20px; padding:6px}
  .composer-controls{gap:8px; padding-top:8px}
  .control-divider{display:none}
  .composer-meta{display:none}
  .gen-card-media{min-height: 220px}
  .hide-mobile{display:none}
  .history-panel{width:100%; max-width: 100vw}
  .lightbox-inner{padding:10px}
  .lightbox-img{border-radius:14px; max-height: calc(100vh - 76px)}
}

@media (max-width: 420px){
  .hero-suggestions{gap:6px}
  .suggestion{font-size:12.5px; padding:8px 11px}
  .pill{height:26px; padding:0 9px; font-size:11.5px}
  .generate-btn{padding:0 12px 0 12px}
  .generate-btn-label{display:none}
  .gen-card-actions{width:100%}
  .gen-card-actions .btn{flex:1}
}

/* Focus */
:focus-visible{outline:2px solid rgba(255,255,255,0.85); outline-offset:2px; border-radius:6px}
.composer:focus-within{outline:none}
.prompt-input:focus-visible{outline:none}
.pill:focus-visible, .btn:focus-visible, .icon-btn:focus-visible{outline-offset:2px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .gen-card-media img{transition:none}
  .hero-title-line-1{animation:none}
}

/* ── Polish: Nano Banana Pro — premium tier ── */
.hero-eyebrow{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035));
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 18px rgba(0,0,0,0.22);
  letter-spacing:0.13em;
  font-size:11px;
  padding:7px 12px 7px 10px;
}
.hero-eyebrow .eyebrow-dot{
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,0.55), 0 0 22px rgba(255,255,255,0.18);
}
.brand-mark{
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 10px 22px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.brand-mark::before{ font-size:12px; letter-spacing:0.02em }
.brand-sub{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  padding:2px 7px;
  border-radius:999px;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:650;
  color: rgba(255,255,255,0.72);
}
.composer{
  background: linear-gradient(180deg, rgba(22,22,25,0.92), rgba(16,16,19,0.88));
  border-color: rgba(255,255,255,0.095);
  box-shadow: 0 22px 60px rgba(0,0,0,0.62), 0 1px 0 rgba(255,255,255,0.07) inset, 0 0 0 1px rgba(255,255,255,0.025) inset, 0 0 40px rgba(255,255,255,0.04);
}
.composer:focus-within{
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 28px rgba(255,255,255,0.09), 0 22px 60px rgba(0,0,0,0.62);
}
.suggestion{
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.075);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .22s var(--ease-out), border-color .22s, transform .18s var(--ease-out), box-shadow .22s, color .18s;
}
.suggestion:hover{
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.suggestion:active{ transform: translateY(0) scale(0.99) }
.gen-card{
  border-color: rgba(255,255,255,0.075);
  box-shadow: 0 12px 36px rgba(0,0,0,0.48), 0 1px 0 rgba(255,255,255,0.06) inset;
  transition: border-color .22s, box-shadow .28s var(--ease-out), transform .28s var(--ease-out);
}
.gen-card:hover{
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 18px 48px rgba(0,0,0,0.56), 0 1px 0 rgba(255,255,255,0.07) inset;
}
.gen-card-media{
  background: radial-gradient(700px 320px at 50% 0%, rgba(255,255,255,0.045), transparent 68%), #0B0B0D;
}
.msg-prompt{
  background: linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.038));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 18px rgba(0,0,0,0.22);
}
.topbar{
  background: rgba(8,8,10,0.78);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border-bottom-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.key-indicator{
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.045));
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 16px rgba(0,0,0,0.22);
}
.composer-footnote strong{ color: rgba(255,255,255,0.62) }
.pill{
  transition: background .2s var(--ease-out), border-color .2s, color .18s, transform .14s, box-shadow .2s;
}
.pill.is-active{ box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset, 0 4px 12px rgba(255,255,255,0.08) }
.error-card{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.history-panel{ box-shadow: -24px 0 72px rgba(0,0,0,0.52), 0 1px 0 rgba(255,255,255,0.04) inset }
.lightbox-backdrop{ background: rgba(4,4,6,0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }

/* ── Ambient & Grain ── */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; opacity:0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift{ 0%,100%{transform:translate(0,0)} 10%{transform:translate(-1%,-1%)} 20%{transform:translate(1%,1%)} 30%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-1%)} 70%{transform:translate(-1%,1%)} }

/* ── Topbar entrance ── */
.topbar{ animation: topbarIn .65s var(--ease-out) both; }
@keyframes topbarIn{ from{transform:translateY(-100%); opacity:0} to{transform:none; opacity:1} }
.brand{ animation: brandIn .6s var(--ease-out) .08s both; }
@keyframes brandIn{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
.brand-mark{
  background: #1A1F33 url("icon.png") center / 72% no-repeat;
  border: 1px solid rgba(255,255,255,0.09);
  overflow:hidden;
}
.brand-mark::before{ content:none }
.brand-mark::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-140%);
  animation: brandShine 7s var(--ease-out) 1.2s infinite;
}
@keyframes brandShine{ 0%{transform:translateX(-140%)} 18%{transform:translateX(140%)} 100%{transform:translateX(140%)} }
.brand-type{ position:relative }
.brand-type::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  opacity:0; transform:scaleX(0.6); transition: opacity .3s, transform .4s var(--ease-out);
}
.brand:hover .brand-type::after{ opacity:1; transform:scaleX(1) }

/* ── Hero polish ── */
.hero{ position:relative; isolation:isolate }
.hero::before{
  content:"";
  position:absolute; left:50%; top:22%; width:720px; height:420px; transform:translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(120,130,255,0.07), transparent 68%),
              radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.045), transparent 62%);
  filter: blur(28px); pointer-events:none; z-index:-1;
  animation: orbFloat 12s var(--ease-inout) infinite alternate;
}
@keyframes orbFloat{ 0%{transform:translateX(-50%) translateY(0) scale(1)} 100%{transform:translateX(-50%) translateY(-14px) scale(1.04)} }
.hero-eyebrow{ animation: eyebrowIn .7s var(--ease-out) both; }
@keyframes eyebrowIn{ from{opacity:0; transform:translateY(6px) scale(0.98)} to{opacity:1; transform:none} }
.hero-title{
  background: linear-gradient(180deg, #fff 42%, #d4d4d8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.08));
  animation: titleShine 9s ease 2s infinite;
}
@keyframes titleShine{ 0%,88%,100%{filter:drop-shadow(0 1px 0 rgba(255,255,255,0.08)) brightness(1)} 92%{filter:drop-shadow(0 0 12px rgba(255,255,255,0.22)) brightness(1.08)} }
.hero-title-line-1{ position:relative }
.hero-subtitle{ position:relative }
.hero-subtitle::after{
  content:""; position:absolute; left:0; bottom:-8px; width:32px; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), transparent);
  animation: subtitleLine .8s var(--ease-out) .9s both;
}
@keyframes subtitleLine{ from{transform:scaleX(0); opacity:0} to{transform:scaleX(1); opacity:1} }
.suggestion{ position:relative; overflow:hidden }
.suggestion::before{
  content:""; position:absolute; inset:0; border-radius:999px;
  background: radial-gradient(220px 80px at var(--mx,50%) 50%, rgba(255,255,255,0.08), transparent 70%);
  opacity:0; transition: opacity .25s;
}
.suggestion:hover::before{ opacity:1 }
.suggestion{ animation: suggestionIn .5s var(--ease-out) both; }
.suggestion:nth-child(1){ animation-delay:.38s } .suggestion:nth-child(2){ animation-delay:.46s } .suggestion:nth-child(3){ animation-delay:.54s } .suggestion:nth-child(4){ animation-delay:.62s }
@keyframes suggestionIn{ from{opacity:0; transform:translateY(8px) scale(0.98)} to{opacity:1; transform:none} }
.hero-hint{ position:relative; display:inline-flex; align-items:center; gap:8px }
.hero-hint::before{ content:"↓"; font-size:11px; opacity:0.5; animation: hintBounce 1.9s ease-in-out infinite }
@keyframes hintBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }

/* ── Composer dock polish ── */
.composer-dock{ animation: dockIn .7s var(--ease-out) .35s both; }
@keyframes dockIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.composer{ position:relative; overflow:hidden }
.composer::before{
  content:""; position:absolute; inset:-1px; border-radius: inherit; padding:1px;
  background: linear-gradient(120deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 30%, rgba(120,130,255,0.14) 68%, rgba(255,255,255,0.06));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  opacity:0; transition: opacity .35s;
  pointer-events:none;
}
.composer:focus-within::before{ opacity:1 }
.composer::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(520px 120px at 50% -20%, rgba(255,255,255,0.06), transparent 70%);
  opacity:0.8;
}
.generate-btn{ position:relative; overflow:hidden; isolation:isolate }
.generate-btn::before{
  content:""; position:absolute; inset:0; border-radius:999px;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.72) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .65s var(--ease-out);
  mix-blend-mode: overlay; opacity:0.85;
}
.generate-btn:hover::before{ transform: translateX(120%) }
.generate-btn:not(:disabled):hover{ box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 8px 22px rgba(255,255,255,0.10), 0 1px 0 rgba(255,255,255,0.7) inset; transform: translateY(-1px) }
.generate-btn:not(:disabled):active{ transform: translateY(0) scale(0.99) }
.generate-btn.is-loading .generate-btn-icon{ background:#0A0A0B; box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset }
.attach-btn{ position:relative; overflow:hidden }
.attach-btn::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 55%);
  opacity:0; transition: opacity .2s;
}
.attach-btn:hover::after{ opacity:1 }
.prompt-input{ transition: opacity .2s }
.composer:focus-within .prompt-input::placeholder{ opacity:0.72 }

/* ── Pills polish ── */
.pill{ position:relative; overflow:hidden }
.pill::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent);
  opacity:0; transition: opacity .2s;
}
.pill:hover::after{ opacity:1 }
.pill[aria-checked="true"]{ animation: pillPop .32s var(--ease-out) }
@keyframes pillPop{ 0%{transform:scale(0.96)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }

/* ── Thread / Cards ── */
.thread{ perspective: 900px }
.message{ transform-origin: 50% 0 }
.msg-prompt{ position:relative; overflow:hidden }
.msg-prompt::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 62%);
  transform: translateX(-100%); transition: transform .7s var(--ease-out);
}
.message:hover .msg-prompt::after{ transform: translateX(100%) }
.gen-card{
  transform-origin: 50% 0;
  animation: cardEnter .55s var(--ease-out) both;
  will-change: transform, opacity;
}
@keyframes cardEnter{ from{opacity:0; transform: translateY(14px) scale(0.98) rotateX(4deg)} to{opacity:1; transform:none} }
.gen-card:hover{ transform: translateY(-2px) }
.gen-card-media{ position:relative; isolation:isolate }
.gen-card-media::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background: radial-gradient(600px 220px at 50% 0%, rgba(255,255,255,0.07), transparent 70%);
  transition: opacity .35s;
}
.gen-card:hover .gen-card-media::after{ opacity:1 }
.gen-card-media img{ will-change: transform, opacity, filter; }
.gen-card-media img:not(.is-loaded){ filter: blur(14px) saturate(0.9) brightness(0.92); transform: scale(1.02) }
.gen-card-footer{ position:relative }
.gen-card-footer::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  opacity:0.7;
}
.gen-loader{ animation: loaderFade .35s var(--ease-out) }
@keyframes loaderFade{ from{opacity:0} to{opacity:1} }
.gen-loader-dots span{ box-shadow: 0 0 10px rgba(255,255,255,0.32) }

/* ── Error ── */
.error-card{ animation: errorIn .42s var(--ease-out) both }
@keyframes errorIn{ from{opacity:0; transform: translateY(8px) scale(0.99)} to{opacity:1; transform:none} }

/* ── History panel polish ── */
.history-panel{ will-change: transform; }
.history-panel.is-open{ animation: panelGlow .5s var(--ease-out) }
@keyframes panelGlow{ from{box-shadow:-20px 0 60px rgba(0,0,0,0.45)} to{box-shadow:-24px 0 72px rgba(0,0,0,0.52), 0 1px 0 rgba(255,255,255,0.04) inset, -1px 0 0 rgba(255,255,255,0.06)} }
.history-item{ will-change: transform; }
.history-item::after{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.06) 100%);
  opacity:0; transition: opacity .22s;
}
.history-item:hover::after{ opacity:1 }
.history-item:hover img{ transform: scale(1.03); transition: transform .45s var(--ease-out) }
.history-item img{ transition: transform .45s var(--ease-out) }
.history-backdrop{ backdrop-filter: blur(6px) saturate(1.05) }

/* ── Lightbox polish ── */
.lightbox-img{ animation: lightboxImgIn .48s var(--ease-out) both; }
@keyframes lightboxImgIn{ from{opacity:0; transform: scale(0.97) translateY(8px)} to{opacity:1; transform:none} }
.lightbox-bar{ animation: lightboxBarIn .42s var(--ease-out) .08s both }
@keyframes lightboxBarIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.lightbox-btn{ transition: transform .16s, background .18s, border-color .18s, box-shadow .18s }
.lightbox-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,0.28) }
.lightbox-btn:active{ transform: none }

/* ── Toast polish ── */
.toast{ position:relative; overflow:hidden }
.toast::before{
  content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-100%);
  animation: toastShine 2.8s ease 0.4s 1;
}
@keyframes toastShine{ to{transform:translateX(100%)} }
.toast-dot{ box-shadow: 0 0 8px currentColor }
.toast--error .toast-dot{ box-shadow: 0 0 10px rgba(239,68,68,0.55) }

/* ── Key indicator polish ── */
.key-indicator{ position:relative; overflow:hidden }
.key-indicator::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background: radial-gradient(180px 40px at 50% 0%, rgba(255,255,255,0.08), transparent 70%);
  pointer-events:none;
}
.key-dot.is-ok{ animation: dotOk .45s var(--ease-out) }
@keyframes dotOk{ 0%{transform:scale(0.7)} 70%{transform:scale(1.18)} 100%{transform:scale(1)} }

/* ── Scroll & selection ── */
::selection{ background: rgba(255,255,255,0.18); color:#fff }
:focus-visible{ outline:2px solid rgba(255,255,255,0.92); outline-offset:2px; box-shadow: 0 0 0 4px rgba(255,255,255,0.08) }

/* ── Reduced motion respects ── */
@media (prefers-reduced-motion: no-preference){
  .workspace{ scroll-behavior: smooth }
  html{ scroll-behavior: smooth }
}

/* ── Hide scrollbar when not needed elegantly ── */
.history-grid{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent }
.history-grid::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14) }

/* ── Composer footnote tiny glow ── */
.composer-footnote{ position:relative }
.composer-footnote::before{
  content:""; position:absolute; left:50%; top:-8px; width:120px; height:1px; transform:translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

/* ── Mobile dock polish ── */
@media (max-width: 760px){
  .composer-dock{ background: linear-gradient(to top, rgba(8,8,10,0.98) 34%, rgba(8,8,10,0.78) 62%, transparent) }
  .hero::before{ width:520px; height:340px; top:18% }
}

/* ── Brand dot pulse behind eyebrow ── */
.eyebrow-dot{ animation: eyebrowPulse 2.6s ease-in-out infinite }
@keyframes eyebrowPulse{ 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.14); opacity:0.92} }

/* ── Drag overlay polish ── */
.drag-card{ position:relative; overflow:hidden }
.drag-card::before{
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background: conic-gradient(from 140deg at 50% 50%, rgba(255,255,255,0.06), transparent 28%, transparent 72%, rgba(120,130,255,0.06));
  opacity:0.9;
  animation: dragConic 7s linear infinite;
}
@keyframes dragConic{ to{transform: rotate(1turn)} }
.drag-icon{ position:relative; box-shadow: 0 8px 20px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.5) inset }

/* ══════════════════════════════════════════════════════════
   PREMIUM ATELIER OVERHAUL — Champagne Noir
   Editorial · Warm Obsidian · Flattering Motion
   ══════════════════════════════════════════════════════════ */
:root{
  --bg: #0C0B0A;
  --bg-soft:#141210;
  --surface:#1A1816;
  --surface-2:#1F1D1A;
  --surface-3:#24221F;
  --border: rgba(232,217,184,0.08);
  --border-strong: rgba(232,217,184,0.13);
  --border-focus: rgba(232,217,184,0.18);
  --text: #F7F2E6;
  --text-2:#C9C2B3;
  --text-3:#9E9789;
  --muted:#7D786E;
  --accent:#E8D9B8;
  --accent-2:#D8C9A8;
  --accent-text:#0C0B0A;
  --champagne: #E8D9B8;
  --champagne-dim: rgba(232,217,184,0.14);
  --champagne-glow: rgba(232,217,184,0.22);
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --ease-flatter: cubic-bezier(.22,1,.36,1);
  --ease-premium: cubic-bezier(.16,1,.3,1);
  --ease-luxury: cubic-bezier(.22,1,.36,1);
  --composer-w: 780px;
}

html{ scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(232,217,184,0.14) transparent }
body{
  background: #0C0B0A;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01" 1, "ss02" 1, "calt" 1;
  letter-spacing: -0.01em;
}
body::before{
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(232,217,184,0.055), transparent 68%),
    radial-gradient(920px 420px at 92% 10%, rgba(232,217,184,0.035), transparent 62%),
    radial-gradient(780px 520px at 8% 92%, rgba(255,255,255,0.02), transparent 64%),
    linear-gradient(180deg, #0C0B0A 0%, #0A0908 100%);
  opacity:1;
}
body::after{ opacity:0.028; mix-blend-mode: soft-light }

.ambient-orb{ filter: blur(48px) saturate(1.05); opacity:0.42 }
.ambient-orb--1{
  background: radial-gradient(circle at 30% 30%, rgba(232,217,184,0.09), transparent 62%),
              radial-gradient(circle at 70% 70%, rgba(255,255,255,0.03), transparent 58%);
}
.ambient-orb--2{
  background: radial-gradient(circle at 40% 35%, rgba(232,217,184,0.06), transparent 64%),
              radial-gradient(circle at 70% 60%, rgba(180,160,120,0.08), transparent 62%);
}
.ambient-orb--3{
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.02), transparent 64%),
              radial-gradient(circle at 30% 70%, rgba(232,217,184,0.05), transparent 62%);
}

/* Topbar — hairline atelier bar */
.topbar{
  background: rgba(12,11,10,0.48);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-bottom: 0.5px solid rgba(232,217,184,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.015) inset, 0 8px 24px rgba(0,0,0,0.12);
}
.topbar-inner{ max-width: 1280px; padding: 13px 24px; gap:18px }
.traffic{ gap:6px; margin-right:14px; opacity:0.92 }
.traffic-dot{ width:11px; height:11px }
.brand{ gap:12px }
.brand-mark{
  width:32px; height:32px; border-radius:9px;
  background: #1A1816 url("icon.png") center / 71% no-repeat;
  border: 0.5px solid rgba(232,217,184,0.16);
  box-shadow: 0 1px 0 rgba(255,255,255,0.38) inset, 0 0.5px 0 rgba(255,255,255,0.14) inset, 0 8px 20px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.24);
}
.brand-type{
  font-family: "Instrument Serif", Georgia, serif;
  font-weight:400; font-size:17px; letter-spacing:-0.03em; color: var(--text);
}
.brand-dot{ background: var(--champagne-dim); width:3.5px; height:3.5px }
.brand-sub{
  font-family: Inter, sans-serif; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; font-weight:650;
  color: rgba(247,242,230,0.58);
  background: rgba(232,217,184,0.06);
  border-color: rgba(232,217,184,0.09);
  padding:3px 8px;
}
.key-indicator{
  background: rgba(247,242,230,0.045);
  backdrop-filter: blur(14px);
  border: 0.5px solid rgba(232,217,184,0.08);
  border-radius:999px; padding:7px 12px 7px 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.key-indicator-label{ color: rgba(247,242,230,0.52); letter-spacing:0.13em; font-size:9.5px }
.key-indicator-text{ color: var(--text-2); font-size:12px }
.key-dot{ width:6px; height:6px }
.icon-btn{
  background: rgba(247,242,230,0.05);
  border: 0.5px solid rgba(232,217,184,0.08);
  color: var(--text); font-weight:500; letter-spacing:-0.01em;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.icon-btn:hover{ background: rgba(247,242,230,0.08); border-color: rgba(232,217,184,0.13); transform: translateY(-0.5px) }
.icon-btn:active{ transform: scale(0.98) }
.history-count{ background: var(--champagne); color:#0C0B0A; font-weight:750; letter-spacing:-0.02em }

/* Workspace — editorial measure */
.workspace{ max-width: 1280px; padding: 0 24px 240px }
.conversation{ max-width: var(--composer-w); padding-top: 42px; gap:32px }

/* Hero — editorial Atelier */
.hero{ padding: 36px 0 12px; text-align:center; align-items:center; display:flex; flex-direction:column; gap:0; animation: heroAtelierIn .9s var(--ease-premium) both }
@keyframes heroAtelierIn{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none} }
.hero-meta{
  display:inline-flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase; font-weight:650; color: rgba(247,242,230,0.46);
  margin-bottom:18px; animation: fadeUp .7s var(--ease-premium) .08s both;
}
.hero-kicker{ color: rgba(232,217,184,0.72); letter-spacing:0.18em }
.hero-rule{ width:22px; height:0.5px; background: linear-gradient(90deg, transparent, rgba(232,217,184,0.28), transparent); display:inline-block }
.hero-credit{ font-variant-numeric: tabular-nums; letter-spacing:0.12em }
.hero-eyebrow{
  background: rgba(232,217,184,0.055);
  border: 0.5px solid rgba(232,217,184,0.09);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 18px rgba(0,0,0,0.14);
  padding:7px 12px; gap:10px; font-size:10.5px; letter-spacing:0.14em; color: rgba(247,242,230,0.66);
}
.hero-eyebrow .eyebrow-dot{ background: var(--champagne); box-shadow: 0 0 10px rgba(232,217,184,0.42) }
.eyebrow-hairline{ width:16px; height:0.5px; background: rgba(232,217,184,0.18); margin-left:4px }
.hero-title{
  margin:22px 0 14px; font-family: "Instrument Serif", Georgia, serif; font-weight:400;
  font-size: clamp(46px, 7.2vw, 72px); line-height:0.92; letter-spacing:-0.04em; color: var(--text);
  background: none; -webkit-text-fill-color: initial; filter:none; animation:none;
  display:flex; flex-direction:column; gap:6px; align-items:center;
}
.hero-title-line{ display:block; overflow:visible; text-wrap:balance }
.hero-title-hello{ font-weight:400; color: var(--text) }
.hero-title-name{ font-style: italic; font-weight:400; color: var(--champagne); position:relative }
.hero-title-name::after{
  content:""; position:absolute; left:2%; right:2%; bottom:4px; height:5px;
  background: linear-gradient(90deg, transparent, rgba(232,217,184,0.16), transparent);
  border-radius:2px; pointer-events:none;
}
.hero-title-line-2{
  font-family: "Instrument Serif", Georgia, serif; font-size: clamp(18px, 2.6vw, 24px); line-height:1.25;
  letter-spacing:-0.02em; font-weight:400; color: rgba(247,242,230,0.72); margin-top:4px;
  animation: fadeUp .8s var(--ease-premium) .22s both;
}
.hero-title-line-2 i{ font-style: italic; color: var(--champagne); font-weight:400 }
.hero-title-line-1{ animation: atelierReveal .9s var(--ease-luxury) .12s both; clip-path: inset(0 0 0 0) }
@keyframes atelierReveal{ from{clip-path: inset(0 100% 0 0); opacity:0; transform: translateY(6px)} to{clip-path: inset(0 0 0 0); opacity:1; transform:none} }
.hero-subtitle{
  max-width: 52ch; margin:0 auto; font-family: Inter, sans-serif; font-size: clamp(14.5px, 1.9vw, 16.5px); line-height:1.55;
  color: var(--text-2); letter-spacing:-0.01em; font-weight:400; text-wrap:balance;
  animation: fadeUp .7s var(--ease-premium) .28s both;
}
.hero-subtitle em{ font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--text); font-weight:400; letter-spacing:-0.02em }
.hero-ornament{
  display:flex; align-items:center; gap:12px; margin:22px auto 0; color: rgba(232,217,184,0.42); font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  animation: fadeUp .7s var(--ease-premium) .32s both;
}
.hero-ornament span{ width:36px; height:0.5px; background: linear-gradient(90deg, transparent, rgba(232,217,184,0.22), transparent); display:block }
.hero-ornament i{ font-style: normal; font-size:8px; opacity:0.9; animation: ornamentPulse 3.2s ease-in-out infinite }
@keyframes ornamentPulse{ 0%,100%{opacity:0.9; transform:scale(1)} 50%{opacity:1; transform:scale(1.08)} }
.hero::before{ display:none }
.hero-suggestions{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px; width:100%; max-width: 560px; margin:24px auto 0;
  animation: fadeUp .7s var(--ease-premium) .38s both;
}
.suggestion{
  background: rgba(247,242,230,0.035);
  border: 0.5px solid rgba(232,217,184,0.09);
  border-radius:16px; padding:12px 14px; text-align:left; display:flex; flex-direction:column; gap:3px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .24s var(--ease-premium), border-color .24s, transform .28s var(--ease-luxury), box-shadow .28s;
  animation: suggestionIn .55s var(--ease-premium) both;
  position:relative; overflow:hidden;
}
.suggestion span{ font-family: "Instrument Serif", Georgia, serif; font-size:16px; line-height:1.1; letter-spacing:-0.02em; color: var(--text) }
.suggestion em{ font-family: Inter, sans-serif; font-style: normal; font-size:11.5px; line-height:1.35; color: var(--text-3); letter-spacing:0.01em; font-weight:450 }
.suggestion::before{ background: radial-gradient(240px 90px at var(--mx,50%) 50%, rgba(232,217,184,0.07), transparent 70%) }
.suggestion:hover{ background: rgba(247,242,230,0.055); border-color: rgba(232,217,184,0.15); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.04) inset }
.suggestion:active{ transform: translateY(0) scale(0.99) }
.hero-hint{
  margin:18px 0 0; font-size:11.5px; color: rgba(247,242,230,0.38); letter-spacing:0.04em; font-weight:450;
  background: rgba(247,242,230,0.025); border:0.5px solid rgba(232,217,184,0.06); padding:6px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; backdrop-filter: blur(8px);
  animation: fadeUp .7s var(--ease-premium) .44s both;
}
.hero-hint kbd{ background: rgba(247,242,230,0.07); border-color: rgba(232,217,184,0.09); color: rgba(247,242,230,0.62); font-size:9.5px; min-width:16px; height:16px }
.hero-hint span{ color: rgba(232,217,184,0.52) }
.hero-hint::before{ content:none }

/* Thread */
.thread{ gap:26px; padding-bottom: 12px }
.message{ gap:14px; animation: msgAtelierIn .5s var(--ease-premium) both }
@keyframes msgAtelierIn{ from{opacity:0; transform: translateY(8px)} to{opacity:1; transform:none} }
.msg-role{ font-size:10px; letter-spacing:0.15em; font-weight:650; color: rgba(247,242,230,0.42) }
.msg-role-dot{ background: var(--champagne); width:4px; height:4px }
.msg-prompt{
  background: rgba(247,242,230,0.04);
  border: 0.5px solid rgba(232,217,184,0.08);
  border-radius:18px; padding:16px 18px; font-size:15px; line-height:1.6; color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 22px rgba(0,0,0,0.14);
}
.msg-meta{ gap:6px }
.meta-pill{
  background: rgba(247,242,230,0.04); border: 0.5px solid rgba(232,217,184,0.07);
  color: rgba(247,242,230,0.56); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; padding:5px 9px;
}
.msg-ref-thumb{ border-color: rgba(232,217,184,0.10); border-radius:14px; box-shadow: 0 6px 18px rgba(0,0,0,0.18) }

/* Generation card — gallery mat */
.gen-card{ border-radius:22px; background: #1A1816; border: 0.5px solid rgba(232,217,184,0.09); box-shadow: 0 18px 42px rgba(0,0,0,0.38), 0 1px 0 rgba(255,255,255,0.04) inset }
.gen-card-media{
  background: radial-gradient(720px 360px at 50% 0%, rgba(232,217,184,0.045), transparent 68%), #0E0D0C; min-height: 280px;
  padding:10px; 
}
.gen-card-media img{ border-radius:14px; overflow:hidden; box-shadow: 0 12px 32px rgba(0,0,0,0.32) }
.gen-card-shimmer{ border-radius:14px; margin:10px; inset:10px }
.gen-loader{ background: rgba(12,11,10,0.52); backdrop-filter: blur(16px); border-radius:14px; margin:10px }
.gen-loader-text{ font-family: "Instrument Serif", Georgia, serif; font-size:15px; letter-spacing:-0.02em; color: var(--text) }
.gen-loader-sub{ font-size:11.5px; color: rgba(247,242,230,0.52) }
.gen-progress{ height:1.5px; background: rgba(232,217,184,0.08) }
.gen-progress-bar{ background: linear-gradient(90deg, var(--champagne), #f0e6cb); box-shadow: 0 0 10px rgba(232,217,184,0.32) }
.gen-card-footer{ background: rgba(247,242,230,0.015); border-top: 0.5px solid rgba(232,217,184,0.06); padding:14px 14px 14px 16px }
.gen-card-title{ font-family: "Instrument Serif", Georgia, serif; font-size:15px; font-weight:400; letter-spacing:-0.02em }
.gen-card-sub{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: rgba(247,242,230,0.42); font-weight:600 }
.btn{ border-radius:999px; font-weight:600; letter-spacing:-0.01em; height:35px }
.btn--primary{ background: var(--champagne); color:#0C0B0A; border-color: var(--champagne); box-shadow: 0 1px 0 rgba(255,255,255,0.32) inset, 0 4px 14px rgba(232,217,184,0.18) }
.btn--primary:hover{ background:#f0e6cb; border-color:#f0e6cb; transform: translateY(-0.5px); box-shadow: 0 1px 0 rgba(255,255,255,0.38) inset, 0 8px 20px rgba(232,217,184,0.22) }
.btn--ghost{ background: rgba(247,242,230,0.06); border-color: rgba(232,217,184,0.10); color: var(--text); backdrop-filter: blur(10px) }
.btn--ghost:hover{ background: rgba(247,242,230,0.09); border-color: rgba(232,217,184,0.14) }
.btn--subtle{ border-color: rgba(232,217,184,0.08); color: rgba(247,242,230,0.56) }
.error-card{ background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.14); border-radius:16px; backdrop-filter: blur(12px) }

/* Composer — atelier slab */
.composer-dock{ padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(12,11,10,0.94) 28%, rgba(12,11,10,0.72) 58%, transparent) }
.composer-shell{ max-width: var(--composer-w); gap:10px }
.ref-preview{ background: rgba(28,26,24,0.72); border-color: rgba(232,217,184,0.09); backdrop-filter: blur(18px) saturate(1.4); border-radius:16px }
.composer{
  background: linear-gradient(180deg, rgba(28,26,24,0.86), rgba(22,20,18,0.82));
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  border: 0.5px solid rgba(232,217,184,0.10);
  border-radius: 26px;
  box-shadow: 0 24px 56px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.06) inset, 0 0 0 0.5px rgba(255,255,255,0.02) inset;
}
.composer:focus-within{ border-color: rgba(232,217,184,0.18); box-shadow: 0 0 0 0.5px rgba(232,217,184,0.14), 0 0 0 4px rgba(232,217,184,0.08), 0 24px 56px rgba(0,0,0,0.42) }
.composer-top{ padding:6px 6px 4px 6px; gap:10px }
.attach-btn{ width:42px; height:42px; background: rgba(247,242,230,0.05); border-color: rgba(232,217,184,0.08); color: rgba(247,242,230,0.58) }
.attach-btn:hover{ background: rgba(247,242,230,0.08); color: var(--text); border-color: rgba(232,217,184,0.12) }
.attach-btn.has-file{ background: var(--champagne); color:#0C0B0A; border-color: var(--champagne) }
.prompt-input{ font-size:15.2px; color: var(--text); min-height:42px }
.prompt-input::placeholder{ color: rgba(247,242,230,0.32) }
.generate-btn{
  height:42px; padding:0 15px 0 16px; background: var(--champagne); color:#0C0B0A; border-color: var(--champagne);
  box-shadow: 0 1px 0 rgba(255,255,255,0.36) inset, 0 4px 14px rgba(232,217,184,0.18);
  font-weight:700; letter-spacing:-0.02em;
}
.generate-btn:hover{ background:#f0e6cb; border-color:#f0e6cb; filter:none }
.generate-btn-icon{ background:#0C0B0A; color: var(--champagne) }
.generate-btn-shortcut{ background: rgba(12,11,10,0.09); border-color: rgba(12,11,10,0.08); color: rgba(12,11,10,0.48) }
.composer-controls{ border-top-color: rgba(232,217,184,0.06); padding:10px 8px 6px; gap:14px }
.control-label{ color: rgba(247,242,230,0.42); letter-spacing:0.14em; font-size:9.5px }
.pill{ background: rgba(247,242,230,0.045); border-color: rgba(232,217,184,0.08); color: rgba(247,242,230,0.56); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset }
.pill[aria-checked="true"]{ background: var(--champagne); color:#0C0B0A; border-color: var(--champagne); box-shadow: 0 1px 0 rgba(255,255,255,0.32) inset, 0 4px 14px rgba(232,217,184,0.16) }
.composer-meta kbd{ background: rgba(247,242,230,0.06); border-color: rgba(232,217,184,0.08); color: rgba(247,242,230,0.52) }
.composer-footnote{ color: rgba(247,242,230,0.32); background: rgba(247,242,230,0.02); border-color: rgba(232,217,184,0.05); font-size:10.5px; letter-spacing:0.04em }
.composer-footnote strong{ color: rgba(232,217,184,0.62) !important }

/* History — linen */
.history-panel{ background: rgba(18,17,15,0.76); backdrop-filter: blur(32px) saturate(1.6); border-left: 0.5px solid rgba(232,217,184,0.08); width:400px }
.history-head{ border-bottom-color: rgba(232,217,184,0.06); background: linear-gradient(180deg, rgba(247,242,230,0.03), transparent) }
.history-title{ font-family: "Instrument Serif", Georgia, serif; font-weight:400; font-size:18px; letter-spacing:-0.02em }
.history-grid{ padding:16px; gap:12px }
.history-item{ border-radius:16px; border-color: rgba(232,217,184,0.07); background: rgba(247,242,230,0.03); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 20px rgba(0,0,0,0.12) }
.history-item:hover{ border-color: rgba(232,217,184,0.12); transform: translateY(-1px) }

/* Lightbox — museum */
.lightbox-backdrop{ background: rgba(8,7,6,0.78); backdrop-filter: blur(32px) saturate(1.2) }
.lightbox-img{ border-radius:20px; background:#0E0D0C; border-color: rgba(232,217,184,0.08); box-shadow: 0 36px 84px rgba(0,0,0,0.62), 0 0 0 0.5px rgba(255,255,255,0.06) }
.lightbox-btn{ border-radius:999px }
.lightbox-btn--icon{ background: rgba(247,242,230,0.08); border-color: rgba(232,217,184,0.10) }

/* Toast — atelier */
.toast{ background: rgba(28,26,24,0.88); border-color: rgba(232,217,184,0.10); box-shadow: 0 18px 38px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.06) inset; color: var(--text) }
.toast-dot{ background: var(--champagne) }

/* Focus */
:focus-visible{ outline-color: rgba(232,217,184,0.92); box-shadow: 0 0 0 4px rgba(232,217,184,0.12) }

/* Flattering motion — slow, editorial */
@media (prefers-reduced-motion: no-preference){
  .hero-suggestions .suggestion{ transition: all .42s var(--ease-luxury) }
  .gen-card, .history-item, .icon-btn, .btn, .pill{ transition-timing-function: var(--ease-luxury) }
  .gen-card:hover{ transform: translateY(-2px) }
  .suggestion:hover{ transform: translateY(-1.5px) }
}
@media (max-width: 760px){
  .hero{ padding: 28px 0 8px }
  .hero-suggestions{ grid-template-columns: 1fr; max-width: 360px }
  .hero-title{ font-size: clamp(42px, 11vw, 54px) }
  .topbar-inner{ padding: 11px 16px }
  .workspace{ padding: 0 16px 240px }
  .composer{ border-radius: 22px }
  .hero-meta{ gap:8px; font-size:9px }
}

/* ── macOS Tahoe — Liquid Glass + Dopamine v2 ── */
:root{
  --spring: cubic-bezier(.16,1,.3,1);
  --spring-bounce: cubic-bezier(.34,1.56,.64,1);
  --spring-snappy: cubic-bezier(.32,.72,0,1);
  --glass: rgba(22,22,24,0.58);
  --glass-strong: rgba(28,28,30,0.72);
  --glass-border: rgba(255,255,255,0.09);
  --macos-blue: 10,132,255;
  --macos-blue-raw: #0A84FF;
}

html{ scrollbar-color: rgba(255,255,255,0.14) transparent; scrollbar-width: thin }
body{
  background:
    radial-gradient(1100px 620px at 50% -14%, rgba(255,255,255,0.055), transparent 66%),
    radial-gradient(900px 700px at 88% 12%, rgba(99,102,241,0.055), transparent 62%),
    radial-gradient(820px 620px at 12% 88%, rgba(255,255,255,0.028), transparent 64%),
    linear-gradient(180deg, #08080A 0%, #0A0A0E 100%);
  background-attachment: fixed;
}

.ambient-orb{
  position:fixed; pointer-events:none; border-radius:50%; filter: blur(42px); opacity:0.55; will-change: transform;
}
.ambient-orb--1{
  width:560px; height:560px; left:-120px; top:18vh;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.16), transparent 62%),
              radial-gradient(circle at 70% 70%, rgba(255,255,255,0.045), transparent 58%);
  animation: ambientDrift1 18s var(--ease-inout) infinite alternate;
}
.ambient-orb--2{
  width:720px; height:520px; right:-160px; top:-80px;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.055), transparent 64%),
              radial-gradient(circle at 70% 60%, rgba(120,119,198,0.09), transparent 62%);
  animation: ambientDrift2 22s var(--ease-inout) infinite alternate;
}
.ambient-orb--3{
  width:640px; height:420px; left:32%; bottom:-160px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.038), transparent 64%),
              radial-gradient(circle at 30% 70%, rgba(99,102,241,0.06), transparent 62%);
  animation: ambientDrift3 20s var(--ease-inout) infinite alternate;
  opacity:0.38;
}
@keyframes ambientDrift1{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(18px,-14px,0) scale(1.04)} }
@keyframes ambientDrift2{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-16px,12px,0) scale(1.03)} }
@keyframes ambientDrift3{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(10px,-10px,0) scale(1.05)} }

.confetti-canvas{
  position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:70;
  display:block;
}
.cursor-glow{
  position:fixed; width:420px; height:420px; margin:-210px; pointer-events:none; z-index:5;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045), transparent 62%);
  border-radius:50%; opacity:0; transform: translate3d(var(--mx, -9999px), var(--my, -9999px), 0);
  transition: opacity .45s var(--spring);
  will-change: transform, opacity;
  mix-blend-mode: plus-lighter;
}
@media (pointer: fine){
  body.has-cursor-glow .cursor-glow{ opacity:1 }
}

.spotlight{
  position:fixed; top:14px; left:50%; transform: translateX(-50%) translateY(-8px);
  z-index:35; pointer-events:none; opacity:0;
  transition: opacity .28s var(--spring), transform .34s var(--spring);
}
.spotlight.is-visible{ opacity:1; transform: translateX(-50%) translateY(0) }
.spotlight-inner{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 12px 7px 10px;
  background: rgba(30,30,32,0.84);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:999px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.08) inset;
  font-size:12px; color: rgba(255,255,255,0.82); letter-spacing:-0.01em;
}
.spotlight-icon{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,0.09); color:#fff; flex:0 0 auto }
.spotlight kbd{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.12); border-bottom-color: rgba(255,255,255,0.16);
  border-radius:6px; font-family: Inter, sans-serif; font-size:11px; font-weight:600; color:#fff; line-height:1;
}

.traffic{
  display:flex; align-items:center; gap:7px; margin-right:10px; flex:0 0 auto;
}
.traffic-dot{
  width:12px; height:12px; border-radius:50%; position:relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 0.5px 0.5px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(0,0,0,0.08) inset;
  transition: filter .18s, transform .18s var(--spring-bounce);
}
.traffic-dot--red{ background: radial-gradient(100% 100% at 30% 28%, #ff8a8a, #ff5f56 52%, #e0443e 100%) }
.traffic-dot--yellow{ background: radial-gradient(100% 100% at 30% 28%, #ffeaa0, #ffbd2e 52%, #dea123 100%) }
.traffic-dot--green{ background: radial-gradient(100% 100% at 30% 28%, #a8ffbb, #28c940 52%, #1aab29 100%) }
.traffic-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(60% 45% at 30% 26%, rgba(255,255,255,0.55), transparent 62%);
  opacity:0.9;
}
.topbar:hover .traffic-dot{ filter: brightness(1.06) saturate(1.05) }
.traffic-dot:active{ transform: scale(0.92) }

/* ── Topbar macOS vibrancy ── */
.topbar{
  background: rgba(16,16,18,0.52);
  backdrop-filter: blur(26px) saturate(1.75);
  -webkit-backdrop-filter: blur(26px) saturate(1.75);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.045) inset, 0 10px 28px rgba(0,0,0,0.14);
}
.topbar-inner{ padding: 10px 18px; gap:14px }
.brand{ gap:11px }
.brand-mark{
  width:30px; height:30px; border-radius:9px;
  background: #1A1F33 url("icon.png") center / 74% no-repeat;
  border: 0.5px solid rgba(255,255,255,0.12);
  box-shadow: 0 1px 0 rgba(255,255,255,0.42) inset, 0 0.5px 0 rgba(255,255,255,0.18) inset, 0 6px 14px rgba(0,0,0,0.26), 0 1px 3px rgba(0,0,0,0.22);
}
.brand-type{ font-weight:640; font-size:14.7px; letter-spacing:-0.03em; }
.brand-sub{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
  backdrop-filter: blur(8px);
}

/* ── Composer liquid glass ── */
.composer{
  background: linear-gradient(180deg, rgba(28,28,30,0.82), rgba(22,22,24,0.78));
  backdrop-filter: blur(32px) saturate(1.85);
  -webkit-backdrop-filter: blur(32px) saturate(1.85);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  box-shadow: 0 28px 64px rgba(0,0,0,0.52), 0 1px 0 rgba(255,255,255,0.09) inset, 0 0 0 0.5px rgba(255,255,255,0.04) inset, 0 0 36px rgba(120,119,198,0.06);
}
.composer::before{ display:none }
.composer::after{ opacity:0.72; background: radial-gradient(640px 140px at 50% -24%, rgba(255,255,255,0.07), transparent 72%) }
.prompt-input{
  font-size:15.2px; letter-spacing:-0.014em; font-weight:400;
}
.prompt-input::placeholder{ color: rgba(255,255,255,0.34); font-weight:400 }
.composer:focus-within{
  border-color: rgba(var(--macos-blue), 0.22);
  box-shadow: 0 0 0 0.5px rgba(var(--macos-blue), 0.28), 0 0 0 4px rgba(var(--macos-blue), 0.10), 0 28px 64px rgba(0,0,0,0.52), 0 1px 0 rgba(255,255,255,0.09) inset;
  transform: translateY(-1px);
}
.composer-controls{
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  border-top-color: rgba(255,255,255,0.055);
}
.generate-btn{
  height:40px; padding:0 14px 0 15px; gap:9px;
  background: #fff; color:#0A0A0B;
  border-color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.76) inset, 0 0 0 0.5px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.14);
  transition: transform .18s var(--spring-bounce), box-shadow .22s var(--spring), background .18s, filter .18s;
}
.generate-btn:hover{ filter: brightness(1.02); box-shadow: 0 1px 0 rgba(255,255,255,0.82) inset, 0 6px 18px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(0,0,0,0.04) }
.generate-btn:active{ transform: scale(0.98) }
.generate-btn-icon{ background: #0A0A0B; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset }
.generate-btn.is-loading{ animation: generatePulse 1.1s var(--ease-inout) infinite }
@keyframes generatePulse{ 0%,100%{box-shadow: 0 1px 0 rgba(255,255,255,0.76) inset, 0 4px 14px rgba(0,0,0,0.14)} 50%{box-shadow: 0 1px 0 rgba(255,255,255,0.76) inset, 0 4px 20px rgba(99,102,241,0.18), 0 0 0 4px rgba(99,102,241,0.08)} }
.attach-btn{
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 2px 8px rgba(0,0,0,0.14);
}
.attach-btn.has-file{
  background:#fff; color:#0A0A0B; border-color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 4px 12px rgba(0,0,0,0.14);
  animation: attachPop .42s var(--spring-bounce);
}
@keyframes attachPop{ 0%{transform:scale(0.92)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }
.pill{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}
.pill[aria-checked="true"]{
  background:#fff; color:#0A0A0B; border-color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 4px 14px rgba(255,255,255,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.pill:hover:not([aria-checked="true"]){ background: rgba(255,255,255,0.085); border-color: rgba(255,255,255,0.12); transform: translateY(-0.5px) }
.pill:active{ transform: scale(0.97) }

/* ── Cards dopamine ── */
.gen-card{ border-radius: 20px; overflow:hidden }
.gen-card-media{ background: radial-gradient(760px 360px at 50% 0%, rgba(255,255,255,0.05), transparent 68%), radial-gradient(560px 380px at 92% 88%, rgba(99,102,241,0.06), transparent 62%), #0B0B0D }
.gen-card-shimmer{
  background:
    linear-gradient(100deg, transparent 28%, rgba(255,255,255,0.09) 50%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 44%),
    #0F0F11;
}
.btn--primary{
  background:#fff; color:#0A0A0B; border-color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 2px 10px rgba(0,0,0,0.14);
  transition: transform .16s var(--spring-bounce), box-shadow .2s, background .18s;
}
.btn--primary:hover{ transform: translateY(-0.5px); box-shadow: 0 1px 0 rgba(255,255,255,0.78) inset, 0 6px 16px rgba(0,0,0,0.18) }
.btn--primary:active{ transform: scale(0.98) }
.btn--ghost{ backdrop-filter: blur(12px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.10) }
.btn--ghost:hover{ background: rgba(255,255,255,0.12) }

.sparkle{
  position:absolute; width:10px; height:10px; pointer-events:none; z-index:3;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 28%, rgba(255,255,255,0) 62%);
  border-radius:50%;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
  animation: sparklePop .62s var(--spring-bounce) both;
}
@keyframes sparklePop{ 0%{transform:scale(0) rotate(0deg); opacity:0} 40%{opacity:1} 100%{transform:scale(1.4) rotate(180deg); opacity:0} }
.sparkle--star{
  background: none; width:14px; height:14px;
}
.sparkle--star::before, .sparkle--star::after{
  content:""; position:absolute; inset:0; background:#fff; border-radius:1px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
}

.gen-card.is-success{ animation: cardSuccess .62s var(--spring-bounce) }
@keyframes cardSuccess{ 0%{transform:scale(0.98)} 45%{transform:scale(1.012)} 100%{transform:scale(1)} }
.gen-card-media img.is-loaded{ animation: imgReveal .68s var(--spring) both }
@keyframes imgReveal{ from{filter: blur(14px) saturate(0.92) brightness(0.98); opacity:0; transform: scale(1.03)} to{filter:none; opacity:1; transform:scale(1)} }

/* ── History macOS Finder sidebar ── */
.history-panel{
  background: rgba(22,22,24,0.72);
  backdrop-filter: blur(30px) saturate(1.85);
  -webkit-backdrop-filter: blur(30px) saturate(1.85);
  border-left: 0.5px solid rgba(255,255,255,0.08);
  box-shadow: -20px 0 64px rgba(0,0,0,0.48), -1px 0 0 rgba(255,255,255,0.04) inset;
}
.history-head{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border-bottom-color: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
}
.history-item{
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 18px rgba(0,0,0,0.14);
}
.history-item:hover{
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(0,0,0,0.20);
  transform: translateY(-1px) scale(1.005);
}

/* ── Lightbox Quick Look ── */
.lightbox-backdrop{
  background: rgba(8,8,12,0.72);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
}
.lightbox-img{
  box-shadow: 0 32px 80px rgba(0,0,0,0.62), 0 0 0 0.5px rgba(255,255,255,0.08), 0 1px 0 rgba(255,255,255,0.10) inset;
  border-color: rgba(255,255,255,0.09);
}
.lightbox-btn--icon{
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(16px) saturate(1.4);
  border-color: rgba(255,255,255,0.12);
}

/* ── Toast Notification Center ── */
.toast{
  background: rgba(32,32,34,0.84);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 16px 36px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.08) inset;
  font-weight:500; letter-spacing:-0.01em;
}
.toast--error{
  background: rgba(42,18,18,0.88);
  border-color: rgba(239,68,68,0.18);
}

/* ── Key indicator macOS ── */
.key-indicator{
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 14px rgba(0,0,0,0.14);
}
.key-dot.is-ok{ box-shadow: 0 0 0 1px rgba(34,197,94,0.14) inset, 0 0 12px rgba(34,197,94,0.42), 0 0 0 4px rgba(34,197,94,0.08) }

/* ── Hover lift universal ── */
.icon-btn{ backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 12px rgba(0,0,0,0.10) }
.icon-btn:hover{ transform: translateY(-0.5px); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 18px rgba(0,0,0,0.16) }
.icon-btn:active{ transform: scale(0.98) }
.text-btn{ backdrop-filter: blur(10px) }

/* ── Scrollbar macOS ── */
::-webkit-scrollbar{ width:8px; height:8px }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.06); border-radius:999px }
::-webkit-scrollbar-track{ background: transparent }

/* ── Focus macOS blue ── */
:focus-visible{ outline: 2px solid rgba(var(--macos-blue), 0.92); outline-offset:2px; box-shadow: 0 0 0 4px rgba(var(--macos-blue), 0.18), 0 0 14px rgba(var(--macos-blue), 0.18) }

/* ── Composer footnote pill ── */
.composer-footnote{ background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); border-radius:999px; display:inline-flex; margin:6px auto 0; padding:4px 10px; backdrop-filter: blur(8px) }

/* ── Ref preview glass ── */
.ref-preview{
  background: rgba(28,28,30,0.72);
  backdrop-filter: blur(18px) saturate(1.6);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.08) inset;
}

/* ── Mobile traffic hide ── */
@media (max-width: 760px){
  .traffic{ display:none }
  .cursor-glow{ display:none }
  .spotlight{ display:none }
  .ambient-orb{ opacity:0.38 }
}



/* premium sparkle champagne */
.sparkle{ background: radial-gradient(circle at 50% 50%, #E8D9B8 0%, #F7F2E6 28%, rgba(232,217,184,0) 62%); filter: drop-shadow(0 0 6px rgba(232,217,184,0.52)); }
.sparkle--star::before, .sparkle--star::after{ background:#E8D9B8; filter: drop-shadow(0 0 6px rgba(232,217,184,0.52)); }