:root {
    --accent: #C8102E;
    --accent-soft: rgba(200,16,46,0.30);
    --selected: #1a1a1a;
    --bg: #f4f4f6;
    --pane: #ffffff;
    --fg: #1a1a1a;
    --muted: #6a6a6a;
    --line: #d8d8dc;
    --line-soft: #ececef;
    --warn-bg: #fff4d6;
    --warn-border: #f0c971;
    --warn-fg: #6b4c00;
    --r-sm: 8px;
    --r-md: 12px;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg); color: var(--fg);
    overflow: hidden;
  }

  /* visually-hidden — keeps inputs in the a11y tree */
  .vh {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  .app { display: flex; height: 100vh; }

  /* ---------- LEFT: chat ---------- */
  .chat {
    width: min(440px, 38vw); flex: 0 0 auto; min-width: 360px;
    display: flex; flex-direction: column;
    background: var(--pane);
    border-right: 1px solid var(--line);
  }
  .chat header {
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line-soft);
  }
  .chat header h1 {
    font-size: 20px; font-weight: 700; margin: 0;
    letter-spacing: -0.02em;
  }
  .chat header h1 .accent { color: var(--accent); letter-spacing: 0; }
  .chat header .sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; }

  .chat .body {
    flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5);
  }
  .section { margin-bottom: var(--s-5); }
  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-2); margin: 0 0 var(--s-2);
  }
  .section h2 {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); margin: 0;
  }
  .section-meta {
    font-size: 11px; color: var(--muted); display: flex; gap: var(--s-2); align-items: center;
  }
  .section-meta button {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--accent); font: inherit; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.06em; font-weight: 600;
  }
  .section-meta button:hover { text-decoration: underline; }
  .section-meta button:disabled { color: var(--muted); cursor: default; text-decoration: none; }

  .provider-hint {
    margin: var(--s-2) 0 0;
    font-size: 12px; line-height: 1.4; color: var(--muted);
    min-height: 1.4em;
  }

  /* reference upload — file input + thumbnail row */
  .ref-row {
    display: flex; gap: var(--s-2); align-items: center;
  }
  .ref-attach {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px var(--s-3);
    background: var(--pane); color: var(--fg);
    border: 1px dashed var(--line);
    border-radius: var(--r-sm);
    font-size: 13px; cursor: pointer; user-select: none;
    transition: border-color 0.1s, background 0.1s;
  }
  .ref-attach:hover { border-color: var(--muted); background: var(--bg); }
  .ref-row[data-has="true"] .ref-attach { flex: 0 1 auto; font-size: 12px; padding: 5px var(--s-2); }
  #reference-input:focus-visible + .ref-row .ref-attach,
  .ref-attach:focus-within {
    outline: 2px solid var(--accent); outline-offset: 1px;
  }
  .ref-thumb {
    position: relative;
    width: 64px; height: 64px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg);
    flex: 0 0 auto;
  }
  .ref-thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
  }
  .ref-clear {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px;
    border-radius: 50%; border: 0;
    background: rgba(0,0,0,0.65); color: white;
    font: inherit; font-size: 14px; line-height: 18px;
    cursor: pointer; padding: 0;
  }
  .ref-clear:hover { background: rgba(0,0,0,0.85); }
  .ref-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .ref-hint {
    margin: var(--s-2) 0 0;
    font-size: 12px; line-height: 1.4; color: var(--muted);
  }

  /* format <select> dropdown — matches .ref-search look */
  .format-select {
    width: 100%; border: 1px solid var(--line); background: var(--pane);
    border-radius: var(--r-sm); padding: 8px 10px;
    font: inherit; font-size: 14px; color: var(--fg);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236a6a6a'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px 18px;
    padding-right: 32px;
    cursor: pointer;
  }
  .format-select:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);
  }


  /* ---------- composer pinned to bottom ---------- */
  .composer {
    border-top: 1px solid var(--line-soft);
    padding: var(--s-3) var(--s-5) var(--s-4); background: var(--pane);
  }
  .composer .row {
    display: flex; align-items: flex-end; gap: var(--s-2);
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s-2);
    transition: border-color 0.1s, box-shadow 0.1s;
  }
  .composer .row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  textarea {
    flex: 1; min-height: 22px; max-height: 180px; resize: none;
    border: 0; outline: 0; background: transparent;
    font: inherit; padding: 6px var(--s-2);
  }
  button[type=submit] {
    flex: 0 0 auto;
    background: var(--accent); color: white; border: 0;
    width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: filter 0.1s, opacity 0.1s;
  }
  button[type=submit]:hover { filter: brightness(1.05); }
  button[type=submit]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  button[type=submit]:disabled { opacity: 0.5; cursor: not-allowed; }
  button[type=submit] svg { width: 18px; height: 18px; fill: white; }
  .composer .hint { font-size: 11px; color: var(--muted); margin-top: var(--s-2); }

  /* ---------- RIGHT: image stage ---------- */
  .stage {
    flex: 1;
    display: flex; flex-direction: column;
    background: var(--bg); position: relative;
  }
  .stage-bar {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line-soft);
    background: var(--pane); min-height: 56px;
  }
  .stage-bar .meta { font-size: 12px; color: var(--muted); }
  .stage-actions { display: flex; gap: var(--s-2); align-items: center; }
  a.dl, button.cancel {
    background: var(--fg); color: white; text-decoration: none;
    padding: 7px var(--s-3); border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
    border: 0; cursor: pointer; font-family: inherit;
  }
  a.dl:hover, button.cancel:hover { background: #333; }
  a.dl:focus-visible, button.cancel:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  button.cancel { background: var(--pane); color: var(--fg); border: 1px solid var(--line); }
  button.cancel:hover { background: var(--bg); }
  button.regen {
    background: var(--pane); color: var(--fg);
    border: 1px solid var(--line);
    padding: 7px var(--s-3); border-radius: var(--r-sm);
    font-size: 13px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
  }
  button.regen:hover { border-color: var(--muted); background: var(--bg); }
  button.regen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  button.regen svg { width: 14px; height: 14px; fill: currentColor; }

  button.vectorize {
    background: var(--accent); color: white;
    border: 1px solid var(--accent);
    padding: 7px var(--s-3); border-radius: var(--r-sm);
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer;
  }
  button.vectorize:hover { background: #a30d24; border-color: #a30d24; }
  button.vectorize:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* «Добавить лого» — inline picker on a vector result. */
  .logo-compose { display: inline-flex; gap: 6px; align-items: center; }
  .logo-compose select { font: inherit; font-size: 12px; padding: 2px 4px; max-width: 200px; }

  /* «Добавить текст» — editable Cyrillic text-layer overlay on a vector result. */
  .text-compose { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
  .text-compose select { font: inherit; font-size: 12px; padding: 2px 4px; }
  .text-compose textarea { font: inherit; font-size: 12px; padding: 4px 6px; min-width: 200px; flex: 1 1 220px; resize: vertical; min-height: 28px; }

  /* Print-prep — bleed + crop-marks control on a vector result. */
  .print-prep { display: inline-flex; gap: 6px; align-items: center; }
  .print-prep input[type="number"] { font: inherit; font-size: 12px; padding: 3px 4px; width: 52px; }
  .print-prep label { font-size: 12px; display: inline-flex; gap: 3px; align-items: center; color: var(--muted); }

  /* Brand palette chips — toggle which colors a generation should use. */
  .palette-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .palette-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: 12px; padding: 4px 9px 4px 6px; border: 1px solid var(--line, #d0d0d0);
    border-radius: 999px; user-select: none; opacity: 0.45; transition: opacity .12s, border-color .12s; }
  .palette-chip .dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.25); flex: none; }
  .palette-chip.on { opacity: 1; border-color: #888; }
  .palette-chip input { position: absolute; opacity: 0; pointer-events: none; }
  .palette-all { font: inherit; font-size: 12px; background: none; border: 1px solid var(--line, #d0d0d0);
    border-radius: 6px; padding: 1px 8px; cursor: pointer; color: inherit; }

  .stage-toast {
    position: absolute; top: var(--s-3); left: 50%; transform: translateX(-50%);
    z-index: 5; max-width: 80%;
    background: #fde7ea; border: 1px solid #f5b3bd; color: #8b0a1f;
    padding: 10px var(--s-3); border-radius: var(--r-sm);
    font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: flex; align-items: center; gap: var(--s-2);
  }
  .stage-toast button {
    background: none; border: 0; cursor: pointer; color: inherit;
    font-size: 16px; line-height: 1; padding: 0 4px;
  }

  .stage-body {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: var(--s-5); overflow: auto;
  }
  .stage-body img {
    max-width: 100%; max-height: 100%;
    border-radius: var(--r-md);
    box-shadow: 0 8px 30px rgba(0,0,0,0.10);
    background: white;
    cursor: zoom-in;
    transition: filter 0.1s;
  }
  .stage-body img:hover { filter: brightness(1.02); }

  /* lightbox dialog */
  dialog.lightbox {
    border: 0; padding: 0; background: transparent;
    max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
    overflow: hidden;
  }
  dialog.lightbox::backdrop { background: rgba(0,0,0,0.85); }
  .lightbox-inner {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-5);
    cursor: zoom-out;
  }
  .lightbox-inner img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border-radius: var(--r-sm);
    cursor: default;
  }
  .lightbox-bar {
    position: absolute; top: 0; right: 0; left: 0;
    padding: var(--s-3) var(--s-5);
    display: flex; justify-content: flex-end; gap: var(--s-2);
    pointer-events: none;
  }
  .lightbox-bar a, .lightbox-bar button {
    pointer-events: auto;
    background: rgba(255,255,255,0.12); color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 7px var(--s-3); border-radius: var(--r-sm);
    font: inherit; font-size: 13px; font-weight: 500;
    text-decoration: none; cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.1s;
  }
  .lightbox-bar a:hover, .lightbox-bar button:hover {
    background: rgba(255,255,255,0.22);
  }
  .lightbox-bar a:focus-visible, .lightbox-bar button:focus-visible {
    outline: 2px solid white; outline-offset: 2px;
  }
  .empty-frame {
    border: 2px dashed var(--line);
    border-radius: var(--r-md);
    background: var(--pane);
    /* Fixed width so aspect-ratio gives a stable height. Using max-width here
       collapses the frame to the wrapped content's natural width — Russian
       headings wrap to a few short lines and the frame ends up tiny. */
    width: min(70%, 480px);
    max-height: 70vh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-5);
    container-type: inline-size;
    transition: aspect-ratio 0.2s;
  }
  /* For very narrow frames (Roll-up 2:5, story 9:16) hide the icon and trim
     the heading — the frame's aspect itself is the cue. */
  @container (max-width: 220px) {
    .empty .icon { display: none; }
    .empty h3 { font-size: 13px; }
    .empty p { font-size: 11px; }
  }
  .empty {
    text-align: center; color: var(--muted); max-width: 360px;
  }
  .empty .icon {
    width: 64px; height: 64px; margin: 0 auto var(--s-3);
    border: 2px dashed var(--muted); border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted);
  }
  .empty .icon svg { width: 32px; height: 32px; }
  .empty h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--fg); }
  .empty p { margin: 0; font-size: 13px; }

  .loading { text-align: center; color: var(--muted); }
  .spinner {
    width: 40px; height: 40px; margin: 0 auto var(--s-3);
    border: 3px solid var(--line); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--fg); }
  .loading p { margin: 0; font-size: 13px; max-width: 320px; }
  .loading .elapsed {
    margin-top: var(--s-2); font-variant-numeric: tabular-nums;
    font-size: 12px; color: var(--muted); letter-spacing: 0.02em;
  }
  .chat[data-locked="true"] {
    pointer-events: none; opacity: 0.55;
    transition: opacity 0.1s;
  }

  /* variant compare grid on the stage */
  .variants {
    display: grid; gap: var(--s-3); width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-content: start; padding: var(--s-2);
  }
  .variant-card {
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--pane); overflow: hidden;
    display: flex; flex-direction: column;
  }
  .variant-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #111; }
  .variant-card button {
    font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    border: 0; border-top: 1px solid var(--line-soft);
    background: var(--pane); color: var(--fg); padding: 8px;
  }
  .variant-card button:hover { background: var(--selected); color: white; }

  /* "История" button in the stage-bar — same visual weight as regen */
  button.open-gallery {
    background: var(--pane); color: var(--fg);
    border: 1px solid var(--line);
    padding: 7px var(--s-3); border-radius: var(--r-sm);
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  button.open-gallery:hover { border-color: var(--muted); background: var(--bg); }
  button.open-gallery:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .gallery-count {
    background: var(--accent); color: white;
    font-size: 11px; font-weight: 600; line-height: 1;
    padding: 2px 6px; border-radius: 999px;
    min-width: 18px; text-align: center;
  }
  .gallery-count[hidden] { display: none; }

  /* full-history modal */
  dialog.gallery {
    border: 0; padding: 0; background: var(--pane); color: var(--fg);
    border-radius: var(--r-md);
    width: min(1200px, 95vw); max-width: 95vw;
    height: min(900px, 90vh); max-height: 90vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  }
  dialog.gallery::backdrop { background: rgba(20,20,26,0.6); backdrop-filter: blur(2px); }
  .gallery-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid var(--line-soft);
    background: var(--pane);
  }
  .gallery-bar h2 { margin: 0; font-size: 16px; font-weight: 600; }
  .gallery-meta { font-size: 12px; color: var(--muted); }
  .gallery-spacer { flex: 1; }
  button.gallery-ghost {
    background: var(--pane); color: var(--fg);
    border: 1px solid var(--line);
    padding: 6px var(--s-3); border-radius: var(--r-sm);
    font: inherit; font-size: 13px; cursor: pointer;
  }
  button.gallery-ghost:hover { border-color: var(--muted); background: var(--bg); }
  button.gallery-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .gallery-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--s-4) var(--s-5);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-3);
    align-content: start;
    background: var(--bg);
  }
  .gallery-empty {
    margin: auto; padding: var(--s-5);
    color: var(--muted); font-size: 14px; text-align: center;
  }
  .gallery-card {
    position: relative;
    background: var(--pane);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
    display: flex; flex-direction: column;
    transition: border-color 0.1s, transform 0.1s, box-shadow 0.1s;
  }
  .gallery-card:hover {
    border-color: var(--selected);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  }
  .gallery-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .gallery-card .thumb {
    width: 100%; aspect-ratio: 4 / 3;
    background: #111; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .gallery-card .thumb img {
    max-width: 100%; max-height: 100%;
    object-fit: contain; display: block;
  }
  .gallery-card .prompt {
    margin: 0; padding: var(--s-3);
    font-size: 13px; line-height: 1.35; color: var(--fg);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden;
    flex: 1 1 auto;
  }
  .gallery-card footer {
    padding: 0 var(--s-3) var(--s-3);
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--muted);
  }
  .gallery-card footer .badge {
    background: var(--selected); color: white;
    padding: 2px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .gallery-card footer .pill {
    background: var(--bg); color: var(--fg);
    padding: 2px 6px; border-radius: 4px;
    font-size: 10px; border: 1px solid var(--line-soft);
  }
  .gallery-card footer time { margin-left: auto; }
  .gallery-card .delete {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px;
    background: rgba(20,20,26,0.7); color: white;
    border: 0; border-radius: 50%;
    font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.1s, background 0.1s;
  }
  .gallery-card:hover .delete,
  .gallery-card:focus-within .delete { opacity: 1; }
  .gallery-card .delete:hover { background: var(--accent); }
  .gallery-card .delete:focus-visible { outline: 2px solid white; outline-offset: 2px; opacity: 1; }
  /* favorite star — top-left, always visible (and gold when active) */
  .gallery-card .fav {
    position: absolute; top: 6px; left: 6px;
    width: 26px; height: 26px;
    background: rgba(20,20,26,0.7); color: white;
    border: 0; border-radius: 50%;
    font-size: 14px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .gallery-card .fav[aria-pressed="true"] { background: #e6a700; }
  .gallery-card .fav:focus-visible { outline: 2px solid white; outline-offset: 2px; }
  .gallery-card .use-ref {
    margin-left: 6px;
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--line-soft); border-radius: 4px;
    font: inherit; font-size: 10px; padding: 2px 6px; cursor: pointer;
  }
  .gallery-card .use-ref:hover { border-color: var(--selected); }
  .gallery-bar .gallery-filter {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--muted); cursor: pointer;
  }

  /* ---------- responsive ---------- */
  @media (max-width: 1100px) {
    .chat { width: 380px; min-width: 320px; }
  }
  @media (max-width: 820px) {
    body { overflow: auto; }
    .app { flex-direction: column; height: auto; }
    .chat { width: 100%; min-width: 0; flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .chat .body { max-height: 50vh; }
    .stage { min-height: 40vh; }
  }