/* =============================================
   wepmedia — main.css  v2.0  (3-column layout)
   Premium dark theme — production ready
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── TOKENS ─── */
:root {
  --bg0:      #070710;
  --bg1:      #0c0c16;
  --bg2:      #12121e;
  --bg3:      #1a1a28;
  --bg4:      #222234;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.13);
  --text:     #eeeef6;
  --text2:    #8888a8;
  --text3:    #4a4a6a;
  --accent:   #7c6fff;
  --accent2:  #5548e0;
  --accentHi: #a899ff;
  --gold:     #f5c842;
  --green:    #22c55e;
  --red:      #ef4444;
  --r8:       8px;
  --r12:      12px;
  --r16:      16px;
  --shadow:   0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 40px rgba(124,111,255,0.2);

  /* Sidebar widths */
  --icon-w:   110px;
  --panel-w:  350px;
  --detail-w: 320px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg0);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }

/* ══════════════════════════════════════════
   APP SHELL — 3 column grid
══════════════════════════════════════════ */
.app {
  display: grid;
  grid-template-columns: var(--icon-w) var(--panel-w) 1fr;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
/* Chat mode: tool-panel takes full remaining width */
.app.chat-mode {
  grid-template-columns: var(--icon-w) 1fr;
}
.app.chat-mode .gallery-panel {
  display: none;
}
.app.chat-mode .tool-panel {
  max-width: 100%;
  width: 100%;
}

/* ══════════════════════════════════════════
   COL 1: ICON SIDEBAR
══════════════════════════════════════════ */
.icon-sidebar {
  width: var(--icon-w);
  background: var(--bg1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  z-index: 10;
}

.sidebar-logo {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(124,111,255,0.2), rgba(85,72,224,0.15));
  border: 1px solid rgba(124,111,255,0.25);
  border-radius: 14px;
  margin-bottom: 18px;
  cursor: default;
}
.logo-star { font-size: 24px; color: var(--accent); filter: drop-shadow(0 0 6px rgba(124,111,255,0.5)); }

.icon-nav {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  flex: 1; width: 100%;
  padding: 0 8px;
}

.icon-btn {
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 12px 4px 10px;
  background: transparent; border: none; cursor: pointer;
  border-radius: 12px;
  color: var(--text3);
  transition: all 0.18s;
  text-decoration: none;
}
.icon-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  color: var(--text2);
}
.icon-btn.active {
  background: rgba(124,111,255,0.15);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 12px rgba(124,111,255,0.08);
  border-radius: 12px;
}
.icon-btn.coming-soon { opacity: 0.35; cursor: not-allowed; }
.icon-btn-icon { font-size: 26px; line-height: 1; }
.icon-btn-label { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.soon-dot {
  position: absolute; top: 6px; right: 8px;
  width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 6px var(--gold);
}

.icon-divider { width: 36px; height: 1px; background: var(--border); margin: 10px 0; }

.sidebar-bottom { padding: 10px 8px; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ══════════════════════════════════════════
   COL 2: TOOL PANEL
══════════════════════════════════════════ */
.tool-panel {
  background: var(--bg1);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.panel-header {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-title { font-size: 16px; font-weight: 700; color: var(--text); }

.panel-body {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 18px;
  padding-bottom: 8px;
}

/* Sticky footer for submit button */
.panel-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg1);
  flex-shrink: 0;
}

/* ─── Field group ─── */
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.6px; }

.field-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.field-divider::before, .field-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ─── Settings collapse/expand ─── */
.settings-toggle {
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}
.settings-toggle:hover { color: var(--text); }
.toggle-arrow {
  font-size: 10px;
  transition: transform 0.2s;
  display: inline-block;
}
.settings-collapsible {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  max-height: 800px;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  opacity: 1;
}
.settings-collapsible.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

/* ─── Prompt textarea ─── */
.prompt-wrap { position: relative; }
.prompt-textarea {
  width: 100%; padding: 12px 14px 28px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r12); color: var(--text);
  font-family: inherit; font-size: 13px; resize: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.6;
}
.prompt-textarea:focus {
  outline: none;
  border-color: rgba(124,111,255,0.5);
  box-shadow: 0 0 0 3px rgba(124,111,255,0.06);
}
.prompt-textarea::placeholder { color: var(--text3); }
.char-count {
  position: absolute; bottom: 9px; right: 12px;
  font-size: 10px; color: var(--text3);
}

/* ─── Quick tags ─── */
.quick-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.quick-tag {
  padding: 4px 10px; font-size: 11px; font-weight: 500;
  background: var(--bg4); border: 1px solid var(--border);
  border-radius: 100px; cursor: pointer; color: var(--text2);
  transition: all 0.15s;
}
.quick-tag:hover { border-color: var(--accent); color: var(--accent); background: rgba(124,111,255,0.08); }

/* ─── Pill groups ─── */
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-group.wrap { flex-wrap: wrap; }
.pill {
  padding: 7px 12px; font-size: 12px; font-weight: 500;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r8); cursor: pointer; color: var(--text2);
  transition: all 0.15s; white-space: nowrap;
}
.pill:hover { border-color: var(--border2); color: var(--text); }
.pill.active {
  background: rgba(124,111,255,0.12);
  border-color: rgba(124,111,255,0.4);
  color: var(--accent);
}

/* ─── Model cards ─── */
.model-cards { display: flex; flex-direction: column; gap: 8px; }
.model-card {
  width: 100%; padding: 12px 14px;
  background: var(--bg3); border: 1.5px solid var(--border);
  border-radius: var(--r12); cursor: pointer; text-align: left;
  transition: all 0.18s;
}
.model-card:hover:not(.active) { border-color: var(--border2); background: var(--bg4); }
.model-card.active {
  background: rgba(124,111,255,0.12);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 3px 0 0 var(--accent);
  outline: none;
}
.model-card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.model-name { font-size: 13px; font-weight: 600; color: var(--text2); }
.model-card.active .model-name { color: var(--accent); }
.model-tag {
  font-size: 10px; font-weight: 700; padding: 2px 9px;
  border-radius: 100px; white-space: nowrap;
  background: rgba(255,255,255,0.07); color: var(--text3);
}
.model-tag.green { background: rgba(34,197,94,0.1); color: var(--green); }
.model-tag.gold { background: rgba(245,200,66,0.1); color: var(--gold); }
.model-tag.accent { background: rgba(124,111,255,0.12); color: var(--accent); }
.model-desc { font-size: 11px; color: var(--text3); line-height: 1.5; }
.model-card.active .model-desc { color: var(--text2); }


/* ─── Info box ─── */
.info-box {
  padding: 10px 12px;
  background: rgba(124,111,255,0.06);
  border: 1px solid rgba(124,111,255,0.15);
  border-radius: var(--r8); font-size: 12px; color: var(--text2);
  display: flex; align-items: center; gap: 8px;
}
.info-box .info-icon { font-size: 14px; }

/* ─── Progress inline ─── */
.progress-inline { display: flex; flex-direction: column; gap: 8px; }
/* Ẩn inline progress (chỉ dùng footer progress, tránh 2 thanh trùng) */
#progress-image, #progress-video { display: none !important; }
.progress-info { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.progress-spinner {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 2px solid var(--border2); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
.progress-bar-track { height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.progress-bar-fill {
  height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accentHi));
  transition: width 0.4s ease;
}

/* ─── Generate button ─── */
.btn-generate {
  position: relative; width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  border: none; border-radius: var(--r12); cursor: pointer;
  font-size: 15px; font-weight: 700; color: #fff;
  overflow: hidden; transition: all 0.25s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 20px rgba(124,111,255,0.35);
  margin-top: auto;
}
.btn-generate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(124,111,255,0.5), 0 0 60px rgba(124,111,255,0.15);
}
.btn-generate:active { transform: translateY(0) scale(0.98); }
.btn-generate:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-glow {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}
.btn-content { position: relative; z-index: 1; }

/* ─── Toast notification ─── */
.toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: all;
  padding: 14px 20px; border-radius: 12px;
  background: rgba(18,18,30,0.95); backdrop-filter: blur(20px);
  border: 1px solid rgba(124,111,255,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(124,111,255,0.1);
  color: var(--text); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn 0.35s cubic-bezier(.4,0,.2,1);
  max-width: 360px;
}
.toast.toast-out { animation: toastOut 0.3s ease forwards; }
.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-success { border-color: rgba(34,197,94,0.4); }
.toast-error { border-color: rgba(239,68,68,0.4); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(40px) scale(0.9); }
}

/* ─── User credits bar (sidebar) ─── */
.credits-bar {
  width: 100%; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.08);
  margin-top: 4px; overflow: hidden;
}
.credits-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accentHi));
  transition: width 0.5s ease;
}
.plan-badge {
  display: inline-block;
  padding: 2px 6px; border-radius: 4px;
  font-size: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: 3px;
}
.plan-badge.free { background: rgba(255,255,255,0.08); color: var(--text3); }
.plan-badge.pro { background: rgba(124,111,255,0.2); color: var(--accentHi); }
.plan-badge.business { background: rgba(245,200,66,0.15); color: var(--gold); }

/* ─── Coming soon panel ─── */
.coming-soon-panel {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 40px 20px;
}
.cs-icon { font-size: 48px; }
.cs-title { font-size: 18px; font-weight: 700; }
.cs-text { font-size: 13px; color: var(--text2); line-height: 1.7; }
.cs-badge {
  padding: 6px 16px; background: rgba(245,200,66,0.1);
  border: 1px solid rgba(245,200,66,0.3);
  border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--gold);
}

/* ══════════════════════════════════════════
   COL 3: GALLERY
══════════════════════════════════════════ */
.gallery-panel {
  display: flex; flex-direction: column;
  background: var(--bg0);
  overflow: hidden;
}

.gallery-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg1);
  flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;
}
.gallery-title-row { display: flex; align-items: baseline; gap: 10px; }
.gallery-title { font-size: 18px; font-weight: 700; }
.gallery-count { font-size: 12px; color: var(--text3); }

.gallery-actions { display: flex; align-items: center; justify-content: space-between; }

.filter-pills { display: flex; gap: 4px; }
.filter-pill {
  padding: 6px 14px; font-size: 12px; font-weight: 500;
  background: transparent; border: 1px solid var(--border);
  border-radius: 100px; cursor: pointer; color: var(--text2);
  transition: all 0.15s;
}
.filter-pill:hover { border-color: var(--border2); color: var(--text); }
.filter-pill.active { background: rgba(124,111,255,0.12); border-color: rgba(124,111,255,0.4); color: var(--accent); }

.view-toggle { display: flex; gap: 2px; }
.view-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; color: var(--text3);
  font-size: 15px; transition: all 0.15s;
}
.view-btn:hover { color: var(--text2); border-color: var(--border2); }
.view-btn.active { background: var(--bg3); color: var(--text); border-color: var(--border2); }

.gallery-body { flex: 1; overflow-y: auto; padding: 24px; }

/* ─── Empty State ─── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; text-align: center;
  min-height: 400px;
}
.empty-icon { font-size: 48px; color: var(--text3); animation: pulse 3s ease infinite; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--text2); }
.empty-sub { font-size: 14px; color: var(--text3); }
.empty-examples { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.example-tag {
  padding: 8px 16px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--r8);
  font-size: 13px; cursor: pointer; color: var(--text2);
  transition: all 0.15s;
}
.example-tag:hover { border-color: var(--accent); color: var(--accent); background: rgba(124,111,255,0.06); }

/* ─── Masonry Grid ─── */
.masonry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
  align-items: flex-start;
}
.masonry-grid.list-view {
  flex-direction: column;
  align-items: stretch;
}
.masonry-grid.list-view .media-card,
.masonry-grid.list-view .skeleton-card {
  height: auto; min-height: 80px; width: 100%;
}

/* Card chung — width tự suy từ aspect-ratio (set inline qua JS) */
.media-card, .skeleton-card {
  position: relative;
  border-radius: var(--r12);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg2);
  height: 220px;       /* Chiều cao cố định */
  flex: none;          /* Width tự theo aspect-ratio */
}
.media-card {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s, border-color 0.25s;
}
.media-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(124,111,255,0.15);
  border-color: rgba(124,111,255,0.3);
}
.media-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,111,255,0.3); }

/* Ảnh và video trong gallery */
.media-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.media-card video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

/* Video play button overlay */
.video-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}
.video-play-btn:hover {
  background: rgba(124,111,255,0.7);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Card overlay on hover */
.card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.2s;
  display: flex; align-items: flex-end; padding: 14px;
}
.media-card:hover .card-overlay { opacity: 1; }

/* ─── Card running spinner overlay (KHÔNG DÙNG NỮA) ─── */
/* vẫn giữ vì used by buildCard for known running jobs */
.card-overlay.running {
  opacity: 1;
  background: rgba(0,0,0,0.6);
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.card-running-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.2); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
.card-running-text { font-size: 12px; color: rgba(255,255,255,0.7); }

/* ─── SKELETON / SHIMMER CARD ─── */
.skeleton-card {
  position: relative;     /* để skeleton-inner absolute trong đây */
  background: var(--bg3);
  border-radius: var(--r12);
  overflow: hidden;
  break-inside: avoid;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  /* aspect-ratio set by inline style from JS */
}

/* Shimmer sweep animation — enhanced gradient */
.skeleton-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(124,111,255,0.06) 38%,
    rgba(168,153,255,0.12) 50%,
    rgba(124,111,255,0.06) 62%,
    transparent 75%
  );
  background-size: 250% 100%;
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}

/* Pulsing border glow */
.skeleton-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r12);
  box-shadow: inset 0 0 0 1px rgba(124,111,255,0.15);
  animation: borderPulse 2s ease infinite;
  z-index: 1; pointer-events: none;
}
@keyframes borderPulse {
  0%,100% { box-shadow: inset 0 0 0 1px rgba(124,111,255,0.1); }
  50%      { box-shadow: inset 0 0 0 1px rgba(124,111,255,0.35); }
}

/* Skeleton inner content */
.skeleton-inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  height: 180px;         /* chiều cao cố định, không to theo cột */
  width: 100%;
}
.skeleton-spinner {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 2px solid rgba(124,111,255,0.2);
  border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
.skeleton-label {
  font-size: 11px; font-weight: 500;
  color: var(--text3); letter-spacing: 0.3px;
  animation: textPulse 2s ease infinite;
}
@keyframes textPulse {
  0%,100% { opacity:0.5 } 50% { opacity:1 }
}
/* Aspect ratio set by inline style */
.skeleton-aspect {
  width: 100%;
}

/* Fade-in when image loads */
.media-card img, .media-card video {
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity:0; transform: scale(1.01); }
  to   { opacity:1; transform: scale(1); }
}


.card-actions { display: flex; gap: 8px; }
.card-dl-btn {
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px; cursor: pointer; color: #fff;
  transition: all 0.15s; text-decoration: none;
}
.card-dl-btn:hover { background: rgba(255,255,255,0.25); }
.card-info-btn {
  padding: 7px 10px; font-size: 12px;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px; cursor: pointer; color: #fff;
  transition: all 0.15s;
}
.card-info-btn:hover { background: rgba(255,255,255,0.2); }

/* Nút tải 1K/2K/4K trên ảnh */
.card-dl-1k {
  padding: 6px 11px; font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 100px; cursor: pointer; color: #fff;
  transition: all 0.15s; text-decoration: none;
}
.card-dl-1k:hover { background: rgba(255,255,255,0.32); }
.card-dl-2k, .card-dl-4k {
  padding: 6px 11px; font-size: 11px; font-weight: 700;
  background: rgba(124,111,255,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(124,111,255,0.7);
  border-radius: 100px; cursor: pointer; color: #fff;
  transition: all 0.15s;
}
.card-dl-2k:hover, .card-dl-4k:hover { background: rgba(124,111,255,0.85); transform: scale(1.05); }
.card-dl-2k:disabled, .card-dl-4k:disabled { opacity: 0.6; cursor: wait; }

/* Download dropdown */
.dl-dropdown { position: relative; }
.dl-menu {
  position: absolute;
  bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(18,18,30,0.96); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 140px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 100;
}
.dl-menu.open {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.dl-opt {
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  border-radius: 7px; cursor: pointer; color: #fff;
  border: none; text-align: left; text-decoration: none;
  display: block; transition: background 0.12s;
  background: transparent;
}
.dl-opt:first-child { background: rgba(255,255,255,0.08); }
.dl-opt:not(:first-child) { background: rgba(124,111,255,0.25); }
.dl-opt:hover { background: rgba(124,111,255,0.55) !important; }
.dl-opt:disabled { opacity: 0.6; cursor: wait; }


/* Nút X xóa job — luôn hiện ở góc trên phải */
.card-del-btn {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%; cursor: pointer;
  color: rgba(255,255,255,0.7); font-size: 13px;
  transition: all 0.15s; z-index: 10;
  line-height: 1;
}
.card-del-btn:hover {
  background: rgba(239,68,68,0.85);
  border-color: rgba(239,68,68,0.6);
  color: #fff; transform: scale(1.1);
}

.card-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 8px; border-radius: 100px;
  font-size: 10px; font-weight: 600;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 5px;
}
.card-badge.video {
  background: rgba(124,111,255,0.6);
}
.card-badge.video::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff4444;
  box-shadow: 0 0 6px #ff4444;
  animation: recDot 1.2s ease infinite;
}
@keyframes recDot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

/* List View card */
.masonry-grid.list-view .media-card {
  display: flex; margin-bottom: 0;
}
.masonry-grid.list-view .media-card img {
  width: 120px; height: 90px; object-fit: cover; flex-shrink: 0;
}
.list-card-info {
  padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.list-card-prompt { font-size: 13px; color: var(--text); }
.list-card-meta { font-size: 11px; color: var(--text3); }
.list-card-actions { display: flex; gap: 8px; margin-top: auto; }

/* ══════════════════════════════════════════
   DETAIL LIGHTBOX (centered modal)
══════════════════════════════════════════ */
.detail-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
}
.detail-overlay.hidden { display: none; }

.detail-panel {
  position: fixed; z-index: 901;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(920px, 94vw);
  max-height: 90vh;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  animation: fadeScaleIn 0.22s ease;
}
.detail-panel.hidden { display: none; }
@keyframes fadeScaleIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.detail-close {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%; cursor: pointer; color: #fff; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.detail-close:hover { background: rgba(255,255,255,0.22); }

.detail-layout {
  display: flex; max-height: 90vh;
}
.detail-preview {
  flex: 0 0 55%; background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; max-height: 90vh;
}
.detail-preview img  { width: 100%; height: 100%; object-fit: contain; max-height: 90vh; }
.detail-preview video { width: 100%; max-height: 90vh; object-fit: contain; }

.detail-side {
  flex: 1; padding: 28px 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
}
.detail-info { display: flex; flex-direction: column; gap: 14px; }
.detail-field-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; }
.detail-prompt {
  font-size: 13px; color: var(--text); line-height: 1.6;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  max-height: 120px; overflow-y: auto;
}
.detail-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-field-val { font-size: 13px; color: var(--text2); }

/* Download quality buttons in modal */
.detail-dl-section { display: flex; flex-direction: column; gap: 7px; }
.detail-dl-opt {
  padding: 12px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: none; text-align: left; text-decoration: none;
  display: block; transition: all 0.15s; color: #fff; width: 100%;
}
.dl-1k { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.dl-1k:hover { background: rgba(255,255,255,0.16); }
.dl-2k { background: rgba(124,111,255,0.18); border: 1px solid rgba(124,111,255,0.35); color: #c0b8ff; }
.dl-4k { background: linear-gradient(135deg,rgba(255,160,0,0.14),rgba(255,80,0,0.09)); border: 1px solid rgba(255,160,0,0.28); color: #ffd060; }
.dl-4k:hover { background: linear-gradient(135deg,rgba(255,160,0,0.3),rgba(255,80,0,0.2)); }
.detail-dl-opt:disabled { opacity: 0.55; cursor: wait; }

.detail-actions {
  display: flex; gap: 8px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.btn-detail-copy, .btn-detail-retry {
  flex: 1; text-align: center; padding: 9px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r8); color: var(--text2); font-size: 13px;
  cursor: pointer; transition: all 0.15s;
}
.btn-detail-copy:hover, .btn-detail-retry:hover { border-color: var(--border2); color: var(--text); }

/* ══════════════════════════════════════════
   REFERENCE IMAGE UPLOAD
══════════════════════════════════════════ */
.ref-upload-group { margin-top: 0; }
.ref-upload-area {
  border: 2px dashed rgba(124,111,255,0.3);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  position: relative;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ref-upload-area:hover, .ref-upload-area.drag-over {
  border-color: var(--accentHi);
  background: rgba(124,111,255,0.08);
}
.ref-placeholder {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--textSub);
  font-size: 13px;
}
.ref-icon { font-size: 20px; }

/* Thumbnail grid */
.ref-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ref-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ref-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(239,68,68,0.9);
  color: #fff;
  border: none;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.ref-thumb-loading {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ref-thumb-add {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(124,111,255,0.3);
  color: var(--textSub);
  font-size: 20px;
  cursor: pointer;
  background: transparent;
}
.ref-thumb-add:hover {
  border-color: var(--accentHi);
  color: var(--accentHi);
}
.ref-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ══════════════════════════════════════════
   ANIMATIONS & UTILITIES
══════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:0.6 } 50% { opacity:1 } }
.hidden { display: none !important; }

/* ─── GPU Performance hints ─── */
.media-card { will-change: transform; }
.skeleton-card::after { will-change: background-position; }
.detail-panel { will-change: transform, opacity; }

/* ─── RESPONSIVE ─── */

/* Tablet */
@media (max-width: 900px) {
  :root { --panel-w: 260px; }
  .masonry-grid { gap: 10px; }
}

/* ══════════════════════════════════════════
   MOBILE-ONLY COMPONENTS (hidden on desktop)
══════════════════════════════════════════ */
.m-top-nav, .m-prompt-bar { display: none; }

/* ══════════════════════════════════════════
   MOBILE (≤ 680px)
   Layout: Top Nav → Tool Panel → Gallery → Prompt Bar
   Style: vmedia.ai inspired
══════════════════════════════════════════ */
@media (max-width: 680px) {

  /* ── MOBILE TOP NAV ── */
  .m-top-nav {
    display: flex; align-items: center; gap: 8px;
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 300;
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    background: rgba(12, 14, 20, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .m-close-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
  }
  .m-tabs {
    display: flex; gap: 6px; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tab {
    padding: 8px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    color: #888; background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap; cursor: pointer;
    transition: all 0.2s;
  }
  .m-tab.active {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    color: #fff; border-color: transparent;
    box-shadow: 0 2px 12px rgba(6,182,212,0.3);
  }

  /* ── MOBILE PROMPT BAR (sticky bottom) ── */
  .m-prompt-bar {
    display: flex; align-items: center; gap: 8px;
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 12, 16, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06);
    z-index: 300;
  }
  .m-paste-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .m-prompt-input {
    flex: 1; min-width: 0;
    padding: 10px 14px; border-radius: 12px;
    background: #1a1d23; color: #fff; font-size: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    outline: none; font-family: inherit;
  }
  .m-prompt-input::placeholder { color: #555; }
  .m-prompt-input:focus {
    border-color: rgba(6,182,212,0.4);
    box-shadow: 0 0 0 2px rgba(6,182,212,0.1);
  }
  .m-sl-badge {
    padding: 6px 10px; border-radius: 8px; font-weight: 700;
    background: rgba(6,182,212,0.15); color: #06b6d4;
    font-size: 11px; white-space: nowrap; cursor: pointer;
    border: 1px solid rgba(6,182,212,0.2);
    flex-shrink: 0;
  }
  .m-play-btn {
    width: 46px; height: 46px; border-radius: 50%; border: none;
    background: conic-gradient(from 0deg, #06b6d4, #8b5cf6, #ec4899, #f59e0b, #06b6d4);
    color: #fff; font-size: 18px; cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(139,92,246,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .m-play-btn:active {
    transform: scale(0.92);
    box-shadow: 0 0 30px rgba(139,92,246,0.5);
  }
  .m-play-btn:disabled {
    opacity: 0.5; cursor: not-allowed;
  }

  /* ── HIDE OLD ELEMENTS ON MOBILE ── */
  .icon-sidebar { display: none !important; }  /* hide old bottom tab bar */
  .panel-header { display: none; }
  .panel-footer { display: none !important; }  /* hide old footer/button */
  .prompt-textarea { display: none !important; } /* use m-prompt-input instead */
  .prompt-wrap { display: none !important; }
  .m-hide-prompt { display: none !important; } /* hide prompt field-groups on mobile */
  .field-group:has(.prompt-textarea) { display: none !important; }
  .settings-toggle { display: none !important; } /* hide "Tuỳ chỉnh nâng cao" */
  .field-group:has(#img-count) { display: none !important; } /* S.L in bottom bar */
  .field-group:has(#vid-count) { display: none !important; }

  /* ── Model cards — compact vmedia style ── */
  .model-cards {
    display: flex; flex-direction: column; gap: 8px;
  }
  .model-card {
    padding: 10px 14px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(6,182,212,0.05), rgba(139,92,246,0.03));
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s;
  }
  .model-card.active {
    border-color: rgba(6,182,212,0.3);
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(139,92,246,0.06));
    box-shadow: 0 0 12px rgba(6,182,212,0.15);
  }

  /* ── Compact settings — 2-col cards ── */
  .settings-collapsible { display: block !important; }
  .settings-toggle { display: none; }  /* hide toggle button */
  .ref-upload-group { display: block !important; }

  /* Settings pills → compact cards */
  .field-group:has(#img-aspect),
  .field-group:has(#img-count),
  .field-group:has(#vid-aspect) {
    margin: 0;
  }
  .pill-group { gap: 6px; flex-wrap: nowrap; overflow-x: auto; }
  .pill {
    padding: 8px 12px; font-size: 11px; border-radius: 10px;
    background: #141620;
    border: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap; flex-shrink: 0;
  }
  .pill.active {
    background: rgba(6,182,212,0.12);
    border-color: rgba(6,182,212,0.3);
    color: #06b6d4;
  }
  .field-label {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.5px; color: #888;
    margin-bottom: 4px;
  }

  /* ── Ref upload — dashed purple box ── */
  .ref-upload-area {
    border: 2px dashed rgba(168,85,247,0.35);
    border-radius: 12px; padding: 12px;
    background: rgba(168,85,247,0.04);
  }
  .ref-placeholder { color: #a855f7; font-size: 13px; }

  /* ── APP layout ── */

  /* ── APP SHELL ── */
  .app {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* ═══════════════════════════════════
     BOTTOM TAB BAR (fixed) — safe-area
  ═══════════════════════════════════ */
  .icon-sidebar {
    order: 3;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    height: calc(52px + env(safe-area-inset-bottom, 0px));
    min-height: 52px;
    flex-direction: row;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-right: none;
    border-top: 1px solid rgba(124,111,255,0.15);
    background: rgba(10,10,20, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 200;
  }
  .sidebar-logo { display: none; }

  .icon-nav {
    flex-direction: row;
    width: 100%;
    padding: 0;
    gap: 0;
    justify-content: space-around;
    align-items: stretch;
  }

  .icon-btn {
    border-radius: 0;
    padding: 6px 2px 4px;
    gap: 2px;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    transition: transform 0.15s, background 0.15s;
  }
  .icon-btn:active:not(:disabled) {
    transform: scale(0.9);
  }
  .icon-btn.active {
    background: rgba(124,111,255,0.10);
    box-shadow: none;
    border-radius: 0;
    color: var(--accent);
    position: relative;
  }
  /* Active gradient line on top */
  .icon-btn.active::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
  }
  /* Active indicator dot */
  .icon-btn.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%; transform: translateX(-50%);
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
    animation: dotPop 0.3s cubic-bezier(.4,0,.2,1);
  }
  @keyframes dotPop {
    from { transform: translateX(-50%) scale(0); opacity: 0; }
    to { transform: translateX(-50%) scale(1); opacity: 1; }
  }
  .icon-btn-icon { font-size: 22px; }
  .icon-btn-label { font-size: 8px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; }
  .icon-divider { display: none; }

  /* Ẩn coming-soon trên mobile */
  .icon-btn.coming-soon { display: none; }

  .sidebar-bottom {
    flex-direction: row;
    padding: 0;
    width: auto;
  }
  .sidebar-bottom .icon-btn {
    flex: unset;
    width: 58px;
  }

  /* ═══════════════════════════════════
     TOOL PANEL (compact, order 1)
  ═══════════════════════════════════ */
  .tool-panel {
    order: 1;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border2);
    max-height: none;
    flex-shrink: 0;
    overflow: visible;
    padding-top: calc(48px + env(safe-area-inset-top, 0px)); /* space for fixed top nav */
  }

  /* Panel header — hide on mobile (tab bar already shows which tool) */
  .panel-header {
    display: none;
  }

  /* Panel body — ultra compact */
  .panel-body {
    padding: 10px 14px 4px;
    gap: 8px;
  }

  /* Panel footer — compact */
  .panel-footer {
    padding: 6px 14px 8px;
  }

  /* ── HIDE settings fields by default on mobile ── */
  /* Settings toggle is OUTSIDE .settings-collapsible, so it stays visible */
  .settings-collapsible {
    display: none;
  }
  .settings-collapsible.open {
    display: block;
  }

  /* Also hide ref-upload by default, show via settings */
  .ref-upload-group {
    display: none;
  }
  .settings-collapsible.open ~ .ref-upload-group,
  .ref-upload-group.show {
    display: block;
  }

  /* ── Prompt textarea — compact for mobile ── */
  .prompt-textarea {
    font-size: 15px;
    min-height: 44px;
    max-height: 80px;
    padding: 10px 14px 20px;
    line-height: 1.45;
    border-radius: 12px;
  }
  .prompt-wrap { margin-bottom: 0; }
  .char-count { font-size: 10px; bottom: 4px; right: 10px; }

  /* ── Quick tags — hide on mobile ── */
  .quick-tags {
    display: none !important;
  }
  .quick-tags::-webkit-scrollbar { display: none; }
  .quick-tag {
    font-size: 12px;
    padding: 6px 12px;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
  }

  /* ── Field group ── */
  .field-group { gap: 6px; }
  .field-label { font-size: 11px; margin-bottom: 0; }

  /* ── Settings toggle — prominent CTA on mobile ── */
  .settings-toggle {
    font-size: 12px;
    font-weight: 600;
    margin: 2px 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(124,111,255,0.08);
    border: 1px solid rgba(124,111,255,0.2);
    border-radius: 10px;
    padding: 0 14px;
    color: var(--accentHi);
    letter-spacing: 0;
    text-transform: none;
  }
  .settings-toggle::before, .settings-toggle::after { display: none; }
  .settings-toggle:active {
    background: rgba(124,111,255,0.2);
    border-color: rgba(124,111,255,0.5);
  }
  .field-divider:not(.settings-toggle) {
    font-size: 10px;
    margin: 2px 0;
  }
  .field-divider::before, .field-divider::after { flex: 1; }

  /* ── Pills — touch-friendly ── */
  .pill-group { gap: 6px; }
  .pill {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 8px;
    min-height: 36px;
  }

  /* ── Model cards → HORIZONTAL SCROLL ── */
  .model-cards {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .model-cards::-webkit-scrollbar { display: none; }
  .model-card {
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    scroll-snap-align: start;
    border-radius: 8px;
  }
  .model-card-top { margin-bottom: 0 !important; }
  .model-name { font-size: 11px !important; }
  .model-desc { display: none !important; }
  .model-tag { font-size: 7px !important; padding: 1px 5px !important; }

  /* ── Info box — hide on mobile ── */
  .info-box { display: none; }

  /* ── Generate button — chuẩn 48px ── */
  .btn-generate {
    padding: 13px;
    font-size: 15px;
    border-radius: 12px;
    min-height: 48px;
  }

  /* ── Progress inline ── */
  .progress-inline { padding: 6px 0; }

  /* ═══════════════════════════════════
     GALLERY PANEL (order 2, scrollable)
  ═══════════════════════════════════ */
  .gallery-panel {
    order: 2;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); /* space for prompt bar */
  }

  /* ── Gallery header — sticky ── */
  .gallery-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 14px;
    flex-wrap: nowrap;
    gap: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--bg0);
    border-bottom: 1px solid var(--border);
  }
  .gallery-title-row { gap: 6px; }
  .gallery-title { font-size: 15px; }
  .gallery-count { font-size: 11px; }
  .gallery-actions { gap: 6px; }

  /* ── Filter pills — touch-friendly ── */
  .filter-pills { gap: 4px; }
  .filter-pill {
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 20px;
    min-height: 32px;
    display: flex;
    align-items: center;
  }

  .view-toggle { display: none; }

  .gallery-body {
    padding: 10px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  /* ═══════════════════════════════════
     GALLERY GRID — flexbox 2 cột đều
  ═══════════════════════════════════ */
  .masonry-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
  }

  .media-card, .skeleton-card {
    width: calc(50% - 3px) !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    border-radius: 16px;
    margin-bottom: 0;
    flex: none;
  }
  /* Disable hover scale on touch — use active instead */
  .media-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
  }
  .media-card:active {
    transform: scale(0.97);
    transition: transform 0.1s;
  }
  .media-card img, .media-card video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }

  /* Badge — nhỏ gọn trên card */
  .card-badge {
    font-size: 9px;
    padding: 3px 7px;
    top: 6px; left: 6px;
    max-width: calc(100% - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Overlay — gradient dưới, truncate text */
  .card-overlay {
    padding: 8px;
    gap: 4px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 65%);
  }
  .card-overlay .card-actions {
    flex-wrap: wrap;
    gap: 4px;
  }
  .card-dl-btn {
    font-size: 11px;
    padding: 6px 10px;
    min-height: 30px;
  }

  /* Nút X xóa — to hơn trên mobile */
  .card-del-btn {
    width: 30px; height: 30px;
    font-size: 14px;
    top: 6px; right: 6px;
  }

  /* Skeleton card */
  .skeleton-card { border-radius: 12px; }
  .skeleton-inner { height: auto; min-height: 120px; }

  /* ── Empty state ── */
  .empty-state {
    padding: 30px 16px;
    min-height: 250px;
  }
  .empty-icon { font-size: 36px; }
  .empty-title { font-size: 16px; }
  .empty-sub { font-size: 13px; }
  .empty-examples { gap: 6px; }
  .example-tag {
    font-size: 12px;
    padding: 10px 14px;
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* ═══════════════════════════════════
     LIGHTBOX — FULLSCREEN MOBILE
  ═══════════════════════════════════ */
  .detail-overlay { z-index: 300; }
  .detail-panel {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    z-index: 301;
    transform: none !important;
  }
  .detail-layout {
    flex-direction: column !important;
    height: 100%;
  }
  .detail-preview {
    flex: 0 0 auto;
    max-height: 45vh;
    min-height: 200px;
    width: 100%;
    background: #000;
  }
  .detail-preview img,
  .detail-preview video {
    max-height: 45vh;
    width: 100%;
    object-fit: contain;
  }
  .detail-side {
    flex: 1;
    overflow-y: auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 16px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .detail-close {
    top: 10px; right: 10px;
    width: 38px; height: 38px;
    font-size: 18px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    z-index: 10;
  }
  .detail-dl-opt {
    font-size: 14px;
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .detail-meta-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .detail-meta-item { padding: 10px; }
  .detail-prompt { font-size: 13px; }
  .detail-actions { gap: 8px; }
  .btn-detail-copy, .btn-detail-retry {
    font-size: 13px;
    padding: 10px 14px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Toast — bottom on mobile ── */
  .toast-container {
    top: auto;
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    right: 50%;
    transform: translateX(50%);
    width: calc(100% - 32px);
    max-width: 380px;
  }
  .toast {
    max-width: 100%;
  }

  /* ── User info — compact on mobile ── */
  .user-info-bar { display: none !important; }
  #admin-btn { display: none !important; }

  /* ── Skeleton — rounder ── */
  .skeleton-card { border-radius: 14px; }
}

/* ══════════════════════════════════════════
   VERY SMALL PHONES (≤ 400px)
══════════════════════════════════════════ */
@media (max-width: 400px) {
  /* Gallery 1 cột */
  .media-card, .skeleton-card {
    width: 100% !important;
    aspect-ratio: 4/5;
  }
  .model-card { min-width: 160px; }
  .icon-btn-label { font-size: 7px; }
  .icon-btn-icon { font-size: 20px; }
  .icon-sidebar {
    height: calc(48px + env(safe-area-inset-bottom, 0px));
    min-height: 48px;
  }
  .gallery-body {
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  }
  .detail-preview { max-height: 38vh; min-height: 160px; }
  .detail-preview img, .detail-preview video { max-height: 38vh; }
  .prompt-textarea { min-height: 38px; }
  .example-tag { font-size: 11px; padding: 8px 12px; }
}

/* ══════════════════════════════════════════
   UPSCALE DROP ZONE
══════════════════════════════════════════ */
.upscale-drop-zone {
  border: 2px dashed rgba(124,111,255,0.35);
  border-radius: 14px;
  padding: 24px 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  position: relative;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124,111,255,0.03);
}
.upscale-drop-zone:hover {
  border-color: var(--accentHi);
  background: rgba(124,111,255,0.07);
}
.upscale-drop-zone.dragging {
  border-color: var(--accent);
  background: rgba(124,111,255,0.12);
  box-shadow: 0 0 0 4px rgba(124,111,255,0.12);
}
.upscale-drop-zone.has-file {
  border-style: solid;
  border-color: rgba(124,111,255,0.4);
  background: transparent;
  padding: 10px;
  min-height: unset;
}

/* ── Upscale Quality Card ── */
.upscale-quality-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border: 1.5px solid var(--border2);
  border-radius: var(--r12);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
}
.upscale-quality-card:hover {
  border-color: var(--accent);
  background: rgba(124,111,255,0.08);
}
.upscale-quality-card.active {
  border-color: var(--accent);
  background: rgba(124,111,255,0.15);
  box-shadow: 0 0 0 3px rgba(124,111,255,0.2);
  color: var(--accentHi);
}

/* ══════════════════════════════════════════
   CHAT AI PANEL
══════════════════════════════════════════ */

/* ── Model Selector Bar ── */
.chat-model-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

/* Trigger Button */
.chat-model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1.5px solid var(--border2);
  border-radius: 10px;
  background: var(--bg3);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  width: auto;
}
.chat-model-trigger:hover {
  border-color: var(--accent);
}
.chat-model-selected-icon { font-size: 16px; }
.chat-model-selected-name { flex: 1; text-align: left; }
.chat-model-arrow {
  font-size: 12px;
  color: var(--text3);
  transition: transform 0.2s;
}

/* Dropdown Panel */
.chat-model-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 14px;
  width: 240px;
  background: rgba(24,22,40,0.98);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 6px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: dropdownSlide 0.15s ease;
}
@keyframes dropdownSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Model Item */
.chat-model-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.chat-model-item:hover {
  background: rgba(124,111,255,0.08);
}
.chat-model-item.active {
  background: rgba(124,111,255,0.15);
}
.chat-model-item-icon { font-size: 20px; flex-shrink: 0; }
.chat-model-item-info { display: flex; flex-direction: column; gap: 2px; }
.chat-model-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
.chat-model-item-desc { font-size: 11px; color: var(--text3); }

/* ── Chat Messages Area ── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

/* ── Welcome Screen ── */
.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
  gap: 12px;
  flex: 1;
}
.chat-welcome-icon {
  font-size: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.chat-welcome-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.chat-welcome-sub {
  font-size: 13px;
  color: var(--text3);
  max-width: 320px;
  line-height: 1.5;
}
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  max-width: 400px;
}
.chat-suggest-btn {
  padding: 8px 14px;
  border: 1px solid var(--border2);
  border-radius: 20px;
  background: var(--bg3);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.chat-suggest-btn:hover {
  border-color: var(--accent);
  color: var(--accentHi);
  background: rgba(124,111,255,0.08);
}

/* ── Chat Message Bubbles ── */
.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 90%;
  animation: chatFadeIn 0.3s ease;
}
@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg-assistant {
  align-self: flex-start;
}
.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.chat-msg-user .chat-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.chat-msg-assistant .chat-avatar {
  background: var(--bg3);
  border: 1px solid var(--border2);
}
.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg-user .chat-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg-assistant .chat-bubble {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

/* ── Typing Dots ── */
.chat-typing {
  display: flex;
  gap: 5px;
  padding: 14px 18px;
  align-items: center;
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text3);
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Chat Input Area ── */
.chat-input-area {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg1);
}
.chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  border-radius: 16px;
  padding: 6px 6px 6px 14px;
  transition: border-color 0.2s;
}
.chat-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,111,255,0.12);
}
.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  max-height: 120px;
  min-height: 24px;
  line-height: 1.5;
  padding: 4px 0;
}
.chat-input::placeholder { color: var(--text3); }
.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.18s, transform 0.18s;
}
.chat-send-btn:hover { opacity: 0.9; transform: scale(1.05); }
.chat-send-btn:active { transform: scale(0.95); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Mobile Chat ── */
@media (max-width: 680px) {
  .chat-model-bar { padding: 8px 10px; }
  .chat-model-trigger { padding: 6px 12px; font-size: 12px; }
  .chat-model-dropdown { left: 10px; width: 220px; }
  .chat-model-item { padding: 9px 10px; }
  .chat-welcome { padding: 24px 12px; }
  .chat-welcome-icon { font-size: 36px; }
  .chat-welcome-title { font-size: 16px; }
  .chat-welcome-sub { font-size: 12px; }
  .chat-suggest-btn { font-size: 11px; padding: 7px 12px; }
  .chat-messages { padding: 12px 10px; }
  .chat-bubble { font-size: 13px; padding: 9px 12px; }
  .chat-input-area {
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}