/* ============================================================================
   HOME PWA v2.0 — Exact iOS 26 / Grok App Liquid Glass & Concentric Keyline System
   Zero External Dependencies | Strict 16pt / 12pt Keyline Rules | Safe-Area Aware
   ============================================================================ */

:root,
[data-theme="light"] {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --card2: #F2F2F7;
  --l1: #000000;
  --l2: #58585E;
  --l3: #6C6C72;
  --sep: rgba(198, 198, 200, 0.65);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.20);
  --inv: #1C1C1E;
  --invT: #FFFFFF;
  --sheet: #FFFFFF;
  --dim: rgba(0, 0, 0, 0.36);
  --user-bub: #1C1C1E;
  --user-bubT: #FFFFFF;
  --seg-on: #FFFFFF;

  /* Safe Area Insets (iPhone Notch / Dynamic Island & Home Indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Domain & Palette Colors (Light Mode >=3.5:1 Contrast) */
  --c-red: #E42236;
  --c-vermilion: #C95100;
  --c-orange: #AC6700;
  --c-green: #00894D;
  --c-teal: #008677;
  --c-blue: #0E75E2;
  --c-purple: #8B55F4;
  --c-pink: #DB2584;
  --c-brown: #936439;
  --c-gray: #777777;

  /* Grok App Liquid Glass — Light Mode */
  --glass-bg: rgba(242, 242, 247, 0.84);
  --tabbar-bg: rgba(242, 242, 247, 0.84);
  --glass-border: 0.5px solid rgba(90, 90, 102, 0.22);
  --glass-inner-rim: inset 0 0 0 0.5px rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 8px 22px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
  --tab-active-bg: #FFFFFF;
  --tab-active-border: 0.5px solid rgba(104, 104, 116, 0.16);
  --tab-active-text: #004A99;
  --tab-inactive-text: #46464C;
  --bot-vignette: linear-gradient(to bottom, rgba(242, 242, 247, 0) 0%, rgba(242, 242, 247, 0.72) 45%, rgba(242, 242, 247, 0.98) 100%);
  --header-bg: rgba(242, 242, 247, 0.86);
}

[data-theme="dark"] {
  --bg: #000000;
  --card: #1C1C1E;
  --card2: #262629;
  --l1: #FFFFFF;
  --l2: #A8A8B0;
  --l3: #8E8E96;
  --sep: rgba(56, 56, 58, 0.75);
  --fill: rgba(118, 118, 128, 0.24);
  --fill-strong: rgba(118, 118, 128, 0.36);
  --inv: #FFFFFF;
  --invT: #000000;
  --sheet: #1C1C1E;
  --dim: rgba(0, 0, 0, 0.65);
  --user-bub: #3A3A3C;
  --user-bubT: #FFFFFF;
  --seg-on: #3C3C45;

  /* Domain & Palette Colors (Dark Mode) */
  --c-red: #FF263C;
  --c-vermilion: #FF6700;
  --c-orange: #FF9800;
  --c-green: #00C972;
  --c-teal: #00BCA6;
  --c-blue: #1084FE;
  --c-purple: #9B68FE;
  --c-pink: #FF309B;
  --c-brown: #A8815F;
  --c-gray: #898989;

  /* Grok App Liquid Glass — Dark Mode (Exact Floating Smoked Glass Capsule rgba(28, 28, 30, 0.68)) */
  --glass-bg: rgba(28, 28, 30, 0.74);
  --tabbar-bg: rgba(28, 28, 30, 0.74);
  --glass-border: 0.5px solid rgba(255, 255, 255, 0.18);
  --glass-inner-rim: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 4px 10px rgba(0, 0, 0, 0.65);
  --tab-active-bg: #3C3C45;
  --tab-active-border: 0.5px solid rgba(255, 255, 255, 0.16);
  --tab-active-text: #FFFFFF;
  --tab-inactive-text: #B8B8C2;
  --bot-vignette: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.98) 100%);
  --header-bg: rgba(0, 0, 0, 0.82);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--l1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

/* ============================================================================
   Grok-Style Top Header Bar (≡ Left / Title Center / + & ⋯ Right)
   Safe-Area Padded so it NEVER overlaps the iPhone status bar clock (12:21)
   ============================================================================ */
.grok-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  padding-top: calc(max(var(--safe-top), 14px) + 6px);
  padding-bottom: 10px;
  padding-left: calc(env(safe-area-inset-left, 0px) + 16px);
  padding-right: calc(env(safe-area-inset-right, 0px) + 16px);
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--sep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 120;
}

.grok-header-left,
.grok-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 76px;
}

.grok-header-right {
  justify-content: flex-end;
}

.grok-header-center {
  flex: 1;
  text-align: center;
  min-width: 0;
  cursor: pointer;
}

.grok-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--l1);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grok-header-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--l2);
  line-height: 1.2;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--glass-inner-rim);
  color: var(--l1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.icon-circle-btn:active {
  transform: scale(0.94);
  background: var(--fill-strong);
}

/* ============================================================================
   Main App Container (Strict 16px horizontal margin)
   ============================================================================ */
.app-shell {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  padding-top: calc(max(var(--safe-top), 14px) + 64px);
  padding-bottom: calc(max(var(--safe-bottom), 16px) + 104px);
  padding-left: calc(env(safe-area-inset-left, 0px) + 16px);
  padding-right: calc(env(safe-area-inset-right, 0px) + 16px);
  background-color: var(--bg);
}

body.hide-tabbar .app-shell,
body.keyboard-open .app-shell {
  padding-bottom: calc(max(var(--safe-bottom), 12px) + 24px);
}

body.hide-tabbar .floating-tabbar,
body.hide-tabbar .bottom-vignette-cushion,
body.keyboard-open .floating-tabbar,
body.keyboard-open .bottom-vignette-cushion {
  display: none !important;
}

/* ============================================================================
   Strict 16pt / 12pt Keyline & Concentric Corner Radii Cards
   ============================================================================ */
.hifi-card {
  background-color: var(--card);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}

.hifi-subcard {
  background-color: var(--card2);
  border-radius: 12px; /* 22px - 10px concentric rule inside 16px padded parent */
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hifi-subcard + .hifi-subcard {
  margin-top: 8px;
}

.bento-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.bento-grid-2 > .hifi-card {
  margin-bottom: 0;
}

.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.tile-3col {
  background-color: var(--card);
  border-radius: 18px;
  padding: 12px;
  position: relative;
  cursor: pointer;
  transition: transform 0.12s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 104px;
}

.tile-3col:active {
  transform: scale(0.97);
}

/* Section Header inside 22px Card */
.card-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}

.domain-title-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.domain-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.domain-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--l1);
  line-height: 1.25;
}

.card-header-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-blue);
  flex-shrink: 0;
}

/* Typography Hierarchy */
.page-date-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--l2);
  margin: 2px 0 2px 0;
}

.page-large-title,
.large-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 12px 0;
  line-height: 1.15;
}

.metric-large {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.08;
  color: var(--l1);
  letter-spacing: -0.5px;
}

.metric-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--l2);
  margin: 0 3px 0 2px;
}

/* Universal Search Bar Card + Instant Router Dropdown */
.search-bar-wrap {
  position: relative;
  margin-bottom: 12px;
}

.search-bar-card {
  background-color: var(--card);
  border-radius: 19px;
  height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0.5px solid var(--sep);
}

.search-bar-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--l1);
  font-size: 15px;
  width: 100%;
}

.search-bar-input::placeholder {
  color: var(--l2);
}

.search-suggest-box {
  background-color: var(--card);
  border: 0.5px solid var(--sep);
  border-radius: 16px;
  padding: 8px;
  margin-top: 6px;
  box-shadow: var(--glass-shadow);
}

/* Progress Bars */
.progress-track {
  width: 100%;
  height: 5px;
  border-radius: 2.5px;
  background-color: var(--fill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 2.5px;
  transition: width 0.25s ease;
}

/* Segmented Control */
.segmented-bar {
  background-color: var(--fill);
  border-radius: 11px;
  padding: 2px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 2px;
}

.seg-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--l2);
  font-size: 12px;
  font-weight: 500;
  height: 30px;
  border-radius: 9px;
  cursor: pointer;
  padding: 0 4px;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.seg-btn.active {
  background-color: var(--seg-on);
  color: var(--l1);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ============================================================================
   Floating Bottom Liquid Glass Tab Bar + Vignette Cushion
   ============================================================================ */
.bottom-vignette-cushion {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  height: calc(max(var(--safe-bottom), 10px) + 96px);
  background: var(--bot-vignette);
  pointer-events: none;
  z-index: 95;
}

.floating-tabbar {
  position: fixed;
  bottom: calc(max(var(--safe-bottom), 10px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 386px;
  height: 60px;
  border-radius: 30px;
  background: var(--tabbar-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner-rim);
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 110;
}

.tab-item {
  border: none;
  background: transparent;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--tab-inactive-text);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.tab-item.active {
  background: var(--tab-active-bg);
  border: var(--tab-active-border);
  color: var(--tab-active-text);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.tab-item svg {
  width: 21px;
  height: 21px;
}

/* ============================================================================
   Calendar Month Grid (Dynamic Year/Month + Cute Grok Bot Icons)
   ============================================================================ */
.cal-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

.cal-select {
  background-color: var(--card);
  color: var(--l1);
  border: 0.5px solid var(--sep);
  border-radius: 10px;
  height: 34px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.cal-month-grid {
  background-color: var(--card);
  border-radius: 22px;
  padding: 12px 8px;
  margin-bottom: 12px;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: var(--l2);
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--sep);
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-cell {
  min-height: 70px;
  border-bottom: 0.5px solid var(--sep);
  padding: 4px 1.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.12s ease;
  overflow: hidden;
}

.cal-cell.selected {
  outline: 1.8px solid var(--c-blue);
  outline-offset: -1.8px;
  background-color: var(--fill);
}

.cal-day-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
}

.cal-cell.today .cal-day-num {
  background-color: var(--c-red);
  color: #FFFFFF;
  font-weight: 700;
}

.cal-ev-pill {
  width: 100%;
  height: 15px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
  margin-bottom: 1.5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--l1);
  white-space: nowrap;
  overflow: hidden;
}

/* ============================================================================
   Sheets, Modals, Drawers, Form Inputs, Buttons
   ============================================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--dim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-sheet {
  width: 100%;
  max-width: 430px;
  max-height: calc(100dvh - max(var(--safe-top), 16px) - 16px);
  background-color: var(--sheet);
  border-radius: 24px 24px 0 0;
  padding: 12px 16px calc(max(var(--safe-bottom), 16px) + 24px) 16px;
  overflow-y: auto;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}

.sheet-grabber {
  width: 36px;
  height: 5px;
  border-radius: 2.5px;
  background-color: var(--l3);
  opacity: 0.5;
  margin: 0 auto 12px auto;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--l2);
  margin: 8px 0 4px 0;
  display: block;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--sep);
  background-color: var(--card);
  color: var(--l1);
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.form-textarea {
  min-height: 72px;
  resize: vertical;
}

.btn-primary {
  background-color: var(--inv);
  color: var(--invT);
  border: none;
  border-radius: 12px;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.btn-secondary {
  background-color: var(--fill);
  color: var(--l1);
  border: none;
  border-radius: 12px;
  min-height: 40px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-danger {
  background-color: rgba(255, 38, 60, 0.14);
  color: var(--c-red);
  border: 1px solid rgba(255, 38, 60, 0.35);
  border-radius: 12px;
  min-height: 42px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.chip-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 8px;
  scrollbar-width: none;
}

.chip-scroll::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  border: none;
  background-color: var(--card);
  color: var(--l1);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.filter-chip.active {
  background-color: var(--inv);
  color: var(--invT);
  font-weight: 600;
}

/* Prediction Tile coordinate-locked top-left badge at (12px, 12px) */
.pred-tile {
  background-color: var(--card);
  border-radius: 20px;
  padding: 12px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 142px;
  cursor: pointer;
}

.pred-badge-done {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: var(--c-green);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.pred-badge-cand {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 19px;
  padding: 0 7px;
  border-radius: 9.5px;
  background-color: var(--fill);
  color: var(--l2);
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

/* Chat Bubbles & Consult Docked Bar */
.chat-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: flex-start;
}

.chat-row.me {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  background-color: var(--card);
  color: var(--l1);
  font-size: 14px;
  line-height: 1.48;
  word-break: break-word;
}

.chat-row.me .chat-bubble {
  background-color: var(--user-bub);
  color: var(--user-bubT);
}

.role-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
  margin-top: 2px;
}

.hidden {
  display: none !important;
}