/* das-trulla custom styles */

/* Terminal output styling */
.sapMTextArea .sapMInputBaseInner[readonly] {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.85rem;
    background-color: #1e1e1e;
    color: #d4d4d4;
}

/* Dashboard tiles */
.sapMGT {
    margin: 0.5rem;
}

/* Pipeline progress bar */
.sapMPI {
    height: 2rem;
}

/* Connection status in header */
.sapTntToolHeader .sapMObjStatus {
    margin-right: 1rem;
}

/* Agent list items */
.sapMLIBContent .sapMVBox {
    padding: 0.25rem 0;
}

/* Monospace text for terminal output */
.trullaMonoText {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-all;
    background-color: #1e1e1e;
    color: #d4d4d4;
    padding: 0.5rem;
    border-radius: 4px;
}

/* Build Info monospace text (inline, light background) */
.trullaMonoTextInline {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace !important;
    font-size: 0.9rem;
}

/* Changelog styling */
.changelogContent {
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 0.5rem;
}
.changelogContent h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--sapTitleColor, #333);
    border-bottom: 1px solid var(--sapGroup_ContentBorderColor, #e0e0e0);
    padding-bottom: 0.3rem;
}
.changelogContent h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1rem;
    color: var(--sapContent_LabelColor, #666);
}
.changelogContent li {
    margin-bottom: 0.3rem;
    list-style-type: disc;
    margin-left: 1.5rem;
}
.changelogContent code {
    background-color: var(--sapField_Background, #f5f5f5);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.85em;
}

/* Agent output scroll container */
#outputScrollContainer {
    background-color: #1e1e1e;
    border-radius: 4px;
}

/* MessageStrip in header */
.sapTntToolHeader .sapMMsgStrip {
    max-width: 400px;
}

/* ============================================================
   Codebase Chat Styles
   ============================================================ */

/* Chat container */
.chatMessagesContainer {
    background-color: #fafafa;
    border-radius: 8px;
}

/* Message bubbles */
.chatMessageUser {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb) !important;
    border-left: 4px solid #1565c0;
    border-radius: 12px 12px 12px 4px;
    margin: 0.5rem 1rem 0.5rem 3rem;
    padding: 0.75rem 1rem;
}
.chatMessageAssistant {
    background: #ffffff !important;
    border-left: 4px solid #2e7d32;
    border-radius: 12px 12px 4px 12px;
    margin: 0.5rem 3rem 0.5rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 0.75rem 1rem;
}

/* Rendered markdown content */
.chatMarkdownContent {
    line-height: 1.6;
    font-size: 0.925rem;
}
.chatMarkdownContent h1 { font-size: 1.4rem; margin: 0.8rem 0 0.4rem; color: #1a237e; }
.chatMarkdownContent h2 { font-size: 1.2rem; margin: 0.7rem 0 0.3rem; color: #283593; }
.chatMarkdownContent h3 { font-size: 1.05rem; margin: 0.5rem 0 0.2rem; color: #303f9f; }
.chatMarkdownContent p { margin: 0.4rem 0; }
.chatMarkdownContent ul, .chatMarkdownContent ol { margin: 0.3rem 0; padding-left: 1.5rem; }
.chatMarkdownContent li { margin: 0.15rem 0; }

/* Code blocks */
.chatMarkdownContent pre {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}
.chatMarkdownContent code {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.85rem;
}
.chatMarkdownContent :not(pre) > code {
    background-color: #f0f0f0;
    border-radius: 3px;
    padding: 0.15rem 0.4rem;
    color: #c62828;
}

/* Details/Summary collapsible sections */
.chatMarkdownContent details {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}
.chatMarkdownContent details summary {
    cursor: pointer;
    font-weight: 600;
    color: #1565c0;
    padding: 0.25rem 0;
}
.chatMarkdownContent details[open] summary {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

/* Mermaid diagrams */
.chatMarkdownContent .mermaid {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1rem;
    margin: 0.5rem 0;
    text-align: center;
}

/* ============================================================
   Artifact Container Styles
   ============================================================ */

/* Artifact wrapper with border and rounded corners */
.artifactContainer {
    border: 1px solid #d0d7de;
    border-radius: 8px;
    margin: 0.75rem 0;
    overflow: hidden;
    background-color: #ffffff;
}

/* Artifact toolbar header with title and action buttons */
.artifactToolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.4rem 0.75rem;
    background-color: #f6f8fa;
    border-bottom: 1px solid #d0d7de;
    gap: 0.5rem;
}
.artifactLabel {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2328;
}
.artifactToolbarSpacer {
    flex: 1;
}
.artifactBtn {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    color: #656d76;
    font-size: 0.85rem;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s;
}
.artifactBtn:hover {
    background-color: #eaeef2;
    border-color: #d0d7de;
    color: #1f2328;
}

/* Code artifact: monospace, scrollable, with language label */
.artifactCode {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    margin: 0;
    overflow-x: auto;
    background-color: #f5f5f5;
    max-height: 500px;
    overflow-y: auto;
}
.artifactCodeLang {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #656d76;
    padding: 0.15rem 0.5rem;
    background-color: #eaeef2;
    border-radius: 3px;
    margin: 0.4rem 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* HTML artifact: sandboxed iframe */
.artifactIframe {
    width: 100%;
    min-height: 300px;
    border: none;
    display: block;
}

/* SVG artifact: centered inline rendering */
.artifactSvg {
    padding: 1rem;
    text-align: center;
    overflow: auto;
}
.artifactSvg svg {
    max-width: 100%;
    height: auto;
}

/* Chart artifact: canvas container */
.artifactChart {
    max-width: 100%;
    padding: 0.5rem;
}

/* Fullscreen artifact dialog content */
.artifactFullscreen {
    width: 100%;
    height: calc(100vh - 6rem);
    overflow: auto;
}
.artifactFullscreen pre {
    background-color: #f5f5f5;
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.85rem;
}
.artifactFullscreen .mermaid {
    background-color: #ffffff;
    text-align: center;
}

/* Ticket suggestion cards */
.chatTicketCard {
    background-color: #fff8e1;
    border: 1px solid #ffcc02;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.4rem 0;
}
.chatTicketTitle {
    font-weight: 600;
    color: #e65100;
    font-size: 0.95rem;
}
.chatTicketType {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
}
.chatTicketType.feature { background-color: #e8f5e9; color: #2e7d32; }
.chatTicketType.bugfix { background-color: #ffebee; color: #c62828; }
.chatTicketType.improvement { background-color: #e3f2fd; color: #1565c0; }

/* Chat input area */
.chatInputToolbar {
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
    padding: 0.25rem;
}
.chatInputField .sapMInputBaseInner {
    border-radius: 8px;
}

/* Timestamp */
.chatTimestamp {
    color: #9e9e9e;
    font-size: 0.75rem;
}

/* Attachment tokens */
.chatAttachmentToken {
    background-color: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 16px;
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
}

/* Streaming cursor animation */
.chatStreaming::after {
    content: '\u258C';
    display: inline;
    animation: chatCursorBlink 0.8s step-end infinite;
    color: var(--sapContent_ForegroundColor, #333);
}
@keyframes chatCursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Typing indicator */
.chatTyping {
    color: #757575;
    font-style: italic;
    display: inline-block;
}
.chatTyping::after {
    content: '...';
    display: inline-block;
    animation: chatDots 1.5s steps(3, end) infinite;
    width: 1.5em;
    text-align: left;
}
@keyframes chatDots {
    0% { content: ''; }
    33% { content: '.'; }
    66% { content: '..'; }
    100% { content: '...'; }
}

/* Chat session list compact */
.chatSessionList .sapMLIB {
    padding: 0.25rem 0.5rem !important;
    min-height: 2.5rem;
}
.chatSessionList .sapMLIBContent {
    margin: 0;
}
.chatSessionTitle {
    font-size: 0.85rem;
    font-weight: 500;
}
.chatSessionDate {
    font-size: 0.7rem;
    color: var(--sapContent_LabelColor, #6a6d70);
}

/* ============================================================
   Agent Terminal Styles (SpecEditor Pipeline Output)
   ============================================================ */

/* Terminal panel styling */
.trullaTerminalPanel .sapMPanelContent {
    padding: 0;
}

/* Terminal container (dark background) */
.trullaTerminalContainer {
    background-color: #1a1a2e;
    border-radius: 0 0 4px 4px;
}

/* Terminal output wrapper */
.trullaTerminalOutput {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    color: #e0e0e0;
}

/* Empty state */
.trullaTerminalEmpty {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.85rem;
    color: #666;
    padding: 2rem;
    text-align: center;
    font-style: italic;
}

/* Phase headers (stage start/end) */
.trullaTerminalPhase {
    padding: 0.4rem 0;
    margin: 0.3rem 0;
    font-weight: 600;
    border-bottom: 1px solid #2a2a4a;
}
.trullaTerminalPhaseStart {
    color: #64b5f6;
}
.trullaTerminalPhaseEnd {
    color: #81c784;
}
.trullaTerminalPhaseIcon {
    margin-right: 0.4rem;
}
.trullaTerminalPhaseLabel {
    letter-spacing: 0.05em;
}

/* Tool use badges */
.trullaTerminalTool {
    padding: 0.15rem 0;
    color: #b0bec5;
}
.trullaTerminalToolBadge {
    display: inline-block;
    background-color: #37474f;
    color: #80cbc4;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-right: 0.4rem;
}
.trullaTerminalToolInput {
    color: #78909c;
    font-size: 0.78rem;
}

/* Text output lines */
.trullaTerminalText {
    padding: 0.05rem 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: #cfd8dc;
}

/* Error lines */
.trullaTerminalError {
    color: #ef5350;
    font-weight: 600;
}

/* Pipeline debug tiles */
.trullaDebugTile {
    background: var(--sapTile_Background, #fff);
    border: 1px solid var(--sapTile_BorderColor, #e0e0e0);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    min-width: 8rem;
    text-align: center;
}

/* Gate approval panel highlight */
.sapMPanel:has(.sapMMessageStrip.sapMMessageStripWarning) {
    border-left: 4px solid var(--sapWarningColor, #e78c07);
}

/* ============================================================
   Git Diff View Styles (GitHub-style)
   ============================================================ */

/* Diff container */
.trullaDiffContainer {
    background-color: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
}

/* Overall wrapper */
.trullaDiffWrapper {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 12px;
    line-height: 1.45;
}

/* Empty state */
.trullaDiffEmpty {
    padding: 2rem;
    text-align: center;
    color: #656d76;
    font-style: italic;
    font-family: sans-serif;
}

/* Per-file block */
.trullaDiffFile {
    border: 1px solid #d0d7de;
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* File header bar */
.trullaDiffFileHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: #f6f8fa;
    border-bottom: 1px solid #d0d7de;
    font-size: 13px;
}
.trullaDiffFileName {
    font-weight: 600;
    color: #1f2328;
    word-break: break-all;
}
.trullaDiffFileStats {
    white-space: nowrap;
    margin-left: 16px;
}
.trullaDiffAdditions {
    color: #1a7f37;
    font-weight: 600;
}
.trullaDiffDeletions {
    color: #cf222e;
    font-weight: 600;
}

/* Hunk header (@@ ... @@) */
.trullaDiffHunkHeader {
    padding: 4px 16px;
    background-color: #ddf4ff;
    color: #0969da;
    font-size: 12px;
    border-bottom: 1px solid #d0d7de;
}

/* Diff table */
.trullaDiffTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Line number columns */
.trullaDiffLineNum {
    width: 50px;
    min-width: 50px;
    padding: 0 8px;
    text-align: right;
    color: #656d76;
    user-select: none;
    vertical-align: top;
    font-size: 12px;
}
.trullaDiffLineOld {
    border-right: 1px solid #d0d7de;
}
.trullaDiffLineNew {
    border-right: 1px solid #d0d7de;
}

/* Prefix column (+/-/space) */
.trullaDiffPrefix {
    width: 20px;
    min-width: 20px;
    padding: 0 4px;
    text-align: center;
    user-select: none;
    font-weight: 600;
    vertical-align: top;
}

/* Code content */
.trullaDiffCode {
    padding: 0 8px;
    white-space: pre-wrap;
    word-break: break-all;
    vertical-align: top;
}

/* Added line (green) - !important needed for UI5 HTML control container */
tr.trullaDiffAdded {
    background-color: #e6ffec !important;
}
tr.trullaDiffAdded td.trullaDiffLineNum {
    background-color: #ccffd8 !important;
    color: #1a7f37 !important;
}
tr.trullaDiffAdded td.trullaDiffPrefix {
    color: #1a7f37 !important;
}

/* Removed line (red) */
tr.trullaDiffRemoved {
    background-color: #ffebe9 !important;
}
tr.trullaDiffRemoved td.trullaDiffLineNum {
    background-color: #ffd7d5 !important;
    color: #cf222e !important;
}
tr.trullaDiffRemoved td.trullaDiffPrefix {
    color: #cf222e !important;
}

/* Context line (unchanged) */
tr.trullaDiffContext {
    background-color: #ffffff !important;
}
tr.trullaDiffContext td.trullaDiffPrefix {
    color: #656d76;
}

/* File status badge in file list */
.trullaDiffFileStatus .sapMObjStatusText {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 1.2rem;
    text-align: center;
}

/* Commit SHA styling */
.trullaDiffSha {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.8rem;
    color: #0969da;
}

/* ============================================================
   ProcessFlow Styles (SpecEditor Pipeline)
   ============================================================ */

/* Compact ProcessFlow - reduce node size */
.trullaProcessFlowCompact {
    transform: scale(0.8);
    transform-origin: top left;
    margin-bottom: -2rem;
}
.trullaProcessFlowCompact .suiteUiProcessFlowNode {
    min-width: 5rem !important;
}
.trullaProcessFlowCompact .suiteUiProcessFlowHeaderText {
    font-size: 0.8rem !important;
}

/* MicroProcessFlow in header */
.suiteUiMicroProcessFlow {
    margin: 0.25rem 0;
}

/* ============================================================
   Kanban Board Redesign
   ============================================================ */
.kanbanContainer {
    min-height: calc(100vh - 12rem);
    gap: 0.75rem;
    padding: 0.5rem;
}
.kanbanColumn {
    min-width: 280px;
    max-width: 320px;
    background-color: var(--sapGroup_ContentBackground, #f5f6f7);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.kanbanColumnHeader {
    padding: 0.75rem 1rem;
    border-bottom: 3px solid transparent;
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--sapTile_Background, #fff);
}
.kanbanColumnHeader.kanbanColumnActive {
    border-bottom-color: var(--sapIndicationColor_5, #0854a0);
}
.kanbanColumnHeader.kanbanColumnDone {
    border-bottom-color: var(--sapPositiveColor, #107e3e);
}
.kanbanList {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}
.kanbanList .sapMLIB {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0.5rem;
}
.kanbanCard {
    background-color: var(--sapTile_Background, #fff) !important;
    border-radius: 0.5rem !important;
    border-left: 4px solid transparent !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, transform 0.1s;
    cursor: grab;
}
.kanbanCard:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.kanbanCard.priorityCritical { border-left-color: var(--sapNegativeColor, #bb0000) !important; }
.kanbanCard.priorityHigh { border-left-color: var(--sapCriticalColor, #e78c07) !important; }
.kanbanCard.priorityMedium { border-left-color: var(--sapIndicationColor_5, #0854a0) !important; }
.kanbanCard.priorityLow { border-left-color: var(--sapPositiveColor, #107e3e) !important; }
.kanbanCardTitle {
    font-weight: 600;
    font-size: 0.925rem;
}
.kanbanCardDesc {
    color: var(--sapContent_LabelColor, #6a6d70);
    font-size: 0.85rem;
}
.kanbanColumn.dragOver {
    background-color: var(--sapSelectedColor, #e8f0fe) !important;
    outline: 2px dashed var(--sapIndicationColor_5, #0854a0);
}
.kanbanCard.sapUiDnDDragging {
    opacity: 0.5;
}