/* Loading screen styles */
      .loading-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
      }
      
      .loading-screen.dark {
        background: var(--gw-gray-800);
      }
      
      .loading-screen.fade-out {
        opacity: 0;
        visibility: hidden;
      }
      
      .loading-logo {
        /* ~33% smaller */
        width: 80px;
        height: 80px;
        margin-bottom: 2rem;
        margin-top: 6vh; /* a bit more distance from top on start screen */
        animation: pulse 2s infinite;
      }
      
      .loading-spinner {
        width: 60px;
        height: 60px;
        border: 4px solid rgba(255, 255, 255, 0.3);
        border-top: 4px solid #ffffff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      
      .loading-text {
        color: white;
        font-size: 1.125rem;
        font-weight: 500;
        margin-top: 1rem;
        text-align: center;
        opacity: 0;
        animation: fadeInUp 0.8s ease-out 0.5s forwards;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      
      @keyframes pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.05); opacity: 0.8; }
      }
      
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      /* Hide main app content initially */
      .app-content {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease-in, visibility 0.5s ease-in;
      }
      
      .app-content.loaded {
        opacity: 1;
        visibility: visible;
      }
    

      :root {
        --gw-gray-50: #fafafa;
        --gw-gray-100: #f5f5f5;
        --gw-gray-200: #e5e5e5;
        --gw-gray-300: #d4d4d4;
        --gw-gray-400: #a3a3a3;
        --gw-gray-500: #737373;
        --gw-gray-600: #525252;
        --gw-gray-700: #3a3a3a;
        --gw-gray-800: #262626;
        --gw-gray-900: #212121;
        --chat-font-size: 16px;
        --chat-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --safe-area-inset-top: env(safe-area-inset-top, 0px);
        --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
        --safe-area-inset-left: env(safe-area-inset-left, 0px);
        --safe-area-inset-right: env(safe-area-inset-right, 0px);
      }
      /* Dark mode should stay grayscale-only (no blue/slate tint). */
      .dark {
        --gw-gray-400: #a3a3a3;
        --gw-gray-500: #737373;
        --gw-gray-600: #525252;
        --gw-gray-700: #3a3a3a;
        --gw-gray-800: #262626;
        --gw-gray-900: #212121;
      }
      html.dark,
      html.dark body {
        background-color: #212121 !important;
      }
      html.dark .main-content,
      html.dark main {
        background-color: #262626 !important;
      }
      .dark header {
        background: rgba(48, 48, 48, 0.95) !important;
        border-color: #3a3a3a !important;
      }
      .dark .chat-input-container .rounded-xl {
        background-color: rgba(43, 43, 43, 0.95) !important;
        border-color: rgba(82, 82, 82, 0.8) !important;
      }
      .dark .dark\:bg-gray-800 {
        background-color: #212121 !important;
      }
      .dark .dark\:bg-gray-800\/60 {
        background-color: rgba(33, 33, 33, 0.6) !important;
      }
      .dark .dark\:bg-gray-700 {
        background-color: #2b2b2b !important;
      }
      .dark .dark\:bg-gray-700\/20 {
        background-color: rgba(43, 43, 43, 0.2) !important;
      }
      .dark .dark\:bg-gray-700\/30 {
        background-color: rgba(43, 43, 43, 0.3) !important;
      }
      .dark .dark\:bg-gray-700\/40 {
        background-color: rgba(43, 43, 43, 0.4) !important;
      }
      .dark .dark\:bg-gray-700\/50 {
        background-color: rgba(43, 43, 43, 0.5) !important;
      }
      .dark .dark\:bg-gray-700\/80 {
        background-color: rgba(43, 43, 43, 0.8) !important;
      }
      .dark .dark\:bg-gray-700\/90 {
        background-color: rgba(43, 43, 43, 0.9) !important;
      }
      .dark .dark\:bg-gray-700\/95 {
        background-color: rgba(43, 43, 43, 0.95) !important;
      }
      .dark .dark\:border-gray-700 {
        border-color: #3a3a3a !important;
      }
      .dark .dark\:border-gray-600 {
        border-color: #525252 !important;
      }
      .dark .dark\:text-gray-100 {
        color: #f5f5f5 !important;
      }
      .dark .dark\:text-gray-200 {
        color: #e5e5e5 !important;
      }
      .dark .dark\:text-gray-300 {
        color: #d4d4d4 !important;
      }
      .dark .dark\:text-gray-400 {
        color: #a3a3a3 !important;
      }
      .dark .dark\:text-gray-500 {
        color: #737373 !important;
      }
      .dark .prose,
      .dark .prose-invert {
        --tw-prose-invert-links: #d4d4d4;
      }
      .dark .prose a {
        color: #d4d4d4 !important;
      }
      .dark .prose a:hover {
        color: #e5e5e5 !important;
      }
      .dark input[type="text"]:focus,
      .dark input[type="email"]:focus,
      .dark input[type="url"]:focus,
      .dark input[type="password"]:focus,
      .dark input[type="number"]:focus,
      .dark input[type="date"]:focus,
      .dark input[type="datetime-local"]:focus,
      .dark input[type="month"]:focus,
      .dark input[type="search"]:focus,
      .dark input[type="tel"]:focus,
      .dark input[type="time"]:focus,
      .dark input[type="week"]:focus,
      .dark input[multiple]:focus,
      .dark textarea:focus,
      .dark select:focus {
        --tw-ring-color: rgb(115 115 115 / 1) !important;
        border-color: #737373 !important;
      }
      .dark input[type="checkbox"],
      .dark input[type="radio"] {
        color: #737373 !important;
      }
      .dark {
        --gw-range-accent: #737373;
      }
      .chat-content, .prompt-input {
          font-size: var(--chat-font-size) !important;
          font-family: var(--chat-font-family) !important;
      }
      
      /* Apply font to chat messages */
      .message-user, .message-assistant, #messages-container, .chat-content {
          font-family: var(--chat-font-family) !important;
      }
      
      /* Hide scrollbars but keep scroll functionality */
      #messages-container,
      .overflow-y-auto {
          /* Firefox */
          scrollbar-width: none;
          /* Chrome, Safari, Edge */
          -ms-overflow-style: none;
      }
      
      #messages-container::-webkit-scrollbar,
      .overflow-y-auto::-webkit-scrollbar {
          display: none;
      }
      
      /* Keep chat layout from overflowing horizontally (especially on tablets) */
      #messages-container {
          overflow-x: hidden;
      }
      .chat-message-content {
          max-width: 100%;
          min-width: 0;
      }
      .chat-message-content pre {
          overflow-x: auto;
          max-width: 100%;
      }
      /* Allow inline code to wrap while keeping block code scrollable */
      .chat-message-content :not(pre) > code {
          white-space: pre-wrap;
          word-break: break-word;
      }
      
      /* Mobile fix: Keep send button in place when font size changes */
      @media (max-width: 767px) {
        /* Ensure form uses flexbox properly on mobile */
        #prompt-form,
        form.flex.items-end,
        .chat-input-container form {
          display: flex !important;
          flex-wrap: nowrap !important;
          align-items: flex-end !important;
        }
        
        /* Fix send button position on mobile - prevent it from moving when font size changes */
        #prompt-form button[type="submit"],
        form.flex.items-end button[type="submit"],
        .chat-input-container form button[type="submit"] {
          width: 44px !important;
          min-width: 44px !important;
          max-width: 44px !important;
          height: 44px !important;
          min-height: 44px !important;
          max-height: 44px !important;
          flex-shrink: 0 !important;
          padding: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-size: 16px !important;
          contain: layout paint;
        }

        #prompt-form button[type="submit"] svg,
        #prompt-form button[type="button"] svg,
        #prompt-form [data-tools-menu-trigger] svg,
        #prompt-form .voice-input-btn svg {
          display: block !important;
          width: 20px !important;
          min-width: 20px !important;
          height: 20px !important;
          min-height: 20px !important;
          opacity: 1 !important;
          visibility: visible !important;
          stroke: currentColor;
        }
        
        /* Ensure vision and document buttons also have fixed size */
        #prompt-form button[type="button"],
        .chat-input-container form button[type="button"] {
          width: 40px !important;
          min-width: 40px !important;
          max-width: 40px !important;
          height: 40px !important;
          min-height: 40px !important;
          max-height: 40px !important;
          flex-shrink: 0 !important;
          padding: 0 !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          contain: layout paint;
        }
        
        /* Ensure textarea container respects remaining space */
        #prompt-form .relative.flex-1,
        #prompt-form .flex-1,
        form.flex.items-end .flex-1,
        .chat-input-container form .flex-1 {
          flex: 1 1 auto !important;
          min-width: 0 !important;
          overflow: hidden !important;
        }
        
        /* Ensure inner textarea wrapper also respects space */
        #prompt-form .relative.flex-1 > div,
        .chat-input-container form .relative.flex-1 > div {
          width: 100% !important;
          display: flex !important;
          align-items: center !important;
        }
        
        /* Textarea should respect the font size but not affect button position */
        #prompt-form textarea.prompt-input,
        form.flex.items-end textarea.prompt-input,
        .chat-input-container form textarea.prompt-input,
        textarea.prompt-input {
          flex: 1 1 auto !important;
          min-width: 0 !important;
          font-size: var(--chat-font-size, 16px) !important;
        }
        
        /* Platzhaltertext soll nicht umbrechen - nur wenn Textarea leer ist */
        #prompt-form textarea.prompt-input::placeholder,
        form.flex.items-end textarea.prompt-input::placeholder,
        .chat-input-container form textarea.prompt-input::placeholder,
        textarea.prompt-input::placeholder {
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }
        
        /* Eingegebener Text soll mehrzeilig sein können */
        #prompt-form textarea.prompt-input:not(:placeholder-shown),
        form.flex.items-end textarea.prompt-input:not(:placeholder-shown),
        .chat-input-container form textarea.prompt-input:not(:placeholder-shown),
        textarea.prompt-input:not(:placeholder-shown) {
          white-space: pre-wrap !important;
        }
        
        /* (ehem.) Focus-Ring-Container Regeln entfernt: wir zeigen keinen Fokus-Ring am Prompt-Wrapper */
        
        /* Clear button inside textarea should also have fixed size */
        #prompt-form .relative.flex-1 button[type="button"],
        .chat-input-container form .relative.flex-1 button[type="button"] {
          width: 32px !important;
          min-width: 32px !important;
          max-width: 32px !important;
          height: 32px !important;
          min-height: 32px !important;
          max-height: 32px !important;
          flex-shrink: 0 !important;
          padding: 4px !important;
          contain: layout paint;
        }
      }
      /* Scale KaTeX elements with font size */
      .katex {
        font-size: calc(var(--chat-font-size) * 1.1) !important;
      }
      .katex-display {
        margin: 1em 0;
      }
      .katex-display > .katex {
        font-size: calc(var(--chat-font-size) * 1.2) !important;
      }
      
      /* Android browser viewport fixes */
      body {
        padding-top: var(--safe-area-inset-top);
        padding-bottom: var(--safe-area-inset-bottom);
        padding-left: var(--safe-area-inset-left);
        padding-right: var(--safe-area-inset-right);
        min-height: 100vh;
        min-height: -webkit-fill-available;
        overflow-x: hidden;
      }
      
      /* Ensure header stays visible */
      header {
        position: sticky;
        top: var(--safe-area-inset-top);
        z-index: 50;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      
      /* Ensure chat input stays at bottom */
      .chat-input-container {
        position: fixed;
        bottom: var(--chat-input-visual-bottom, 0px);
        left: calc(50% + (var(--sidebar-shift, 0rem) / 2));
        transform: translateX(-50%);
        width: calc(100% - var(--sidebar-shift, 0rem));
        max-width: 790px !important;
        z-index: 50;
        padding: 1rem 0.5rem calc(var(--safe-area-inset-bottom, 0px) + 0.5rem) 0.5rem;
        transition: all 0.3s ease-in-out;
      }
      
      .dark .chat-input-container { background: transparent; }
      
      /* Chat input container inner elements */
      .chat-input-container > div {
        width: 100%;
        max-width: 790px !important;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
      }
      
      .chat-input-container .rounded-xl {
        width: 100%;
        max-width: 790px !important;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
      }
      
      #prompt-form {
        width: 100%;
        max-width: 790px !important;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
      }

      .chat-input-container button,
      .chat-input-container [role="button"] {
        -webkit-tap-highlight-color: transparent;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
      }

      .chat-input-container button > svg,
      .chat-input-container [role="button"] > svg,
      .chat-input-container [data-tools-menu-trigger] svg {
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        min-width: 1rem;
        min-height: 1rem;
        flex: none;
        pointer-events: none;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
      }

      .chat-input-container.chat-input-repaint button > svg,
      .chat-input-container.chat-input-repaint [role="button"] > svg,
      .chat-input-container.chat-input-repaint [data-tools-menu-trigger] svg {
        transform: translateZ(0) scale(1.0001);
        -webkit-transform: translateZ(0) scale(1.0001);
      }
      
      /* Arcana chat input styling */
      #arcana-message-form {
        width: 100%;
        max-width: 790px !important;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
      }
      
      #chat-window .bg-gray-100 {
        width: 100%;
        max-width: 790px !important;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
      }
      
      #message-list {
        width: 100%;
        max-width: 790px !important;
        margin: 0 auto;
        transition: all 0.3s ease-in-out;
      }
      
      /* Prevent content from being hidden behind browser UI */
      .main-content {
        min-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
      }
      
      /* Mobile-specific adjustments */
      @media (max-width: 768px) {
        body {
          /* Additional padding for mobile browsers */
          padding-bottom: 0; /* Remove bottom padding since input is now fixed overlay */
        }
        
        /* Ensure toast notifications don't get hidden (now pinned to the top) */
        .toast-container {
          top: calc(var(--safe-area-inset-top) + 3rem);
        }
        
        /* Chat input responsive adjustments */
        .chat-input-container {
          left: var(--sidebar-shift, 0rem);
          transform: none;
          width: calc(100% - var(--sidebar-shift, 0rem));
          max-width: 100% !important;
          bottom: var(--chat-input-visual-bottom, 0px);
          padding-left: 0.5rem;
          padding-right: 0.5rem;
          overflow-x: visible !important; /* Focus-Ring soll sichtbar bleiben */
        }

        /* Very narrow screens: keep input full width even when sidebar is open */
        @media (max-width: 480px) {
          .chat-input-container {
            left: 0;
            width: 100%;
          }
        }
        
        /* Focus-Ring Container auf Mobile: Genug Platz */
        #prompt-form .relative.flex-1 > div,
        form.flex.items-end .relative.flex-1 > div,
        .chat-input-container form .relative.flex-1 > div {
          overflow: visible !important;
          padding: 2px !important; /* Platz für Focus-Ring */
        }
        
        .chat-input-container > div,
        .chat-input-container .rounded-xl,
        #prompt-form,
        #arcana-message-form,
        #chat-window .bg-gray-100,
        #message-list {
          max-width: 100% !important;
          overflow-x: hidden; /* Prevent horizontal scrolling on mobile */
        }
        
        /* Adjust messages container padding for mobile */
        #messages-container {
          padding-bottom: calc(160px + var(--safe-area-inset-bottom, 0px)) !important; /* Reduced from 200px to 160px */
          overflow-x: hidden; /* Prevent horizontal scrolling on mobile */
        }
        
        /* Code block fixes for mobile */
        pre {
          overflow-x: hidden !important; /* Prevent horizontal scrolling on mobile */
          white-space: pre-wrap !important; /* Allow code to wrap */
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        pre code {
          white-space: pre-wrap !important; /* Allow code to wrap */
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        code {
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        /* Prose code blocks */
        .prose pre {
          overflow-x: hidden !important; /* Prevent horizontal scrolling on mobile */
          white-space: pre-wrap !important; /* Allow code to wrap */
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        .prose pre code {
          white-space: pre-wrap !important; /* Allow code to wrap */
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        .prose code {
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        /* Codehilite blocks */
        .codehilite {
          overflow-x: hidden !important; /* Prevent horizontal scrolling on mobile */
          white-space: pre-wrap !important; /* Allow code to wrap */
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
      }
      
      /* iOS Safari specific */
      @supports (-webkit-touch-callout: none) {
        body {
          min-height: -webkit-fill-available;
        }
      }
      
      /* Android Chrome/Samsung Internet specific fixes */
      @media screen and (max-width: 768px) {
        /* Prevent zoom on input focus */
        input, textarea, select {
          font-size: 16px !important;
        }
        
        /* Ensure proper viewport handling */
        html {
          height: 100%;
          overflow: hidden;
        }
        
        body {
          height: 100%;
          overflow: hidden;
          overflow-x: hidden; /* Prevent horizontal scrolling */
          position: fixed;
          width: 100%;
          -webkit-overflow-scrolling: touch;
        }
        
        /* Ensure content is scrollable within the fixed body */
        .main-content {
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden; /* Prevent horizontal scrolling */
          -webkit-overflow-scrolling: touch;
        }
        
        /* Ensure header is always visible */
        header {
          position: sticky;
          top: 0;
          z-index: 50;
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }
        
        .dark header {
          background: rgba(31, 41, 55, 0.95);
        }
      }
      
      /* Handle viewport height changes */
      .vh-dynamic {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
      }
      
      /* Ensure modals work properly on mobile */
      .modal-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background-color: rgba(0, 0, 0, 0.5);
      }
      
      /* Prevent body scroll when modal is open */
      body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
      }
      
      /* Messages container with safe area consideration */
      #messages-container {
        padding-bottom: calc(160px + var(--safe-area-inset-bottom, 0px)) !important;
      }
      
      /* Modal container positioning - ensure it's always at the very top level */
      #modal-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        pointer-events: none;
      }
      
      #modal-container:not(.hidden) {
        pointer-events: auto;
      }
      
      /* Ensure modal content stays within bounds */
      #modal-container > div {
        max-width: 100vw !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }
      
      /* Range-Inputs: kein overflow:hidden — sonst wird der Slider-Thumb (Kugel) abgeschnitten */
      #modal-container input[type="range"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
      }
      
      /* Mobile: Alle Chat-Bubbles auf max-width: 100% begrenzen */
      @media (max-width: 768px) {
        /* Alle Chat-Bubbles auf Mobile begrenzen */
        .flex.justify-center > div,
        .message-assistant > div,
        .flex.justify-end > div,
        .message-user > div,
        [class*="max-w-["][class*="rounded"] {
          max-width: 100% !important;
          width: 100% !important;
          box-sizing: border-box !important;
        }
        
        /* Prose und chat-content auf Mobile */
        .prose,
        .chat-content,
        .prose *,
        .chat-content * {
          max-width: 100% !important;
          box-sizing: border-box !important;
          overflow-x: hidden !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
        }
        
        /* Code-Blöcke auf Mobile umbrechen */
        .prose pre,
        .chat-content pre,
        pre {
          max-width: 100% !important;
          overflow-x: auto !important;
          white-space: pre-wrap !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          box-sizing: border-box !important;
        }
        
        .prose pre code,
        .chat-content pre code,
        pre code {
          max-width: 100% !important;
          white-space: pre-wrap !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          box-sizing: border-box !important;
        }
        
        /* Tabellen auf Mobile umbrechen */
        .prose table,
        .chat-content table,
        table {
          max-width: 100% !important;
          display: block !important;
          overflow-x: auto !important;
          -webkit-overflow-scrolling: touch !important;
          box-sizing: border-box !important;
        }
        
        /* Alle anderen breiten Elemente */
        .prose img,
        .chat-content img,
        .prose video,
        .chat-content video,
        .prose iframe,
        .chat-content iframe {
          max-width: 100% !important;
          height: auto !important;
          box-sizing: border-box !important;
        }
        
        /* Messages Container auf Mobile */
        #messages-container {
          overflow-x: hidden !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
        }
        
        /* Streaming content */
        .streaming-markdown,
        .streaming-markdown * {
          max-width: 100% !important;
          box-sizing: border-box !important;
          overflow-x: hidden !important;
          word-wrap: break-word !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
        }
      }
    
.htmx-indicator{opacity:0;visibility: hidden} .htmx-request .htmx-indicator, .htmx-request.htmx-indicator{opacity:1;visibility: visible;transition: opacity 200ms ease-in}