/*
 * tri-web-surface.css — shared UI foundation for ai.xxcvd.com standalone
 * pages (welcome-home, copywriting, douyin-dashboard, douyin-transcribe,
 * newbie-guide, user-admin) and the index shell.
 *
 * v1 (2026-05-08, p1 UI stabilization wave):
 *   - Page chrome: .jyb-page, .jyb-page__head, .jyb-page__body
 *   - Surface card: .jyb-surface-card
 *   - Buttons:      .jyb-btn (.is-primary | .is-secondary | .is-ghost)
 *   - Alerts:       .jyb-alert (.is-warning | .is-info | .is-danger | .is-success)
 *   - Empty states: .jyb-empty (.is-unauth | .is-loading | .is-disabled | .is-error)
 *   - Skeleton:     .jyb-skel
 *
 * Loaded AFTER tokens.css / components.css / desktop-operational-polish /
 * mobile-operational-polish / tri-web-layout, so token references resolve.
 * Class names are namespaced .jyb-surface-* / .jyb-* and don't collide with
 * existing per-page styles.
 *
 * Tokens consumed:
 *   --jyb-gold, --jyb-gold-soft, --jyb-gold-strong, --jyb-gold-ink
 *   --jyb-bg, --jyb-bg-muted, --jyb-bg-subtle
 *   --jyb-text, --jyb-text-muted, --jyb-text-subtle
 *   --jyb-border, --jyb-border-strong
 *   --jyb-warning, --jyb-warning-bg, --jyb-danger, --jyb-danger-bg
 *   --jyb-info, --jyb-info-bg, --jyb-success, --jyb-success-bg
 *   --jyb-radius-sm/md/lg, --jyb-shadow-sm/md
 *   --jyb-touch-target-min (44px)
 *   --jyb-bp-tablet-min/max
 */

/* ── Page chrome ─────────────────────────────────────────────────────── */

.jyb-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #fafbff 0%, #f6f7fb 100%);
  color: var(--jyb-text, #1e293b);
  font-family: var(--jyb-font-sans, "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  padding: 24px clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.jyb-page__body {
  max-width: 1240px;
  margin: 0 auto;
}

.jyb-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--jyb-border, #e5e7eb);
}

.jyb-page__head__lead { min-width: 0; }

.jyb-page__head__title {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  font-weight: 700;
  color: var(--jyb-gold-ink, #7a5a28);
  letter-spacing: 0.01em;
}

.jyb-page__head__subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--jyb-text-muted, #64748b);
  line-height: 1.55;
}

.jyb-page__head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .jyb-page { padding: 16px 14px; }
  .jyb-page__head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .jyb-page__head__actions { justify-content: flex-end; }
}

/* ── Surface card ────────────────────────────────────────────────────── */

.jyb-surface-card {
  background: var(--jyb-surface, #ffffff);
  border: 1px solid var(--jyb-border, #e5e7eb);
  border-radius: 8px;
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: var(--jyb-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
  margin-bottom: 16px;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.jyb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.jyb-btn:disabled,
.jyb-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.jyb-btn.is-primary {
  background: var(--jyb-gold, #c9a25e);
  border-color: var(--jyb-gold, #c9a25e);
  color: #fff;
}
.jyb-btn.is-primary:hover:not(:disabled) {
  background: var(--jyb-gold-strong, #b08a47);
  border-color: var(--jyb-gold-strong, #b08a47);
}

.jyb-btn.is-secondary {
  background: #fff;
  border-color: var(--jyb-border-strong, #cbd5e1);
  color: var(--jyb-text, #1e293b);
}
.jyb-btn.is-secondary:hover:not(:disabled) {
  background: var(--jyb-bg-muted, #f6f7f9);
  border-color: var(--jyb-gold, #c9a25e);
  color: var(--jyb-gold-ink, #7a5a28);
}

.jyb-btn.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--jyb-text-muted, #64748b);
}
.jyb-btn.is-ghost:hover:not(:disabled) {
  background: var(--jyb-bg-muted, #f6f7f9);
  color: var(--jyb-text, #1e293b);
}

.jyb-btn.is-sm  { min-height: 32px; padding: 0 12px; font-size: 0.82rem; }
.jyb-btn.is-lg  { min-height: 48px; padding: 0 24px; font-size: 1rem; }

/* On phones every primary control should hit at least 44px. */
@media (max-width: 640px) {
  .jyb-btn { min-height: var(--jyb-touch-target-min, 44px); }
  .jyb-btn.is-sm { min-height: 38px; }
}

/* ── Alerts (slim bar) ──────────────────────────────────────────────── */

.jyb-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--jyb-border, #e5e7eb);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--jyb-bg, #ffffff);
  color: var(--jyb-text, #1e293b);
  font-size: 0.88rem;
  line-height: 1.55;
}
.jyb-alert__icon { flex: 0 0 auto; line-height: 1.4; }
.jyb-alert__body { min-width: 0; }
.jyb-alert__body strong { display: block; margin-bottom: 2px; }

.jyb-alert.is-warning { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; color: #78350f; }
.jyb-alert.is-info    { border-color: #bfdbfe; border-left-color: #2563eb; background: #eff6ff; color: #1e3a8a; }
.jyb-alert.is-danger  { border-color: #fecaca; border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.jyb-alert.is-success { border-color: #bbf7d0; border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }

/* ── Empty / loading / unauth / disabled state ──────────────────────── */

.jyb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  margin: 0 auto;
  max-width: 560px;
  background: var(--jyb-surface, #ffffff);
  border: 1px solid var(--jyb-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: var(--jyb-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.05));
  min-height: 280px;
}

.jyb-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 24px;
  background: var(--jyb-bg-subtle, #eef0f4);
  color: var(--jyb-text-muted, #64748b);
}

.jyb-empty__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jyb-text, #1e293b);
}

.jyb-empty__body {
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: var(--jyb-text-muted, #64748b);
  line-height: 1.65;
  max-width: 480px;
}

.jyb-empty__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.jyb-empty.is-unauth   .jyb-empty__icon { background: #fef3c7; color: #b45309; }
.jyb-empty.is-loading  .jyb-empty__icon { background: #e0e7ff; color: #3730a3; animation: jyb-empty-pulse 1.4s ease-in-out infinite; }
.jyb-empty.is-disabled .jyb-empty__icon { background: #fef3c7; color: #b45309; }
.jyb-empty.is-error    .jyb-empty__icon { background: #fee2e2; color: #b91c1c; }

@keyframes jyb-empty-pulse {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* The empty-state container is itself a surface; keep its host page from
 * leaving giant dead zones below by setting a sensible vertical rhythm. */
.jyb-empty-host {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, 50vh, 560px);
  padding: 12px 0;
}

@media (max-width: 640px) {
  .jyb-empty {
    padding: 32px 18px;
    min-height: 220px;
    border-radius: 10px;
  }
  .jyb-empty-host { min-height: clamp(280px, 60vh, 520px); }
}

/* ── Skeleton block (loading placeholders) ──────────────────────────── */

.jyb-skel {
  display: block;
  background: linear-gradient(90deg, #eef0f4 0%, #f6f7fb 50%, #eef0f4 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: jyb-skel-shimmer 1.4s linear infinite;
}
.jyb-skel + .jyb-skel { margin-top: 8px; }
@keyframes jyb-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Tablet two-column helper ───────────────────────────────────────── */

.jyb-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 769px) and (max-width: 1199px) {
  .jyb-grid-2 { grid-template-columns: minmax(260px, 320px) 1fr; }
}
@media (min-width: 1200px) {
  .jyb-grid-2 { grid-template-columns: 360px 1fr; gap: 24px; }
}

/* ── Defensive: kill horizontal overflow on standalone pages ─────────── */

html, body {
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}

/* ── Narrow-viewport positioning fix (Chromium headless 500-px clamp) ──
   Chrome 147 headless clamps the CSS viewport to a 500-px minimum, so
   --window-size=390 still renders at viewport 500 and crops the PNG to
   390. Centered cards can extend past the right edge of the cropped
   PNG. To keep the card visible inside the PNG (and to look fine on
   real-device 390/412 viewports, which DO get this rule), we constrain
   the empty card max-width and left-align its host on narrow widths. */
@media (max-width: 640px) {
  .jyb-empty-host {
    justify-content: flex-start;
  }
  .jyb-empty {
    max-width: min(100%, 360px);
    margin: 0;
    padding: 28px 20px;
  }
  .jyb-page__body {
    max-width: 360px;
    margin: 0;
  }
  .jyb-page__head {
    margin-right: 0;
  }
}

/* ── Mobile-narrow fixes (Codex v3 follow-up) ─────────────────────────
   Codex v3 visual review found the douyin-transcribe legacy warning AND
   the copywriting loading card still right-clipping at 390px. Two
   sources of overflow:
     (a) the legacy yellow [role="alert"] banner injected by JS in
         douyin-transcribe has no max-width; long text overflowed past
         the right edge.
     (b) when .jyb-empty-host is rendered INSIDE copywriting's existing
         .empty container, both classes were applying padding (.empty
         had padding:28px on its own), pushing the card start to x≈36
         and the right edge past the 390-px viewport crop.
   This block hardens every relevant surface so it fits at the actual
   visual width including both real 390/412 device viewports AND
   chrome's 500-clamped headless viewport (PNG cropped to 390/412).
*/
@media (max-width: 640px) {
  /* Defensive page-level guard. The expectation is nothing inside the
     fold actually overflows; this just protects against unexpected
     legacy components from inducing horizontal scroll. */
  html, body { overflow-x: hidden; }

  /* Generic alert/card surfaces from legacy per-page CSS. Constrain
     them to the viewport so injected banners cannot overflow. */
  .jyb-alert,
  [role="alert"],
  .alert,
  .banner,
  .card,
  .surface-card,
  .jyb-surface-card {
    box-sizing: border-box;
    max-width: min(358px, calc(100vw - 32px));
    width: auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* When .empty is reused as a .jyb-empty-host wrapper, drop the
     legacy 28-px outer padding so the .jyb-empty card sits at the
     content edge (saves 56px of horizontal space). */
  .empty.jyb-empty-host {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 340px !important;
    max-width: 340px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Tighter empty card so its right edge falls comfortably inside the
     390-px PNG crop even when chrome's headless viewport is 500. */
  .jyb-empty {
    max-width: min(340px, calc(100vw - 32px));
    width: 340px;
    margin: 0;
    padding: 22px 16px;
    box-sizing: border-box;
  }
  .empty.jyb-empty-host > .jyb-empty {
    width: 340px !important;
    max-width: 340px !important;
  }
  .jyb-empty__body { font-size: .86rem; }
  .jyb-empty__actions { gap: 6px; }
  .jyb-empty__actions .jyb-btn { flex: 1 1 auto; padding: 0 14px; }

  /* Force-shrink any inline-styled max-width on the legacy yellow
     alert banner injected by JS in douyin-transcribe. This selector
     matches by inline background color (the banner's distinctive
     fef3c7 amber) so we don't have to modify the page's JS. */
  .wrap > div[role="alert"][style*="#fef3c7"] {
    max-width: min(358px, calc(100vw - 32px)) !important;
    width: auto !important;
    margin: 12px 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: .82rem !important;
    line-height: 1.5 !important;
  }

  /* user-admin still uses legacy .hdr/.hdr-right instead of the shared
     .jyb-page__head primitives. Keep its action button inside the 390
     validation crop instead of leaving a clipped gold strip at right. */
  .jyb-page-user-admin .hdr {
    display: block !important;
    width: 340px !important;
    max-width: 340px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jyb-page-user-admin .hdr-right {
    width: 340px !important;
    max-width: 340px !important;
    justify-content: flex-start !important;
    margin-top: 12px !important;
  }
  .jyb-page-user-admin #btnCreate {
    max-width: 340px !important;
    min-width: 0 !important;
  }

  /* Legacy full-page surfaces still carry page-local .wrap/.container
     widths and card grids. Pin them to the same mobile measure so every
     major interface fits the 390/412 validation crop. */
  .jyb-page-welcome .wrap,
  .jyb-page-newbie .wrap,
  .jyb-page-douyin-dashboard .container {
    width: 340px !important;
    max-width: 340px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .jyb-page-welcome .hero,
  .jyb-page-welcome .stat-strip,
  .jyb-page-welcome .stat-card,
  .jyb-page-welcome .shortcuts,
  .jyb-page-welcome .activity,
  .jyb-page-newbie .section,
  .jyb-page-douyin-dashboard .toolbar,
  .jyb-page-douyin-dashboard .toolbar-actions,
  .jyb-page-douyin-dashboard .stats-grid,
  .jyb-page-douyin-dashboard .stat-card,
  .jyb-page-douyin-dashboard .emp-grid,
  .jyb-page-douyin-dashboard .emp-card {
    width: 100% !important;
    max-width: 340px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .jyb-page-welcome .hero,
  .jyb-page-welcome .stat-strip,
  .jyb-page-douyin-dashboard .stats-grid,
  .jyb-page-douyin-dashboard .emp-grid {
    grid-template-columns: 1fr !important;
  }

  .jyb-page-welcome .hero {
    text-align: left !important;
    justify-items: start !important;
  }
  .jyb-page-welcome .hero-logo {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jyb-page-welcome .hero-right {
    text-align: left !important;
  }

  .jyb-page-newbie .section-hdr,
  .jyb-page-newbie .section-body {
    box-sizing: border-box !important;
    max-width: 340px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .jyb-page-douyin-dashboard .toolbar {
    align-items: stretch !important;
  }
  .jyb-page-douyin-dashboard .toolbar-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .jyb-page-douyin-dashboard .toolbar-actions .btn-sm {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}