@import "tailwindcss";


/* Define CSS variables first */
:root {
  /* Light mode colors (default) */
  --color-bg: rgb(250 250 250);
  --color-bg-secondary: rgb(245 245 245);
  --color-bg-tertiary: rgb(237 237 237);
  --color-bg-elevated: rgb(255 255 255);
  --color-surface: rgb(245 245 245);
  --color-surface-hover: rgb(237 237 237);
  --color-border: rgb(226 226 226);
  --color-border-light: rgb(237 237 237);
  --color-border-focus: rgb(200 200 200);
  --color-text: rgb(23 23 23);
  --color-text-bright: rgb(0 0 0);
  --color-text-muted: rgb(75 75 75);
  --color-text-dim: rgb(115 115 115);
  --color-primary: #10B981;
  --color-primary-hover: #059669;
  --color-primary-dark: #047857;
  --color-primary-light: #34D399;
  --color-primary-muted: #10B98133;
  --color-primary-glow: #10B98166;
  --color-status-error: #EF4444;
  --color-status-warning: #F59E0B;
  --color-status-success: #10B981;
  --color-status-info: #3B82F6;
}

/* Tailwind v4 Theme Configuration */
@theme {
  /* Register custom colors using CSS variables */
  --color-bg: var(--color-bg);
  --color-bg-secondary: var(--color-bg-secondary);
  --color-bg-tertiary: var(--color-bg-tertiary);
  --color-bg-elevated: var(--color-bg-elevated);
  --color-surface: var(--color-surface);
  --color-surface-hover: var(--color-surface-hover);
  --color-border: var(--color-border);
  --color-border-light: var(--color-border-light);
  --color-border-focus: var(--color-border-focus);
  --color-text: var(--color-text);
  --color-text-bright: var(--color-text-bright);
  --color-text-muted: var(--color-text-muted);
  --color-text-dim: var(--color-text-dim);
  --color-primary: var(--color-primary);
  --color-primary-hover: var(--color-primary-hover);
  --color-primary-dark: var(--color-primary-dark);
  --color-primary-light: var(--color-primary-light);
  --color-primary-muted: var(--color-primary-muted);
  --color-primary-glow: var(--color-primary-glow);
  --color-accent-primary: var(--color-primary);
  --color-accent-green: var(--color-status-success);
  --color-accent-red: var(--color-status-error);
  --color-status-error: var(--color-status-error);
  --color-status-warning: var(--color-status-warning);
  --color-status-success: var(--color-status-success);
  --color-status-info: var(--color-status-info);
  
  /* Box Shadows */
  --shadow-glow: 0 0 20px rgb(16 185 129 / 0.4);
  --shadow-glow-sm: 0 0 10px rgb(16 185 129 / 0.3);
  --shadow-glow-lg: 0 0 30px rgb(16 185 129 / 0.5);
  --shadow-glow-intense: 0 0 40px rgb(16 185 129 / 0.6);
  --shadow-glow-error: 0 0 20px rgb(239 68 68 / 0.4);
  --shadow-glow-error-sm: 0 0 10px rgb(239 68 68 / 0.3);
  --shadow-glow-error-lg: 0 0 30px rgb(239 68 68 / 0.5);
  --shadow-glow-warning: 0 0 20px rgb(245 158 11 / 0.4);
  --shadow-glow-warning-sm: 0 0 10px rgb(245 158 11 / 0.3);
  --shadow-glow-warning-lg: 0 0 30px rgb(245 158 11 / 0.5);
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-card-hover: 0 4px 6px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.4);
  --shadow-elevated: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -2px rgb(0 0 0 / 0.2);
  
  /* Animations */
  --animate-pulse-primary: pulsePrimary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-slide-in-right: slideInRight 0.3s ease-out;
  --animate-slide-in-bottom: slideInBottom 0.3s ease-out;
  --animate-fade-in: fadeIn 0.2s ease-out;
  --animate-scale-in: scaleIn 0.2s ease-out;
}

/* Keyframes */
@keyframes pulsePrimary {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .7;
  }
}

/* Subtle pulse animation for keyboard button visibility */
@keyframes keyboard-button-pulse {
  0%, 70%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 8px rgba(var(--color-primary), 0.3);
  }
  35% { 
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--color-primary), 0.5);
    backdrop-filter: blur(16px) saturate(2);
    -webkit-backdrop-filter: blur(16px) saturate(2);
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInBottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes scaleIn {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* CSS Custom Properties for VibeTunnel constants */
:root {
  /* Breakpoints */
  --vt-breakpoint-mobile: 768px;
  --vt-breakpoint-tablet: 1024px;
  --vt-breakpoint-desktop: 1280px;

  /* Sidebar dimensions */
  --vt-sidebar-default-width: 420px;
  --vt-sidebar-min-width: 240px;
  --vt-sidebar-max-width: 600px;
  --vt-sidebar-mobile-right-margin: 80px;

  /* Transitions */
  --vt-transition-sidebar: 200ms;
  --vt-transition-mobile-slide: 200ms;
  --vt-transition-resize-handle: 200ms;

  /* Z-index layers */
  --vt-z-mobile-overlay: 20;
  --vt-z-sidebar-mobile: 30;
  --vt-z-session-exited-overlay: 25;

  /* Terminal */
  --vt-terminal-min-height: 200px;
  --vt-terminal-default-visible-rows: 24;
  --vt-terminal-resize-debounce: 100ms;
}

/* Dark mode theme colors */
[data-theme="dark"] {
  /* Override CSS variables for dark mode */
  --color-bg: rgb(23 23 23);
  --color-bg-secondary: rgb(32 32 32);
  --color-bg-tertiary: rgb(40 40 40);
  --color-bg-elevated: rgb(48 48 48);
  --color-surface: rgb(36 36 36);
  --color-surface-hover: rgb(52 52 52);
  --color-border: rgb(64 64 64);
  --color-border-light: rgb(72 72 72);
  --color-border-focus: rgb(80 80 80);
  --color-text: rgb(228 228 228);
  --color-text-bright: rgb(255 255 255);
  --color-text-muted: rgb(163 163 163);
  --color-text-dim: rgb(115 115 115);
  /* Primary and status colors remain the same */
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: rgb(23 23 23);
    --color-bg-secondary: rgb(32 32 32);
    --color-bg-tertiary: rgb(40 40 40);
    --color-bg-elevated: rgb(48 48 48);
    --color-surface: rgb(36 36 36);
    --color-surface-hover: rgb(52 52 52);
    --color-border: rgb(64 64 64);
    --color-border-light: rgb(72 72 72);
    --color-border-focus: rgb(80 80 80);
    --color-text: rgb(228 228 228);
    --color-text-bright: rgb(255 255 255);
    --color-text-muted: rgb(163 163 163);
    --color-text-dim: rgb(115 115 115);
  }
}

/* Global theme-aware styles */
@layer base {
  html {
    @apply bg-bg text-text;
    height: 100%;
    height: var(--app-height, 100%);
    overflow: hidden;
    overscroll-behavior: none;
  }
  
  body {
    @apply bg-bg text-text;
    transition: background-color 0.3s ease, color 0.3s ease;
    height: 100%;
    height: var(--app-height, 100%);
    overflow: hidden;
    /* Removed position:fixed as it can interfere with position:fixed children */
    width: 100%;
  }
  
  /* Checkbox styling */
  input[type="checkbox"] {
    @apply w-4 h-4 rounded border border-border bg-bg cursor-pointer;
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply checked:bg-primary checked:border-primary;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
  }
  
  input[type="checkbox"]:checked::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
  }
  
  /* Select element styling */
  select {
    @apply w-full rounded border border-border bg-bg cursor-pointer;
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply hover:border-primary/50;
    @apply px-3 py-2 pr-8;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
  }
  
  /* Dark mode select arrow */
  [data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }
  
  /* Textarea styling */
  textarea {
    @apply w-full rounded border border-border bg-bg;
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply hover:border-primary/50 focus:border-primary;
    @apply px-3 py-2;
    resize: vertical;
    min-height: 80px;
  }
  
  /* Radio button styling */
  input[type="radio"] {
    @apply w-4 h-4 border border-border bg-bg cursor-pointer;
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    appearance: none;
    border-radius: 50%;
    position: relative;
  }
  
  input[type="radio"]:checked {
    @apply bg-primary border-primary;
  }
  
  input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
  }
  
  /* File input styling */
  input[type="file"] {
    @apply w-full rounded border border-border bg-bg cursor-pointer;
    @apply transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply hover:border-primary/50;
    @apply px-3 py-2;
    @apply text-sm text-text;
  }
  
  input[type="file"]::file-selector-button {
    @apply mr-3 px-3 py-1 rounded bg-primary text-bg;
    @apply hover:bg-primary-hover;
    @apply cursor-pointer transition-colors duration-200;
    border: none;
    font-weight: 500;
  }
  
  /* Range input styling */
  input[type="range"] {
    @apply w-full h-2 bg-bg-tertiary rounded-lg appearance-none cursor-pointer;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 rounded-full bg-primary cursor-pointer;
    @apply hover:bg-primary-hover transition-colors duration-200;
    @apply shadow-sm hover:shadow-md;
  }
  
  input[type="range"]::-moz-range-thumb {
    @apply appearance-none w-4 h-4 rounded-full bg-primary cursor-pointer;
    @apply hover:bg-primary-hover transition-colors duration-200;
    @apply shadow-sm hover:shadow-md;
    border: none;
  }
  

  /* Default focus styles */
  :focus {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.3);
  }

  /* iOS Safe Area Support */
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-area-left {
    padding-left: env(safe-area-inset-left);
  }

  .safe-area-right {
    padding-right: env(safe-area-inset-right);
  }
}

/* Custom components */
@layer components {
  /* Glowing terminal icon */
  .terminal-icon {
    @apply text-primary;
    filter: drop-shadow(0 0 10px rgb(var(--color-primary) / 0.6));
  }

  /* Input fields with unified style */
  .input-field {
    @apply bg-bg-secondary border border-border rounded-lg px-4 py-3 text-text w-full;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:border-primary/50 focus:border-primary;
    @apply focus:shadow-glow-sm focus:outline-none;
    @apply text-left placeholder:text-text-muted;
  }

  /* Unified button styles */
  .btn {
    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-sm {
    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply px-3 py-1.5 text-sm;
  }
  
  .btn-md {
    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply px-4 py-2;
  }
  
  .btn-lg {
    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply px-6 py-3 text-lg;
  }

  .btn-primary {
    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply px-4 py-2 bg-primary text-bg;
    @apply hover:bg-primary-hover hover:shadow-glow;
    @apply active:scale-95;
  }

  .btn-secondary {
    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply px-4 py-2 border border-primary text-primary;
    @apply hover:bg-primary/10 hover:border-primary-hover hover:shadow-glow-sm;
    @apply active:scale-95;
  }

  .btn-ghost {
    @apply font-medium rounded-lg transition-all duration-200 ease-in-out;
    @apply focus:outline-none focus:ring-2 focus:ring-primary/50;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply px-4 py-2 text-text-muted;
    @apply hover:text-text hover:bg-bg-tertiary;
  }

  /* Enhanced card styles */
  .card {
    @apply bg-bg-secondary border border-border rounded-lg p-0;
    @apply transition-all duration-300 ease-out shadow-sm;
    @apply hover:border-border-light hover:shadow-lg hover:-translate-y-1;
    position: relative;
    overflow: hidden;
    /* Ensure cards have proper z-index for hover */
    z-index: 1;
    /* Ensure proper box sizing and prevent overflow */
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
  }
  
  .card:hover {
    z-index: 10;
  }
  
  /* Card glow effect for active sessions */
  .card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgb(var(--color-primary) / 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
    z-index: -1;
  }
  
  .card:hover::before {
    opacity: 1;
  }
  
  .card-elevated {
    @apply bg-bg-elevated rounded-xl p-6 shadow-card;
    @apply hover:shadow-elevated hover:bg-surface-hover;
    @apply transition-all duration-200;
  }
  
  /* Status badges */
  .status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .status-badge-success {
    @apply bg-status-success/20 text-status-success;
  }
  
  .status-badge-warning {
    @apply bg-status-warning/20 text-status-warning;
  }
  
  .status-badge-error {
    @apply bg-status-error/20 text-status-error;
  }
  
  .status-badge-info {
    @apply bg-status-info/20 text-status-info;
  }

  /* Quick start buttons */
  .quick-start-btn {
    @apply bg-bg-tertiary border border-border rounded-lg px-4 py-3 h-12;
    @apply transition-all duration-200 ease-in-out text-text-muted;
    @apply hover:border-primary hover:text-primary hover:shadow-glow-sm;
    @apply active:scale-95;
    touch-action: manipulation; /* Eliminates 300ms delay */
    -webkit-tap-highlight-color: transparent;
  }

  .quick-start-btn.active {
    @apply bg-primary text-bg border-primary shadow-glow-sm;
  }

  /* Modal backdrop */
  .modal-backdrop {
    @apply fixed inset-0 bg-bg/80;
    z-index: 1000;
    /* Disable all transitions and animations */
    transition: none !important;
    animation: none !important;
  }

  /* Modal content */
  .modal-content {
    @apply bg-bg-secondary border border-border rounded-xl;
    @apply shadow-2xl;
    position: relative;
    z-index: 1001;
    /* Disable all transitions and animations */
    transition: none !important;
    animation: none !important;
  }

  /* Modal positioning when used as sibling to backdrop */
  .modal-positioned {
    @apply fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
    @apply max-h-[calc(100vh-2rem)];
    @apply overflow-y-auto;
    z-index: 1001; /* Ensure it's above the backdrop */
  }

  /* Labels */
  .form-label {
    @apply text-text-muted text-sm font-medium mb-2 flex items-center gap-2;
  }

  /* Enhanced responsive session grid layout */
  .session-flex-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 400px;
    gap: 1.5rem;
    padding: 0.5rem 0.75rem;
    /* Enable smooth grid transitions - disabled in session view */
    transition: grid-template-columns 0.3s ease-out;
  }
  
  /* Disable grid transitions in session view */
  body.in-session-view .session-flex-responsive {
    transition: none !important;
  }

  .session-flex-responsive > * {
    height: 100%;
    /* Allow overflow for hover effects */
    overflow: visible;
  }

  /* Adjust grid for smaller tablets and large phones */
  @media (max-width: 768px) {
    .session-flex-responsive {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      grid-auto-rows: 380px;
      gap: 1rem;
      padding: 0.5rem;
    }
  }
  
  /* Single column layout for small screens */
  @media (max-width: 540px) {
    .session-flex-responsive {
      grid-template-columns: minmax(0, 1fr);
      grid-auto-rows: auto;  /* Let cards size themselves */
      gap: 0.875rem;
      padding: 0 1rem;  /* Consistent horizontal padding */
      width: 100%;
      box-sizing: border-box;
    }
    
    /* Ensure cards respect viewport width */
    .session-flex-responsive > * {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      min-height: 280px;
      max-height: 400px;
      aspect-ratio: 4/3;  /* Maintain aspect ratio */
    }
  }
  
  /* Small phones - more aggressive constraints */
  @media (max-width: 420px) {
    .session-flex-responsive {
      padding: 0 0.75rem;  /* 12px padding each side */
      gap: 0.75rem;
    }
    
    .session-flex-responsive > * {
      min-height: 260px;
      max-height: 360px;
    }
  }
  
  /* Extra small screens - maximum space efficiency */
  @media (max-width: 380px) {
    .session-flex-responsive {
      padding: 0 0.625rem;  /* 10px padding each side */
      gap: 0.625rem;
    }
    
    .session-flex-responsive > * {
      min-height: 240px;
      max-height: 320px;
      aspect-ratio: 16/11;  /* Slightly wider for small screens */
    }
  }

  /* Enhanced authentication styles */
  .auth-container {
    @apply bg-gradient-to-br from-bg to-bg-secondary flex items-center justify-center p-4;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
  }

  @media (max-width: 768px) {
    .auth-container {
      @apply py-6; /* Comfortable vertical padding on mobile */
      min-height: 100vh;
      min-height: 100dvh;
      /* Prevent scrolling - content should fit */
      overflow: hidden;
    }
  }

  .auth-header {
    @apply text-center mb-2;
  }

  .auth-title {
    @apply text-3xl font-mono font-bold text-text-bright;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
  }

  .auth-subtitle {
    @apply text-text-muted font-mono text-xs;
  }

  .auth-form {
    @apply bg-bg-elevated border border-border rounded-xl shadow-card p-0 w-full;
  }

  .auth-divider {
    @apply relative text-center text-text-muted font-mono text-sm;
  }

  .auth-divider::before {
    @apply absolute top-1/2 left-0 w-full h-px bg-border;
    content: '';
    transform: translateY(-50%);
  }

  .auth-divider span {
    @apply bg-bg-secondary px-4;
  }

  /* SSH Key Manager styles */
  .ssh-key-item {
    @apply bg-bg border-0 rounded-lg p-6;
    @apply transition-all duration-200 ease-in-out;
  }

  .badge {
    @apply px-2 py-1 rounded text-xs font-mono font-semibold;
  }

  .badge-rsa {
    @apply bg-status-info text-bg-elevated;
  }

  .badge-ed25519 {
    @apply bg-primary text-bg-elevated;
  }
}

/* Width selector specific styles */
.width-selector-container {
  @apply backdrop-blur-sm;
}

/* Ensure width selector button doesn't get clipped */
.width-selector-button {
  position: relative;
}

/* Micro-interactions and animations */
@layer utilities {
  /* Hide scrollbar for webkit browsers */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  /* Smooth transitions for interactive elements */
  .interactive {
    @apply transition-all duration-200 ease-out;
  }
  
  .interactive-fast {
    @apply transition-all duration-150 ease-out;
  }
  
  .interactive-slow {
    @apply transition-all duration-300 ease-out;
  }
  
  /* Hover lift effect for cards */
  .hover-lift {
    @apply transition-transform duration-200 ease-out;
  }
  
  .hover-lift:hover {
    @apply -translate-y-0.5 shadow-elevated;
  }
  
  /* Hover glow effect */
  .hover-glow:hover {
    @apply shadow-glow;
  }
  
  .hover-glow-sm:hover {
    @apply shadow-glow-sm;
  }
  
  .hover-glow-lg:hover {
    @apply shadow-glow-lg;
  }
  
  /* Focus within styles */
  .focus-within-glow:focus-within {
    @apply shadow-glow-sm ring-2 ring-primary/50;
  }
  
  /* Smooth color transitions */
  .transition-colors-all {
    @apply transition-colors duration-200 ease-out;
  }
  
  /* Scale on click */
  .active-scale:active {
    @apply scale-95;
  }
  
  /* Pulse animation utility */
  .pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: .7;
    }
  }
  
  /* Slide animations */
  .slide-in-from-right {
    animation: slideInFromRight 0.3s ease-out;
  }
  
  .slide-in-from-bottom {
    animation: slideInFromBottom 0.3s ease-out;
  }
  
  .animate-slide-in-right {
    animation: slideInFromRight 0.3s ease-out;
  }
  
  @keyframes slideInFromRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInFromBottom {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* Fira Code Variable Font */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src:
    url('/fonts/FiraCode-VF.woff2') format('woff2-variations'),
    url('/fonts/FiraCode-VF.ttf') format('truetype-variations');
  font-variation-settings: 'wght' 400;
}

/* Hack Nerd Font */
@font-face {
  font-family: 'Hack Nerd Font Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/HackNerdFontMono-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Hack Nerd Font Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/HackNerdFontMono-Bold.ttf') format('truetype');
}

/* Override Tailwind's font-mono to use Hack Nerd Font */
.font-mono {
  font-family:
    'Hack Nerd Font Mono', 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Consolas,
    'Liberation Mono', Menlo, monospace !important;
}

/* Mobile scroll and touch behavior fixes */
:root {
  /* Default to 100dvh, will be overridden by JS for iOS Safari */
  --app-height: 100dvh;
}

html {
  overscroll-behavior: none;
  /* Prevent html from scrolling/bouncing on iOS */
  overflow: hidden;
  width: 100%;
  /* Use CSS custom property updated by visualViewport API */
  height: var(--app-height);
  min-height: var(--app-height);
  /* Prevent any margin/padding that could cause gaps */
  margin: 0;
  padding: 0;
}

body {
  overscroll-behavior: none;
  /* Use auto instead of touch to prevent rubber band scrolling */
  -webkit-overflow-scrolling: auto;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /* NO position:fixed here - it breaks position:fixed children */
  margin: 0;
  padding: 0;
}

/* Grid layout touch optimization for session view */
.session-view-grid {
  /* Removed contain and will-change to allow position:fixed children to work correctly */
}

.terminal-area {
  /* Removed contain:strict as it breaks position:fixed for quick keys */
  isolation: isolate;
  touch-action: pan-y;
  /* Ensure terminal area can be scrolled independently */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.overlay-container {
  /* Removed contain to allow position:fixed children */
  isolation: isolate;
}

/* Ensure touch targets in overlay are stable */
.overlay-container button,
.overlay-container [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent pull-to-refresh on mobile */
body {
  /* Changed from contain to none to prevent black gap on iOS */
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

/* Set body and html background to match quick keys when keyboard is visible */
html[data-keyboard-visible="true"],
body[data-keyboard-visible="true"] {
  background-color: rgb(var(--color-bg-secondary));
}


/* iOS Safari specific fixes for split view */
@supports (-webkit-touch-callout: none) {
  /* Target iOS Safari only */
  .h-screen {
    height: 100vh;
    height: -webkit-fill-available;
  }

  /* Prevent rubber band scrolling in split view */
  .ios-split-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
  }

  .ios-split-view > * {
    -webkit-overflow-scrolling: touch;
  }
}

/* Terminal-specific touch handling */
.xterm {
  touch-action: pan-y;
  overscroll-behavior: none;
}

.xterm .xterm-viewport {
  touch-action: pan-y;
  /* Prevent overscroll bounce that creates black gap below quick keys */
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

/* Fix XTerm text span touch scrolling issues */
.xterm .xterm-rows span {
  touch-action: pan-y;
}

.xterm .xterm-screen {
  touch-action: pan-y;
}

/* More aggressive fix for session cards (read-only snapshots) */
.session-preview .xterm .xterm-rows span {
  pointer-events: none;
  touch-action: pan-y;
}
/* Terminal owns one-finger vertical pans; preserve two-finger pinch zoom. */
#terminal-container {
  touch-action: pinch-zoom;
  overscroll-behavior: none;
}

/* Disable scroll while selecting text on mobile */
.terminal-scroll-container.selecting-text {
  touch-action: none;
  overflow: hidden;
}

/* Session cards - prevent pull-to-refresh */
.session-card {
  overscroll-behavior: none;
  /* Ensure session cards don't overflow their container */
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

/* Ensure all elements inside session cards respect width constraints */
.session-card * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

/* Prevent terminal previews from forcing card width */
.session-card .terminal-preview,
.session-card .session-preview {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Mobile-specific card constraints */
@media (max-width: 540px) {
  .session-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  
  /* Ensure card content doesn't overflow */
  .session-card .card-content,
  .session-card .terminal-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}

/* Session grid flow animations */
body.sessions-showing .session-flex-responsive > session-card {
  animation: sessionFlow 0.2s ease-out backwards;
}

/* Disable ALL animations when in session view */
body.in-session-view .session-flex-responsive > session-card,
body.in-session-view .space-y-2 > div {
  animation: none !important;
  animation-delay: 0s !important;
}

/* Disable all transitions on buttons in session view */
body.in-session-view button {
  transition: none !important;
}

/* Disable transitions on all interactive elements in session view */
body.in-session-view .transition-all,
body.in-session-view .transition-colors,
body.in-session-view .transition-opacity,
body.in-session-view .transition-transform {
  transition: none !important;
}

/* Disable modal backdrop animation in session view */
body.in-session-view .modal-backdrop {
  animation: none !important;
}

/* Stagger animation when showing exited sessions */
body.sessions-showing .session-flex-responsive > session-card:nth-child(1) {
  animation-delay: 0s;
}
body.sessions-showing .session-flex-responsive > session-card:nth-child(2) {
  animation-delay: 0.025s;
}
body.sessions-showing .session-flex-responsive > session-card:nth-child(3) {
  animation-delay: 0.05s;
}
body.sessions-showing .session-flex-responsive > session-card:nth-child(4) {
  animation-delay: 0.075s;
}
body.sessions-showing .session-flex-responsive > session-card:nth-child(5) {
  animation-delay: 0.1s;
}
body.sessions-showing .session-flex-responsive > session-card:nth-child(6) {
  animation-delay: 0.125s;
}
body.sessions-showing .session-flex-responsive > session-card:nth-child(7) {
  animation-delay: 0.15s;
}
body.sessions-showing .session-flex-responsive > session-card:nth-child(8) {
  animation-delay: 0.175s;
}
body.sessions-showing .session-flex-responsive > session-card:nth-child(n + 9) {
  animation-delay: 0.2s;
}

/* Compact mode animations */
body.sessions-showing .space-y-2 > div {
  animation: sessionFlow 0.2s ease-out backwards;
}

body.sessions-showing .space-y-2 > div:nth-child(1) {
  animation-delay: 0s;
}
body.sessions-showing .space-y-2 > div:nth-child(2) {
  animation-delay: 0.025s;
}
body.sessions-showing .space-y-2 > div:nth-child(3) {
  animation-delay: 0.05s;
}
body.sessions-showing .space-y-2 > div:nth-child(4) {
  animation-delay: 0.075s;
}
body.sessions-showing .space-y-2 > div:nth-child(5) {
  animation-delay: 0.1s;
}
body.sessions-showing .space-y-2 > div:nth-child(6) {
  animation-delay: 0.125s;
}
body.sessions-showing .space-y-2 > div:nth-child(7) {
  animation-delay: 0.15s;
}
body.sessions-showing .space-y-2 > div:nth-child(8) {
  animation-delay: 0.175s;
}
body.sessions-showing .space-y-2 > div:nth-child(n + 9) {
  animation-delay: 0.2s;
}

/* Session grid hide animations */
body.sessions-hiding .session-flex-responsive > session-card {
  animation: sessionHide 0.2s ease-in forwards;
}

/* Stagger animation when hiding sessions */
body.sessions-hiding .session-flex-responsive > session-card:nth-child(1) {
  animation-delay: 0s;
}
body.sessions-hiding .session-flex-responsive > session-card:nth-child(2) {
  animation-delay: 0.025s;
}
body.sessions-hiding .session-flex-responsive > session-card:nth-child(3) {
  animation-delay: 0.05s;
}
body.sessions-hiding .session-flex-responsive > session-card:nth-child(4) {
  animation-delay: 0.075s;
}
body.sessions-hiding .session-flex-responsive > session-card:nth-child(5) {
  animation-delay: 0.1s;
}
body.sessions-hiding .session-flex-responsive > session-card:nth-child(6) {
  animation-delay: 0.125s;
}
body.sessions-hiding .session-flex-responsive > session-card:nth-child(7) {
  animation-delay: 0.15s;
}
body.sessions-hiding .session-flex-responsive > session-card:nth-child(8) {
  animation-delay: 0.175s;
}
body.sessions-hiding .session-flex-responsive > session-card:nth-child(n + 9) {
  animation-delay: 0.2s;
}

/* Compact mode hide animations */
body.sessions-hiding .space-y-2 > div {
  animation: sessionHide 0.2s ease-in forwards;
}

body.sessions-hiding .space-y-2 > div:nth-child(1) {
  animation-delay: 0s;
}
body.sessions-hiding .space-y-2 > div:nth-child(2) {
  animation-delay: 0.025s;
}
body.sessions-hiding .space-y-2 > div:nth-child(3) {
  animation-delay: 0.05s;
}
body.sessions-hiding .space-y-2 > div:nth-child(4) {
  animation-delay: 0.075s;
}
body.sessions-hiding .space-y-2 > div:nth-child(5) {
  animation-delay: 0.1s;
}
body.sessions-hiding .space-y-2 > div:nth-child(6) {
  animation-delay: 0.125s;
}
body.sessions-hiding .space-y-2 > div:nth-child(7) {
  animation-delay: 0.15s;
}
body.sessions-hiding .space-y-2 > div:nth-child(8) {
  animation-delay: 0.175s;
}
body.sessions-hiding .space-y-2 > div:nth-child(n + 9) {
  animation-delay: 0.2s;
}

@keyframes sessionFlow {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sessionHide {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

/* Initial session load animation */
@keyframes initialLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply fade animation to session cards during initial load */
body.initial-session-load .session-flex-responsive > session-card {
  animation: initialLoad 0.4s ease-out backwards;
}

/* Stagger animation for initial load */
body.initial-session-load .session-flex-responsive > session-card:nth-child(1) {
  animation-delay: 0s;
}
body.initial-session-load .session-flex-responsive > session-card:nth-child(2) {
  animation-delay: 0.05s;
}
body.initial-session-load .session-flex-responsive > session-card:nth-child(3) {
  animation-delay: 0.1s;
}
body.initial-session-load .session-flex-responsive > session-card:nth-child(4) {
  animation-delay: 0.15s;
}
body.initial-session-load .session-flex-responsive > session-card:nth-child(5) {
  animation-delay: 0.2s;
}
body.initial-session-load .session-flex-responsive > session-card:nth-child(6) {
  animation-delay: 0.25s;
}
body.initial-session-load .session-flex-responsive > session-card:nth-child(7) {
  animation-delay: 0.3s;
}
body.initial-session-load .session-flex-responsive > session-card:nth-child(8) {
  animation-delay: 0.35s;
}
body.initial-session-load .session-flex-responsive > session-card:nth-child(n + 9) {
  animation-delay: 0.4s;
}


@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* View transition names for smoother morphing */
.session-card {
  view-transition-name: session-card;
}

/* Ensure unique view-transition-names */
.session-card[data-session-id] {
  view-transition-name: var(--session-id);
}

/* App header - prevent pull-to-refresh when scrolling starts from header */
.app-header {
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}

/* Enhanced terminal container styling */
.terminal-container {
  overflow: hidden;
}

/* Terminal container theme styling */
[data-theme="dark"] .terminal-container,
:root:not([data-theme="light"]) .terminal-container {
  /* Terminal colors are handled by ghostty-web */
}

/* Light theme terminal container styling */
[data-theme="light"] .terminal-container {
  /* Terminal colors are handled by ghostty-web */
  /* Removed border and border-radius to prevent double-line effect with card borders */
}

/* Terminal line styling */
.terminal-line {
  display: block;
  white-space: pre;
  overflow: hidden;
}

/* Terminal character specific styling */
.terminal-char {
  display: inline-block;
  font-family: inherit;
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0;
  white-space: pre;
}

/* Terminal text decoration support */
.terminal-char.bold {
  font-weight: bold;
}

.terminal-char.italic {
  font-style: italic;
}

.terminal-char.underline {
  text-decoration: underline;
}

.terminal-char.dim {
  opacity: 0.5;
}

.terminal-char.strikethrough {
  text-decoration: line-through;
}

.terminal-char.overline {
  text-decoration: overline;
}

.terminal-char.inverse {
  filter: invert(1);
}

.terminal-char.invisible {
  opacity: 0;
}

/* Enhanced cursor styling */
.terminal-char.cursor {
  animation: cursor-blink 1s infinite;
  background-color: #23d18b !important; /* Green cursor */
  color: #000000 !important; /* Black text on cursor */
}

@keyframes cursor-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.3;
  }
}

[data-theme="light"] .session-card .terminal-container {
  /* Removed border and box-shadow to prevent double-line effect with card borders */
}

/* Ensure terminal container has proper size */
#terminal-player,
#interactive-terminal {
  min-height: 480px;
  min-width: 640px;
  width: 100%;
}

/* Enhanced terminal focus indicator */
.terminal-focused {
  box-shadow: 0 0 0 2px rgb(var(--color-primary)), 0 0 20px rgb(var(--color-primary) / 0.3);
  border-color: rgb(var(--color-primary)) !important;
  transition: all 0.2s ease-out;
}

/* Enhanced keyboard capture indicator */
.keyboard-capture-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgb(var(--color-primary) / 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(var(--color-primary));
  color: rgb(var(--color-primary));
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  z-index: 1000;
  animation: slideInFromTop 0.3s ease-out;
  box-shadow: 0 2px 8px rgb(var(--color-primary) / 0.2);
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.session-preview {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Terminal color palette - Bright colors for dark backgrounds */
:root {
  --terminal-color-0: #000000;
  --terminal-color-1: #f14c4c;
  --terminal-color-2: #23d18b;
  --terminal-color-3: #f5f543;
  --terminal-color-4: #3b8eea;
  --terminal-color-5: #d670d6;
  --terminal-color-6: #29b8db;
  --terminal-color-7: #e5e5e5;
  --terminal-color-8: #666666;
  --terminal-color-9: #ff6b6b;
  --terminal-color-10: #5af78e;
  --terminal-color-11: #f4f99d;
  --terminal-color-12: #70a5ed;
  --terminal-color-13: #d670d6;
  --terminal-color-14: #5fb3d3;
  --terminal-color-15: #ffffff;
  --terminal-color-16: #000000;
  --terminal-color-17: #00005f;
  --terminal-color-18: #000087;
  --terminal-color-19: #0000af;
  --terminal-color-20: #0000d7;
  --terminal-color-21: #0000ff;
  --terminal-color-22: #005f00;
  --terminal-color-23: #005f5f;
  --terminal-color-24: #005f87;
  --terminal-color-25: #005faf;
  --terminal-color-26: #005fd7;
  --terminal-color-27: #005fff;
  --terminal-color-28: #008700;
  --terminal-color-29: #00875f;
  --terminal-color-30: #008787;
  --terminal-color-31: #0087af;
  --terminal-color-32: #0087d7;
  --terminal-color-33: #0087ff;
  --terminal-color-34: #00af00;
  --terminal-color-35: #00af5f;
  --terminal-color-36: #00af87;
  --terminal-color-37: #00afaf;
  --terminal-color-38: #00afd7;
  --terminal-color-39: #00afff;
  --terminal-color-40: #00d700;
  --terminal-color-41: #00d75f;
  --terminal-color-42: #00d787;
  --terminal-color-43: #00d7af;
  --terminal-color-44: #00d7d7;
  --terminal-color-45: #00d7ff;
  --terminal-color-46: #00ff00;
  --terminal-color-47: #00ff5f;
  --terminal-color-48: #00ff87;
  --terminal-color-49: #00ffaf;
  --terminal-color-50: #00ffd7;
  --terminal-color-51: #00ffff;
  --terminal-color-52: #5f0000;
  --terminal-color-53: #5f005f;
  --terminal-color-54: #5f0087;
  --terminal-color-55: #5f00af;
  --terminal-color-56: #5f00d7;
  --terminal-color-57: #5f00ff;
  --terminal-color-58: #5f5f00;
  --terminal-color-59: #5f5f5f;
  --terminal-color-60: #5f5f87;
  --terminal-color-61: #5f5faf;
  --terminal-color-62: #5f5fd7;
  --terminal-color-63: #5f5fff;
  --terminal-color-64: #5f8700;
  --terminal-color-65: #5f875f;
  --terminal-color-66: #5f8787;
  --terminal-color-67: #5f87af;
  --terminal-color-68: #5f87d7;
  --terminal-color-69: #5f87ff;
  --terminal-color-70: #5faf00;
  --terminal-color-71: #5faf5f;
  --terminal-color-72: #5faf87;
  --terminal-color-73: #5fafaf;
  --terminal-color-74: #5fafd7;
  --terminal-color-75: #5fafff;
  --terminal-color-76: #5fd700;
  --terminal-color-77: #5fd75f;
  --terminal-color-78: #5fd787;
  --terminal-color-79: #5fd7af;
  --terminal-color-80: #5fd7d7;
  --terminal-color-81: #5fd7ff;
  --terminal-color-82: #5fff00;
  --terminal-color-83: #5fff5f;
  --terminal-color-84: #5fff87;
  --terminal-color-85: #5fffaf;
  --terminal-color-86: #5fffd7;
  --terminal-color-87: #5fffff;
  --terminal-color-88: #870000;
  --terminal-color-89: #87005f;
  --terminal-color-90: #870087;
  --terminal-color-91: #8700af;
  --terminal-color-92: #8700d7;
  --terminal-color-93: #8700ff;
  --terminal-color-94: #875f00;
  --terminal-color-95: #875f5f;
  --terminal-color-96: #875f87;
  --terminal-color-97: #875faf;
  --terminal-color-98: #875fd7;
  --terminal-color-99: #875fff;
  --terminal-color-100: #878700;
  --terminal-color-101: #87875f;
  --terminal-color-102: #878787;
  --terminal-color-103: #8787af;
  --terminal-color-104: #8787d7;
  --terminal-color-105: #8787ff;
  --terminal-color-106: #87af00;
  --terminal-color-107: #87af5f;
  --terminal-color-108: #87af87;
  --terminal-color-109: #87afaf;
  --terminal-color-110: #87afd7;
  --terminal-color-111: #87afff;
  --terminal-color-112: #87d700;
  --terminal-color-113: #87d75f;
  --terminal-color-114: #87d787;
  --terminal-color-115: #87d7af;
  --terminal-color-116: #87d7d7;
  --terminal-color-117: #87d7ff;
  --terminal-color-118: #87ff00;
  --terminal-color-119: #87ff5f;
  --terminal-color-120: #87ff87;
  --terminal-color-121: #87ffaf;
  --terminal-color-122: #87ffd7;
  --terminal-color-123: #87ffff;
  --terminal-color-124: #af0000;
  --terminal-color-125: #af005f;
  --terminal-color-126: #af0087;
  --terminal-color-127: #af00af;
  --terminal-color-128: #af00d7;
  --terminal-color-129: #af00ff;
  --terminal-color-130: #af5f00;
  --terminal-color-131: #af5f5f;
  --terminal-color-132: #af5f87;
  --terminal-color-133: #af5faf;
  --terminal-color-134: #af5fd7;
  --terminal-color-135: #af5fff;
  --terminal-color-136: #af8700;
  --terminal-color-137: #af875f;
  --terminal-color-138: #af8787;
  --terminal-color-139: #af87af;
  --terminal-color-140: #af87d7;
  --terminal-color-141: #af87ff;
  --terminal-color-142: #afaf00;
  --terminal-color-143: #afaf5f;
  --terminal-color-144: #afaf87;
  --terminal-color-145: #afafaf;
  --terminal-color-146: #afafd7;
  --terminal-color-147: #afafff;
  --terminal-color-148: #afd700;
  --terminal-color-149: #afd75f;
  --terminal-color-150: #afd787;
  --terminal-color-151: #afd7af;
  --terminal-color-152: #afd7d7;
  --terminal-color-153: #afd7ff;
  --terminal-color-154: #afff00;
  --terminal-color-155: #afff5f;
  --terminal-color-156: #afff87;
  --terminal-color-157: #afffaf;
  --terminal-color-158: #afffd7;
  --terminal-color-159: #afffff;
  --terminal-color-160: #d70000;
  --terminal-color-161: #d7005f;
  --terminal-color-162: #d70087;
  --terminal-color-163: #d700af;
  --terminal-color-164: #d700d7;
  --terminal-color-165: #d700ff;
  --terminal-color-166: #d75f00;
  --terminal-color-167: #d75f5f;
  --terminal-color-168: #d75f87;
  --terminal-color-169: #d75faf;
  --terminal-color-170: #d75fd7;
  --terminal-color-171: #d75fff;
  --terminal-color-172: #d78700;
  --terminal-color-173: #d7875f;
  --terminal-color-174: #d78787;
  --terminal-color-175: #d787af;
  --terminal-color-176: #d787d7;
  --terminal-color-177: #d787ff;
  --terminal-color-178: #d7af00;
  --terminal-color-179: #d7af5f;
  --terminal-color-180: #d7af87;
  --terminal-color-181: #d7afaf;
  --terminal-color-182: #d7afd7;
  --terminal-color-183: #d7afff;
  --terminal-color-184: #d7d700;
  --terminal-color-185: #d7d75f;
  --terminal-color-186: #d7d787;
  --terminal-color-187: #d7d7af;
  --terminal-color-188: #d7d7d7;
  --terminal-color-189: #d7d7ff;
  --terminal-color-190: #d7ff00;
  --terminal-color-191: #d7ff5f;
  --terminal-color-192: #d7ff87;
  --terminal-color-193: #d7ffaf;
  --terminal-color-194: #d7ffd7;
  --terminal-color-195: #d7ffff;
  --terminal-color-196: #ff0000;
  --terminal-color-197: #ff005f;
  --terminal-color-198: #ff0087;
  --terminal-color-199: #ff00af;
  --terminal-color-200: #ff00d7;
  --terminal-color-201: #ff00ff;
  --terminal-color-202: #ff5f00;
  --terminal-color-203: #ff5f5f;
  --terminal-color-204: #ff5f87;
  --terminal-color-205: #ff5faf;
  --terminal-color-206: #ff5fd7;
  --terminal-color-207: #ff5fff;
  --terminal-color-208: #ff8700;
  --terminal-color-209: #ff875f;
  --terminal-color-210: #ff8787;
  --terminal-color-211: #ff87af;
  --terminal-color-212: #ff87d7;
  --terminal-color-213: #ff87ff;
  --terminal-color-214: #ffaf00;
  --terminal-color-215: #ffaf5f;
  --terminal-color-216: #ffaf87;
  --terminal-color-217: #ffafaf;
  --terminal-color-218: #ffafd7;
  --terminal-color-219: #ffafff;
  --terminal-color-220: #ffd700;
  --terminal-color-221: #ffd75f;
  --terminal-color-222: #ffd787;
  --terminal-color-223: #ffd7af;
  --terminal-color-224: #ffd7d7;
  --terminal-color-225: #ffd7ff;
  --terminal-color-226: #ffff00;
  --terminal-color-227: #ffff5f;
  --terminal-color-228: #ffff87;
  --terminal-color-229: #ffffaf;
  --terminal-color-230: #ffffd7;
  --terminal-color-231: #ffffff;
  --terminal-color-232: #080808;
  --terminal-color-233: #121212;
  --terminal-color-234: #1c1c1c;
  --terminal-color-235: #262626;
  --terminal-color-236: #303030;
  --terminal-color-237: #3a3a3a;
  --terminal-color-238: #444444;
  --terminal-color-239: #4e4e4e;
  --terminal-color-240: #585858;
  --terminal-color-241: #626262;
  --terminal-color-242: #6c6c6c;
  --terminal-color-243: #767676;
  --terminal-color-244: #808080;
  --terminal-color-245: #8a8a8a;
  --terminal-color-246: #949494;
  --terminal-color-247: #9e9e9e;
  --terminal-color-248: #a8a8a8;
  --terminal-color-249: #b2b2b2;
  --terminal-color-250: #bcbcbc;
  --terminal-color-251: #c6c6c6;
  --terminal-color-252: #d0d0d0;
  --terminal-color-253: #dadada;
  --terminal-color-254: #e4e4e4;
  --terminal-color-255: #eeeeee;
}

/* Terminal link styling */
.terminal-link {
  color: #4fc3f7;
  text-decoration: underline;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.terminal-link:hover {
  background-color: rgba(79, 195, 247, 0.2);
}

/* Floating action buttons with backdrop blur */
.scroll-to-bottom,
.keyboard-button {
  @apply absolute flex items-center justify-center;
  @apply w-12 h-12 rounded-md;
  @apply bg-bg/20 border border-border/50;
  @apply text-text text-2xl;
  @apply cursor-pointer select-none;
  @apply transition-all duration-200;
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Position scroll button */
.scroll-to-bottom {
  @apply bottom-3 left-3 z-10;
}

/* Position keyboard button */
.keyboard-button {
  @apply fixed;
  /* Higher z-index than quick keys (48) to appear above them */
  z-index: 60;
  /* Default positioning - bottom right */
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  /* Ensure button is always touchable */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Prevent touch delays */
  -webkit-touch-callout: none;
  user-select: none;
  /* Smooth transition when quick keys appear */
  transition: bottom 0.2s ease-in-out;
  
  /* Mobile-specific enhancements */
  min-width: 48px; /* Ensure minimum touch target size */
  min-height: 48px;
  
  /* Make it more prominent with enhanced styling */
  @apply bg-primary/30 border-primary/60 text-primary;
  backdrop-filter: blur(16px) saturate(2);
  -webkit-backdrop-filter: blur(16px) saturate(2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--color-primary), 0.4);
  
  /* Add subtle pulse animation to make it more noticeable */
  animation: keyboard-button-pulse 4s ease-in-out infinite;
}

/* Enhanced mobile keyboard button */
.mobile-keyboard-button {
  /* Make it larger and more prominent on mobile */
  @apply w-20 h-16; /* Wider and taller for text */
  border-radius: 12px; /* More rounded corners */
  
  /* Enhanced visual feedback */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Add stronger border for better visibility */
  border-width: 2px;
  
  /* More prominent background on mobile */
  @apply bg-primary/40 border-primary/80;
}

/* Add a glow effect on mobile for better visibility */
@media (max-width: 768px) {
  .mobile-keyboard-button {
    /* Stronger shadow for mobile */
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.6), 
      0 0 20px rgba(var(--color-primary), 0.5),
      inset 0 0 10px rgba(var(--color-primary), 0.2);
  }
  
  /* Make the pulse more noticeable on mobile */
  @keyframes keyboard-button-pulse-mobile {
    0%, 70%, 100% { 
      transform: scale(1);
      box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.6), 
        0 0 20px rgba(var(--color-primary), 0.5),
        inset 0 0 10px rgba(var(--color-primary), 0.2);
    }
    35% { 
      transform: scale(1.08);
      box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.7), 
        0 0 30px rgba(var(--color-primary), 0.7),
        inset 0 0 15px rgba(var(--color-primary), 0.3);
    }
  }
  
  .mobile-keyboard-button {
    animation: keyboard-button-pulse-mobile 3s ease-in-out infinite;
  }
}

/* Mobile tap-to-focus overlay for terminal */
.tap-to-focus-overlay {
  @apply absolute inset-0 z-10;
  @apply flex items-center justify-center;
  background: rgba(var(--color-bg), 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  /* Smooth transitions */
  transition: all 0.3s ease-out;
  
  /* Touch optimization */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.tap-to-focus-hint {
  @apply p-8 rounded-2xl;
  @apply bg-bg-elevated/90 border border-border/50;
  @apply shadow-lg;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Gentle breathing animation */
  animation: tap-hint-breathe 3s ease-in-out infinite;
}

@keyframes tap-hint-breathe {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.9;
  }
  50% { 
    transform: scale(1.02);
    opacity: 1;
  }
}

/* Hide overlay when user starts typing */
.tap-to-focus-overlay.keyboard-active {
  opacity: 0;
  pointer-events: none;
}

/* Move keyboard button up when quick keys are visible */
.keyboard-button.quick-keys-visible {
  /* Move above quick keys - approximately 100px for 3 rows of buttons */
  bottom: calc(100px + 0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Hover state for both buttons */
.scroll-to-bottom:hover,
.keyboard-button:hover {
  @apply bg-bg/40 border-primary text-primary;
  @apply -translate-y-0.5 shadow-glow-sm;
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
}

/* Active state for both buttons */
.scroll-to-bottom:active,
.keyboard-button:active {
  @apply translate-y-0;
}

/* Responsive keyboard button positioning for mobile orientations */
@media (max-width: 768px) and (orientation: portrait) {
  .keyboard-button {
    /* Center the button horizontally in portrait mode */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* Move it up a bit more to ensure visibility */
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  
  /* Maintain hover transform when centered */
  .keyboard-button:hover {
    transform: translateX(-50%) translateY(-0.125rem); /* -0.5 in Tailwind = -0.125rem */
  }
  
  .keyboard-button:active {
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .keyboard-button {
    /* In landscape, move button more to the left to ensure visibility */
    right: calc(2rem + env(safe-area-inset-right, 0px));
    /* Also move it up slightly */
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* For very small screens (like iPhone SE), make button more prominent */
@media (max-width: 380px) {
  .keyboard-button {
    /* Slightly smaller but still touchable */
    @apply w-18 h-14;
  }
}

/* Debug overlay */
.debug-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 8px 12px;
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  color: rgb(228 228 228); /* Always light for terminal */
  user-select: none;
  z-index: 10;
  line-height: 1.4;
}

.debug-overlay .metric {
  display: flex;
  justify-content: space-between;
  min-width: 120px;
}

.debug-overlay .metric-label {
  opacity: 0.7;
}

.debug-overlay .metric-value {
  font-weight: bold;
  margin-left: 8px;
}

/* Fit toggle button */
.fit-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgb(var(--color-text));
  font-size: 20px;
  transition: all 0.2s ease;
  user-select: none;
  z-index: 10;
}

.fit-toggle:hover {
  background: rgba(26, 26, 26, 1);
  border-color: #10B981;
  color: rgb(var(--color-primary));
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgb(var(--color-primary) / 0.3);
}

.fit-toggle:active {
  transform: translateY(0px);
}

.fit-toggle.active {
  border-color: #10B981;
  color: rgb(var(--color-primary));
  box-shadow: 0 0 10px rgb(var(--color-primary) / 0.3);
}

/* View Transitions */
@supports (view-transition-name: none) {
  ::view-transition {
    /* Set the transition duration to 0.2s */
    --transition-duration: 200ms;
  }

  ::view-transition-group(*) {
    animation-duration: var(--transition-duration);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: var(--transition-duration);
    mix-blend-mode: normal;
  }

  /* Specific styling for terminal transitions */
  ::view-transition-old(terminal-*) {
    animation: view-transition-fade-out var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  }

  ::view-transition-new(terminal-*) {
    animation: view-transition-fade-in var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes view-transition-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes view-transition-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* View Transitions for Create Session */
  ::view-transition-old(create-session-button),
  ::view-transition-new(create-session-button) {
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  ::view-transition-old(create-session-modal),
  ::view-transition-new(create-session-modal) {
    /* Handled by individual animations below */
    mix-blend-mode: normal;
    z-index: 1000;
  }




  /* Black hole collapse animation for session removal */
  @keyframes black-hole-collapse {
    0% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
      filter: brightness(1);
    }
    50% {
      transform: scale(0.3) rotate(180deg);
      opacity: 0.8;
      filter: brightness(0.6) hue-rotate(90deg);
    }
    100% {
      transform: scale(0) rotate(360deg);
      opacity: 0;
      filter: brightness(0) hue-rotate(180deg);
    }
  }

  /* Zoom animations for session navigation */
  @keyframes zoom-in {
    from {
      transform: scale(0.7);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes zoom-out {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(1.3);
      opacity: 0;
    }
  }

  /* Session navigation transitions */
  ::view-transition-old(session-*) {
    animation: zoom-out 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }

  ::view-transition-new(session-*) {
    animation: zoom-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }

  /* Black hole collapse animation class */
  .black-hole-collapsing {
    animation: black-hole-collapse 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
    transform-origin: center;
    pointer-events: none;
  }
}

/* Split view sidebar animations - DISABLED */
.sidebar-transition {
  /* transition: width var(--vt-transition-sidebar) cubic-bezier(0.25, 0.46, 0.45, 0.94); */
  transition: none !important;
}

/* Mobile sessions list slide animation - DISABLED */
@media (max-width: 768px) {
  .mobile-sessions-sidebar {
    /* transition: transform var(--vt-transition-mobile-slide) cubic-bezier(0.25, 0.46, 0.45, 0.94); */
    transition: none !important;
  }

  .mobile-sessions-sidebar.collapsed {
    transform: translateX(-100%);
  }

  .mobile-sessions-sidebar.expanded {
    transform: translateX(0);
  }
}

/* Ensure proper scrolling in split view - only scroll when needed */
.split-view-sidebar {
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden; /* Strictly prevent container scroll - same as session-view-grid */
  overscroll-behavior: none; /* Prevent iOS rubber-band scroll */
  touch-action: none; /* Disable browser handling of gestures on sidebar container */
  -webkit-overflow-scrolling: auto;
}

.split-view-root {
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  min-height: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none; /* Only children opt-in to pan */
  -webkit-overflow-scrolling: auto;
}

.split-view-sidebar .sidebar-scroll-area {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* Confine scroll bounce to the list */
  touch-action: pan-y; /* Allow vertical scrolling only */
  contain: layout style paint;
  -webkit-overflow-scrolling: touch;
}

/* Responsive breakpoints for split view */
@media (max-width: 768px) {
  /* On mobile, sidebar should take most of the width when expanded, leaving 80px for tap-to-close */
  .split-view-sidebar-expanded {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(100vw - 80px) !important;
    z-index: 30;
  }
}

/* Android keyboard fix for embedded applications like Claude Code */
@media (max-width: 768px) {
  /* When visualViewport changes due to keyboard, ensure terminal is scrollable */
  .terminal-container {
    position: relative;
    overflow: hidden;
  }

  /* When keyboard is visible, adjust the entire view to be scrollable */
  .session-view-grid[data-keyboard-visible="true"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure app content adjusts for keyboard using env() */
  .app-container,
  vibe-app,
  session-view {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height accounts for keyboard */
    max-height: 100dvh;
    overflow: hidden;
  }

  /* Additional helper for when keyboard height is detected */
  .session-view-grid[data-keyboard-visible="true"] .terminal-container {
    padding-bottom: env(keyboard-inset-height, 0);
  }
}

/* Phosphor Terminal Decay effect for exited sessions */
.session-exited {
  filter: sepia(0.3) hue-rotate(45deg) brightness(0.8) contrast(1.2);
  position: relative;
  transition: filter 0.5s ease-out;
}

.session-exited::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 20, 0, 0.4) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: phosphor-fade 2s ease-out;
}

@keyframes phosphor-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Additional subtle scanline effect for exited sessions */
.session-exited::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.03),
    rgba(0, 255, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  opacity: 0.5;
}

/* View transition animations for split view */
@view-transition {
  navigation: auto;
}

/* Fade transition for header elements during view transitions */
::view-transition-old(app-header),
::view-transition-new(app-header) {
  animation-duration: 0.3s;
  animation-timing-function: ease-in-out;
}

::view-transition-old(app-header) {
  animation-name: fade-out;
}

::view-transition-new(app-header) {
  animation-name: fade-in;
}


/* Disable morphing animations for sidebar elements */
.sidebar-header {
  view-transition-name: sidebar-header;
}

::view-transition-old(sidebar-header),
::view-transition-new(sidebar-header) {
  animation-duration: 0s !important;
}

/* Prevent header flicker during session transitions */
.app-header {
  view-transition-name: none !important;
}

@keyframes fade-out-fast {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade-in-fast {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Disable all button transitions in session view */
.session-view button,
.session-header button,
.sidebar-header button {
  transition: none !important;
}

/* Also disable transitions on interactive elements */
.session-view .interactive,
.session-view .interactive-fast,
.session-view .interactive-slow {
  transition: none !important;
}

.session-toggle-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

[data-theme="dark"] .session-toggle-checkbox {
  opacity: 0.9;
}

.session-toggle-checkbox:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===== Phase 1: Mobile Terminal Layout ===== */

/* Mobile terminal container using flexbox for stable layout */
.mobile-terminal-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height */
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: rgb(var(--color-bg));
}

/* Mobile terminal header - always visible and sticky */
.mobile-terminal-header {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgb(var(--color-bg-secondary));
  border-bottom: 1px solid rgb(var(--color-border));
  /* Add safe area support */
  padding-top: env(safe-area-inset-top);
  /* Ensure header is always visible even with keyboard */
  min-height: 44px; /* iOS standard header height */
}

/* Terminal content area - takes remaining space */
  .mobile-terminal-content {
  flex: 1;
  min-height: 0; /* Critical for proper flexbox behavior */
  overflow: hidden;
  position: relative;
  contain: layout style paint;
}

/* Action bar for special keys - sticks to bottom */
.mobile-action-bar {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: rgb(var(--color-bg-secondary));
  border-top: 1px solid rgb(var(--color-border));
  /* Add safe area support */
  padding-bottom: env(safe-area-inset-bottom);
  /* Smooth transitions */
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* Hide action bar when not needed */
.mobile-action-bar.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Terminal viewport adjustments for mobile */
@media (max-width: 768px) {
  /* Ensure terminal fits within viewport */
  .mobile-terminal-content .xterm {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Remove any transforms on terminal area */
  .terminal-area {
    transform: none !important;
    transition: none !important;
  }
  
  /* Disable the quickkeys transform */
  .terminal-area[data-quickkeys-visible="true"] {
    transform: none !important;
  }
  
  /* Remove extra height and negative margins */
  .terminal-area vibe-terminal,
  .terminal-area vibe-terminal-binary {
    height: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Keyboard-aware container adjustments */
.mobile-terminal-container[data-keyboard-visible="true"] {
  /* Use CSS environment variables for keyboard height if available */
  padding-bottom: env(keyboard-inset-height, 0);
}

/* Ensure proper touch handling */
.mobile-terminal-content {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Action bar special keys */
.mobile-action-key {
  @apply px-3 py-2 mx-1 rounded-md;
  @apply bg-bg-tertiary border border-border;
  @apply text-text text-sm font-mono;
  @apply transition-all duration-150;
  @apply active:scale-95 active:bg-primary/20;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  white-space: nowrap;
}

.mobile-action-key:active {
  @apply bg-primary/20 border-primary;
}

/* Scrollable action keys container */
.mobile-action-keys {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.5rem;
  gap: 0.25rem;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-action-keys::-webkit-scrollbar {
  display: none;
}

/* Mobile terminal text overflow handling */
@media (max-width: 768px) {
  /* Force terminal lines to wrap on mobile */
  .terminal-line {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    max-width: 100vw !important;
  }
  
  /* Ensure terminal container respects viewport */
  .terminal-container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
  }
  
  /* Alternative: Scale terminal content to fit */
  .terminal-container.scale-to-fit {
    transform-origin: top left;
    width: max-content;
  }
  
  /* Ensure chars don't overflow their containers */
  .terminal-char {
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* Landscape adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-terminal-header {
    /* Compact header in landscape */
    padding-top: 0;
  }
  
  .mobile-action-bar {
    /* Smaller action bar in landscape */
    padding: 0.25rem;
  }
  
  .mobile-action-key {
    @apply py-1.5 text-xs;
  }
}