/**
 * Industr AI Agent - Masonry Interface v2 Styles
 * Built from scratch with Isotope framework integration
 * Responsive mobile-first design with professional B2B styling
 */

/* =========================
   COLOR CONFIGURATION
   ========================= */
:root {
    /* raw RGB tuples */
    /* --color-article-rgb: 247 246 188; */
    --color-article-rgb: 228 227 99;
    --color-llm-company-rgb: 228 226 212;
    --color-mysql-company-rgb: 65 97 132;
    --color-ai-response-rgb: 228 227 99;
    --color-product-rgb: 233 78 15;

    --bg-opacity: 0.3;

    /* final solid colors */
    --color-article: rgb(var(--color-article-rgb));
    --color-llm-company: rgb(var(--color-llm-company-rgb));
    --color-mysql-company: rgb(var(--color-mysql-company-rgb));
    --color-ai-response: rgb(var(--color-ai-response-rgb));
    --color-product: rgb(var(--color-product-rgb));

    /* backgrounds */
    --bg-article: rgb(var(--color-article-rgb) / var(--bg-opacity));
    --bg-llm-company: rgb(var(--color-llm-company-rgb) / var(--bg-opacity));
    --bg-mysql-company: rgb(var(--color-mysql-company-rgb) / var(--bg-opacity));
    --bg-ai-response: rgb(var(--color-ai-response-rgb) / var(--bg-opacity));
    --bg-product: rgb(var(--color-product-rgb) / var(--bg-opacity));

    /* common UI colors */
    --color-primary: #416184;
    --color-primary-hover: #0056b3;
    --color-text-primary: #1a2b3c;
    --color-text-secondary: #495057;
    --color-text-muted: #6c757d;
    --color-background: #f8f9fa;
    --color-white: #ffffff;
    --color-border: #e9ecef;
    --color-border-hover: #dee2e6;
    --color-success: #28a745;
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-warning-bg: #fff3cd;
    --color-warning-text: #856404;
    --color-danger-bg: #f8d7da;
    --color-danger-text: #721c24;
}

/* =========================
   RESET AND GLOBALS  
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* =========================
   LAYOUT CONTAINER
   ========================= */
.container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 20px;
    min-height: 1200px; /* Force scrollbar to prevent layout shifts */
}

.container::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("neurons-7420670_1920.jpg") no-repeat center/cover;
  opacity: 0.15;
  z-index: -1;
}

/* =========================
   HEADER LAYOUT
   ========================= */


.masonry-subtitle {
    color: var(--color-text-muted);
    font-size: 13px;
    margin: 1rem 0 2.2rem 0;
}


.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}


.stat-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.stat-count {
    font-weight: 600;
    color: var(--color-primary);
}

/* Example prompts styling */
.example-prompts {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.examples-label {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-right: 4px;
}

.example-prompt {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.example-prompt:hover {
    background: var(--color-border);
    color: var(--color-primary);
    transform: translateY(-1px);
}


/* Filter buttons styling */

.filter-headline {
    font-size: 10px;
    line-height: 12px;
}

.filter-buttons {
    /* display: flex; */
    /* gap: 4px;
    flex-wrap: wrap;
    margin-right: 20px; */
    margin-bottom: 20px;
}

.filter-button {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-button:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

.filter-button.active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary-hover);
}

.sort-button {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sort-button:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

.sort-text {
    font-weight: 500;
}

/* =========================
   MASONRY CONTAINER & EMPTY STATE
   ========================= */
.masonry-container {
    position: relative;
    min-height: 400px;
}

.masonry-grid {
    width: 100%;
    position: relative;
}

.masonry-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
}

/* =========================
   CONVERSATION DIALOG STYLES
   ========================= */

.conversation-dialog {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    color: var(--color-text-primary);
    padding-top: 16px;
}

.conversation-history {
    opacity: 0.8;
    margin-bottom: 1rem;
}

.current-conversation {
    /* Current conversation is fully opaque */
}

.message {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    border-left: 4px solid transparent;
}

.message.user-message {
    background: linear-gradient(135deg, #93c2e4 0%, var(--color-background) 100%);
    margin-left: 0;
    margin-right: 2rem;
    border-left: none;
}

.message.ai-message {
    margin-right: 0;
}

.message-content {
    font-size: 0.9rem;
    line-height: 1.6;
    word-wrap: break-word;
}

.ai-response-only {
    /* Fallback styling for when there's no conversation history */
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =========================
   ISOTOPE MASONRY ITEMS
   ========================= */
.grid-item {
    width: calc(25% - 15px);
    margin-bottom: 15px;
    opacity: 0;
    position: relative;
    background-color: #ffffff;
    border-radius: 8px;
}

.grid-item.visible {
    opacity: 0.85;
    transform: translateY(0);
    -webkit-box-shadow: 0px 10px 13px -7px #0000008a, 5px 5px 15px 5px rgba(0,0,0,0); 
    box-shadow: 0px 10px 13px -7px #0000008a, 5px 5px 15px 5px rgba(0,0,0,0);
}

/* Double width for KI-Antwort */
.grid-item.double-width {
    width: calc(50% - 10px);
}

/* Card styling - more compact */
.card {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    border-left: 4px solid var(--color-article);
    background-color: var(--bg-article);
    height: fit-content;
}

.card:hover:not(.masonry_header):not(.ai_response) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Card types with different border and background colors */
.card.article {
    border-left-color: var(--color-article);
    background-color: var(--bg-article);
}

.card.mysql_company {
    border-left-color: var(--color-mysql-company);
    background-color: var(--bg-mysql-company);
}

.card.llm_company {
    border-left-color: var(--color-llm-company);
    background-color: var(--bg-llm-company);
}

.card.product {
    border-left-color: var(--color-product);
    background-color: var(--bg-product);
}

.card.ai_response {
    border-left-color: var(--color-ai-response);
    background-color: var(--color-white);
    height: 550px;
    display: flex;
    flex-direction: column;
    padding: 10px 16px 16px;
}

.card.ai_response .card-content {
    flex: 1;
    overflow-y: auto;
    /* padding-right: 20px; More space for scrollbar */
    box-sizing: border-box;
    margin: 0;
}


/* Card header - type labels and basket icons */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.card-type-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.basket-icon {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    /* padding: 4px; */
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.basket-icon:hover {
    background-color: var(--color-background);
}

.basket-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Card content - more compact */
.card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.card-content {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Card meta (footer) - more compact */
.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: auto;
}

.card-link {
    color: var(--color-primary);
    font-weight: 500;
    pointer-events: none; /* Prevent clicking on the text itself */
}

/* KI-Antwort placeholder styling */
.card.ai_response.placeholder .card-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    color: var(--color-text-muted);
    position: relative;
}


/* AI Response content styling with markdown support */
.ai_response .card-content {
    font-size: 14px;
    line-height: 1.5;
}

.ai_response .card-content h1,
.ai_response .card-content h2,
.ai_response .card-content h3 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.ai_response .card-content h1:first-child,
.ai_response .card-content h2:first-child,
.ai_response .card-content h3:first-child {
    margin-top: 0;
}

.ai_response .card-content h1 { font-size: 18px; }
.ai_response .card-content h2 { font-size: 16px; }
.ai_response .card-content h3 { font-size: 14px; }

.ai_response .card-content p {
    margin-bottom: 12px;
}

.ai_response .card-content ul,
.ai_response .card-content ol {
    margin-bottom: 12px;
    padding-left: 20px;
}

.ai_response .card-content li {
    margin-bottom: 4px;
}

.ai_response .card-content code {
    background-color: var(--color-background);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.ai_response .card-content pre {
    background-color: var(--color-background);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 12px;
}

.ai_response .card-content pre code {
    background-color: transparent;
    padding: 0;
}

.ai_response .card-content blockquote {
    border-left: 4px solid var(--color-border);
    padding-left: 12px;
    margin-bottom: 12px;
    color: var(--color-text-muted);
    font-style: italic;
}

.ai_response .card-content strong {
    font-weight: 600;
}

.ai_response .card-content em {
    font-style: italic;
}

/* Masonry header card styling */
.card.masonry_header {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-ai-response);
    background-color: var(--color-white);
}

.card.masonry_header .header-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
    align-items: start;
}

.card.masonry_header .header-container {
    display: flex;
    flex-direction: column;
    /* gap: 12px; */
    min-width: 320px;
    /* margin-top: 35px; */
}


.card.masonry_header .header-line {
    width: 100%;
    display: flex;
    align-items: center;
}

.card.masonry_header .header-title-line {
    justify-content: flex-start;
}

.card.masonry_header .header-title-line .header-logo {
    height: 35px;
}

.card.masonry_header .header-subtitle-line {
    justify-content: flex-start;
}


/* AI welcome message styling */
.ai-welcome-message {
    text-align: center;
    padding: 40px 20px;
}

.ai-welcome-message h3 {
    color: var(--color-text-primary);
    margin-bottom: 12px;
    font-size: 18px;
}

.ai-welcome-message p {
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* AI input section at bottom of AI response */
.ai-input-section {
    margin-top: 20px;
    padding: 16px;
    border-radius: 6px;
    background-color: rgb(228 226 212 / 25%);
    border: 1px solid rgba(233, 236, 239, 0.51);
}

.ai-input-section .input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-input-section .example-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
}

/* Stamp positioning for Isotope */
.grid-item.stamp {
    position: absolute !important;
    z-index: 1;
}

.grid-item.stamp.masonry_header {
    top: 0 !important;
    left: 0 !important;
}

.grid-item.stamp.ai_response {
    top: 0 !important;
    left: calc(50% + 10px) !important;
    opacity: 0.8;
}

.grid-item.stamp.control-menu {
    top: 0 !important;
    left: calc(25% + 5px) !important;
    opacity: 1;
}

/* =========================
   CONNECTION STATUS & INPUT
   ========================= */

.connection-status {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
    text-align: center;
}

.connection-status.status-connected {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.connection-status.status-connecting {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.connection-status.status-disconnected {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

/* Token counter styling */
.token-counter {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    position: relative;
    cursor: help;
}

.token-counter.moderate-usage {
    background: rgba(255, 193, 7, 0.2);
    color: #856404;
}

.token-counter.high-usage {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.token-counter.critical-usage {
    background: #dc3545;
    color: white;
    animation: token-pulse 2s infinite;
}

.token-icon {
    font-size: 12px;
}

.token-count {
    font-weight: 600;
    min-width: 40px;
    text-align: end;
}

.token-label {
    font-size: 10px;
}

@keyframes token-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.token-counter.updating {
    animation: token-pulse 0.3s ease;
}

/* Token tooltip */
.token-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Bridge the gap between badge and tooltip */
.token-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 0;
    left: 0;
    height: 8px;
    background: transparent;
}

.token-counter:hover .token-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.token-counter:hover .token-tooltip::before {
    pointer-events: auto;
}

.tooltip-header {
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-border);
}

.tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    font-size: 11px;
}

.tooltip-label {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tooltip-value {
    color: var(--color-text-primary);
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.tooltip-divider {
    height: 1px;
    background: var(--color-border);
    margin: 6px 0;
}

.tooltip-total {
    font-weight: 600;
}

.tooltip-total .tooltip-label {
    color: var(--color-text-primary);
}

.tooltip-total .tooltip-value {
    color: var(--color-primary);
    font-size: 12px;
}

.reset-tokens-btn {
    margin-top: 8px;
    width: 100%;
    padding: 6px 8px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 10px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.reset-tokens-btn:hover {
    background: var(--color-border);
    color: var(--color-text-secondary);
    border-color: var(--color-border-hover);
}

.reset-tokens-btn:active {
    transform: scale(0.95);
}

/* AI Response Loader Animation */
.ai-loader {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
}

.ai-loader.active {
    display: flex;
}

.loader-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

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


/* Email Notification Overlay */
.email-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.email-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.email-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.email-modal {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 480px;
    animation: slideUp 0.3s ease;
}

.email-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border);
}

.email-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
}

.email-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.email-modal-close:hover {
    background: var(--color-hover);
    color: var(--color-text);
}

.email-modal-body {
    padding: 24px;
}

.email-modal-body p {
    margin: 0 0 20px 0;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}

.email-input-group {
    margin-bottom: 16px;
}

.email-input-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

.email-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    background: white;
    transition: border-color 0.2s ease;
}

.email-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.email-input.error {
    border-color: #dc3545;
}

.email-error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #dc3545;
    min-height: 16px;
}

.email-info {
    background: var(--color-hover);
    padding: 12px;
    border-radius: 6px;
    margin-top: 16px;
}

.email-info small {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.email-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--color-border);
}

.email-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.email-btn-secondary {
    background: var(--color-hover);
    color: var(--color-text);
}

.email-btn-secondary:hover {
    background: var(--color-border);
}

.email-btn-primary {
    background: var(--color-primary);
    color: white;
}

.email-btn-primary:hover {
    background: var(--color-primary-hover);
}

.email-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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


/* Draggable Articles */
.grid-item.article.draggable {
    cursor: grab;
    /* transition: transform 0.2s ease, opacity 0.2s ease; */
}

.grid-item.article.draggable:hover {
    transform: translateY(-2px);
}

.grid-item.article.dragging {
    opacity: 0.3;
    cursor: grabbing;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.grid-item.article.drag-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Drag proxy styles */
.drag-proxy {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 8px !important;
    max-width: 280px !important;
}

.drag-proxy .card {
    background: var(--color-white) !important;
}

.drag-proxy::after {
    content: '📚 Drop on research basket';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10001;
}

/* Article Card Actions */
.card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}


/* Version and Copyright */
.version-info {
    position: fixed;
    bottom: 12px;
    right: 12px;
    font-size: 10px;
    color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
    opacity: 0.6;
    background: var(--color-background);
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    z-index: 1000;
    pointer-events: none;
    user-select: none;
}

.input-group {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

#chat-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 36px;
    max-height: 80px;
}

#chat-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
}

#send-button {
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

#send-button:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

#send-button:disabled {
    background-color: var(--color-text-muted);
    cursor: not-allowed;
}

#new-chat-button {
    background-color: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    font-size: 13px;
    white-space: nowrap;
}

#new-chat-button:hover {
    background-color: var(--color-background-hover);
    border-color: var(--color-border-hover);
}

.send-icon {
    font-size: 14px;
}

/* =========================
   CONTROL MENU BAR
   ========================= */

.grid-item.control-menu {
    z-index: 2000;
}

.card.control-menu {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-height: 50px;
    overflow: visible;
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 2000;
}

.card.control-menu.drag-over {
    border-color: #28a745;
    border-width: 4px;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
    overflow: hidden;
}

/* Connection Status Line (5px width indicator) */
.connection-status-line {
    width: 15px;
    height: 50px;
    position: relative;
    cursor: pointer;
}

.status-indicator {
    width: 100%;
    height: 100%;
    background-color: #ffc107; /* Default: connecting (yellow) */
    border-radius: 4px 0 0 4px;
    transition: background-color 0.3s ease;
}

.status-indicator.connected {
    background-color: var(--color-success);
}

.status-indicator.disconnected {
    background-color: #dc3545;
}

.connection-tooltip {
    display: none;
    position: absolute;
    top: 55px;
    left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 200px;
    font-size: 12px;
}

.connection-status-line:hover .connection-tooltip {
    display: block;
}

/* Menu Bar Content */
.menu-bar-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    height: 50px;
}

.menu-button {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
}

.menu-button:last-child {
    border-right: none;
}

.menu-button:hover {
    background: var(--color-background);
    color: var(--color-primary);
}

.menu-button.active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Special styling for basket drop zone */
.menu-button.basket-drop-zone {
    position: relative;
}

.menu-button.basket-drop-zone.has-items {
    background: #28a745;
    border-radius: 0 8px 8px 0;
    color: white;
}

.menu-button.basket-drop-zone.drag-over {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success);
}

/* Menu Layers */
.menu-layers {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2000;
}

.menu-layer {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 300px;
    overflow: hidden;
    z-index: 2001;
    position: relative;
}

.layer-header {
    padding: 10px 15px;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.layer-header-title {
    margin-bottom: 8px;
}

.layer-header .masonry-stats {
    margin: 0;
    padding: 0;
    font-size: 11px;
    gap: 12px;
}

.layer-header .masonry-stats .stat-item {
    margin: 0;
}

.layer-header .masonry-stats .stat-label {
    font-size: 11px;
}

.layer-header .masonry-stats .stat-count {
    font-size: 11px;
}

.layer-content {
    padding: 12px 15px;
    max-height: 250px;
    overflow-y: auto;
}

.layer-content.scrollable {
    overflow-y: auto;
}

/* Layer styling matching existing tooltips */
.layer-content .tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
}

/* Token summary styling in layers */
.token-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 12px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.token-summary-item:last-of-type {
    border-bottom: none;
}

.token-summary-label {
    font-weight: 500;
    color: var(--color-text-primary);
}

.token-summary-value {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.token-summary-divider {
    height: 1px;
    background: var(--color-border);
    margin: 8px 0;
    opacity: 0.5;
}

.token-summary-total {
    font-weight: 600;
    padding: 12px 0 8px 0;
    border-top: 2px solid var(--color-border);
    border-bottom: none;
}

.token-summary-total .token-summary-label {
    font-size: 13px;
    font-weight: 700;
}

.token-summary-total .token-summary-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
}

.token-layer-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.token-details-button {
    flex: 1;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    background: var(--color-primary);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.token-details-button:hover {
    background: transparent;
    color: var(--color-primary);
}

.token-layer-actions .reset-tokens-btn {
    flex: 1;
    margin-top: 0;
}

.layer-content .tooltip-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.layer-content .tooltip-value {
    color: var(--color-text-primary);
    font-weight: 600;
}

.layer-content .tooltip-divider {
    border-top: 1px solid var(--color-border);
    margin: 8px 0;
}

.layer-content .tooltip-total {
    border-top: 1px solid var(--color-border);
    padding-top: 6px;
    margin-top: 6px;
    font-weight: 600;
}

/* Filter buttons in layer */
.layer-content .filter-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.layer-content .filter-headline {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    margin-top: 0;
}

/* Basket content in layer */
.basket-content-menu {
    margin: 8px 0;
    min-height: 60px;
    border: 2px dashed var(--color-border);
    border-radius: 6px;
    padding: 10px;
}

.basket-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 11px;
    padding: 20px 0;
}

.basket-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.basket-actions {
    margin-top: 10px;
}

.generate-website-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.generate-website-btn:disabled {
    background: var(--color-text-muted);
    cursor: not-allowed;
}

#generate-website-btn-menu:disabled {
    background: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.generate-website-btn:not(:disabled):hover {
    background: var(--color-primary-hover);
}

/* Agent Status Content */
#agent-status-content .status-text {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    white-space: pre-wrap;
    padding-bottom: 15px;
}

#agent-status-content .status-text div {
    margin-bottom: 4px;
    padding: 4px 0;
}

#agent-status-content .status-text div:last-child {
    margin-bottom: 0;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
    margin-top: 8px;
}

/* Status message styling for new format */
#agent-status-content .status-message {
    font-size: 11px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 4px;
    padding: 4px 0;
}

/* Stats line in header (no reserved space when hidden) */
.header-container .masonry-stats {
    margin: 8px 0;
    display: flex;
    gap: 16px;
    font-size: 9px;
    flex-wrap: wrap;
}

.header-container .masonry-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-container .masonry-stats .stat-label {
    font-weight: 600;
    color: var(--color-text-muted);
}

.header-container .masonry-stats .stat-count {
    font-weight: 600;
    color: var(--color-primary);
}


/* Basket mini items in layers */
.basket-item-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 10px;
}

.basket-item-mini .item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
}

.basket-item-mini .remove-item-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 0 4px;
    margin-left: 8px;
    transition: color 0.2s ease;
}

.basket-item-mini .remove-item-btn:hover {
    color: #dc3545;
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */

/* Large Desktop - 5 columns */
@media (min-width: 1600px) {
    .grid-item {
        width: calc(20% - 10px);
    }
    
    .grid-item.double-width {
        width: calc(40% - 5px);
    }
}

/* Medium Desktop - 3 columns */
@media (max-width: 1200px) {
    .grid-item {
        width: calc(33.333% - 10px);
    }
    
    .grid-item.double-width {
        width: calc(66.666% - 5px);
    }
    
    /* Stamp positioning for 3 columns */
    .grid-item.stamp.ai_response {
        left: calc(33.333% + 5px) !important;
    }
}

/* Tablet - 2 columns */
@media (max-width: 900px) {
    .grid-item {
        width: calc(50% - 8px);
    }
    
    .grid-item.double-width {
        width: calc(100% - 0px);
    }
    
    /* Stamp positioning for 2 columns - stack vertically */
    .grid-item.stamp.ai_response {
        left: 0 !important;
        top: auto !important;
    }
    
    .card.masonry_header .header-wrapper {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .card.masonry_header .header-container {
        gap: 8px;
    }
    
    
    .card.masonry_header .header-title-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
    
    /* Apply controlled width variation on tablet */
    .grid-item[style*="width"]:not(.double-width) {
        width: calc((50% - 8px) * var(--width-variation, 1)) !important;
    }
    
}

/* Small Tablet/Large Mobile */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    
    
    .masonry-stats {
        gap: 12px;
        flex-wrap: wrap;
    }
    
    /* Single column on mobile */
    .grid-item {
        width: 100%;
        margin-bottom: 12px;
    }
    
    .grid-item.double-width {
        width: 100%;
    }
    
    /* Override random width variations on mobile to prevent horizontal scroll */
    .grid-item[style*="width"] {
        width: 100% !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .masonry-stats {
        gap: 8px;
    }
    
    .card {
        padding: 12px;
    }
    
    #chat-input {
        font-size: 12px;
        min-height: 32px;
    }
    
    #send-button {
        padding: 8px 12px;
        min-height: 32px;
    }
    
    /* Responsive conversation layout for small screens */
    .message.user-message {
        margin-right: 1rem;
    }
    
    .message.ai-message {
        margin-left: 1rem;
    }
    
    .message {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

/* =========================
   LLM CONFIGURATION MODAL
   ========================= */

/* LLM Configuration Icon */
.llm-config-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    transition: all 0.2s ease;
    margin-right: 8px;
    position: relative;
}

.llm-config-icon:hover {
    background: var(--color-background);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.llm-config-icon:hover .llm-config-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* LLM Configuration Tooltip */
.llm-config-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 12px;
    min-width: 280px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    font-size: 12px;
    line-height: 1.4;
}

.llm-config-tooltip .tooltip-header {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    font-size: 12px;
}

.llm-config-tooltip .tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.llm-config-tooltip .tooltip-label {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.llm-config-tooltip .tooltip-value {
    color: var(--color-text-primary);
    font-weight: 400;
    text-align: right;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.llm-config-tooltip .tooltip-value.custom {
    color: var(--color-primary);
    font-weight: 500;
}

.llm-config-tooltip .tooltip-divider {
    height: 1px;
    background: var(--color-border);
    margin: 8px -12px;
}

.llm-config-tooltip .tooltip-footer {
    text-align: center;
    margin-top: 8px;
}

.llm-config-tooltip .tooltip-footer small {
    color: var(--color-text-muted);
    font-style: italic;
}

/* LLM Modal Overlay */
.llm-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

.llm-modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LLM Modal Content */
.llm-modal-content {
    background: var(--color-white);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: llm-modal-slide-in 0.3s ease-out;
}

@keyframes llm-modal-slide-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* LLM Modal Header */
.llm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
    border-bottom: none;
}

.llm-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.llm-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.llm-modal-close:hover {
    color: var(--color-text-primary);
}

/* LLM Modal Body */
.llm-modal-body {
    padding: 24px;
}

.llm-modal-body p {
    margin: 0 0 20px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* LLM Configuration Grid */
.llm-config-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;
}

.llm-config-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.llm-config-item label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}

.llm-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
}

.llm-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(65, 97, 132, 0.1);
}

.llm-select:hover {
    border-color: var(--color-border-hover);
}

/* LLM Info */
.llm-info {
    background: var(--color-background);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.llm-info small {
    color: var(--color-text-muted);
    font-size: 12px;
    display: block;
    line-height: 1.4;
}

/* LLM Modal Footer */
.llm-modal-footer {
    padding: 0 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

/* LLM Buttons */
.llm-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
}

.llm-btn-primary {
    background: var(--color-primary);
    color: white;
}

.llm-btn-primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.llm-btn-secondary {
    background: var(--color-background);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.llm-btn-secondary:hover {
    background: var(--color-white);
    border-color: var(--color-border-hover);
}

.llm-btn-reset {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid #ffc107;
}

.llm-btn-reset:hover {
    background: #fff3cd;
    transform: translateY(-1px);
}

/* Mobile Responsiveness for LLM Modal */
@media (max-width: 768px) {
    .llm-modal-overlay {
        padding: 10px;
    }
    
    .llm-modal-content {
        max-height: 90vh;
    }
    
    .llm-modal-header,
    .llm-modal-body,
    .llm-modal-footer {
        padding: 16px;
    }
    
    .llm-modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }
    
    .llm-btn {
        width: 100%;
        justify-content: center;
    }
    
    .llm-config-grid {
        gap: 16px;
    }
}

/* =========================
   COST DISPLAY ENHANCEMENTS
   ========================= */

.cost-amount {
    font-weight: 700;
    color: #28a745;
}

.session-id {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    background: #f8f9fa;
    padding: 2px 4px;
    border-radius: 3px;
}

.tooltip-actions {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 8px;
}

.view-journey-btn, .reset-tokens-btn {
    padding: 6px 12px;
    font-size: 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-journey-btn:hover, .reset-tokens-btn:hover {
    background: #f8f9fa;
    border-color: var(--color-primary);
}

.export-buttons {
    margin-top: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.export-label {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-right: 4px;
}

.export-btn {
    padding: 4px 8px;
    font-size: 9px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-weight: 500;
}

.export-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* =========================
   JOURNEY MODAL
   ========================= */

.journey-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.journey-modal {
    background: white;
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.journey-modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.journey-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.journey-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    line-height: 1;
    transition: color 0.2s ease;
}

.journey-modal-close:hover {
    color: var(--color-text-primary);
}

.journey-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.journey-summary {
    margin-bottom: 30px;
}

.journey-summary h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

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

.summary-value {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 14px;
}

.summary-value.cost-value {
    color: #28a745;
    font-weight: 700;
}

.journey-breakdown {
    margin-bottom: 30px;
}

.journey-breakdown h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

.breakdown-label {
    font-weight: 500;
    color: var(--color-text-primary);
    text-transform: capitalize;
}

.breakdown-value {
    font-weight: 600;
    color: #28a745;
}

.journey-log h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.journey-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.journey-call {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid var(--color-primary);
}

.call-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.call-time {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: 'Courier New', monospace;
}

.call-provider {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(0, 123, 255, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: capitalize;
}

.call-cost {
    font-size: 12px;
    font-weight: 700;
    color: #28a745;
}

.call-details {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-muted);
}

.call-model {
    font-family: 'Courier New', monospace;
    background: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #e9ecef;
}

.call-type {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: capitalize;
}

.call-tokens {
    font-weight: 500;
}

.journey-truncated {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 8px;
    background: #fff;
    border-radius: 6px;
    border: 1px dashed var(--color-border);
}

.journey-modal-footer {
    padding: 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.export-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.export-modal-btn {
    padding: 8px 16px;
    font-size: 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-weight: 500;
}

.export-modal-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.journey-modal-close-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-primary);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.journey-modal-close-btn:hover {
    background: transparent;
    color: var(--color-primary);
}

/* Error notification */
.error-notification {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .journey-modal {
        max-width: 95%;
        max-height: 95vh;
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .journey-modal-footer {
        flex-direction: column;
        gap: 16px;
    }
    
    .export-section {
        order: 1;
    }
    
    .call-details {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* =========================
   PASSWORD PROTECTION MODAL
   ========================= */
.password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.password-dialog {
    position: relative;
    z-index: 1;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 40px;
    max-width: 400px;
    width: 90%;
    animation: passwordModalSlideIn 0.3s ease-out;
}

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

.password-content {
    text-align: center;
}

.password-logo {
    margin-bottom: 24px;
}

.password-logo img {
    height: 42px;
    width: auto;
}

.password-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

.password-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 32px 0;
}

.password-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.password-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease;
    background: white;
    color: var(--color-text-primary);
}

.password-input:focus {
    border-color: var(--color-primary);
}

.password-input::placeholder {
    color: var(--color-text-muted);
}

.password-submit {
    width: 100%;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.password-submit:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(65, 97, 132, 0.2);
}

.password-submit:active {
    transform: translateY(0);
}

.password-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.password-error {
    margin-top: 16px;
    padding: 12px;
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-radius: 8px;
    font-size: 14px;
    animation: shake 0.3s ease-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .password-dialog {
        padding: 32px 24px;
        max-width: 340px;
    }
    
    .password-logo img {
        height: 50px;
    }
    
    .password-title {
        font-size: 20px;
    }
    
    .password-subtitle {
        font-size: 13px;
    }
}