/* ===================== Betreuer+ — style.css (clean) ===================== */

/* ===================== BACKEND OFFLINE BANNER ===================== */
.backend-offline-banner {
  background-color: #dc2626;
  color: white;
  padding: 12px 16px;
  margin: 0 0 16px 0;
  border-radius: var(--radius, 12px);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  display: none;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.backend-offline-banner[hidden] {
  display: none !important;
}

/* ===================== DESKTOP CHAT CONTAINER ===================== */
/* Responsive container - fixed bubble in bottom-right on desktop, drawer on mobile */
#desktop-chat-container {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  width: 380px !important;
  height: 600px !important;
  max-width: 380px !important;
  max-height: 80vh !important; /* Responsive max-height for smaller screens */
  min-width: 320px !important; /* Minimum width for very small screens */
  min-height: 400px !important; /* Minimum height for usability */
  z-index: 999999 !important;
  display: none; /* Hidden by default, shown via JavaScript */
  pointer-events: none; /* Allow clicks to pass through when hidden */
  box-sizing: border-box;
  margin: 0 !important; /* Ensure no margin conflicts */
  /* Auto-resize: container will adjust on window resize */
}

/* When container is shown via JavaScript */
#desktop-chat-container[style*="display: block"] {
  display: block !important;
  pointer-events: auto !important; /* Enable clicks when visible */
}

/* CRITICAL CSS RESET: Force chat to stay within hardcoded container */
#chat-wrapper, .chat-wrapper, .bp-chat-box {
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  inset: auto !important;
}

/* ---------- Tokens ---------- */
:root{
  --brand:#0A58CA; /* блакитніше, сучасніше */
  --main-brand-blue:#0A58CA; /* Exact brand blue for unified color scheme */
  --main-brand-blue-dark:#0848A8; /* Darker version for hover/active states */
  --accent:#f1c40f;     /* жовтий "+" */
  --danger:#dc2626;
  --text:#111827;
  --muted:#6b7280;
  --bg:#f7f8fa;
  --radius:18px;
  --button-radius:12px; /* Consistent border-radius for all primary buttons */
  
  /* Unified header background - standard across all pages (fixed colors, not dependent on --brand) */
  --header-bg: linear-gradient(180deg, #1E78DC 0%, #0A58CA 100%);

   /* запас місця під fixed чат-кнопку + safe-area (iPhone) - DISABLED to isolate chat */
  --chat-safe-space: 0px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }

/* Native smooth scrolling - slower, premium feel */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px; /* Ensure scrolling to elements doesn't stick to top edge */
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
  overflow-x: hidden; /* Prevent side-to-side wobbling while scrolling */
}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  /* Emergency Reset: Allow main page to scroll */
  overflow:auto !important;
  overflow-x: hidden; /* Prevent side-to-side wobbling while scrolling */
  height:auto !important;
  /* Chat is independent - no padding needed */
  /* Hardware acceleration for smooth scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS - ONLY on html/body */
  will-change: scroll-position; /* Hint to browser for GPU optimization */
  backface-visibility: hidden; /* Prevent flickering during scroll */
}

/* Visual comfort - anti-jitter text rendering */
body {
  text-rendering: optimizeLegibility; /* Makes text look stable while moving */
  -webkit-font-smoothing: antialiased; /* Crisp text rendering during scroll */
  -moz-osx-font-smoothing: grayscale; /* Firefox text smoothing */
}
/* Global muted text (one source of truth) */
.muted { color: var(--muted); }

/* ---------- Header ---------- */
/* Unified header - synchronized with chat widget color */
/* Global sticky glassmorphism header for all pages */
.app-header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  /* Glassmorphism effect - modern, native mobile feel */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  background: rgba(30, 120, 220, 0.85) !important; /* Semi-transparent blue */
  background-image: linear-gradient(135deg, rgba(30, 120, 220, 0.9) 0%, rgba(10, 88, 202, 0.9) 100%) !important;
  color:#fff;
  /* Strict height - exactly 60px */
  height:60px;
  min-height:60px;
  padding:0 16px;
  padding-top: env(safe-area-inset-top, 0); /* Safe area for mobile notch */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px; /* Reduced gap for integrated navigation element */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  /* Enhanced shadow for depth */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* Enhanced shadow when page is scrolled */
body.scrolled .app-header {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  background: rgba(30, 120, 220, 0.95) !important;
  background-image: linear-gradient(135deg, rgba(30, 120, 220, 0.95) 0%, rgba(10, 88, 202, 0.95) 100%) !important;
}

/* Letter page needs higher z-index for overlays */
.letter-page .app-header {
  z-index: 10001 !important; /* Above loading overlay */
}

/* Back button - appears on internal pages */
.header-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #ffffff; /* Pure white - clean look matching chat icon */
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  /* Integrated with logo - gap handled by parent flexbox */
}

.header-back-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.header-back-btn:active {
  transform: scale(0.95);
}

.header-back-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hide back button on home page */
.home-page-body .header-back-btn {
  display: none;
}

/* Unified brand logo - consistent across all pages */
.brand{
  font-weight:700; /* Bold for header identity */
  font-size:20px; /* Consistent size across all pages */
  color:#ffffff; /* Pure white - clean look matching chat icon */
  text-decoration:none;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: -0.02em;
  display: inline-block; /* Simple inline block for text */
  margin: 0; /* Reset any default margins */
  padding: 0; /* Reset any default padding */
  flex-shrink: 0;
  /* Perfect vertical alignment with arrow */
  line-height: 1;
}

/* Larger brand on home page */
.home-page-body .brand {
  font-size: 22px;
  font-weight: 600;
}

.brand-plus{ color:var(--accent); }

/* доступність: видимий фокус */
.brand:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Language picker ---------- */
/* Unified language switcher - consistent across all pages, right-aligned */
.lang,
.lang-switcher {
  position: relative;
  flex-shrink: 0;
  margin-left: auto; /* Push to the right */
}

.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:2px solid rgba(255, 255, 255, 0.4);
  background:rgba(255, 255, 255, 0.2);
  color:#ffffff; /* Pure white for clear visibility against royal blue */
  font-weight:700;
  cursor:pointer;
  transition: all 0.2s ease;
}
.lang-btn:hover{
  background:rgba(255, 255, 255, 0.25);
  border-color:rgba(255, 255, 255, 0.4);
}

.lang-list{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  color:#111;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:6px 0;
  list-style:none;
  margin:0;
  min-width:160px;
  z-index:3000;
}

/* ЄДИНЕ правило для hidden */
.lang-list[hidden]{ display:none !important; }

.lang-list li{
  padding:8px 12px;
  cursor:pointer;
}
.lang-list li:hover{ background:#eef2ff; }


/* ---------- Layout ---------- */
.container{
  max-width:820px;
  margin:0 auto;
  padding:18px;
}

/* Center content on home page */
#main.home-page{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 200px);
}
/* ===================== Page titles (global) ===================== */
.page-title{
  margin: 10px 0 18px;
  font-size: clamp(30px, 5.5vw, 40px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- Home buttons (refined) ---------- */
.big-btn{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:28px 28px;
  margin:16px 0;

  background:#fff;
  border:none; /* Remove hard borders for floating effect */
  border-radius:20px; /* Rounded corners matching header */
  text-decoration:none;

  color:var(--text);

  font-weight:600;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-0.01em;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* Soft shadow for floating tile effect */
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:all 0.2s ease;
  /* Performance optimization for smooth scrolling */
  contain: paint;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
}

/* Glassmorphism style for navigation cards */
.big-btn.glass-card{
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.big-btn.glass-card:hover{
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.big-btn.danger.glass-card{
  background: rgba(255, 247, 247, 0.8);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.big-btn.danger.glass-card:hover{
  background: rgba(255, 247, 247, 0.9);
  box-shadow: 0 12px 40px rgba(220, 38, 38, 0.2);
}

.big-btn.danger.glass-card:active{
  background: rgba(255, 247, 247, 0.95);
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.18);
}

/* Professional SVG icons for main menu buttons */
.big-btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0; /* Prevent icon from shrinking */
  stroke-width: 1.5px;
  color: inherit; /* Inherit text color from parent */
  opacity: 0.9; /* Slightly muted for professional look */
  transition: all 0.2s ease;
  /* Subtle gradient effect for vibrancy */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.big-btn:hover .big-btn-icon {
  opacity: 1; /* Full opacity on hover */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  transform: scale(1.05);
}

/* Danger button icon styling */
.big-btn.danger .big-btn-icon {
  color: #b91c1c; /* Match danger button text color */
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(185, 28, 28, 0.2));
}

.big-btn.danger:hover .big-btn-icon {
  opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(185, 28, 28, 0.3));
  transform: scale(1.05);
}

.big-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  background:rgba(255, 255, 255, 0.9);
}

.big-btn:active{
  transform:translateY(0);
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  background:rgba(255, 255, 255, 0.95);
}

.big-btn.danger{
  background:#fff7f7;
  color:#b91c1c;
  font-weight:700;
  /* Same rounded/shadowed style as other cards */
  border-radius:20px;
  box-shadow:0 4px 12px rgba(220, 38, 38, 0.12);
}
.big-btn.danger:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(220, 38, 38, 0.18);
}

@media (max-width:480px){
  .big-btn{
    padding:12px 16px; /* Adjusted for text wrapping */
    font-size:19px;
    border-radius:18px; /* Slightly smaller on mobile for better fit */
    min-height: auto; /* Allow button to grow with content */
  }
}

/* Hero Section */
.hero-section{
  text-align: center;
  margin: 0 0 64px;
  padding: 0 20px;
}

.hero-title{
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.2px;
  color: var(--brand);
  margin: 0 0 20px;
  font-family: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 0 1px rgba(0, 0, 0, 0.01);
}

.hero-subtitle{
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 200;
  font-style: italic;
  line-height: 1;
  color: #9ca3af;
  margin: 0 auto;
  display: inline-block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  font-family: 'Inter', 'SF Pro Display', -apple-system, 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  letter-spacing: -2px;
  position: relative;
  text-shadow: none;
  box-shadow: none;
}

.hero-subtitle .badge-247-accent{
  color: rgba(241, 196, 15, 0.8);
  text-shadow: none;
}

/* Instructions Section */
.instructions-section{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 48px 0 32px;
  padding: 0 20px;
}

.instruction-item{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.instruction-icon{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 88, 202, 0.1);
  border-radius: 12px;
  flex-shrink: 0;
  color: var(--brand);
}

.instruction-icon svg{
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.instruction-text{
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in{
  animation: fadeIn 0.6s ease-out forwards;
  opacity: 0;
}

@media (max-width: 480px){
  .hero-section{
    margin: 0 0 40px;
  }
  
  #main.home-page{
    min-height: calc(100vh - 180px);
  }
}

/* ===================== CHAT (Betreuer+) ===================== */

/* Floating organic bubble button */
.bp-chat-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1000000; /* Always above chat container (999999) and all other elements */
  transition: opacity 0.2s ease, transform 0.2s ease;

  border:none;
  /* Organic blob shape - smooth, natural curves */
  border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
  width:56px;
  height:56px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;

  font:inherit;
  font-weight:600;
  cursor:pointer;

  /* Blue gradient from lighter top to base blue bottom */
  background:linear-gradient(180deg, #1E78DC 0%, var(--main-brand-blue) 100%);
  color:#fff;

  /* Soft, large shadow with blue tint */
  box-shadow:0 10px 25px rgba(10, 88, 202, 0.3);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease, border-radius .3s ease;
  
  /* Subtle floating animation */
  animation:float 3s ease-in-out infinite;
}

/* Floating animation - gentle up and down movement */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-4px);
  }
}

.bp-chat-fab:hover{
  /* Enhanced floating on hover */
  animation:floatHover 1.5s ease-in-out infinite;
  box-shadow:0 12px 30px rgba(10, 88, 202, 0.4);
  background:linear-gradient(180deg, #1A6FD0 0%, var(--main-brand-blue-dark) 100%);
  /* Slightly more organic shape on hover */
  border-radius:35% 65% 65% 35% / 35% 35% 65% 65%;
}

@keyframes floatHover {
  0%, 100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.bp-chat-fab:active{
  transform:scale(0.95) translateY(0); /* Tactile scale effect on click */
  box-shadow:0 6px 15px rgba(10, 88, 202, 0.25);
  animation:none; /* Stop animation on click */
}

/* Hide FAB when chat is open - prevents overlap with chat input */
.bp-chat-fab[aria-hidden="true"],
.bp-chat-fab[style*="display: none"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Chat bubble SVG icon */
.bp-chat-fab svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none; /* Prevent icon from blocking clicks */
  transition:stroke 0.3s ease, transform 0.3s ease;
}

/* FAB when chat is open - yellow "x" icon */
.bp-chat-fab[data-chat-open="true"] svg{
  stroke:var(--accent); /* Brand yellow for "x" when chat is open */
}

/* ===================== CHAT WINDOW ===================== */

/* Base: Chat wrapper - now relative to hardcoded container */
.chat-wrapper {
  position: relative !important; /* Changed from fixed - now relative to #desktop-chat-container */
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  width: 100% !important; /* Fill parent container */
  height: 100% !important; /* Fill parent container */
  z-index: 10001; /* Above header (20), lang-menu (3000), but below FAB (10002) */
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  /* CRITICAL: Remove any transform that might center the wrapper */
  transform: none !important;
  margin: 0 !important; /* CRITICAL: Remove any auto margins */
}

/* Hidden state */
.chat-wrapper[hidden] {
  display: none !important;
}

/* Chat box - slide animation */
.bp-chat-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.chat-wrapper:not([hidden]) .bp-chat-box {
  transform: translateY(0);
  opacity: 1;
}

/* 3. Header - стабільний, ніколи не рухається */
.bp-chat-header{
  height:60px !important;
  position:relative !important;
  flex-shrink:0 !important;
  width:100% !important;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background:linear-gradient(180deg, rgba(30, 120, 220, 0.95) 0%, rgba(10, 88, 202, 0.95) 100%);
  color:#fff;
}

/* Chat title - brand yellow accent */
#chat-title{
  color:var(--accent); /* Exact yellow from "Betreuer+" logo */
  font-weight:600; /* Slightly bolder to make it "pop" */
}
.bp-chat-close{
  border:none;
  background:transparent;
  color:#fff;
  font-size:1.5rem;
  cursor:pointer;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background 0.2s ease;
}
.bp-chat-close:hover{
  background:rgba(255, 255, 255, 0.15);
}

/* 4. Область повідомлень - ТІЛЬКИ ВОНА МАЄ СКРОЛ */
.bp-chat-messages{
  flex-grow:1 !important;
  overflow-y:auto !important;
  width:100% !important;
  background:white !important;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:15px;
  padding-bottom: 24px; /* Sufficient padding so last message doesn't feel 'glued' to input */
  margin:0;
  
  /* Chat container physics - buttery smooth scrolling */
  scroll-behavior: smooth; /* Fluid auto-scroll when new messages arrive */
  -webkit-overflow-scrolling: touch; /* Native momentum on mobile */
  overscroll-behavior-y: contain; /* Prevent entire page from bouncing - crucial for chat! */
  
  /* GPU acceleration for messages */
  will-change: transform; /* Hint to browser for GPU optimization */
}

/* Message bubble (single, no duplicates) */
.bp-chat-message{
  align-self:flex-start;
  display:inline-block;
  padding:12px 16px; /* Increased padding for readability */
  border-radius:20px; /* High border-radius for soft theme */
  font-size:15px;
  line-height:1.45;
  max-width:85%;
  word-wrap:break-word;
  /* Prevent flickering during fast scrolling */
  backface-visibility: hidden;
}

/* Bot - incoming messages - soft darker tone for readability */
.bp-chat-message--bot{
  background:rgba(235, 240, 245, 0.8); /* Soft, slightly darker tone */
  color:#1e3a5f; /* Deep dark blue (not pure black) for better comfort */
  border:none;
  border-radius:20px;
  /* Modern "tail" effect - sharper bottom-left corner */
  border-bottom-left-radius:4px;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  /* Extremely subtle shadow to pop from glass background */
  box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);
}

/* User - outgoing messages - muted blue gradient for subtlety */
.bp-chat-message--user{
  align-self:flex-end;
  /* Soft muted blue gradient - subtle and quiet */
  background:linear-gradient(135deg, rgba(100, 149, 237, 0.85) 0%, rgba(70, 130, 180, 0.9) 100%);
  color:#F5F7FA; /* Slightly off-white for softer contrast */
  border-radius:20px;
  /* Modern "tail" effect - sharper bottom-right corner */
  border-bottom-right-radius:4px;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  /* Glass background peeks through with reduced opacity */
}

/* Typing indicator container */
.bp-chat-message--typing{
  opacity:1;
  padding:12px 16px;
}

/* Typing dots container */
.typing-dots{
  display:inline-flex;
  align-items:center;
  gap:6px; /* Elegant spacing between dots */
  height:20px; /* Consistent height */
}

/* Individual typing dots - premium round style */
.typing-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%; /* Perfectly round */
  background-color:var(--main-brand-blue); /* Default brand blue */
  animation:wave 1.4s ease-in-out infinite;
  flex-shrink:0;
}

/* Dot 1: Brand blue */
.typing-dot--1{
  background-color:var(--main-brand-blue);
  animation-delay:0s;
}

/* Dot 2: Brand yellow with subtle glow */
.typing-dot--2{
  background-color:var(--accent); /* Brand yellow from "+" logo */
  animation-delay:0.2s;
  /* Subtle glow so yellow doesn't lose its "pop" on light background */
  box-shadow:0 0 4px rgba(241, 196, 15, 0.4), 0 0 8px rgba(241, 196, 15, 0.2);
}

/* Dot 3: Brand blue */
.typing-dot--3{
  background-color:var(--main-brand-blue);
  animation-delay:0.4s;
}

/* Wave animation - dots move up and down */
@keyframes wave {
  0%, 60%, 100% {
    transform:translateY(0);
    opacity:0.8;
  }
  30% {
    transform:translateY(-4px);
    opacity:1;
  }
}

/* Input form - anchored at bottom */
/* 5. Форма вводу - завжди притиснута до низу ворпера */
.bp-chat-form{
  flex-shrink:0 !important;
  width:100% !important;
  border-top:1px solid #eee !important;
  background:rgba(255, 255, 255, 0.9);
  padding:10px;
  display:flex;
  align-items:flex-end;
  gap:.5rem;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0)); /* Account for safe area on mobile */
  position:relative;
  z-index:5;
}

/* Input wrapper - contains input and send button */
.bp-chat-input-wrapper{
  position:relative;
  flex:1;
  display:flex;
  align-items:flex-end; /* Align to bottom for multi-line support */
}

.bp-chat-input{
  flex:1;
  resize:none;
  border-radius:30px; /* Smooth pill shape - maintained for single line */
  border:1px solid rgba(209, 213, 219, 0.4); /* Very subtle light-gray stroke */
  padding:.75rem 3.5rem .75rem 1rem; /* Increased padding-right (3.5rem) to prevent text overlap with send button */
  font:inherit;
  min-height:45px; /* Minimum height for single line */
  max-height:150px; /* Maximum height before scrolling */
  line-height:1.4; /* Better readability for long sentences */
  background:rgba(255, 255, 255, 0.8);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, height 0.15s ease;
  /* Very soft inner glow instead of heavy borders */
  box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow-y:auto; /* Enable scrolling when max-height is reached */
  overflow-x:hidden;
  /* Auto-expanding behavior */
  height:auto;
}

/* Custom scrollbar - ultra-thin and semi-transparent brand blue */
.bp-chat-input::-webkit-scrollbar{
  width:4px; /* Ultra-thin scrollbar */
}

.bp-chat-input::-webkit-scrollbar-track{
  background:transparent;
}

.bp-chat-input::-webkit-scrollbar-thumb{
  background:rgba(10, 88, 202, 0.3); /* Semi-transparent brand blue */
  border-radius:2px;
  transition:background 0.2s ease;
}

.bp-chat-input::-webkit-scrollbar-thumb:hover{
  background:rgba(10, 88, 202, 0.5);
}

/* Firefox scrollbar */
.bp-chat-input{
  scrollbar-width:thin;
  scrollbar-color:rgba(10, 88, 202, 0.3) transparent;
}

.bp-chat-input:focus-visible{
  outline:none;
  border-color:rgba(10, 88, 202, 0.3);
  /* Soft inner glow on focus */
  box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 0 0 2px rgba(10, 88, 202, 0.08);
  background:rgba(255, 255, 255, 0.95);
}

/* Send button - integrated inside input field */
.bp-chat-send{
  position:absolute;
  right:4px;
  bottom:4px; /* Default: position at bottom-right for multi-line support */
  
  border:none;
  /* Soft organic shape */
  border-radius:45% 55% 50% 50%;
  width:2.2rem;
  height:2.2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  /* Brand blue gradient background */
  background:linear-gradient(180deg, #1E78DC 0%, var(--main-brand-blue) 100%);
  color:var(--accent); /* Brand yellow for icon */
  flex-shrink:0;

  /* Minimal shadow */
  box-shadow:0 2px 6px rgba(10, 88, 202, 0.15);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, top .15s ease, bottom .15s ease;
  z-index:20; /* Increased from 10 to ensure it's above FAB when chat is open */
}

/* Single line state - vertically centered (applied via JavaScript class) */
.bp-chat-send.single-line{
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}

/* Paper plane icon - minimal, thin-lined, tilted */
.bp-chat-send .send-icon{
  width:14px;
  height:14px;
  stroke:var(--accent); /* Brand yellow */
  stroke-width:1.5;
  /* Tilted to look like it's "taking off" */
  transform:rotate(-45deg) translate(1px, -1px);
  transition:transform .2s ease;
}

.bp-chat-send:hover{
  box-shadow:0 3px 8px rgba(10, 88, 202, 0.25);
  background:linear-gradient(180deg, #1A6FD0 0%, var(--main-brand-blue-dark) 100%);
}

/* Icon shifts up and to the right on hover */
.bp-chat-send:hover .send-icon{
  transform:rotate(-45deg) translate(3px, -3px);
}

/* Pulse effect on click - yellow color */
@keyframes sendPulse {
  0% {
    box-shadow:0 2px 6px rgba(10, 88, 202, 0.15), 0 0 0 0 rgba(241, 196, 15, 0.7);
  }
  50% {
    box-shadow:0 2px 6px rgba(10, 88, 202, 0.15), 0 0 0 8px rgba(241, 196, 15, 0);
  }
  100% {
    box-shadow:0 2px 6px rgba(10, 88, 202, 0.15), 0 0 0 0 rgba(241, 196, 15, 0);
  }
}

.bp-chat-send:active{
  transform:translateY(-50%) scale(0.95);
  animation:sendPulse 0.4s ease;
}

/* Desktop: Fixed-size bubble in bottom-right corner */
@media (min-width: 481px) {
  #desktop-chat-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    top: auto !important;
    left: auto !important;
    width: 380px !important;
    height: 600px !important;
    max-width: 380px !important;
    max-height: 80vh !important; /* Responsive: adapts to viewport height */
    min-width: 320px !important; /* Minimum for very small desktop windows */
    min-height: 400px !important; /* Minimum for usability */
    z-index: 999999 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    /* Auto-resize: container recalculates position on window resize */
  }
  .chat-wrapper {
    position: relative !important; /* Relative to hardcoded container */
    width: 100% !important; /* Fill container */
    height: 100% !important; /* Fill container */
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* Mobile: Drawer-style popup (not full-screen takeover) */
@media (max-width: 480px) {
  #desktop-chat-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important; /* Center horizontally */
    right: auto !important;
    top: auto !important;
    width: 90vw !important; /* Responsive width - 90% of viewport */
    max-width: 90vw !important;
    height: 80dvh !important; /* Use dvh (Dynamic Viewport Height) to account for mobile browser bars */
    max-height: 80dvh !important; /* Constrained height - drawer style, allows main app navigation to remain visible */
    min-height: 400px !important; /* Minimum usable height */
    z-index: 999999 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    /* Center horizontally on mobile using transform */
    transform: translateX(-50%) !important;
    margin: 0 !important; /* Reset margins */
  }
  .chat-wrapper {
    position: relative !important; /* Still relative to container */
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important; /* Let container handle border-radius */
  }
  
  .bp-chat-box{
    border-radius:0 !important;
    /* Ensure proper padding for safe areas (notches, home indicators) */
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  
  /* On mobile, header is relative */
  .bp-chat-header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:auto !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }
  
  /* Reset padding-top on mobile since header is relative */
  .bp-chat-messages{
    padding-top:.75rem !important;
  }
  
  .bp-chat-fab{
    right:20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}


/* ---------- A11y helper ---------- */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===================== Risk badge ===================== */
.risk-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
}
.risk-badge--low{  background:#16a34a20; color:#16a34a; }
.risk-badge--mid{  background:#f59e0b20; color:#f59e0b; }
.risk-badge--high{ background:#dc262620; color:#dc2626; }

/* ===================== Letter page (scoped) ===================== */

/* щоб модалки/чат не перекривали хедер на letter.html */
/* Letter page header - higher z-index for overlays (already has global sticky + glassmorphism) */
/* Note: z-index override is already defined earlier in this file */

/* Ensure letter-page body doesn't break sticky positioning */
.letter-page {
  overflow: visible !important;
  overflow-x: hidden; /* Only hide horizontal overflow */
}

/* Letter page container - add top padding for sticky header */
.letter-page .container,
.letter-page .letter-flow {
  /* Add top padding to account for sticky header (60px) + safe area */
  padding-top: calc(18px + 60px + env(safe-area-inset-top, 0));
}

@media (max-width: 640px) {
  .letter-page .container,
  .letter-page .letter-flow {
    padding-top: calc(12px + 60px + env(safe-area-inset-top, 0));
  }
}

/* Upload file "tile" */
.letter-page .file{
  display:inline-flex;
  gap:12px;
  align-items:center;
  border:2px dashed #cbd5e1;
  border-radius:12px;
  padding:16px 20px;
  cursor:pointer;
}
.letter-page .file input{ display:none; }

/* Panels */
.letter-page .panel{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px;
}

/* textarea — тільки в letter-flow, щоб не зачепити інші сторінки */
.letter-page .letter-flow textarea{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:10px;
}

/* Специфічні зони (щоб не конфліктувати зі старт-карткою) */
.letter-page .send-row{ margin:10px 0; }
.letter-page #uploadScreen .actions,
.letter-page #draft-sec .actions{
  margin-top:10px;
}

/* Upload action buttons container - optimized for mobile */
.letter-flow .actions--upload {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding-bottom: 20px; /* Extra spacing at bottom */
  margin-top: 16px;
}

/* Upload action buttons - full width with flex proportions */
.letter-flow .actions--upload .btn {
  flex: 1; /* Equal width by default */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 18px;
  font-weight: 600;
  min-height: 48px; /* Comfortable tap target */
  border-radius: 12px; /* Consistent rounded corners */
  white-space: nowrap; /* Prevent text wrapping */
}

/* Primary button (Опрацювати) - more weight */
.letter-flow .actions--upload .btn-primary {
  flex: 2; /* Takes 2/3 of available space */
  background: var(--main-brand-blue);
  color: #fff;
  border-radius: var(--button-radius);
  transition: background 0.2s ease, transform 0.1s ease;
}
.letter-flow .actions--upload .btn-primary:hover {
  background: var(--main-brand-blue-dark);
  transform: translateY(-1px);
}
.letter-flow .actions--upload .btn-primary:active {
  background: var(--main-brand-blue-dark);
  transform: translateY(0);
}

.letter-flow .actions--upload .btn-primary.btn--keyboard-active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
}

/* Secondary button (Очистити) - less weight */
.letter-flow .actions--upload .btn-secondary {
  flex: 1; /* Takes 1/3 of available space */
  background: #e5e7eb;
  color: #111;
}

/* Privacy assurance note - muted, small text */
.letter-flow .actions--upload .privacy-note {
  flex-basis: 100%;
  width: 100%;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
  margin-top: 4px;
  text-align: center;
}

/* Buttons */
.letter-page .btn{
  background:var(--main-brand-blue);
  color:#fff;
  border:none;
  padding:10px 14px;
  border-radius:var(--button-radius);
  cursor:pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.letter-page .btn:hover{ 
  background:var(--main-brand-blue-dark);
  transform:translateY(-1px);
}
.letter-page .btn:active{ 
  background:var(--main-brand-blue-dark);
  transform:translateY(0);
}

.letter-page .btn-secondary{
  background:#e5e7eb;
  color:#111;
  border:none;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}

/* Helpers */
.letter-page .row{ display:flex; gap:10px; margin-top:10px; }
.letter-page .switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }

@media (max-width:480px){
  .letter-page .file{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}

/* ===================== Letter flow (scoped under .letter-flow) ===================== */

/* Upload header */
.letter-flow .upload__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

/* Dropzone */
.letter-flow .dropzone{
  border:2px dashed #3b3b3b;
  border-radius:14px;
  padding:28px;
  text-align:center;
  margin:8px 0;
  outline:none;
}
.letter-flow .dropzone.drag{
  border-color:#3b82f6;
  background:rgb(59 130 246 / .08);
}

/* Thumbs - now inside photo preview container */
.letter-flow .thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
  gap:12px;
  list-style:none;
  padding:0;
  margin:0;
}
.letter-flow .thumb{
  position:relative;
  background:#0f1117;
  border:1px solid #272b33;
  border-radius:12px;
  overflow:hidden;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.letter-flow .thumb img{ width:100%; height:100%; object-fit:cover; }
.letter-flow .thumb__meta{
  position:absolute;
  left:6px;
  bottom:6px;
  font-size:11px;
  background:rgb(0 0 0 / .5);
  padding:2px 6px;
  border-radius:6px;
}
.letter-flow .thumb__remove{
  position:absolute;
  top:6px;
  right:6px;
  border:none;
  background:rgb(0 0 0 / .6);
  color:#fff;
  border-radius:50%;
  width:28px;
  height:28px;
  cursor:pointer;
}

/* Upload footer */
.letter-flow .upload__footer{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

/* Upload buttons container */
.letter-flow .upload__buttons {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 28px;
}

/* Unified button styling - professional look with light grey background */
.letter-flow .upload__buttons .btn-secondary,
.letter-flow .upload__buttons .btn-icon {
  height: 45px;
  min-height: 45px;
  border-radius: 12px;
  border: 1px solid #D1D1D6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Upload button - more distinct with deeper grey and bold text */
.letter-flow .upload__buttons .btn-secondary {
  flex: 1;
  padding: 0 18px;
  white-space: nowrap;
  background: #E8E8ED;
  color: #1a1a1a;
  font-weight: 600;
}

.letter-flow .upload__buttons .btn-secondary:hover {
  background: #D8D8DD;
  border-color: #B1B1B6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.letter-flow .upload__buttons .btn-secondary:active {
  background: #D0D0D5;
  border-color: #A1A1A6;
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Icon button for camera - square 45x45px with SVG icon, matches upload button style */
.letter-flow .upload__buttons .btn-icon {
  width: 45px;
  padding: 0;
  flex-shrink: 0;
  background: #E8E8ED;
  border: 1px solid #D1D1D6;
}

.letter-flow .upload__buttons .btn-icon .camera-icon-svg {
  width: 20px;
  height: 20px;
}

.letter-flow .upload__buttons .btn-icon .camera-icon-svg path,
.letter-flow .upload__buttons .btn-icon .camera-icon-svg circle {
  stroke: #000000;
  stroke-width: 2;
}

.letter-flow .upload__buttons .btn-icon:hover {
  background: #D8D8DD;
  border-color: #B1B1B6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.letter-flow .upload__buttons .btn-icon:hover .camera-icon-svg path,
.letter-flow .upload__buttons .btn-icon:hover .camera-icon-svg circle {
  stroke: #000000;
}

.letter-flow .upload__buttons .btn-icon:active {
  background: #D0D0D5;
  border-color: #A1A1A6;
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Photo preview container - milk background with solid border */
.letter-flow .photo-preview-container {
  border: 1px solid #E5E5EA;
  border-radius: 14px;
  background: #FDFCF9;
  padding: 16px;
  margin: 24px 0;
  min-height: 140px;
}

.letter-flow .photo-preview-container:empty::before {
  content: attr(data-empty-text);
  display: block;
  text-align: center;
  color: #9ca3af;
  padding: 50px 20px;
  font-size: 14px;
}

/* Thumbs inside preview container */
.letter-flow .photo-preview-container .thumbs {
  margin: 0;
}

/* File count badge inside preview container - tiny elegant badge */
.letter-flow .photo-preview-container .file-count-badge {
  display: inline-block;
  background: rgba(0, 86, 179, 0.08);
  color: #0056b3;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0.2px;
}

/* ===== Start card (single consolidated version) ===== */
.letter-flow .card--start,
.letter-flow #start-card.card{
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%, #f9fbff 100%);
  color:var(--text);
  border-radius:18px;
  padding:22px 20px; /* Consistent left/right padding for content alignment */
  padding-bottom: 120px; /* Extra padding to prevent content from being hidden behind sticky footer */
  border:1px solid #bcd0f0;
  box-shadow:0 10px 30px rgba(11,61,145,.12);
  /* Performance optimization for smooth scrolling */
  contain: paint;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
  overflow: hidden; /* Prevent content from breaking card borders */
}

/* Ensure hidden sections are completely removed from layout */
.letter-flow #start-card[hidden],
.letter-flow #uploadScreen[hidden] {
  display: none !important; /* Completely remove from layout, no space taken */
}

/* Ensure upload screen starts at the very top when visible - no spacing */
.letter-flow #uploadScreen:not([hidden]) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0;
}

/* Ensure upload screen content starts at top */
.letter-flow #uploadScreen .upload__head {
  margin-top: 0;
  padding-top: 0;
}

.letter-flow #uploadScreen .upload__title {
  margin-top: 0;
}

/* Ensure content inside card maintains left alignment - no flex or centering that would shift text */
.letter-flow #start-card .start-title,
.letter-flow #start-card .start-intro,
.letter-flow #start-card .field,
.letter-flow #start-card .consent,
.letter-flow #start-card .help-link {
  padding-left: 0;
  margin-left: 0;
  text-align: left; /* Explicit left alignment */
}

/* Ensure card content container doesn't have flex that would affect alignment */
.letter-flow #start-card.card {
  display: block; /* Block layout, not flex */
}

/* premium aura */
.letter-flow .card--start::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(120% 120% at 90% 100%, rgba(11,61,145,.18), transparent 55%);
  z-index:-1;
}

.letter-flow .card--start .start-title{
  margin:0 0 6px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.2px;
}
/* Start-card spacing for muted text */
.letter-flow .card--start .muted{
  margin: 0 0 14px;
}


.letter-flow #start-card .label,
.letter-flow #start-card .field label{
  display:block;
  margin:8px 0 6px;
  font-weight:700;
}

/* PIN field container - add spacing before consent checkbox */
.letter-flow #start-card .field:has(#startPin){
  margin-bottom:16px;
}

/* Password input wrapper with toggle button */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper .bp-input {
  padding-right: 50px; /* Space for toggle button */
}

.password-toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 10;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.password-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.password-toggle-btn:active {
  background-color: rgba(0, 0, 0, 0.1);
  transform: translateY(-50%) scale(0.95);
}

.password-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  user-select: none;
}

.password-toggle-icon-svg {
  width: 20px;
  height: 20px;
  color: #6b7280;
  stroke: currentColor;
  transition: color 0.2s ease;
}

.password-toggle-btn:hover .password-toggle-icon-svg {
  color: var(--brand);
}

.password-toggle-btn[aria-pressed="true"] .password-toggle-icon-svg {
  color: var(--brand);
}

/* Add spacing to consent label (works as fallback if :has() not supported) */
.letter-flow #start-card .consent {
  margin-top:16px;
}

/* Field hint styling */
.letter-flow #start-card .field-hint{
  display:block !important; /* Ensure visibility - prevent display:none */
  visibility: visible !important; /* Ensure visibility - prevent visibility:hidden */
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

/* "EVERYTHING IS LOCKED" UI: Force visibility when lockout is active */
.letter-flow #start-card.is-locked .field-hint,
.letter-flow #start-card .field.is-locked .field-hint {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #dc2626 !important;
  font-weight: 600 !important;
}

.letter-flow #start-card.is-locked .field-hint:empty::before {
  content: "Loading timer...";
  color: #dc2626;
  font-weight: 600;
}

/* VISIBILITY OVERKILL: Brute force visibility for body.is-locked */
body.is-locked .letter-flow #start-card .field-hint,
body.is-locked #start-card .field-hint,
body.is-locked .field-hint {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #dc2626 !important;
  font-weight: 600 !important;
  background-color: transparent !important;
  position: relative !important;
  z-index: 999 !important;
}

body.is-locked .letter-flow #start-card .field-hint:empty::before,
body.is-locked #start-card .field-hint:empty::before {
  content: "LOCKED" !important;
  color: #dc2626 !important;
  font-weight: 600 !important;
}

.letter-flow #startCode,
.letter-flow #startPin{
  width:100%; /* Full width, no hardcoded pixel values */
  border:1.5px solid #cbd5e1;
  border-radius:12px;
  padding:11px 12px;
  font-size:16px;
  background:#f7fbff;
  text-align:left; /* Ensure consistent left alignment for placeholders */
  transition:border-color .15s, box-shadow .15s, background .15s;
}

/* PIN input with toggle button needs extra right padding */
.password-input-wrapper #startPin {
  padding-right: 50px; /* Space for toggle button */
}
.letter-flow #start-card input[type="email"]:focus,
.letter-flow #startCode:focus,
.letter-flow #startPin:focus{
  background:#fff;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(11,61,145,.14);
}

.letter-flow #start-card .check{
  display:flex;
  gap:10px;
  margin:12px 0;
  align-items:flex-start;
  font-size:14px;
}

.letter-flow #start-card .actions{ 
  margin-top:8px; 
}

/* Start button container - single centered primary action */
.letter-flow #start-card .actions--start{
  /* Sticky footer styling - stays inside card borders */
  position: sticky;
  bottom: 0;
  z-index: 100;
  width: 100%; /* Full width container */
  background: transparent !important;
  padding: 15px 20px; /* Proper padding inside card borders */
  margin-top: 24px; /* Space above button */
  /* Account for safe area on mobile devices (notches, home indicators) */
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0));
  
  /* Center the button inside the sticky footer */
  display: flex;
  justify-content: center; /* Center button horizontally */
  align-items: center; /* Center button vertically */
  gap: 0;
  direction: ltr; /* Force LTR to keep buttons in order for all languages */
}

.letter-flow #start-card .btn{
  padding:12px 24px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .06s ease, filter .18s ease;
  white-space:nowrap; /* Prevent text wrapping for longer translations like "Започни" */
  overflow:hidden;
  text-overflow:ellipsis; /* Fallback if text is still too long */
}

/* Primary button (Почати) - Centered with proper width */
.letter-flow #start-card .btn-primary{
  background:var(--main-brand-blue);
  border:1px solid var(--main-brand-blue);
  color:#fff;
  border-radius:var(--button-radius);
  transition: background 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
  /* Centered button - respects footer padding */
  width: 100%; /* Full width within footer padding */
  max-width: 350px; /* Prevents stretching on tablets/desktops */
  margin: 0 auto; /* Center the button */
  /* Floating shadow effect */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.letter-flow #start-card .btn-primary:hover:not(:disabled){
  background:var(--main-brand-blue-dark);
  border-color:var(--main-brand-blue-dark);
  transform:translateY(-1px);
}
.letter-flow #start-card .btn-primary:active:not(:disabled){
  background:var(--main-brand-blue-dark);
  border-color:var(--main-brand-blue-dark);
  transform:translateY(0);
}
.letter-flow #start-card .btn-primary:disabled{
  opacity:0.5;
  cursor:not-allowed;
  background:#9ca3af;
  border-color:#9ca3af;
  transform:none !important;
}
.letter-flow #start-card .btn-primary:disabled:hover{
  background:#9ca3af;
  border-color:#9ca3af;
  transform:none !important;
}

/* Visual feedback for keyboard-triggered button presses */
.btn--keyboard-active {
  transform: scale(0.98) !important;
  opacity: 0.9 !important;
  transition: transform 0.1s ease, opacity 0.1s ease !important;
}

/* Secondary button (Назад) */
.letter-flow #start-card .btn-secondary{
  background:#fff;
  border:1px solid #D1D1D6;
  color:#1a1a1a;
}
.letter-flow #start-card .btn-secondary:hover{
  background:#F5F5F5;
  border-color:#B1B1B6;
  transform:translateY(-1px);
}

/* Primary button fills width on all screens */
@media (min-width: 480px) {
  .letter-flow #start-card .actions--start .btn-primary {
    max-width: 400px; /* Reasonable max width on larger screens */
  }
}

/* ВАЖЛИВО: якщо ти стилізуєш "ніби disabled", але хочеш ловити кліки для shake — залишаємо pointer-events */
.letter-flow #start-card .btn.is-disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none !important;
  filter:none !important;
  pointer-events:auto;
}

/* ===== Lockout Overlay (only covers start-card area) ===== */
.lockout-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: auto;
}

.lockout-overlay-content {
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 90%;
}

.lockout-icon {
  margin: 0 auto 1.5rem;
  width: 48px;
  height: 48px;
  color: var(--danger, #dc2626);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lockout-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text, #111827);
}

.lockout-message {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: var(--muted, #6b7280);
  line-height: 1.5;
}

.lockout-countdown {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand, #0A58CA);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  margin-top: 1rem;
}

@media (max-width: 480px) {
  .lockout-overlay-content {
    padding: 1.5rem 1rem;
  }
  
  .lockout-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
  }
  
  .lockout-title {
    font-size: 1.1rem;
  }
  
  .lockout-message {
    font-size: 0.9rem;
  }
  
  .lockout-countdown {
    font-size: 1.25rem;
  }
}

/* Input errors */
.input--error{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.15) !important;
}
.help-error{
  color:#b91c1c;
  font-size:13px;
  margin-top:6px;
  min-height:1.2em;
}

/* Shake animation */
@keyframes shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}
.shake{ animation:shake .35s; }

/* Explanation Header - Flex container for title and button */
.letter-page .letter-flow .explanation-header,
.letter-page .letter-flow #explanation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}

/* TTS Button Orbit Container - Simple wrapper */
.tts-button-orbit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* TTS Button - Clean Liquid Glass */
.tts-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 150, 255, 0.3);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  color: #0066cc;
}

.tts-button svg {
  width: 16px;
  height: 16px;
  stroke: #0066cc;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.2s ease;
  opacity: 0.8;
}

.tts-button:hover {
  transform: scale(1.05);
}

.tts-button:hover svg {
  opacity: 1;
}

.tts-button:focus-visible {
  outline: 2px solid rgba(0, 150, 255, 0.5);
  outline-offset: 2px;
}


/* якщо реально disabled атрибутом — блокуємо кліки */
button:disabled{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

/* ===== Datenschutz dialog ===== */
.dp-link { display:inline-block; margin-left:8px; font-weight:600; }

.dp-dialog { border:none; padding:0; border-radius:14px; max-width:720px; width:92%; }
.dp-dialog::backdrop { background: rgba(0,0,0,.45); }

.dp-dialog__box { padding:16px; }
.dp-dialog__header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dp-dialog__close { border:none; background:transparent; font-size:22px; cursor:pointer; }

.dp-dialog__content { margin-top:10px; line-height:1.45; }
.dp-dialog__footer { display:flex; justify-content:flex-end; margin-top:12px; }

/* RTL support for privacy dialog */
.dp-dialog__box[dir="rtl"] {
  text-align: right;
}

.dp-dialog__box[dir="rtl"] h3,
.dp-dialog__box[dir="rtl"] p {
  text-align: right;
}

.dp-dialog__box[dir="rtl"] .dialog-actions {
  text-align: left; /* Keep button on left for consistency */
}

.help-link{
  border:0;
  background:transparent;
  padding:0;
  margin-left:10px;
  font:inherit;
  color:#1d4ed8;
  text-decoration:underline;
  cursor:pointer;
}
.help-link:hover{ filter:brightness(.9); }

/* Універсальний dialog (можна і для Datenschutz використати) */
.bp-dialog{
  border:none;
  border-radius:14px;
  max-width:560px;
  width:min(92vw, 560px);
  padding:0;
}
.bp-dialog::backdrop{ background:rgba(0,0,0,.35); }

.bp-dialog__box{ padding:18px 18px 16px; }
.bp-dialog__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.bp-dialog__close{
  border:none;
  background:transparent;
  font-size:22px;
  cursor:pointer;
}
.bp-dialog__content p{ margin:0; line-height:1.5; }

/* RTL support for code help dialog */
.bp-dialog__box[dir="rtl"] {
  text-align: right;
}

.bp-dialog__box[dir="rtl"] h3,
.bp-dialog__box[dir="rtl"] p {
  text-align: right;
}

.bp-dialog__box[dir="rtl"] .dialog-actions {
  text-align: left; /* Keep button on left for consistency */
}


/* ===================== LETTER (Опрацювати лист) — responsive fixes ===================== */

/* 1) Дозволяємо тексту стискатися у flex-контейнерах */
.letter-page .letter-flow .upload__header > *,
.letter-page .letter-flow .upload__footer > *,
.letter-page .letter-flow .send-row,
.letter-page .letter-flow .panel,
.letter-page .letter-flow #betreuerPreview{
  min-width: 0;
}


/* Simple Explanation - highlighted section with Simple Language */
.letter-page .letter-flow .explanation-text,
.letter-page .letter-flow #simple-explanation-content {
  background: #f8faff;
  border-left: 5px solid #007bff;
  padding: 15px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
  margin: 16px 0 0 0;
  display: none; /* Hidden by default, shown when content is available */
}

/* RTL support for Farsi and Arabic - text alignment but keep border on left */
.letter-page .letter-flow #simple-explanation-content[dir="rtl"] {
  text-align: right;
  border-left: 5px solid #007bff;
  border-right: none; /* Keep left border for consistency */
}

/* TTS Button Wrapper - spacing after explanation */
.letter-page .letter-flow .tts-button-wrapper {
  margin-top: 15px;
  margin-bottom: 24px;
}

/* TTS Voice Warning - smaller, italic, helpful hint style */
.letter-page .letter-flow .tts-voice-warning {
  font-size: 0.75rem;
  color: #d32f2f;
  margin-top: 4px;
  line-height: 1.4;
  font-style: italic;
  text-align: right; /* RTL for Farsi */
  max-width: 100%;
}

/* Section headers in result body - consistent spacing */
.letter-page .letter-flow .result__body h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}

/* Ensure consistent spacing for first section header after explanation */
.letter-page .letter-flow .result__body > h3:first-of-type {
  margin-top: 24px;
}

.letter-page .letter-flow .simple-explanation {
  background: #f0f7ff;
  border-left: 4px solid #007bff;
  padding: 15px;
  margin: 16px 0 24px 0;
}

.letter-page .letter-flow #simple-explanation-text {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text);
}

.letter-page .letter-flow .simple-explanation strong {
  font-weight: 700;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.6);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Sticky footer for result section Send button */
.letter-flow #result-sec.result {
  padding-bottom: 120px; /* Extra padding to prevent content from being hidden behind sticky footer */
  overflow: hidden; /* Prevent content from breaking card borders */
  /* Performance optimization for smooth scrolling */
  contain: paint;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
}

.letter-flow #result-sec .result__body {
  padding-bottom: 0; /* Remove any default padding-bottom to allow sticky footer to work */
}

.letter-flow .actions--draft {
  /* Sticky footer styling - stays inside card borders */
  position: sticky;
  bottom: 0;
  z-index: 100;
  width: 100%; /* Full width container */
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 100%);
  padding: 15px 20px; /* Proper padding inside card borders */
  margin-top: 24px; /* Space above button */
  /* Account for safe area on mobile devices (notches, home indicators) */
  padding-bottom: calc(15px + env(safe-area-inset-bottom, 0));
  
  /* Center the buttons inside the sticky footer */
  display: flex;
  justify-content: center; /* Center buttons horizontally */
  align-items: center; /* Center buttons vertically */
  flex-direction: column; /* Stack buttons vertically */
  gap: 12px;
}

.letter-flow .actions--draft .btn-primary {
  /* Centered button - respects footer padding */
  width: 100%; /* Full width within footer padding */
  max-width: 350px; /* Prevents stretching on tablets/desktops */
  margin: 0 auto; /* Center the button */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.letter-flow .actions--draft .btn-secondary {
  /* Secondary button - same width as primary for consistency */
  width: 100%; /* Full width within footer padding */
  max-width: 350px; /* Prevents stretching on tablets/desktops */
  margin: 0 auto; /* Center the button */
}

/* 2) Агресивний перенос довгих слів/текстів (OCR, установи, e-mail) */
.letter-page .letter-flow p,
.letter-page .letter-flow li,
.letter-page .letter-flow a,
.letter-page .letter-flow #explanation,
.letter-page .letter-flow .simple-explanation,
.letter-page .letter-flow .panel{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* 3) Upload header: заголовок + кнопка "Додати фото" мають переноситись */
.letter-page .letter-flow .upload__header{
  flex-wrap: wrap;
  align-items: flex-start;
}

.letter-page .letter-flow .upload__header h2{
  margin: 0;
  flex: 1 1 240px; /* заголовок може займати рядок */
}

.letter-page .letter-flow .upload__controls{
  flex: 0 0 auto;
}

/* 4) Upload footer: "Файлів" + кнопки не мають вилазити */
.letter-page .letter-flow .upload__footer{
  flex-wrap: wrap;
  gap: 10px;
}

.letter-page .letter-flow .upload__footer .spacer{
  display: none; /* на мобільному він часто ламає розкладку */
}

@media (max-width: 480px){
  /* кнопки внизу — на всю ширину, одна під одною */
  .letter-page .letter-flow .upload__footer .btn{
    width: 100%;
  }
  
  /* Ensure card has adequate padding on mobile */
  .letter-flow #start-card.card{
    padding:20px 16px;
  }
  
  /* Ensure inputs maintain consistent styling on mobile */
  .letter-flow #startCode,
  .letter-flow #startPin{
    width:100%; /* Ensure full width on mobile, no hardcoded pixel values */
    font-size:16px; /* Prevent zoom on iOS */
    padding:12px 12px; /* Slightly more padding for better touch targets */
    text-align:left; /* Consistent left alignment for placeholders */
  }
}

/* 5) Прев’ю Betreuer (ім’я + e-mail) — щоб не лізло за межі */
#betreuerPreview{
  flex-wrap: wrap;
  gap: 6px;
}
#bpEmail{
  display: inline-block;
  overflow-wrap: anywhere;
}


/* ===================== GLOBAL FOOTER (home only) ===================== */
.app-footer{
  max-width: 820px;
  margin: 18px auto 24px;
  padding: 8px 16px;
  text-align: center;
  color: var(--muted);
}

.app-footer__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.app-footer__gdpr{
  font-size: 11px;
  color: var(--muted);
  white-space: normal;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.app-footer a{
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
  font-size: 12px;
  transition: color 0.2s ease;
}

.app-footer a:hover{
  color: var(--brand);
  text-decoration: underline;
}

.app-footer__row{
  margin: 0;
  line-height: 1.5;
}

.app-footer__contact{
  font-size: 12px;
  color: var(--muted);
}

.app-footer__contact span{
  color: var(--muted);
  margin-right: 4px;
}

.app-footer__meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
}

.app-footer__sep{
  color: var(--muted);
  user-select: none;
  opacity: 0.5;
}

.app-footer__copy{
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* мобільно: ще компактніше */
@media (max-width: 480px){
  .app-footer{
    padding: 8px 12px;
  }
  .app-footer__gdpr{
    font-size: 10px;
  }
  .app-footer a,
  .app-footer__contact,
  .app-footer__meta,
  .app-footer__copy{
    font-size: 11px;
  }
}

/* Home page footer: Dynamic height for multilingual text */
body.home-page-body .app-footer__gdpr {
  white-space: normal !important;
  line-height: 1.4 !important;
  font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
}

/* ===================== CRISIS/EMG — responsive fix ===================== */

/* 1) Ніколи не даємо елементам ширину більшу за контейнер */
.emg .container,
.emg .container *{
  max-width: 100%;
  box-sizing: border-box;
}

/* 2) Дозволяємо тексту “ламатися”, якщо слова/посилання довгі */
.emg .container p,
.emg .container li,
.emg .container a{
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 3) Якщо десь є рядок з кнопками/лінками в один ряд — дозволяємо перенос */
.emg .row,
.emg .actions,
.emg .btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* 4) Важливо для flex: щоб елементи могли стискатись і не “виштовхували” рамку */
.emg .row > *,
.emg .actions > *,
.emg .btn-row > *{
  min-width: 0;
  flex: 1 1 160px;
}

/* 5) Коли лінк/кнопка довгі — дозволь перенос рядка */
.emg a,
.emg button{
  white-space: normal;
}

/* ===================== LEGAL PAGES ===================== */
.legal-page .legal h1{
  margin: 12px 0 6px;
  font-size: clamp(24px, 4.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.legal-panel{
  padding: 16px;
  line-height: 1.6;
}

.legal-panel h2{
  margin: 16px 0 6px;
  font-size: 16px;
  font-weight: 800;
}

.legal-panel p{
  margin: 0 0 10px;
}

.legal a {
  font-size: 1rem;
  display: inline-block;
  padding: 8px 0;
}

/* ===================== LEGAL PAGES (Impressum / Datenschutz) ===================== */
.legal{
  max-width: 720px;        /* щоб не було “на весь телефон” */
  margin: 0 auto;
  font-size: 16px;         /* базовий текст менший і читабельний */
  line-height: 1.6;
}

.legal h1{
  margin: 14px 0 10px;
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.legal h2{
  margin: 18px 0 8px;
  font-size: clamp(16px, 4.5vw, 22px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* обмежуємо довжину рядка, щоб читалось спокійніше */
.legal p, .legal li{
  max-width: 60ch;
}

.legal a{
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================== LOADING OVERLAY ===================== */
/* Overlay starts below header to keep header visible */
.loading-overlay {
  position: fixed;
  top: 64px; /* Start below header (header padding: 12px top + ~40px content + 12px bottom ≈ 64px) */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999; /* Below header z-index (2000) but above content */
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay[hidden] {
  display: none;
}

.loading-content {
  text-align: center;
  max-width: 320px;
  width: 90%;
  padding: 0 20px;
}

/* Progress Tube Container */
.progress-tube-container {
  margin-bottom: 24px;
}

.progress-tube {
  width: 100%;
  height: 12px;
  background: #E5E5EA;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-tube-fill {
  height: 100%;
  width: 0%;
  background: var(--main-brand-blue);
  border-radius: 999px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(10, 88, 202, 0.3);
  position: relative;
  overflow: hidden;
}

.progress-tube-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Loading Stats */
.loading-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loading-percentage {
  font-size: 32px;
  font-weight: 700;
  color: var(--main-brand-blue);
  line-height: 1;
}

.loading-text {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

/* ===================== HOME PAGE: Hard-Override Layout ===================== */
/* Rigid layout for home page only - scoped to body.home-page-body */
body.home-page-body {
  height: 100dvh !important;
  width: 100vw !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.home-page-body .app-header {
  flex: 0 0 auto !important;
}

body.home-page-body .app-footer {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: 20dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.home-page-body main#main {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  padding: 10px 20px !important;
}
body.home-page-body .hero-section {
  flex: 0 0 auto !important;
  height: 20vh !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
body.home-page-body .home-nav {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
  overflow-y: auto !important;
}
body.home-page-body .big-btn {
  min-height: 70px !important;
  margin: 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
body.home-page-body #bp-chat-fab {
  bottom: 100px !important;
}

/* ===================== RECENT BETREUER CODES ===================== */
.code-input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 0;
}

.recent-code-row {
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.recent-code-row:hover {
  background: rgba(0, 0, 0, 0.08);
}

.recent-code-row.recent-code-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .recent-code-row {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  }

  .recent-code-row:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

.recent-code-display {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Roboto', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #212529;
  flex: 1;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  letter-spacing: 0;
}

.recent-code-masked {
  letter-spacing: 2px;
}

.clear-recent-btn {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0.5;
}

.clear-recent-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.clear-recent-btn:hover {
  opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .recent-code-row {
    font-size: 13px;
    padding: 10px 12px; /* Slightly more padding on mobile for better touch targets */
    margin-top: 10px;
  }
  
  .recent-code-display {
    font-size: 16px; /* Prevent zoom on iOS, slightly larger for readability */
  }
  
  .clear-recent-btn {
    width: 28px;
    height: 28px;
  }
  
  .clear-recent-btn svg {
    width: 18px;
    height: 18px;
  }
}