/* ══════════════════════════════════════════════
   THEME TOKENS — light (default) + dark (Nexa)
   ══════════════════════════════════════════════ */
:root {
  --bg-app:         #f2f2f7;
  --bg-header:      #ffffff;
  --bg-sidebar:     #f5f5f7;
  --bg-card:        #ffffff;
  --bg-input:       #f9f9fb;
  --bg-tab-bar:     #f2f2f7;
  --bg-tab-inner:   #e3e3e8;
  --bg-tab-active:  #ffffff;
  --bg-chip-bar:    #e3e3e8;
  --bg-chip-active: #ffffff;

  --border:         rgba(0,0,0,0.08);
  --border-strong:  rgba(0,0,0,0.15);
  --border-input:   #e5e5ea;

  --text-primary:   #1d1d1f;
  --text-secondary: #636366;
  --text-tertiary:  #8e8e93;

  /* Mono + gold: light accent = ink (không xanh iOS); dark accent = gold (#FFD100) */
  --accent:         #131316;
  --accent-bg:      #f0f0f2;
  --accent-border:  #131316;

  --btn-ghost-bg:    #ffffff;
  --btn-ghost-color: #1d1d1f;
  --btn-ghost-hover: #f5f5f7;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.10);
  --scrollbar-thumb: #d1d1d6;
}

[data-theme="dark"] {
  /* Nexa black × gold: gold CHỈ ở accent/CTA; nền-viền-chữ đều trung tính.
     Nền xám đậm (không đen thuần), elevation = bề mặt sáng dần,
     viền trắng-alpha thay viền nhuộm vàng (gây cảm giác ố cũ). */
  --bg-app:         #121214;
  --bg-header:      #17171a;
  --bg-sidebar:     #17171a;
  --bg-card:        #1b1b1e;
  --bg-input:       #202024;
  --bg-tab-bar:     #17171a;
  --bg-tab-inner:   #1b1b1e;
  --bg-tab-active:  #28282d;
  --bg-chip-bar:    #1b1b1e;
  --bg-chip-active: #28282d;

  --border:         rgba(255,255,255,0.09);
  --border-strong:  rgba(255,255,255,0.18);
  --border-input:   rgba(255,255,255,0.10);

  --text-primary:   #ededee;
  --text-secondary: #a0a0a8;
  --text-tertiary:  #82828b; /* nâng từ #6e6e76 — bớt chìm trên nền tối (contrast ~4.9) */

  --accent:         #FFD100;
  --accent-bg:      rgba(255,209,0,0.10);
  --accent-border:  rgba(255,209,0,0.50);

  --btn-ghost-bg:    #1b1b1e;
  --btn-ghost-color: #ededee;
  --btn-ghost-hover: #26262b;

  --shadow-sm: 0 1px 6px rgba(0,0,0,0.55);
  --shadow-md: 0 4px 32px rgba(0,0,0,0.65);
  --scrollbar-thumb: rgba(255,255,255,0.18);
}

/* ── Theme switch: 1s transition on all color props ── */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition:
    background-color 1s cubic-bezier(0.4, 0, 0.2, 1),
    background     1s cubic-bezier(0.4, 0, 0.2, 1),
    border-color   1s cubic-bezier(0.4, 0, 0.2, 1),
    color          1s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow     1s cubic-bezier(0.4, 0, 0.2, 1),
    text-shadow    1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-outfit), 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

button {
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

button:focus-visible {
  outline: 2px solid #0f0f0f;
  outline-offset: 2px;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dvh = viewport thực tế trên mobile (trừ thanh địa chỉ động).
                     100vh trên mobile là "large viewport" → đẩy toolbar (bottom:0)
                     xuống dưới nếp gấp khi thanh URL hiện. Trình duyệt cũ bỏ qua dvh → về 100vh. */
}

/* Trang chính (tab editor) cuộn được để lộ "Sản phẩm thật" ở đáy. */
.app--home { overflow-y: auto; overflow-x: hidden; }
.app__viewport {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* Khung màn hình đầu tiên bám đúng viewport thực → toolbar (bottom:0)
                     luôn nằm trong tầm nhìn, không bị thanh địa chỉ mobile che. */
  position: relative;
  flex: 0 0 auto;
}
/* Toolbar bám đáy khung công cụ (cuộn xuống thì trôi theo, không đè lên section).
   CHỈ desktop: mobile phải giữ `position: fixed` (Toolbar.css @media) để bám đáy
   VÙNG-NHÌN động — nếu để absolute, trên máy thật toolbar bám mốc 100dvh (thanh URL
   ẩn) nên "lơ lửng giữa" khi thanh URL hiện + lệch với sheetbar (vốn fixed). */
@media (min-width: 769px) {
  .app--home .toolbar { position: absolute; }
}

/* Dải "Sản phẩm đã thực hiện" — FULL-WIDTH ở ranh giới khung công cụ ↔ gallery.
   Full-width nên KHÔNG bao giờ đè toolbar (căn giữa) ở bất kỳ cỡ màn nào — thay
   cho pill nổi cũ (.scroll-cue) vốn va toolbar ở dải 769–1268px và bị chip bar
   che trên mobile. Desktop: rút .app__viewport ngắn 48px (.app--has-strip) để
   dải lộ ngay đáy fold. Mobile: dải là header của gallery, cuộn tới tự nhiên. */
.gallery-strip {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  border: none; border-top: 1px solid var(--border);
  background: var(--bg-sidebar); color: var(--text-secondary);
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.gallery-strip:hover { background: var(--bg-tab-active); color: var(--text-primary); }
.gallery-strip__chev { width: 15px; height: 15px; color: var(--accent); animation: scroll-cue-bob 1.6s ease-in-out infinite; }
@keyframes scroll-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Rút khung đầu tiên đúng chiều cao dải → dải lộ ở đáy fold (desktop). */
.app--has-strip .app__viewport { height: calc(100dvh - 48px); }
/* Mobile: giữ full 100dvh — dải là header gallery, cuộn tới (đáy đã chật: sheetbar + toolbar). */
@media (max-width: 768px) { .app--has-strip .app__viewport { height: 100dvh; } }

/* Nút "Về công cụ" — nổi khi đã cuộn xuống gallery, đưa khách về khung thiết kế. */
.back-to-top {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px;
  z-index: 200;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-input); background: var(--bg-card); color: var(--text-primary);
  font-family: inherit; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-md); cursor: pointer;
  animation: btt-in .2s ease;
}
.back-to-top:hover { border-color: var(--accent); }
.back-to-top svg { width: 15px; height: 15px; color: var(--accent); }
@keyframes btt-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@media (max-width: 768px) { .back-to-top { bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .gallery-strip__chev { animation: none; } }

.app__workspace {
  display: flex;
  flex: 1 1;
  overflow: hidden;
  min-height: 0;
}

.app__main {
  flex: 1 1;
  display: flex;
  overflow: hidden;
  position: relative; /* containing block cho overlay empty-state (Phase 3) */
}

/* ── Mobile ── */
@media (max-width: 768px) {
  /* Chiều cao 2 thanh đáy của editor — KHOÁ bằng biến để mọi nơi (toolbar, sheetbar,
     nút Nexa, padding canvas) tính vị trí khớp nhau. Trước đây các con số 56/46 rải rác
     nhiều file và lệch nhau (sheetbar thực tế cao 71px do nhãn xuống 2 dòng) khiến nút
     Nexa bị sheetbar (z:150) che mất đáy. Gom về đây + ép thanh gọn lại cho đỡ chiếm chỗ. */
  .app {
    --startee-toolbar-h: 50px;   /* thanh View/Front/Back + Thêm giỏ (đáy cùng) */
    --startee-sheetbar-h: 48px;  /* thanh chip Sản phẩm/Màu/Vị trí in/Thiết kế (trên toolbar) */
  }

  .app__workspace {
    flex-direction: column;
    overflow: hidden;
    padding-bottom: var(--startee-toolbar-h); /* chỗ cho toolbar fixed */
    min-height: 0;
  }

  .app__main {
    flex: 1 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* bắt buộc — flex item co lại được để scroll hoạt động */
  }
}

.processing-overlay {
  position: fixed;
  inset: 0;

  background: rgba(0,0,0,.55);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 99999;

  -webkit-backdrop-filter: blur(4px);

          backdrop-filter: blur(4px);
}

.processing-modal {
  background: white;

  padding: 32px;

  border-radius: 16px;

  min-width: 320px;

  text-align: center;

  box-shadow:
    0 20px 60px rgba(0,0,0,.25);
}

.processing-modal h3 {
  margin: 16px 0 8px;
}

.processing-modal p {
  margin: 0;
}

.processing-spinner {
  width: 50px;
  height: 50px;
  margin: 10px auto 20px;
  border: 3px solid rgba(0, 122, 255, 0.1);
  border-top-color: var(--accent, #131316);
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

.processing-modal-desc {
  margin: 10px 0 0;
  font-size: 13px;
  color: #8e8e93;
  line-height: 1.5;
}

.processing-logo--success {
  color: #34c759; /* Apple Green */
  animation: bounceSuccess 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes bounceSuccess {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.processing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  animation: fadeInActions 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.processing-modal {
  width: 420px;
  max-width: calc(100vw - 32px);

  background: #fff;

  border-radius: 20px;

  padding: 30px;

  text-align: center;

  box-shadow:
    0 25px 60px rgba(0,0,0,.2);
}

.processing-logo {
  font-size: 48px;
  margin-bottom: 12px;

  animation: pulse 1.5s infinite;
}

.processing-steps {
  margin-top: 20px;

  text-align: left;

  display: flex;
  flex-direction: column;

  gap: 10px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

/* ── Mobile: drop the heavy blur on full-screen scrims ──
   `backdrop-filter: blur()` forces the GPU to recompose the whole page every
   frame — brutal on phones, and while a synchronous task (AI remove-bg / effect)
   blocks the main thread it "freezes" mid-blur, so the sidebar underneath looks
   smeared. A plain dark scrim reads the same but costs almost nothing. */
@media (max-width: 768px) {
  .processing-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.62);
  }
}

/* ── Main Area and FAB Transitions ── */
.app__main {
  animation: mainFadeScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sidebar-fab {
  animation: fabBounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes mainFadeScale {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fabBounce {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}


/* ══════════════════════════════════════════════════════════════════════════
   RAIL công cụ (Workspace 2.0) — thay thanh tab ngang .app__tabs (đã bỏ khỏi JSX).
   Desktop: cột dọc 68px bên trái workspace, mở rộng vô hạn bằng cách thêm icon.
   Mobile: workspace là column nên rail tự thành thanh NGANG ở đỉnh.
   ══════════════════════════════════════════════════════════════════════════ */
.app__rail {
  flex: 0 0 auto;
  display: flex;
  background: var(--bg-tab-bar);
  border-right: 1px solid var(--border);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.app__rail-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  width: 68px;
}
.rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.rail-btn:hover { color: var(--text-primary); background: var(--btn-ghost-hover, rgba(0, 0, 0, 0.04)); }
.rail-btn--active { background: var(--bg-tab-active); color: var(--text-primary); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .rail-btn--active { color: #FFD100; background: #2a2a30; box-shadow: 0 0 0 1px rgba(255,209,0,0.15), 0 2px 8px rgba(0,0,0,0.4); }
.rail-btn__icon {
  width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.rail-btn__ai-ico { width: 20px; height: 20px; display: block; }
[data-theme="dark"] .rail-btn--ai.rail-btn--active .rail-btn__ai-ico { color: #FFD100; }
.rail-btn__label { font-size: 10px; line-height: 1; letter-spacing: 0.02em; }
.app__rail-sep { height: 1px; margin: 4px 6px; background: var(--border-strong, rgba(0, 0, 0, 0.1)); }

@media (max-width: 768px) {
  /* Rail → thanh ngang ở đỉnh (workspace là column trên mobile) */
  .app__rail { border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
  .app__rail::-webkit-scrollbar { display: none; }
  .app__rail-inner { flex-direction: row; width: 100%; padding: 8px 10px; gap: 6px; }
  .rail-btn { flex: 1 1; flex-direction: row; gap: 6px; padding: 8px 6px; font-size: 12px; border-radius: 10px; }
  .rail-btn__icon, .rail-btn__ai-ico { width: 17px; height: 17px; }
  .app__rail-sep { display: none; }
}

/* ── Mockup Disclaimer Banner ── */
.mockup-disclaimer {
  padding: 8px 16px;
  background: transparent;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  margin-top: 4px;
}

.disclaimer-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary); /* fine-print trung tính — bỏ đỏ (đỏ chỉ dành cho badge giỏ) */
  margin: 0;
  letter-spacing: 0.2px;
  text-align: center;
}

.disclaimer-ico {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .app__workspace--full {
    padding-bottom: 0 !important;
  }

  .contact-fab__btn {
    width: 44px;
    height: 44px;
  }

  .contact-fab__assistant {
    width: 44px;
    height: 44px;
  }

  .sidebar-fab {
    bottom: 72px;
    width: 44px;
    height: 44px;
  }
}

/* ── Safe area insets (iPhone notch / home bar) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .app__workspace {
      padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   Công cụ AI — nút gộp trên thanh tab + drawer chứa Tách nền / Vector / Effect
   ══════════════════════════════════════════════════════════════════════════ */

.aitools {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.32s;
}
.aitools--open { transform: translateY(0); visibility: visible; pointer-events: auto; transition-delay: 0s; }

.aitools__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.aitools__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  flex-shrink: 0;
}
.aitools__title svg { width: 19px; height: 19px; }
[data-theme="dark"] .aitools__title svg { color: #FFD100; }

.aitools__subtabs {
  display: flex;
  gap: 3px;
  background: var(--bg-tab-inner);
  border-radius: 11px;
  padding: 3px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.aitools__subtabs::-webkit-scrollbar { display: none; }
.aitools__subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.aitools__subtab:hover { color: var(--text-primary); }
.aitools__subtab.is-active { background: var(--bg-tab-active); color: var(--text-primary); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .aitools__subtab.is-active { color: #FFD100; background: #2a2a30; }
.aitools__subicon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.aitools__label-short { display: none; }
.aitools__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.aitools__close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.aitools__close svg { width: 20px; height: 20px; }

.aitools__body {
  flex: 1 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 768px) {
  .aitools__head { gap: 8px; padding: 8px 10px; }
  .aitools__title { font-size: 0; gap: 0; } /* ẩn chữ, giữ icon ✨ */
  .aitools__title svg { width: 22px; height: 22px; }
  .aitools__subtabs { margin: 0; flex: 1 1; min-width: 0; overflow: hidden; }
  .aitools__subtab { flex: 1 1; min-width: 0; justify-content: center; padding: 7px 5px; font-size: 11.5px; }
  .aitools__subicon { display: none; }
  .aitools__label-full { display: none; }
  .aitools__label-short { display: inline; }
}

/* Bottom sheet mobile (P1.1): editor chừa chỗ cho chip bar + scrim nhạt */
@media (max-width: 768px) {
  .app__workspace:not(.app__workspace--full) {
    padding-bottom: calc(56px + 46px + env(safe-area-inset-bottom, 0));
  }
  .sidebar-overlay--sheet { background: rgba(0, 0, 0, 0.16); }
}

/* Banner "Sửa thiết kế từ giỏ" (P2.1) */
.edit-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px;
  background: #fbf3d8; border-bottom: 1px solid #ecd79a;
  color: #6b5200; font-size: 13px; font-weight: 600;
}
.edit-banner__text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.edit-banner__text svg { width: 15px; height: 15px; flex-shrink: 0; }
.edit-banner__cancel {
  border: 1px solid #ecd79a; background: #fff; color: #6b5200;
  border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.edit-banner__cancel:hover { background: #fbf3d8; }
[data-theme="dark"] .edit-banner { background: #2a2312; border-color: #5a4a1e; color: #e6c24d; }
[data-theme="dark"] .edit-banner__cancel { background: #1a1a1a; border-color: #5a4a1e; color: #e6c24d; }
@media (max-width: 768px) { .edit-banner { font-size: 12px; padding: 7px 12px; } .edit-banner__text span { display: inline; } }