/*
  CoreAI 2 - Enhanced CSS
  Table of Contents:
  1. Root & Theme Variables
  2. Base Styles & Reset
  3. Layout & Container Styles
  4. Header & Navigation
  5. Sidebar & Conversations
  6. Chat Messages & Bubbles
  7. Message Actions & Editing
  8. Input Areas & Forms
  9. Code Blocks & Syntax Highlighting
  10. Welcome Screen & Prompts
  11. PWA Install Banner (Old - Replaced)
  12. Cookie Consent Banner
  13. Policy Modal
  14. Footer
  15. Splash Screen
  16. NEW PWA Install Banner
  17. QR Code Modal
*/

/* 1. Root & Theme Variables */
:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;
    --ease-in-out: all 0.2s ease-in-out;
    --border-radius: 12px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* This variable is controlled by pwa.js to create space for the install banner */
    --pwa-banner-height: 0px;

    /* Light Theme */
    --c-bg-primary: #ffffff;
    --c-bg-secondary: #f8f9fa;
    --c-bg-tertiary: #e9ecef;
    --c-bg-muted: #f8f9fa;
    --c-bg-backdrop: rgba(255, 255, 255, 0.95);
    --c-bg-overlay: rgba(255, 255, 255, 0.8);

    --c-text-primary: #212529;
    --c-text-secondary: #6c757d;
    --c-text-tertiary: #adb5bd;
    --c-text-on-accent: #ffffff;

    --c-border-primary: #dee2e6;
    --c-border-secondary: #ced4da;
    --c-border-dashed: #ced4da;
    --c-input-focus-ring: rgba(92, 127, 230, 0.3);

    --c-accent: #5C7FE6;
    --c-accent-hover: #4a6ddb;
    --c-accent-darker: #3b5ac8;
    --c-user-message-bg: var(--c-accent);
    --c-user-message-text: var(--c-text-on-accent);
    --c-danger: #ef4444;
    --c-danger-hover: #dc2626;
    --c-warning: #f59e0b;
    --c-success: #10b981;

    --c-sidebar-bg: #ffffff;
    --c-sidebar-text: #343a40;
    --c-sidebar-hover-bg: #f1f3f5;
    --c-sidebar-active-bg: #e9ecef;
    --c-sidebar-border: #dee2e6;

    --c-code-bg: #1a1d23;
    --c-code-text: #f8f9fa;
    --c-code-border: #2d3748;
    --c-code-action-bg: #2d3748;
    --c-code-action-border: #4a5568;
    --c-code-action-text: #f8f9fa;

    --c-avatar-user: #5C7FE6;
    --c-avatar-bot: #6c757d;
    --c-avatar-icon-color: var(--c-text-secondary);

    --scrollbar-thumb: #adb5bd;
    --scrollbar-track: #f1f3f5;
    --scrollbar-width: 6px;
}

/* Dark Theme */
.dark-mode {
    --c-bg-primary: #111827;
    /* Very Dark Blue/Gray */
    --c-bg-secondary: #1F2937;
    /* Dark Slate */
    --c-bg-tertiary: #374151;
    /* Medium Gray */
    --c-bg-muted: #1F2937;
    --c-bg-backdrop: rgba(17, 24, 39, 0.85);
    --c-bg-overlay: rgba(31, 41, 55, 0.8);

    --c-text-primary: #E5E7EB;
    /* Softer Off-white */
    --c-text-secondary: #9CA3AF;
    /* Softer Gray */
    --c-text-tertiary: #6B7280;
    --c-text-on-accent: #FFFFFF;

    --c-border-primary: #374151;
    --c-border-secondary: #4B5563;
    --c-border-dashed: #4B5563;
    --c-input-focus-ring: rgba(59, 130, 246, 0.4);
    /* Blue focus ring */

    --c-accent: #3B82F6;
    /* Vibrant Blue */
    --c-accent-hover: #2563EB;
    --c-accent-darker: #1D4ED8;
    --c-user-message-bg: #374151;
    /* User message bubble background */
    --c-user-message-text: #F3F4F6;
    --c-danger: #F87171;
    --c-danger-hover: #EF4444;
    --c-warning: #FBBF24;
    --c-success: #34D399;

    --c-sidebar-bg: #1F2937;
    --c-sidebar-text: #F3F4F6;
    --c-sidebar-hover-bg: #374151;
    --c-sidebar-active-bg: #111827;
    --c-sidebar-border: #374151;

    --c-code-bg: #0d1117;
    /* Near-black for code blocks */
    --c-code-text: #E0E0E0;
    --c-code-border: #30363d;
    --c-code-action-bg: #21262d;
    --c-code-action-border: #30363d;
    --c-code-action-text: #F3F4F6;

    --c-avatar-user: #3B82F6;
    --c-avatar-bot: #9CA3AF;
    --c-avatar-icon-color: var(--c-text-primary);

    --scrollbar-thumb: #4B5563;
    --scrollbar-track: #1F2937;
}

/* 2. Base Styles & Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    background-color: var(--c-bg-secondary);
    color: var(--c-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* Improved scrollbar styling */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-text-tertiary);
}

/* Selection styles */
::selection {
    background-color: var(--c-accent);
    color: var(--c-text-on-accent);
}

/* 3. Layout & Container Styles */
#app-container {
    width: 100%;
    height: 100vh;
    /* Restore to full height */
    display: flex;
    position: relative;
}

#chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: margin-left 0.3s ease-in-out;
    position: relative;
}

/* Main content area */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    /* Add padding to the bottom to make space for the PWA banner */
    padding-bottom: var(--pwa-banner-height, 0px);
    /* Add a smooth transition to the padding change */
    transition: padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Header & Navigation */
.chat-header {
    background-color: var(--c-bg-backdrop);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border-primary);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: var(--ease-in-out);
}

.chat-header .flex-shrink-0 {
    flex-shrink: 0;
}

.chat-header .flex-1 {
    flex: 1;
    text-align: center;
}

.chat-header h1 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text-primary);
    margin: 0;
}

/* Header buttons */
#sidebar-toggle,
#theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: var(--ease-in-out);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

#sidebar-toggle:hover,
#theme-toggle:hover {
    background-color: var(--c-bg-tertiary);
    color: var(--c-text-primary);
    transform: translateY(-1px);
}

#sidebar-toggle:active,
#theme-toggle:active {
    transform: translateY(0);
}

/* 5. Sidebar & Conversations - Enhanced Design */
#sidebar {
    background: linear-gradient(180deg, var(--c-sidebar-bg) 0%, var(--c-sidebar-bg) 100%);
    color: var(--c-sidebar-text);
    border-right: 1px solid var(--c-sidebar-border);
    width: 280px;
    height: 100vh;
    /* Restore to full height */
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    /* Remove height from transition */
    overflow: hidden;
}

#sidebar.sidebar-visible {
    transform: translateX(0);
}

#sidebar.sidebar-hidden {
    transform: translateX(-100%);
}

/* Sidebar Header */
.sidebar-header {
    padding: 1.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--c-sidebar-border);
    background: var(--c-sidebar-bg);
}

.sidebar-brand-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#sidebar-close-button {
    background: none;
    border: none;
    padding: 0.5rem;
    position: absolute;
    right: 5px;
    top: 10px;
    border-radius: 8px;
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: var(--ease-in-out);
    display: none;
    /* Hidden on mobile by default */
}

#sidebar-close-button:hover {
    background-color: var(--c-bg-tertiary);
    color: var(--c-text-primary);
}


.brand-logo {
    width: 40px;
    height: 40px;
    display: flex;
    margin-top: -3px;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-text-primary);
    line-height: 1.2;
}

.brand-tagline {
    font-size: 0.75rem;
    color: var(--c-text-secondary);
    font-weight: 500;
    margin-top: 0.125rem;
}

/* New Chat Button */
#new-chat-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--c-accent);
    border: none;
    border-radius: 12px;
    color: var(--c-text-on-accent);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(92, 127, 230, 0.3);
}

#new-chat-button:hover {
    background: var(--c-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(92, 127, 230, 0.4);
}

#new-chat-button:active {
    transform: translateY(0);
}

/* Conversation List */
#conversation-list-container {
    padding: 0 1rem;
}

.conversation-group {
    margin-bottom: 1rem;
}

.conversation-group:last-child {
    margin-bottom: 0;
}

.section-header {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--c-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.conversation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--ease-in-out);
    position: relative;
    border: 1px solid transparent;
}

.conversation-item:hover {
    background: var(--c-sidebar-hover-bg);
}

.conversation-item.active {
    background: var(--c-sidebar-active-bg);
    border-color: var(--c-accent);
}

.conversation-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    padding-right: 0.5rem;
    color: var(--c-text-primary);
}

/* Kebab menu */
.kebab-menu-container {
    position: relative;
    flex-shrink: 0;
    z-index: 5;
}

.conversation-item:hover .kebab-menu-container,
.kebab-menu-container.menu-visible {
    opacity: 1;
}

.kebab-menu {
    background: none;
    border: none;
    padding: 0.25rem;
    border-radius: 6px;
    color: var(--c-sidebar-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.kebab-menu:hover {
    background-color: var(--c-sidebar-hover-bg);
}

.kebab-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: var(--c-sidebar-bg);
    border: 1px solid var(--c-border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 10;
    width: 140px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    pointer-events: none;
    backdrop-filter: blur(10px);
}

.kebab-menu-dropdown:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.kebab-menu-dropdown button {
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    color: var(--c-sidebar-text);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kebab-menu-dropdown button:hover {
    background-color: var(--c-sidebar-hover-bg);
}

.kebab-menu-dropdown button:first-child {
    border-radius: 8px 8px 0 0;
}

.kebab-menu-dropdown button:last-child {
    border-radius: 0 0 8px 8px;
    color: var(--c-danger);
}

.kebab-menu-dropdown button:last-child:hover {
    background-color: var(--c-danger);
    color: var(--c-text-on-accent);
}

/* Sidebar footer */
.sidebar-footer {
    border-top: 1px solid var(--c-sidebar-border);
    padding: 1rem 1.25rem;
    background: var(--c-sidebar-bg);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s;
    cursor: pointer;
}

.user-profile:hover {
    background-color: var(--c-sidebar-hover-bg);
}

.user-avatar {
    width: 92px;
    height: 92px;
    /* border-radius: 50%; */
    border: 2px solid #F3F4F6;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text-primary);
    line-height: 1.2;
}

.user-status {
    font-size: 0.75rem;
    color: var(--c-text-secondary);
}

/* --- Logo Theme Switching --- */
.logo-dark {
    display: none;
    /* Hide the dark logo by default */
}

.dark-mode .logo-dark {
    display: block;
    /* Show the dark logo in dark mode */
}

.dark-mode .logo-light {
    display: none;
    /* Hide the light logo in dark mode */
}


/* Scrollbar styling for sidebar */
#conversation-list-container::-webkit-scrollbar {
    width: 4px;
}

#conversation-list-container::-webkit-scrollbar-track {
    background: transparent;
}

#conversation-list-container::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 2px;
}

#conversation-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--c-text-tertiary);
}

/* 6. Chat Messages & Bubbles */
#welcome-container,
#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

#welcome-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#chat-messages {
    display: none;
}

.messages-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Message styles */
.message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 100%;
    animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-message {
    flex-direction: row-reverse;
}


.user-message .text pre {
    /* Reset background and borders to blend with the user message bubble */
    background-color: transparent;
    border: none;
    box-shadow: none;

    /* Remove default margins and padding to fit snugly */
    margin: 0;
    padding: 0;

    /* Ensure text wraps within the bubble */
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.875rem;
    /* Match the message font size */
}

.user-message .text code {
    /* The syntax highlighting colors from highlight.js will apply directly to the text,
      but the background will remain the blue (or dark gray) of the user's message bubble.
      We reset the color here to ensure it's not overridden by other styles.
    */
    color: inherit;
    /* Inherit text color from the parent bubble */
}

.message .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--c-bg-tertiary);
    color: var(--c-avatar-icon-color);
    transition: var(--ease-in-out);
    border: 2px solid transparent;
}

.user-message .avatar {
    background-color: var(--c-avatar-user);
    color: var(--c-text-on-accent);
}

.bot-message .avatar {
    background-color: var(--c-avatar-bot);
    color: var(--c-text-on-accent);
}

.message .avatar svg {
    width: 18px;
    height: 18px;
}

.message-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.user-message .message-content {
    align-items: flex-end;
}

.bot-message .message-content {
    align-items: flex-start;
}

.message .text {
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius);
    line-height: 1.6;
    word-wrap: break-word;
    word-break: break-word;
    position: relative;
    transition: var(--ease-in-out);
}

/* Find and update this rule in style.css */
.user-message .text {
    background-color: var(--c-user-message-bg);
    color: var(--c-user-message-text);
    border-bottom-right-radius: 4px;
    box-shadow: var(--shadow-sm);

    /* --- ADDED FOR LONG PROMPTS --- */
    max-height: 350px;
    /* Sets a maximum height for the bubble */
    overflow-y: auto;
    /* Adds a vertical scrollbar ONLY if needed */
    word-break: break-word;
    /* Ensures long words don't overflow horizontally */
    white-space: pre-wrap;
    /* Moved from JS: Ensures newlines are respected */
}

.bot-message .text {
    background-color: var(--c-bg-primary);
    border: 1px solid var(--c-border-primary);
    color: var(--c-text-primary);
    border-bottom-left-radius: 4px;
    width: fit-content;
    max-width: 100%;
    box-shadow: var(--shadow-sm);
}

/* Loading indicator */

.loading-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-text-secondary);
    font-style: italic;
    font-weight: 500;
    /* Makes the text slightly bolder */
}

/* The container for the individual letters. */
.thinking-text {
    display: inline-block;
}

/* Styles for each individual letter span.
  The animation is applied here.
*/
.thinking-text span {
    display: inline-block;
    /* Required for transform to work */
    animation-name: lens-effect;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* The Keyframe Animation for the "Lens Effect".
  - It starts with the letter at normal size and opacity.
  - At the 20% mark, it scales up and becomes fully opaque, creating the "magnified" look.
  - By 40%, it returns to its normal state, completing the effect for that letter.
  The animation-delay on each span creates the wave-like motion.
*/
@keyframes lens-effect {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    20% {
        transform: scale(1.4);
        opacity: 1;
    }

    40% {
        transform: scale(1);
        opacity: 0.7;
    }
}

/* 7. Message Actions & Editing */
.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.message:hover .message-actions {
    opacity: 1;
}

.action-btn {
    background: var(--c-bg-tertiary);
    border: 1px solid var(--c-border-primary);
    color: var(--c-text-secondary);
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: var(--ease-in-out);
    text-decoration: none;
}

.action-btn:hover {
    background-color: var(--c-bg-primary);
    color: var(--c-text-primary);
    border-color: var(--c-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.action-btn span {
    white-space: nowrap;
}

.zip-download-btn {
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8rem;
}

.download-container {
    position: relative;
}

.download-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.5rem;
    background: var(--c-bg-primary);
    border: 1px solid var(--c-border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 10;
    width: 150px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.download-menu.hidden {
    display: none;
}

.download-menu-item {
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    color: var(--c-text-primary);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.download-menu-item:hover {
    background-color: var(--c-bg-tertiary);
}

/* Edit message functionality */
.edit-container {
    width: 800px;
    /* Make the container try to be 800px wide */
    max-width: 100%;
    /* IMPORTANT: Ensure it shrinks on smaller screens and doesn't overflow */
    animation: editSlideIn 0.2s ease-out;
}

@keyframes editSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.edit-textarea {
    width: 100%;
    padding: 0.875rem;
    border-radius: 8px;
    background-color: var(--c-bg-primary);
    color: var(--c-text-primary);
    border: 1px solid var(--c-border-secondary);
    resize: none;
    min-height: 100px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: var(--ease-in-out);
}

.edit-textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-input-focus-ring);
}

.edit-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

.edit-buttons button {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s;
    min-width: 80px;
}

.edit-buttons button:first-of-type {
    background-color: var(--c-accent);
    color: var(--c-text-on-accent);
}

.edit-buttons button:first-of-type:hover {
    background-color: var(--c-accent-hover);
    transform: translateY(-1px);
}

.edit-buttons button:last-of-type {
    background-color: transparent;
    color: var(--c-text-secondary);
    border-color: var(--c-border-primary);
}

.edit-buttons button:last-of-type:hover {
    background-color: var(--c-bg-tertiary);
    color: var(--c-text-primary);
}

/* 8. Input Areas & Forms */
.input-container {
    background-color: var(--c-bg-backdrop);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-border-primary);
    padding: 0.75rem;
    transition: var(--ease-in-out);
    flex-shrink: 0;
}

.input-wrapper {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.input-wrapper.centered {
    display: flex;
    flex-direction: column;
}

#user-input,
#chat-input {
    width: 100%;
    padding: 0.875rem 3.5rem 0.875rem 1rem;
    border: 1px solid var(--c-border-secondary);
    border-radius: var(--border-radius);
    background-color: var(--c-bg-primary);
    color: var(--c-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: none;
    transition: var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

#user-input::placeholder,
#chat-input::placeholder {
    color: var(--c-text-tertiary);
}

#user-input:focus,
#chat-input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-input-focus-ring), var(--shadow-sm);
}

/* Send/Stop buttons */
#send-button,
#chat-send-button,
#stop-button,
#chat-stop-button {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ease-in-out);
    color: var(--c-text-on-accent);
}

#send-button,
#chat-send-button {
    background-color: var(--c-accent);
}

#send-button:hover,
#chat-send-button:hover {
    background-color: var(--c-accent-hover);
    transform: translateY(-50%) scale(1.05);
}

#stop-button,
#chat-stop-button {
    background-color: var(--c-danger);
}

#stop-button:hover,
#chat-stop-button:hover {
    background-color: var(--c-danger-hover);
    transform: translateY(-50%) scale(1.05);
}

#send-button svg,
#chat-send-button svg,
#stop-button svg,
#chat-stop-button svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* 9. Code Blocks & Syntax Highlighting */
.prose-styling {
    max-width: 100%;
    line-height: 1.7;
}

.prose-styling h1,
.prose-styling h2,
.prose-styling h3,
.prose-styling h4 {
    font-weight: 600;
    line-height: 1.3;
    margin: 1.5em 0 0.75em;
    color: var(--c-text-primary);
    scroll-margin-top: 80px;
}

.prose-styling h1 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--c-border-primary);
    padding-bottom: 0.5em;
}

.prose-styling h2 {
    font-size: 1.25rem;
    border-bottom: 1px solid var(--c-border-primary);
    padding-bottom: 0.3em;
}

.prose-styling h3 {
    font-size: 1.1rem;
}

.prose-styling h4 {
    font-size: 1rem;
}

.prose-styling p {
    margin-bottom: 1.25em;
}

.prose-styling ul,
.prose-styling ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25em;
}

.prose-styling li {
    margin-bottom: 0.5em;
    padding-left: 0.375em;
}

.prose-styling li>ul,
.prose-styling li>ol {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose-styling strong {
    font-weight: 600;
    color: inherit;
}

.prose-styling em {
    font-style: italic;
    color: inherit;
}

.prose-styling blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid var(--c-accent);
    background-color: var(--c-bg-muted);
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

.prose-styling hr {
    border: none;
    border-top: 2px dashed var(--c-border-dashed);
    margin: 2em 0;
    opacity: 0.6;
}

.prose-styling a {
    color: var(--c-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.prose-styling a:hover {
    border-bottom-color: var(--c-accent);
}

.prose-styling table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.875rem;
}

.prose-styling th,
.prose-styling td {
    padding: 0.75rem;
    border: 1px solid var(--c-border-primary);
    text-align: left;
}

.prose-styling th {
    background-color: var(--c-bg-tertiary);
    font-weight: 600;
}

.prose-styling tr:nth-child(even) {
    background-color: var(--c-bg-muted);
}

/* Code blocks */
pre {
    background-color: var(--c-code-bg);
    color: var(--c-code-text);
    padding: 1.25rem;
    border-radius: 8px;
    position: relative;
    margin: 1.25rem 0;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    line-height: 1.5;
    overflow-x: auto;
    border: 1px solid var(--c-code-border);
    box-shadow: var(--shadow-sm);
}

pre code {
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Inline code */
.prose-styling code:not(pre code) {
    background-color: var(--c-bg-tertiary);
    color: var(--c-text-primary);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: var(--font-mono);
    border: 1px solid var(--c-border-primary);
}

/* Code actions */
.code-actions {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    gap: 0.5rem;
    background-color: var(--c-bg-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.375rem;
    border-radius: 6px;
    border: 1px solid var(--c-code-border);
    opacity: 0;
    transition: opacity 0.2s ease;
}

pre:hover .code-actions {
    opacity: 1;
}

.code-actions button {
    background-color: var(--c-code-action-bg);
    color: var(--c-code-action-text);
    border: 1px solid var(--c-code-action-border);
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.code-actions button:hover {
    background-color: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-text-on-accent);
    transform: translateY(-1px);
}

.code-actions button:active {
    transform: translateY(0);
}

.code-actions button svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Split layout for code and text */
.bot-message .text.split-layout {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* 14. Responsive Design */

/* Mobile & Tablet */
@media (max-width: 1023px) {
    .bot-message .text.split-layout {
        flex-direction: column;
    }

    .split-layout .text-column {
        order: 1;
        /* Text on top */
        padding: 1.25rem;
        background-color: var(--c-bg-primary);
        border: 1px solid var(--c-border-primary);
        border-radius: var(--border-radius);
    }

    .split-layout .code-column {
        order: 2;
        /* Code below */
        max-height: 400px;
        overflow-y: auto;
    }
}

/* Mobile specific changes */
@media (max-width: 767px) {
    .messages-container {
        max-width: 23rem;
    }

    .message {
        flex-direction: column;
        gap: 0.5rem;
    }

    .user-message {
        align-items: flex-end;
        flex-direction: column;
    }

    .message-content {
        max-width: 100%;
        width: 100%;
    }
}


/* Desktop */
@media (min-width: 1024px) {

    #welcome-container,
    #chat-messages,
    .input-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .messages-container,
    .input-wrapper {
        max-width: 128rem;
    }

    .bot-message .text.split-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .split-layout .text-column {
        /* FIX: Changed to a 50/50 split */
        flex: 1;
        min-width: 0;
        padding: 1.25rem;
        background-color: var(--c-bg-primary);
        border: 1px solid var(--c-border-primary);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-sm);
        order: 1;
        /* FIX: Ensure word wrapping for prose */
        word-wrap: break-word;
    }

    .split-layout .code-column {
        /* FIX: Changed to a 50/50 split */
        flex: 1;
        min-width: 0;
        max-height: 80vh;
        /* Adjusted for better screen fit */
        overflow-y: auto;
        padding-left: 1rem;
        order: 2;
        position: sticky;
        top: 0px;
        /* Sticky below header */
    }

    /* FIX: Added styles for word wrapping in both columns */
    .text-column.prose-styling,
    .code-column.prose-styling {
        word-wrap: break-word;
        word-break: break-word;
    }

    .code-column pre {
        margin-top: 0;
        white-space: pre-wrap;
        word-break: break-all;
    }
}

/* 10. Welcome Screen & Prompts - Updated */
.welcome-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 2rem;
}

.prompt-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    overflow-y: hidden;
}

.prompt-menu:hover {
    overflow-y: auto;
}


.prompt-btn {
    padding: 0.75rem 1rem;
    border: 1px solid var(--c-border-secondary);
    background-color: var(--c-bg-primary);
    color: var(--c-text-primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s;
    text-align: center;
    word-wrap: break-word;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    min-width: fit-content;
    width: auto;
    flex-shrink: 0;
}

.prompt-btn:hover {
    background-color: var(--c-bg-muted);
    border-color: var(--c-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.prompt-btn:active {
    transform: translateY(0);
}

.prompt-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(92, 127, 230, 0.1), transparent);
    transition: left 0.5s;
}

.prompt-btn:hover::before {
    left: 100%;
}

/* Responsive adjustments for prompt menu */
@media (max-width: 768px) {
    .prompt-menu {
        gap: 0.5rem;
        padding: 0 0.5rem;
        overflow-y: auto;
    }

    .prompt-btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .prompt-menu {
        max-width: 100%;
        gap: 0.5rem;
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
        margin: 0 auto 2rem;
        overflow-y: auto;
    }

    .prompt-btn {
        width: fit-content;
        white-space: normal;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 11. PWA Install Banner (Old - Replaced by section 16) */
/* This section is intentionally left blank. The new styles are in section 16. */


/* 12. Cookie Consent Banner */
#cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--c-bg-backdrop);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1001;
    border-top: 1px solid var(--c-border-primary);
    padding: 1rem;
    animation: cookie-banner-slide-in 0.5s ease-out forwards;
}

@keyframes cookie-banner-slide-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

#cookie-consent-banner.hidden {
    display: none;
}

.cookie-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cookie-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--c-text-primary);
}

.cookie-content p {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--c-text-secondary);
    margin-bottom: 1rem;
}

.cookie-content a {
    color: var(--c-accent);
    text-decoration: underline;
    cursor: pointer;
}

.cookie-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.cookie-actions button {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--ease-in-out);
}

#accept-cookies-btn {
    background-color: var(--c-accent);
    color: var(--c-text-on-accent);
}

#accept-cookies-btn:hover {
    background-color: var(--c-accent-hover);
}

#manage-cookies-btn {
    background-color: var(--c-bg-tertiary);
    color: var(--c-text-primary);
}

#manage-cookies-btn:hover {
    background-color: var(--c-border-primary);
}

/* 13. Policy Modal */
#policy-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#policy-modal.hidden {
    display: none;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content {
    background-color: var(--c-bg-primary);
    color: var(--c-text-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 800px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: modal-fade-in 0.3s ease-out;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--c-bg-tertiary);
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--c-text-secondary);
    transition: var(--ease-in-out);
}

#modal-close-btn:hover {
    background-color: var(--c-border-primary);
    transform: rotate(90deg);
}

#modal-body {
    padding: 2rem;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#modal-body h1 {
    color: var(--c-text-primary);
}

#modal-body h2 {
    color: var(--c-text-primary);
}

#modal-body a {
    color: var(--c-accent);
}

/* 14. Footer */
.app-footer {
    text-align: center;
    padding-top: 0.4rem;
    padding-bottom: 0.1rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    font-size: 0.75rem;
    color: var(--c-text-tertiary);
}

.app-footer p {
    margin: 0.25rem 0;
}

.app-footer a {
    color: var(--c-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.app-footer a.policy-link {
    cursor: pointer;
    text-decoration: underline;
}

.app-footer a:hover {
    color: var(--c-accent);
}


/* --- 15. Splash Screen Progress Bar --- */
#loading-progress-container {
    width: 200px;
    height: 8px;
    background-color: var(--c-bg-tertiary);
    border-radius: 4px;
    margin: 2rem auto 0;
    overflow: hidden;
}

#loading-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--c-accent);
    border-radius: 4px;
    transition: width 0.3s ease-in-out;
}

#loading-status-text {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--c-text-secondary);
    font-family: var(--font-mono);
}


/* --- 16. NEW PWA INSTALL BANNER --- */
.pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--c-bg-primary);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--c-border-primary);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    z-index: 999;
}

.pwa-install-banner.minimized {
    transform: translateY(calc(100% - 36px));
}

/* This class is added by JS to trigger the slide-out animation */
.pwa-install-banner.removing {
    transform: translateY(100%);
}

.pwa-peek-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-bg-tertiary);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 1px solid var(--c-border-primary);
    gap: 0.5rem;
}

.pwa-peek-bar span {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--c-text-secondary);
}

.pwa-peek-bar:hover {
    background-color: var(--c-border-primary);
}

.pwa-peek-bar .pwa-arrow {
    width: 24px;
    height: 24px;
    color: var(--c-text-secondary);
    transition: transform 0.3s ease-in-out;
}

.pwa-install-banner:not(.minimized) .pwa-arrow {
    transform: rotate(180deg);
}

.pwa-content {
    display: flex;
    align-items: center;
    padding: 1rem;
    padding-top: calc(1rem + 36px);
    gap: 1rem;
}

.pwa-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.pwa-text {
    flex-grow: 1;
    min-width: 0;
}

.pwa-text strong {
    font-size: 1rem;
    font-weight: 600;
    display: block;
    color: var(--c-text-primary);
}

.pwa-text p {
    font-size: 0.875rem;
    color: var(--c-text-secondary);
    margin: 0.1rem 0 0 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pwa-button {
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.pwa-button.install {
    background-color: var(--c-accent);
    color: var(--c-text-on-accent);
    padding: 0.6rem 1.2rem;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
}

.pwa-button.install:hover {
    background-color: var(--c-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.pwa-button.dismiss {
    background-color: transparent;
    color: var(--c-text-secondary);
    width: 32px;
    height: 32px;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-button.dismiss:hover {
    background-color: var(--c-bg-tertiary);
    color: var(--c-text-primary);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .pwa-content {
        padding: 0.75rem;
        padding-top: calc(0.75rem + 36px);
    }

    .pwa-text p {
        display: none;
    }

    .pwa-button.install {
        padding: 0.5rem 1rem;
    }
}

/* Dark mode adjustments */
.dark-mode .pwa-install-banner {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
}

.dark-mode .pwa-peek-bar {
    background-color: var(--c-bg-secondary);
    border-bottom: 1px solid var(--c-border-primary);
}

.dark-mode .pwa-button.dismiss:hover {
    color: var(--c-text-primary);
}

/* --- 17. Layout Adjustments for Banner --- */

/* Use the CSS variable to adjust the height of the main app container and sidebar */
#app-container,
#sidebar {
    /* Use calc() to subtract the banner's height from the full viewport height */
    height: calc(100vh - var(--pwa-banner-height, 0px));
    /* Add a smooth transition to the height change */
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 18. QR Code and Import Modal Styles --- */
.qr-code-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.qr-code-modal.visible {
    opacity: 1;
    pointer-events: all;
}

.qr-code-modal .modal-overlay {
    position: absolute;
}

.qr-code-modal .modal-content {
    width: auto;
    height: auto;
    max-width: 90vw;
    padding: 2rem;
    text-align: center;
}

.qr-code-modal .modal-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--c-text-primary);
}

.qr-code-modal .modal-content p {
    color: var(--c-text-secondary);
    margin-bottom: 1.5rem;
}

#qr-code-container {
    background: white;
    padding: 1rem;
    border-radius: var(--border-radius);
    display: inline-block;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
}

#qr-code-container img {
    display: block;
}

.import-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.import-actions button {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--ease-in-out);
    border: 1px solid var(--c-border-primary);
}