/* Transcript Viewer - Anthropic Themed */

/* Define Anthropic Colors */
:root {
    --anthropic-slate: #141413;
    --anthropic-ivory: #FAF9F5;
    --anthropic-clay: #D97757;
    --anthropic-oat: #E3DACC;
    --anthropic-coral: #EBCECE;
    --anthropic-fig: #C46686;
    --anthropic-sky: #6A9BCC;
    --anthropic-olive: #788C5D;
    --anthropic-heather: #CBCADB;
    --anthropic-cactus: #BCD1CA;
    --anthropic-background: #FFFBF9;
    --anthropic-manilla: #F2E0BD;
    --anthropic-kraft: #D19B75;
    --anthropic-book-cloth: #B86046;
}


.transcript-viewer {
    /* Wide layout that extends beyond container */
    width: 150%;
    max-width: 150%;
    margin-left: -25%;
    position: relative;

    /* Other styles */
    margin-top: 2rem;
    margin-bottom: 2rem;

    background: var(--anthropic-background);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--anthropic-oat);
    box-shadow: 0 2px 12px rgba(20, 20, 19, 0.06);
}

/* Header with transcript tabs */
.transcript-header {
    background: var(--anthropic-ivory);
    border-bottom: 1px solid var(--anthropic-oat);
    padding: 0;
    display: flex;
    align-items: stretch;
}

.transcript-header-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--anthropic-slate);
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--anthropic-oat);
}

.transcript-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 0 1rem;
    flex: 1;
}

.transcript-tab {
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--anthropic-slate);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.transcript-tab:hover {
    background: rgba(227, 218, 204, 0.3);
    color: var(--anthropic-book-cloth);
}

.transcript-tab.active {
    color: var(--anthropic-clay);
    border-bottom-color: var(--anthropic-clay);
    background: var(--anthropic-background);
}

/* Transcript content area */
.transcript-content {
    background: var(--anthropic-background);
    min-height: 300px;
    max-height: 600px;
    /* Shorter for laptop screens */
    overflow-y: auto;
    overflow-x: visible;
    /* Allow content to be visible */
    padding: 1.5rem 0;
    /* Removed horizontal padding */
}

.transcript-description {
    text-align: center;
    color: var(--anthropic-slate);
    opacity: 0.7;
    font-style: italic;
    margin-bottom: 1.5rem;
    padding: 0 2rem;
    font-size: 0.95rem;
}

/* Chat-style entries */
.transcript-entries {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transcript-entry {
    display: flex;
    width: calc(100% - 4rem);
    /* Account for viewer's extra width */
    margin: 0 2rem;
    /* Use margin instead of padding */
}

.entry-content {
    max-width: 65%;
    /* Further reduced to ensure fit */
    padding: 0.875rem 1.25rem;
    border-radius: 8px;
    background: var(--anthropic-ivory);
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--anthropic-slate);
    border: 1px solid transparent;
}

/* Agent entries - right aligned (inverted) */
.transcript-entry-agent {
    justify-content: flex-end;
}

.transcript-entry-agent .entry-content {
    background: var(--anthropic-ivory);
    border-color: var(--anthropic-oat);
}

/* Special case: center report cells if they're the last entry */
.transcript-entries>.transcript-entry-agent.subtype-report:last-child {
    justify-content: center;
}

.transcript-entries>.transcript-entry-agent.subtype-report:last-child .entry-content {
    max-width: 70%;
    text-align: left;
    /* Keep text left-aligned within centered container */
}

/* Result entries - left aligned (inverted) */
.transcript-entry-result {
    justify-content: flex-start;
}

.transcript-entry-result .entry-content {
    background: var(--anthropic-ivory);
    border-color: var(--anthropic-oat);
}

/* Summary entries - center aligned */
.transcript-entry-summary {
    justify-content: center;
}

.transcript-entry-summary .entry-content {
    max-width: 55%;
    /* Reduced from 65% */
    background: var(--anthropic-manilla);
    border-color: var(--anthropic-kraft);
    text-align: center;
    font-weight: 500;
}

.transcript-entry-summary.subtype-critical_finding .entry-content {
    background: var(--anthropic-coral);
    border-color: var(--anthropic-fig);
    color: var(--anthropic-book-cloth);
}

/* Generic summary/narration - light green */
.transcript-entry-summary.subtype-summary .entry-content {
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: var(--anthropic-slate);
}

/* Markers for different subtypes */
.tool-call-marker,
.thought-marker,
.finding-marker,
.result-marker {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--anthropic-kraft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.thought-marker {
    color: var(--anthropic-sky);
}

.finding-marker {
    color: var(--anthropic-olive);
}

.finding-marker.critical {
    color: var(--anthropic-book-cloth);
}

.result-marker {
    color: var(--anthropic-fig);
}

/* Code formatting - Kimbie Dark Theme */
.code-block {
    background: #221a0f;
    border: 1px solid #dc9656;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    overflow-x: auto;
}

.code-block code {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #d3af86;
}

/* Kimbie Dark Syntax Highlighting */
.code-block .token.comment,
.code-block .token.prolog,
.code-block .token.doctype,
.code-block .token.cdata {
    color: #8b8680;
}

.code-block .token.punctuation {
    color: #d3af86;
}

.code-block .token.property,
.code-block .token.tag,
.code-block .token.boolean,
.code-block .token.number,
.code-block .token.constant,
.code-block .token.symbol,
.code-block .token.deleted {
    color: #dc9656;
}

.code-block .token.selector,
.code-block .token.attr-name,
.code-block .token.string,
.code-block .token.char,
.code-block .token.builtin,
.code-block .token.inserted {
    color: #8ab361;
}

.code-block .token.operator,
.code-block .token.entity,
.code-block .token.url,
.code-block .language-css .token.string,
.code-block .style .token.string {
    color: #d3af86;
}

.code-block .token.atrule,
.code-block .token.attr-value,
.code-block .token.keyword {
    color: #dc9656;
}

.code-block .token.function {
    color: #f06431;
}

.code-block .token.regex,
.code-block .token.important,
.code-block .token.variable {
    color: #7e5c41;
}

.code-block .token.important,
.code-block .token.bold {
    font-weight: bold;
}

.code-block .token.italic {
    font-style: italic;
}

.code-block .token.entity {
    cursor: help;
}

.inline-code {
    background: rgba(20, 20, 19, 0.08);
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.875em;
    color: var(--anthropic-clay);
}

/* Orange bracket highlighting similar to Slack code style */
.orange-bracket-highlight {
    background: #e8e8e8;
    color: #ff9500;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.875em;
    font-weight: 500;
}

/* Loading and error states */
.transcript-loading,
.transcript-empty,
.transcript-error {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--anthropic-slate);
    opacity: 0.6;
}

.transcript-error {
    color: var(--anthropic-book-cloth);
    opacity: 1;
}

/* Custom scrollbar */
.transcript-content::-webkit-scrollbar {
    width: 8px;
}

.transcript-content::-webkit-scrollbar-track {
    background: var(--anthropic-oat);
    border-radius: 4px;
}

.transcript-content::-webkit-scrollbar-thumb {
    background: var(--anthropic-kraft);
    border-radius: 4px;
}

.transcript-content::-webkit-scrollbar-thumb:hover {
    background: var(--anthropic-book-cloth);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .transcript-viewer {
        width: 100%;
        margin-left: 0;
        margin: 1rem 0;
        border-radius: 0;
    }

    .transcript-content {
        padding: 1rem 0.5rem;
        max-height: 400px;
    }

    .entry-content {
        max-width: 90%;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .transcript-entry-summary .entry-content {
        max-width: 85%;
    }

    .transcript-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

    .transcript-header-title {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
}

/* Subtle animation for entries */
.transcript-entry {
    animation: fadeIn 0.3s ease-out;
}

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

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

/* Typography improvements */
.entry-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Better contrast for readability */
.transcript-entry-agent .entry-content {
    box-shadow: 0 1px 3px rgba(20, 20, 19, 0.04);
}

.transcript-entry-result .entry-content {
    box-shadow: 0 1px 3px rgba(20, 20, 19, 0.06);
}

.transcript-entry-summary .entry-content {
    box-shadow: 0 2px 6px rgba(20, 20, 19, 0.08);
}

/* Todo List Formatting */
.todo-list {
    background: var(--anthropic-ivory);
    border-radius: 6px;
    padding: 1rem;
    margin: 0.5rem 0;
}

.todo-list-header {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--anthropic-slate);
}

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

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

.todo-group-header {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--anthropic-kraft);
    margin-bottom: 0.5rem;
}

.todo-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(227, 218, 204, 0.5);
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-status {
    margin-right: 0.75rem;
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
}

.todo-content {
    flex: 1;
    color: var(--anthropic-slate);
}

.todo-priority {
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

/* Priority colors */
.todo-item.priority-high .todo-content {
    font-weight: 500;
}

/* Completed items */
.todo-group:has(.todo-item:first-child .todo-status:contains("✓")) .todo-item {
    opacity: 0.6;
}

.todo-group:has(.todo-item:first-child .todo-status:contains("✓")) .todo-content {
    text-decoration: line-through;
}

/* Markdown Content Formatting */
.markdown-content {
    line-height: 1.7;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--anthropic-slate);
}

.markdown-content h1 {
    font-size: 1.5rem;
}

.markdown-content h2 {
    font-size: 1.3rem;
}

.markdown-content h3 {
    font-size: 1.1rem;
}

.markdown-content p {
    margin-bottom: 1rem;
}

.markdown-content ul,
.markdown-content ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.markdown-content li {
    margin-bottom: 0.5rem;
}

.markdown-content strong {
    font-weight: 600;
    color: var(--anthropic-slate);
}

.markdown-content em {
    font-style: italic;
}

.markdown-content a {
    color: var(--anthropic-sky);
    text-decoration: underline;
}

.markdown-content a:hover {
    color: var(--anthropic-clay);
}

/* Feature Input Formatting (for agent cells) */
.feature-input {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.feature-input .input-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--anthropic-background);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--anthropic-oat);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    width: fit-content;
}

.input-label {
    font-weight: 600;
    color: var(--anthropic-kraft);
    font-size: 0.85rem;
}

.input-value {
    color: var(--anthropic-slate);
    font-size: 0.85rem;
}

/* Feature Details Formatting (for result cells) */
.feature-details {
    margin-top: 0.5rem;
}

.feature-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--anthropic-kraft);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-examples-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-example-inlay {
    background: var(--anthropic-background);
    border: 1px solid var(--anthropic-oat);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--anthropic-slate);
    transition: all 0.2s ease;
}

.feature-example-inlay:hover {
    border-color: var(--anthropic-kraft);
    background: white;
}

.feature-details-empty {
    text-align: center;
    color: var(--anthropic-slate);
    opacity: 0.6;
    padding: 2rem;
}

.feature-highlight {
    background: var(--anthropic-manilla);
    color: var(--anthropic-book-cloth);
    padding: 0.125rem 0.25rem;
    border-radius: 3px;
    font-weight: 500;
}

.newline-marker,
.special-char {
    color: var(--anthropic-sky);
    font-weight: 600;
    opacity: 0.7;
    font-size: 0.8em;
}

/* Top Features Formatting */
.top-features {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.feature-inlay {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--anthropic-background);
    border: 1px solid var(--anthropic-oat);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.feature-inlay:hover {
    border-color: var(--anthropic-kraft);
    background: white;
}

.feature-index {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-weight: 600;
    color: var(--anthropic-kraft);
    min-width: 120px;
}

.feature-name {
    flex: 1;
    color: var(--anthropic-slate);
    font-style: italic;
}

/* Code Write Section Styling */
.code-write-content {
    margin-top: 0.5rem;
}

.code-write-content .code-block {
    max-height: 300px;
    overflow-y: auto;
}

.code-write-content .code-block::-webkit-scrollbar {
    width: 6px;
}

.code-write-content .code-block::-webkit-scrollbar-track {
    background: var(--anthropic-oat);
    border-radius: 3px;
}

.code-write-content .code-block::-webkit-scrollbar-thumb {
    background: var(--anthropic-kraft);
    border-radius: 3px;
}

.code-write-content .code-block::-webkit-scrollbar-thumb:hover {
    background: var(--anthropic-book-cloth);
}

/* Bash Output Section Styling */
.bash-output-content {
    background: var(--anthropic-background);
    border: 1px solid var(--anthropic-oat);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--anthropic-slate);
    margin-top: 0.5rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.bash-output-content:hover {
    border-color: var(--anthropic-kraft);
    background: white;
}