/* Cinemarketer OS — premium styling, animations, theme variables. */

/* ── Theme color tokens ───────────────────────────────────────── */
:root, html.dark {
  --c-bg:          10 14 26;
  --c-bg-soft:     15 20 36;
  --c-bg-card:     20 26 42;
  --c-bg-hover:    26 34 54;
  --c-border:      31 39 64;
  --c-border-soft: 22 29 51;
  --c-text:        226 232 240;
  --c-text-muted:  148 163 184;
  --c-text-dim:    100 116 139;
  --c-shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --c-shadow:      0 8px 24px -4px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.04);
  --c-shadow-lg:   0 24px 48px -12px rgba(0,0,0,0.6), 0 0 0 1px rgba(245,158,11,0.06);
  --c-card-grad:   linear-gradient(180deg, rgba(245,158,11,0.02) 0%, transparent 50%);
}
html.light {
  --c-bg:          250 250 252;
  --c-bg-soft:     244 246 250;
  --c-bg-card:     255 255 255;
  --c-bg-hover:    241 245 249;
  --c-border:      226 232 240;
  --c-border-soft: 241 245 249;
  --c-text:        15 23 42;
  --c-text-muted:  71 85 105;
  --c-text-dim:    148 163 184;
  --c-shadow-sm:   0 1px 2px rgba(15,23,42,0.05);
  --c-shadow:      0 8px 24px -8px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);
  --c-shadow-lg:   0 24px 48px -16px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.05);
  --c-card-grad:   linear-gradient(180deg, rgba(245,158,11,0.025) 0%, transparent 60%);
}

html, body { height: 100%; }
body {
  font-feature-settings: "ss01", "cv11";
  background: rgb(var(--c-bg));
  background-image: radial-gradient(circle at 0% 0%, rgba(245,158,11,0.04) 0, transparent 40%),
                    radial-gradient(circle at 100% 100%, rgba(234,88,12,0.03) 0, transparent 40%);
}
[x-cloak] { display: none !important; }

/* ── Premium card ─────────────────────────────────────────────── */
.cm-card {
  background: rgb(var(--c-bg-card));
  background-image: var(--c-card-grad);
  border: 1px solid rgb(var(--c-border));
  border-radius: 0.75rem;
  box-shadow: var(--c-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cm-card:hover.cm-card-hover, .hover\:cm-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow);
  border-color: rgba(245,158,11,0.25);
}

/* ── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-border)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-bg-hover)); }
::selection { background: rgba(245, 158, 11, 0.3); color: rgb(var(--c-text)); }

/* ── Universal interaction feedback ───────────────────────────── */

/* All clickable elements get gentle, gradual transitions on every property. */
button, a[href], summary, [role="button"], input[type="submit"], input[type="button"] {
  transition: transform     280ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow    280ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 280ms ease,
              border-color  280ms ease,
              color         280ms ease,
              filter        280ms ease;
}

/* Press state — JS adds .cm-pressed for a guaranteed-visible hold, even on fast clicks.
   Native :active is also matched as a fallback for keyboard/touch.                       */
.cm-pressed,
button:active:not(:disabled),
[role="button"]:active,
input[type="submit"]:active,
input[type="button"]:active,
a[class*="rounded"]:active,
button[class*="rounded"]:active {
  transform: scale(0.975) translateY(1px) !important;
  filter: brightness(0.94) saturate(0.95);
  /* Faster down, slower up — feels softer */
  transition-duration: 130ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
}

/* Soft hover lift on primary gradient buttons. */
button[class*="from-accent-amber"]:hover:not(:disabled),
a[class*="from-accent-amber"]:hover {
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 12px 24px -8px rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
}

/* Smooth animated focus rings. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.55);
  outline-offset: 3px;
  transition: outline-color 200ms ease, outline-offset 200ms ease;
}

/* Sidebar nav: gentle slide on hover. */
aside nav a {
  transition: padding-left 250ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 200ms ease,
              color 200ms ease;
}
aside nav a:hover { padding-left: 1.05rem; }

/* Click ripple — softer and slower for a premium feel. */
.cm-ripple { position: relative; overflow: hidden; }
.cm-ripple .cm-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transform: scale(0);
  opacity: 1;
  animation: cm-ripple-anim 750ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}
@keyframes cm-ripple-anim {
  0%   { transform: scale(0);   opacity: 0.55; }
  60%  { opacity: 0.35; }
  100% { transform: scale(4.5); opacity: 0; }
}

/* ── Toast notifications ──────────────────────────────────────── */
#cm-toasts {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
.cm-toast {
  background: rgb(var(--c-bg-card));
  border: 1px solid rgb(var(--c-border));
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  box-shadow: var(--c-shadow);
  animation: cm-toast-in 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.0),
             cm-toast-out 0.3s cubic-bezier(0.4, 0.0, 0.6, 1.0) 2.7s forwards;
  pointer-events: auto;
}
.cm-toast.cm-toast-success { border-color: rgba(16, 185, 129, 0.4); }
.cm-toast.cm-toast-error   { border-color: rgba(239, 68, 68, 0.4); }
@keyframes cm-toast-in  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cm-toast-out { to   { opacity: 0; transform: translateY(20px); } }

/* ── Number tickup helper class ───────────────────────────────── */
.cm-pulse-once {
  animation: cm-pulse-once 0.4s ease-out;
}
@keyframes cm-pulse-once {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); color: #10b981; }
  100% { transform: scale(1); }
}

/* ── Boot animation ───────────────────────────────────────────── */
.cm-boot {
  animation: cm-boot-in 0.5s ease-out;
}
@keyframes cm-boot-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Stagger fade-up children ─────────────────────────────────── */
.cm-stagger > * {
  opacity: 0;
  animation: cm-fade-up 0.55s cubic-bezier(0.2, 0.9, 0.4, 1.0) forwards;
}
.cm-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.cm-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.cm-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.cm-stagger > *:nth-child(4) { animation-delay: 0.22s; }
.cm-stagger > *:nth-child(5) { animation-delay: 0.28s; }
.cm-stagger > *:nth-child(6) { animation-delay: 0.34s; }
.cm-stagger > *:nth-child(7) { animation-delay: 0.40s; }
.cm-stagger > *:nth-child(8) { animation-delay: 0.46s; }
.cm-stagger > *:nth-child(9) { animation-delay: 0.52s; }
.cm-stagger > *:nth-child(10) { animation-delay: 0.58s; }
.cm-stagger > *:nth-child(n+11) { animation-delay: 0.64s; }
@keyframes cm-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Goals page — hero gradient backdrop ──────────────────────── */
.cm-hero-bg {
  background: rgb(var(--c-bg-card));
  background-image:
    radial-gradient(circle at 20% 0%, rgba(245, 158, 11, 0.12) 0%, transparent 35%),
    radial-gradient(circle at 80% 100%, rgba(234, 88, 12, 0.10) 0%, transparent 40%),
    radial-gradient(circle at 60% 50%, rgba(168, 85, 247, 0.05) 0%, transparent 50%),
    var(--c-card-grad);
  border: 1px solid rgba(245, 158, 11, 0.18);
}
.cm-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(245,158,11,0.08), transparent 60%);
  pointer-events: none;
}

/* ── Client heartbeat — draws on load like an ECG ─────────────── */
.cm-heartbeat {
  animation: cm-heartbeat-draw 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             cm-heartbeat-pulse 4s ease-in-out 2.4s infinite;
  filter: drop-shadow(0 0 6px currentColor);
}
@keyframes cm-heartbeat-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes cm-heartbeat-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

/* ── Goals page — animated progress ring ───────────────────────── */
.cm-ring-fill {
  animation: cm-ring-draw 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.3));
}
@keyframes cm-ring-draw {
  from { stroke-dashoffset: var(--ring-circ); }
  to   { stroke-dashoffset: var(--ring-target-offset); }
}

/* ── Funnel bar grow animation ────────────────────────────────── */
.cm-bar-grow {
  width: 0;
  animation: cm-bar-grow 1.0s cubic-bezier(0.2, 0.9, 0.4, 1.0) forwards;
}
@keyframes cm-bar-grow {
  from { width: 0; opacity: 0.3; }
  to   { width: var(--target-width, 100%); opacity: 1; }
}

/* ── Daily-quote shimmer (subtle gradient sweep) ─────────────── */
.cm-quote-shimmer {
  background-size: 200% auto;
  animation: cm-shimmer 6s ease-in-out infinite;
}
@keyframes cm-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Urgency glow on the AI assistant button ──────────────────── */
.cm-glow-amber {
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  animation: cm-glow-amber-pulse 2.4s ease-in-out infinite;
}
@keyframes cm-glow-amber-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6), 0 0 8px 2px rgba(245, 158, 11, 0.3); }
  50%      { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0), 0 0 24px 6px rgba(245, 158, 11, 0.5); }
}
.cm-glow-red {
  animation: cm-glow-red-pulse 1.8s ease-in-out infinite;
}
@keyframes cm-glow-red-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* ── Glowing green dot for actively-working agents ────────────── */
.cm-glow-green {
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 0 0 rgba(16, 185, 129, 0.4);
  animation: cm-glow-green-pulse 2.2s ease-in-out infinite;
}
@keyframes cm-glow-green-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6),
                0 0 6px 1px rgba(16, 185, 129, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0),
                0 0 14px 4px rgba(16, 185, 129, 0.7);
    transform: scale(1.15);
  }
}

/* Backdrop-blur on header reads better in light mode */
html.light header { backdrop-filter: blur(8px); }

/* ── Markdown rendering inside agent chat / report bodies ─────── */
.md-content { color: inherit; }
.md-content > *:first-child { margin-top: 0; }
.md-content > *:last-child { margin-bottom: 0; }
.md-content p { margin: 0 0 0.5em; }
.md-content strong { color: #f59e0b; font-weight: 600; }
.md-content em { color: #fbbf24; }
.md-content ul, .md-content ol { margin: 0.5em 0; padding-left: 1.25em; }
.md-content li { margin: 0.15em 0; }
.md-content code { background: rgb(var(--c-bg)); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.md-content pre { background: rgb(var(--c-bg)); border: 1px solid rgb(var(--c-border)); padding: 0.75em; border-radius: 6px; overflow-x: auto; margin: 0.5em 0; }
.md-content pre code { background: transparent; padding: 0; }
.md-content h1, .md-content h2, .md-content h3 { font-weight: 600; margin: 0.75em 0 0.25em; color: rgb(var(--c-text)); }
.md-content h1 { font-size: 1.1em; }
.md-content h2 { font-size: 1.05em; }
.md-content h3 { font-size: 1em; }
.md-content blockquote { border-left: 3px solid rgb(var(--c-border)); padding-left: 0.75em; color: rgb(var(--c-text-muted)); margin: 0.5em 0; }
.md-content a { color: #f59e0b; text-decoration: underline; }
.md-content hr { border: none; border-top: 1px solid rgb(var(--c-border)); margin: 0.75em 0; }
.md-content table { border-collapse: collapse; margin: 0.5em 0; }
.md-content th, .md-content td { border: 1px solid rgb(var(--c-border)); padding: 4px 8px; }