/* AVS AI Studio — the studio app (studio.html). Builds on avs.css tokens.
   Desktop: left rail + canvas + composer docked at the bottom.
   Phone: rail becomes a bottom tab bar; composer sits just above it. */

body.studio { height: 100vh; height: 100dvh; overflow: hidden; }
.app { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: minmax(0, 1fr); height: 100%; }  /* rows never grow past the screen: the canvas scrolls, the composer stays in view */

/* rail */
.rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(18px); }
.rail .home { width: 50px; margin-bottom: 14px; }
.rail nav { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; padding: 10px 4px 8px; border-radius: 16px; color: var(--muted); font-size: 11.5px; font-weight: 600; transition: background .2s, color .2s; }
.tab .ico { width: 26px; height: 26px; transition: transform .25s var(--ease); }
.tab:hover { color: var(--ink); background: var(--card); }
.tab:hover .ico { transform: translateY(-2px) rotate(-4deg); }
.tab[aria-current="page"] { color: var(--ink); background: var(--card-solid); box-shadow: var(--shadow-sm), 0 10px 24px -18px rgba(43, 39, 48, .5); }
.rail .foot-tools { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.credits { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 14px; font: 600 13px/1 var(--mono); color: var(--ink2); }
.credits .ico { width: 22px; height: 22px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-peach); border: 1px solid var(--line2); }

/* main column */
.main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 18px clamp(16px, 3vw, 32px) 10px; }
.topbar h1 { margin: 0; font: 600 24px/1.1 var(--display); letter-spacing: -.02em; }
.topbar .spacer { flex: 1; }
.topbar .theme-btn { display: none; }
.preview-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink2); background: var(--card); border: 1px solid var(--line); }
.preview-pill i { width: 7px; height: 7px; border-radius: 50%; background: #E0A96D; box-shadow: 0 0 0 4px rgba(224, 169, 109, .2); }
.filters { display: flex; gap: 4px; padding: 0 clamp(16px, 3vw, 32px) 6px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: .2s; }
.filters button[aria-pressed="true"] { color: var(--ink); background: var(--card-solid); box-shadow: var(--shadow-sm); }
.canvas { flex: 1; overflow-y: auto; padding: 8px clamp(16px, 3vw, 32px) 220px; scroll-behavior: smooth; }

/* result grid */
.grid { columns: 3 280px; column-gap: 14px; }
.card { position: relative; break-inside: avoid; margin: 0 0 14px; border-radius: 22px; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.card .media { position: relative; width: 100%; }
.card .media > svg.art, .card .media img, .card .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card[data-ratio="16:9"] .media { aspect-ratio: 16 / 9; }
.card[data-ratio="9:16"] .media { aspect-ratio: 9 / 16; }
.card[data-ratio="1:1"] .media { aspect-ratio: 1 / 1; }
.card[data-ratio="4:5"] .media { aspect-ratio: 4 / 5; }
.card[data-ratio="3:4"] .media { aspect-ratio: 3 / 4; }
.card .badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.card .badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #2B2730; background: rgba(255, 253, 249, .86); backdrop-filter: blur(6px); }
.card .badge .ico { width: 12px; height: 12px; }
.card .overlay { position: absolute; inset: auto 0 0 0; padding: 40px 12px 12px; display: flex; align-items: flex-end; gap: 8px;
  background: linear-gradient(transparent, rgba(20, 18, 23, .72)); color: #fff; opacity: 0; transition: opacity .25s; }
.card:hover .overlay, .card:focus-within .overlay { opacity: 1; }
.card .overlay p { flex: 1; margin: 0; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .overlay button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); color: #fff; flex: none; }
.card .overlay button:hover { background: rgba(255, 255, 255, .3); }
.card .overlay .ico { width: 17px; height: 17px; }
.card .play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 249, .85); color: #2B2730; pointer-events: none; }
.card .play .ico { width: 22px; height: 22px; margin-left: 3px; }
.art .drift { animation: driftx var(--d, 12s) ease-in-out infinite alternate; }
.art .bob { animation: bob 4s ease-in-out infinite; }
@keyframes driftx { to { transform: translateX(24px); } }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* generating state */
.card.busy .media { display: grid; place-items: center; background:
  radial-gradient(120% 90% at 20% 10%, var(--glow-a), transparent 60%), radial-gradient(120% 90% at 90% 90%, var(--glow-b), transparent 60%), var(--bg2); }
.card.busy .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.card.busy .think { position: relative; z-index: 1; width: 104px; text-align: center; }
.card.busy .think small { display: block; margin-top: 6px; font: 500 11px/1 var(--mono); color: var(--ink2); letter-spacing: .04em; }
.card .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); transition: width .3s linear; }

/* real creations (signed in): the picture or video, a quiet footer with actions, and a 24-hour badge */
.card.real { background: var(--card-solid); }
.card.real .media { background: var(--bg2); }
.card .badge.ttl { background: rgba(250, 244, 223, .92); }
.card.real .badges { right: 10px; flex-wrap: wrap; pointer-events: none; }
.card.real .badge { white-space: nowrap; }
.card.real .foot { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 14px; }
.card.real .foot p { flex: 1; min-width: 0; margin: 0 6px 0 0; font-size: 13px; line-height: 1.35; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.real .foot button { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink2); transition: background .2s, color .2s; }
.card.real .foot button:hover { background: var(--bg2); color: var(--ink); }
.card.real .foot .ico { width: 18px; height: 18px; }
.card.real .foot button.arm { background: var(--tint-rose); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rose); }
.card.real .save-row { padding: 0 10px 10px; }
.card.real .save { width: 100%; height: 42px; padding: 0 14px; font-size: 14.5px; animation: rise .4s var(--ease); }
.card.real .save.done { background: var(--tint-mint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.card.real.leaving { opacity: .45; pointer-events: none; transition: opacity .25s; }
.card.real.gone .media > * { visibility: hidden; }
.card.real.gone .media::after { content: 'No longer available'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.keep-note { margin: 0 0 14px; font-size: 13px; }
.credit-pill { transition: background .2s, border-color .2s; }
.credit-pill:hover { background: var(--card-hover); border-color: var(--line2); }
.credit-pill .ico { width: 18px; height: 18px; margin: -3px 0; }

/* empty state */
.empty { max-width: 520px; margin: 7vh auto 0; text-align: center; }
.empty .e-mascot { width: 140px; margin: 0 auto 18px; }
.empty h2 { margin: 0 0 8px; font: 600 26px/1.2 var(--display); letter-spacing: -.02em; }
.empty p { margin: 0 0 20px; color: var(--ink2); }

/* dock (composer at the bottom) */
.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(12px, 3vw, 32px) 22px; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent) 38%); }
.dock .composer { max-width: 860px; margin: 0 auto; pointer-events: auto; }
.dock .note { max-width: 860px; margin: 8px auto 0; text-align: center; font-size: 11.5px; color: var(--muted); pointer-events: auto; }

/* characters & library panes */
.pane { display: none; }
.pane.on { display: block; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.char { border-radius: 22px; padding: 18px 14px 14px; text-align: center; background: var(--card); border: 1px solid var(--line); }
.char .c-art { width: 118px; margin: 0 auto 8px; }
.char .c-initial { aspect-ratio: 1; width: 104px; margin: 8px auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-lav); font: 600 34px var(--display); }

/* ideas inside the empty studio */
.idea-strip { max-width: 1040px; margin: 34px auto 0; }
.idea-strip h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 15px/1 var(--display); color: var(--ink2); }
.idea-strip h3 .ico { width: 20px; height: 20px; }
.ideas.mini { grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ideas.mini .idea { border-radius: 20px; }
.ideas.mini .idea .i-pic { aspect-ratio: 16 / 10; }
.ideas.mini .idea .sticker { width: 36px; height: 36px; border-radius: 12px; bottom: -14px; left: 10px; }
.ideas.mini .idea .sticker .ico { width: 19px; height: 19px; }
.ideas.mini .idea .i-body { padding: 20px 12px 12px; }
.ideas.mini .idea b { font-size: 14.5px; }
.ideas.mini .idea .i-text { display: none; }
.ideas.mini .idea .i-meta { margin-top: 2px; }
.ideas.mini .idea .i-go { display: none; }
.char b { display: block; font: 600 16px/1.2 var(--display); }
.char span { font-size: 12.5px; color: var(--muted); }
.char.new { display: grid; place-items: center; min-height: 210px; border: 1.5px dashed var(--line2); background: transparent; color: var(--muted); transition: .2s; }
.char.new:hover, .char.new.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--ink2); }
.char.new .bubble { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 10px; background: var(--tint-mint); }
.ref-bar { display: flex; gap: 8px; max-width: 720px; margin-bottom: 18px; padding: 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line2); }
.ref-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px; font-size: 15px; }
.ref-card .media { aspect-ratio: 16 / 9; }
.ref-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.ref-card .link-art { width: 100%; height: 100%; display: grid; place-items: center; background: var(--tint-sky); color: var(--ink2); font-weight: 600; }
.ref-card .meta { padding: 10px 14px 12px; font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 8px; }
.ref-card .meta span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── tablet ── */
@media (max-width: 1099px) {
  .app { grid-template-columns: 76px 1fr; }
  .grid { columns: 2 240px; }
  .ideas.mini { grid-template-columns: repeat(3, 1fr); }
}
/* ── phone ── */
@media (max-width: 759px) {
  .app { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .rail { order: 2; flex-direction: row; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); }
  .rail .home, .rail .foot-tools { display: none; }
  .rail nav { flex-direction: row; justify-content: space-around; }
  .tab { padding: 6px 2px; font-size: 10.5px; gap: 3px; }
  .tab .ico { width: 24px; height: 24px; }
  .topbar { padding-top: 14px; }
  .topbar h1 { font-size: 21px; }
  .topbar .theme-btn { display: inline-grid; }
  .grid { columns: 2 150px; column-gap: 10px; }
  .card { margin-bottom: 10px; border-radius: 18px; }
  .card .overlay { opacity: 1; padding-top: 28px; }
  .card .overlay p { display: none; }
  .card.real .badges { top: 8px; left: 8px; right: 8px; gap: 4px; }
  .card.real .badge { padding: 4px 7px; font-size: 9.5px; }
  .card.real .foot { justify-content: space-between; padding: 6px; }
  .card.real .foot p { display: none; }
  .card.real .save-row { padding: 0 6px 6px; }
  .card.real .save { height: 38px; padding: 0 8px; font-size: 13.5px; gap: 6px; }
  .canvas { padding-bottom: 250px; }
  .dock { padding-bottom: 10px; }
  .dock .note { display: none; }
  .empty { margin-top: 3vh; }
  .empty .e-mascot { width: 110px; }
  .idea-strip { margin-top: 22px; }
  .ideas.mini { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 10px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .ideas.mini::-webkit-scrollbar { display: none; }
  .ideas.mini .idea { flex: 0 0 44%; scroll-snap-align: start; }
}