/* Create page TapNow theme - graphite tokens, background field, and motion normalization. Load first. */

/*
THESIS: Keep the existing creation workstation intact and replace its neon glass skin with TapNow's quiet, content-first dark workspace.
OWN-WORLD: Near-black graphite field, solid #1d1d1d surfaces, restrained white hairlines, 16-20px corners, inset top highlights, and neutral controls.
STORY: The user's own image/video workflow remains immediately recognizable; surfaces recede, output media carries color, and state changes stay legible.
FIRST VIEWPORT: Existing brand, task rail, mode switcher, composer, settings, and send action keep their exact composition while adopting the new material system.
FORM: User-pinned TapNow reference applied as a CSS-only overlay; the incumbent layout is fixed, so no concept seed or replacement structure is used.
*/

body.create-page {
  --tap-bg: #0a0a0a;
  --tap-bg-deep: #0f0f0f;
  --tap-surface: #1f1f1f;
  --tap-surface-soft: #222;
  --tap-surface-raised: #262626;
  --tap-surface-hover: #2b2b2b;
  --tap-line: rgba(255, 255, 255, 0.1);
  --tap-line-strong: rgba(255, 255, 255, 0.15);
  --tap-highlight: rgba(255, 255, 255, 0.16);
  --tap-text: #f5f5f5;
  --tap-text-soft: #e6e6e6;
  --tap-text-muted: #a3a3a3;
  --tap-text-dim: #737373;
  --tap-focus: rgba(255, 255, 255, 0.35);
  --tap-inset: inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
  --tap-float-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 10px -1px rgba(0, 0, 0, 0.1);
  background: var(--tap-bg) !important;
  color: var(--tap-text);
  color-scheme: dark;
}

body.create-page ::selection {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

body.create-page .bg-glow,
body.create-page .bg-glow.floating-lines-fallback {
  background-color: var(--tap-bg) !important;
  background-image:
    radial-gradient(
      ellipse 62% 38% at 50% 38%,
      rgba(48, 57, 61, 0.14),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #07090a 0%,
      #090c0d 52%,
      #050607 100%
    ) !important;
  background-position: center !important;
  background-size: auto !important;
  animation: none !important;
}

body.create-page .bg-glow::after {
  background: none !important;
}

body.create-page .bg-glow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 230px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9) 12%,
    rgba(0, 0, 0, 0.7) 26%,
    rgba(0, 0, 0, 0.38) 42%,
    rgba(0, 0, 0, 0.14) 58%,
    rgba(0, 0, 0, 0) 78%
  );
}

body.create-page .bg-glow .floating-lines-canvas {
  display: none !important;
}

body.create-page .particle {
  display: none !important;
}

body.create-page :is(
  .media-mode-btn,
  .tab-item,
  .upload-card,
  .video-upload-card,
  .btn-add-image,
  .image-add-tile,
  .btn-clear-images,
  .btn-send,
  .model-selector-trigger,
  .create-select-trigger,
  .create-select-option,
  .model-option-inline,
  .dropdown-item,
  .gallery-filter,
  .gallery-action-btn,
  .gallery-close-btn
) {
  transition-property: color, background-color, border-color, outline-color, box-shadow !important;
  transition-duration: 150ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}