/* Liquid glass (2026-11-03). Same layout, shapes, title, charts and logo as
   the approved design; this layer adds the glass surfaces and the motion.
   Motion uses transform and opacity, except three one-off effects: the chart
   lines tracing in (stroke-dashoffset), the blur as the charts dissolve, and
   the bar's focus glow. Everything that moves stops under
   prefers-reduced-motion. */

:root {
  --glass: rgb(255 255 255 / .52);
  --glass-strong: rgb(255 255 255 / .72);
  --glass-edge: rgb(255 255 255 / .75);
  --glass-shadow: 0 10px 30px rgb(46 62 120 / .10);
  --glass-hi: inset 0 1px 0 rgb(255 255 255 / .9);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

body { background: #fff; overflow-x: hidden; }

/* ── Background: big soft blobs that drift and morph ───────────────────── */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.app { position: relative; z-index: 1; }
.blob { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: .55; will-change: transform; }
.b1 { background: radial-gradient(circle at 50% 50%, rgb(79 123 233 / .55), rgb(79 123 233 / 0) 62%); top: -22vmax; left: -14vmax; animation: drift1 26s ease-in-out infinite alternate; }
.b2 { background: radial-gradient(circle at 50% 50%, rgb(168 140 235 / .55), rgb(168 140 235 / 0) 62%); top: 18vh; right: -24vmax; animation: drift2 32s ease-in-out infinite alternate; }
.b3 { background: radial-gradient(circle at 50% 50%, rgb(235 187 110 / .5), rgb(235 187 110 / 0) 62%); bottom: -30vmax; left: 22vw; animation: drift3 29s ease-in-out infinite alternate; }
@keyframes drift1 { 0% { transform: translate(0, 0) scale(1, 1) rotate(0deg); } 50% { transform: translate(8vw, 6vh) scale(1.12, .92) rotate(25deg); } 100% { transform: translate(14vw, -2vh) scale(.94, 1.1) rotate(50deg); } }
@keyframes drift2 { 0% { transform: translate(0, 0) scale(1, 1) rotate(0deg); } 50% { transform: translate(-10vw, 8vh) scale(.9, 1.14) rotate(-30deg); } 100% { transform: translate(-4vw, -8vh) scale(1.1, .95) rotate(-55deg); } }
@keyframes drift3 { 0% { transform: translate(0, 0) scale(1, 1) rotate(0deg); } 50% { transform: translate(-12vw, -6vh) scale(1.15, .9) rotate(20deg); } 100% { transform: translate(6vw, -12vh) scale(.92, 1.08) rotate(40deg); } }

/* ── Shape panel: frosted glass; each shape floats at its own pace ─────── */
.panel { position: relative; background: rgb(255 255 255 / .28); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--glass-shadow), var(--glass-hi), inset 0 0 0 1px rgb(255 255 255 / .25); }
.panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; /* highlight sits behind the shapes, so they stay solid black */
  background: linear-gradient(160deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .22)); }
.panel .shape { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; will-change: transform; }
.s-flower { transform-origin: 50% 24.9%; animation: float-a 11s ease-in-out infinite alternate; }
.s-star1 { transform-origin: 31.1% 54.4%; animation: float-b 9s ease-in-out infinite alternate; }
.s-star2 { transform-origin: 67.1% 54.4%; animation: float-c 13s ease-in-out -4s infinite alternate; }
/* Half circles mostly drift and breathe: big turns would tilt their flat edges. */
.s-half1 { transform-origin: 32.4% 85.1%; animation: drift-a 12s ease-in-out -2s infinite alternate; }
.s-half2 { transform-origin: 69.4% 85.1%; animation: drift-b 10s ease-in-out -6s infinite alternate; }
.s-half3 { transform-origin: 101.8% 85.1%; animation: drift-a 14s ease-in-out -3s infinite alternate; }
@keyframes float-a { 0% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(-1.4%) rotate(4deg) scale(1.03); } 100% { transform: translateY(.8%) rotate(-3deg) scale(.98); } }
@keyframes float-b { 0% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(1.2%) rotate(-6deg) scale(.97); } 100% { transform: translateY(-.9%) rotate(5deg) scale(1.04); } }
@keyframes drift-a { 0% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(-1%) rotate(1.2deg) scale(1.03); } 100% { transform: translateY(.7%) rotate(-.8deg) scale(.98); } }
@keyframes drift-b { 0% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(.9%) rotate(-1deg) scale(.97); } 100% { transform: translateY(-.6%) rotate(1deg) scale(1.03); } }
@keyframes float-c { 0% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(-.8%) rotate(7deg) scale(1.04); } 100% { transform: translateY(1.1%) rotate(-4deg) scale(.97); } }

/* ── Title: letters fade and slide in ──────────────────────────────────── */
.intro h1 .letters span { display: inline-block; animation: letter .7s var(--ease-out) both; animation-delay: calc(.05s * var(--i) + .1s); }
@keyframes letter { from { opacity: 0; transform: translateY(14px); } }

/* ── Charts draw themselves in ─────────────────────────────────────────── */
.charts .ln { stroke-dasharray: 1; stroke-dashoffset: 0; animation: trace 1.3s var(--ease-out) both; animation-delay: calc(.35s + var(--d)); }
@keyframes trace { from { stroke-dashoffset: 1; } }
.charts .pt, .charts .bub { transform-box: fill-box; transform-origin: center; animation: pop .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.35s + var(--d)); }
@keyframes pop { from { opacity: 0; transform: scale(0); } }
.charts .bar-r { transform-box: fill-box; transform-origin: 50% 100%; animation: grow .9s var(--ease-out) both; animation-delay: calc(.35s + var(--d)); }
@keyframes grow { from { transform: scaleY(0); } }
.charts .lim { animation: fade-in .8s ease both; animation-delay: .6s; }
@keyframes fade-in { from { opacity: 0; } }
.charts [data-tip] { cursor: default; transition: opacity .2s; }
.charts svg:hover [data-tip] { opacity: .55; }
.charts svg:hover [data-tip]:hover { opacity: 1; }
.tip { position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none; padding: 5px 10px; border-radius: 10px;
  font: 500 12px var(--font); color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--glass-shadow);
  opacity: 0; transition: opacity .15s; white-space: pre; }
.tip.on { opacity: 1; }

/* Chart header, Example badge, caption, metric picker. */
.chart { position: relative; display: flex; flex-direction: column; gap: 2px; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px;
  font: 600 11px var(--font); color: var(--muted); letter-spacing: .01em; }
.chart-head > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-badge { flex: none; font: 600 10px var(--font); color: var(--ink); background: var(--glass-strong); border: 1px solid var(--glass-edge);
  border-radius: 999px; padding: 1px 8px; letter-spacing: .04em; text-transform: uppercase; }
.chart-cap { margin: 0; font-size: 11px; color: var(--muted); text-align: center; }
.chart-cap .linkbtn { color: var(--muted); font-size: 11px; }
.chart-cap .linkbtn:hover { color: var(--ink); }
/* AI usage, in the account menu. */
.menu-chart { margin: 4px 6px 8px; width: 260px; max-width: calc(100vw - 48px); }
.chart-body { position: relative; }
.chart-pick { max-width: 100%; border: 1px solid var(--glass-edge); background: var(--glass); border-radius: 999px; padding: 2px 8px;
  font: 600 11px var(--font); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.chart-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Ghost: a faded sample with a connect button on top. */
.chart.ghost .chart-body > svg { opacity: .22; filter: grayscale(.6); }
.chart.ghost .chart-head { opacity: .8; }
.chart-cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; text-align: center; }
.chart-cta p { margin: 0; font-size: 12px; color: var(--ink); max-width: 220px; }
.chart-cta .pillbtn { white-space: normal; max-width: 100%; animation: float-in .5s var(--ease-out) .4s both; }

/* ── Chat starts: the intro dissolves ──────────────────────────────────── */
.intro { transition: opacity .55s ease, transform .55s var(--ease-out), filter .55s ease; }
.app.chatting .intro { opacity: 0; transform: translateY(-10px) scale(.98); filter: blur(10px); }

/* ── Chat bar: a glass pill with a glow and a passing shimmer ──────────── */
.bar { position: relative; overflow: hidden; isolation: isolate; background: var(--glass);
  border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 6px 24px rgb(79 123 233 / .12), var(--glass-hi); transition: box-shadow .35s ease; }
.bar:focus-within { box-shadow: 0 0 0 1px rgb(79 123 233 / .35), 0 8px 34px rgb(79 123 233 / .30), 0 0 60px rgb(168 140 235 / .25), var(--glass-hi); }
.bar::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .75) 50%, transparent 65%);
  transform: translateX(-110%); animation: shimmer 7s ease-in-out 1.5s infinite; }
@keyframes shimmer { 0% { transform: translateX(-110%); } 30%, 100% { transform: translateX(110%); } }
.bar.dragging { box-shadow: 0 0 0 2px var(--blue), 0 8px 34px rgb(79 123 233 / .3); }
.bar input:focus::placeholder { color: #6D7079; }

/* Icons lift and glow on hover. */
.attach, .send { transition: transform .2s var(--ease-out), filter .2s ease, color .2s ease, opacity .2s; }
.attach:hover { transform: translateY(-2px) scale(1.08); color: var(--ink); filter: drop-shadow(0 4px 6px rgb(79 123 233 / .45)); }
.send:hover { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 4px 8px rgb(79 123 233 / .55)); }
.mic.on { box-shadow: 0 0 0 4px rgb(79 123 233 / .25); }

/* ── Buttons and pills ─────────────────────────────────────────────────── */
.newchat, .acct summary { background: var(--glass); border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--glass-hi), 0 4px 14px rgb(46 62 120 / .07);
  transition: transform .2s var(--ease-out), box-shadow .2s; }
.newchat:hover, .acct summary:hover { transform: translateY(-1px); }
.acct[open] summary { background: var(--glass-strong); border-color: var(--glass-edge); }

/* ── Messages: glass bubbles that float in ─────────────────────────────── */
.msg { animation: float-in .5s var(--ease-out) both; }
@keyframes float-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.msg.user { background: linear-gradient(135deg, rgb(79 123 233 / .16), rgb(168 140 235 / .14)), var(--glass);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), var(--glass-hi); }
.msg.bot > div { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-edge);
  border-radius: 18px 18px 18px 4px; padding: 10px 14px; box-shadow: var(--glass-shadow), var(--glass-hi); }
.msg.user .files span { background: rgb(255 255 255 / .7); }
/* Thinking: the logo gently pulses. */
.msg.bot.thinking > img { animation: think 1.4s ease-in-out infinite; }
@keyframes think { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .6; } }
/* Streaming: a soft shimmer passes over the reply while it types. */
.msg.bot.streaming > div::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .65) 50%, transparent 70%);
  transform: translateX(-100%); animation: stream-shimmer 1.6s ease-in-out infinite; }
@keyframes stream-shimmer { to { transform: translateX(100%); } }

/* ── Cards, menus and panels ───────────────────────────────────────────── */
/* Menus sit over text, so they're frosted more heavily than the decorative glass. */
.menu, .connpanel { background: rgb(255 255 255 / .88); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--glass-shadow), var(--glass-hi); }
.menu { animation: float-in .25s var(--ease-out) both; }
.connpanel { animation: rise-up .35s var(--ease-out) both; }
@keyframes rise-up { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { transform: translateX(-50%); } }
.pillform, .connform input { background: rgb(255 255 255 / .6); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi); }
.plan, .conn { background: rgb(255 255 255 / .45); border-color: var(--glass-edge); transition: transform .2s var(--ease-out); }
.plan:hover, .conn:hover { transform: translateY(-1px); }
.pillbtn:not(.dark) { background: rgb(255 255 255 / .65); border: 1px solid var(--glass-edge); }
.tag { background: rgb(255 255 255 / .55); border-color: var(--glass-edge); }
.chip { background: var(--glass-strong); border-color: var(--glass-edge); animation: float-in .3s var(--ease-out) both; }
.pillform button, .plan button, .pillbtn { transition: transform .2s var(--ease-out), filter .2s; }
.pillform button:hover, .plan button:hover, .pillbtn:hover { transform: translateY(-1px); filter: drop-shadow(0 4px 8px rgb(79 123 233 / .35)); }

/* ── Layout ────────────────────────────────────────────────────────────
   The title, charts and chat bar are centered on the page itself: the board
   is three columns (equal side columns, content in the middle), and the shape
   panel sits at the right edge of the left column, next to the content. The
   panel keeps its proportions and shrinks to the room it has, so it never
   overlaps the content; below tablet width it's hidden, as on phones. */
:root {
  --board-h: max(440px, min(calc(100vh - 48px), 760px));
  --content-w: clamp(560px, 45vw, 720px);
  --side-gap: clamp(20px, 2.1vw, 36px);
  /* Natural panel width from its height, capped by the left column minus the gap
     (100vw less the body's 16px gutters on each side). */
  --panel-w: min(calc(var(--board-h) * 222 / 750), calc((100vw - 32px - var(--content-w)) / 2 - var(--side-gap)));
}
.board { display: grid; grid-template-columns: minmax(0, 1fr) var(--content-w) minmax(0, 1fr); gap: 0;
  width: 100%; max-width: none; height: var(--board-h); min-height: 0; }
.panel { grid-column: 1; justify-self: end; align-self: end; margin-right: var(--side-gap);
  width: var(--panel-w); height: auto; aspect-ratio: 222 / 750; }
.main { grid-column: 2; min-width: 0; height: 100%; justify-content: flex-start; padding-bottom: 0; }
.stage { justify-content: flex-start; }
.intro { margin-block: auto; padding-block: 48px 8px; }
.thread { margin-top: auto; }
.bar { width: min(100%, 500px); margin-top: 20px; }
.chips { width: min(100%, 500px); margin-top: 20px; }
.connpanel { width: min(100%, 560px); bottom: 56px; }
@media (max-width: 1023px) {
  .board { grid-template-columns: minmax(0, 720px); justify-content: center; }
  .panel { display: none; }
  .main { grid-column: 1; }
}

/* ── Phones: lighter work for smaller GPUs ─────────────────────────────── */
@media (max-width: 760px) {
  .board { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 48px); }
  .bar, .chips, .connpanel { width: 100%; }
  .intro { padding-block: 40px 8px; }
  .blob { width: 90vmax; height: 90vmax; opacity: .5; }
  .bar, .menu, .connpanel, .wlpop, .acct-link, .newchat, .acct summary, .tip { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

/* ── Reduced motion: everything still, final states shown ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bar::after, .msg.bot.streaming > div::after { display: none; }
  .app.chatting .intro { filter: none; transform: none; }
}

.faq .providers { margin-bottom: 12px; }