/* General Layout */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1a1a1a;
    color: #e0e0e0;
    min-height: 100vh; /* Ensure body takes full viewport height */
    display: flex; /* Use flexbox for body to make app-wrapper fill it */
    flex-direction: column;
}

.app-wrapper { /* Main container for the two-column layout */
    display: flex;
    flex-grow: 1; /* Allow wrapper to grow and fill body */
    width: 100%;
    max-width: 100%; /* Ensure it doesn't overflow */
    min-height: 100vh; /* Ensure the wrapper takes at least full viewport height */
}

/* Side Panel Styling */
.side-panel {
    background-color: #2b2b2b;
    border-right: 1px solid #3a3a3a;
    width: 400px;
    min-width: 50px; /* Minimum width when collapsed */
    max-width: 450px; /* Optional: Maximum width when uncollapsed */
    overflow-y: auto; /* Scrollable content inside sidebar */
    box-sizing: border-box;
    position: relative; /* For toggle button positioning */
    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease, transform 0.3s ease; /* Smooth transition for collapsing */
    flex-shrink: 0; /* Prevent panel from shrinking below its content */
    z-index: 1000; /* Ensure it's above main content for toggle */
    padding: 20px; /* Padding for the content */
    height: 100vh; /* Make side panel exactly viewport height */
}

.side-panel.collapsed {
    width: 50px; /* Small visible width for toggle button */
    min-width: 50px;
    max-width: 50px;
    padding: 0; /* Remove padding when collapsed */
    transform: translateX(0%); 
    border-right: 1px solid #3a3a3a; 
}

/* Keep toggle button fixed */
.toggle-side-panel-btn {
    position: absolute;
    left: 5px; /* Position button in the far left corner */
    top: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    transition: transform 0.3s ease, background-color 0.2s ease, left 0.3s ease;
}

.side-panel.collapsed .toggle-side-panel-btn {
    left: 5px; /* Stays fixed */
}

.toggle-side-panel-btn img {
    width: 24px;
    height: 24px;
    filter: invert(100%); /* Make SVG white */
    transition: none; 
}

/* Panel Content within Side Panel (actual scrollable content) */
.panel-content { 
    width: 100%;
    height: 100%; 
    overflow-y: auto; 
    padding-right: 10px; 
    box-sizing: border-box;
    /* For collapsed state, hide text content using opacity/pointer-events */
    padding-top: 60px; /* Make space for the hamburger button */
    transition: opacity 0.3s ease; /* Transition for hiding/showing content */
}

/* Hide specific text elements and controls when side-panel is collapsed */
.side-panel.collapsed .panel-content h2:not(.sidebar-bottom-button span), /* Keep h2 in sidebar-bottom-button */
.side-panel.collapsed .panel-content .control-group,
.side-panel.collapsed .panel-content button:not(.toggle-side-panel-btn):not(.collapse-toggle-btn):not(.sidebar-bottom-button), /* Exclude sidebar-bottom-button */
.side-panel.collapsed .panel-content .message,
.side-panel.collapsed .panel-content .usage-grid,
.side-panel.collapsed .panel-content .form-group p {
    display: none; /* Hide these specific elements completely */
}

/* Styling for the 'Settings & Help' button at the bottom of the sidebar */
.sidebar-bottom-button {
    position: absolute; /* Position relative to the side-panel */
    bottom: 20px; /* Distance from the bottom */
    left: 20px; /* Align with left padding */
    right: 20px; /* Align with right padding */
    width: auto; /* Adjust width automatically */
    display: flex; /* Use flex for icon and text alignment */
    align-items: center;
    justify-content: flex-start; /* Align content to the start */
    padding: 10px 15px; /* Comfortable padding */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add some depth */
    z-index: 100; /* Ensure it's above other content in sidebar */
}

.sidebar-bottom-button:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.sidebar-bottom-button img {
    width: 24px; /* Icon size */
    height: 24px;
    margin-right: 10px; /* Space between icon and text */
    filter: invert(100%); /* Make SVG white */
}

/* Hide text of bottom button when sidebar is collapsed */
.side-panel.collapsed .sidebar-bottom-button span {
    display: none;
}

/* Adjust button size/padding when sidebar is collapsed to just show icon */
.side-panel.collapsed .sidebar-bottom-button {
    left: 5px; /* Reposition slightly */
    right: auto; /* Allow width to shrink */
    width: 40px; /* Square button */
    height: 40px;
    padding: 0; /* Remove padding */
    border-radius: 50%; /* Make it circular */
    justify-content: center; /* Center icon */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Smaller shadow */
}

/* Adjust panel-content padding when collapsed to avoid overlap with toggle button */
.side-panel.collapsed .panel-content {
    padding-top: 50px; /* Space for the top toggle button */
    padding-bottom: 70px; /* Space for the bottom settings button */
}

/* Styling for sections within the user settings modal */
.userSettingsModal .settings-section {
    background-color: #3a3a3a;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.userSettingsModal .settings-section h3 {
    color: #8be9fd; /* Accent color for section titles */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.userSettingsModal .settings-section .control-group {
    margin-bottom: 10px;
}

.userSettingsModal .settings-section button {
    margin-top: 10px;
    margin-right: 10px;
}

/* App Version Display in Modal */
.app-version-modal-display {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #4c566a;
    font-size: 0.9em;
    color: #88c0d0;
    text-align: right;
}

/* Collapsible Section Specifics */
.collapsible-section {
    padding: 0; 
    margin-bottom: 10px; 
}

/* Ensure collapsible headers (with icons) and their toggle buttons are visible and aligned */
.collapsible-header {
    display: flex; /* Keep flex for alignment */
    justify-content: flex-start; /* Changed from space-between  */	
    gap: 10px; /* Added spacing between icon and text */
    align-items: left;
    padding: 10px 5px; /* Default padding for expanded state */
    cursor: pointer;
    background-color: #444;
    border-radius: 6px;
    margin-bottom: 0;
    transition: background-color 0.2s ease, border-radius 0.2s ease;
}

.collapsible-header:hover {
    background-color: #555;
}
.collapsible-section.collapsed .collapsible-header {
    display: flex; /* Keep flex for alignment */
    justify-content: flex-start; /* Changed from space-between  */	
    gap: 10px; /* Added spacing between icon and text */
    align-items: left;
    padding: 10px 5px; /* Default padding for expanded state */
    cursor: pointer;
    background-color: #444;
    border-radius: 6px;
    margin-bottom: 0;
    transition: background-color 0.2s ease, border-radius 0.2s ease;
}

.collapsible-header h2 {
    margin: 0;
    font-size: .9em;
    color: #f0f0f0;
}
/* Position the collapse toggle button/icon within the collapsed header */
.side-panel.collapsed .collapse-toggle-btn {
    position: static; /* Reset absolute positioning */
    transform: none; /* Remove centering transform if it was there */
    display: flex; /* Make it a flex container to center image */
    justify-content: center;
    align-items: center;
    width: 100%; /* Take full width of parent collapsed-header */
    height: 100%; /* Take full height of parent collapsed-header */
    padding: 0; /* Remove padding */
}

/* Default button for collapse toggling. Icon styling handled in img. */

.collapse-toggle-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    line-height: 0; /* Prevent extra space under image */
}
.collapse-toggle-btn img {
    width: 20px;
    height: 20px;
    filter: invert(100%);
    transition: transform 0.2s ease;
}

.side-panel.collapsed .collapse-toggle-btn img {
    display: block; /* Ensure the image is block-level */
    width: 24px; /* Make icons slightly larger for visibility */
    height: 24px;
    filter: invert(100%);
    transition: transform 0.2s ease;
}

/* Collapsible content area (always hidden when collapsed) */
.collapsible-content {
    max-height: 1000px; 
    overflow: hidden; 
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-out; 
    padding: 15px 20px; 
}

/* Ensure inner collapsible sections are collapsed when the main side panel is collapsed */
.side-panel.collapsed .collapsible-section .collapsible-content {
    max-height: 0 !important; /* Force hide content */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important; /* Force hide text/elements */
    pointer-events: none !important; /* Disable interaction */
    /* Keep transition if you want a smooth hide when main sidebar collapses */
}

/* Keep the rule below for individual collapsible sections when only THEY are collapsed */
.collapsible-section.collapsed .collapsible-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0; 
    pointer-events: none;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-out; 
}

.collapsible-section.collapsed .collapsible-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0; 
    pointer-events: none; 
}

/* Main Content Area Styling */
.main-content {
    flex-grow: 1; 
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
    position: relative;
    overflow: hidden; 
}

.app-header-content { /* Styling for the top section of main content */
    margin-bottom: 20px;
    text-align: left; /* Left-align content */
    background-color: #2b2b2b;
    padding: 15px 20px;
    border-radius: 6px;
}

.app-header-content h1 {
    font-size: 2em;
    margin-bottom: 5px; 
    text-align: left;
}

.app-header-content p {
    margin: 5px 0;
    color: #b0b0b0;
}

/* Styling for the combined Campaign/Story info line */
#campaignAndStoryDisplay {
    display: flex; /* Use flex to put elements on one line */
    align-items: baseline; /* Align text baselines */
    gap: 8px; /* Space between items (e.g., Campaign Title, bullet, Story Title) */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    margin: 0; /* Remove default div margins */
}

#campaignAndStoryDisplay h2 { /* For Campaign Title */
    font-size: 1.2em; /* Smaller than main H1, larger than H3 */
    margin: 0; /* Remove default h2 margins */
    color: #d0d0d0;
    display: inline; /* Ensure it stays in line with other elements */
}

#campaignAndStoryDisplay .bullet {
    font-size: 1.2em; /* Size of the bullet */
    color: #6a82a0; /* A subtle color for the bullet */
    display: inline;
}

#campaignAndStoryDisplay h3 { /* For Story Title */
    font-size: 1em; /* Smaller than H2 */
    margin: 0; /* Remove default h3 margins */
    color: #b0b0b0;
    display: inline; /* Ensure it stays in line with other elements */
}


/* Chat Window and Input Sizing (Dynamic Heights) */
.chat-window {
    flex-grow: 7; 
    flex-shrink: 0; 
    flex-basis: 0; 
    height: 100%; 
    overflow-y: auto; 
    margin-bottom: 10px; 
    
    border: 1px solid #555;
    border-radius: 4px;
    padding: 15px;
    background-color: #333;
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.chat-input-container {
    flex-grow: 3; 
    flex-shrink: 0;
    flex-basis: 0;
    display: flex; 
    flex-direction: column;
    justify-content: flex-end; 

    margin-top: auto; 
}
.chat-input-area {
    width: 100%;
    margin-bottom: 10px;
    min-height: 100px; 
    resize: vertical;
}

/* Main Heading (for sidebar elements that were not moved) */
h1, h2 {
    color: #d0d0d0;
    text-align: left; 
    margin-bottom: 20px;
    margin-top: 0;
}

/* General Card Styling (used by various sections) */
.card {
    background-color: #3a3a3a;
    padding-left: 5px;
    border-radius: 6px;
    margin-bottom: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}


/* Form Groups (labels, inputs, selects) */
.control-group { 
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}
.control-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #b0b0b0;
}
.control-group select, .control-group input[type="text"], .control-group input[type="number"] {
    width: 100%;
}

/* Styling for selects with a button next to them */
.select-with-button {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between select and button */
}

.select-with-button select {
    flex-grow: 1; /* Allow select to take up available space */
    width: auto; /* Override 100% width from control-group */
}

/* Small icon buttons for edit */
button.small-icon-btn {
    padding: 5px; /* Smaller padding */
    width: 30px; /* Fixed width/height for square icon button */
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: #555; /* A more neutral button color */
}

button.small-icon-btn:hover {
    background-color: #666;
}

button.small-icon-btn img {
    width: 18px; /* Size of the icon */
    height: 18px;
    filter: invert(100%); /* Make SVG white */
}

/* Specific styling for sections within edit modals */
.campaignEditModal .form-group,
.storyArcEditModal .form-group {
    margin-bottom: 15px;
}

.storyArcEditModal .ai-override-section {
    background-color: #3b4252;
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px;
    border: 1px dashed #4c566a;
}

.storyArcEditModal .ai-override-section h3 {
    margin-top: 0;
    color: #88c0d0;
    font-size: 1.1em;
}

/* Styling for new Discord sections in modals */
.campaignEditModal hr,
.storyArcEditModal hr {
    border-color: #4c566a;
    margin-top: 20px;
    margin-bottom: 20px;
}

.campaignEditModal h3,
.storyArcEditModal h3 {
    color: #88c0d0; /* Accent color */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
}

/* Buttons */
button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}
button:hover {
    background-color: #0056b3;
}
button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}
button.small-btn {
    padding: 5px 10px;
    font-size: 0.85em;
    margin-top: 5px;
}

/* Messages (success, error) */
.message {
    margin-top: 10px;
    font-size: 0.9em;
    color: #ccc;
}
.message.success {
    color: #28a745;
}
.message.error {
    color: #dc3545;
}

/* Info Cards (for guidance) */
.info-card {
    background-color: #333;
    border-left: 5px solid #ffc107;
    padding: 20px;
}
.info-card h2 {
    color: #ffc107;
    text-align: left;
    margin-bottom: 10px;
}
.info-card ol {
    margin-left: 20px;
    padding-left: 0;
}
.info-card li {
    margin-bottom: 8px;
}
.info-card code {
    background-color: #444;
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Consolas', 'Courier New', monospace;
    color: #8be9fd;
}

/* API Usage Stats Grid */
.usage-stats-container .usage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    font-size: 0.9em;
    line-height: 1.6;
}
.usage-stats-container .usage-grid .full-width {
    grid-column: span 2;
}
.usage-stats-container .usage-grid strong {
    color: #8be9fd;
}

/* Radio Button Group */
.form-group.radio-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.form-group.radio-group label {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 0;
    font-weight: normal;
}
.form-group.radio-group input[type="radio"] {
    margin-right: 5px;
    width: auto;
    margin-top: 0;
}

/* File Upload Group */
.form-group.file-upload-group {
    display: flex;
    flex-direction: column;
}
.form-group.file-upload-group input[type="file"] {
    padding: 8px;
    background-color: #444;
    border: 1px solid #555;
    border-radius: 4px;
    color: #e0e0e0;
}
.form-group.file-upload-group .file-name-display {
    display: block;
    margin-top: 5px;
    font-size: 0.85em;
    color: #b0b0b0;
}

/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    padding-top: 60px;
}

.modal-content {
    background-color: #2b2b2b;
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #555;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-button:hover,
.close-button:focus {
    color: #e0e0e0;
    text-decoration: none;
    cursor: pointer;
}

.modal-footer {
    margin-top: 20px;
    text-align: right;
}
.modal-footer button {
    margin-left: 10px;
}

/* --- CHAT BUBBLE STYLING --- */
.message-bubble {
    border-radius: 8px;
    padding: 10px 15px; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    max-width: 95%; 
    align-self: flex-start; 
    position: relative; 
}

/* AI (GM) Messages - Left aligned, specific color */
.ai-message {
    background-color: #3b4252; 
    color: #eceff4; 
    border: 1px solid #4c566a;
    margin-right: auto; 
}

/* User Messages - Right aligned, specific color */
.user-message {
    background-color: #2e3440; 
    color: #e5e9f0; 
    border: 1px solid #3b4252;
    margin-left: auto; 
}

/* Styling for the copy button */
.copy-raw-btn {
    background-color: rgba(0, 123, 255, 0.2); 
    color: #e0e0e0;
    border: 1px solid rgba(0, 123, 255, 0.5);
    padding: 3px 8px;
    font-size: 0.75em;
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    bottom: 5px; 
    right: 5px;
    opacity: 0; 
    transition: opacity 0.2s ease;
}

.message-bubble:hover .copy-raw-btn {
    opacity: 1; 
}

/* --- Processing Message (Stopwatch Effect) Styles (F-052) --- */
.message-bubble.processing-message {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out content and button */
    gap: 10px; /* Space between content and button */
    background-color: #3b4252; /* AI message background */
    border: 1px dashed #6a82a0; /* Dashed border for processing state */
    color: #eceff4;
    padding: 10px 15px;
    position: relative; /* For spinner absolute positioning */
}

.processing-message .processing-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    font-style: italic;
    color: #88c0d0; /* Soft blue for processing text */
}

.processing-message .loading-spinner {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid #88c0d0; /* Spinner color */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    margin-left: 10px;
    flex-shrink: 0; /* Prevent spinner from shrinking */
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.processing-message .cancel-job-btn {
    background-color: #bf616a; /* Reddish color for cancel */
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Prevent button from shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px; /* Consistent height */
    width: 30px; /* Consistent width */
}

.processing-message .cancel-job-btn:hover {
    background-color: #d08770; /* Lighter red on hover */
}

.processing-message .cancel-job-btn img {
    width: 16px; /* Icon size */
    height: 16px;
    filter: invert(100%); /* Make icon white */
}

/* Styles for final status messages (e.g., Canceled, Failed) */
.processing-message .processing-content.error {
    color: #bf616a; /* Red for errors */
    font-weight: bold;
}
.processing-message .processing-content.success {
    color: #a3be8c; /* Green for success (less likely here as it becomes a normal message) */
}
.processing-message .processing-content.info {
    color: #88c0d0; /* Blue for info */
}
/* --- End Processing Message Styles (F-052) --- */

/* Ensure no extra margins on elements inside message bubbles */
.message-bubble p {
    margin: 0;
    padding: 0;
}

.message-bubble h1, .message-bubble h2, .message-bubble h3 {
    margin-top: 0.8em; 
    margin-bottom: 0.4em; 
    color: #88c0d0; 
}

.message-bubble pre {
    background-color: #282c34; 
    color: #abb2bf;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto; 
    margin: 0.5em 0; 
}

/* --- Policy Page Specific Styles (NEW) --- */
.policy-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #1a1a1a; /* Dark background */
    color: #e0e0e0; /* Light text */
    line-height: 1.6;
}

.policy-header {
    background-color: #2b2b2b;
    padding: 20px 40px;
    border-bottom: 1px solid #3a3a3a;
    text-align: center;
}

.policy-header h1 {
    margin: 0;
    color: #88c0d0; /* Accent color for policy titles */
    font-size: 2.5em;
}

.policy-content {
    flex-grow: 1; /* Allows content to take up available space */
    padding: 20px 40px;
    max-width: 900px; /* Max width for readability */
    margin: 20px auto; /* Center content */
    background-color: #2b2b2b;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.policy-content h1, .policy-content h2, .policy-content h3, .policy-content h4, .policy-content h5, .policy-content h6 {
    color: #8be9fd; /* Accent color for headings */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.policy-content p {
    margin-bottom: 1em;
}

.policy-content ul, .policy-content ol {
    margin-bottom: 1em;
    padding-left: 25px;
}

.policy-content li {
    margin-bottom: 0.5em;
}

.policy-content strong {
    color: #eceff4; /* Lighter strong text */
}

.policy-content a {
    color: #88c0d0; /* Link color */
    text-decoration: underline;
}

.policy-content code {
    background-color: #3b4252;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Consolas', 'Courier New', monospace;
    color: #a3be8c;
}

.policy-content pre {
    background-color: #3b4252;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Consolas', 'Courier New', monospace;
    color: #eceff4;
    margin-bottom: 1em;
}

.policy-footer {
    background-color: #2b2b2b;
    padding: 15px 40px;
    border-top: 1px solid #3a3a3a;
    text-align: center;
    font-size: 0.9em;
    color: #b0b0b0;
    margin-top: 20px;
}

.policy-footer a {
    color: #88c0d0;
    text-decoration: none;
}

.policy-footer a:hover {
    text-decoration: underline;
}

/* --- General Link Styling (Applies to all pages) --- */
a {
    color: #007bff; /* Standard link color */
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #0056b3; /* Darker on hover */
    text-decoration: underline;
}

/* Specific to app-footer (index.html) */
.app-footer {
    padding: 15px 20px;
    background-color: #2b2b2b;
    border-top: 1px solid #3a3a3a;
    text-align: center;
    font-size: 0.9em;
    color: #b0b0b0;
    margin-top: auto; /* Push footer to bottom */
}

.app-footer a {
    color: #88c0d0; /* Match policy footer link color */
}

.app-footer p {
    margin: 0;
}

/* Style for blockquotes in Markdown (e.g., in policy pages) */
.policy-content blockquote {
    border-left: 4px solid #4c566a;
    padding-left: 15px;
    margin-left: 0;
    color: #b0b0b0;
    font-style: italic;
}