.web-app-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 8%, rgba(84, 215, 214, 0.08), transparent 30%),
    var(--pz-paper);
}
[hidden] { display: none !important; }

.web-app-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: 100%; }
.app-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 18px 14px; border-right: 1px solid var(--pz-line-faint); background: rgba(13, 15, 14, 0.88); }
.app-brand { align-self: flex-start; margin: 0 4px 22px; }
.new-chat-button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; color: var(--pz-ink); font: 700 14px var(--font-sans); border: 1px solid var(--pz-line); border-radius: var(--r-md); background: var(--pz-surface); cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base); }
.new-chat-button:hover { border-color: var(--pz-line-strong); background: var(--pz-surface-2); }
.new-chat-button span { color: var(--pz-lime); font-size: 20px; }
.mode-nav { display: grid; gap: 5px; margin-top: 18px; }
.mode-nav-button { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; color: var(--pz-muted); text-align: left; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; cursor: pointer; }
.mode-nav-button > span:first-child { color: var(--pz-faint); font-size: 18px; text-align: center; }
.mode-nav-button strong, .mode-nav-button small { display: block; }
.mode-nav-button strong { color: inherit; font-size: 14px; line-height: 1.3; }
.mode-nav-button small { margin-top: 2px; color: var(--pz-faint); font-size: 11px; }
.mode-nav-button:hover { color: var(--pz-ink); background: var(--pz-surface); }
.mode-nav-button.is-active { color: var(--pz-ink); border-color: rgba(200, 242, 95, 0.24); background: rgba(200, 242, 95, 0.08); }
.mode-nav-button.is-active > span:first-child { color: var(--pz-lime); }
.sidebar-bottom { display: grid; gap: 12px; margin-top: auto; }
.balance-card { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 14px; color: var(--pz-ink); text-align: left; border: 1px solid var(--pz-line); border-radius: var(--r-lg); background: var(--pz-surface); cursor: pointer; }
.balance-card small, .balance-card strong { display: block; }
.balance-card small { color: var(--pz-muted); font-size: 11px; }
.balance-card strong { margin-top: 2px; font: 700 16px var(--font-mono); }
.balance-plus { display: grid; place-items: center; width: 29px; height: 29px; color: var(--pz-lime-ink); border-radius: var(--r-pill); background: var(--pz-lime); }
.account-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid var(--pz-line-faint); border-radius: var(--r-lg); background: rgba(21, 24, 22, 0.64); }
.account-card small, .account-card strong { display: block; }
.account-card small { color: var(--pz-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.account-card strong { max-width: 142px; margin-top: 3px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-card button { padding: 6px 8px; color: var(--pz-muted); font: 600 10px var(--font-sans); border: 1px solid var(--pz-line); border-radius: var(--r-pill); background: transparent; cursor: pointer; }
.session-note { margin: 0; color: var(--pz-faint); font-size: 10px; line-height: 1.45; }
.sidebar-links { display: flex; gap: 12px; color: var(--pz-faint); font-size: 10px; }
.sidebar-links a:hover { color: var(--pz-muted); }

.chat-main { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; height: 100%; }
.chat-topbar { z-index: 2; display: flex; align-items: center; min-height: 66px; padding: 10px 24px; border-bottom: 1px solid var(--pz-line-faint); background: rgba(17, 19, 18, 0.78); backdrop-filter: var(--blur-chrome); }
.chat-title strong, .chat-title span { display: block; }
.chat-title strong { font-size: 14px; }
.chat-title span { margin-top: 3px; color: var(--pz-faint); font-size: 11px; }
.mobile-brand, .mobile-balance, .mobile-account { display: none; }
.conversation { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; padding: 42px max(24px, calc((100% - 820px) / 2)) 28px; }
.welcome-card { max-width: 760px; margin: min(10vh, 82px) auto 0; text-align: center; }
.welcome-mark { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 18px; color: var(--pz-lime-ink); font-size: 22px; font-weight: 900; border-radius: 14px; background: var(--pz-grad-brand); box-shadow: var(--glow-lime); }
.welcome-card h1 { margin: 5px 0 12px; font-size: clamp(34px, 6vw, 58px); letter-spacing: -0.045em; }
.welcome-card > p:not(.eyebrow) { max-width: 560px; margin: 0 auto; color: var(--pz-muted); line-height: 1.55; }
.prompt-suggestions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 30px; }
.prompt-suggestions button { min-height: 82px; padding: 14px; color: var(--pz-muted); text-align: left; font: 500 13px/1.45 var(--font-sans); border: 1px solid var(--pz-line); border-radius: var(--r-lg); background: rgba(21, 24, 22, 0.7); cursor: pointer; }
.prompt-suggestions button:hover { color: var(--pz-ink); border-color: var(--pz-line-strong); background: var(--pz-surface-2); }
.message-list { display: grid; gap: 28px; width: 100%; max-width: 820px; margin: 0 auto; }
.chat-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; align-items: start; }
.message-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 13px; font-weight: 800; }
.chat-message.user .message-avatar { color: var(--pz-cyan-ink); background: var(--pz-cyan); }
.chat-message.assistant .message-avatar { color: var(--pz-lime-ink); background: var(--pz-lime); }
.message-content { min-width: 0; padding-top: 5px; }
.message-content > p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.58; }
.message-meta { margin-top: 7px; color: var(--pz-faint); font: 11px var(--font-mono); }
.user-source-thumb { display: block; width: min(180px, 55vw); max-height: 180px; margin-top: 12px; object-fit: cover; border: 1px solid var(--pz-line); border-radius: var(--r-lg); }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.media-result { position: relative; overflow: hidden; min-height: 180px; margin: 0; border: 1px solid var(--pz-line); border-radius: var(--r-xl); background: var(--pz-surface); }
.media-result img, .media-result video { display: block; width: 100%; max-height: 520px; object-fit: contain; background: var(--pz-void); }
.media-result-actions { display: flex; gap: 6px; padding: 8px; }
.media-result-actions :is(a, button) { flex: 1; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid rgba(242, 239, 228, 0.14); border-radius: var(--r-pill); color: rgba(242, 239, 228, 0.65); background: transparent; font: 600 11px var(--font-sans); cursor: pointer; }
.media-result-actions :is(a, button):hover { color: var(--pz-lime); border-color: rgba(211, 243, 107, 0.5); }
.typing { display: inline-flex; gap: 5px; padding: 8px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--pz-lime); animation: typing 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.14s; }.typing i:nth-child(3) { animation-delay: 0.28s; }
@keyframes typing { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }

.composer-wrap { z-index: 3; width: min(900px, calc(100% - 34px)); margin: 0 auto; padding: 8px 0 max(14px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, var(--pz-paper) 72%, transparent); }
.composer { padding: 13px 14px 11px; border: 1px solid var(--pz-line-strong); border-radius: var(--r-xl); background: rgba(23, 26, 24, 0.96); box-shadow: var(--shadow-md); transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.composer:focus-within { border-color: rgba(242, 239, 228, 0.18); box-shadow: var(--shadow-md); }
.composer textarea { display: block; width: 100%; max-height: 180px; resize: none; padding: 3px 3px 14px; color: var(--pz-ink); font: 500 15px/1.5 var(--font-sans); border: 0; outline: 0; box-shadow: none; background: transparent; appearance: none; -webkit-appearance: none; }
.composer textarea:focus { outline: 0; box-shadow: none; }
.composer:has(textarea:focus-visible) { border-color: rgba(211, 243, 107, 0.44); box-shadow: 0 0 0 1px rgba(211, 243, 107, 0.18), var(--shadow-md); }
.composer textarea::placeholder { color: var(--pz-faint); }
.composer-toolbar, .composer-controls, .send-group { display: flex; align-items: center; }
.composer-toolbar { justify-content: space-between; gap: 12px; }
.composer-controls { min-width: 0; gap: 7px; }
.compact-select select, .upload-button { height: 34px; padding: 0 10px; color: var(--pz-muted); font: 600 11px var(--font-sans); border: 1px solid var(--pz-line); border-radius: var(--r-pill); outline: 0; background: var(--pz-surface); cursor: pointer; }
.mobile-mode-select { display: none; }
.compact-select select:focus { border-color: var(--pz-cyan); }
.upload-button { display: inline-flex; align-items: center; gap: 5px; }
.upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.send-group { flex: 0 0 auto; gap: 9px; }
.request-price { color: var(--pz-muted); font: 600 11px var(--font-mono); white-space: nowrap; }
.send-button { display: grid; place-items: center; width: 36px; height: 36px; color: var(--pz-lime-ink); font-size: 20px; border: 0; border-radius: 11px; background: var(--pz-lime); cursor: pointer; }
.send-button:disabled { color: var(--pz-faint); background: var(--pz-surface-3); cursor: wait; }
.composer-note { margin: 7px 0 0; color: var(--pz-faint); font-size: 9px; text-align: center; }
.composer-note a { text-decoration: underline; }
.upload-preview { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 0 0 8px 10px; padding: 7px 9px 7px 7px; border: 1px solid var(--pz-line); border-radius: var(--r-lg); background: var(--pz-surface); }
.upload-preview img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--r-md); }
.upload-preview span { max-width: 220px; overflow: hidden; color: var(--pz-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.upload-preview button { color: var(--pz-muted); font-size: 19px; border: 0; background: transparent; cursor: pointer; }

.payment-dialog { width: min(620px, calc(100% - 28px)); color: var(--pz-ink); padding: 24px; border: 1px solid var(--pz-line-strong); border-radius: var(--r-xl); background: var(--pz-paper-2); box-shadow: var(--shadow-lg); }
.payment-dialog::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); }
.auth-dialog { width: min(520px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; color: var(--pz-ink); padding: 0; border: 1px solid var(--pz-line-strong); border-radius: var(--r-xl); background: var(--pz-paper-2); box-shadow: var(--shadow-lg); }
.auth-dialog::backdrop { background: rgba(4, 5, 5, 0.84); backdrop-filter: blur(8px); }
.auth-panel { padding: 30px; text-align: center; }
.auth-mark { width: 46px; height: 46px; margin-bottom: 14px; }
.auth-panel h2 { margin: 5px 0 10px; font-size: clamp(27px, 6vw, 38px); letter-spacing: -.035em; }
.auth-copy { max-width: 410px; margin: 0 auto; color: var(--pz-muted); font-size: 13px; line-height: 1.55; }
.auth-providers { display: grid; gap: 9px; margin-top: 24px; }
.auth-provider { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; min-height: 52px; padding: 5px; color: var(--pz-ink); text-align: left; border: 1px solid var(--pz-line); border-radius: var(--r-lg); background: var(--pz-surface); cursor: pointer; }
.auth-provider::after { content: "→"; color: var(--pz-faint); text-align: center; }
.auth-provider:hover { border-color: var(--pz-line-strong); background: var(--pz-surface-2); }
.auth-provider > span { display: grid; place-items: center; width: 36px; height: 36px; margin-left: 2px; color: #fff; font: 800 12px var(--font-sans); border-radius: 10px; background: #2aabee; }
.auth-provider--max > span { color: #111; background: #b9f45a; }
.auth-provider--yandex > span { background: #fc3f1d; }
.auth-provider[aria-disabled="true"] { opacity: .56; cursor: not-allowed; }
.telegram-code { margin-top: 18px; padding: 14px; text-align: left; border: 1px solid rgba(84, 215, 214, .24); border-radius: var(--r-lg); background: rgba(84, 215, 214, .06); }
.telegram-code p { margin: 0 0 10px; color: var(--pz-muted); font-size: 12px; line-height: 1.45; }
.telegram-code > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.telegram-code input { min-width: 0; padding: 11px 12px; color: var(--pz-ink); font: 700 18px var(--font-mono); letter-spacing: .16em; border: 1px solid var(--pz-line); border-radius: var(--r-md); outline: 0; background: var(--pz-paper); }
.telegram-code input:focus { border-color: var(--pz-cyan); }
.telegram-code button { padding: 0 14px; color: var(--pz-lime-ink); font-weight: 800; border: 0; border-radius: var(--r-md); background: var(--pz-lime); cursor: pointer; }
.auth-note { margin: 14px 0 0; color: var(--pz-faint); font-size: 10px; line-height: 1.45; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-head h2 { margin: 4px 0 0; font-size: 30px; }
.dialog-head > button { color: var(--pz-muted); font-size: 27px; border: 0; background: transparent; cursor: pointer; }
.dialog-copy { color: var(--pz-muted); font-size: 14px; line-height: 1.55; }
.pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
.pack-button { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 12px 14px; color: var(--pz-ink); border: 1px solid var(--pz-line); border-radius: var(--r-lg); background: var(--pz-surface); cursor: pointer; }
.pack-button:hover { border-color: rgba(200, 242, 95, 0.5); background: var(--pz-surface-2); }
.pack-button strong, .pack-button span { display: block; text-align: left; }
.pack-button strong { font: 700 17px var(--font-mono); }.pack-button span { margin-top: 4px; color: var(--pz-muted); font-size: 11px; }
.pack-button > em { color: var(--pz-lime); font: normal 700 16px var(--font-mono); }
.pack-button.is-best::after { position: absolute; top: -7px; right: 10px; content: "ВЫГОДНО"; padding: 3px 6px; color: var(--pz-lime-ink); font-size: 8px; font-weight: 900; border-radius: var(--r-pill); background: var(--pz-lime); }
.payment-legal { margin: 18px 0 0; color: var(--pz-faint); font-size: 10px; line-height: 1.5; }.payment-legal a { text-decoration: underline; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; max-width: calc(100% - 32px); padding: 11px 15px; color: var(--pz-ink); font-size: 12px; border: 1px solid var(--pz-line-strong); border-radius: var(--r-pill); background: var(--pz-surface-3); box-shadow: var(--shadow-md); transform: translateX(-50%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 820px) {
  .web-app-shell { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .chat-topbar { min-height: 58px; padding: 8px 14px; }
  .mobile-brand { display: block; margin-right: 10px; }.mobile-brand .brand-mark { width: 34px; height: 34px; }
  .mobile-balance { display: block; margin-left: auto; padding: 8px 11px; color: var(--pz-ink); font: 700 11px var(--font-mono); border: 1px solid var(--pz-line); border-radius: var(--r-pill); background: var(--pz-surface); }
  .mobile-account { display: block; margin-left: 7px; padding: 8px 10px; color: var(--pz-muted); font: 700 10px var(--font-sans); border: 1px solid var(--pz-line); border-radius: var(--r-pill); background: var(--pz-surface); }
  .conversation { padding: 28px 17px 22px; }
  .welcome-card { margin-top: min(7vh, 50px); }
  .prompt-suggestions { grid-template-columns: 1fr; }.prompt-suggestions button { min-height: auto; }
  .composer-wrap { width: calc(100% - 18px); }
  .mobile-mode-select { display: inline-block; }
}

@media (max-width: 560px) {
  .chat-title span { display: none; }
  .welcome-card h1 { font-size: 38px; }.welcome-card > p:not(.eyebrow) { font-size: 14px; }
  .prompt-suggestions button:nth-child(3) { display: none; }
  .media-grid { grid-template-columns: 1fr; }
  .composer { padding: 11px; border-radius: 15px; }
  .composer-toolbar { align-items: flex-end; }
  .composer-controls { flex-wrap: wrap; gap: 5px; }
  .compact-select select, .upload-button { max-width: 145px; height: 31px; padding: 0 8px; font-size: 10px; }
  .request-price { display: none; }
  .composer-note { display: none; }
  .pack-grid { grid-template-columns: 1fr; }
  .payment-dialog { padding: 20px; }
  .auth-panel { padding: 24px 18px; }
  .telegram-code > div { grid-template-columns: 1fr; }
  .telegram-code button { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) { .conversation { scroll-behavior: auto; } .typing i { animation: none; opacity: .6; } }

/* ── Claude Design B v2: generation app ───────────────────── */
.web-app-body {
  background: radial-gradient(ellipse 55% 38% at 50% 0%, rgba(211, 243, 107, 0.05), transparent), var(--pz-paper);
}

.web-app-shell { grid-template-columns: 280px minmax(0, 1fr); }

.app-sidebar {
  padding: 20px 14px;
  border-right-color: rgba(242, 239, 228, 0.07);
  background: rgba(8, 10, 9, 0.72);
  overflow-y: auto;
}

.app-brand.brand {
  min-height: 0;
  gap: 10px;
  align-self: flex-start;
  margin: 2px 6px 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.app-brand .brand-mark {
  width: 27px;
  height: 27px;
  border-radius: 7px;
  background: var(--pz-lime);
  font-family: var(--font-display);
  font-weight: 700;
}

.new-chat-button {
  justify-content: center;
  min-height: 46px;
  color: var(--pz-lime-ink);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--pz-lime);
  box-shadow: 0 0 26px rgba(211, 243, 107, 0.18);
}
.new-chat-button span { color: inherit; font-size: 17px; }
.new-chat-button:hover { border-color: transparent; background: #e3fb92; }

.mode-nav { gap: 3px; margin-top: 22px; }
.mode-nav-button {
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  border-radius: 10px;
  color: rgba(242, 239, 228, 0.55);
}
.mode-nav-button > span:first-child { color: rgba(242, 239, 228, 0.35); font-size: 15px; }
.mode-nav-button strong { font-size: 13.5px; }
.mode-nav-button small { margin-top: 1px; color: rgba(242, 239, 228, 0.35); font-size: 10.5px; }
.mode-nav-button:hover { background: rgba(242, 239, 228, 0.04); }
.mode-nav-button.is-active { border-color: transparent; background: rgba(242, 239, 228, 0.07); }
.mode-nav-button.is-active > span:first-child { color: var(--pz-lime); }

.chat-history {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(242, 239, 228, 0.07);
}
.chat-history h2,
.chat-history-label {
  margin: 0 0 8px 6px;
  color: rgba(242, 239, 228, 0.35);
  font: 600 10px var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chat-history-list { display: grid; gap: 2px; }
.chat-history-empty { margin: 0; padding: 8px 10px; color: rgba(242, 239, 228, 0.28); font-size: 10.5px; line-height: 1.45; }
.chat-history-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: rgba(242, 239, 228, 0.6);
  background: transparent;
  font: 500 12.5px var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.chat-history-item > span:first-child { color: rgba(242, 239, 228, 0.35); font-size: 11px; }
.chat-history-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-item:hover { color: var(--pz-ink); background: rgba(242, 239, 228, 0.04); }
.chat-history-item.is-active { color: var(--pz-ink); background: rgba(211, 243, 107, 0.08); }
.chat-history-item.is-active > span:first-child { color: var(--pz-lime); }

.sidebar-bottom { gap: 10px; padding-top: 16px; border-top: 1px solid rgba(242, 239, 228, 0.07); }
.balance-card {
  padding: 12px 13px;
  border-color: rgba(242, 239, 228, 0.1);
  border-radius: 12px;
  background: rgba(242, 239, 228, 0.035);
}
.balance-card:hover { border-color: rgba(211, 243, 107, 0.38); }
.balance-card small { color: rgba(242, 239, 228, 0.4); font-size: 10px; }
.balance-card strong { color: var(--pz-lime); font-size: 17px; }
.balance-plus { width: auto; height: auto; color: rgba(242, 239, 228, 0.5); background: transparent; font-size: 12px; font-weight: 600; }
.account-card { padding: 4px 6px; border: 0; background: transparent; }
.account-card small { display: none; }
.account-card strong { max-width: 150px; color: rgba(242, 239, 228, 0.7); font-size: 12px; font-weight: 500; }
.account-card button { padding: 5px 8px; border: 0; color: rgba(242, 239, 228, 0.4); }
.account-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.account-avatar { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--pz-ink); background: rgba(242, 239, 228, 0.08); font-size: 11px; font-weight: 700; }
.session-note { display: none; }
.sidebar-links { padding: 0 6px; color: rgba(242, 239, 228, 0.3); }

.chat-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.chat-topbar {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  min-height: 56px;
  padding: 10px 18px;
  border: 0;
  background: linear-gradient(180deg, rgba(11, 13, 12, 0.68), transparent);
}
.chat-title { display: none; }

.conversation {
  width: 100%;
  max-width: 100%;
  padding: 36px max(24px, calc((100% - 780px) / 2)) 20px;
  overflow-x: hidden;
  scrollbar-color: rgba(242, 239, 228, 0.12) transparent;
}
.welcome-card { max-width: 700px; margin: min(11vh, 96px) auto 0; }
.welcome-card .eyebrow { margin: 0 0 18px; color: var(--pz-lime); font: 600 11px var(--font-mono); letter-spacing: 0.24em; }
.welcome-card h1 {
  margin: 0 0 16px;
  font: 700 clamp(38px, 5.5vw, 62px)/1 var(--font-display);
  letter-spacing: -0.035em;
}
.welcome-card > p:not(.eyebrow) { max-width: 480px; margin-inline: auto; color: rgba(242, 239, 228, 0.55); font-size: 15px; line-height: 1.65; }

.prompt-suggestions {
  position: relative;
  max-width: 680px;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 28px auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.prompt-suggestions button {
  flex: 0 1 auto;
  min-height: 38px;
  padding: 9px 14px;
  border-color: rgba(242, 239, 228, 0.12);
  border-radius: var(--r-pill);
  color: rgba(242, 239, 228, 0.68);
  background: rgba(11, 13, 12, 0.6);
  font-size: 12px;
  white-space: nowrap;
}
.prompt-suggestions button:hover { border-color: rgba(211, 243, 107, 0.5); color: var(--pz-ink); background: rgba(211, 243, 107, 0.04); }

.message-list { max-width: 780px; gap: 30px; }
.chat-message { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.chat-message.user { display: flex; justify-content: flex-end; }
.chat-message.user .message-avatar { display: none; }
.message-avatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--pz-lime-ink);
  background: var(--pz-lime);
  font: 700 12px var(--font-display);
}
.chat-message.user .message-content { max-width: 78%; padding: 13px 17px; border: 0; border-radius: 18px 18px 4px 18px; background: rgba(242, 239, 228, 0.08); }
.chat-message.assistant .message-content { padding-top: 4px; }
.message-content { color: rgba(242, 239, 228, 0.85); font-size: 14.5px; line-height: 1.55; }
.message-meta { color: rgba(242, 239, 228, 0.35); font: 11px var(--font-mono); }
.typing i { background: var(--pz-lime); }
.media-grid { gap: 12px; }
.media-result { border-color: rgba(242, 239, 228, 0.1); border-radius: 16px; background: var(--pz-surface); }

.composer-wrap { width: min(780px, calc(100% - 48px)); margin: 0 auto 18px; }
.upload-preview { border-color: rgba(242, 239, 228, 0.1); border-radius: 12px 12px 0 0; background: var(--pz-surface); }
.composer {
  padding: 14px 15px 12px;
  border-color: rgba(242, 239, 228, 0.14);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(18, 21, 18, 0.96), rgba(14, 16, 15, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}
.composer:focus-within { border-color: rgba(242, 239, 228, 0.18); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); }
.composer textarea { min-height: 44px; color: var(--pz-ink); font-size: 14.5px; line-height: 1.55; }
.composer textarea::placeholder { color: rgba(242, 239, 228, 0.32); }
.composer-toolbar { margin-top: 8px; }
.composer-controls { gap: 6px; }
.compact-select select,
.upload-button {
  height: 30px;
  padding: 0 11px;
  border-color: rgba(242, 239, 228, 0.12);
  border-radius: var(--r-pill);
  color: rgba(242, 239, 228, 0.62);
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
}
.compact-select select:hover,
.upload-button:hover { border-color: rgba(211, 243, 107, 0.4); color: var(--pz-ink); }
.compact-select select:focus-visible { outline-color: var(--pz-lime); }
.compact-select select option { color: var(--pz-ink); background: var(--pz-surface); }
.send-group { gap: 7px; padding: 3px 4px 3px 11px; border-radius: var(--r-pill); background: var(--pz-lime); }
.request-price { color: var(--pz-lime-ink); font: 700 11px var(--font-mono); }
.send-button { width: 32px; height: 32px; color: var(--pz-lime); background: var(--pz-lime-ink); box-shadow: none; }
.send-button:hover:not(:disabled) { background: #20251f; }
.composer-note { margin-top: 8px; color: rgba(242, 239, 228, 0.25); font-size: 9.5px; }

.auth-dialog,
.payment-dialog {
  border-color: rgba(242, 239, 228, 0.12);
  border-radius: 22px;
  background: linear-gradient(170deg, #131614, #0e100f);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}
.auth-dialog { width: min(460px, calc(100% - 24px)); }
.auth-panel { padding: 30px; }
.auth-mark { width: 42px; height: 42px; margin-bottom: 15px; border-radius: 12px; background: var(--pz-lime); box-shadow: 0 0 24px rgba(211, 243, 107, 0.18); }
.auth-panel .eyebrow { margin-bottom: 10px; text-align: center; font: 600 10px var(--font-mono); letter-spacing: 0.2em; }
.auth-panel h2 { font: 700 27px var(--font-display); letter-spacing: -0.025em; }
.auth-copy { max-width: 370px; margin: 10px auto 0; color: rgba(242, 239, 228, 0.5); font-size: 13px; line-height: 1.6; text-align: center; }
.auth-providers { gap: 8px; margin-top: 24px; }
.auth-provider {
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border-color: rgba(242, 239, 228, 0.12);
  border-radius: 14px;
  color: var(--pz-ink);
  background: rgba(242, 239, 228, 0.03);
}
.auth-provider::after { content: none; }
.auth-provider > .provider-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: white;
  font-size: 17px;
  font-weight: 800;
}
.auth-provider--telegram > .provider-icon { background: #2aabee; }
.auth-provider--max > .provider-icon { color: #10230b; background: #b9f45a; font-size: 10px; }
.auth-provider--yandex > .provider-icon { background: #fc3f1d; font-size: 16px; }
.auth-provider > .provider-copy {
  min-width: 0;
  width: auto;
  height: auto;
  display: block;
  place-items: initial;
  margin: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}
.auth-provider strong { display: block; font-size: 14px; }
.auth-provider small { display: block; margin-top: 2px; color: rgba(242, 239, 228, 0.4); font-size: 11px; }
.auth-provider > .provider-arrow {
  width: auto;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 0;
  color: rgba(242, 239, 228, 0.35);
  background: transparent;
  font: inherit;
  text-align: center;
}
.auth-provider:hover { border-color: rgba(211, 243, 107, 0.5); background: rgba(211, 243, 107, 0.04); }
.auth-provider[aria-disabled="true"] { color: rgba(242, 239, 228, 0.45); border-color: rgba(242, 239, 228, 0.07); background: transparent; }
.telegram-code { margin-top: 18px; border-color: rgba(211, 243, 107, 0.18); border-radius: 14px; background: rgba(211, 243, 107, 0.035); }
.telegram-code input { min-height: 50px; border-color: rgba(242, 239, 228, 0.15); border-radius: 12px; background: var(--pz-paper); font-size: 21px; letter-spacing: 0.3em; text-align: center; }
.telegram-code button { border-radius: var(--r-pill); color: var(--pz-lime-ink); background: var(--pz-lime); }
.auth-note { color: rgba(242, 239, 228, 0.35); }

.payment-dialog { width: min(560px, calc(100% - 24px)); padding: 32px 30px 26px; }
.dialog-head h2 { font: 700 26px var(--font-display); letter-spacing: -0.025em; }
.dialog-head .eyebrow { margin-bottom: 6px; font: 600 10px var(--font-mono); letter-spacing: 0.18em; }
.dialog-head button { width: 32px; height: 32px; border: 0; background: rgba(242, 239, 228, 0.05); }
.dialog-copy { color: rgba(242, 239, 228, 0.5); font-size: 13px; }
.pack-grid { gap: 8px; margin-top: 22px; }
.pack-button { min-height: 76px; border-color: rgba(242, 239, 228, 0.1); border-radius: 13px; background: rgba(242, 239, 228, 0.03); }
.pack-button:hover { border-color: rgba(211, 243, 107, 0.5); background: rgba(211, 243, 107, 0.04); }
.pack-button strong { font: 700 19px var(--font-display); }
.pack-button > em { color: var(--pz-lime); }
.pack-button.is-best { border-color: rgba(211, 243, 107, 0.32); background: rgba(211, 243, 107, 0.05); }
.pack-button.is-best::after { left: 14px; right: auto; background: var(--pz-lime); font-family: var(--font-mono); letter-spacing: 0.08em; }
.payment-legal { color: rgba(242, 239, 228, 0.28); text-align: center; }

.toast { bottom: 22px; border-color: rgba(242, 239, 228, 0.14); background: #1b1f1c; }

@media (max-width: 820px) {
  .web-app-shell { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .chat-topbar { min-height: 58px; padding: 8px 12px; }
  .mobile-brand { display: block; margin-right: 10px; }
  .mobile-brand .brand-mark { width: 34px; height: 34px; background: var(--pz-lime); }
  .mobile-balance,
  .mobile-account { border-color: rgba(242, 239, 228, 0.12); background: rgba(18, 21, 18, 0.9); }
  .conversation { padding: 62px 17px 22px; }
  .welcome-card { margin-top: min(8vh, 64px); }
  .prompt-suggestions { justify-content: flex-start; overflow-x: auto; mask-image: none; -webkit-mask-image: none; scrollbar-width: none; }
  .prompt-suggestions::-webkit-scrollbar { display: none; }
  .prompt-suggestions button { min-height: 36px; }
  .composer-wrap { width: calc(100% - 18px); max-width: calc(100% - 18px); margin-bottom: max(9px, env(safe-area-inset-bottom)); }
  .mobile-mode-select { display: inline-block; }
}

@media (max-width: 560px) {
  .welcome-card h1 { font-size: 40px; }
  .welcome-card > p:not(.eyebrow) { font-size: 14px; }
  .prompt-suggestions button:nth-child(3) { display: inline-flex; }
  .chat-message.user .message-content { max-width: 88%; }
  .media-grid { grid-template-columns: 1fr; }
  .composer { padding: 11px; border-radius: 15px; }
  .composer-controls { flex-wrap: nowrap; max-width: calc(100vw - 94px); overflow-x: auto; scrollbar-width: none; }
  .composer-controls::-webkit-scrollbar { display: none; }
  .compact-select { flex: 0 0 auto; }
  .compact-select select,
  .upload-button { max-width: 150px; height: 31px; padding: 0 9px; font-size: 10px; }
  .request-price { display: inline; }
  .composer-note { display: none; }
  .auth-panel { padding: 26px 18px; }
  .auth-panel h2 { font-size: 24px; }
  .auth-provider { grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 10px; padding-inline: 10px; }
  .auth-provider > .provider-icon { width: 38px; height: 38px; }
  .telegram-code > div { grid-template-columns: 1fr; }
  .telegram-code button { min-height: 42px; }
  .pack-grid { grid-template-columns: 1fr; }
  .payment-dialog { padding: 26px 18px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-history-item,
  .prompt-suggestions button,
  .media-result { transition: none; }
}

/* Claude reference fidelity: expanded generation composer. */
.composer-wrap {
  width: min(820px, calc(100% - 48px));
  margin-bottom: 18px;
}

.composer {
  padding: 14px 13px 12px;
  border-radius: 18px;
}

.composer textarea {
  min-height: 42px;
  padding: 3px 5px 11px;
}

.control-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.composer-toolbar {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 11px;
  margin-top: 5px;
}

.mobile-mode-select { display: none; }

.upload-button {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-color: rgba(242, 239, 228, 0.18);
  border-radius: 50%;
  color: rgba(242, 239, 228, 0.62);
  background: transparent;
}

.upload-button:hover {
  border-color: rgba(211, 243, 107, 0.48);
  color: var(--pz-ink);
}

.upload-glyph { display: grid; place-items: center; line-height: 1; }

.composer-field {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.composer-field--models { flex: 1 1 auto; }
.composer-field--aspects { flex: 0 1 auto; }

.composer-field-label {
  color: rgba(242, 239, 228, 0.34);
  font: 600 8.5px var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.choice-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.choice-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(242, 239, 228, 0.12);
  border-radius: var(--r-pill);
  color: rgba(242, 239, 228, 0.56);
  background: transparent;
  font: 600 10.5px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}

.choice-pill:hover:not(:disabled) {
  border-color: rgba(211, 243, 107, 0.42);
  color: var(--pz-ink);
}

.choice-pill.is-active {
  border-color: var(--pz-lime);
  color: var(--pz-lime-ink);
  background: var(--pz-lime);
}

.choice-pill:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.model-option strong,
.model-option small { font: inherit; }
.model-option small { opacity: 0.62; font-family: var(--font-mono); font-size: 8.5px; }

.ratio-icon {
  width: 10px;
  height: 13px;
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: 0.65;
}
.ratio-icon--landscape { width: 14px; height: 8px; }
.ratio-icon--square { width: 10px; height: 10px; }
.ratio-icon--portrait-34 { width: 9px; height: 12px; }
.ratio-icon--landscape-43 { width: 12px; height: 9px; }

.composer-divider {
  align-self: center;
  flex: 0 0 1px;
  width: 1px;
  height: 25px;
  background: rgba(242, 239, 228, 0.09);
}

.composer-footer {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 10px;
}

.count-select {
  min-width: 180px;
  display: grid;
  grid-template-columns: auto 104px 18px;
  align-items: center;
  gap: 8px;
}

.count-slider { width: 104px; display: grid; gap: 5px; padding-top: 5px; }

.count-select input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 3px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  outline: 0;
  background: linear-gradient(to right, var(--pz-lime) 0 var(--count-progress, 0%), rgba(242, 239, 228, 0.16) var(--count-progress, 0%) 100%);
  cursor: pointer;
}

.count-select input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--pz-lime);
  box-shadow: 0 0 10px rgba(211, 243, 107, 0.5);
  cursor: grab;
}

.count-select input[type="range"]::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(242, 239, 228, 0.16);
}

.count-select input[type="range"]::-moz-range-progress {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--pz-lime);
}

.count-select input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--pz-lime);
  box-shadow: 0 0 10px rgba(211, 243, 107, 0.5);
  cursor: grab;
}

.count-select input[type="range"]:active::-webkit-slider-thumb,
.count-select input[type="range"]:active::-moz-range-thumb { cursor: grabbing; }

.count-slider__ticks { display: flex; justify-content: space-between; padding-inline: 5px; }
.count-slider__ticks i { width: 3px; height: 3px; border-radius: 50%; background: rgba(242, 239, 228, 0.35); }

.count-select output {
  color: var(--pz-lime);
  font: 700 11px var(--font-mono);
  text-align: right;
}

.send-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 166px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 10px 0 20px;
  border-radius: var(--r-pill);
  color: var(--pz-lime-ink);
  background: var(--pz-lime);
  box-shadow: 0 0 28px rgba(211, 243, 107, 0.16);
  font-size: 13px;
  font-weight: 700;
}

.send-button-label { white-space: nowrap; }
.request-price { color: rgba(11, 13, 12, 0.62); font-size: 10px; }
.send-button-arrow {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-left: auto;
  border-radius: 50%;
  color: var(--pz-lime);
  background: var(--pz-lime-ink);
  font-size: 16px;
}

.send-button:hover:not(:disabled) { color: var(--pz-lime-ink); background: #e3fb92; }
.send-button:disabled { color: rgba(242, 239, 228, 0.34); background: var(--pz-surface-3); box-shadow: none; cursor: not-allowed; }
.send-button:disabled .request-price { color: inherit; }
.send-button:disabled .send-button-arrow { color: var(--pz-faint); background: var(--pz-paper); }

@media (max-width: 1120px) {
  .composer-field-label,
  .composer-divider { display: none; }
  .choice-pill { padding-inline: 8px; }
}

@media (max-width: 820px) {
  .composer-wrap { width: calc(100% - 18px); max-width: calc(100% - 18px); }
  .mobile-mode-select { display: block; flex: 0 0 auto; }
  .mobile-mode-select select {
    height: 34px;
    max-width: 120px;
    padding: 0 9px;
    border: 1px solid rgba(242, 239, 228, 0.14);
    border-radius: var(--r-pill);
    color: var(--pz-muted);
    background: transparent;
    font: 600 10px var(--font-sans);
  }
  .composer-toolbar {
    align-items: center;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }
  .composer-toolbar::-webkit-scrollbar { display: none; }
  .composer-field { flex: 0 0 auto; display: block; }
  .composer-field--models,
  .composer-field--aspects { flex-basis: auto; }
  .model-options,
  .aspect-options { flex-wrap: nowrap; }
  .composer-footer { display: flex; align-items: center; justify-content: space-between; }
}

@media (max-width: 560px) {
  .composer { padding: 11px; border-radius: 15px; }
  .composer textarea { min-height: 48px; }
  .composer-footer { margin-top: 8px; }
  .count-select { min-width: 130px; grid-template-columns: auto 72px 14px; gap: 5px; }
  .count-slider { width: 72px; }
  .send-button { min-width: 142px; height: 40px; padding-left: 16px; }
  .choice-pill { min-height: 31px; font-size: 10px; }
  .model-option small { display: none; }
}

/* Claude Design B v2 final archive: complete states and exact composer. */
@keyframes app-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes app-shimmer { from { transform: translateX(-110%); } to { transform: translateX(230%); } }
@keyframes app-gen-pulse { 0%, 100% { border-color: rgba(211, 243, 107, 0.18); } 50% { border-color: rgba(211, 243, 107, 0.55); } }
@keyframes app-gen-bar { from { width: 4%; } to { width: 93%; } }

.prompt-suggestions { display: block; max-width: 620px; }
.prompt-suggestions__track { width: max-content; display: flex; gap: 8px; animation: app-marquee 32s linear infinite; }
.prompt-suggestions__track::after { content: "Предметное фото аромата\00a0\00a0 · \00a0\00a0 Дом в лесу после дождя\00a0\00a0 · \00a0\00a0 Киберпанк-рынок ночью\00a0\00a0 · \00a0\00a0 Портрет в мягком свете"; align-self: center; padding-inline: 16px; color: rgba(242, 239, 228, 0.45); font-size: 12px; white-space: nowrap; }
.prompt-suggestions:hover .prompt-suggestions__track,
.prompt-suggestions:focus-within .prompt-suggestions__track { animation-play-state: paused; }

.composer-wrap { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 6px 0 18px; }
.composer { overflow: hidden; padding: 0; border-radius: 20px; background: rgba(18, 21, 18, 0.92); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); }
.composer textarea { min-height: 52px; padding: 16px 18px 6px; }
.composer-toolbar { align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 14px; margin: 0; padding: 8px 12px 12px; }
.composer-field--models { flex: 1 1 210px; }
.composer-field--aspects { flex: 0 1 auto; }
.choice-pill { min-height: 28px; padding-inline: 9px; font-size: 10px; }
.count-select { flex: 0 0 auto; min-width: 180px; grid-template-columns: auto 104px 18px; }
.send-button { min-width: 148px; height: 38px; margin-left: auto; padding-left: 18px; font-size: 12.5px; }
.send-button-arrow { width: 25px; height: 25px; }

.gallery-view { width: 100%; max-width: 780px; margin: 0 auto; }
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.gallery-head .eyebrow { margin: 0 0 8px; color: rgba(242, 239, 228, 0.35); font: 600 10px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.gallery-head h2 { margin: 0; font: 700 30px var(--font-display); letter-spacing: -0.025em; }
.gallery-filters { display: flex; gap: 5px; }
.gallery-filters button { min-height: 32px; padding: 6px 14px; border: 1px solid rgba(242, 239, 228, 0.12); border-radius: var(--r-pill); color: rgba(242, 239, 228, 0.55); background: transparent; font: 600 11.5px var(--font-sans); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.gallery-filters button:hover { color: var(--pz-ink); border-color: rgba(211, 243, 107, 0.45); }
.gallery-filters button.is-active { color: var(--pz-lime); border-color: var(--pz-lime); background: rgba(211, 243, 107, 0.1); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery-card { min-width: 0; }
.gallery-card__frame { position: relative; height: 210px; overflow: hidden; border: 1px solid rgba(242, 239, 228, 0.1); border-radius: 14px; background: var(--pz-surface); }
.gallery-card__frame img,
.gallery-card__frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.gallery-card__badge { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 9px; border-radius: var(--r-pill); color: var(--pz-ink); background: rgba(11, 13, 12, 0.8); font: 600 10px var(--font-mono); }
.gallery-card__footer { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.gallery-card__footer > span:first-child { overflow: hidden; color: rgba(242, 239, 228, 0.45); font: 500 10.5px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.gallery-card__footer > span:last-child { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.gallery-card__footer :is(a, button) { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(242, 239, 228, 0.12); border-radius: 50%; color: rgba(242, 239, 228, 0.55); background: transparent; font-size: 12px; cursor: pointer; }
.gallery-card__footer :is(a, button):hover { color: var(--pz-lime); border-color: rgba(211, 243, 107, 0.5); }
.gallery-empty { padding: 70px 20px; border: 1px dashed rgba(242, 239, 228, 0.14); border-radius: 18px; text-align: center; }
.gallery-empty__frog { display: inline-block; color: var(--pz-lime); opacity: 0.45; }
.gallery-empty h2 { margin: 14px 0 8px; font: 700 22px var(--font-display); }
.gallery-empty p { max-width: 330px; margin: 0 auto; color: rgba(242, 239, 228, 0.45); font-size: 13.5px; line-height: 1.6; }
.gallery-empty button { min-height: 42px; margin-top: 20px; padding: 0 24px; border: 0; border-radius: var(--r-pill); color: var(--pz-lime-ink); background: var(--pz-lime); font: 700 13px var(--font-sans); cursor: pointer; }
.gallery-empty button:hover { background: #e3fb92; }

.generation-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.generation-progress-card { position: relative; min-height: 320px; overflow: hidden; border: 1px solid rgba(211, 243, 107, 0.18); border-radius: 16px; background: linear-gradient(165deg, var(--pz-surface), var(--pz-paper-2)); animation: app-gen-pulse 2.4s ease-in-out infinite var(--delay); }
.generation-progress-card__shimmer { position: absolute; inset: 0 auto 0 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(211, 243, 107, 0.06) 45%, rgba(242, 239, 228, 0.09) 50%, rgba(211, 243, 107, 0.06) 55%, transparent); animation: app-shimmer 2.2s ease-in-out infinite var(--delay); }
.generation-progress-card__copy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.generation-progress-card__copy b { color: var(--pz-lime); font-size: 26px; }
.generation-progress-card__copy strong { color: rgba(242, 239, 228, 0.85); font: 600 13.5px var(--font-sans); }
.generation-progress-card__copy small { color: rgba(242, 239, 228, 0.4); font: 500 10.5px var(--font-mono); }
.generation-progress-card__bar { position: absolute; right: 14px; bottom: 14px; left: 14px; height: 3px; overflow: hidden; border-radius: var(--r-pill); background: rgba(242, 239, 228, 0.08); }
.generation-progress-card__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 4%; border-radius: inherit; background: var(--pz-lime); animation: app-gen-bar 58s cubic-bezier(0.3, 0.8, 0.6, 1) forwards; }
.generation-error { max-width: 480px; padding: 20px 22px; border: 1px solid rgba(255, 154, 140, 0.35); border-radius: 16px; background: rgba(255, 154, 140, 0.05); }
.generation-error strong { font: 700 15.5px var(--font-display); }
.generation-error p { margin: 12px 0 0; color: rgba(242, 239, 228, 0.65); font-size: 13.5px; line-height: 1.6; }
.generation-error-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.generation-error button { min-height: 36px; padding: 0 18px; border: 0; border-radius: var(--r-pill); color: var(--pz-lime-ink); background: var(--pz-lime); font: 700 12.5px var(--font-sans); cursor: pointer; }
.generation-error .generation-error-secondary { color: rgba(242, 239, 228, 0.72); border: 1px solid rgba(242, 239, 228, 0.18); background: transparent; }
.generation-error .generation-error-secondary:hover { color: var(--pz-lime); border-color: rgba(211, 243, 107, 0.48); }

.payment-dialog .dialog-copy b { color: var(--pz-lime); font: 700 13px var(--font-mono); }
.telegram-code > .telegram-code-entry { position: relative; display: block; }
.telegram-code-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.telegram-code-slots span { height: 54px; display: grid; place-items: center; border: 1px solid rgba(242, 239, 228, 0.15); border-radius: 12px; color: rgba(242, 239, 228, 0.3); background: var(--pz-paper); font: 700 22px var(--font-mono); }
.telegram-code-slots span.is-filled { color: var(--pz-ink); border-color: rgba(211, 243, 107, 0.5); }
.telegram-code-entry:focus-within .telegram-code-slots span { border-color: rgba(211, 243, 107, 0.34); }
.telegram-code-entry:focus-within .telegram-code-slots span.is-filled { border-color: var(--pz-lime); }
.telegram-code-entry #telegram-code { position: absolute; z-index: 2; inset: 0; width: 100%; height: 54px; padding: 0; opacity: 0.01; cursor: text; }
.telegram-code-submit { width: 100%; min-height: 48px; margin-top: 20px; }
.pack-button.is-selected { border-color: rgba(211, 243, 107, 0.5); background: rgba(211, 243, 107, 0.06); }
.payment-submit { width: 100%; min-height: 50px; margin-top: 22px; border: 0; border-radius: var(--r-pill); color: var(--pz-lime-ink); background: var(--pz-lime); box-shadow: 0 0 26px rgba(211, 243, 107, 0.22); font: 700 14.5px var(--font-sans); cursor: pointer; }
.payment-submit:hover:not(:disabled) { background: #e3fb92; }
.payment-submit:disabled { color: rgba(242, 239, 228, 0.4); background: var(--pz-surface-3); box-shadow: none; cursor: not-allowed; }

.web-app-body :is(button, a, input, textarea, select):focus-visible { outline: 3px solid var(--pz-lime); outline-offset: 3px; }
.composer textarea:focus-visible { outline: 0; }
.web-app-body :is(.new-chat-button, .mode-nav-button, .choice-pill, .send-button, .auth-provider, .pack-button, .payment-submit, .gallery-filters button, .gallery-card__footer a, .gallery-card__footer button, .gallery-empty button) { transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
.web-app-body :is(.new-chat-button, .choice-pill, .send-button, .auth-provider, .pack-button, .payment-submit, .gallery-filters button, .gallery-card__footer a, .gallery-card__footer button, .gallery-empty button):active:not(:disabled) { transform: scale(0.98); }

@media (max-width: 820px) {
  .prompt-suggestions__track { animation: none; }
  .prompt-suggestions__track::after { display: none; }
  .composer-wrap { width: calc(100% - 18px); max-width: calc(100% - 18px); padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  .composer-toolbar { flex-wrap: nowrap; overflow-x: auto; }
  .count-select { min-width: 138px; grid-template-columns: auto 78px 14px; }
  .count-slider { width: 78px; }
  .send-button { position: sticky; right: 0; min-width: 142px; }
  .choice-pill,
  .mobile-mode-select select,
  .upload-button,
  .gallery-filters button,
  .media-result-actions :is(a, button),
  .gallery-card__footer :is(a, button) { min-height: 44px; }
  .upload-button,
  .gallery-card__footer :is(a, button) { min-width: 44px; width: 44px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .composer { border-radius: 15px; }
  .composer textarea { min-height: 48px; padding: 13px 12px 6px; }
  .composer-toolbar { gap: 8px; padding: 7px 10px 10px; }
  .gallery-grid,
  .generation-progress-grid { grid-template-columns: 1fr; }
  .gallery-card__frame { height: min(112vw, 390px); }
  .gallery-filters { width: 100%; overflow-x: auto; }
  .generation-progress-card { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .prompt-suggestions__track,
  .generation-progress-card,
  .generation-progress-card__shimmer,
  .generation-progress-card__bar::after { animation: none; }
  .generation-progress-card__bar::after { width: 72%; }
}

/* Design archive 3: prompt helper, newcomer onboarding and stable video rail. */
.prompt-editor { position: relative; }
.upload-dropzone { display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; padding: 12px 14px; border: 1px dashed rgba(211, 243, 107, 0.35); border-radius: 12px; background: rgba(211, 243, 107, 0.04); }
.upload-dropzone:hover { border-color: var(--pz-lime); }
.upload-dropzone__icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; color: var(--pz-lime); border: 0; border-radius: 9px; background: rgba(211, 243, 107, 0.12); font-size: 18px; cursor: pointer; }
.upload-dropzone > span { min-width: 0; }
.upload-dropzone strong,
.upload-dropzone small { display: block; }
.upload-dropzone strong { color: var(--pz-ink); font-size: 13px; }
.upload-dropzone small { margin-top: 2px; overflow: hidden; color: rgba(242, 239, 228, 0.4); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.prompt-editor .improve-button {
  position: absolute;
  right: 14px;
  bottom: 6px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  color: rgba(242, 239, 228, 0.72);
  border: 1px solid rgba(211, 243, 107, 0.35);
  border-radius: var(--r-pill);
  background: rgba(211, 243, 107, 0.06);
  font: 700 11.5px var(--font-sans);
  cursor: pointer;
}
.prompt-editor .improve-button:hover { color: var(--pz-lime); border-color: rgba(211, 243, 107, 0.62); }
.prompt-editor .improve-button[aria-expanded="true"] { color: var(--pz-lime-ink); background: var(--pz-lime); }
.prompt-editor:has(.improve-button:not([hidden])) textarea { padding-right: 132px; }

.improve-panel { margin: 4px 12px 12px; padding: 14px; border: 1px solid rgba(211, 243, 107, 0.25); border-radius: 14px; background: rgba(211, 243, 107, 0.04); }
.improve-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.improve-panel__head > span { display: inline-flex; align-items: center; gap: 7px; color: var(--pz-lime); font: 700 11.5px var(--font-sans); }
.improve-panel__head > button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: rgba(242, 239, 228, 0.45); border: 0; border-radius: 50%; background: rgba(242, 239, 228, 0.05); font-size: 16px; cursor: pointer; }
.improve-panel__head > button:hover { color: var(--pz-ink); background: rgba(242, 239, 228, 0.1); }
.improve-loading { display: grid; gap: 8px; }
.improve-loading i { height: 62px; border-radius: 12px; background: linear-gradient(100deg, rgba(242, 239, 228, 0.04), rgba(242, 239, 228, 0.1), rgba(242, 239, 228, 0.04)); background-size: 220% 100%; animation: improve-shimmer 1.3s linear infinite; }
.improve-loading i:nth-child(2) { animation-delay: .14s; }
.improve-loading i:nth-child(3) { animation-delay: .28s; }
@keyframes improve-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
.improve-variants { display: grid; gap: 8px; }
.improve-variant { width: 100%; display: block; padding: 12px 14px; color: var(--pz-ink); text-align: left; border: 1px solid rgba(242, 239, 228, 0.12); border-radius: 12px; background: rgba(18, 21, 18, 0.7); font-family: var(--font-sans); cursor: pointer; }
.improve-variant:hover { border-color: rgba(211, 243, 107, 0.5); background: rgba(211, 243, 107, 0.05); }
.improve-variant b { display: inline-block; margin-bottom: 5px; padding: 2px 8px; color: var(--pz-lime-ink); border-radius: var(--r-pill); background: rgba(211, 243, 107, 0.85); font: 700 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.improve-variant span { display: block; color: rgba(242, 239, 228, 0.85); font-size: 13px; line-height: 1.55; }
.improve-panel__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.improve-panel__foot button { min-height: 32px; padding: 0 13px; color: rgba(242, 239, 228, 0.65); border: 1px solid rgba(242, 239, 228, 0.12); border-radius: var(--r-pill); background: transparent; font: 600 11px var(--font-sans); cursor: pointer; }
.improve-panel__foot button:hover { color: var(--pz-ink); border-color: rgba(242, 239, 228, 0.3); }
.improve-panel__foot span { color: rgba(242, 239, 228, 0.3); font: 500 10px var(--font-mono); }

.onboarding { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 12px; background: rgba(4, 5, 5, 0.86); backdrop-filter: blur(12px); }
.onboarding[hidden] { display: none; }
.onboarding-panel { width: min(480px, 100%); max-height: calc(100dvh - 24px); overflow: auto; padding: 0 30px 24px; border: 1px solid rgba(242, 239, 228, 0.12); border-radius: 22px; background: linear-gradient(170deg, #131614, #0e100f); box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6); }
.onboarding-topline { position: relative; z-index: 2; min-height: 54px; display: flex; align-items: center; justify-content: flex-end; }
.onboarding-topline button { min-height: 30px; padding: 0 13px; color: rgba(242, 239, 228, 0.5); border: 0; border-radius: var(--r-pill); background: rgba(242, 239, 228, 0.06); font: 600 11.5px var(--font-sans); cursor: pointer; }
.onboarding-topline button:hover { color: var(--pz-ink); background: rgba(242, 239, 228, 0.12); }
.onboarding-art { height: 168px; display: grid; place-items: center; margin: 0 -30px; background: radial-gradient(circle at 50% 55%, rgba(211, 243, 107, 0.18), transparent 60%), linear-gradient(160deg, #17200f, #0e100f); transition: background .2s ease; }
.onboarding-art span { width: 72px; height: 72px; display: grid; place-items: center; color: var(--pz-lime); border: 1px solid rgba(211, 243, 107, 0.3); border-radius: 20px; background: rgba(11, 13, 12, 0.5); box-shadow: 0 0 40px rgba(211, 243, 107, 0.25); font: 700 28px var(--font-display); }
.onboarding-kicker { margin: 22px 0 0; color: var(--pz-lime); font: 600 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.onboarding-panel h2 { margin: 8px 0 0; font: 700 26px var(--font-display); letter-spacing: -.025em; }
.onboarding-copy { margin: 12px 0 0; color: rgba(242, 239, 228, 0.6); font-size: 14px; line-height: 1.65; }
.onboarding-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.onboarding-dots { display: flex; gap: 7px; }
.onboarding-dots i { width: 7px; height: 7px; border-radius: var(--r-pill); background: rgba(242, 239, 228, 0.2); transition: width .2s ease, background .2s ease; }
.onboarding-dots i.is-active { width: 22px; background: var(--pz-lime); }
.onboarding-actions { display: flex; align-items: center; gap: 8px; }
.onboarding-actions button { height: 44px; border-radius: var(--r-pill); font: 700 13.5px var(--font-sans); cursor: pointer; }
.onboarding-back { width: 44px; padding: 0; color: rgba(242, 239, 228, 0.72); border: 1px solid rgba(242, 239, 228, 0.14); background: rgba(127, 216, 215, 0.06); }
.onboarding-next { display: inline-flex; align-items: center; gap: 8px; padding: 0 24px; color: var(--pz-lime-ink); border: 0; background: var(--pz-lime); box-shadow: 0 0 26px rgba(211, 243, 107, 0.22); }
.onboarding-next:hover { background: #e3fb92; }

.composer[data-mode="video"] .composer-toolbar,
.composer[data-mode="animate"] .composer-toolbar { flex-wrap: wrap; overflow: visible; }
.composer[data-mode="video"] .composer-field--models,
.composer[data-mode="animate"] .composer-field--models { order: -1; flex: 1 0 100%; width: 100%; }
.composer[data-mode="video"] .composer-field--models + .composer-divider,
.composer[data-mode="animate"] .composer-field--models + .composer-divider { display: none; }
.composer[data-mode="video"] .model-options,
.composer[data-mode="animate"] .model-options { overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; scrollbar-color: rgba(211, 243, 107, 0.35) transparent; }
.composer[data-mode="video"] .model-option,
.composer[data-mode="animate"] .model-option { flex: 0 0 auto; }

@media (max-width: 560px) {
  .prompt-editor:has(.improve-button:not([hidden])) textarea { min-height: 88px; padding-right: 12px; padding-bottom: 40px; }
  .prompt-editor .improve-button { right: 10px; bottom: 7px; }
  .improve-panel { margin-inline: 8px; padding: 12px; }
  .improve-panel__foot { align-items: flex-start; flex-direction: column; }
  .onboarding-panel { padding-inline: 20px; padding-bottom: 20px; border-radius: 18px; }
  .onboarding-topline { min-height: 50px; }
  .onboarding-art { height: 146px; margin-inline: -20px; }
  .onboarding-panel h2 { font-size: 23px; }
  .onboarding-copy { font-size: 13px; }
  .onboarding-footer { align-items: flex-end; }
  .onboarding-next { padding-inline: 18px; }
  .composer[data-mode="video"] .composer-toolbar,
  .composer[data-mode="animate"] .composer-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .composer[data-mode="video"] .composer-field--models,
  .composer[data-mode="animate"] .composer-field--models,
  .composer[data-mode="video"] .send-button,
  .composer[data-mode="animate"] .send-button { grid-column: 1 / -1; width: 100%; margin-left: 0; }
  .composer[data-mode="video"] .composer-field--aspects,
  .composer[data-mode="animate"] .composer-field--aspects { min-width: 0; overflow-x: auto; }
  .composer[data-mode="video"] .send-button,
  .composer[data-mode="animate"] .send-button { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .improve-loading i { animation: none; }
}

/* Archive 4 result actions: real download + fly-to-composer reference motion. */
.media-result {
  min-height: 0;
  display: grid;
  gap: 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.media-result-frame {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  border: 1px solid rgba(242, 239, 228, 0.1);
  border-radius: 16px;
  background: var(--pz-surface);
}

.media-result-frame img,
.media-result-frame video {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: var(--pz-void);
}

.media-result-actions {
  gap: 6px;
  padding: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.media-result-actions::-webkit-scrollbar { display: none; }

.media-result-actions .media-result-action {
  flex: 1 0 max-content;
  min-width: max-content;
  min-height: 36px;
  padding: 0 10px;
  color: rgba(242, 239, 228, 0.62);
  border-color: rgba(242, 239, 228, 0.14);
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.media-result-actions .media-result-action--download { color: var(--pz-ink); }
.media-result-actions .media-result-action--edit { flex: 1.35 0 auto; gap: 4px; white-space: nowrap; }
.media-result-actions .media-result-action--edit > span { white-space: nowrap; }

.media-result-actions .media-result-action:hover:not(:disabled) {
  color: var(--pz-lime);
  border-color: rgba(211, 243, 107, 0.52);
  background: rgba(211, 243, 107, 0.04);
}

.media-result-actions .media-result-action:active:not(:disabled) { transform: scale(.98); }

.media-result-actions .media-result-action:focus-visible {
  outline: 2px solid var(--pz-lime);
  outline-offset: 2px;
}

.media-result-actions button.media-result-action:disabled {
  opacity: .58;
  color: rgba(242, 239, 228, 0.55);
  border-color: rgba(211, 243, 107, 0.28);
  background: rgba(211, 243, 107, 0.05);
  cursor: wait;
}

.media-flight-clone {
  position: fixed;
  z-index: 60;
  display: block;
  margin: 0;
  object-fit: cover;
  overflow: hidden;
  pointer-events: none;
  transform-origin: top left;
  border: 1px solid rgba(211, 243, 107, 0.45);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  will-change: transform, opacity, border-radius;
}

.upload-preview.is-reference-arrival { animation: pz-reference-arrival .42s ease-out; }

@keyframes pz-reference-arrival {
  0% { transform: scale(.92); box-shadow: 0 0 0 0 rgba(211, 243, 107, 0); }
  55% { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(211, 243, 107, .55); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(211, 243, 107, 0); }
}

@media (max-width: 560px) {
  .media-result-actions .media-result-action { flex: 1 0 max-content; padding-inline: 8px; font-size: 10.5px; }
  .media-result-actions .media-result-action--edit { flex-grow: 1.25; padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .media-flight-clone { display: none; }
  .upload-preview.is-reference-arrival { animation: none; }
  .media-result-actions .media-result-action { transition: none; }
}