/* Essential custom styles that can't be replicated with Tailwind */

/* PWA Standalone mode detection - only apply viewport-fit and safe areas in PWA mode */
@media (display-mode: standalone) {
  /* Enable viewport-fit only in PWA mode */
  html {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  
  /* Custom styles for PWA standalone mode */
  .pwa-safe-area-top {
    padding-top: max(env(safe-area-inset-top), 20px);
  }
  
  .pwa-safe-area-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 10px);
  }
  
  .pwa-safe-area-left {
    padding-left: env(safe-area-inset-left);
  }
  
  .pwa-safe-area-right {
    padding-right: env(safe-area-inset-right);
  }
  
  /* Ensure header has enough top padding for notch */
  header.pwa-safe-area-top {
    padding-top: max(env(safe-area-inset-top), 44px) !important;
  }
  
  /* Fix notifications positioning in PWA mode */
  .notification {
    top: max(env(safe-area-inset-top), 20px) !important;
    right: max(env(safe-area-inset-right), 16px) !important;
  }
}

/* Custom scrollbar for transcript - WebKit browsers only */
#transcript::-webkit-scrollbar {
  width: 6px;
}

#transcript::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

#transcript::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

#transcript::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark mode scrollbar */
.dark #transcript::-webkit-scrollbar-track {
  background: #374151;
}

.dark #transcript::-webkit-scrollbar-thumb {
  background: #6b7280;
}

.dark #transcript::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}