/* ==========================================================================
   Frame Copilot AI — Senior Design System & Visual Studio
   Modern, Intuitive, Uncluttered · Dual Theme Engine
   ========================================================================== */

/* -------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------- */
:root, [data-theme="dark"] {
  --bg-app: #09090B;
  --bg-sidebar: #0C0C0E;
  --bg-sidebar-hover: #16161B;
  --bg-card: #121215;
  --bg-card-hover: #181820;
  --bg-input: #141418;
  --bg-elevated: #1B1B22;
  --bg-dock: rgba(14, 14, 18, 0.92);
  --bg-header: rgba(9, 9, 11, 0.88);

  --border: #222228;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-highlight: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(2, 159, 123, 0.4);

  --text-main: #FAFAFA;
  --text-muted: #A1A1AA;
  --text-dim: #71717A;
  --text-inv: #09090B;

  --accent: #029F7B;
  --accent-light: #3FD082;
  --accent-dark: #027359;
  --accent-subtle: rgba(2, 159, 123, 0.12);
  --accent-glow: rgba(2, 159, 123, 0.28);

  --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-main);
  --font-mono: "JetBrains Mono", Consolas, monospace;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-full: 9999px;

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.22s var(--ease-spring);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.15);
  --shadow-dock: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border);
  --shadow-popup: 0 28px 70px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--border);

  --app-gradient: radial-gradient(ellipse at 20% 10%, rgba(2, 159, 123, 0.05) 0%, transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(59, 130, 246, 0.03) 0%, transparent 60%);
}

/* Light Theme — Crisp Ceramic Slate */
[data-theme="light"] {
  --bg-app: #F8FAFC;
  --bg-sidebar: #FFFFFF;
  --bg-sidebar-hover: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F8FAFC;
  --bg-input: #FFFFFF;
  --bg-elevated: #F1F5F9;
  --bg-dock: rgba(255, 255, 255, 0.96);
  --bg-header: rgba(255, 255, 255, 0.9);

  --border: #E2E8F0;
  --border-light: rgba(0, 0, 0, 0.06);
  --border-highlight: rgba(0, 0, 0, 0.14);
  --border-accent: rgba(1, 101, 77, 0.4);

  --text-main: #0F172A;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  --text-inv: #FFFFFF;

  --accent: #01654D;
  --accent-light: #029F7B;
  --accent-dark: #014C3C;
  --accent-subtle: rgba(1, 101, 77, 0.1);
  --accent-glow: rgba(1, 101, 77, 0.2);

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 14px 32px rgba(0, 0, 0, 0.09), 0 0 0 1px #E2E8F0;
  --shadow-dock: 0 16px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px #E2E8F0;
  --shadow-popup: 0 20px 50px rgba(0, 0, 0, 0.12), 0 0 0 1px #E2E8F0;

  --app-gradient: radial-gradient(ellipse at 20% 10%, rgba(1, 101, 77, 0.04) 0%, transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(59, 130, 246, 0.02) 0%, transparent 60%);
}

/* -------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-main);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.chat-app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  background-image: var(--app-gradient);
}

/* -------------------------------------------------------------
   3. SIDEBAR NAVIGATION
   ------------------------------------------------------------- */
.chat-sidebar {
  width: 270px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: transform 0.28s var(--ease-spring), margin-left 0.28s var(--ease-spring), background-color 0.25s ease, border-color 0.25s ease;
  z-index: 40;
}

.chat-sidebar.collapsed {
  margin-left: -270px;
}

.sidebar-top {
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-main);
}

/* The tile is painted into the mark image, so this only sizes it — and it
   needs no theme handling, because the mark reads on light and dark alike. */
.brand-logo-frame {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-text-col {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.sync-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  background-color: var(--accent-subtle);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--border-accent);
}

.sync-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 5px var(--accent);
}

.btn-new-chat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-main);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(1, 101, 77, 0.25);
  transition: var(--transition);
}

.btn-new-chat:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--accent-glow);
}

[data-theme="dark"] .btn-new-chat {
  background: linear-gradient(180deg, #FFFFFF 0%, #E4E4E7 100%);
  color: #09090B;
}

[data-theme="dark"] .btn-new-chat:hover {
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.2);
}

.kbd-shortcut {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background-color: rgba(0, 0, 0, 0.18);
  padding: 1px 6px;
  border-radius: 3px;
  color: inherit;
}

/* Search Box */
.sidebar-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-dim);
}

.sidebar-search-wrap:focus-within {
  border-color: var(--accent);
  color: var(--accent);
}

.sidebar-search-wrap input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.78rem;
  color: var(--text-main);
  width: 100%;
}

.sidebar-search-wrap input::placeholder {
  color: var(--text-dim);
}

/* History Region */
.sidebar-history {
  flex-grow: 1;
  overflow-y: auto;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 8px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.sessions-badge {
  background-color: var(--bg-elevated);
  color: var(--text-dim);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.62rem;
  border: 1px solid var(--border-light);
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  user-select: none;
}

.session-item:hover {
  background-color: var(--bg-sidebar-hover);
  color: var(--text-main);
}

.session-item.active {
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text-main);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.session-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.btn-del-session {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 1rem;
  line-height: 1;
  transition: var(--transition);
}

.session-item:hover .btn-del-session {
  opacity: 1;
}

.btn-del-session:hover {
  color: #EF4444;
  background-color: rgba(239, 68, 68, 0.1);
}

/* Sidebar Bottom */
.sidebar-bottom {
  border-top: 1px solid var(--border-light);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: var(--bg-sidebar);
}

.nav-drawer-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: var(--transition);
}

.nav-drawer-btn:hover {
  background-color: var(--bg-sidebar-hover);
  color: var(--text-main);
}

.drawer-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-dim);
}

.nav-drawer-btn:hover .drawer-icon-wrap {
  color: var(--accent);
  border-color: var(--accent-subtle);
}

.count-pill {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background-color: var(--bg-elevated);
  color: var(--text-muted);
  padding: 1px 6px;
  border-radius: 9999px;
  border: 1px solid var(--border-light);
}

.subtle-back {
  color: var(--text-dim);
  margin-top: 4px;
  border-top: 1px dashed var(--border-light);
  padding-top: 8px;
}

.user-account-drawer-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
}

.user-account-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.user-name-display {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-sub {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--accent);
  font-weight: 700;
}

.btn-sign-out {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.btn-sign-out:hover {
  color: #EF4444;
  background-color: rgba(239, 68, 68, 0.1);
}

/* -------------------------------------------------------------
   4. MAIN WORKSPACE & TOP HEADER
   ------------------------------------------------------------- */
.chat-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: var(--bg-app);
}

.chat-header {
  height: 54px;
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-header);
  backdrop-filter: blur(24px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  z-index: 20;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-toggle-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.sidebar-toggle-btn:hover {
  color: var(--text-main);
  border-color: var(--border-highlight);
}

.session-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.studio-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.active-session-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-header-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 3px 8px 3px 4px;
}

.user-avatar-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
}

.user-avatar-circle.mini {
  width: 26px;
  height: 26px;
}

.user-header-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-header-signout {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border-radius: 4px;
  transition: var(--transition);
}

.btn-header-signout:hover {
  color: #EF4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.btn-theme-toggle, .btn-icon {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.btn-theme-toggle:hover, .btn-icon:hover {
  color: var(--text-main);
  border-color: var(--border-highlight);
  background-color: var(--bg-elevated);
}

.btn-icon:hover {
  color: #EF4444;
}

[data-theme="dark"] .icon-theme-moon { display: none; }
[data-theme="dark"] .icon-theme-sun { display: block; color: #FBBF24; }
[data-theme="light"] .icon-theme-sun { display: none; }
[data-theme="light"] .icon-theme-moon { display: block; color: #4B5563; }

/* -------------------------------------------------------------
   5. CHAT MESSAGES SCROLL AREA
   ------------------------------------------------------------- */
.chat-messages-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 28px 24px 220px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  scroll-behavior: smooth;
}

.message-row {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  animation: fadeIn 0.25s var(--ease-spring);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* User Message Card */
.message-row.user {
  align-items: flex-end;
}

.user-bubble-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 12px 18px;
  border-radius: 16px 16px 4px 16px;
  box-shadow: var(--shadow-sm);
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-prompt-text {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-main);
  font-weight: 500;
}

.user-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--text-dim);
}

.btn-msg-subtle {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.72rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: var(--transition);
}

.btn-msg-subtle:hover {
  color: var(--text-main);
  background: var(--bg-elevated);
}

/* AI Assistant Message Container */
.message-row.assistant {
  align-items: stretch;
  gap: 12px;
}

.ai-response-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.ai-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-model-tag {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-sparkle-icon {
  color: var(--accent);
}

.interpretation-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}

.copilot-assistant-note {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 15px;
  color: var(--text-muted);
  background: linear-gradient(135deg, rgba(2, 159, 123, 0.09), rgba(2, 159, 123, 0.025));
  border: 1px solid rgba(2, 159, 123, 0.22);
  border-radius: var(--radius-md);
  line-height: 1.55;
  font-size: 0.82rem;
}

.copilot-assistant-note.is-clarification {
  max-width: 680px;
  background: var(--bg-card);
  border-color: var(--border-highlight);
  color: var(--text-main);
  box-shadow: var(--shadow-sm);
}

.copilot-assistant-note p {
  margin: 1px 0 0;
}

.copilot-note-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid rgba(2, 159, 123, 0.24);
  font-family: var(--font-mono);
  font-weight: 800;
}

@media (max-width: 720px) {
  .ai-header-left {
    align-items: flex-start;
    flex-direction: column;
  }

  .interpretation-tag {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .copilot-assistant-note {
    padding: 11px 12px;
    font-size: 0.78rem;
  }
}

/* -------------------------------------------------------------
   6. REALISTIC AI GENERATION SKELETON STATE
   ------------------------------------------------------------- */
.generation-loading-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-sm);
  animation: fadeIn 0.2s ease;
}

.loading-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.loading-spinner-ring {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-status-text {
  font-family: var(--font-main);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-main);
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.skeleton-image-box {
  height: 300px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--bg-input) 0%, var(--bg-elevated) 50%, var(--bg-input) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border: 1px solid var(--border);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -------------------------------------------------------------
   7. VISUAL GALLERY CARDS (2x2 GRID)
   ------------------------------------------------------------- */
.candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.candidate-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}

.candidate-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-highlight);
  box-shadow: var(--shadow-card-hover);
}

.candidate-media-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
  background-color: #000000;
  cursor: pointer;
  /* The pill row has to respond to the card, not the viewport: at 1440px the
     grid can still hand out cards too narrow for five labelled pills. */
  container-type: inline-size;
}

.candidate-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-spring);
}

.candidate-card:hover .candidate-img {
  transform: scale(1.03);
}

.card-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.candidate-card:hover .card-hover-overlay {
  opacity: 1;
}

.card-action-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Five pills now, so they wrap instead of overflowing a narrow card. */
  flex-wrap: wrap;
  gap: 6px;
}

/* Five labelled pills need about 505px of card. Below that, drop the labels
   and keep the icons on one row — a single stray pill on a second row reads
   like a mistake. The title and aria-label carry the meaning either way. */
@container (max-width: 505px) {
  .card-action-pills-row .btn-card-pill span { display: none; }
  .card-action-pills-row .btn-card-pill { padding: 8px 11px; }
}

.btn-card-pill {
  display: inline-flex;
  align-items: center;
  /* Without this the five pills shrink past their labels rather than wrapping,
     so "Variations" and "Download" end up clipped on a narrow card. */
  flex-shrink: 0;
  white-space: nowrap;
  gap: 6px;
  background: rgba(18, 18, 22, 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-family: var(--font-main);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn-card-pill:hover {
  background: #FFFFFF;
  color: #09090B;
  border-color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-card-pill.primary {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

.btn-card-pill.primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn-branch-variation.is-loading,
.btn-branch-variation:disabled {
  cursor: wait;
  opacity: 0.82;
  transform: none;
}

.variation-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Feedback & Refine bar below candidate grid */
.ai-feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 0;
  font-size: 0.76rem;
  color: var(--text-dim);
}

.ai-feedback-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-feedback {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
}

.btn-feedback:hover {
  color: var(--text-main);
  border-color: var(--border-highlight);
  background: var(--bg-elevated);
}

/* -------------------------------------------------------------
   8. WELCOME HERO (PERSONALIZED & REFINED)
   ------------------------------------------------------------- */
.welcome-hero-container {
  max-width: 860px;
  margin: 16px auto 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.welcome-card-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.welcome-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  background-color: var(--accent-subtle);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-accent);
  width: fit-content;
}

.w-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.welcome-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-main);
}

.welcome-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Categories Pills */
.starter-category-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.category-pill-btn {
  background-color: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.category-pill-btn:hover {
  color: var(--text-main);
  background-color: var(--bg-elevated);
}

.category-pill-btn.active {
  background-color: var(--text-main);
  color: var(--text-inv);
  border-color: var(--text-main);
}

.starter-prompts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.starter-card {
  background-color: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.starter-card:hover {
  border-color: var(--border-highlight);
  background-color: var(--bg-elevated);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.st-icon-box {
  font-size: 1.3rem;
  width: 36px;
  height: 36px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.st-body strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 2px;
}

.st-body p {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* -------------------------------------------------------------
   9. BOTTOM INPUT DOCK (FLOATING ISLAND)
   ------------------------------------------------------------- */
.chat-input-dock {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg-app) 25%);
  padding: 16px 20px 20px;
  z-index: 30;
  pointer-events: none;
}

.dock-container {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.dock-quick-suggestions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px;
}

.quick-chip {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.quick-chip:hover {
  background-color: var(--bg-elevated);
  color: var(--text-main);
  border-color: var(--border-highlight);
}

/* Expandable Form Card (ChatGPT style) */
.dock-input-form {
  background-color: var(--bg-dock);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-dock);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dock-input-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--accent-subtle);
}

.dock-textarea-wrapper {
  width: 100%;
  display: flex;
}

#promptInput {
  width: 100%;
  min-height: 42px;
  max-height: 280px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 0.94rem;
  line-height: 1.55;
  resize: none;
  padding: 4px 2px;
  overflow-y: hidden;
  transition: height 0.08s ease-out;
}

#promptInput::placeholder {
  color: var(--text-dim);
}

/* Bottom Toolbar Inside Dock (Like ChatGPT) */
.dock-bottom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
  padding-top: 8px;
  gap: 8px;
}

.dock-filters-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-dropdown-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

.filter-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-dim);
}

.filter-select {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
}

.filter-select option {
  background-color: var(--bg-card);
  color: var(--text-main);
}

.btn-magic-enhance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
}

.btn-magic-enhance:hover {
  background: var(--accent-subtle);
  border-color: var(--border-accent);
}

.dock-actions-right {
  display: flex;
  align-items: center;
}

.btn-send {
  background: var(--accent);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.btn-send:hover {
  background: var(--accent-dark);
  box-shadow: 0 4px 12px var(--accent-glow);
}

[data-theme="dark"] .btn-send {
  background: linear-gradient(180deg, #FFFFFF 0%, #E4E4E7 100%);
  color: #09090B;
}

[data-theme="dark"] .btn-send:hover {
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.25);
}

.dock-hint-text {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-align: center;
}

.dock-hint-text kbd {
  font-family: var(--font-mono);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1px 4px;
  border-radius: 3px;
}

.btn-recipes-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
}

.btn-recipes-trigger:hover {
  background: var(--bg-elevated);
  border-color: var(--accent);
  color: var(--accent);
}

/* -------------------------------------------------------------
   10. MODALS, SHORTCUTS & DRAWERS
   ------------------------------------------------------------- */
.modal-overlay, .drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 100;
}

.modal-overlay.active, .drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* The lightbox can be opened from ON TOP of the library drawer, and both
   share the .modal-overlay/.drawer-overlay z-index of 100 - so DOM order
   decided the winner and the drawer, being later in the document, buried the
   preview. Lift the preview above the drawer and the mobile sidebar (150),
   while staying below toasts (200) so confirmations remain visible. */
#lightboxModal {
  z-index: 160;
}

.lightbox-content-box {
  position: relative;
  width: 900px;
  max-width: 94vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popup);
  overflow: hidden;
}

.lightbox-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
  background-color: var(--bg-subtle);
}

.lightbox-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lightbox-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  background-color: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  padding: 2px 6px;
  border-radius: 4px;
}

.lightbox-aspect-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.lightbox-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-tool-pill:hover, .btn-tool-pill.active {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

.btn-close-lightbox {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}

.btn-close-lightbox:hover {
  color: var(--text-main);
}

.lightbox-img-wrap {
  position: relative;
  width: 100%;
  height: 480px;
  max-height: 55vh;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Palette Swatches Bar */
.lightbox-palette-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.palette-bar-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dim);
}

.palette-swatches-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.palette-hex-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}

.palette-hex-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.palette-color-preview {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* Lightbox Actions */
.lightbox-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background-color: var(--bg-card);
}

.lightbox-export-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-lightbox-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.btn-lightbox-action:hover {
  background: var(--bg-hover);
  border-color: var(--border-highlight);
}

.btn-lightbox-action.primary {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

.btn-lightbox-action.primary:hover {
  background: var(--accent-dark);
}

/* Recipes Drawer Content */
.recipes-category-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.recipe-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recipe-sec-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.recipe-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.recipe-card {
  background-color: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.recipe-card:hover {
  border-color: var(--accent);
  background-color: var(--bg-elevated);
  transform: translateY(-2px);
}

.recipe-card strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-main);
  margin-bottom: 2px;
}

.recipe-card p {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Taste DNA Components */
.taste-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tg-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-dim);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.c-chip {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.c-chip.strike {
  color: var(--text-dim);
  text-decoration: line-through;
}

.palette-swatches {
  display: flex;
  gap: 8px;
}

.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
}

/* Shortcuts Modal */
.shortcuts-card-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 440px;
  max-width: 90vw;
  box-shadow: var(--shadow-popup);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
}

.shortcuts-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-main);
}

.shortcuts-title-wrap h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.shortcut-row kbd {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--text-main);
}

/* Drawers */
.drawer-overlay {
  justify-content: flex-end;
}

.drawer-panel {
  background-color: var(--bg-card);
  border-left: 1px solid var(--border);
  width: 500px;
  max-width: 90vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-popup);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease-spring);
}

.drawer-overlay.active .drawer-panel {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.drawer-title-wrap h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.drawer-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 6px;
}

.btn-close-modal:hover {
  color: var(--text-main);
}

.drawer-body {
  padding: 20px;
  overflow-y: auto;
}

.library-assets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.saved-asset-card {
  background-color: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.saved-asset-card:hover {
  border-color: var(--border-highlight);
}

.saved-asset-thumb {
  height: 140px;
  overflow: hidden;
  cursor: pointer;
}

.saved-asset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saved-asset-info {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-download-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-decoration: none;
}

.btn-download-small:hover {
  background: var(--accent);
  color: #FFFFFF;
}

/* -------------------------------------------------------------
   11. TOAST NOTIFICATIONS
   ------------------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}

.toast-item {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  color: var(--text-main);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  box-shadow: var(--shadow-popup);
  animation: slideToast 0.25s var(--ease-spring);
}

@keyframes slideToast {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------
   12. RESPONSIVE BREAKPOINTS (CHATGPT MOBILE EXPERIENCE)
   ------------------------------------------------------------- */
/* Mobile Sidebar Backdrop Overlay */
.sidebar-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .chat-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    z-index: 150;
    transform: translateX(-100%);
    margin-left: 0 !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-popup);
  }

  .chat-sidebar.mobile-open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 140;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .chat-header {
    height: 50px;
    padding: 0 12px;
  }

  .studio-breadcrumb {
    display: none;
  }

  .active-session-title {
    font-size: 0.88rem;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-header-pill {
    padding: 2px 6px 2px 2px;
  }

  .user-header-name {
    display: none;
  }

  #btnShortcutsHelp {
    display: none;
  }

  /* Chat Messages Mobile Scroll */
  .chat-messages-container {
    padding: 16px 12px 170px;
    gap: 20px;
  }

  .user-bubble-box {
    max-width: 92%;
    padding: 10px 14px;
    border-radius: 14px 14px 2px 14px;
  }

  .user-prompt-text {
    font-size: 0.88rem;
  }

  .candidate-grid, .skeleton-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .candidate-media-wrap {
    height: 250px;
  }

  .skeleton-image-box {
    height: 250px;
  }

  /* Touch overlay on mobile is always tap-ready */
  .card-hover-overlay {
    opacity: 1;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%);
    padding: 12px;
  }

  .btn-card-pill {
    padding: 6px 12px;
    font-size: 0.72rem;
  }

  .welcome-hero-container {
    margin-top: 4px;
    gap: 12px;
  }

  .welcome-card-box {
    padding: 18px 14px;
    border-radius: var(--radius-md);
  }

  .welcome-title {
    font-size: 1.25rem;
  }

  .welcome-desc {
    font-size: 0.84rem;
  }

  .starter-prompts-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .starter-card {
    padding: 10px 12px;
  }

  /* Expandable Dock on Mobile */
  .chat-input-dock {
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
  }

  .dock-input-form {
    padding: 10px 12px 8px;
    border-radius: 18px;
    gap: 8px;
  }

  #promptInput {
    font-size: 0.88rem;
    min-height: 36px;
    max-height: 150px;
  }

  .dock-bottom-toolbar {
    padding-top: 6px;
    gap: 6px;
  }

  .dock-filters-left {
    gap: 4px;
  }

  .filter-label {
    display: none;
  }

  .filter-dropdown-wrap {
    padding: 2px 4px;
  }

  .filter-select {
    font-size: 0.65rem;
  }

  .btn-magic-enhance {
    padding: 3px 6px;
    font-size: 0.65rem;
  }

  .btn-send {
    padding: 6px 14px;
    font-size: 0.76rem;
    border-radius: 12px;
  }

  .dock-hint-text {
    display: none;
  }

  /* Drawer on Mobile */
  .drawer-panel {
    width: 100vw;
    max-width: 100vw;
  }

  .library-assets-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------
   13. ASSET SECURITY & UI PROTECTION
   ------------------------------------------------------------- */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.candidate-card, .candidate-media-wrap, .candidate-img, .lightbox-img-wrap, .saved-asset-thumb {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* -------------------------------------------------------------
   14. SUBSCRIPTION PLAN, CREDIT QUOTA & PRICING MODAL
   ------------------------------------------------------------- */
.plan-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  transition: var(--transition);
}

.plan-credit-pill:hover {
  border-color: var(--accent);
  background-color: var(--bg-elevated);
}

.plan-bolt-icon {
  font-size: 0.8rem;
  color: var(--accent);
}

.plan-credit-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
}

.plan-upgrade-tag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  background: var(--accent);
  color: #09090B;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}

.plan-upgrade-tag.pro {
  background: linear-gradient(135deg, #029F7B 0%, #01DAC0 100%);
  color: #FFFFFF;
}

/* Sidebar Plan Card */
.sidebar-plan-card {
  background-color: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.spc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spc-badge-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spc-tier-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
}

.spc-pill {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 1px 4px;
  border-radius: 3px;
}

.btn-sidebar-upgrade {
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-family: var(--font-main);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-sidebar-upgrade:hover {
  background: var(--accent);
  color: #FFFFFF;
}

.spc-progress-track {
  width: 100%;
  height: 4px;
  background-color: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
}

.spc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #01DAC0 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.spc-sub-text {
  font-size: 0.66rem;
  color: var(--text-dim);
}

/* Pricing Upgrade Modal Box */
.pricing-modal-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-highlight);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  width: 880px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-popup);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pricing-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pmh-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing-badge-pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.pricing-modal-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.pricing-modal-sub {
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* Billing Switcher */
.billing-switcher-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 12px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: fit-content;
  margin: 0 auto;
}

.cycle-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.save-chip {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--border-accent);
  padding: 1px 5px;
  border-radius: 3px;
}

.billing-switch-wrap {
  position: relative;
  width: 36px;
  height: 20px;
}

.billing-switch-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: 0.2s;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-main);
  border-radius: 50%;
  transition: 0.2s;
}

.billing-switch-wrap input:checked + .switch-slider {
  background-color: var(--accent);
  border-color: var(--accent);
}

.billing-switch-wrap input:checked + .switch-slider:before {
  transform: translateX(16px);
  background-color: #09090B;
}

/* Pricing Tier Cards Grid */
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pricing-tier-card {
  background-color: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: var(--transition);
}

.pricing-tier-card:hover {
  border-color: var(--border-highlight);
  transform: translateY(-2px);
}

.pricing-tier-card.featured {
  background-color: var(--bg-card);
  border: 2px solid var(--accent);
  box-shadow: 0 12px 32px rgba(2, 159, 123, 0.15);
}

.popular-ribbon {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent);
  color: #09090B;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.ptc-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tier-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
}

.tier-tagline {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.tier-price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.price-currency {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-muted);
}

.price-val {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-main);
}

.price-period {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.tier-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
  flex-grow: 1;
}

.tier-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.35;
}

.feat-check {
  color: var(--text-dim);
  font-weight: 800;
}

.feat-check.accent {
  color: var(--accent);
}

.btn-tier-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.btn-tier-action.outline {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: default;
}

.btn-tier-action.primary {
  background: var(--accent);
  color: #09090B;
}

.btn-tier-action.primary:hover {
  background: var(--accent-dark);
  color: #FFFFFF;
}

.btn-tier-action.secondary {
  background: var(--bg-elevated);
  border: 1px solid var(--border-highlight);
  color: var(--text-main);
}

.btn-tier-action.secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-main);
}

.pricing-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
}

@media (max-width: 820px) {
  .pricing-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   2026 STUDIO WORKSPACE REFINEMENT
   Task-first hierarchy, unified composer, calmer navigation
   ========================================================================== */
:root,
[data-theme="dark"] {
  --bg-app: #050A08;
  --bg-sidebar: #060F0B;
  --bg-sidebar-hover: #091914;
  --bg-card: #071510;
  --bg-card-hover: #091C16;
  --bg-input: #08130F;
  --bg-elevated: #0C2019;
  --bg-dock: rgba(4, 17, 12, 0.96);
  --bg-header: rgba(5, 10, 8, 0.88);
  --border: #122A22;
  --border-light: rgba(215, 236, 228, 0.08);
  --border-highlight: rgba(215, 236, 228, 0.17);
  --text-muted: #AEAABB;
  --text-dim: #7A757F;
  --accent: #029F7B;
  --accent-dark: #027359;
  --accent-subtle: rgba(2, 159, 123, 0.11);
  --accent-glow: rgba(2, 159, 123, 0.22);
  --app-gradient:
    radial-gradient(circle at 42% 8%, rgba(2, 159, 123, 0.055), transparent 30%),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
}

[data-theme="light"] {
  --bg-app: #F1F6F4;
  --bg-sidebar: #FBFBFC;
  --bg-sidebar-hover: #E7F1ED;
  --bg-card: #ffffff;
  --bg-card-hover: #F3F9F6;
  --bg-input: #ffffff;
  --bg-elevated: #E5F1EC;
  --bg-dock: rgba(255, 255, 255, 0.97);
  --bg-header: rgba(249, 252, 251, 0.9);
  --border: #D0E2DB;
  --border-light: rgba(0, 33, 23, 0.07);
  --border-highlight: rgba(0, 33, 23, 0.16);
  --text-main: #041610;
  --text-muted: #645E6D;
  --text-dim: #8F8A98;
  --accent: #01654D;
  --accent-dark: #014C3C;
  --app-gradient:
    radial-gradient(circle at 42% 8%, rgba(1, 101, 77, 0.07), transparent 30%),
    linear-gradient(rgba(0, 22, 15, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 22, 15, 0.018) 1px, transparent 1px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chat-app-layout { background-size: auto, 64px 64px, 64px 64px; }

.chat-sidebar { width: 288px; }
.chat-sidebar.collapsed { margin-left: -288px; }
.sidebar-top { padding: 18px 16px 16px; gap: 14px; }
.sidebar-brand-row { min-height: 40px; }
.brand-logo-frame { width: 36px; height: 36px; border-radius: 11px; }
.brand-name { font-size: 0.96rem; }
.brand-sub { margin-top: 2px; letter-spacing: 0.13em; }
.sync-status-pill { padding: 3px 8px; border-radius: 999px; }

.btn-new-chat,
[data-theme="dark"] .btn-new-chat {
  min-height: 43px;
  padding: 10px 13px;
  border: 1px solid rgba(2, 159, 123, 0.42);
  border-radius: 11px;
  color: #F6FCF9;
  background: linear-gradient(135deg, #028969, #01654D);
  box-shadow: 0 8px 22px rgba(1, 101, 77, 0.16), inset 0 1px rgba(255, 255, 255, 0.18);
}

.btn-new-chat:hover,
[data-theme="dark"] .btn-new-chat:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #03B188, #027359);
  box-shadow: 0 11px 28px rgba(1, 101, 77, 0.25);
}

.sidebar-search-wrap { min-height: 38px; padding: 8px 11px; border-radius: 10px; }
.sidebar-history { padding: 16px 12px; gap: 7px; }
.history-label-row { padding: 0 7px 7px; font-size: 0.62rem; letter-spacing: 0.11em; }
.session-list { gap: 5px; }
.session-item { min-height: 40px; padding: 9px 11px; }
.session-item.active { border-color: var(--border-highlight); box-shadow: inset 3px 0 var(--accent); }
.session-title-text { max-width: 190px; }
.sidebar-bottom { padding: 12px; gap: 5px; }
.nav-drawer-btn { min-height: 41px; padding: 8px 9px; }
.sidebar-plan-card { margin-bottom: 4px; }

.chat-main::before {
  content: "";
  position: absolute;
  inset: 54px 0 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 14%, var(--accent-subtle), transparent 30%),
    linear-gradient(90deg, transparent 49.92%, var(--border-light) 50%, transparent 50.08%);
  opacity: 0.5;
}

.chat-header { height: 60px; padding: 0 24px; }
.chat-header-left { gap: 14px; }
.sidebar-toggle-btn,
.btn-theme-toggle,
.btn-icon { width: 36px; height: 36px; }
.active-session-title { font-size: 1rem; }
.chat-header-right { gap: 9px; }
.plan-credit-pill { min-height: 34px; padding: 4px 7px 4px 10px; }
.user-header-pill { min-height: 36px; padding-right: 9px; }

.chat-messages-container {
  position: relative;
  z-index: 1;
  padding: 38px 36px 290px;
  gap: 36px;
}

.message-row { max-width: 1040px; }
.user-bubble-box { max-width: 760px; padding: 14px 18px; }

.welcome-hero-container {
  width: 100%;
  max-width: 1080px;
  margin: auto;
  padding: 6px 0 18px;
}

.welcome-card-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(430px, 1.14fr);
  gap: 0;
  min-height: 430px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 3% 2%, rgba(2, 159, 123, 0.13), transparent 37%),
    var(--bg-card);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.2), inset 0 1px var(--border-light);
}

.welcome-card-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  width: 64px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 22px var(--accent);
}

.welcome-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 38px;
}

.welcome-badge-tag {
  margin-bottom: 24px;
  padding: 5px 10px;
  border-color: var(--border-accent);
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-family: var(--font-main);
  font-size: 0.67rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.welcome-title {
  max-width: 520px;
  font-size: clamp(2.2rem, 3.5vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -0.052em;
}

.welcome-title em { color: var(--accent); font-style: normal; }

.welcome-desc {
  max-width: 470px;
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 0.91rem;
  line-height: 1.65;
}

.welcome-capabilities {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.welcome-capabilities span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.73rem;
  font-weight: 500;
}

.welcome-capabilities i {
  display: inline-grid;
  width: 26px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-style: normal;
}

.welcome-discovery {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 32px;
  border-left: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.018);
}

.starter-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.starter-section-heading > div { display: flex; flex-direction: column; gap: 4px; }
.starter-kicker { color: var(--accent); font-family: var(--font-mono); font-size: 0.59rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.starter-section-heading strong { font-family: var(--font-display); font-size: 1.02rem; }
.starter-helper { color: var(--text-dim); font-size: 0.65rem; }

.starter-category-row {
  gap: 6px;
  margin: 0 -2px 16px;
  padding: 2px;
  scrollbar-width: none;
}

.starter-category-row::-webkit-scrollbar,
.quick-chips-scroll::-webkit-scrollbar { display: none; }

.category-pill-btn {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 8px;
  background: transparent;
  font-size: 0.69rem;
  font-weight: 600;
}

.category-pill-btn.active {
  border-color: var(--border-accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.starter-prompts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.starter-card {
  position: relative;
  min-height: 66px;
  gap: 12px;
  padding: 10px 12px;
  border-color: var(--border-light);
  border-radius: 12px;
  background: var(--bg-input);
}

.starter-card:hover {
  border-color: var(--border-accent);
  background: var(--bg-card-hover);
  transform: translateX(3px);
  box-shadow: none;
}

.st-icon-box {
  width: 38px;
  height: 38px;
  border-color: var(--border-light);
  border-radius: 10px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-family: var(--font-display);
  font-size: 1rem;
}

.st-body { min-width: 0; flex: 1; }
.st-body strong { font-size: 0.8rem; }
.st-body p { overflow: hidden; color: var(--text-dim); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.starter-card-arrow { margin-left: auto; color: var(--text-dim); font-size: 1rem; transition: color var(--transition), transform var(--transition); }
.starter-card:hover .starter-card-arrow { color: var(--accent); transform: translateX(2px); }

.chat-input-dock {
  padding: 24px 30px 22px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-app) 28%, var(--bg-app) 100%);
}

.dock-container { max-width: 1040px; gap: 9px; }

.dock-input-form {
  gap: 10px;
  padding: 15px 16px 12px;
  border-color: var(--border-highlight);
  border-radius: 20px;
  background: var(--bg-dock);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36), 0 0 0 1px var(--border-light);
}

.dock-input-form:focus-within {
  border-color: var(--border-accent);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4), 0 0 0 3px var(--accent-subtle);
}

.composer-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.composer-label { color: var(--text-main); font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; }
.composer-status { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 0.62rem; }
.composer-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.dock-quick-suggestions {
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  overflow: visible;
}

.quick-chips-label {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.quick-chips-scroll { display: flex; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; }

.quick-chip {
  padding: 4px 9px;
  border-color: var(--border-light);
  border-radius: 7px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  font-size: 0.66rem;
}

.quick-chip:hover { border-color: var(--border-accent); color: var(--accent); background: var(--accent-subtle); }

#promptInput {
  min-height: 54px;
  padding: 6px 1px 8px;
  font-size: 0.98rem;
  line-height: 1.55;
}

#promptInput::placeholder { color: var(--text-dim); opacity: 0.86; }
.dock-bottom-toolbar { padding-top: 10px; }
.dock-filters-left { gap: 7px; }

.filter-dropdown-wrap {
  min-height: 34px;
  padding: 4px 8px;
  border-color: var(--border-light);
  border-radius: 9px;
  background: var(--bg-input);
}

.filter-label { font-size: 0.56rem; letter-spacing: 0.05em; }
.filter-select { font-size: 0.68rem; }

.btn-magic-enhance,
.btn-recipes-trigger {
  min-height: 34px;
  padding: 5px 10px;
  border-color: var(--border-light);
  border-radius: 9px;
  background: var(--bg-input);
  font-size: 0.68rem;
}

.btn-send,
[data-theme="dark"] .btn-send {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(2, 159, 123, 0.42);
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(135deg, #028969, #01654D);
  box-shadow: 0 8px 20px rgba(1, 101, 77, 0.18);
}

.btn-send:hover,
[data-theme="dark"] .btn-send:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #03B188, #027359);
  box-shadow: 0 10px 24px rgba(1, 101, 77, 0.28);
}

.dock-hint-text { color: var(--text-dim); font-size: 0.62rem; }

@media (max-width: 1180px) {
  .welcome-card-box { grid-template-columns: minmax(280px, 0.8fr) minmax(390px, 1.2fr); }
  .welcome-copy { padding: 34px 30px; }
  .welcome-discovery { padding: 28px 24px; }
  .welcome-title { font-size: clamp(2rem, 3.7vw, 2.75rem); }
  .welcome-capabilities { margin-top: 22px; }
}

@media (max-width: 900px) {
  .welcome-card-box { grid-template-columns: 1fr; }
  .welcome-copy { padding: 30px 28px 26px; }
  .welcome-badge-tag { margin-bottom: 18px; }
  /* The <br> is gone from the markup; the emphasis goes inline here so the
     title wraps naturally instead of breaking at a fixed point. Hiding a <br>
     used to collapse the break without leaving a space, which is what produced
     "Direct the imageyou have in mind." */
  .welcome-title em { display: inline; }
  .welcome-capabilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .welcome-capabilities span { gap: 7px; font-size: 0.66rem; }
  .welcome-discovery { padding: 24px 28px 28px; border-top: 1px solid var(--border); border-left: 0; }
  .starter-prompts-grid { grid-template-columns: repeat(2, 1fr); }
  .chat-messages-container { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 768px) {
  .chat-sidebar { width: min(304px, calc(100vw - 44px)); }
  .chat-header { height: 56px; padding: 0 12px; }
  .chat-header-right { gap: 5px; }
  .plan-upgrade-tag, #btnClearChat { display: none; }
  .plan-credit-pill { min-height: 32px; }
  .chat-messages-container { padding: 18px 12px 270px; }
  .welcome-hero-container { padding: 0; }
  .welcome-card-box { min-height: 0; border-radius: 18px; }
  .welcome-copy { padding: 25px 20px 22px; }
  .welcome-title { font-size: clamp(1.85rem, 8vw, 2.45rem); }
  .welcome-desc { font-size: 0.82rem; }
  .welcome-capabilities { grid-template-columns: 1fr; margin-top: 20px; }
  .welcome-discovery { padding: 21px 20px 22px; }
  .starter-section-heading { align-items: flex-start; }
  .starter-helper { display: none; }
  .starter-prompts-grid { grid-template-columns: 1fr; }
  .starter-card { min-height: 62px; }
  .chat-input-dock { padding: 12px 10px max(10px, env(safe-area-inset-bottom)); }
  .dock-input-form { padding: 12px 12px 10px; border-radius: 17px; }
  .quick-chips-label { display: none; }
  .dock-quick-suggestions { overflow: hidden; }
  #promptInput { min-height: 44px; max-height: 140px; font-size: 0.9rem; }
  .dock-bottom-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .dock-filters-left { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filter-dropdown-wrap { flex: 0 0 auto; min-height: 32px; }
  .btn-magic-enhance, .btn-recipes-trigger { flex: 0 0 auto; min-height: 32px; }
  .btn-send, [data-theme="dark"] .btn-send { min-height: 38px; padding: 7px 12px; }
  .dock-hint-text { display: none; }
}

@media (max-width: 520px) {
  .plan-credit-text { font-size: 0.65rem; }
  .plan-bolt-icon { display: none; }
  .btn-theme-toggle { display: none; }
  .composer-status { display: none; }
  .starter-category-row { margin-right: -10px; }
  .btn-magic-enhance span,
  .btn-recipes-trigger span { display: none; }
  .btn-magic-enhance,
  .btn-recipes-trigger { width: 32px; padding: 0; justify-content: center; }
  .btn-send span { display: none; }
  .btn-send, [data-theme="dark"] .btn-send { width: 40px; padding: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-card-box::before,
  .w-pulse-dot,
  .composer-status i { box-shadow: none; }
}

/* Asset review workspace --------------------------------------------------- */
#lightboxModal {
  padding: 20px;
  background:
    radial-gradient(circle at 50% 45%, rgba(2, 159, 123, 0.07), transparent 35%),
    rgba(2, 7, 5, 0.88);
  backdrop-filter: blur(22px) saturate(115%);
}

.lightbox-content-box {
  width: min(1280px, 96vw);
  height: min(900px, calc(100vh - 40px));
  max-width: none;
  max-height: none;
  border-color: var(--border-highlight);
  border-radius: 20px;
  background: var(--bg-card);
  box-shadow: 0 48px 120px rgba(0, 0, 0, 0.58), 0 0 0 1px var(--border-light);
}

.lightbox-header-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 68px;
  gap: 20px;
  padding: 11px 18px 11px 20px;
  background: var(--bg-card);
}

.lightbox-title-left { min-width: 0; gap: 11px; }

.lightbox-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lightbox-asset-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.lightbox-asset-heading strong {
  overflow: hidden;
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lightbox-aspect-label { color: var(--text-dim); font-size: 0.65rem; }

.lightbox-position-label {
  align-self: center;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

.lightbox-header-actions { justify-self: end; }

.btn-tool-pill {
  min-height: 36px;
  padding: 6px 11px;
  border-color: var(--border-highlight);
  border-radius: 9px;
  font-size: 0.7rem;
}

.btn-tool-pill:hover {
  border-color: var(--border-accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.btn-tool-pill.active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent-dark);
}

.btn-close-lightbox {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: inherit;
}

.btn-close-lightbox:hover {
  border-color: rgba(239, 68, 68, 0.28);
  color: #f87171;
  background: rgba(239, 68, 68, 0.09);
}

.lightbox-stage {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: #020403;
}

.lightbox-img-wrap {
  flex: 1;
  height: auto;
  min-height: 0;
  max-height: none;
  background:
    linear-gradient(45deg, #050A08 25%, transparent 25%),
    linear-gradient(-45deg, #050A08 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #050A08 75%),
    linear-gradient(-45deg, transparent 75%, #050A08 75%),
    #050706;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.lightbox-img-wrap img { object-fit: contain; }

.lightbox-nav-btn {
  position: absolute;
  z-index: 5;
  top: calc(50% - 22px);
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(1, 7, 5, 0.72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: transform var(--transition), color var(--transition), border-color var(--transition), background var(--transition);
}

.lightbox-nav-btn.previous { left: 18px; }
.lightbox-nav-btn.next { right: 18px; }
.lightbox-nav-btn:hover { border-color: var(--accent); color: #fff; background: rgba(1, 76, 60, 0.86); transform: scale(1.04); }
.lightbox-nav-btn[hidden] { display: none; }

.lightbox-stage-footer {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.42);
  background: #040A07;
  font-size: 0.64rem;
}

.lightbox-shortcut-hint { white-space: nowrap; }
.lightbox-shortcut-hint kbd {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  margin: 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 0.57rem;
}

.lightbox-palette-bar {
  min-height: 76px;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 20px;
  background: var(--bg-card);
}

.palette-bar-heading { display: flex; flex: 0 0 auto; flex-direction: column; gap: 3px; }
.palette-bar-label { color: var(--text-main); font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0; text-transform: none; }
.palette-bar-heading small { color: var(--text-dim); font-size: 0.62rem; }
.palette-swatches-row { justify-content: flex-end; gap: 7px; }

.palette-hex-chip {
  min-height: 34px;
  gap: 7px;
  padding: 5px 8px 5px 5px;
  border-color: var(--border-highlight);
  border-radius: 8px;
  background: var(--bg-elevated);
  font-size: 0.63rem;
}

.palette-color-preview { width: 22px; height: 22px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; }
.palette-hex-chip:hover { border-color: var(--border-accent); background: var(--accent-subtle); transform: translateY(-1px); }

.lightbox-action-bar {
  min-height: 82px;
  justify-content: flex-end;
  gap: 24px;
  padding: 13px 20px;
}

.lightbox-export-group { align-items: flex-start; flex-direction: column; gap: 6px; }
.lightbox-action-label { color: var(--text-dim); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.lightbox-action-buttons,
.lightbox-primary-actions { display: flex; align-items: center; gap: 8px; }

.btn-lightbox-action {
  min-height: 40px;
  padding: 8px 13px;
  border-color: var(--border-highlight);
  border-radius: 10px;
  background: var(--bg-elevated);
  font-size: 0.72rem;
}

.btn-lightbox-action:hover { border-color: var(--border-accent); background: var(--accent-subtle); }
.btn-lightbox-action.primary { min-width: 174px; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 9px 22px rgba(1, 101, 77, 0.2); }
.btn-lightbox-action.primary:hover { background: linear-gradient(135deg, var(--accent-light), var(--accent)); box-shadow: 0 12px 28px rgba(1, 101, 77, 0.29); }

@media (max-width: 900px) {
  #lightboxModal { padding: 10px; }
  .lightbox-content-box { width: calc(100vw - 20px); height: calc(100dvh - 20px); }
  .lightbox-header-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .lightbox-position-label { display: none; }
  .lightbox-title-left { overflow: hidden; }
  .lightbox-stage-footer { padding-inline: 14px; }
  /* The hint was the footer's only other child, so hiding it now empties the
     footer entirely - collapse the strip and its divider rather than leaving
     a blank bordered bar under the image. */
  .lightbox-shortcut-hint { display: none; }
  .lightbox-stage-footer { display: none; }
  .lightbox-palette-bar { align-items: flex-start; flex-direction: column; gap: 9px; }
  .palette-swatches-row { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .palette-hex-chip { flex: 0 0 auto; }
  .lightbox-action-bar { align-items: flex-end; }
}

@media (max-width: 620px) {
  #lightboxModal { padding: 0; }
  .lightbox-content-box { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .lightbox-header-bar { min-height: 58px; padding: 9px 10px 9px 13px; }
  .lightbox-badge { display: none; }
  .lightbox-asset-heading strong { max-width: 42vw; }
  .btn-tool-pill { width: 36px; padding: 0; justify-content: center; }
  .btn-tool-pill span { display: none; }
  .lightbox-nav-btn { top: calc(50% - 19px); width: 38px; height: 38px; border-radius: 10px; }
  .lightbox-nav-btn.previous { left: 9px; }
  .lightbox-nav-btn.next { right: 9px; }
  .lightbox-palette-bar { min-height: 66px; padding: 9px 12px; }
  .palette-bar-heading small { display: none; }
  .palette-hex-chip { min-height: 30px; }
  .palette-color-preview { width: 18px; height: 18px; }
  .lightbox-action-bar { min-height: 112px; align-items: stretch; flex-direction: column; gap: 9px; padding: 10px 12px; }
  .lightbox-action-bar { justify-content: center; }
  .lightbox-primary-actions { width: 100%; }
  .lightbox-primary-actions .btn-lightbox-action { flex: 1; justify-content: center; }
  .btn-lightbox-action.primary { min-width: 0; }
}

/* Stable curated-card interaction surface -------------------------------- */
.candidate-card:hover {
  transform: none;
}

.candidate-media-wrap {
  isolation: isolate;
  outline: none;
}

.candidate-media-wrap:focus-visible {
  box-shadow: inset 0 0 0 3px var(--accent);
}

.candidate-img {
  position: relative;
  z-index: 0;
  pointer-events: none;
}

.card-hover-overlay {
  z-index: 2;
  visibility: hidden;
  pointer-events: none;
}

.card-action-pills-row,
.card-action-pills-row button,
.card-action-pills-row a {
  pointer-events: auto;
}

.candidate-media-wrap:hover .card-hover-overlay,
.candidate-media-wrap:focus-within .card-hover-overlay,
.candidate-card:hover .card-hover-overlay {
  visibility: visible;
  opacity: 1;
}

.candidate-media-wrap:hover .candidate-img,
.candidate-media-wrap:focus-within .candidate-img {
  transform: scale(1.025);
}

@media (hover: none), (pointer: coarse) {
  .card-hover-overlay {
    visibility: visible;
    opacity: 1;
  }
}

/* Mobile generated-image grid -------------------------------------------- */
@media (max-width: 768px) {
  .candidate-grid,
  .skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .candidate-card {
    min-width: 0;
    border-radius: 12px;
  }

  .candidate-media-wrap,
  .skeleton-image-box {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 11px;
  }

  .candidate-img {
    object-fit: cover;
  }

  .card-hover-overlay {
    justify-content: flex-end;
    padding: 7px;
    background: linear-gradient(180deg, transparent 48%, rgba(2, 7, 5, 0.86) 100%);
  }

  .card-action-pills-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
  }

  .btn-card-pill {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 8px;
  }

  .btn-card-pill span {
    display: none;
  }

  .btn-card-pill svg {
    width: 14px;
    height: 14px;
  }

  .ai-feedback-row {
    margin-top: 4px;
  }
}

@media (max-width: 360px) {
  .candidate-grid,
  .skeleton-grid {
    gap: 6px;
  }

  .card-hover-overlay {
    padding: 5px;
  }

  .card-action-pills-row {
    gap: 3px;
  }

  .btn-card-pill {
    min-height: 31px;
    padding: 5px 3px;
  }
}

/* Tablet workspace -------------------------------------------------------- */
@media (max-width: 1100px) {
  .chat-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 150;
    width: min(304px, calc(100vw - 44px));
    margin-left: 0 !important;
    transform: translateX(-100%);
    box-shadow: var(--shadow-popup);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .chat-sidebar.mobile-open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    z-index: 140;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: rgba(2, 7, 5, 0.68);
    backdrop-filter: blur(5px);
    transition: opacity 0.24s ease;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .studio-breadcrumb {
    display: none;
  }

  .chat-main {
    width: 100%;
  }

  .chat-header {
    padding-inline: 16px;
  }

  .active-session-title {
    max-width: min(38vw, 300px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #btnShortcutsHelp,
  #btnClearChat {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .chat-header {
    height: 60px;
  }

  .chat-messages-container {
    padding: 28px 26px 300px;
  }

  .message-row {
    max-width: 960px;
  }

  .candidate-grid,
  .skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .candidate-media-wrap,
  .skeleton-image-box {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .candidate-card {
    min-width: 0;
  }

  .card-hover-overlay {
    padding: 12px;
  }

  .card-action-pills-row {
    gap: 6px;
  }

  .btn-card-pill {
    padding: 7px 10px;
    font-size: 0.69rem;
  }

  .chat-input-dock {
    padding: 20px 24px max(18px, env(safe-area-inset-bottom));
  }

  .dock-container {
    max-width: 960px;
  }

  .dock-input-form {
    padding: 14px 15px 11px;
  }

  .dock-filters-left {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filter-dropdown-wrap,
  .btn-magic-enhance,
  .btn-recipes-trigger {
    flex: 0 0 auto;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .user-header-name {
    display: none;
  }

  .plan-upgrade-tag {
    display: none;
  }

  .welcome-card-box {
    grid-template-columns: 1fr;
  }
}

.owner-only-nav[hidden] {
  display: none !important;
}

/* Responsive empty-state workspace --------------------------------------- */
@media (min-width: 769px) and (max-width: 1100px) {
  .chat-messages-container {
    align-content: start;
    padding-top: 22px;
  }

  .welcome-hero-container {
    margin: 0 auto;
    padding-top: 0;
  }

  .welcome-card-box { min-height: 0; }
  .welcome-copy { padding: 27px 28px 23px; }
  .welcome-badge-tag { margin-bottom: 15px; }
  .welcome-title { font-size: clamp(2rem, 4.2vw, 2.55rem); }
  .welcome-desc { margin-top: 13px; line-height: 1.55; }
  .welcome-capabilities { margin-top: 17px; }
  .welcome-discovery { padding: 21px 24px 23px; }
  .starter-section-heading { margin-bottom: 13px; }
  .starter-category-row { margin-bottom: 12px; }
  .starter-card { min-height: 60px; }

  .chat-input-dock {
    padding-top: 14px;
  }
}

@media (max-width: 768px) {
  .chat-header-left { min-width: 0; }
  .sidebar-toggle-btn,
  .user-avatar-circle,
  .btn-header-signout { min-width: 38px; min-height: 38px; }
  .active-session-title {
    max-width: min(46vw, 260px);
    font-size: 0.92rem;
  }

  .chat-messages-container {
    align-content: start;
    padding: 12px 10px 232px;
  }

  .welcome-hero-container { margin: 0 auto; }
  .welcome-card-box { border-radius: 16px; }
  .welcome-copy { padding: 20px 16px 17px; }
  .welcome-badge-tag { margin-bottom: 13px; }
  .welcome-title {
    font-size: clamp(1.75rem, 7.5vw, 2.1rem);
    line-height: 1.08;
  }
  .welcome-desc {
    margin-top: 11px;
    font-size: 0.79rem;
    line-height: 1.5;
  }
  .welcome-capabilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 15px;
  }
  .welcome-capabilities span {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    font-size: 0.59rem;
    line-height: 1.35;
  }
  .welcome-capabilities i { width: 24px; height: 20px; }

  .welcome-discovery { padding: 16px; }
  .starter-section-heading { margin-bottom: 11px; }
  .starter-section-heading strong { font-size: 0.94rem; }
  .starter-category-row {
    margin: 0 -2px 11px;
    padding-right: 28px;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .category-pill-btn {
    min-height: 34px;
    scroll-snap-align: start;
  }
  .starter-prompts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .starter-card {
    min-width: 0;
    min-height: 70px;
    gap: 8px;
    padding: 9px;
  }
  .st-icon-box {
    width: 31px;
    height: 31px;
    border-radius: 8px;
    font-size: 0.82rem;
  }
  .st-body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .st-body p,
  .starter-card-arrow { display: none; }

  .chat-input-dock { padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .dock-input-form {
    gap: 8px;
    padding: 10px 10px 9px;
    border-radius: 15px;
  }
  .dock-quick-suggestions { min-width: 0; }
  .quick-chips-scroll {
    padding-right: 24px;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .quick-chip {
    min-height: 30px;
    scroll-snap-align: start;
  }
  #promptInput {
    min-height: 40px;
    padding-block: 4px 6px;
    font-size: 0.85rem;
  }
  .dock-bottom-toolbar { padding-top: 7px; }
  .filter-dropdown-wrap,
  .btn-magic-enhance,
  .btn-recipes-trigger { min-height: 36px; }
  .btn-send,
  [data-theme="dark"] .btn-send { min-height: 42px; }
}

@media (max-width: 520px) {
  .chat-header { padding-inline: 9px; }
  .chat-header-left { flex: 1 1 auto; gap: 8px; }
  .active-session-title { max-width: 150px; }
  .plan-credit-pill {
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    justify-content: center;
    padding: 0;
  }
  .plan-credit-text { display: none; }
  .plan-bolt-icon { display: inline; }

  .welcome-badge-tag { display: none; }
  .welcome-copy { padding: 16px 16px 14px; }
  .welcome-desc { margin-top: 9px; line-height: 1.45; }
  .welcome-capabilities { display: none; }
  .welcome-discovery { padding: 13px 14px 14px; }
  .starter-kicker { display: none; }
  .starter-section-heading { margin-bottom: 8px; }
  .starter-category-row { margin-bottom: 8px; }
  .category-pill-btn { min-height: 32px; }
  .starter-card { min-height: 60px; padding: 8px; }

  .composer-topline { display: none; }
}

/* ==============================================================
   MOBILE COMPOSER & EMPTY-STATE REFINEMENTS
   Measured at 440x956 (iPhone 16 Pro Max). Each rule below fixes
   something that was verified in a browser, not assumed.
   ============================================================== */

/* On wide screens the emphasis takes its own line, which is what the removed
   <br> used to do - but as a layout choice rather than markup. */
.welcome-title em { display: block; }

/* --- Horizontal scrollers -------------------------------------------------
   .starter-category-row hid ~100px and .quick-chips-scroll ~115px at 440px,
   with no indication anything was there. The fade is applied only on the side
   that actually has more content, so it never implies content that is not
   there. data-overflow is written by updateScrollAffordance() in chat.js. */
.starter-category-row,
.quick-chips-scroll {
  scrollbar-width: none;            /* the fade is the affordance */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch; /* momentum on iOS */
  scroll-snap-type: x proximity;
}

.starter-category-row::-webkit-scrollbar,
.quick-chips-scroll::-webkit-scrollbar { display: none; }

/* Snap to whole pills so a row never rests mid-word. */
.category-pill-btn,
.quick-chip { scroll-snap-align: start; }

.starter-category-row[data-overflow="end"],
.dock-filters-left[data-overflow="end"],
.quick-chips-scroll[data-overflow="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
}

.starter-category-row[data-overflow="start"],
.dock-filters-left[data-overflow="start"],
.quick-chips-scroll[data-overflow="start"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px);
  mask-image: linear-gradient(to right, transparent 0, #000 30px);
}

.starter-category-row[data-overflow="both"],
.dock-filters-left[data-overflow="both"],
.quick-chips-scroll[data-overflow="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}

@media (max-width: 900px) {
  /* --- Empty state ------------------------------------------------------
     The hero sat at the top with 339px of dead space between it and the
     dock. Centring it in the space that exists reads as composition rather
     than as a gap, and still scrolls normally once it cannot fit. */
  .welcome-hero-container { margin-block: auto; }

  /* --- Prompt input ----------------------------------------------------
     The box was 40px tall while its own placeholder needed 52px, so the
     second line of the only instruction on screen was sliced in half. */
  #promptInput {
    min-height: 56px;
    line-height: 1.45;
  }

  /* --- Touch targets ---------------------------------------------------
     Platform guidance is 44px. These were measured at 440px: the selects
     were the worst at 16px tall, with the visible pill around them not
     being part of the tap target at all. */
  /* 8px rather than 10px: at 440px the three pills plus their gaps have to
     live inside a 350px grid cell, and 10px pushed the last one out from
     under its own column and on top of the send button. */
  .filter-dropdown-wrap {
    min-height: 44px;
    padding: 0 8px;
    flex: 0 0 auto;
  }

  /* Safety net for the cases padding alone cannot cover - a longer locale, a
     larger system font, a narrower phone. The row scrolls instead of
     overlapping, with the same fade hint as the other strips. */
  .dock-filters-left {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .dock-filters-left::-webkit-scrollbar { display: none; }

  /* Now holds Enhance, Art direction and Send. */
  .dock-actions-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  .filter-select {
    min-height: 42px;      /* fills the pill, so the whole pill responds */
    padding-block: 0;
  }

  /* Matches the specificity of the [data-theme="dark"] .btn-send rule that
     sets 38px, rather than overriding it with !important. */
  .btn-send,
  [data-theme="dark"] .btn-send {
    min-width: 46px;
    min-height: 46px;      /* primary action, so the largest of the row */
  }

  .btn-magic-enhance,
  .btn-recipes-trigger {
    min-width: 44px;
    min-height: 44px;
  }

  /* Chips stay a little under 44px on purpose: six of them in a scrolling
     strip at full height would dominate the dock, and they clear the 24px
     WCAG 2.5.8 minimum comfortably with spacing between them. */
  .quick-chip { min-height: 36px; }
  .category-pill-btn { min-height: 38px; }

  /* Header controls sat at 38px. */
  .sidebar-toggle-btn,
  .btn-header-signout,
  .plan-credit-pill { min-width: 44px; min-height: 44px; }
}

/* -------------------------------------------------------------
   SOCIAL-READY LAYOUT BUILDER
   Every channel format cropped, measured and composed from one
   master. The stage stays dark in both themes, matching the plain
   image viewport it replaces; the rail follows the theme tokens.
   ------------------------------------------------------------- */

/* Layout mode needs the width and the vertical room. The palette bar and the
   shortcut strip are folded away because the verdict panel states the same
   contrast guidance in words. */
.lightbox-content-box.layout-mode { width: 1180px; }
.lightbox-content-box.layout-mode .lightbox-img-wrap,
.lightbox-content-box.layout-mode .lightbox-nav-btn,
.lightbox-content-box.layout-mode .lightbox-palette-bar,
.lightbox-content-box.layout-mode .lightbox-stage-footer { display: none; }

.layout-studio {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  background: var(--bg-card);
}

.layout-studio[hidden] { display: none; }

.ls-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
}

.ls-topbar-left { display: flex; min-width: 0; align-items: center; gap: 9px; }

.ls-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--border-accent);
  border-radius: 4px;
  color: var(--accent);
  background: var(--accent-subtle);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 700;
}

.ls-source-note {
  overflow: hidden;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-exit {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-muted);
  background: transparent;
  font-family: var(--font-main);
  font-size: 0.69rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.ls-exit:hover { border-color: var(--border-accent); color: var(--text-main); }

.ls-topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }

.ls-icon-btn {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: var(--transition);
}

.ls-icon-btn:hover:not(:disabled) { border-color: var(--border-accent); color: var(--text-main); background: var(--accent-subtle); }
.ls-icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Format strip. Each tab renders the live composition for its own crop, so
   the strip itself is the every-format-at-once answer. */
.ls-formats {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
  scrollbar-width: thin;
}

.ls-format-btn {
  display: flex;
  width: 92px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 7px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: var(--transition);
}

.ls-format-btn:hover { border-color: var(--border-accent); color: var(--text-main); }
.ls-format-btn.active { border-color: var(--accent); color: var(--text-main); background: var(--accent-subtle); }
.ls-format-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ls-thumb {
  display: grid;
  width: 78px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.42);
}

.ls-thumb canvas { display: block; border-radius: 3px; }

.ls-format-meta { display: flex; flex-direction: column; align-items: center; gap: 1px; }

.ls-format-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 650;
}

.ls-format-ratio {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.57rem;
}

.ls-verdict-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-dim);
}

.ls-verdict-dot[data-verdict="strong"] { background: #34D399; }
.ls-verdict-dot[data-verdict="usable"] { background: #FBBF24; }
.ls-verdict-dot[data-verdict="busy"] { background: #F87171; }

.ls-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 286px;
}

.ls-stage {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 12px;
  background:
    linear-gradient(45deg, #050A08 25%, transparent 25%),
    linear-gradient(-45deg, #050A08 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #050A08 75%),
    linear-gradient(-45deg, transparent 75%, #050A08 75%),
    #050706;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.ls-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
}

.ls-stage.loading canvas { opacity: 0.2; }

/* touch-action is what stops a touch pan from scrolling the stage instead
   of moving the crop. */
.ls-canvas.pannable { cursor: grab; touch-action: none; }
.ls-canvas.pannable.panning { cursor: grabbing; }
.ls-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ls-drag-hint {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  padding: 3px 9px;
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(3, 8, 6, 0.72);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

.ls-drag-hint[hidden] { display: none; }

.ls-stage-note {
  position: absolute;
  z-index: 4;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(3, 8, 6, 0.86);
  font-size: 0.71rem;
  backdrop-filter: blur(10px);
}

.ls-stage-note[hidden] { display: none; }

/* touch-action is required here, or a touch drag scrolls the stage instead
   of moving the block. */
.ls-handle {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  background: rgba(2, 159, 123, 0.05);
  cursor: move;
  touch-action: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ls-handle[hidden] { display: none; }
.ls-handle:hover, .ls-handle.dragging { border-color: var(--accent); background: rgba(2, 159, 123, 0.15); }
.ls-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ls-handle-tag {
  position: absolute;
  top: -9px;
  left: -1px;
  padding: 1px 5px;
  border-radius: 4px;
  color: #000804;
  background: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ls-handle:hover .ls-handle-tag,
.ls-handle:focus-visible .ls-handle-tag,
.ls-handle.dragging .ls-handle-tag { opacity: 1; }

.ls-rail {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 11px;
  padding: 13px;
  border-left: 1px solid var(--border-light);
  overflow-y: auto;
  background: var(--bg-card);
}

.ls-verdict {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}

.ls-verdict-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.ls-verdict-pill {
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.63rem;
  font-weight: 700;
}

.ls-verdict-pill[data-verdict="strong"] { color: #34D399; border-color: rgba(16, 185, 129, 0.34); background: rgba(16, 185, 129, 0.13); }
.ls-verdict-pill[data-verdict="usable"] { color: #D97706; border-color: rgba(251, 191, 36, 0.34); background: rgba(251, 191, 36, 0.13); }
.ls-verdict-pill[data-verdict="busy"] { color: #EF4444; border-color: rgba(248, 113, 113, 0.34); background: rgba(248, 113, 113, 0.13); }

.ls-verdict-score { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.64rem; }
.ls-verdict-body { color: var(--text-muted); font-size: 0.7rem; line-height: 1.5; }
.ls-verdict-body strong { color: var(--text-main); font-weight: 650; }
.ls-verdict-warn { color: #D97706; font-size: 0.66rem; line-height: 1.45; }
.ls-verdict-note { color: var(--text-dim); font-size: 0.66rem; line-height: 1.45; }

.ls-field { display: flex; min-width: 0; flex-direction: column; gap: 4px; }

/* The live figure beside a slider's label. Right-aligned into the gap the
   label leaves, so the two read as one line rather than two. */
.ls-field-value {
  float: right;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
}

/* Photo controls, folded away. The rail is already long and most layouts
   never need to regrade the photograph, so opening this is a choice. */
.ls-group {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-elevated);
}

/* Collapsed, the box is just its summary, so the padding below it is dead
   space that makes the group look broken. */
.ls-group:not([open]) { gap: 0; padding: 9px 11px; }

.ls-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.ls-group > summary::-webkit-details-marker { display: none; }

/* A chevron drawn from a border, rotated in place when the group opens. */
.ls-group > summary::after {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  margin-right: 2px;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
  content: "";
}

.ls-group[open] > summary::after { transform: rotate(-135deg); }
.ls-group > summary:hover { color: var(--text-main); }
.ls-group > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ls-adjust { display: flex; flex-direction: column; gap: 9px; }
.ls-adjust[hidden] { display: none; }

/* Flip is a toggle, so it has to look held down while it is on. */
.ls-btn.active { border-color: var(--border-accent); color: var(--accent); background: var(--accent-subtle); }

.ls-field > label {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ls-field textarea,
.ls-field input[type="text"],
.ls-field select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-main);
  background: var(--bg-input);
  font-family: var(--font-main);
  font-size: 0.74rem;
}

.ls-field textarea { min-height: 46px; line-height: 1.35; resize: vertical; }

.ls-field textarea:focus,
.ls-field input[type="text"]:focus,
.ls-field select:focus { outline: none; border-color: var(--accent); }

.ls-field input[type="range"] { width: 100%; accent-color: var(--accent); }
.ls-field input[type="range"]:disabled { opacity: 0.4; }

.ls-field-row { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.ls-inline-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.ls-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.7rem;
  cursor: pointer;
}

.ls-check input { accent-color: var(--accent); }

.ls-inline-row input[type="color"] {
  width: 34px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.ls-inline-row input[type="color"][hidden] { display: none; }

.ls-logo-row { display: flex; gap: 6px; }
.ls-logo-row .ls-btn { flex: 1; }
.ls-field[hidden] { display: none; }
.ls-rail-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }

/* Three across does not fit the rail without every label wrapping, so a
   third button spans the row below its two siblings instead. */
.ls-rail-actions > .ls-btn:nth-child(3):last-child { grid-column: 1 / -1; }

/* A hidden half would otherwise leave the visible half at half width. */
.ls-field-row:has(> .ls-field[hidden]),
.ls-rail-actions:has(> .ls-btn[hidden]) { grid-template-columns: 1fr; }

/* The colour swatch is the only control in its field, so it fills it. */
.ls-field input[type="color"] {
  width: 100%;
  height: 30px;
  padding: 1px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  cursor: pointer;
}

.ls-btn {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-main);
  background: var(--bg-elevated);
  font-family: var(--font-main);
  font-size: 0.71rem;
  font-weight: 650;
  cursor: pointer;
  transition: var(--transition);
}

.ls-btn:hover:not(:disabled) { border-color: var(--border-accent); background: var(--accent-subtle); }
.ls-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ls-btn[hidden] { display: none; }
.ls-btn.subtle { color: var(--text-muted); background: transparent; }

.ls-btn.primary {
  min-height: 38px;
  margin-top: 2px;
  border-color: transparent;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  font-weight: 700;
  box-shadow: 0 9px 22px rgba(1, 101, 77, 0.2);
}

.ls-btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-light), var(--accent)); }

@media (max-width: 1000px) {
  .lightbox-content-box.layout-mode { width: calc(100vw - 20px); }

  /* The rail used to claim 46vh of a fixed-height modal, which left the
     stage on its 150px floor — a 9:16 crop came out a sliver barely 120px
     tall. Nothing in the builder survives that: you cannot judge a
     composition, place a headline or pan a crop you cannot see. So the
     stage gets a real floor and takes the slack, and the rail scrolls
     inside a smaller share. */
  /* Shares are fractions of the body, not of the viewport. A vh cap on the
     rail overflowed this fixed-height modal by ~70px, and the two rows then
     fought over space that was not there. */
  .ls-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ls-rail { max-height: none; overflow-y: auto; border-top: 1px solid var(--border-light); border-left: 0; }
}

@media (max-width: 620px) {
  .lightbox-content-box.layout-mode { width: 100vw; }
  .ls-format-btn { width: 84px; }
  .ls-field-row, .ls-rail-actions { grid-template-columns: 1fr; }
  /* Touch targets follow the same floor as the rest of the dock. */
  .ls-btn { min-height: 40px; }
  .ls-exit { min-height: 34px; }
  .ls-icon-btn { width: 32px; height: 32px; }
  /* Portrait phones are width-bound, so the stage gives a little back to
     the controls rather than holding height it cannot use. */
  .ls-body { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .ls-stage { padding: 10px; }
}

/* Shown when the server refuses a self-serve plan change, because checkout is
   not connected yet and the pricing modal would otherwise look broken. */
.pricing-unavailable-note {
  margin: 14px 20px 0;
  padding: 11px 13px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 10px;
  color: #D97706;
  background: rgba(251, 191, 36, 0.1);
  font-size: 0.78rem;
  line-height: 1.55;
}