/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS — iOS 26 / Apple Design Language
   Chromatic refraction · Specular highlights · Liquid levitation
   ═══════════════════════════════════════════════════════════════ */

/* ── Chromatic ambient orbs (sit behind everything) ── */
.lg-orb-1, .lg-orb-2, .lg-orb-3 {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  animation: lgOrbDrift 20s ease-in-out infinite alternate;
}
body.home-mode .lg-orb-1 { opacity: 0.22; }
body.home-mode .lg-orb-2 { opacity: 0.18; }
body.home-mode .lg-orb-3 { opacity: 0.16; }

.lg-orb-1 {
  width: 550px; height: 550px;
  background: radial-gradient(circle, #7c3aed 0%, #3b82f6 60%, transparent 100%);
  top: -120px; left: -120px;
  animation-delay: 0s;
}
.lg-orb-2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, #0ea5e9 0%, #06b6d4 60%, transparent 100%);
  top: 25%; right: -140px;
  animation-delay: -7s;
}
.lg-orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #ec4899 0%, #f43f5e 60%, transparent 100%);
  bottom: -60px; left: 28%;
  animation-delay: -14s;
}

@keyframes lgOrbDrift {
  0%   { transform: translate(0px,   0px)  scale(1);    }
  33%  { transform: translate(30px,  25px) scale(1.06); }
  66%  { transform: translate(-15px, 40px) scale(0.97); }
  100% { transform: translate(20px, -20px) scale(1.03); }
}

/* ── Liquid Glass base surface ── */
.lg-glass,
.aw-main-box,
.an-news-container,
.alive-journey-card,
.an-mini-stats,
.an-insight-card {
  position: relative;
  background: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(56px) saturate(210%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(56px) saturate(210%) brightness(1.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.26),
    0 2px 8px rgba(0, 0, 0, 0.14) !important;
  overflow: hidden;
}

/* Frosted Noise Texture Layer */
.aw-main-box::after,
.an-news-container::after,
.alive-journey-card::after,
.an-mini-stats::after,
.an-insight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3C%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}

/* Specular top-edge highlight */
.aw-main-box::before,
.an-news-container::before,
.alive-journey-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 25%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.55) 75%,
    transparent 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Iridescent edge chromatic refraction — improved */
.aw-main-box .lg-refraction,
.an-news-container .lg-refraction {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #c4b5fd, #93c5fd, #6ee7b7, #fde68a, #fbcfe8, #c4b5fd);
  background-size: 100% 300%;
  opacity: 0.7;
  z-index: 4;
  pointer-events: none;
  animation: lgEdgeShimmer 8s linear infinite;
}

/* Glass Glint Animation */
.aw-main-box::before,
.an-news-container::before,
.alive-journey-card::before {
  content: '';
  position: absolute;
  top: -150%; left: -50%; width: 200%; height: 400%;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.05) 55%, transparent);
  transform: rotate(35deg);
  z-index: 2;
  pointer-events: none;
  animation: lgGlint 12s ease-in-out infinite;
}

@keyframes lgGlint {
  0% { transform: translate(-20%, -20%) rotate(35deg); }
  50% { transform: translate(20%, 20%) rotate(35deg); }
  100% { transform: translate(-20%, -20%) rotate(35deg); }
}

@keyframes lgEdgeShimmer {
  0%   { background-position: 0 0%; }
  100% { background-position: 0 300%; }
}

/* ── Weather Widget ── */
.aw-main-box {
  border-radius: 28px !important;
  transition:
    transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.5s ease !important;
}
.aw-main-box:hover {
  transform: translateY(-10px) scale(1.018) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    0 30px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255,255,255,0.22) !important;
}

/* ── News Widget ── */
.an-news-container {
  border-radius: 28px !important;
  transition:
    transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.5s ease !important;
}
.an-news-container:hover {
  transform: translateY(-10px) scale(1.018) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    0 30px 80px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255,255,255,0.22) !important;
}

/* ── News items — text-only with colored source dot ── */
.an-news-src-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  display: inline-block;
}

.an-news-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 11px 10px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  background: transparent !important;
}
.an-news-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(5px) !important;
  border-bottom-color: transparent !important;
}
.an-news-item:last-child { border-bottom: none !important; }

/* Remove broken image placeholders */
.an-news-img { display: none !important; }

/* ── Journey cards ── */
.alive-journey-card {
  border-radius: 26px !important;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease,
    background 0.3s ease !important;
}
.alive-journey-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    0 28px 70px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255,255,255,0.22) !important;
}

/* ── Mini Stats pill ── */
.an-mini-stats {
  border-radius: 24px !important;
  padding: 18px 32px !important;
}

/* ── AI Insight card ── */
.an-insight-card {
  border-radius: 22px !important;
}

/* ── Ring inner panel ── */
.an-ring-inner-multi {
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 16px rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  width: 84px !important;
  height: 84px !important;
}

/* ── Score status badge ── */
.an-score-status {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ── Ring legend pills ── */
.ring-legend {
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 100px !important;
  padding: 7px 14px !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.18) !important;
}

/* ── Specular highlights on specific elements ── */
.aw-big-icon {
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)) !important;
  position: relative;
}
.aw-big-icon::after {
  content: '';
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ── Triple Ring Liquid Shroud ── */
.an-triple-rings-wrap {
  background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, transparent 70%);
  border-radius: 50%;
  position: relative;
}
.an-triple-rings-wrap::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.05);
  pointer-events: none;
}

/* ── Status indicator glass pill ── */
.an-score-status {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* ── Hero greeting — gradient text ── */
body.home-mode .an-greeting {
  font-size: 40px !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  background: linear-gradient(140deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── z-index: content above orbs ── */
.an-dashboard-grid,
.an-hero,
.an-score-section,
.an-insight-card,
.an-time-dist,
.an-today-section,
.an-journeys-grid,
/* ── Reflection area — Liquid Glass ── */
.an-reflection-input {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin-top: 12px !important;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.1) !important;
  transition: all 0.3s ease !important;
}
.an-reflection-input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.15), 0 0 15px rgba(59,130,246,0.1) !important;
}

.an-projection, .an-reflection, .an-news-header, .an-news-list, .an-news-footer {
  position: relative;
  z-index: 1;
}

/* ── Float-in animation on load ── */
@keyframes lgFloatUp {
  from { opacity: 0; transform: translateY(28px) scale(0.97); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1);    filter: blur(0); }
}
.aw-main-box {
  animation: lgFloatUp 0.75s cubic-bezier(0.23, 1, 0.32, 1) both !important;
}
.an-news-container {
  animation: lgFloatUp 0.75s 0.12s cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

/* ── Scrollbar (glass-minimal) ── */
.an-news-list::-webkit-scrollbar { width: 3px; }
.an-news-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* ── Mobile: reduce blur cost ── */
@media (max-width: 768px) {
  .aw-main-box,
  .an-news-container,
  .alive-journey-card {
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  }
  .lg-orb-1, .lg-orb-2, .lg-orb-3 { opacity: 0.1 !important; }
  body.home-mode .an-greeting {
    font-size: 30px !important;
  }
}

/* Dashboard Liquid Glass Refresh */
#mainDashboard {
  position: relative;
  isolation: isolate;
}

#mainDashboard::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(99, 102, 241, 0.22), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(236, 72, 153, 0.16), transparent 16%),
    radial-gradient(circle at 72% 68%, rgba(59, 130, 246, 0.14), transparent 22%),
    radial-gradient(circle at 28% 82%, rgba(45, 212, 191, 0.10), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.025) 0%, transparent 42%),
    linear-gradient(180deg, #02030a 0%, #050711 28%, #0a0718 54%, #060914 78%, #010103 100%);
}

.lg-topbar {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 18px 48px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(129, 140, 248, 0.08) !important;
}

.lg-topbar::before,
.lg-panel::before,
.lg-embed-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26), transparent 22%),
    linear-gradient(120deg, transparent 14%, rgba(255,255,255,0.11) 50%, transparent 86%),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.18), transparent 26%);
  opacity: 0.92;
}

.lg-topbar::after,
.lg-panel::after,
.lg-embed-shell::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.8;
}

.lg-panel,
.lg-embed-shell {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.13), transparent 26%),
    radial-gradient(circle at bottom right, rgba(129, 140, 248, 0.08), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)) !important;
  backdrop-filter: blur(38px) saturate(155%) brightness(0.92) !important;
  -webkit-backdrop-filter: blur(38px) saturate(155%) brightness(0.92) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 20px 52px rgba(0, 0, 0, 0.52),
    0 2px 10px rgba(255, 255, 255, 0.03),
    0 0 32px rgba(99, 102, 241, 0.06) !important;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease !important;
}

.lg-panel:hover,
.lg-embed-shell:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 26px 62px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 42px rgba(129, 140, 248, 0.12) !important;
}

.lg-panel-hero {
  background:
    radial-gradient(circle at top right, rgba(192, 132, 252, 0.16), transparent 24%),
    radial-gradient(circle at left center, rgba(56, 189, 248, 0.10), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)) !important;
}

.lg-panel-feature {
  background:
    radial-gradient(circle at top left, rgba(59,130,246,0.14), transparent 22%),
    radial-gradient(circle at bottom right, rgba(236,72,153,0.10), transparent 20%),
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)) !important;
}

.lg-mini-panel {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.09), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(255,255,255,0.03) !important;
}

.lg-stat-strip > div {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
}

.lg-glass-btn {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 12px 28px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(255,255,255,0.04) !important;
}

.lg-glass-btn:hover {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)) !important;
}

.lg-input-glass {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.08), transparent 28%),
    linear-gradient(180deg, rgba(7,9,24,0.58), rgba(16,12,28,0.34)) !important;
  backdrop-filter: blur(24px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 10px 30px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(99,102,241,0.06) !important;
}

.lg-input-glass:focus {
  border-color: rgba(255, 255, 255, 0.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 0 3px rgba(129, 140, 248, 0.10),
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 30px rgba(236,72,153,0.08) !important;
}

.lg-embed-shell iframe {
  opacity: 0.96;
}

@media (max-width: 768px) {
  .lg-topbar {
    padding: 14px 16px !important;
    border-radius: 20px !important;
  }

  .lg-panel,
  .lg-embed-shell {
    backdrop-filter: blur(24px) saturate(120%) brightness(0.9) !important;
    -webkit-backdrop-filter: blur(24px) saturate(120%) brightness(0.9) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      0 14px 30px rgba(0, 0, 0, 0.4) !important;
  }
}