/* ReklamAI - Лента (feed). 1:1 port of Pencil frame Cj2na. Warm-light.
   Self-contained (literal values). Replaces lovable-shell.css on library.html.
   Chrome uses lib-* classes; the masonry tiles are the reklamai.js-injected
   .lv-library-item cards, restyled here as image-first feed tiles. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

* { box-sizing: border-box; }
.hidden { display: none !important; }
html { min-height: 100%; -webkit-font-smoothing: antialiased; }
body.app-shell {
  margin: 0; min-height: 100vh; background: #FBFAF7; color: #403C35;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; }
input[type="checkbox"], input[type="radio"] { accent-color: #F1581E; }
.lib-ico { display: block; flex: none; }

/* brand bar + top bar */
.lib-brandbar { height: 3px; background: linear-gradient(90deg, #F8743E, #F1581E 50%, #E04E18); }
.lib-top {
  position: sticky; top: 0; z-index: 60; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: #FBFAF7; border-bottom: 1px solid #DCD8D0;
}
.lib-logo { display: flex; align-items: center; gap: 10px; }
.lib-glyph { position: relative; width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(180deg, #F8743E, #F1581E 55%, #E04E18); }
.lib-glyph .b1 { position: absolute; left: 6.5px; top: 6px; width: 11px; height: 14px; border-radius: 2px; background: rgba(255,255,255,0.48); }
.lib-glyph .b2 { position: absolute; left: 11.5px; top: 8px; width: 11px; height: 14px; border-radius: 2px; background: #FFFFFF; }
.lib-glyph .dot { position: absolute; left: 14.5px; top: 13.5px; width: 4px; height: 4px; border-radius: 50%; background: #F1581E; z-index: 2; }
.lib-word { font-size: 16px; font-weight: 600; color: #28241E; letter-spacing: -0.2px; }

.lib-tabs { display: flex; align-items: center; gap: 8px; }
.lib-tab { padding: 7px 14px; border-radius: 10px; font-family: "JetBrains Mono", monospace; font-size: 13px; color: #615C53; background: transparent; }
.lib-tab.is-active { background: #FCEFE7; color: #F1581E; font-weight: 600; }
.lib-tab:hover { color: #28241E; }

.lib-right { display: flex; align-items: center; gap: 20px; }
.lib-links { display: flex; align-items: center; gap: 20px; }
.lib-links a { font-size: 14px; font-weight: 500; color: #615C53; }
.lib-links a:hover { color: #28241E; }
.lib-credits {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px;
  background: rgba(251,250,247,0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid #DCD8D0; box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(40,36,30,0.08);
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 600; color: #403C35;
}
.lib-credits .lib-ico { color: #F1581E; }
.lib-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #EAE7E0; border: 1px solid #DCD8D0; font-size: 14px; font-weight: 600; color: #615C53; cursor: pointer; }
.lib-avatar:hover { border-color: #C5C0B6; }

/* create wrap + create bar */
.lib-create-wrap { display: flex; justify-content: center; padding: 28px 24px 20px; background: #FBFAF7; border-bottom: 1px solid #DCD8D0; }
.lib-cbar {
  width: min(760px, 100%); display: flex; align-items: center; gap: 10px; height: 64px;
  padding: 0 8px; border-radius: 16px; background: #F4F2ED; border: 1px solid #DCD8D0;
  box-shadow: 0 6px 18px -2px rgba(40,36,30,0.08);
}
.lib-up { flex: none; width: 52px; height: 52px; border-radius: 12px; background: #EAE7E0; border: 1px solid #DCD8D0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #615C53; cursor: pointer; }
.lib-up:hover { border-color: #C5C0B6; }
.lib-up .cap { font-size: 9px; color: #8E887D; }
.lib-brief { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lib-brief input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 15px; color: #28241E; }
.lib-brief input::placeholder { color: #8E887D; }
.lib-roles { display: flex; align-items: center; gap: 6px; }
.lib-role { padding: 6px 10px; border-radius: 9999px; background: #FCEFE7; border: 1px solid #F1581E;
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; color: #B83E12; white-space: nowrap; }
.lib-submit {
  flex: none; width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(180deg, #F8743E, #F1581E 55%, #E04E18);
  box-shadow: inset 0 1px 0 rgba(255,217,196,0.65), 0 4px 12px -2px rgba(241,88,30,0.4);
  transition: transform 0.15s cubic-bezier(0.16,1,0.3,1);
}
.lib-submit:hover { transform: translateY(-1px); }

/* category row */
.lib-cats-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1440px; margin: 0 auto; width: 100%; padding: 20px 24px 16px; flex-wrap: wrap; }
.lib-cats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-cat { padding: 7px 14px; border-radius: 10px; background: #EAE7E0; font-size: 13px; font-weight: 500; color: #615C53; }
.lib-cat.is-active { background: #FCEFE7; color: #B83E12; }
.lib-cat:hover { color: #28241E; }
.lib-toggle { display: flex; align-items: center; gap: 14px; font-family: "JetBrains Mono", monospace; font-size: 12px; }
.lib-toggle a { color: #8E887D; }
.lib-toggle a.is-active { color: #F1581E; }

/* masonry feed — data-library-grid is the container reklamai.js fills */
[data-library-grid] {
  columns: 4; column-gap: 20px; max-width: 1440px; margin: 0 auto; width: 100%;
  padding: 4px 24px 48px; display: block;
}
[data-library-grid] > * { break-inside: avoid; margin-bottom: 20px; }

/* injected pack/generation tiles */
.lv-library-item {
  position: relative; display: block; break-inside: avoid; margin-bottom: 20px;
  border-radius: 12px; overflow: hidden; background: #EAE7E0; cursor: pointer;
  border: 1px solid #DCD8D0; transition: box-shadow 0.2s, transform 0.2s;
}
.lv-library-item:hover { box-shadow: 0 20px 40px -20px rgba(241,88,30,0.4); transform: translateY(-2px); }
.lv-library-media { display: block; width: 100%; }
.lv-library-media img, .lv-library-media video { display: block; width: 100%; height: auto; }
.lv-library-placeholder { display: grid; place-items: center; aspect-ratio: 3/4; font-family: "JetBrains Mono", monospace;
  font-size: 28px; font-weight: 700; color: #C5C0B6; background: #EAE7E0; }
/* status badge top-left */
.lv-library-status {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 3px 9px; border-radius: 8px; background: rgba(251,250,247,0.9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 600; color: #28241E;
}
/* copy → bottom overlay revealed on hover */
.lv-library-copy {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 14px;
  background: linear-gradient(transparent, rgba(40,36,30,0.88));
  opacity: 0; transition: opacity 0.2s; color: #FFFFFF;
}
.lv-library-item:hover .lv-library-copy { opacity: 1; }
.lv-library-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lv-library-title { margin: 0; font-size: 14px; font-weight: 600; color: #FFFFFF; }
.lv-library-sub { margin: 2px 0 0; font-size: 12px; color: rgba(255,255,255,0.7); }
.lv-library-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; color: rgba(255,255,255,0.65); }

/* loading / empty / notice states */
.lv-library-loading { grid-column: 1/-1; column-span: all; text-align: center; padding: 60px 20px; color: #8E887D; }
.lv-library-loading span { display: inline-block; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #DCD8D0; border-top-color: #F1581E; animation: lib-spin 0.8s linear infinite; margin-bottom: 14px; }
@keyframes lib-spin { to { transform: rotate(360deg); } }
.lv-library-loading p { margin: 0; font-size: 14px; }
.lv-library-empty { column-span: all; max-width: 520px; margin: 60px auto; text-align: center;
  background: #F4F2ED; border: 1px solid #DCD8D0; border-radius: 16px; padding: 40px; }
.lv-app-kicker { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8E887D; }
.lv-pack-title { margin: 10px 0 8px; font-size: 24px; font-weight: 700; color: #28241E; letter-spacing: -0.01em; }
.lv-app-sub { margin: 0; font-size: 15px; color: #615C53; }
.lv-app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px;
  border-radius: 10px; font-size: 15px; font-weight: 600; color: #28241E; background: #EAE7E0; border: 1px solid #DCD8D0; }
.lv-app-btn.primary { color: #FFFFFF; background: linear-gradient(180deg, #F8743E, #F1581E 55%, #E04E18);
  border: none; box-shadow: inset 0 1px 0 rgba(255,217,196,0.6), 0 10px 24px -10px rgba(241,88,30,0.45); }
.lv-library-sync-note { column-span: all; border-radius: 12px; padding: 14px 16px; font-size: 14px;
  border: 1px solid #DCD8D0; background: #F4F2ED; color: #615C53; margin-bottom: 20px; }
.lv-library-sync-note.is-warn { border-color: #F7CDB4; background: #FBEFD6; color: #B8740F; }

/* responsive */
@media (max-width: 1180px) { [data-library-grid] { columns: 3; } }
@media (max-width: 860px) {
  [data-library-grid] { columns: 2; }
  .lib-tabs, .lib-links { display: none; }
}
@media (max-width: 560px) {
  [data-library-grid] { columns: 1; }
  .lib-cbar { flex-wrap: wrap; height: auto; padding: 10px; }
  .lib-brief { order: -1; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-library-item, .lib-submit { transition: none; }
  .lv-library-loading span { animation: none; }
}

/* ── motion polish (auto) ── */
/* feed cards: refine the existing lift, add eased shadow + cover-zoom + focus ring */
.lv-library-item {
  transition:
    box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),
    transform 0.4s cubic-bezier(0.16,1,0.3,1),
    border-color 0.3s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.lv-library-item:hover {
  transform: translateY(-4px);
  border-color: #F7CDB4;
  box-shadow: 0 22px 44px -22px rgba(241,88,30,0.42);
}
.lv-library-item:active { transform: translateY(-1px); }
.lv-library-item:focus-visible {
  outline: none;
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px rgba(241,88,30,0.4), 0 22px 44px -22px rgba(241,88,30,0.42);
}
/* subtle cover zoom on hover (compositor-friendly) */
.lv-library-media img,
.lv-library-media video {
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.lv-library-item:hover .lv-library-media img,
.lv-library-item:hover .lv-library-media video,
.lv-library-item:focus-visible .lv-library-media img,
.lv-library-item:focus-visible .lv-library-media video {
  transform: scale(1.035);
}
/* status badge gently settles up; copy overlay eases in */
.lv-library-status { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.lv-library-item:hover .lv-library-status { transform: translateY(-1px); }
.lv-library-copy { transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1); }
.lv-library-item:focus-visible .lv-library-copy { opacity: 1; }

/* filter chips / category + tab pills: smooth tint, hover-lift, focus ring */
.lib-cat,
.lib-tab,
.lib-role {
  transition:
    color 0.25s cubic-bezier(0.16,1,0.3,1),
    background-color 0.25s cubic-bezier(0.16,1,0.3,1),
    transform 0.25s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s cubic-bezier(0.16,1,0.3,1),
    border-color 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lib-cat:hover,
.lib-tab:hover { transform: translateY(-1px); }
.lib-cat:active,
.lib-tab:active { transform: translateY(0) scale(0.98); }
.lib-cat:focus-visible,
.lib-tab:focus-visible,
.lib-role:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(241,88,30,0.4);
}

/* primary submit pill: keep its lift, add scale + glow + focus + press */
.lib-submit {
  transition:
    transform 0.25s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lib-submit:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,217,196,0.65), 0 8px 20px -4px rgba(241,88,30,0.5);
}
.lib-submit:active { transform: translateY(0) scale(0.98); }
.lib-submit:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,217,196,0.65), 0 0 0 3px rgba(241,88,30,0.4), 0 4px 12px -2px rgba(241,88,30,0.4);
}

/* secondary chrome controls: avatar, upload, credits, links */
.lib-avatar,
.lib-up {
  transition:
    transform 0.25s cubic-bezier(0.16,1,0.3,1),
    border-color 0.25s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lib-avatar:hover,
.lib-up:hover { transform: translateY(-1px); }
.lib-avatar:active,
.lib-up:active { transform: translateY(0) scale(0.97); }
.lib-avatar:focus-visible,
.lib-up:focus-visible {
  outline: none;
  border-color: #F1581E;
  box-shadow: 0 0 0 3px rgba(241,88,30,0.4);
}
.lib-credits {
  transition:
    transform 0.25s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lib-credits:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 6px 16px -4px rgba(241,88,30,0.28);
}
.lib-links a {
  transition: color 0.25s cubic-bezier(0.16,1,0.3,1), opacity 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lib-links a:focus-visible {
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(241,88,30,0.4);
}

/* empty-state CTAs */
.lv-app-btn {
  transition:
    transform 0.25s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.25s cubic-bezier(0.16,1,0.3,1),
    border-color 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lv-app-btn:hover { transform: translateY(-2px); }
.lv-app-btn:active { transform: translateY(0) scale(0.98); }
.lv-app-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(241,88,30,0.4);
}
.lv-app-btn.primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,217,196,0.6), 0 14px 30px -10px rgba(241,88,30,0.55);
}
.lv-app-btn.primary:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255,217,196,0.6), 0 0 0 3px rgba(241,88,30,0.4), 0 10px 24px -10px rgba(241,88,30,0.45);
}

/* soft entrance for the feed grid container (CSS-only — safe with JS-rendered tiles) */
[data-library-grid] { animation: lib-feed-in 0.6s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes lib-feed-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* one gentle idle "breathing" accent — the active category chip softly pulses */
.lib-cat.is-active { animation: lib-chip-breathe 6s ease-in-out infinite; }
@keyframes lib-chip-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241,88,30,0); }
  50%      { box-shadow: 0 0 0 4px rgba(241,88,30,0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .lv-library-item,
  .lv-library-item:hover,
  .lv-library-item:focus-visible,
  .lv-library-media img,
  .lv-library-media video,
  .lv-library-status,
  .lv-library-copy,
  .lib-cat, .lib-tab, .lib-role,
  .lib-submit, .lib-avatar, .lib-up, .lib-credits,
  .lib-links a,
  .lv-app-btn {
    transition: none;
  }
  .lv-library-item:hover,
  .lv-library-item:focus-visible,
  .lib-cat:hover, .lib-tab:hover, .lib-cat:active, .lib-tab:active,
  .lib-submit:hover, .lib-submit:active,
  .lib-avatar:hover, .lib-up:hover, .lib-avatar:active, .lib-up:active,
  .lib-credits:hover,
  .lv-app-btn:hover, .lv-app-btn:active {
    transform: none;
  }
  [data-library-grid],
  .lib-cat.is-active {
    animation: none;
  }
  .lv-library-item:hover .lv-library-media img,
  .lv-library-item:hover .lv-library-media video,
  .lv-library-item:focus-visible .lv-library-media img,
  .lv-library-item:focus-visible .lv-library-media video {
    transform: none;
  }
}