.tui-body { flex: 1; padding: 1rem 1.25rem 2rem 1.25rem; overflow-y: auto; overflow-x: hidden; font-size: 0.9rem; line-height: 1.7; min-height: 0; } /* Inline group wrapper - groups consecutive inline elements */ .tui-inline-group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.2rem; animation: lineSlideIn 0.15s ease-out; } /* When inline group contains an image, allow text to wrap beside it */ .tui-inline-group:has(.inline-image) { flex-wrap: nowrap; align-items: flex-start; } .tui-inline-group:has(.inline-image) .inline-content { flex: 1; min-width: 0; } .inline-content { display: inline; white-space: pre-wrap; } .inline-content.output { color: var(--terminal-muted); } .inline-content.info { color: var(--terminal-primary); } .inline-content.success { color: #a6e3a1; } .inline-content.error { color: #f38ba8; } .inline-content.warning { color: #f9e2af; } /* Lines */ .tui-line { display: flex; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.2rem; animation: lineSlideIn 0.15s ease-out; min-height: 1.7em; } .tui-line.blank { min-height: 0.5em; } @keyframes lineSlideIn { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } } /* Prompt styling */ .prompt { display: inline-flex; margin-right: 0.5rem; flex-shrink: 0; } .prompt .user { color: var(--terminal-user); } .prompt .at { color: var(--terminal-muted); } .prompt .host { color: var(--terminal-accent); } .prompt .separator { color: var(--terminal-muted); } .prompt .path { color: var(--terminal-path); } .prompt .symbol { color: var(--terminal-muted); margin-left: 0.25rem; } /* Content */ .content { color: var(--terminal-text); word-break: break-word; white-space: pre-wrap; } .tui-line.output .content { color: var(--terminal-muted); } .tui-line.error .content { color: #f38ba8; } .tui-line.success .content { color: #a6e3a1; } .tui-line.info .content { color: var(--terminal-primary); } .tui-line.warning .content { color: #f9e2af; } .header-text { color: var(--terminal-accent); font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; } :global(.header-icon) { opacity: 0.7; } :global(.inline-icon) { display: inline-block; vertical-align: middle; margin: 0 0.15em; } /* Divider */ .tui-divider { display: flex; align-items: center; gap: 1rem; margin: 0.75rem 0; } .divider-line { flex: 1; height: 1px; background: linear-gradient( to right, transparent, var(--terminal-border), transparent ); } .divider-text { color: var(--terminal-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; } /* Images */ .tui-image { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; } /* Inline images */ .tui-image.inline-image { display: inline-flex; padding: 0; vertical-align: middle; flex-shrink: 0; } .tui-image img { border-radius: 6px; border: 1px solid var(--terminal-border); background: var(--terminal-bg-light); object-fit: contain; } .image-caption { color: var(--terminal-muted); font-size: 0.8rem; font-style: italic; } /* Cursor */ .cursor { display: inline-block; width: 0.5em; height: 1.1em; background: var(--terminal-primary); animation: cursorBlink 1s step-end infinite; margin-left: 2px; vertical-align: baseline; transform: translateY(0.15em); } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Scrollbar */ .tui-body::-webkit-scrollbar { width: 6px; } .tui-body::-webkit-scrollbar-track { background: transparent; } .tui-body::-webkit-scrollbar-thumb { background: var(--terminal-border); border-radius: 3px; } .tui-body::-webkit-scrollbar-thumb:hover { background: var(--terminal-muted); }