/**
 * Tips Modal V3 - Modern Professional Design
 * Featuring 4:5 rectangular cards with 1px separation
 * Responsive and minimal
 */

:root {
  /* Colors */
  --tips-bg: #000000;
  --tips-cell-bg: #000000;
  --tips-cell-bg-hover: #111111;
  --tips-border: rgba(255, 255, 255, 0.12);
  --tips-border-hover: rgba(255, 255, 255, 0.25);
  --tips-text-primary: #ffffff;
  --tips-text-secondary: rgba(255, 255, 255, 0.6);
  --tips-accent: #f97316;
  
  /* Pill styling - lighter glass */
  --tips-pill-bg: rgba(0, 0, 0, 0.2);
  --tips-pill-border: rgba(255, 255, 255, 0.15);
  --tips-pill-blur: 16px;
  
  /* Layout */
  --tips-gap: 1px;
  --tips-card-ratio: 4/5;
}

/* ============================================
   Main Modal Container
   ============================================ */
.tips-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  background: transparent;
  overflow-y: auto; /* Always allow scrolling */
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  /* CRITICAL: Force Chrome to repaint during scroll */
  transform: scale(1.01) translate3d(0, 0, 0);
  -webkit-transform: scale(1.01) translate3d(0, 0, 0);
  -webkit-overflow-scrolling: touch;
  /* CRITICAL: Do NOT use contain: paint - it blocks repaints during scroll! */
  contain: none !important;
  isolation: isolate;
  /* Keep transform for GPU layer, but NOT scroll-position (causes Chrome to defer rendering) */
  will-change: transform;
}

.tips-modal.show { 
  display: block; 
  opacity: 1; 
  pointer-events: auto; 
  /* Maintain GPU compositing when shown */
  transform: scale(1) translate3d(0, 0, 0);
  -webkit-transform: scale(1) translate3d(0, 0, 0);
}

.tips-modal.fade-out { 
  opacity: 0; 
  /* Maintain GPU compositing when fading out */
  transform: scale(0.98) translate3d(0, 0, 0);
  -webkit-transform: scale(0.98) translate3d(0, 0, 0);
  pointer-events: none; 
}

/* Sidebar/Panel Compression (Maintain compatibility with app layout) */
/* body.sidebar-open is added by JS when sidebar opens (works on all devices including iPad) */
body.sidebar-open .tips-modal,
.main-content.sidebar-open ~ .tips-modal,
body:has(.sidebar.open) .tips-modal {
  left: var(--sidebar-width, 280px);
  width: calc(100vw - var(--sidebar-width, 280px));
}

.main-content.generations-open ~ .tips-modal,
body:has(.main-content.generations-open) .tips-modal {
  right: var(--capsule-panel-width, 360px);
}

/* Show More button - center in available content area (accounting for sidebars) */
.show-more-button {
  /* Base: center in full viewport */
  left: 50%;
  transform: translateX(-50%);
}

/* When sidebar is open: center = sidebar width + half of remaining width */
body.sidebar-open .show-more-button,
.main-content.sidebar-open ~ .show-more-button,
body:has(.sidebar.open) .show-more-button {
  left: calc(var(--sidebar-width, 280px) + (100vw - var(--sidebar-width, 280px)) / 2);
  transform: translateX(-50%);
}

/* When generations panel is open: center = half of remaining width */
.main-content.generations-open ~ .show-more-button,
body:has(.main-content.generations-open) .show-more-button {
  left: calc((100vw - var(--capsule-panel-width, 360px)) / 2);
  transform: translateX(-50%);
}

/* When both are open: center = sidebar width + half of middle section */
body.sidebar-open.generations-open .show-more-button,
.main-content.sidebar-open.generations-open ~ .show-more-button,
body:has(.sidebar.open):has(.main-content.generations-open) .show-more-button {
  left: calc(var(--sidebar-width, 280px) + (100vw - var(--sidebar-width, 280px) - var(--capsule-panel-width, 360px)) / 2);
  transform: translateX(-50%);
}

/* ============================================
   Wrapper & Content - Edge to edge, minimal top offset
   ============================================ */
.tips-modal-wrapper { 
  padding: 0;
  padding-top: calc(var(--topbar-height, 50px) + 12px);
  padding-bottom: 170px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  position: relative;
  background: #000000;
}

.tips-modal-content {
  width: 100%;
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ============================================
   Grid Layout - 1px gap for back-to-back feel
   ============================================ */
.tips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tips-gap);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 0;
  overflow: visible;
  flex: 1;
  /* CRITICAL: Force repaints during scroll - no paint containment */
  contain: none !important;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* ============================================
   Section Headers (inside the grid)
   ============================================ */
.tips-section-header {
  grid-column: 1 / -1;
  background: var(--tips-cell-bg);
  padding: 8px 18px 10px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* First section header (Super Studios) - no top padding */
.tips-section-header:first-child {
  padding-top: 0;
}

.tips-grid .tip-cell + .tips-section-header {
  margin-top: 0;
}

.tips-section-title {
  font-size: 26.4px;
  font-weight: 600;
  color: var(--tips-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tips-section-subtitle {
  font-size: 15.6px;
  font-weight: 400;
  color: var(--tips-text-secondary);
  line-height: 1.3;
}

/* ============================================
   Tip Cards - 4:5 Ratio
   ============================================ */
.tip-cell {
  aspect-ratio: var(--tips-card-ratio);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: var(--tips-cell-bg);
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  /* CRITICAL: Force GPU compositing - Chrome will repaint during scroll */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  /* CRITICAL: Do NOT contain paint - it blocks repaints! */
  contain: layout style;
  isolation: isolate;
}

.tip-cell:hover {
  background: var(--tips-cell-bg-hover);
  z-index: 5;
  /* Ensure tip cells never interfere with input section */
  pointer-events: auto;
}

/* Prevent tip cells from blocking input section - input section is always on top */
body.tips-open .tip-cell {
  pointer-events: auto;
}

body.tips-open .tip-cell:hover {
  pointer-events: auto;
  /* Ensure hover doesn't create a stacking context that blocks input */
  isolation: isolate;
}

/* CRITICAL: Ensure input section stays visible and on top when hovering tip cells */
body.tips-open .input-section,
body.tips-open .input-section:focus-within,
.tip-cell:hover ~ * .input-section,
.tips-grid:has(.tip-cell:hover) ~ .input-section,
body.tips-open:has(.tip-cell:hover) .input-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2200 !important;
  pointer-events: auto !important;
}

/* When hovering a specific card, slightly dim the others */
.tips-grid .tip-cell {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.tips-grid:has(.tip-cell:hover) .tip-cell:not(:hover) {
  opacity: 0.75;
  filter: brightness(0.85);
}

.tips-grid .tip-cell:hover {
  opacity: 1;
  filter: brightness(1);
}

/* Image container */
.tip-image-container { 
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.tip-image-a, 
.tip-image-b, 
.tip-video { 
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* CRITICAL: Force GPU compositing on images/videos so Chrome repaints them during scroll */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tip-image-b { 
  opacity: 0;
  z-index: 2; 
}

.tip-cell:hover .tip-image-a { 
  opacity: 0; 
}

.tip-cell:hover .tip-image-b { 
  opacity: 1; 
}

/* Text Overlay - Fixed glass panel at bottom (1/5 of card) */
.tip-text-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  
  /* Glass panel at bottom */
  background: var(--tips-pill-bg);
  backdrop-filter: blur(var(--tips-pill-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--tips-pill-blur)) saturate(180%);
  border-top: 1px solid var(--tips-pill-border);
  
  /* Content layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  min-height: 16.67%;
  box-sizing: border-box;
  pointer-events: none;
  
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover - glass panel stays same height but slightly more visible */
.tip-cell:hover .tip-text-overlay {
  background: rgba(0, 0, 0, 0.25);
  min-height: 16.67%;
}

/* Title text - no pill, just text */
.tip-command {
  color: #fff;
  font-size: 16.8px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  
  /* No background - text only */
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  
  transition: all 0.3s ease;
}

/* Hover state - title stays in place */
.tip-cell:hover .tip-command {
  transform: none;
}

/* Description - appears below title on hover */
.tip-prompt {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  max-width: 95%;
  
  /* No background */
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  
  /* Collapsed initially */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Hover - description appears */
.tip-cell:hover .tip-prompt {
  max-height: 50px;
  opacity: 1;
  margin-top: 6px;
}

/* ============================================
   Special Elements
   ============================================ */
.coming-soon-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--tips-accent);
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 30px;
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
}

.tip-cell.coming-soon {
  cursor: default;
  filter: saturate(0.5) brightness(0.7);
}

/* ============================================
   Close Button - Top right corner
   ============================================ */
.tips-close-button {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2200;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tips-close-button:hover {
  background: rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
}

/* ============================================
   "Show More" Button - Fixed pill at bottom (matches welcome.html auth pill)
   ============================================ */
.show-more-button {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  
  /* Pill layout - centered */
  display: none; /* Hidden by default, shown via body.tips-open */
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 28px;
  border-radius: 50px;
  
  /* Dark glass background */
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  
  /* Text styling */
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.4s ease, bottom 0.4s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  
  /* Prevent drag */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Show button when tips modal is open */
body.tips-open .show-more-button {
  display: inline-flex;
}

.show-more-button:hover {
  background: rgba(0, 0, 0, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Maintain hover transform when sidebars are open */
body.sidebar-open .show-more-button:hover,
.main-content.sidebar-open ~ .show-more-button:hover,
body:has(.sidebar.open) .show-more-button:hover,
.main-content.generations-open ~ .show-more-button:hover,
body:has(.main-content.generations-open) .show-more-button:hover,
body.sidebar-open.generations-open .show-more-button:hover,
.main-content.sidebar-open.generations-open ~ .show-more-button:hover {
  transform: translateX(-50%) translateY(-3px);
}

/* Fade out when scrolling */
.show-more-button.fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

/* ============================================
   Responsive Design - Always edge to edge
   ============================================ */

/* Tablet (1024px) - Keep 4 columns on iPad */
@media (max-width: 1024px) {
  .tips-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   iPad/Tablet specific - ALL orientations
   Use touch detection to catch iPad landscape too (wider than 1024px)
   ============================================ */
@media (pointer: coarse) and (min-width: 768px) {
  /* CRITICAL: On iPad/tablet, position tips-modal BELOW the header to avoid blocking it */
  /* iOS Safari has z-index stacking issues with transforms, so offset the modal instead */
  body.tips-open .tips-modal {
    top: var(--topbar-height, 60px) !important;
    height: calc(100% - var(--topbar-height, 60px)) !important;
  }
  
  /* CRITICAL: Force main header visibility on iPad when tips modal is open */
  /* Use extremely high z-index and remove any transforms that break stacking */
  body.tips-open .main-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
  
  /* DO NOT modify the header when sidebar opens - let it behave like laptop */
  /* The header stays full width, sidebar overlays on top */
  
  /* CRITICAL: Force input section visibility on iPad when tips modal is open */
  body.tips-open .input-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2200 !important;
    pointer-events: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  /* CRITICAL: When sidebar is open on iPad, adjust tips modal position and width */
  body.tips-open.sidebar-open .tips-modal,
  body.tips-open:has(.sidebar.open) .tips-modal {
    left: var(--sidebar-width, 280px) !important;
    width: calc(100vw - var(--sidebar-width, 280px)) !important;
    right: 0 !important;
  }
  
  /* Adjust the tips grid to fit within the narrower modal on iPad when sidebar is open */
  body.tips-open.sidebar-open .tips-modal .tips-grid,
  body.tips-open:has(.sidebar.open) .tips-modal .tips-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Adjust show-more button position on iPad when sidebar is open */
  body.tips-open.sidebar-open .show-more-button,
  body.tips-open:has(.sidebar.open) .show-more-button {
    left: calc(var(--sidebar-width, 280px) + (100vw - var(--sidebar-width, 280px)) / 2) !important;
  }
  
  /* Adjust wrapper padding - modal already starts below header */
  body.tips-open .tips-modal-wrapper {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

/* iPad Mini / Smaller tablets: reduce columns when sidebar is open */
@media (min-width: 768px) and (max-width: 850px) {
  /* With sidebar open on smaller iPads, use 2 columns for better fit */
  body.tips-open.sidebar-open .tips-modal .tips-grid,
  body.tips-open:has(.sidebar.open) .tips-modal .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small Tablet / Large Phone (768px) - Keep 4 columns for iPad portrait */
@media (max-width: 768px) {
  .tips-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .tips-section-title {
    font-size: 21.6px;
  }
  
  .tips-section-header {
    padding: 12px 14px 4px 14px;
    gap: 2px;
  }
  
  .tips-section-header:first-child {
    padding-top: 0;
  }
  
  .tip-command {
    font-size: 14.4px;
  }
  
  .tip-prompt {
    font-size: 10px;
  }
  
  .tip-text-overlay {
    padding: 10px 12px;
  }
  
  .show-more-button {
    bottom: 120px;
    height: 40px;
    font-size: 13px;
    padding: 0 24px;
  }
}

/* Phone only (max 600px) - Reduce to 2 columns */
@media (max-width: 600px) {
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
  .tips-section-title {
    font-size: 19.2px;
  }
  
  .tips-section-subtitle {
    font-size: 13.2px;
  }
  
  .tips-section-header {
    padding: 10px 12px 4px 12px;
    gap: 2px;
  }
  
  .tips-section-header:first-child {
    padding-top: 0;
  }
  
  .tip-command {
    font-size: 13.2px;
  }
  
  .tip-prompt {
    font-size: 9px;
  }
  
  .tip-text-overlay {
    padding: 8px 10px;
    min-height: 16.67%;
  }
  
  .show-more-button {
    bottom: 100px;
    height: 38px;
    font-size: 12px;
    padding: 0 20px;
  }
}

/* ============================================
   Fixed Bottom Gradient - On body so transform doesn't break it
   Ends DARK at the bottom (no fade back to transparent)
   ============================================ */
body.tips-open::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 300px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.6) 40%,
    rgba(0, 0, 0, 0.85) 70%,
    #000000 100%
  );
  pointer-events: none;
  z-index: 2150;
}

/* ============================================
   Compatibility Stubs
   ============================================ */
/* Hide the old protection layer if it exists */
.tips-prompt-protection-layer {
  display: none !important;
}

.tips-bottom-spacer {
  height: 20px;
}

/* ============================================
   CRITICAL: Ensure main header stays visible when tips modal is open
   ============================================ */
/* Force main header to always be visible and on top when tips are open */
/* Desktop: Keep position sticky, just elevate z-index */
body.tips-open .main-header {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2200 !important;
  pointer-events: auto !important;
}

/* ============================================
   CRITICAL: Ensure input section stays visible when tips modal is open
   ============================================ */
/* Force input section to always be visible and on top when tips are open */
body.tips-open .input-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2200 !important;
  pointer-events: auto !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* Prevent any transitions that might cause flickering */
  transition: none !important;
}

/* Ensure it stays visible even when hovering tip cells */
body.tips-open:has(.tip-cell:hover) .input-section,
body.tips-open .tip-cell:hover ~ * .input-section,
body.tips-open .input-section:focus-within {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2200 !important;
  pointer-events: auto !important;
  transition: none !important;
}

/* CRITICAL: Prevent input section from disappearing when images are added */
body.tips-open .input-section.image-selected,
body.tips-open .input-section:has(.image-input-container),
body.tips-open .input-section:has(#imageThumbStrip) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2200 !important;
}

/* ============================================
   Sidebar Module Hover Highlight (Tips Modal)
   Beautiful glowing pill outline when hovering studio tips
   ============================================ */
.sidebar-item.tips-hover-highlight {
  position: relative;
  background: rgba(249, 115, 22, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 0 0 1.5px rgba(249, 115, 22, 0.5),
    0 0 12px rgba(249, 115, 22, 0.3),
    0 0 24px rgba(249, 115, 22, 0.15),
    inset 0 0 8px rgba(249, 115, 22, 0.1) !important;
  animation: tipsHoverGlow 1.5s ease-in-out infinite alternate;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10;
}

/* Glowing text effect */
.sidebar-item.tips-hover-highlight .sidebar-item-text {
  color: rgba(255, 255, 255, 1) !important;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

/* Glowing icon effect */
.sidebar-item.tips-hover-highlight .sidebar-item-icon,
.sidebar-item.tips-hover-highlight .module-icon-img {
  filter: brightness(1.2) drop-shadow(0 0 4px rgba(249, 115, 22, 0.5));
}

/* Subtle pulse animation for the glow */
@keyframes tipsHoverGlow {
  0% {
    box-shadow: 
      0 0 0 1.5px rgba(249, 115, 22, 0.5),
      0 0 12px rgba(249, 115, 22, 0.3),
      0 0 24px rgba(249, 115, 22, 0.15),
      inset 0 0 8px rgba(249, 115, 22, 0.1);
  }
  100% {
    box-shadow: 
      0 0 0 2px rgba(249, 115, 22, 0.7),
      0 0 16px rgba(249, 115, 22, 0.45),
      0 0 32px rgba(249, 115, 22, 0.25),
      inset 0 0 12px rgba(249, 115, 22, 0.15);
  }
}

/* ============================================
   Ticker Bar Adjustments
   When announcement ticker is present, adjust tips modal positioning
   ============================================ */

/* Position tips modal below the ticker */
body.has-ticker .tips-modal {
  top: var(--ticker-height, 28px) !important;
  height: calc(100% - var(--ticker-height, 28px)) !important;
}

/* Adjust tips modal wrapper padding when ticker is present */
body.has-ticker.tips-open .tips-modal-wrapper {
  padding-top: calc(var(--topbar-height, 60px) + 12px);
}

/* Adjust fixed header position when both tips and ticker are present */
body.has-ticker.tips-open .main-header {
  top: var(--ticker-height, 28px) !important;
}

/* iPad/Tablet specific adjustments for ticker + tips - ALL orientations */
@media (pointer: coarse) and (min-width: 768px) {
  /* On iPad with ticker: position modal below BOTH ticker AND header */
  body.has-ticker.tips-open .tips-modal {
    top: calc(var(--ticker-height, 28px) + var(--topbar-height, 60px)) !important;
    height: calc(100% - var(--ticker-height, 28px) - var(--topbar-height, 60px)) !important;
  }
  
  body.has-ticker.tips-open .tips-modal-wrapper {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  
  body.has-ticker.tips-open .main-header {
    top: var(--ticker-height, 28px) !important;
  }
}

/* Mobile adjustments for ticker + tips */
@media (max-width: 768px) {
  body.has-ticker .tips-modal {
    top: var(--ticker-height, 34px) !important;
    height: calc(100% - var(--ticker-height, 34px)) !important;
  }
  
  body.has-ticker.tips-open .tips-modal-wrapper {
    padding-top: calc(var(--topbar-height, 56px) + 12px + env(safe-area-inset-top, 0px));
  }
  
  body.has-ticker.tips-open .main-header {
    top: var(--ticker-height, 34px) !important;
  }
}