:root,[data-theme=light]{--bg:#ffffff;--bg-secondary:#f1f1f4;--bg-elevated:#ffffff;--text:#000000;--hint:#6a6e73;--separator:#e3e3e8;--accent:#1f74d6;--accent-text:#ffffff;--accent-tint:#e5effb;--accent-ink:#1a65bf;--brand:#e8590c;--brand-tint:#fff0e6;--brand-ink:#b8400c;--success:#2e9e55;--destructive:#e53935;--scrim:rgba(0, 0, 0, 0.38);--shadow-float:0 4px 16px rgba(0, 0, 0, 0.08);--shadow-button:0 6px 20px rgba(31, 116, 214, 0.28);}
[data-theme=dark]{--bg:#1c1c1e;--bg-secondary:#2c2c2e;--bg-elevated:#3a3a3c;--text:#ffffff;--hint:#98989e;--separator:#3a3a3c;--accent:#1f74d6;--accent-text:#ffffff;--accent-tint:#1d3350;--accent-ink:#7db8ff;--brand:#ff7a33;--brand-tint:#3a2418;--brand-ink:#ffa673;--success:#30d158;--destructive:#ff453a;--scrim:rgba(0, 0, 0, 0.5);--shadow-float:0 4px 16px rgba(0, 0, 0, 0.4);--shadow-button:0 6px 20px rgba(0, 0, 0, 0.5);}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1c1c1e;--bg-secondary:#2c2c2e;--bg-elevated:#3a3a3c;--text:#ffffff;--hint:#98989e;--separator:#3a3a3c;--accent:#1f74d6;--accent-text:#ffffff;--accent-tint:#1d3350;--accent-ink:#7db8ff;--brand:#ff7a33;--brand-tint:#3a2418;--brand-ink:#ffa673;--success:#30d158;--destructive:#ff453a;--scrim:rgba(0, 0, 0, 0.5);--shadow-float:0 4px 16px rgba(0, 0, 0, 0.4);--shadow-button:0 6px 20px rgba(0, 0, 0, 0.5); } }
:root{--radius-field:16px;--radius-button:14px;--radius-photo:28px;--radius-pill:999px;--font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-top:var(--tg-content-safe-area-inset-top, 0px);
  --safe-bottom:var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));}

/* Photobros mini-app — component styles. */
:where(.pb), :where(.pb) * { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
.pb {
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
:where(.pb) :where(button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; }

.pb-app {
  min-height: var(--tg-viewport-stable-height, 100vh); max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column;
}

/* ---------- Body ---------- */
.pb-body { flex: 1; padding: calc(var(--safe-top) + 12px) 16px 0; display: flex; flex-direction: column; gap: 12px; }
.pb-dim { transition: opacity .32s ease, filter .32s ease; }
.pb-locked .pb-dim { opacity: .35; pointer-events: none; filter: saturate(.6); }

/* ---------- PhotoDrop ---------- */
.pb-drop {
  position: relative; width: 100%; aspect-ratio: 1 / 1; flex: none;
  border-radius: var(--radius-photo); background: var(--bg-secondary); overflow: hidden;
  display: grid; place-items: center; text-align: center; cursor: pointer;
  transition: transform .2s ease;
}
.pb-drop:active { transform: scale(.985); }
.pb-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px; }
.pb-drop-plus { width: 64px; height: 64px; border-radius: var(--radius-pill); background: var(--bg); display: grid; place-items: center; color: var(--accent-ink); margin-bottom: 12px; box-shadow: var(--shadow-float); }
.pb-drop-title { font-size: 17px; line-height: 22px; font-weight: 600; }
.pb-drop-hint { font-size: 13px; line-height: 18px; color: var(--hint); }
.pb-drop-sample { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--accent-ink); font-weight: 500; }
.pb-drop img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: pb-photo-in .45s cubic-bezier(.2,.8,.2,1);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;
}
@keyframes pb-photo-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.pb-drop.is-filled { cursor: default; }
.pb-drop.is-filled:active { transform: none; }
.pb-glass {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--scrim); color: #fff !important; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 2;
}
.pb-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; height: 28px; padding: 0 10px 0 8px; border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--scrim); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: pb-photo-in .3s ease; pointer-events: none;
}
.pb-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: block; }
.pb-badge.is-original i { background: #fff; opacity: .6; }
.pb-shimmer { position: absolute; inset: 0; z-index: 1; background: var(--scrim); overflow: hidden; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.pb-shimmer::before {
  content: ""; position: absolute; inset: -20% -60%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 65%);
  animation: pb-sweep 1.4s ease-in-out infinite;
}
.pb-shimmer span { position: relative; }
@keyframes pb-sweep { from { transform: translateX(-45%); } to { transform: translateX(45%); } }

/* ---------- PromptField ---------- */
.pb-prompt {
  display: block; width: 100%; height: 102px; resize: none; flex: none;
  padding: 9px 16px; border: 0; outline: 0; border-radius: var(--radius-field);
  background: var(--bg-secondary); color: var(--text); caret-color: var(--accent);
  font: 400 16px/21px var(--font-sans); letter-spacing: -.2px;
  box-shadow: 0 0 0 0 transparent; transition: box-shadow .2s ease, opacity .32s ease, filter .32s ease;
}
.pb-prompt::placeholder { color: var(--hint); }
.pb-prompt:focus { box-shadow: 0 0 0 2px var(--accent) inset; }

/* ---------- ActionChip ---------- */
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px 6px; flex: none; }
.pb-chip {
  height: 32px; padding: 0 11px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: var(--bg-secondary); color: var(--text);
  font-size: 14px; line-height: 18px; font-weight: 500; letter-spacing: -.1px;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.pb-chip:active { transform: scale(.95); }
.pb-chip svg { flex: none; display: block; }
.pb-chip.is-on { background: var(--accent-tint); color: var(--accent-ink); }
.pb-chip-brand { background: var(--brand-tint); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand) inset; }
.pb-chip-brand svg { color: var(--brand); }
.pb-chip-brand.is-on { background: var(--brand); color: #fff; }
.pb-chip-brand.is-on svg { color: #fff; }

/* ---------- MainButton ---------- */
.pb-footer {
  position: sticky; bottom: 0; flex: none; margin-top: auto; background: var(--bg);
  padding: 12px 16px calc(16px + var(--safe-bottom));
}
.pb-main {
  width: 100%; height: 52px; border-radius: var(--radius-button);
  background: var(--accent); color: var(--accent-text) !important;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.2px;
  box-shadow: var(--shadow-button);
  transition: opacity .32s ease, transform .12s ease, box-shadow .32s ease, filter .32s ease;
}
.pb-main:active { transform: scale(.98); }
.pb-main[disabled] { box-shadow: none; cursor: default; }
.pb-locked .pb-main { box-shadow: none; }
.pb-secondary {
  display: block; width: 100%; height: 40px; margin-top: 4px;
  color: var(--accent-ink) !important; font-size: 15px; font-weight: 500; letter-spacing: -.2px;
}
.pb-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: pb-rot .8s linear infinite; }
@keyframes pb-rot { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */
.pb-toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom)); transform: translate(-50%, 12px); opacity: 0; z-index: 6;
  max-width: calc(100% - 32px); width: max-content; text-align: center;
  padding: 10px 16px; border-radius: 20px; background: rgba(30,30,32,.92); color: #fff;
  font-size: 14px; line-height: 18px; font-weight: 500; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.pb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pb-toast.is-error { background: var(--destructive); }