/* ================================================
   ENHANCED FORMATTED VIEW STYLES
   ================================================ */

/* List styles */
.formatted-list {
    margin: 8px 0;
    padding-left: 24px;
}

    .formatted-list ul,
    .formatted-list ol {
        margin: 4px 0;
        padding-left: 24px;
    }

    .formatted-list li {
        margin: 4px 0;
        line-height: 1.5;
    }

/* Bullet list styles */
ul.formatted-list {
    list-style-type: disc;
}

    ul.formatted-list[data-list-level="1"] {
        list-style-type: circle;
    }

    ul.formatted-list[data-list-level="2"] {
        list-style-type: square;
    }

/* Numbered list styles */
ol.formatted-list {
    list-style-type: decimal;
}

    ol.formatted-list[data-list-level="1"] {
        list-style-type: lower-alpha;
    }

    ol.formatted-list[data-list-level="2"] {
        list-style-type: lower-roman;
    }

/* Alignment classes (if needed for additional styling) */
.align-left {
    text-align: left;
}

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

.align-right {
    text-align: right;
}

.align-justify {
    text-align: justify;
}

/* Paragraph with shading */
.formatted-paragraph[style*="background-color"] {
    border-radius: 4px;
    margin: 4px 0;
}

/* Enhanced formatted view container */
.enhanced-formatted {
    line-height: 1.6;
}

    .enhanced-formatted .formatted-paragraph {
        margin: 8px 0;
    }

    .enhanced-formatted .formatted-list-item {
        list-style-position: outside;
    }

/* Indented paragraphs */
.formatted-paragraph[style*="margin-left"],
.formatted-paragraph[style*="text-indent"] {
    transition: margin 0.2s ease;
}

/* Spacing variations */
.formatted-paragraph[style*="margin-top"],
.formatted-paragraph[style*="margin-bottom"] {
    transition: margin 0.2s ease;
}

/* Table in enhanced view */
.enhanced-formatted .result-table {
    margin: 16px 0;
}

/* Style for list items in tables */
.result-table .formatted-list {
    margin: 4px 0;
    padding-left: 20px;
}

    .result-table .formatted-list li {
        margin: 2px 0;
        font-size: inherit;
    }

/* Nested lists */
.formatted-list .formatted-list {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* List with custom indentation */
.formatted-list-item[style*="margin-left"] {
    list-style-position: outside;
}

/* Heading styles in enhanced view */
.enhanced-formatted .style-heading1,
.enhanced-formatted .style-heading2,
.enhanced-formatted .style-heading3 {
    margin-top: 16px;
    margin-bottom: 8px;
}

.enhanced-formatted .style-quote,
.enhanced-formatted .style-intense-quote {
    border-left: 4px solid var(--border-color);
    padding-left: 16px;
    margin: 12px 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .formatted-list {
        padding-left: 20px;
    }

        .formatted-list .formatted-list {
            padding-left: 16px;
        }
}



.detail-text-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px; /* Reduced from default */
    margin-top: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    max-height: 400px;
    overflow-y: auto;
}



.detail-section {
    margin-bottom: 16px;
}

    .detail-section h4 {
        margin: 0 0 8px 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
    }


/* ============================================
   HISTORY VIEW STYLES
   ============================================ */

.history-search-bar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

    .search-input-wrapper input {
        width: 100%;
        padding-right: 32px;
    }

.search-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    font-size: 14px;
}

    .search-clear-btn:hover {
        color: var(--text-primary);
    }

#history-sort {
    min-width: 140px;
}

/* Quick Filters */
.history-quick-filters {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.filter-chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--text-secondary);
    border-radius: 16px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.2s;
}

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

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

/* Entries List */
.history-entries-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* Entry Card */
.history-entry-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: all 0.2s;
}

    .history-entry-card:hover {
        border-color: var(--primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

.history-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-xs);
}

.history-entry-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    flex: 1;
}

.btn-icon.starred {
    color: var(--warning);
}

.history-entry-meta {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.history-entry-dot {
    opacity: 0.5;
}

.history-entry-preview {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    margin-bottom: var(--space-sm);
    font-style: italic;
}

.history-entry-tags {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.history-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--secondary-bg);
    color: var(--primary);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

    .history-tag.editable {
        padding-right: 6px;
    }

    .history-tag button {
        margin-left: 4px;
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0;
        font-size: 10px;
    }

.history-entry-actions {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

/* Footer */
.history-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    margin-top: var(--space-md);
}

.history-stats {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.history-actions {
    display: flex;
    gap: var(--space-xs);
}

/* Detail View */
.history-detail-container {
    padding: var(--space-md);
}

.history-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.history-detail-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.history-detail-meta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.meta-item {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

    .meta-item:last-child {
        margin-bottom: 0;
    }

.meta-label {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 140px;
}

.meta-value {
    color: var(--text-primary);
}

/* History Detail Tabs */
.history-detail-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 0; /* Remove gap between tabs and content */
}

.history-tab {
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    bottom: -2px; /* Align with border-bottom of parent */
}

    .history-tab:hover {
        color: var(--text-primary);
        background: var(--surface-hover);
    }

    .history-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        background: var(--surface);
    }

.history-detail-content {
    padding: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none; /* Connect to tabs */
    border-radius: 0 0 var(--radius) var(--radius);
}

.history-tab-content {
    display: none;
}

    .history-tab-content.active {
        display: block;
    }

.history-tab-btn {
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all 0.2s;
}

    .history-tab-btn:hover {
        color: var(--text-primary);
    }

    .history-tab-btn.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }

.history-tab-content {
    padding: 12px 0; /* Reduced padding */
}

    .history-tab-content.active {
        display: block;
    }

.history-content-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
}

/* Actions */
.history-detail-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
}

/* Metadata Editor */
.history-detail-metadata {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.metadata-section {
    margin-bottom: var(--space-md);
}

    .metadata-section label {
        display: block;
        font-weight: 600;
        margin-bottom: var(--space-xs);
        color: var(--text-primary);
    }

.tags-editor {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: center;
}

.tag-input {
    flex: 1;
    min-width: 120px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: var(--font-size-sm);
}

.notes-editor {
    width: 100%;
    min-height: 80px;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    resize: vertical;
}

/* Danger Zone */
.history-detail-danger-zone {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}




/* Formatted paragraph styles */
.formatted-paragraph {
    margin: 0.5em 0;
    line-height: 1.5;
}

/* Title style */
.style-title {
    font-size: 28pt;
    font-weight: bold;
    margin: 0.5em 0;
    text-align: center;
    color: var(--text-primary);
}

/* Subtitle style */
.style-subtitle {
    font-size: 18pt;
    font-weight: 500;
    margin: 0.3em 0;
    text-align: center;
    color: var(--text-secondary);
}

/* Heading styles */
.style-heading1 {
    font-size: 20pt;
    font-weight: bold;
    color: #2E75B5;
    margin: 0.8em 0 0.4em 0;
    border-bottom: 1px solid #2E75B5;
    padding-bottom: 0.2em;
}

.style-heading2 {
    font-size: 16pt;
    font-weight: bold;
    color: #2E75B5;
    margin: 0.7em 0 0.3em 0;
}

.style-heading3 {
    font-size: 14pt;
    font-weight: bold;
    color: #1F4D78;
    margin: 0.6em 0 0.3em 0;
}

.style-heading4 {
    font-size: 12pt;
    font-weight: bold;
    color: #2E75B5;
    font-style: italic;
    margin: 0.5em 0 0.3em 0;
}

.style-heading5 {
    font-size: 11pt;
    font-weight: 600;
    color: #2E75B5;
    margin: 0.5em 0 0.3em 0;
}

.style-heading6 {
    font-size: 11pt;
    font-weight: 600;
    color: #1F4D78;
    font-style: italic;
    margin: 0.5em 0 0.3em 0;
}

/* Quote styles */
.style-quote {
    font-style: italic;
    border-left: 4px solid #ccc;
    padding-left: 1em;
    margin: 1em 0;
    color: var(--text-secondary);
}

.style-intense-quote {
    font-style: italic;
    font-weight: 600;
    border-left: 4px solid #2E75B5;
    padding-left: 1em;
    margin: 1em 0;
    color: #2E75B5;
    background-color: rgba(46, 117, 181, 0.05);
    padding: 0.5em 1em;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .style-heading1,
    .style-heading2,
    .style-heading4,
    .style-heading5 {
        color: #5B9BD5;
        border-color: #5B9BD5;
    }

    .style-heading3,
    .style-heading6 {
        color: #8AB4D9;
    }

    .style-intense-quote {
        color: #5B9BD5;
        border-color: #5B9BD5;
        background-color: rgba(91, 155, 213, 0.1);
    }
}



/* Table rendering in formatted preview */
.result-formatted-preview.table-rendered {
    overflow-x: auto;
}

.result-table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--space-md) 0;
    font-size: var(--font-size-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 2px solid #666; /* Darker outer border */
}

    .result-table th,
    .result-table td {
        border: 1.5px solid #999; /* Thicker, darker cell borders */
        padding: 10px 14px; /* More padding for width */
        text-align: left;
        vertical-align: top;
        min-width: 120px; /* Wider minimum cell width */
    }

    .result-table th {
        background-color: #f5f5f5;
        font-weight: 600;
        color: #333;
        border-bottom: 2px solid #666; /* Prominent header border */
    }

    .result-table tr:nth-child(even) td {
        background-color: #fafafa;
    }

    .result-table tr:hover td {
        background-color: #f0f0f0;
    }

    /* Empty cells - make them visible */
    .result-table th:empty::before,
    .result-table td:empty::before {
        content: '\00a0';
        display: inline-block;
    }



/* ===== VIEW SYSTEM ===== */
.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
    overflow: hidden;
}

    /* View States */
    .view.view-hidden {
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
    }

    .view.view-active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: all;
    }

    .view.view-back {
        transform: translateX(-30%);
        opacity: 0.5;
    }

/* ===== VIEW HEADER ===== */
.view-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
    overflow: hidden;
}

.view-back-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
}

    .view-back-btn:hover {
        color: var(--primary-hover);
    }

.view-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    flex: 1;
}

/* ===== VIEW BODY ===== */
.view-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}

/* ===== VIEW FOOTER ===== */
.view-footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    padding: var(--space-md);
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    flex-shrink: 0;
}

/* ===== MAIN VIEW SPECIFIC ===== */
.model-selector {
    margin-bottom: var(--space-md);
}

.model-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.model-description {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.prompt-section {
    margin-bottom: var(--space-md);
}

.action-buttons {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

    .action-buttons button {
        flex: 1;
    }

.result-section {
    margin-top: var(--space-md);
}

.result-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.6;
}



/* ===================================
   Quick Template Active State
   =================================== */

.quick-templates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.template-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: 2px solid transparent;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    position: relative;
}

    .template-btn:not(.active):hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }


    .template-btn.active {
        background: var(--primary); /* Solid blue for active */
        color: white;
        border-color: var(--primary);
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(0, 102, 204, 0.25);
    }

        .template-btn.active:hover:not(:disabled) {
            background: #0051a3; /* Darker blue on hover - explicit color */
            border-color: #0051a3;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
        }

.template-active-indicator {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.9;
}



/* ===== SETTINGS VIEW SPECIFIC ===== */
.settings-tabs {
    display: flex;
    gap: 4px; /* Reduced from var(--space-sm) which is 8px */
    padding: 0 var(--space-sm); /* Reduced from var(--space-md) */
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border);
    overflow: hidden; /* No scroll */
    flex-shrink: 0;
}

    /* Hide scrollbar for Chrome/Safari/Edge */
    .settings-tabs::-webkit-scrollbar {
        display: none;
    }

.tab-button {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: var(--space-sm) 10px; /* Reduced horizontal padding from var(--space-md) to 10px */
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    margin-bottom: -2px;
    flex-shrink: 0; /* Prevent shrinking */
    line-height: 1.2; /* Tighter line height */
}

    .tab-button:hover {
        color: var(--text-primary);
        background: rgba(0, 0, 0, 0.03);
    }

    .tab-button.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        background: var(--bg-primary);
    }

.tab-content {
    display: none;
    animation: fadeIn var(--transition-fast);
}

    .tab-content.active {
        display: block;
    }

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

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