/**
 * Page-specific Layouts
 * BEM naming convention
 */

/* ==========================================================================
   Home Page
   ========================================================================== */

.home-page {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-surface-solid);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--space-sm);
  position: relative;
}

@media (min-width: 768px) {
  .home-page {
    padding: var(--space-xl);
  }
}

.dark .home-page,
html.dark .home-page {
  background-color: var(--color-gray-900);
}

.home-page__content {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
}

.home-page__body {
  width: 100%;
  height: 100%;
  line-height: 2;
  color: var(--color-gray-800);
  font-weight: var(--font-medium);
}

.dark .home-page__body,
html.dark .home-page__body {
  color: var(--color-gray-200);
}

.home-page__layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .home-page__layout {
    flex-direction: row;
  }
}

.home-page__left {
  display: none;
  width: 100%;
  padding: var(--space-md);
}

@media (min-width: 768px) {
  .home-page__left {
    display: block;
    width: 50%;
  }
}

.home-page__divider {
  display: none;
  width: 2px;
  background-color: var(--color-red-400);
}

@media (min-width: 768px) {
  .home-page__divider {
    display: block;
  }
}

.home-page__right {
  width: 100%;
  padding: var(--space-sm);
}

@media (min-width: 768px) {
  .home-page__right {
    width: 50%;
    padding: 0 var(--space-md) var(--space-sm) var(--space-md);
  }
}

.home-page__form {
  padding-bottom: var(--space-md);
}

/* ==========================================================================
   Message List
   ========================================================================== */

.message-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  position: relative;
  z-index: var(--z-10);
  padding-bottom: var(--space-md);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty-state {
  text-align: center;
  color: var(--color-gray-400);
  padding: var(--space-xl) var(--space-sm);
}

.dark .empty-state,
html.dark .empty-state {
  color: var(--color-gray-500);
}

.empty-state__card {
  background-color: var(--color-surface-solid);
  border-radius: var(--radius-retro);
  padding: var(--space-md);
  border: var(--border-retro) solid var(--color-shadow-light);
  box-shadow: var(--shadow-retro) var(--color-shadow-light);
}

.dark .empty-state__card,
html.dark .empty-state__card {
  background-color: oklch(22% 0.02 260);
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro) var(--color-shadow-dark-default);
}

.empty-state__icon {
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--space-sm);
  color: var(--color-gray-400);
}

.dark .empty-state__icon,
html.dark .empty-state__icon {
  color: var(--color-gray-600);
}

.empty-state__title {
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

.dark .empty-state__title,
html.dark .empty-state__title {
  color: var(--color-gray-300);
}

.empty-state__subtitle {
  font-size: var(--text-xs);
  margin-top: 2px;
}

/* Empty State Card Color Variants - FastRetro style */
.empty-state__card--sky {
  background-color: var(--color-pastel-blue);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro) oklch(45% 0.12 230);
}

.dark .empty-state__card--sky,
html.dark .empty-state__card--sky {
  background-color: oklch(30% 0.06 230);
  border-color: var(--color-border-dark-sky);
  box-shadow: var(--shadow-retro) var(--color-shadow-dark-sky);
}

.empty-state__card--pink {
  background-color: var(--color-pastel-pink);
  border-color: var(--color-shadow-light);
  box-shadow: var(--shadow-retro) oklch(55% 0.15 350);
}

.dark .empty-state__card--pink,
html.dark .empty-state__card--pink {
  background-color: oklch(30% 0.08 350);
  border-color: var(--color-border-dark-pink);
  box-shadow: var(--shadow-retro) var(--color-shadow-dark-pink);
}

/* ==========================================================================
   Auth Pages (Login, Password Reset)
   ========================================================================== */

.auth-page {
  width: 100%;
  min-height: 100vh;
  background-color: var(--color-surface-solid);
  color: var(--color-gray-900);
  padding: var(--space-lg);
}

@media (min-width: 768px) {
  .auth-page {
    width: 66.666667%;
    margin: 0 auto;
  }
}

.dark .auth-page,
html.dark .auth-page {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
}

.auth-page__title {
  font-weight: var(--font-bold);
  font-size: var(--text-4xl);
  color: var(--color-gray-900);
  margin-bottom: var(--space-lg);
}

.dark .auth-page__title,
html.dark .auth-page__title {
  color: var(--color-gray-100);
}

.auth-page__form {
  display: contents;
}

.auth-page__field {
  margin: var(--space-lg) 0;
}

.auth-page__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .auth-page__actions {
    flex-direction: row;
    align-items: center;
  }
}

.auth-page__link {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  text-decoration: underline;
  transition: color var(--transition-colors);
}

.auth-page__link:hover {
  color: var(--color-gray-900);
}

.dark .auth-page__link,
html.dark .auth-page__link {
  color: var(--color-gray-300);
}

.dark .auth-page__link:hover,
html.dark .auth-page__link:hover {
  color: var(--color-gray-100);
}

/* ==========================================================================
   Landing Page - Polished Marketing Page
   ========================================================================== */

.landing-page {
  min-height: 100vh;
  margin-top: -7rem;
  padding-top: 7rem;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Landing Sections
   -------------------------------------------------------------------------- */
.landing-section {
  padding: var(--space-3xl) var(--space-md);
  position: relative;
}

@media (min-width: 640px) {
  .landing-section {
    padding: var(--space-3xl) var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .landing-section {
    padding: 5rem var(--space-xl);
  }
}

/* Hero section - gradient background */
.landing-section--hero {
  background: linear-gradient(
    180deg,
    oklch(97% 0.02 95) 0%,
    oklch(95% 0.06 350 / 0.3) 50%,
    oklch(93% 0.06 230 / 0.3) 100%
  );
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.dark .landing-section--hero,
html.dark .landing-section--hero {
  background: linear-gradient(
    180deg,
    oklch(15% 0.02 260) 0%,
    oklch(18% 0.04 350 / 0.4) 50%,
    oklch(18% 0.04 230 / 0.4) 100%
  );
}

/* Benefits section - subtle background */
.landing-section--benefits {
  background: oklch(100% 0 0 / 0.5);
  border-top: 2px solid oklch(90% 0.05 350);
  border-bottom: 2px solid oklch(90% 0.05 350);
}

.dark .landing-section--benefits,
html.dark .landing-section--benefits {
  background: oklch(12% 0.02 260 / 0.5);
  border-color: oklch(30% 0.05 350 / 0.5);
}

/* Steps section */
.landing-section--steps {
  background: linear-gradient(
    135deg,
    oklch(97% 0.02 95) 0%,
    oklch(96% 0.04 230 / 0.3) 100%
  );
}

.dark .landing-section--steps,
html.dark .landing-section--steps {
  background: linear-gradient(
    135deg,
    oklch(14% 0.02 260) 0%,
    oklch(16% 0.04 230 / 0.3) 100%
  );
}

/* Pricing section */
.landing-section--pricing {
  background: linear-gradient(
    180deg,
    oklch(96% 0.04 350 / 0.2) 0%,
    oklch(97% 0.02 95) 100%
  );
}

.dark .landing-section--pricing,
html.dark .landing-section--pricing {
  background: linear-gradient(
    180deg,
    oklch(16% 0.04 350 / 0.3) 0%,
    oklch(14% 0.02 260) 100%
  );
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.landing-hero {
  max-width: var(--container-lg);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* Sparkle emoji with animation */
.landing-hero__emoji {
  font-size: 5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px oklch(70% 0.2 50 / 0.3));
}

@media (min-width: 640px) {
  .landing-hero__emoji {
    font-size: 6rem;
  }
}

.landing-hero__sparkle {
  display: inline-block;
  animation: sparkle-pulse 2s ease-in-out infinite;
}

@keyframes sparkle-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.2);
  }
}

/* Hero text */
.landing-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.landing-hero__title {
  font-size: 2.5rem;
  font-weight: var(--font-black);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
}

@media (min-width: 640px) {
  .landing-hero__title {
    font-size: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .landing-hero__title {
    font-size: 4rem;
  }
}

.dark .landing-hero__title,
html.dark .landing-hero__title {
  color: var(--color-gray-100);
}

.landing-hero__title-accent {
  background: linear-gradient(
    135deg,
    oklch(60% 0.22 350),
    oklch(55% 0.22 285),
    oklch(55% 0.2 265)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .landing-hero__title-accent,
html.dark .landing-hero__title-accent {
  background: linear-gradient(
    135deg,
    oklch(75% 0.2 350),
    oklch(72% 0.18 285),
    oklch(72% 0.16 265)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  font-weight: var(--font-medium);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .landing-hero__subtitle {
    font-size: var(--text-xl);
  }
}

.dark .landing-hero__subtitle,
html.dark .landing-hero__subtitle {
  color: var(--color-gray-400);
}

/* Punch lines */
.landing-hero__punchlines {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--color-gray-600);
  font-size: var(--text-lg);
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
}

.landing-hero__punchlines p {
  margin: 0;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .landing-hero__punchlines {
    font-size: var(--text-xl);
  }
}

.dark .landing-hero__punchlines,
html.dark .landing-hero__punchlines {
  color: var(--color-gray-400);
}

/* Hero CTA - styled waitlist form container */
.landing-hero__cta {
  width: 100%;
  max-width: 28rem;
}

/* Social proof badge */
.landing-hero__proof {
  margin-top: var(--space-sm);
}

.landing-hero__proof-count {
  font-weight: var(--font-black);
}

/* --------------------------------------------------------------------------
   Benefits Section - Inline
   -------------------------------------------------------------------------- */
.landing-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: var(--space-md) 0;
}

@media (min-width: 768px) {
  .landing-benefits {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2xl);
  }
}

.landing-benefit {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: oklch(100% 0 0 / 0.8);
  border-radius: var(--radius-retro-lg);
  border: 2.5px solid oklch(85% 0.08 350);
  box-shadow: 4px 4px 0 oklch(75% 0.12 350 / 0.2);
  transition: all 0.2s ease;
}

.landing-benefit:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0 oklch(75% 0.12 350 / 0.25);
}

.dark .landing-benefit,
html.dark .landing-benefit {
  background: oklch(20% 0.02 260 / 0.8);
  border-color: oklch(40% 0.08 350 / 0.5);
  box-shadow: 4px 4px 0 oklch(50% 0.12 350 / 0.3);
}

.dark .landing-benefit:hover,
html.dark .landing-benefit:hover {
  box-shadow: 6px 6px 0 oklch(50% 0.12 350 / 0.35);
}

.landing-benefit__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  background: linear-gradient(135deg, oklch(95% 0.06 350), oklch(93% 0.06 230));
  border-radius: var(--radius-retro);
  border: 2px solid oklch(85% 0.08 350);
  flex-shrink: 0;
}

.dark .landing-benefit__icon,
html.dark .landing-benefit__icon {
  background: linear-gradient(135deg, oklch(30% 0.06 350), oklch(28% 0.06 230));
  border-color: oklch(40% 0.08 350 / 0.5);
}

.landing-benefit__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.landing-benefit__title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
}

.dark .landing-benefit__title,
html.dark .landing-benefit__title {
  color: var(--color-gray-100);
}

.landing-benefit__text {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: 0;
}

.dark .landing-benefit__text,
html.dark .landing-benefit__text {
  color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   Section Titles
   -------------------------------------------------------------------------- */
.landing-section__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  text-align: center;
  color: var(--color-gray-900);
  margin-bottom: var(--space-md);
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .landing-section__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-lg);
  }
}

.dark .landing-section__title,
html.dark .landing-section__title {
  color: var(--color-gray-100);
}

.landing-section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  text-align: center;
  max-width: 32rem;
  margin: 0 auto var(--space-xl);
}

.dark .landing-section__subtitle,
html.dark .landing-section__subtitle {
  color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   How It Works - Steps
   -------------------------------------------------------------------------- */
.landing-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--container-xl);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .landing-steps {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-sm);
  }
}

.landing-step {
  flex: 1;
  max-width: 320px;
}

@media (min-width: 768px) {
  .landing-step {
    max-width: none;
  }
}

.landing-step__card {
  height: 100%;
  padding: var(--space-xl) var(--space-lg);
  background: linear-gradient(135deg, oklch(100% 0 0) 0%, oklch(98% 0.03 95) 100%);
  border-radius: var(--radius-retro-lg);
  border: 2.5px solid oklch(80% 0.1 350);
  box-shadow: 6px 6px 0 oklch(70% 0.14 350 / 0.2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  transition: all 0.2s ease;
  position: relative;
}

.landing-step__card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 oklch(70% 0.14 350 / 0.25);
}

.dark .landing-step__card,
html.dark .landing-step__card {
  background: linear-gradient(135deg, oklch(20% 0.02 260) 0%, oklch(22% 0.03 350 / 0.3) 100%);
  border-color: oklch(45% 0.12 350 / 0.5);
  box-shadow: 6px 6px 0 oklch(55% 0.14 350 / 0.3);
}

.dark .landing-step__card:hover,
html.dark .landing-step__card:hover {
  box-shadow: 8px 8px 0 oklch(55% 0.14 350 / 0.35);
}

.landing-step__number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, oklch(65% 0.2 350), oklch(60% 0.2 285));
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-black);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid oklch(100% 0 0);
  box-shadow: 0 2px 8px oklch(65% 0.2 350 / 0.3);
}

.dark .landing-step__number,
html.dark .landing-step__number {
  border-color: oklch(20% 0.02 260);
}

.landing-step__icon {
  font-size: 2.5rem;
  line-height: 1;
}

.landing-step__title {
  font-size: var(--text-xl);
  font-weight: var(--font-black);
  color: var(--color-gray-900);
}

.dark .landing-step__title,
html.dark .landing-step__title {
  color: var(--color-gray-100);
}

.landing-step__text {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin: 0;
}

.dark .landing-step__text,
html.dark .landing-step__text {
  color: var(--color-gray-400);
}

/* Step connector arrow */
.landing-step__connector {
  display: none;
  color: oklch(75% 0.12 350);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .landing-step__connector {
    display: flex;
    align-items: center;
    padding: 0 var(--space-xs);
  }
}

.dark .landing-step__connector,
html.dark .landing-step__connector {
  color: oklch(60% 0.12 350 / 0.6);
}

/* --------------------------------------------------------------------------
   Pricing Section
   -------------------------------------------------------------------------- */
.landing-pricing {
  max-width: 28rem;
  margin: 0 auto;
  text-align: center;
}

.landing-pricing__card {
  background: linear-gradient(135deg, oklch(100% 0 0) 0%, oklch(97% 0.04 350 / 0.3) 100%);
  border-radius: var(--radius-retro-lg);
  border: 3px solid oklch(75% 0.14 350);
  box-shadow: 8px 8px 0 oklch(70% 0.16 350 / 0.25);
  overflow: hidden;
  transition: all 0.2s ease;
}

.landing-pricing__card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 oklch(70% 0.16 350 / 0.3);
}

.dark .landing-pricing__card,
html.dark .landing-pricing__card {
  background: linear-gradient(135deg, oklch(20% 0.02 260) 0%, oklch(24% 0.05 350 / 0.3) 100%);
  border-color: oklch(50% 0.14 350 / 0.6);
  box-shadow: 8px 8px 0 oklch(55% 0.16 350 / 0.35);
}

.dark .landing-pricing__card:hover,
html.dark .landing-pricing__card:hover {
  box-shadow: 10px 10px 0 oklch(55% 0.16 350 / 0.4);
}

.landing-pricing__header {
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: linear-gradient(135deg, oklch(92% 0.08 350 / 0.5), oklch(90% 0.06 230 / 0.3));
  border-bottom: 2px solid oklch(85% 0.08 350);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.dark .landing-pricing__header,
html.dark .landing-pricing__header {
  background: linear-gradient(135deg, oklch(28% 0.06 350 / 0.5), oklch(26% 0.04 230 / 0.3));
  border-bottom-color: oklch(40% 0.08 350 / 0.5);
}

.landing-pricing__badge {
  display: inline-flex;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, oklch(65% 0.2 350), oklch(60% 0.2 285));
  color: white;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 8px oklch(65% 0.2 350 / 0.3);
}

.landing-pricing__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.landing-pricing__amount {
  font-size: 3rem;
  font-weight: var(--font-black);
  color: var(--color-gray-900);
  line-height: 1;
}

.dark .landing-pricing__amount,
html.dark .landing-pricing__amount {
  color: var(--color-gray-100);
}

.landing-pricing__period {
  font-size: var(--text-lg);
  color: var(--color-gray-500);
  font-weight: var(--font-medium);
}

.dark .landing-pricing__period,
html.dark .landing-pricing__period {
  color: var(--color-gray-400);
}

.landing-pricing__features {
  list-style: none;
  padding: var(--space-lg);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.landing-pricing__feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-gray-700);
}

.dark .landing-pricing__feature,
html.dark .landing-pricing__feature {
  color: var(--color-gray-300);
}

.landing-pricing__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: oklch(55% 0.2 145);
  background: oklch(92% 0.1 145);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.dark .landing-pricing__check,
html.dark .landing-pricing__check {
  color: oklch(70% 0.15 145);
  background: oklch(30% 0.08 145 / 0.5);
}

.landing-pricing__cta {
  padding: 0 var(--space-lg) var(--space-xl);
}

/* --------------------------------------------------------------------------
   Landing Footer
   -------------------------------------------------------------------------- */
.landing-footer {
  background: linear-gradient(
    180deg,
    oklch(95% 0.05 350 / 0.3) 0%,
    oklch(97% 0.03 95) 30%,
    oklch(96% 0.04 230 / 0.3) 100%
  );
  border-top: 3px solid oklch(85% 0.08 350);
}

.dark .landing-footer,
html.dark .landing-footer {
  background: linear-gradient(
    180deg,
    oklch(18% 0.04 350 / 0.4) 0%,
    oklch(14% 0.02 260) 30%,
    oklch(16% 0.04 230 / 0.3) 100%
  );
  border-top-color: oklch(35% 0.08 350 / 0.5);
}

.landing-footer__cta {
  padding: var(--space-3xl) var(--space-md);
  text-align: center;
  max-width: var(--container-md);
  margin: 0 auto;
}

@media (min-width: 640px) {
  .landing-footer__cta {
    padding: var(--space-3xl) var(--space-lg);
  }
}

.landing-footer__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

@media (min-width: 640px) {
  .landing-footer__title {
    font-size: var(--text-3xl);
  }
}

.dark .landing-footer__title,
html.dark .landing-footer__title {
  color: var(--color-gray-100);
}

.landing-footer__subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  margin-bottom: var(--space-xl);
}

.dark .landing-footer__subtitle,
html.dark .landing-footer__subtitle {
  color: var(--color-gray-400);
}

.landing-footer__form {
  max-width: 28rem;
  margin: 0 auto;
}

.landing-footer__bottom {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  border-top: 2px solid oklch(90% 0.05 350);
}

.dark .landing-footer__bottom,
html.dark .landing-footer__bottom {
  border-top-color: oklch(30% 0.05 350 / 0.5);
}

.landing-footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.landing-footer__emoji {
  font-size: var(--text-2xl);
}

.landing-footer__name {
  font-size: var(--text-xl);
  font-weight: var(--font-black);
  background: linear-gradient(
    135deg,
    oklch(60% 0.2 350),
    oklch(55% 0.2 285),
    oklch(55% 0.18 265)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .landing-footer__name,
html.dark .landing-footer__name {
  background: linear-gradient(
    135deg,
    oklch(75% 0.18 350),
    oklch(72% 0.16 285),
    oklch(72% 0.14 265)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-footer__tagline {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  margin-bottom: var(--space-sm);
}

.dark .landing-footer__tagline,
html.dark .landing-footer__tagline {
  color: var(--color-gray-400);
}

.landing-footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0;
}

.dark .landing-footer__copyright,
html.dark .landing-footer__copyright {
  color: var(--color-gray-500);
}

/* ==========================================================================
   Diary Chat Page
   ========================================================================== */

.diary-chat {
  position: relative;
}

.diary-chat__loading {
  display: none;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  position: relative;
  z-index: var(--z-10);
}

.diary-chat__loading.is-visible {
  display: block;
}

.diary-chat__loading-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: oklch(100% 0 0 / 0.95);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-2xl);
  border: 2px solid oklch(90% 0.08 350);
  box-shadow: 0 8px 24px oklch(70% 0.18 350 / 0.1);
}

.dark .diary-chat__loading-inner,
html.dark .diary-chat__loading-inner {
  background-color: oklch(25% 0.02 250 / 0.95);
  border-color: oklch(50% 0.16 350 / 0.5);
}

.diary-chat__loading-dots {
  display: flex;
  gap: 6px;
}

.diary-chat__loading-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  animation: bounce 1s infinite;
}

.diary-chat__loading-dot:nth-child(1) {
  background: linear-gradient(to right, oklch(65% 0.18 350), oklch(60% 0.18 285));
  animation-delay: 0ms;
}

.diary-chat__loading-dot:nth-child(2) {
  background: linear-gradient(to right, oklch(60% 0.18 285), oklch(55% 0.18 265));
  animation-delay: 150ms;
}

.diary-chat__loading-dot:nth-child(3) {
  background: linear-gradient(to right, oklch(55% 0.18 265), oklch(65% 0.12 220));
  animation-delay: 300ms;
}

.diary-chat__loading-text {
  font-weight: var(--font-semibold);
  color: var(--color-gray-600);
}

.dark .diary-chat__loading-text,
html.dark .diary-chat__loading-text {
  color: var(--color-gray-300);
}

.diary-chat__messages {
  padding-bottom: var(--space-md);
  margin-bottom: 120px; /* Space for sticky form */
}

/* When inside today-section, remove extra margins */
.today-section .diary-chat__messages {
  margin-bottom: 0;
  margin-top: 0;
}

.diary-chat__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-lg) 0;
}

.diary-chat__divider-line {
  height: 2px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--color-gray-400), transparent);
}

.diary-chat__divider-line--pink {
  background: linear-gradient(to right, transparent, oklch(72% 0.16 350), transparent);
}

.dark .diary-chat__divider-line,
html.dark .diary-chat__divider-line {
  background: linear-gradient(to right, transparent, var(--color-gray-600), transparent);
}

.dark .diary-chat__divider-line--pink,
html.dark .diary-chat__divider-line--pink {
  background: linear-gradient(to right, transparent, oklch(65% 0.18 350), transparent);
}

.diary-chat__divider-text {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-gray-600);
  padding: 0 var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.diary-chat__divider-text--pink {
  color: oklch(55% 0.18 350);
}

.dark .diary-chat__divider-text,
html.dark .diary-chat__divider-text {
  color: var(--color-gray-400);
}

.dark .diary-chat__divider-text--pink,
html.dark .diary-chat__divider-text--pink {
  color: oklch(82% 0.12 350);
}

.diary-chat__form-container {
  position: sticky;
  bottom: 0;
  z-index: var(--z-30);
  margin-top: var(--space-sm);
}

@media (min-width: 640px) {
  .diary-chat__form-container {
    margin-top: var(--space-md);
  }
}

.diary-chat__form {
  position: relative;
  z-index: var(--z-10);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding: var(--space-2xl) var(--space-md);
  border-top: var(--border-retro) solid var(--color-shadow-light);
  background: linear-gradient(135deg, var(--color-pastel-cream) 0%, var(--color-pastel-pink) 50%, var(--color-pastel-blue) 100%);
}

@media (min-width: 640px) {
  .footer {
    padding: var(--space-2xl) var(--space-lg);
  }
}

.dark .footer,
html.dark .footer {
  border-top-color: var(--color-shadow-dark);
  background: linear-gradient(135deg, oklch(20% 0.03 95 / 0.5), oklch(22% 0.04 350 / 0.5), oklch(22% 0.04 230 / 0.5));
}

.footer__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.footer__emoji {
  font-size: var(--text-3xl);
}

.footer__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  background: linear-gradient(to right, 
    oklch(55% 0.22 350), 
    oklch(50% 0.22 285), 
    oklch(50% 0.2 265)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark .footer__title,
html.dark .footer__title {
  background: linear-gradient(to right, 
    oklch(75% 0.2 350), 
    oklch(75% 0.18 285), 
    oklch(75% 0.16 265)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer__tagline {
  color: var(--color-gray-600);
}

.dark .footer__tagline,
html.dark .footer__tagline {
  color: var(--color-gray-400);
}

.footer__copyright {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* ==========================================================================
   Modal / Thread Overlay
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: oklch(0% 0 0 / 0.6);
  backdrop-filter: blur(4px);
  z-index: var(--z-50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal {
  max-width: 48rem;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-solid);
  border-radius: var(--radius-2xl);
  border: 3px solid var(--color-pink-200);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px oklch(0% 0 0 / 0.25);
}

.dark .modal,
html.dark .modal {
  background-color: var(--color-slate-800);
  border-color: oklch(50% 0.16 350 / 0.5);
}

.modal--pink {
  background: linear-gradient(135deg, oklch(97% 0.02 350 / 0.9), oklch(100% 0 0));
}

.dark .modal--pink,
html.dark .modal--pink {
  background: linear-gradient(135deg, oklch(25% 0.06 350 / 0.3), var(--color-slate-800));
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 2px solid oklch(90% 0.08 350);
}

@media (min-width: 640px) {
  .modal__header {
    padding: var(--space-lg);
  }
}

.dark .modal__header,
html.dark .modal__header {
  border-bottom-color: oklch(50% 0.16 350 / 0.5);
}

.modal__title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--font-black);
  color: var(--color-gray-900);
}

@media (min-width: 640px) {
  .modal__title {
    font-size: var(--text-xl);
  }
}

.dark .modal__title,
html.dark .modal__title {
  color: var(--color-gray-100);
}

.modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-gray-200);
  background: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal__close:hover {
  color: var(--color-gray-700);
  background-color: var(--color-gray-100);
}

.dark .modal__close,
html.dark .modal__close {
  border-color: var(--color-slate-600);
}

.dark .modal__close:hover,
html.dark .modal__close:hover {
  color: var(--color-gray-300);
  background-color: var(--color-slate-700);
}

.modal__close-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Original message area */
.modal__original {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 2px solid oklch(95% 0.04 350);
  background: linear-gradient(to right, oklch(97% 0.04 350 / 0.8), oklch(100% 0 0));
}

@media (min-width: 640px) {
  .modal__original {
    padding: var(--space-lg);
  }
}

.dark .modal__original,
html.dark .modal__original {
  background: linear-gradient(to right, oklch(20% 0.06 350 / 0.2), var(--color-slate-800));
  border-bottom-color: oklch(30% 0.08 350 / 0.3);
}

.modal__original-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.modal__original-time {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-gray-500);
}

.dark .modal__original-time,
html.dark .modal__original-time {
  color: var(--color-gray-400);
}

.modal__original-content {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-800);
}

.dark .modal__original-content,
html.dark .modal__original-content {
  color: var(--color-gray-200);
}

/* Thread messages container */
.modal__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg);
}

@media (min-width: 640px) {
  .modal__content {
    padding: var(--space-lg);
  }
}

.modal__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Thread message bubble */
.thread-message {
  display: flex;
  max-width: 85%;
}

@media (min-width: 640px) {
  .thread-message {
    max-width: 80%;
  }
}

.thread-message--user {
  margin-left: auto;
  justify-content: flex-end;
}

.thread-message--ai {
  margin-right: auto;
  justify-content: flex-start;
}

.thread-message__bubble {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-2xl);
}

@media (min-width: 640px) {
  .thread-message__bubble {
    padding: var(--space-md);
  }
}

.thread-message--user .thread-message__bubble {
  background: linear-gradient(135deg, oklch(97% 0.04 350), oklch(95% 0.06 350));
  border: 2px solid oklch(90% 0.08 350);
}

.dark .thread-message--user .thread-message__bubble,
html.dark .thread-message--user .thread-message__bubble {
  background: linear-gradient(135deg, oklch(30% 0.08 350 / 0.3), oklch(25% 0.06 350 / 0.3));
  border-color: oklch(50% 0.12 350 / 0.5);
}

.thread-message--ai .thread-message__bubble {
  background: linear-gradient(135deg, oklch(97% 0.04 220), oklch(95% 0.06 220));
  border: 2px solid oklch(90% 0.08 220);
}

.dark .thread-message--ai .thread-message__bubble,
html.dark .thread-message--ai .thread-message__bubble {
  background: linear-gradient(135deg, oklch(30% 0.08 220 / 0.3), oklch(25% 0.06 220 / 0.3));
  border-color: oklch(50% 0.12 220 / 0.5);
}

.thread-message__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.thread-message__author {
  font-size: var(--text-sm);
  font-weight: var(--font-black);
  color: var(--color-gray-900);
}

.dark .thread-message__author,
html.dark .thread-message__author {
  color: var(--color-gray-100);
}

.thread-message__content {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-800);
}

.dark .thread-message__content,
html.dark .thread-message__content {
  color: var(--color-gray-200);
}

.thread-message__time {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  margin-top: var(--space-xs);
}

.dark .thread-message__time,
html.dark .thread-message__time {
  color: var(--color-gray-400);
}

/* Empty thread state */
.thread-empty {
  text-align: center;
  padding: var(--space-xl) 0;
}

.thread-empty__card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, oklch(97% 0.04 220 / 0.9), oklch(97% 0.04 265 / 0.9));
  border-radius: var(--radius-2xl);
  padding: var(--space-lg);
  border: 2px solid oklch(90% 0.08 220);
  max-width: 28rem;
}

.dark .thread-empty__card,
html.dark .thread-empty__card {
  background: linear-gradient(135deg, oklch(20% 0.06 220 / 0.3), oklch(20% 0.06 265 / 0.3));
  border-color: oklch(50% 0.12 220 / 0.5);
}

.thread-empty__title {
  font-size: var(--text-lg);
  font-weight: var(--font-black);
  color: var(--color-gray-900);
  margin-bottom: var(--space-xs);
}

.dark .thread-empty__title,
html.dark .thread-empty__title {
  color: var(--color-gray-100);
}

.thread-empty__text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
}

.dark .thread-empty__text,
html.dark .thread-empty__text {
  color: var(--color-gray-400);
}

/* Reply form at bottom of modal */
.modal__footer {
  border-top: 2px solid oklch(90% 0.08 350);
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(to right, oklch(97% 0.02 350 / 0.5), oklch(100% 0 0));
}

@media (min-width: 640px) {
  .modal__footer {
    padding: var(--space-lg);
  }
}

.dark .modal__footer,
html.dark .modal__footer {
  border-top-color: oklch(50% 0.16 350 / 0.5);
  background: linear-gradient(to right, oklch(20% 0.06 350 / 0.2), var(--color-slate-900));
}

.thread-reply-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.thread-reply-form__textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 2px solid oklch(85% 0.08 350);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-solid);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  resize: none;
  transition: all var(--transition-fast);
}

.thread-reply-form__textarea:focus {
  outline: none;
  border-color: oklch(65% 0.18 350);
}

.dark .thread-reply-form__textarea,
html.dark .thread-reply-form__textarea {
  background-color: var(--color-slate-800);
  border-color: oklch(50% 0.12 350);
}

.dark .thread-reply-form__textarea:focus,
html.dark .thread-reply-form__textarea:focus {
  border-color: oklch(72% 0.16 350);
}

.thread-reply-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.thread-reply-form__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.thread-reply-form__checkbox-label:hover {
  color: oklch(55% 0.18 350);
}

.dark .thread-reply-form__checkbox-label,
html.dark .thread-reply-form__checkbox-label {
  color: var(--color-gray-300);
}

.dark .thread-reply-form__checkbox-label:hover,
html.dark .thread-reply-form__checkbox-label:hover {
  color: oklch(72% 0.16 350);
}

.thread-reply-form__checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: oklch(65% 0.18 350);
}

/* ==========================================================================
   Progress Bar (Header Stats)
   ========================================================================== */

.progress-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(to right, oklch(97% 0.04 350), oklch(97% 0.04 285));
  border-radius: var(--radius-xl);
  border: 2px solid oklch(90% 0.08 350);
}

.dark .progress-bar,
html.dark .progress-bar {
  background: linear-gradient(to right, oklch(20% 0.06 350 / 0.3), oklch(20% 0.06 285 / 0.3));
  border-color: oklch(50% 0.12 350 / 0.5);
}

.progress-bar__stat {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.progress-bar__label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dark .progress-bar__label,
html.dark .progress-bar__label {
  color: var(--color-gray-400);
}

.progress-bar__divider {
  width: 1px;
  height: 1.5rem;
  background-color: var(--color-gray-300);
}

.dark .progress-bar__divider,
html.dark .progress-bar__divider {
  background-color: var(--color-slate-600);
}

.progress-bar__track {
  width: 6rem;
  height: 0.5rem;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dark .progress-bar__track,
html.dark .progress-bar__track {
  background-color: var(--color-slate-700);
}

.progress-bar__fill {
  height: 100%;
  background: linear-gradient(to right, oklch(65% 0.18 350), oklch(60% 0.18 285));
  transition: width 0.5s ease;
}

/* Progress Bar Color Variants */
.progress-bar--sky {
  background: linear-gradient(to right, oklch(97% 0.02 220), oklch(97% 0.02 195));
  border-color: oklch(85% 0.08 220);
}

.dark .progress-bar--sky,
html.dark .progress-bar--sky {
  background: linear-gradient(to right, oklch(20% 0.04 220 / 0.3), oklch(20% 0.04 195 / 0.3));
  border-color: oklch(50% 0.08 220 / 0.5);
}

.progress-bar--pink {
  background: linear-gradient(to right, oklch(97% 0.04 350), oklch(97% 0.04 320));
  border-color: oklch(90% 0.08 350);
}

.dark .progress-bar--pink,
html.dark .progress-bar--pink {
  background: linear-gradient(to right, oklch(20% 0.06 350 / 0.3), oklch(20% 0.06 320 / 0.3));
  border-color: oklch(50% 0.12 350 / 0.5);
}

/* ==========================================================================
   Day Cards Container
   ========================================================================== */

.day-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ==========================================================================
   Landing Page Feature Cards
   ========================================================================== */

.landing-feature__icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--gradient-retro-rainbow);
  border: var(--border-retro) solid var(--color-shadow-light);
  border-radius: var(--radius-retro);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-light);
}

.dark .landing-feature__icon,
html.dark .landing-feature__icon {
  background: linear-gradient(135deg, oklch(75% 0.14 95), oklch(70% 0.16 350), oklch(70% 0.12 230));
  border-color: var(--color-border-dark-default);
  box-shadow: var(--shadow-retro-sm) var(--color-shadow-dark-default);
}

.landing-feature__title {
  font-size: var(--text-xl);
  font-weight: var(--font-black);
  color: var(--color-shadow-light);
  margin-bottom: var(--space-sm);
}

.dark .landing-feature__title,
html.dark .landing-feature__title {
  color: var(--color-gray-100);
}

.landing-feature__text {
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
}

.dark .landing-feature__text,
html.dark .landing-feature__text {
  color: var(--color-gray-300);
}

/* ==========================================================================
   Landing Page Steps
   ========================================================================== */

.landing-step {
  text-align: center;
}

.landing-step__icon {
  font-size: 4rem;
  margin-bottom: var(--space-md);
}

.landing-step__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

.dark .landing-step__title,
html.dark .landing-step__title {
  color: var(--color-gray-100);
}

.landing-step__text {
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
}

.dark .landing-step__text,
html.dark .landing-step__text {
  color: var(--color-gray-300);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.testimonial__author {
  display: flex;
  flex-direction: column;
}

.testimonial__name {
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.dark .testimonial__name,
html.dark .testimonial__name {
  color: var(--color-gray-100);
}

.testimonial__role {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: 0;
}

.dark .testimonial__role,
html.dark .testimonial__role {
  color: var(--color-gray-400);
}

.testimonial__quote {
  color: var(--color-gray-700);
  font-style: italic;
  line-height: var(--leading-relaxed);
  margin: 0;
}

.dark .testimonial__quote,
html.dark .testimonial__quote {
  color: var(--color-gray-300);
}

/* ==========================================================================
   Pricing Card
   ========================================================================== */

.landing-pricing {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.pricing-card {
  max-width: 32rem;
  margin: 0 auto;
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-light);
}

.dark .pricing-card,
html.dark .pricing-card {
  box-shadow: var(--shadow-retro-xl) var(--color-shadow-dark-default);
}

.pricing-card__header {
  margin-bottom: var(--space-lg);
}

.pricing-card__price {
  font-size: 4rem;
  font-weight: var(--font-black);
  background: linear-gradient(to right, oklch(55% 0.22 350), oklch(50% 0.22 285));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.dark .pricing-card__price,
html.dark .pricing-card__price {
  background: linear-gradient(to right, oklch(75% 0.2 350), oklch(75% 0.18 285));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-card__period {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-700);
  margin: 0;
}

.dark .pricing-card__period,
html.dark .pricing-card__period {
  color: var(--color-gray-300);
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  max-width: 20rem;
  margin: 0 auto var(--space-lg);
}

.pricing-card__feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-gray-700);
  margin-bottom: var(--space-sm);
}

.dark .pricing-card__feature,
html.dark .pricing-card__feature {
  color: var(--color-gray-300);
}

.pricing-card__check {
  font-size: var(--text-2xl);
}

.pricing-card__footer {
  padding-top: var(--space-md);
}

/* Landing Hero Extensions */
.landing-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.landing-hero__cta {
  padding-top: var(--space-xl);
}

.landing-hero__proof {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: 0;
}

.dark .landing-hero__proof,
html.dark .landing-hero__proof {
  color: var(--color-gray-400);
}

.landing-hero__proof-count {
  color: oklch(55% 0.22 350);
  font-weight: var(--font-bold);
}

.dark .landing-hero__proof-count,
html.dark .landing-hero__proof-count {
  color: oklch(75% 0.2 350);
}

.landing-hero__title--sm {
  font-size: var(--text-4xl);
}

@media (min-width: 640px) {
  .landing-hero__title--sm {
    font-size: var(--text-5xl);
  }
}

/* ==========================================================================
   Entries / Timeline Page
   ========================================================================== */

.entries-page {
  min-height: 100vh;
  background-color: var(--color-gray-50);
  padding: var(--space-xl) 0;
}

.dark .entries-page,
html.dark .entries-page {
  background-color: var(--color-gray-900);
}

.entries-page__container {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 640px) {
  .entries-page__container {
    padding: 0 var(--space-lg);
  }
}

.entries-page__header {
  margin-bottom: var(--space-3xl);
}

.entries-page__title {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-800);
}

.dark .entries-page__title,
html.dark .entries-page__title {
  color: var(--color-gray-200);
}

/* Timeline */
.timeline {
  position: relative;
}

.timeline__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-gray-200);
}

.dark .timeline__line,
html.dark .timeline__line {
  background-color: var(--color-gray-700);
}

.timeline__entry {
  position: relative;
  padding-bottom: var(--space-3xl);
  display: flex;
}

.timeline__dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.dark .timeline__dot,
html.dark .timeline__dot {
  background-color: var(--color-sky-400);
}

.timeline__content {
  width: 50%;
}

.timeline__content--left {
  padding-right: var(--space-sm);
}

.timeline__content--right {
  margin-left: 50%;
  padding-left: var(--space-sm);
}

.timeline__date {
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.dark .timeline__date,
html.dark .timeline__date {
  color: var(--color-gray-400);
}

.timeline__date--right {
  text-align: left;
  justify-content: flex-start;
}

.timeline__date--left {
  text-align: right;
  justify-content: flex-end;
}

.timeline__date-dot {
  color: var(--color-gray-400);
}

.dark .timeline__date-dot,
html.dark .timeline__date-dot {
  color: var(--color-gray-500);
}

/* Entry Card */
.entry-card {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  position: relative;
  transition: border-color var(--transition-fast);
}

.entry-card:hover {
  border-color: var(--color-gray-300);
}

.dark .entry-card,
html.dark .entry-card {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark .entry-card:hover,
html.dark .entry-card:hover {
  border-color: var(--color-gray-600);
}

.entry-card__content {
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
}

.dark .entry-card__content,
html.dark .entry-card__content {
  color: var(--color-gray-300);
}

.entry-card__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.entry-card__meta-item {
  display: flex;
  flex-direction: column;
}

.entry-card__meta-label {
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-gray-500);
}

.dark .entry-card__meta-label,
html.dark .entry-card__meta-label {
  color: var(--color-gray-400);
}

.entry-card__meta-value {
  margin-top: var(--space-xs);
  color: var(--color-gray-700);
}

.dark .entry-card__meta-value,
html.dark .entry-card__meta-value {
  color: var(--color-gray-300);
}

.entry-card__divider {
  border-top: 1px solid var(--color-gray-100);
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
}

.dark .entry-card__divider,
html.dark .entry-card__divider {
  border-top-color: var(--color-gray-700);
}

.entry-card__weather {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.dark .entry-card__weather,
html.dark .entry-card__weather {
  background-color: var(--color-gray-700);
}

.entry-card__badge {
  margin-top: var(--space-md);
}

.entry-card__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-100);
}

.dark .entry-card__actions,
html.dark .entry-card__actions {
  border-top-color: var(--color-gray-700);
}

.entry-card__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.entry-card__link:hover {
  color: var(--color-primary-hover);
}

.dark .entry-card__link,
html.dark .entry-card__link {
  color: var(--color-sky-400);
}

.dark .entry-card__link:hover,
html.dark .entry-card__link:hover {
  color: var(--color-sky-300);
}

.entry-card__link-icon {
  width: 1rem;
  height: 1rem;
  margin-right: var(--space-sm);
}

/* New Entry Button */
.new-entry-btn {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
}

.new-entry-btn__link {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-primary);
  color: white;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-weight: var(--font-medium);
  transition: background-color var(--transition-fast);
}

.new-entry-btn__link:hover {
  background-color: var(--color-primary-hover);
}

.dark .new-entry-btn__link,
html.dark .new-entry-btn__link {
  background-color: var(--color-sky-600);
}

.dark .new-entry-btn__link:hover,
html.dark .new-entry-btn__link:hover {
  background-color: var(--color-sky-700);
}

.new-entry-btn__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: var(--space-sm);
}

/* ==========================================================================
   Journals Page Layout
   ========================================================================== */

.journals-layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .journals-layout {
    flex-direction: row;
  }
}

.journals-layout__main {
  width: 100%;
  padding-right: 0;
}

@media (min-width: 1024px) {
  .journals-layout__main {
    width: 66.666667%;
    padding-right: var(--space-xl);
  }
}

.journals-layout__sidebar {
  display: none;
  padding: 0 var(--space-md);
}

@media (min-width: 1024px) {
  .journals-layout__sidebar {
    display: block;
    width: 33.333333%;
  }
}

/* Journal Preview Card */
.journal-preview__header {
  margin-bottom: var(--space-md);
}

.journal-preview__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-700);
  margin: 0;
}

.dark .journal-preview__title,
html.dark .journal-preview__title {
  color: var(--color-gray-300);
}

.journal-preview__count {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0;
}

.dark .journal-preview__count,
html.dark .journal-preview__count {
  color: var(--color-gray-400);
}

.journal-preview__entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.journal-preview__entry {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark .journal-preview__entry,
html.dark .journal-preview__entry {
  color: var(--color-gray-400);
}

/* Journal Header */
.journal-header {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  max-width: 80rem;
  margin: 0 auto;
}

.journal-header__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

@media (min-width: 640px) {
  .journal-header__title {
    font-size: var(--text-4xl);
  }
}

.dark .journal-header__title,
html.dark .journal-header__title {
  color: var(--color-gray-100);
}

.journal-header__subtitle {
  margin-top: var(--space-sm);
  font-size: var(--text-xl);
  color: var(--color-gray-500);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.dark .journal-header__subtitle,
html.dark .journal-header__subtitle {
  color: var(--color-gray-400);
}

/* Journal Entries List */
.journal-entries {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 640px) {
  .journal-entries {
    padding: 0 var(--space-lg) var(--space-xl);
  }
}

.entry-card__time {
  margin-bottom: var(--space-md);
}

/* Entry Card Multi Actions */
.entry-card__actions--multi {
  display: flex;
  gap: var(--space-md);
  background-color: var(--color-gray-50);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
}

.dark .entry-card__actions--multi,
html.dark .entry-card__actions--multi {
  background-color: var(--color-gray-700);
}

.entry-card__link--danger {
  color: var(--color-red-600);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.entry-card__link--danger:hover {
  color: var(--color-red-800);
}

.dark .entry-card__link--danger,
html.dark .entry-card__link--danger {
  color: var(--color-red-400);
}

.dark .entry-card__link--danger:hover,
html.dark .entry-card__link--danger:hover {
  color: var(--color-red-300);
}

/* Timeline Year Label */
.timeline__year {
  position: absolute;
  left: calc(50% + 2rem);
  top: 0;
}

.entry-card--flat {
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.entry-card--flat:hover {
  border-color: transparent;
}

/* ==========================================================================
   Journal Entry Component
   ========================================================================== */

.journal-entry {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--color-surface-solid);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.dark .journal-entry,
html.dark .journal-entry {
  background-color: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.journal-entry__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.journal-entry__content {
  flex: 1;
}

.journal-entry__text {
  color: var(--color-gray-800);
  white-space: pre-wrap;
  margin: 0;
}

.dark .journal-entry__text,
html.dark .journal-entry__text {
  color: var(--color-gray-200);
}

.journal-entry__time {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin: var(--space-xs) 0 0;
}

.dark .journal-entry__time,
html.dark .journal-entry__time {
  color: var(--color-gray-400);
}

.journal-entry__delete {
  padding: var(--space-xs);
  background: transparent;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.journal-entry__delete:hover {
  color: var(--color-red-500);
}

.dark .journal-entry__delete,
html.dark .journal-entry__delete {
  color: var(--color-gray-500);
}

.dark .journal-entry__delete:hover,
html.dark .journal-entry__delete:hover {
  color: var(--color-red-400);
}

/* Journal Entry Form */
.journal-entry-form {
  margin-top: var(--space-sm);
}

/* ==========================================================================
   Journal Panel Component
   ========================================================================== */

.journal-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-gray-50);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: var(--z-10);
  transform: translateX(0);
  transition: transform var(--transition-slow);
}

@media (min-width: 768px) {
  .journal-panel {
    width: 24rem;
  }
}

.dark .journal-panel,
html.dark .journal-panel {
  background-color: var(--color-gray-900);
}

.journal-panel__header {
  padding: var(--space-md);
  background-color: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dark .journal-panel__header,
html.dark .journal-panel__header {
  background-color: var(--color-gray-800);
}

.journal-panel__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
  margin: 0;
}

.dark .journal-panel__title,
html.dark .journal-panel__title {
  color: var(--color-gray-100);
}

.journal-panel__close {
  display: block;
  padding: var(--space-xs);
  background: transparent;
  border: none;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: color var(--transition-fast);
}

@media (min-width: 768px) {
  .journal-panel__close {
    display: none;
  }
}

.journal-panel__close:hover {
  color: var(--color-gray-700);
}

.dark .journal-panel__close,
html.dark .journal-panel__close {
  color: var(--color-gray-400);
}

.dark .journal-panel__close:hover,
html.dark .journal-panel__close:hover {
  color: var(--color-gray-300);
}

.journal-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.journal-panel__entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.journal-panel__footer {
  padding: var(--space-md);
  background-color: var(--color-surface-solid);
  border-top: 1px solid var(--color-gray-200);
}

.dark .journal-panel__footer,
html.dark .journal-panel__footer {
  background-color: var(--color-gray-800);
  border-top-color: var(--color-gray-700);
}

.journal-panel__toggle {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  display: block;
  padding: var(--space-sm);
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: var(--z-20);
  transition: background-color var(--transition-fast);
}

@media (min-width: 768px) {
  .journal-panel__toggle {
    display: none;
  }
}

.journal-panel__toggle:hover {
  background-color: var(--color-primary-hover);
}

.dark .journal-panel__toggle,
html.dark .journal-panel__toggle {
  background-color: var(--color-sky-600);
}

.dark .journal-panel__toggle:hover,
html.dark .journal-panel__toggle:hover {
  background-color: var(--color-sky-700);
}

/* ==========================================================================
   Previous Days Toggle (Collapsed by default)
   ========================================================================== */

.previous-days-toggle {
  padding: var(--space-xs) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.previous-days-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.previous-days-toggle__btn:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-800);
}

.dark .previous-days-toggle__btn,
html.dark .previous-days-toggle__btn {
  color: var(--color-gray-400);
}

.dark .previous-days-toggle__btn:hover,
html.dark .previous-days-toggle__btn:hover {
  background: var(--color-gray-800);
  color: var(--color-gray-200);
}

.previous-days-toggle__icon {
  transition: transform var(--transition-fast);
}

.previous-days-toggle__btn[aria-expanded="true"] .previous-days-toggle__icon {
  transform: rotate(180deg);
}

.previous-days-content {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.previous-days-content[hidden] {
  display: none;
}

/* ==========================================================================
   Today Section - Full Screen Calendar View
   ========================================================================== */

.today-section {
  position: relative;
  height: calc(100vh - 70px - 140px); /* viewport - header - form - toggle */
  margin: 0;
  overflow: hidden;
}

.today-section__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.today-section__layout {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  min-height: 1440px; /* 24 hours × 60px per hour */
  
  /* Full 24-hour day/night cycle gradient (midnight to midnight) */
  background: linear-gradient(
    180deg,
    oklch(25% 0.02 260) 0%,       /* 12 AM - deep night blue */
    oklch(22% 0.025 270) 8%,      /* 2 AM - darkest hour */
    oklch(30% 0.03 280) 17%,      /* 4 AM - pre-dawn */
    oklch(85% 0.04 50) 25%,       /* 6 AM - sunrise warm orange/pink */
    oklch(92% 0.03 80) 33%,       /* 8 AM - morning golden */
    oklch(96% 0.02 220) 42%,      /* 10 AM - late morning sky blue */
    oklch(98% 0.015 215) 50%,     /* 12 PM - bright midday */
    oklch(96% 0.02 210) 58%,      /* 2 PM - afternoon blue */
    oklch(94% 0.025 200) 67%,     /* 4 PM - late afternoon */
    oklch(88% 0.04 40) 75%,       /* 6 PM - sunset golden/orange */
    oklch(70% 0.05 350) 83%,      /* 8 PM - dusk pink/purple */
    oklch(40% 0.03 280) 92%,      /* 10 PM - twilight */
    oklch(25% 0.02 260) 100%      /* 12 AM - back to night */
  );
}

/* Dark mode gradient - full 24-hour cycle */
.dark .today-section__layout,
html.dark .today-section__layout {
  background: linear-gradient(
    180deg,
    oklch(8% 0.02 260) 0%,        /* 12 AM - deep night */
    oklch(6% 0.025 270) 8%,       /* 2 AM - darkest */
    oklch(10% 0.03 280) 17%,      /* 4 AM - pre-dawn */
    oklch(25% 0.04 50) 25%,       /* 6 AM - sunrise */
    oklch(30% 0.03 80) 33%,       /* 8 AM - morning */
    oklch(20% 0.02 220) 42%,      /* 10 AM - late morning */
    oklch(22% 0.015 215) 50%,     /* 12 PM - midday */
    oklch(20% 0.02 210) 58%,      /* 2 PM - afternoon */
    oklch(18% 0.025 200) 67%,     /* 4 PM - late afternoon */
    oklch(22% 0.04 40) 75%,       /* 6 PM - sunset */
    oklch(15% 0.05 350) 83%,      /* 8 PM - dusk */
    oklch(10% 0.03 280) 92%,      /* 10 PM - twilight */
    oklch(8% 0.02 260) 100%       /* 12 AM - back to night */
  );
}

.today-section__content {
  position: relative;
  min-height: 1440px; /* 24 hours × 60px per hour */
  padding: var(--space-xl) var(--space-lg);
}

/* Date header */
.today-section__date {
  position: absolute;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-600);
  background: oklch(100% 0 0 / 0.75);
  backdrop-filter: blur(4px);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  white-space: nowrap;
  z-index: var(--z-10);
}

.dark .today-section__date,
html.dark .today-section__date {
  color: var(--color-gray-300);
  background: oklch(20% 0.02 250 / 0.8);
}

/* Messages container - for absolute positioning */
.today-section__messages {
  position: absolute;
  top: 0;
  left: var(--space-lg);
  right: var(--space-lg);
  bottom: 0;
}

/* Empty state */
.today-section__empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* ==========================================================================
   Message Card - Calendar Style (Google Calendar-like)
   ========================================================================== */

.message--calendar {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 500px;
  
  /* Override any timeline gap classes - calendar uses absolute positioning */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  
  /* Google Calendar event style */
  background: oklch(100% 0 0 / 0.88);
  backdrop-filter: blur(4px);
  border-left: 3px solid oklch(65% 0.20 350);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
  
  /* Smooth transitions */
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* Hide timeline hour markers in calendar view (time is shown by position) */
.today-section__messages .timeline-hour-marker {
  display: none;
}

.message--calendar:hover {
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.12);
  transform: translateX(2px);
}

/* Dark mode message cards */
.dark .message--calendar,
html.dark .message--calendar {
  background: oklch(22% 0.02 250 / 0.9);
  border-left-color: oklch(70% 0.15 350);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
}

.dark .message--calendar:hover,
html.dark .message--calendar:hover {
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.4);
}

/* Message content styling for calendar view */
.message--calendar .message__content {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
  margin: 0;
}

.message--calendar .message__content p {
  margin: 0;
}

.dark .message--calendar .message__content,
html.dark .message--calendar .message__content {
  color: var(--color-gray-200);
}

/* Hide unnecessary elements in calendar view */
.message--calendar .message__meta,
.message--calendar .message__actions,
.message--calendar .message__avatar-wrap {
  display: none;
}

.message--calendar .message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.message--calendar .message__time {
  display: flex;
  align-items: center;
}

.message--calendar .message__title {
  max-width: none;
}

.message--calendar .message__title-input {
  text-align: left;
  font-size: 0.85rem;
  color: var(--color-gray-600);
}

.dark .message--calendar .message__title-input,
html.dark .message--calendar .message__title-input {
  color: var(--color-gray-300);
}

/* Simplify layout for calendar view */
.message--calendar .message__inner,
.message--calendar .message__layout {
  padding: 0;
  margin: 0;
  gap: 0;
}

/* Show actions on hover */
.message--calendar:hover .message__actions {
  display: flex;
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
}

/* ==========================================================================
   Time Marks - Full Height Calendar Style
   ========================================================================== */

.time-marks {
  position: relative;
  min-height: var(--day-base-height);
}

.time-marks__hour {
  position: absolute;
  opacity: 0.5;
  transition: opacity var(--transition-base);
  /* Position is set by JavaScript for accurate alignment with messages */
  top: 0;
}

/* No media query needed - positioning handled by inline styles */

.time-marks--left {
  align-items: flex-end;
  padding-right: var(--space-sm);
  border-right: 1px solid oklch(50% 0 0 / 0.1);
}

.time-marks--right {
  align-items: flex-start;
  padding-left: var(--space-sm);
  border-left: 1px solid oklch(50% 0 0 / 0.1);
}

.dark .time-marks--left,
html.dark .time-marks--left {
  border-right-color: oklch(50% 0 0 / 0.15);
}

.dark .time-marks--right,
html.dark .time-marks--right {
  border-left-color: oklch(50% 0 0 / 0.15);
}

.time-marks--left .time-marks__hour {
  right: var(--space-sm);
}

.time-marks--right .time-marks__hour {
  left: var(--space-sm);
}

.time-marks__hour--current {
  opacity: 1;
}

.time-marks__label {
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.time-marks__hour--current .time-marks__label {
  font-weight: var(--font-bold);
  color: oklch(45% 0.10 350);
  background: oklch(98% 0.03 350 / 0.8);
}

/* Dark mode time marks */
.dark .time-marks__label,
html.dark .time-marks__label {
  color: var(--color-gray-500);
}

.dark .time-marks__hour--current .time-marks__label,
html.dark .time-marks__hour--current .time-marks__label {
  color: oklch(80% 0.08 350);
  background: oklch(25% 0.04 350 / 0.8);
}

/* Hide time marks on mobile */
@media (max-width: 768px) {
  .today-section__layout {
    grid-template-columns: 1fr;
  }
  
  .time-marks {
    display: none;
  }
  
  .today-section__content {
    padding: var(--space-lg) var(--space-md);
  }
  
  .today-section__messages {
    left: var(--space-sm);
    right: var(--space-sm);
  }
  
  .message--calendar {
    max-width: none;
  }
}

/* ==========================================================================
   Now Line - Dashed and Subtle
   ========================================================================== */

.now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  z-index: var(--z-10);
  pointer-events: auto;
  
  /* Dashed line - subtle */
  border-top: 1px dashed oklch(55% 0.10 350 / 0.5);
}

/* Create button on now line */
.now-line__create-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px 10px;
  border: none;
  border-radius: var(--radius-full);
  background: oklch(98% 0.02 350);
  color: oklch(50% 0.10 350);
  font-size: 11px;
  font-weight: var(--font-medium);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.1);
  white-space: nowrap;
}

.now-line__create-btn:hover {
  background: oklch(95% 0.06 350);
  box-shadow: 0 2px 8px oklch(55% 0.15 350 / 0.25);
  gap: var(--space-xs);
}

.now-line__create-btn:active {
  transform: translateX(-50%) translateY(-50%) scale(0.96);
}

.now-line__create-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.now-line__create-btn:hover .now-line__create-icon {
  transform: rotate(90deg);
}

/* Label hidden by default, shown on hover */
.now-line__create-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}

.now-line__create-btn:hover .now-line__create-label {
  max-width: 80px;
  opacity: 1;
}

/* Dark mode now line */
.dark .now-line,
html.dark .now-line {
  border-top-color: oklch(60% 0.08 350 / 0.5);
}

.dark .now-line__create-btn,
html.dark .now-line__create-btn {
  background: oklch(25% 0.03 350);
  color: oklch(75% 0.08 350);
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.3);
}

.dark .now-line__create-btn:hover,
html.dark .now-line__create-btn:hover {
  background: oklch(30% 0.06 350);
  box-shadow: 0 2px 8px oklch(55% 0.10 350 / 0.3);
}

/* When outside waking hours */
.now-line--clamped {
  opacity: 0.4;
}

/* Mobile now line */
@media (max-width: 768px) {
  .now-line {
    left: var(--space-sm);
    right: var(--space-sm);
  }
  
  .now-line__create-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
  
  .now-line__create-icon {
    width: 12px;
    height: 12px;
  }
}

/* ==========================================================================
   Full-Screen Calendar View
   ========================================================================== */

/* Body modifier for full-screen calendar - prevents double scrollbar */
.page--fullscreen-calendar {
  overflow: hidden;
  background: transparent !important; /* Override body gradient */
}

.page--fullscreen-calendar .page__wrapper {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent; /* Remove wrapper background */
}

/* Calendar view container - fills viewport below header and film strip */
.calendar-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: 145px; /* Account for fixed header + film strip */
  overflow: hidden;
  --day-base-height: 1440px;
  --day-height: var(--day-base-height);
}

@media (min-width: 640px) {
  .calendar-view {
    padding-top: 155px;
  }
}

/* ==========================================================================
   Calendar View: Slide-out Sidebar for Previous Days
   ========================================================================== */

.calendar-view__sidebar-toggle {
  position: fixed;
  top: 70px;
  left: var(--space-sm);
  z-index: var(--z-40);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  background: oklch(100% 0 0 / 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) {
  .calendar-view__sidebar-toggle {
    top: 80px;
  }
}

.calendar-view__sidebar-toggle:hover {
  background: var(--color-gray-50);
  box-shadow: var(--shadow-md);
}

.dark .calendar-view__sidebar-toggle,
html.dark .calendar-view__sidebar-toggle {
  color: var(--color-gray-300);
  background: oklch(20% 0.02 250 / 0.9);
  border-color: var(--color-gray-700);
}

.dark .calendar-view__sidebar-toggle:hover,
html.dark .calendar-view__sidebar-toggle:hover {
  background: oklch(25% 0.02 250 / 0.95);
}

.calendar-view__sidebar-toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.calendar-view__sidebar-toggle[aria-expanded="true"] .calendar-view__sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* Sidebar overlay */
.calendar-view__sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-40);
  background: oklch(0% 0 0 / 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.calendar-view__sidebar-overlay--visible {
  opacity: 1;
  visibility: visible;
}

/* Sidebar panel */
.calendar-view__sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-50);
  width: 320px;
  max-width: 85vw;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.calendar-view__sidebar--open {
  transform: translateX(0);
}

.dark .calendar-view__sidebar,
html.dark .calendar-view__sidebar {
  background: var(--color-gray-900);
  border-right-color: var(--color-gray-700);
}

/* Sidebar header */
.calendar-view__sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.calendar-view__sidebar-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-800);
}

.dark .calendar-view__sidebar-title,
html.dark .calendar-view__sidebar-title {
  color: var(--color-gray-100);
}

.calendar-view__sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-gray-500);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calendar-view__sidebar-close:hover {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
}

.dark .calendar-view__sidebar-close:hover,
html.dark .calendar-view__sidebar-close:hover {
  color: var(--color-gray-200);
  background: var(--color-gray-800);
}

/* Sidebar content - scrollable */
.calendar-view__sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

/* Sidebar day cards */
.calendar-view__sidebar-days {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Load more button in sidebar */
.calendar-view__sidebar-load-more {
  margin-top: var(--space-md);
  text-align: center;
}

/* ==========================================================================
   Calendar View: Main Day Area
   ========================================================================== */

.calendar-view__day {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Light mode: midnight color to extend past timeline */
  background-color: oklch(75% 0.06 250);
}

.dark .calendar-view__day,
html.dark .calendar-view__day {
  /* Dark mode: midnight color to extend past timeline */
  background-color: oklch(16% 0.04 250);
}

/* Timeline grid - full width, gradient background */
.calendar-view__timeline {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  grid-template-rows: auto; /* Explicit auto sizing for the row */
  align-items: start; /* Ensure all columns start at same position */
  min-height: var(--day-height);
  width: 100%;
  
  /* Cool & Calm gradient - fixed to base height, extends with midnight color */
  background: 
    linear-gradient(
      180deg,
      oklch(75% 0.06 250) 0%,      /* 12 AM - deep slate blue */
      oklch(70% 0.07 255) 12%,     /* 3 AM - darker slate */
      oklch(80% 0.06 260) 20%,     /* 5 AM - pre-dawn periwinkle */
      oklch(90% 0.05 240) 27%,     /* 6:30 AM - soft morning blue */
      oklch(95% 0.04 230) 38%,     /* 9 AM - light sky blue */
      oklch(98% 0.025 220) 50%,    /* 12 PM - bright clean blue-white */
      oklch(95% 0.04 225) 62%,     /* 3 PM - soft afternoon blue */
      oklch(88% 0.05 250) 73%,     /* 5:30 PM - warm periwinkle */
      oklch(78% 0.07 270) 83%,     /* 8 PM - dusty violet-blue */
      oklch(72% 0.06 260) 92%,     /* 10 PM - deep lavender-slate */
      oklch(75% 0.06 250) 100%     /* 12 AM - deep slate blue */
    );
  background-size: 100% var(--day-base-height);
  background-repeat: no-repeat;
  background-color: oklch(75% 0.06 250); /* Extend midnight color beyond 24h */
}

/* Dark mode gradient - rich blue tones, brighter */
.dark .calendar-view__timeline,
html.dark .calendar-view__timeline {
  background: 
    linear-gradient(
      180deg,
      oklch(16% 0.04 250) 0%,      /* 12 AM - dark blue */
      oklch(14% 0.05 255) 12%,     /* 3 AM - darkest */
      oklch(19% 0.04 260) 20%,     /* 5 AM - pre-dawn */
      oklch(26% 0.05 240) 27%,     /* 6:30 AM - soft morning */
      oklch(32% 0.04 230) 38%,     /* 9 AM - light blue tint */
      oklch(38% 0.03 220) 50%,     /* 12 PM - brightest point */
      oklch(32% 0.04 225) 62%,     /* 3 PM - afternoon */
      oklch(24% 0.05 250) 73%,     /* 5:30 PM - early evening */
      oklch(18% 0.05 270) 83%,     /* 8 PM - dusk violet */
      oklch(15% 0.04 260) 92%,     /* 10 PM - late evening */
      oklch(16% 0.04 250) 100%     /* 12 AM - dark blue */
    );
  background-size: 100% var(--day-base-height);
  background-repeat: no-repeat;
  background-color: oklch(16% 0.04 250); /* Extend midnight color beyond 24h */
}

/* Content area */
.calendar-view__content {
  position: relative;
  min-height: var(--day-height);
  padding: var(--space-xl) var(--space-md);
}

@media (min-width: 640px) {
  .calendar-view__content {
    padding: var(--space-xl) var(--space-lg);
  }
}

/* Date header */
.calendar-view__date {
  position: sticky;
  top: 5rem; /* Below fixed header */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-600);
  background: oklch(100% 0 0 / 0.85);
  backdrop-filter: blur(8px);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  white-space: nowrap;
  z-index: var(--z-sticky);
  text-align: center;
  margin: 0 auto var(--space-lg);
  width: fit-content;
  gap: var(--space-xs);
}

.calendar-view__date-content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.calendar-view__date-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.calendar-view__date-input {
  width: auto;
  border: 1px solid transparent;
  background: transparent;
  font-weight: var(--font-black);
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: var(--tracking-tight);
  padding: 0;
}

.calendar-view__date-input::placeholder {
  color: var(--color-gray-500);
}

.calendar-view__date-input:focus {
  outline: none;
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-solid);
  padding: 2px var(--space-xs);
}

.dark .calendar-view__date-input,
html.dark .calendar-view__date-input {
  color: var(--color-gray-100);
}

.dark .calendar-view__date-input:focus,
html.dark .calendar-view__date-input:focus {
  border-color: var(--color-border-dark-default);
  background-color: var(--color-surface);
}


.calendar-view__date-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gray-200);
  background: transparent;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calendar-view__date-edit-btn:hover {
  color: var(--color-gray-700);
  background-color: var(--color-gray-100);
}

.calendar-view__date-edit-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.calendar-view__date-input {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.6rem;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-700);
  background: oklch(100% 0 0 / 0.9);
  min-width: 140px;
}

.calendar-view__date-input:focus {
  outline: none;
  border-color: var(--color-gray-400);
}

@media (min-width: 640px) {
  .calendar-view__date {
    top: 5.5rem; /* Slightly more space on larger screens */
  }
}

.dark .calendar-view__date,
html.dark .calendar-view__date {
  color: var(--color-gray-300);
  background: oklch(20% 0.02 250 / 0.85);
}

.dark .calendar-view__date-edit-btn,
html.dark .calendar-view__date-edit-btn {
  border-color: var(--color-slate-600);
  color: var(--color-gray-300);
}

.dark .calendar-view__date-edit-btn:hover,
html.dark .calendar-view__date-edit-btn:hover {
  color: var(--color-gray-100);
  background-color: var(--color-slate-700);
}

.dark .calendar-view__date-input,
html.dark .calendar-view__date-input {
  border-color: var(--color-slate-600);
  background: oklch(20% 0.02 250 / 0.95);
  color: var(--color-gray-100);
}

.dark .calendar-view__date-input:focus,
html.dark .calendar-view__date-input:focus {
  border-color: var(--color-gray-400);
}

/* Messages container */
.calendar-view__messages {
  position: absolute;
  top: 60px; /* Below sticky date */
  left: var(--space-md);
  right: var(--space-md);
}

@media (min-width: 640px) {
  .calendar-view__messages {
    left: var(--space-lg);
    right: var(--space-lg);
    top: 70px;
  }
}

/* Empty state */
.calendar-view__empty {
  position: absolute;
  top: 200px; /* Position below date header */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 1;
}

/* ==========================================================================
   Calendar View: Time Marks Inside Content (shares coordinate system with messages)
   ========================================================================== */

.calendar-view__time-marks {
  position: absolute;
  top: 60px; /* Same as .calendar-view__messages */
  bottom: 0;
  width: 50px;
  pointer-events: none;
}

@media (min-width: 640px) {
  .calendar-view__time-marks {
    top: 70px; /* Same as .calendar-view__messages on desktop */
  }
}

.calendar-view__time-marks--left {
  left: -50px; /* Position in left grid column */
}

.calendar-view__time-marks--right {
  right: -50px; /* Position in right grid column */
}

.calendar-view__time-marks .time-marks__hour {
  position: absolute;
  opacity: 0.5;
  transition: opacity var(--transition-base);
  /* Position is set by JavaScript */
}

.calendar-view__time-marks--left .time-marks__hour {
  right: var(--space-sm);
  text-align: right;
}

.calendar-view__time-marks--right .time-marks__hour {
  left: var(--space-sm);
  text-align: left;
}

.calendar-view__time-marks .time-marks__hour--current {
  opacity: 1;
}

/* ==========================================================================
   Calendar View: Grid Column Time Marks (just borders, no labels)
   ========================================================================== */

.calendar-view__timeline .time-marks {
  min-height: var(--day-height);
  align-self: stretch;
  background: transparent;
}

.calendar-view__timeline .time-marks--left {
  background: transparent;
  border-right: 1px solid oklch(50% 0 0 / 0.15);
}

.calendar-view__timeline .time-marks--right {
  background: transparent;
  border-left: 1px solid oklch(50% 0 0 / 0.15);
}

/* ==========================================================================
   Calendar View: Fixed Form at Bottom
   ========================================================================== */

.calendar-view__form {
  flex-shrink: 0;
  position: relative;
  z-index: var(--z-30);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 10px oklch(0% 0 0 / 0.05);
  padding: var(--space-sm) var(--space-md);
}

@media (min-width: 640px) {
  .calendar-view__form {
    padding: var(--space-md) var(--space-lg);
  }
}

.dark .calendar-view__form,
html.dark .calendar-view__form {
  background: var(--color-gray-900);
  border-top-color: var(--color-gray-700);
  box-shadow: 0 -2px 10px oklch(0% 0 0 / 0.2);
}

/* ==========================================================================
   Calendar View: Inline Editor (appears below now line)
   ========================================================================== */

.calendar-view__editor {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--space-md) * 2);
  max-width: 600px;
  z-index: var(--z-30);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 
    0 4px 20px oklch(0% 0 0 / 0.12),
    0 0 0 1px oklch(0% 0 0 / 0.05);
  padding: var(--space-sm);
  animation: editor-appear 0.2s ease-out forwards;
  max-height: 50vh;
  overflow-y: auto;
}

@keyframes editor-appear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Hidden state */
.calendar-view__editor--hidden {
  display: none !important;
}

/* Visible state - must override hidden */
.calendar-view__editor--visible {
  display: block !important;
}

/* Fullscreen mode - reset container to allow fixed positioning to work */
.has-fullscreen-editor .calendar-view__editor {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  max-height: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  animation: none;
  overflow: visible;
  z-index: auto;
}

/* Dark mode editor */
.dark .calendar-view__editor,
html.dark .calendar-view__editor {
  background: var(--color-gray-900);
  box-shadow: 
    0 4px 20px oklch(0% 0 0 / 0.4),
    0 0 0 1px oklch(100% 0 0 / 0.05);
}

/* Tablet+ */
@media (min-width: 640px) {
  .calendar-view__editor {
    padding: var(--space-md);
  }
}

/* Mobile editor adjustments */
@media (max-width: 768px) {
  .calendar-view__editor {
    width: calc(100% - var(--space-sm) * 2);
    bottom: var(--space-sm);
    border-radius: var(--radius-md);
  }
}

/* ==========================================================================
   Calendar View: Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .calendar-view__timeline {
    grid-template-columns: 1fr;
  }
  
  .calendar-view__timeline .time-marks {
    display: none;
  }
  
  .calendar-view__content {
    padding: var(--space-lg) var(--space-sm);
  }
  
  .calendar-view__messages {
    left: var(--space-sm);
    right: var(--space-sm);
  }
}

/* ==========================================================================
   Calendar View: Message Cards (Calendar Style)
   ========================================================================== */

.calendar-view__messages .message--calendar {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 600px;
  
  /* Override any timeline gap classes */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  
  /* Calendar event style */
  background: oklch(100% 0 0 / 0.92);
  backdrop-filter: blur(8px);
  border-left: 3px solid oklch(65% 0.20 350);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.08);
  
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.calendar-view__messages .message--calendar:hover {
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.12);
  transform: translateX(2px);
}

.dark .calendar-view__messages .message--calendar,
html.dark .calendar-view__messages .message--calendar {
  background: oklch(22% 0.02 250 / 0.92);
  border-left-color: oklch(70% 0.15 350);
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.3);
}

.dark .calendar-view__messages .message--calendar:hover,
html.dark .calendar-view__messages .message--calendar:hover {
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.4);
}

/* Hide unnecessary elements in calendar view (desktop) */
.calendar-view__messages .message--calendar .message__meta,
.calendar-view__messages .message--calendar .message__actions,
.calendar-view__messages .message--calendar .message__avatar-wrap {
  display: none;
}

/* Desktop: keep header visible for titles */
@media (min-width: 769px) {
  .calendar-view__messages .message--calendar .message__header {
    display: flex;
    margin-bottom: var(--space-xs);
  }

  .calendar-view__messages .message--calendar .message__meta {
    display: none;
  }
}

/* Mobile: show only time/title, hide other header elements */
@media (max-width: 768px) {
  .calendar-view__messages .message--calendar .message__header {
    display: flex;
    margin-bottom: var(--space-xs);
  }
  
  .calendar-view__messages .message--calendar .message__meta {
    display: none;
  }
  
  .calendar-view__messages .message--calendar .message__time {
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-gray-500);
  }
  
  .dark .calendar-view__messages .message--calendar .message__time,
  html.dark .calendar-view__messages .message--calendar .message__time {
    color: var(--color-gray-400);
  }
}

/* Show actions on hover */
.calendar-view__messages .message--calendar:hover .message__actions {
  display: flex;
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
}

/* Simplify layout for calendar view */
.calendar-view__messages .message--calendar .message__inner,
.calendar-view__messages .message--calendar .message__layout {
  padding: 0;
  margin: 0;
  gap: 0;
}

/* Message content */
.calendar-view__messages .message--calendar .message__content {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
  margin: 0;
}

.calendar-view__messages .message--calendar .message__content p {
  margin: 0;
}

.dark .calendar-view__messages .message--calendar .message__content,
html.dark .calendar-view__messages .message--calendar .message__content {
  color: var(--color-gray-200);
}

/* Hide timeline hour markers in calendar view */
.calendar-view__messages .timeline-hour-marker {
  display: none;
}

/* ==========================================================================
   Main Content Wrapper - Mode Classes
   ========================================================================== */

#main_content {
  height: 100%;
}

/* ==========================================================================
   Log View - Previous Days List
   ========================================================================== */

.log-view {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  min-height: calc(100vh - 70px);
}

@media (min-width: 640px) {
  .log-view {
    padding: var(--space-xl) var(--space-lg);
  }
}

.log-view__header {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding-top: var(--space-xl);
}

.log-view__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-black);
  background: linear-gradient(to right, 
    oklch(55% 0.22 350), 
    oklch(50% 0.22 285), 
    oklch(50% 0.2 265)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

@media (min-width: 640px) {
  .log-view__title {
    font-size: var(--text-3xl);
  }
}

.dark .log-view__title,
html.dark .log-view__title {
  background: linear-gradient(to right, 
    oklch(75% 0.2 350), 
    oklch(75% 0.18 285), 
    oklch(75% 0.16 265)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.log-view__subtitle {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: var(--space-xs) 0 0;
}

.dark .log-view__subtitle,
html.dark .log-view__subtitle {
  color: var(--color-gray-400);
}

.log-view__days {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.log-view__load-more {
  margin-top: var(--space-lg);
  text-align: center;
}

.log-view__empty {
  text-align: center;
  padding: var(--space-3xl) 0;
}

/* ===================================
   FILM STRIP DAY TABS
   Integrated with header - seamless design
   =================================== */

.header__film-strip {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-sm) var(--space-xs);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  /* Separator lines above and below film strip */
  border-top: 1px solid oklch(100% 0 0 / 0.15);
  border-bottom: 1px solid oklch(100% 0 0 / 0.15);
  margin-bottom: 0;
}

/* Light mode separators */
html:not(.dark) .header__film-strip {
  border-top-color: oklch(50% 0.1 320 / 0.25);
  border-bottom-color: oklch(50% 0.1 320 / 0.25);
}

.dark .header__film-strip,
html.dark .header__film-strip {
  background: transparent;
  box-shadow: none;
  /* Keep separator lines */
  border-left: none;
  border-right: none;
  border-top: 1px solid oklch(100% 0 0 / 0.15);
  border-bottom: 1px solid oklch(100% 0 0 / 0.15);
}

@media (prefers-color-scheme: dark) {
  .header__film-strip {
    background: transparent;
    box-shadow: none;
    border-left: none;
    border-right: none;
    border-top: 1px solid oklch(100% 0 0 / 0.15);
    border-bottom: 1px solid oklch(100% 0 0 / 0.15);
  }
}

.header__film-strip::-webkit-scrollbar {
  display: none;
}

.film-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

/* Arrow buttons */
.film-tabs__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--color-gray-700);
  cursor: pointer;
  transition: all 0.15s ease;
}

.film-tabs__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-pink-600);
}

.film-tabs__arrow--disabled,
.film-tabs__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.film-tabs__arrow-icon {
  width: 14px;
  height: 14px;
}

.dark .film-tabs__arrow,
html.dark .film-tabs__arrow {
  color: var(--color-gray-300);
}

.dark .film-tabs__arrow:hover:not(:disabled),
html.dark .film-tabs__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-pink-400);
}

.dark .film-tabs__arrow:hover:not(:disabled),
html.dark .film-tabs__arrow:hover:not(:disabled) {
  background: var(--color-gray-700);
  border-color: var(--color-pink-500);
  color: var(--color-pink-400);
}

/* Film strip container */
.film-tabs__strip {
  display: flex;
  align-items: center;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.film-tabs__strip::-webkit-scrollbar {
  display: none;
}



/* Sprocket holes */
.film-tabs__sprockets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
  flex-shrink: 0;
}

.film-tabs__sprocket {
  width: 8px;
  height: 8px;
  background: var(--color-gray-900);
  border: 2px solid var(--color-gray-600);
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .film-tabs__sprocket,
html.dark .film-tabs__sprocket {
  background: var(--color-black);
  border-color: var(--color-gray-700);
}

/* Frames container */
.film-tabs__frames {
  display: flex;
  gap: 4px;
  padding: 0;
}

/* Individual frame */
.film-tabs__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 48px;
  padding: var(--space-xs);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-gray-700);
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px);
}

.film-tabs__frame:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--color-gray-400);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.film-tabs__frame--active {
  background: linear-gradient(135deg, var(--color-pink-100), var(--color-purple-100));
  border-color: var(--color-pink-500);
  color: var(--color-pink-800);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.25);
  font-weight: var(--font-semibold);
}

.film-tabs__frame--active:hover {
  background: linear-gradient(135deg, var(--color-pink-200), var(--color-purple-200));
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(236, 72, 153, 0.35);
}

.film-tabs__frame--empty {
  opacity: 0.5;
  border-style: dashed;
}

.dark .film-tabs__frame,
html.dark .film-tabs__frame {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-gray-600);
  color: var(--color-gray-300);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dark .film-tabs__frame:hover,
html.dark .film-tabs__frame:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-gray-500);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.dark .film-tabs__frame--active,
html.dark .film-tabs__frame--active {
  background: linear-gradient(135deg, var(--color-pink-900), var(--color-purple-900));
  border-color: var(--color-pink-500);
  color: var(--color-pink-100);
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

.dark .film-tabs__frame--active:hover,
html.dark .film-tabs__frame--active:hover {
  background: linear-gradient(135deg, var(--color-pink-800), var(--color-purple-800));
  box-shadow: 0 3px 12px rgba(236, 72, 153, 0.4);
}

/* Editable active frame - enlarged with input */
.film-tabs__frame--editable {
  min-width: 120px;
  height: 52px;
  padding: var(--space-xs) var(--space-sm);
  cursor: text;
  gap: 2px;
}

.film-tabs__frame--editable:hover {
  transform: none;
}

/* Title input inside film frame */
.film-tabs__title-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: var(--font-semibold);
  color: inherit;
  text-align: center;
  padding: 2px 4px;
  line-height: 1.2;
  transition: border-color 0.15s ease;
}

.film-tabs__title-input:hover {
  border-bottom-color: currentColor;
  opacity: 0.5;
}

.film-tabs__title-input:focus {
  outline: none;
  border-bottom-color: currentColor;
}

.film-tabs__title-input::placeholder {
  color: inherit;
  opacity: 0.85;
}

/* Date label below input */
.film-tabs__date-label {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.7;
  line-height: 1;
  white-space: nowrap;
}

/* Dark mode for editable frame */
.dark .film-tabs__title-input,
html.dark .film-tabs__title-input {
  color: var(--color-pink-100);
}

.dark .film-tabs__title-input::placeholder,
html.dark .film-tabs__title-input::placeholder {
  color: var(--color-pink-100);
  opacity: 0.85;
}

.dark .film-tabs__date-label,
html.dark .film-tabs__date-label {
  color: var(--color-pink-200);
}

@media (prefers-color-scheme: dark) {
  .film-tabs__title-input {
    color: var(--color-pink-100);
  }
  
  .film-tabs__title-input::placeholder {
    color: var(--color-pink-100);
    opacity: 0.85;
  }
  
  .film-tabs__date-label {
    color: var(--color-pink-200);
  }
}

/* Day number */
.film-tabs__day-number {
  font-size: 1.125rem;
  font-weight: 700;
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
  line-height: 1;
  margin-bottom: 1px;
}

/* Day name (weekday) */
.film-tabs__day-name {
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
  line-height: 1;
}

/* Recording indicator */
.film-tabs__recording {
  display: flex;
  gap: 1px;
  margin-top: 2px;
  opacity: 0.9;
}

.film-tabs__rec-dot {
  width: 3px;
  height: 3px;
  background: var(--color-pink-600);
  border-radius: 50%;
  animation: rec-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 2px var(--color-pink-400);
}

.film-tabs__rec-dot:nth-child(2) {
  animation-delay: 0.3s;
}

.film-tabs__rec-dot:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes rec-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Today badge */
.film-tabs__today-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-pink-700);
  background: rgba(255, 255, 255, 0.9);
  padding: 1px 3px;
  border-radius: 2px;
  border: 1px solid var(--color-pink-300);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(236, 72, 153, 0.2);
}

.dark .film-tabs__today-badge,
html.dark .film-tabs__today-badge {
  color: var(--color-pink-300);
  background: rgba(0, 0, 0, 0.8);
  border-color: var(--color-pink-600);
  box-shadow: 0 1px 3px rgba(236, 72, 153, 0.3);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .header__film-strip {
    padding: var(--space-xs);
  }

  .film-tabs__arrow {
    width: 24px;
    height: 24px;
  }

  .film-tabs__arrow-icon {
    width: 12px;
    height: 12px;
  }

  .film-tabs__frame {
    min-width: 44px;
    height: 42px;
    padding: 2px;
  }

  .film-tabs__day-number {
    font-size: 1rem;
  }

  .film-tabs__day-name {
    font-size: 0.45rem;
  }

  .film-tabs__sprockets {
    display: none;
  }

  .film-tabs__frames {
    gap: 3px;
    padding: 0;
  }

  .film-tabs__today-badge {
    font-size: 0.35rem;
    padding: 0.5px 2px;
    bottom: -5px;
  }
}