/* Assistant Container Scoped Styles */
#platform-assistant-container {
    --accent: var(--theme-color, #255fa6);
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --secondary: #6b7280;
    --success: #10b981;
    --danger: #dc3545;
    --warning: #f59e0b;
    --info: #06b6d4;
    --bg: #f9fafb;
    --card-bg: #ffffff;
    --border: #e5e7eb;
    --text: #111827;
    --text-light: #6b7280;
    float: right;
    height: calc(100vh - 95px);
    width: 0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    background: white;
    overflow: hidden;
    margin: 5px 0px;
    display: none;
    z-index: 1000;
    border-left: 2px solid rgb(234, 234, 236);
}

#platform-assistant-container.visible {
    display: block;
    width: 25%;
    opacity: 1;
}

/* Clear the floated assistant container so content-body still wraps it correctly */
#content-body::after {
    content: "";
    display: table;
    clear: both;
}

/* Main content adjustment when assistant is open */
#main-content {
    width: 100%;
    transition: width 0.3s ease-in-out;
}

#content-body.assistant-open #main-content {
    float: left;
    width: 75%;
}

/* Content center adjustment when assistant is open */
#main-content{
    transition: width 0.3s ease-in-out;
}

#content-body.assistant-open #main-content {
    width: 75% !important;
}

/* Assistant Toggle Button */
.assistant-toggle-btn {
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 9999;
    cursor: pointer;
    background: white;
    padding: 12px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    animation: assistantPulse 2s infinite;
    background-color: var(--theme-color, #255fa6);
}

.assistant-toggle-btn.hover,
.assistant-toggle-btn:hover {
    animation: none;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.assistant-toggle-btn:active {
    transform: scale(0.95);
}

.assistant-toggle-btn .icon-assistant {
    width: 50px;
    height: 50px;
}

@keyframes assistantPulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    }
}

/* Chat Page Layout */
#platform-assistant-container .chat-page {
    height: 100%;
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#platform-assistant-container .chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Chat Header Toolbar - Hidden (Agent dropdown moved to bottom) */
#platform-assistant-container .chat-header-toolbar {
    display: none;
}

/* Chat Header Row */
#platform-assistant-container .chat-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    flex-shrink: 0;
    line-height: 30px;
    height: 45px;
}

#platform-assistant-container .chat-header-title {
    margin: 0;
    font-size: 15px;
    color: #404040;
    font-weight: bold;
}

#platform-assistant-container .chat-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Session action buttons - matching agent-execution styling exactly */
#platform-assistant-container .lp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #4a5872;  /* --text-mid */
    background: #f7f9fc;  /* --surface2 */
    border: 1.5px solid #dde3ee;  /* --border */
    border-radius: 0;  /* --radius-xs */
    padding: 0;
    cursor: pointer;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);  /* --transition */
    flex-shrink: 0;
    outline: none;
}

#platform-assistant-container .lp-action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

#platform-assistant-container .lp-action-btn span {
    display: none;
}

/* List Sessions button - show text */
#platform-assistant-container .lp-action-btn-with-text {
    width: auto;
    padding: 0 12px;
    gap: 6px;
}

#platform-assistant-container .lp-action-btn-with-text span {
    display: inline;
    font-size: 13px;
    font-weight: 500;
}

#platform-assistant-container .lp-action-btn:hover {
    background: #fff;
    border-color: var(--accent);  /* --accent */
    color: var(--accent);  /* --accent */
    box-shadow: 0 2px 8px rgba(30, 60, 100, 0.07);  /* --shadow-sm */
    transform: translateY(-1px);
}

#platform-assistant-container .lp-action-btn-primary {
    /* background: linear-gradient(135deg, #255fa6, #4a90e2); */
    background-color: var(--accent);
    border-color: var(--accent);  /* --accent */
    color: #fff;
    box-shadow: 0 3px 12px rgba(46, 134, 222, 0.35);
}

#platform-assistant-container .lp-action-btn-close {
    background-color: var(--danger);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 3px 12px rgba(46, 134, 222, 0.35);
}

#platform-assistant-container .lp-action-btn-primary:hover {
    /* background: linear-gradient(135deg, #255fa6, #4a90e2); */
    background-color: var(--accent);
    border-color: var(--accent);  /* --accent2 */
    color: #fff;
    box-shadow: 0 6px 20px rgba(46, 134, 222, 0.45);
}

#platform-assistant-container .lp-action-btn:active {
    transform: translateY(0);
}

/* Icon Styling */
#platform-assistant-container .icon-resize-full {
    width: 20px;
    height: 20px;
    display: inline-block;
}

#platform-assistant-container .agent-dropdown {
    flex: 1;
    background: #eff0f1;
    color: #374151;
    border: 1px solid #dee5f2;
    padding: 8px 12px;
    border-radius: 0px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    width: 100%;
}

#platform-assistant-container .agent-dropdown:hover {
    border-color: 1px solid #dee5f2;
    background: #eff0f1;
}

#platform-assistant-container .agent-dropdown:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Chat Messages Area */
#platform-assistant-container .chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    /* background: #f9fafb; */
    min-height: 0;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: #6b7280 #f3f4f6;
}

/* Custom scrollbar for chat messages */
#platform-assistant-container .chat-messages::-webkit-scrollbar {
    width: 10px;
}

#platform-assistant-container .chat-messages::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 5px;
}

#platform-assistant-container .chat-messages::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 5px;
    border: 2px solid #f3f4f6;
}

#platform-assistant-container .chat-messages::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

#platform-assistant-container .welcome-message {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

#platform-assistant-container .welcome-message h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #374151;
}

#platform-assistant-container .welcome-message p {
    margin: 0;
    font-size: 14px;
}

/* Chat Messages */
#platform-assistant-container .message {
    display: flex;
    margin: 15px 0;
    animation: fadeIn 0.3s ease-in;
}

/* Messages with avatars (error, event) use flex layout with row direction */
#platform-assistant-container .message-error,
#platform-assistant-container .message-event {
    flex-direction: row;
    gap: 12px;
    margin: 5px 0;
}

/* User messages align to the right */
#platform-assistant-container .message-user {
    justify-content: flex-end;
}

/* Assistant messages align to the left */
#platform-assistant-container .message-assistant {
    justify-content: flex-start;
}

/* Message wrapper contains content and actions - matching agent-execution */
#platform-assistant-container .message-wrapper {
    max-width: 80%;
    width: fit-content;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

#platform-assistant-container .message-assistant .message-wrapper {
    max-width: 95%;
    width: auto;
}

#platform-assistant-container .message-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* Hide user avatar - only show assistant avatar if needed */
#platform-assistant-container .message-avatar-user,
#platform-assistant-container .message-avatar-assistant {
    display: none !important;
}

/* Show event and error avatars during streaming */
#platform-assistant-container .message-avatar-event,
#platform-assistant-container .message-avatar-error {
    display: flex !important;
}

#platform-assistant-container .message-content {
    width: fit-content;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.65;
    border-radius: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Error event messages - styled like assistant messages for consistency */
#platform-assistant-container .message-content.message-content-event.message-content-event-error {
    background: #f9fafb;
    color: #1a2332;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.65;
    word-wrap: break-word;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-style: normal;
}

/* User message styling - exactly matching agent-execution */
#platform-assistant-container .message-user .message-content {
    background: linear-gradient(135deg, #255fa6, #1d6dba);
    color: #fff;
    border-radius: 14px 14px 2px 14px;
    box-shadow: 0 4px 16px rgba(46, 134, 222, 0.3);
    align-self: flex-end;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#platform-assistant-container .message-user .message-content:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46, 134, 222, 0.4);
}

/* Assistant message styling - exactly matching agent-execution */
#platform-assistant-container .message-assistant .message-content {
    background: #f9fafb;
    color: #1a2332;
    width: 100%;
}

#platform-assistant-container .message-assistant .message-content ul,
#platform-assistant-container .message-assistant .message-content ol {
    padding: 0 15px;
}

/* Message Avatar Gradients */
#platform-assistant-container .message-avatar-user {
    /*background: linear-gradient(135deg, var(--theme-color, #667eea) 0%, var(--theme-light-color, #764ba2) 100%);*/
    display: block;
}

#platform-assistant-container .message-avatar-assistant {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

#platform-assistant-container .message-avatar-event {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Message Event Styles */
#platform-assistant-container .message-event .message-content {
    color: #8894c1;
    font-size: 11px;
    font-style: italic;
    padding: 3px 8px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.08);
}

/* Message Actions - matching agent-execution */
#platform-assistant-container .message-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

#platform-assistant-container .actions-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

#platform-assistant-container .actions-right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

#platform-assistant-container .message-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
}

/* Show action buttons on message hover */
#platform-assistant-container .message-wrapper:hover .message-action-btn {
    opacity: 1;
}

/* Keep regenerate button hidden when explicitly set */
#platform-assistant-container .regenerate-btn[style*="display: none"] {
    opacity: 0 !important;
    pointer-events: none;
}

#platform-assistant-container .message-action-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    transform: scale(1.1);
}

#platform-assistant-container .message-action-btn.copied {
    opacity: 1;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    transform: scale(1.15);
}

/* Regenerate button - specific styling */
#platform-assistant-container .regenerate-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    transform: rotate(180deg) scale(1.1);
}

#platform-assistant-container .message-time {
    font-size: 10px;
    color: #9ca3af;
}

/* Action Buttons for Decision-Based Responses (matching agent-execution) */
#platform-assistant-container .msg-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 16px 0;
    padding: 0;
}

#platform-assistant-container .msg-action-buttons.disabled {
    pointer-events: none;
}

#platform-assistant-container .action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1.5px solid #dde3ee;
    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 80px;
    text-align: center;
}

#platform-assistant-container .action-btn:hover:not(:disabled) {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 95, 166, 0.2);
}

#platform-assistant-container .action-btn:active:not(:disabled) {
    transform: translateY(0);
}

#platform-assistant-container .action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6;
}

#platform-assistant-container .action-btn.selected {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* Message Error Styles */
#platform-assistant-container .message-error {
    display: flex;
    gap: 12px;
    animation: fadeIn 0.3s ease-in;
}

#platform-assistant-container .message-avatar-error {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

#platform-assistant-container .message-content-error {
    color: #6b7280;
    flex: 1;
    padding: 0 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

/* Error message in welcome area */
#platform-assistant-container .welcome-message.error-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 24px;
}

#platform-assistant-container .welcome-message.error-message h4 {
    color: #991b1b;
}

#platform-assistant-container .welcome-message.error-message p {
    color: #dc2626;
    white-space: pre-wrap;
}

/* Cursor animation for streaming */
#platform-assistant-container .cursor {
    animation: blink 1s infinite;
    margin-left: 2px;
    color: var(--accent);
}

@keyframes blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* Thinking indicator – shown while waiting for agent response */
#platform-assistant-container .thinking-indicator {
    opacity: 1;
    transition: opacity 0.15s ease;
}

#platform-assistant-container .thinking-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

#platform-assistant-container .thinking-content .typing-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}

#platform-assistant-container .thinking-content .typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: thinkingBounce 1.4s infinite ease-in-out;
}

#platform-assistant-container .thinking-content .typing-dot:nth-child(2) {
    animation-delay: .2s;
}

#platform-assistant-container .thinking-content .typing-dot:nth-child(3) {
    animation-delay: .4s;
}

#platform-assistant-container .thinking-text {
    font-size: 13px;
    color: #6b7280;
    animation: thinkingPulse 2s ease-in-out infinite;
}

@keyframes thinkingBounce {
    0%, 60%, 100% {
        transform: translateY(0) scale(1);
        opacity: .6;
    }
    30% {
        transform: translateY(-6px) scale(1.1);
        opacity: 1;
    }
}

@keyframes thinkingPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Chat Input Container */
#platform-assistant-container .chat-input-container {
    padding: 10px;
    background: white;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    flex-grow: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}

#platform-assistant-container #chat-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0px;
    background: white;
    transition: all 0.2s;
    position: relative;
}

#platform-assistant-container #chat-form:focus-within {
    border-color: #d1d5db;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#platform-assistant-container #chat-form:hover {
    border-color: #d1d5db;
}

/* Animated border during execution — Copilot-style traveling light trail */
#platform-assistant-container #chat-form.streaming-active {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#platform-assistant-container #chat-form.streaming-active::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: conic-gradient(
            from var(--streaming-angle, 0deg),
            transparent 0deg,
            transparent 300deg,
            var(--accent, #255fa6) 330deg,
            #60a5fa 345deg,
            var(--accent, #255fa6) 360deg
    );
    -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
    mask-composite: exclude;
    padding: 2px;
    animation: streaming-rotate 2.5s linear infinite;
}

@property --streaming-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes streaming-rotate {
    0%   { --streaming-angle: 0deg; }
    100% { --streaming-angle: 360deg; }
}

#platform-assistant-container .chat-input-field {
    color: #374151;
    width: 100%;
    padding: 14px 14px;
    border: none;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    transition: none;
    min-height: 120px;
    max-height: 300px;
    resize: none;
    overflow-y: auto;
    /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: #6b7280 transparent;
}

/* Custom scrollbar for webkit browsers (Chrome, Safari, Edge) */
#platform-assistant-container .chat-input-field::-webkit-scrollbar {
    width: 8px;
}

#platform-assistant-container .chat-input-field::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

#platform-assistant-container .chat-input-field::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

#platform-assistant-container .chat-input-field::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
    background-clip: content-box;
}

#platform-assistant-container .chat-input-field:focus {
    border: none;
    box-shadow: none;
}

#platform-assistant-container .chat-input-field:hover {
    border: none;
}

#platform-assistant-container .chat-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 8px;
    /* border-top: 1px solid #e5e7eb; */
    /* background: #f9fafb; */
    border-radius: 0 0 8px 8px;
}

#platform-assistant-container #send-btn {
    flex-shrink: 0;
    color: white !important;
    border: none;
    padding: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: none;
    background-color: var(--accent);
}

#platform-assistant-container #send-btn img,
#platform-assistant-container #send-btn .icon-resize-full {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

/* Stop icon inside send button */
#platform-assistant-container #send-btn svg.stop-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

#platform-assistant-container #send-btn svg.stop-icon .stop-arc {
    transform-origin: center;
    animation: stopSpinnerRotate 1s linear infinite;
}

/* Smooth content swap */
#platform-assistant-container #send-btn > * {
    animation: assistantBtnFadeIn 0.2s ease-out;
}

@keyframes stopSpinnerRotate {
    to { transform: rotate(360deg); }
}

@keyframes assistantBtnFadeIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* Theme Classes */
.theme-bg-gradient {
    background: linear-gradient(135deg, var(--theme-color, #667eea) 0%, var(--theme-light-color, #764ba2) 100%) !important;
}

/* .theme-color {
    color: var(--theme-color, #667eea) !important;
} */

.theme-bg {
    background-color: var(--theme-color, #667eea) !important;
}

/* Content Center Transition */
#content-center {
    transition: width 0.3s ease-in-out;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    #platform-assistant-container.visible {
        width: 100% !important;
        height: 100vh !important;
    }

    #content-body.assistant-open #main-content {
        display: none;
    }

    #content-center {
        width: 100% !important;
    }
}


#platform-assistant-container .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Notifications */
#platform-assistant-container .notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ffffff !important;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--info);
    z-index: 1000;
    min-width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn 0.3s ease-out;
}

#platform-assistant-container .notification-success {
    border-left-color: var(--success);
}

#platform-assistant-container .notification-error {
    border-left-color: var(--danger);
}

#platform-assistant-container .notification-warning {
    border-left-color: var(--warning);
}

#platform-assistant-container .notification button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    color: var(--text-light);
}

#platform-assistant-container .notification button:hover {
    color: var(--text);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Navbar */
#platform-assistant-container .navbar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
}

#platform-assistant-container .navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#platform-assistant-container .nav-brand h1 {
    font-size: 1.5rem;
    color: var(--primary);
}

#platform-assistant-container .nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

#platform-assistant-container .nav-menu a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    transition: color 0.2s;
}

#platform-assistant-container .nav-menu a:hover {
    color: var(--primary);
}

#platform-assistant-container .health-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

#platform-assistant-container .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary);
}

#platform-assistant-container .status-dot.healthy {
    background: var(--success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Main Content */
#platform-assistant-container main {
    padding: 2rem 0;
    min-height: calc(100vh - 200px);
}

/* Page Header */
#platform-assistant-container .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

#platform-assistant-container .page-header h2 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

#platform-assistant-container .page-header p {
    color: var(--text-light);
}

/* Buttons */
#platform-assistant-container .btn {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

#platform-assistant-container .btn-primary {
    background: var(--primary);
    color: white;
}

#platform-assistant-container .btn-primary:hover {
    background: var(--primary-dark);
}

#platform-assistant-container .btn-secondary {
    background: var(--secondary);
    color: white;
}

#platform-assistant-container .btn-secondary:hover {
    opacity: 0.9;
}

#platform-assistant-container .btn-danger {
    background: var(--danger);
    color: white;
}

#platform-assistant-container .btn-danger:hover {
    opacity: 0.9;
}

#platform-assistant-container .btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}

#platform-assistant-container .btn-block {
    width: 100%;
    text-align: center;
}

/* Stats Grid */
#platform-assistant-container .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

#platform-assistant-container .stat-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
}

#platform-assistant-container .stat-icon {
    font-size: 2.5rem;
}

#platform-assistant-container .stat-info h3 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

#platform-assistant-container .stat-info p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Section */
#platform-assistant-container .section {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

#platform-assistant-container .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

#platform-assistant-container .section-header h3 {
    font-size: 1.25rem;
}

/* Agent List */
#platform-assistant-container .agent-list {
    display: grid;
    gap: 1rem;
}

#platform-assistant-container .agent-card {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: box-shadow 0.2s;
}

#platform-assistant-container .agent-card:hover {
    box-shadow: var(--shadow-lg);
}

#platform-assistant-container .agent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

#platform-assistant-container .agent-header h4 {
    font-size: 1.1rem;
}

#platform-assistant-container .agent-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Quick Actions */
#platform-assistant-container .quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

#platform-assistant-container .action-card {
    padding: 1.5rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s;
}

#platform-assistant-container .action-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

#platform-assistant-container .action-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

#platform-assistant-container .action-card h4 {
    margin-bottom: 0.5rem;
}

#platform-assistant-container .action-card p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Agents Grid */
#platform-assistant-container .agents-grid {
    display: grid;
    gap: 1.5rem;
}

#platform-assistant-container .agent-card-full {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

#platform-assistant-container .agent-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

#platform-assistant-container .agent-badges {
    display: flex;
    gap: 0.5rem;
}

#platform-assistant-container .agent-stats {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg);
    border-radius: 6px;
}

#platform-assistant-container .stat {
    display: flex;
    flex-direction: column;
}

#platform-assistant-container .stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
}

#platform-assistant-container .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
}

#platform-assistant-container .agent-tools {
    margin: 1rem 0;
    padding: 0.75rem;
    background: var(--bg);
    border-radius: 6px;
    font-size: 0.9rem;
}

#platform-assistant-container .agent-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Agent Sessions */
#platform-assistant-container .agent-sessions {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--bg);
    border-radius: 6px;
}

#platform-assistant-container .sessions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

#platform-assistant-container .btn-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
}

#platform-assistant-container .btn-link:hover {
    color: var(--primary-dark);
}

#platform-assistant-container .sessions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.75rem;
}

#platform-assistant-container .session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: box-shadow 0.2s;
}

#platform-assistant-container .session-item:hover {
    box-shadow: var(--shadow);
}

#platform-assistant-container .session-info {
    flex: 1;
}

#platform-assistant-container .session-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

#platform-assistant-container .session-id {
    /* font-family: 'Courier New', monospace;*/
    font-size: 0.85rem;
    background: var(--bg);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

#platform-assistant-container .session-date {
    font-size: 0.85rem;
    color: var(--text-light);
}

#platform-assistant-container .session-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

#platform-assistant-container .conversation-count {
    font-weight: 500;
}

#platform-assistant-container .memory-type {
    text-transform: capitalize;
    background: var(--bg);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

#platform-assistant-container .more-sessions {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
}

#platform-assistant-container .no-sessions {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    margin: 0;
}

/* Badge */
#platform-assistant-container .badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

#platform-assistant-container .badge-success {
    background: #d1fae5;
    color: #065f46;
}

#platform-assistant-container .badge-info {
    background: #cffafe;
    color: #155e75;
}

#platform-assistant-container .badge-warning {
    background: #fef3c7;
    color: #92400e;
}

#platform-assistant-container .badge-primary {
    background: #dbeafe;
    color: #1e40af;
}

#platform-assistant-container .badge-secondary {
    background: #f3f4f6;
    color: #374151;
}

/* Modal */
#platform-assistant-container .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#platform-assistant-container .modal-content {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

#platform-assistant-container .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

#platform-assistant-container .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-light);
}

#platform-assistant-container .close-btn:hover {
    color: var(--text);
}

/* Inline Sessions List - GitHub Copilot Style */
#platform-assistant-container .sessions-list-container {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

#platform-assistant-container .sessions-list-container.hidden {
    display: none;
}

#platform-assistant-container .sessions-list-header {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

#platform-assistant-container .sessions-list {
    overflow-y: auto;
    max-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #f3f4f6;
}

#platform-assistant-container .sessions-list::-webkit-scrollbar {
    width: 8px;
}

#platform-assistant-container .sessions-list::-webkit-scrollbar-track {
    background: #f3f4f6;
}

#platform-assistant-container .sessions-list::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

#platform-assistant-container .sessions-list::-webkit-scrollbar-thumb:hover {
    background: #374151;
}

#platform-assistant-container .session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s ease;
}

#platform-assistant-container .session-item:hover {
    background: #f9fafb;
}

#platform-assistant-container .session-item:active {
    background: #f3f4f6;
}

#platform-assistant-container .session-item-info {
    flex: 1;
    min-width: 0; /* Allow text truncation if needed */
    cursor: pointer;
}

#platform-assistant-container .session-item-id {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 4px;
    /*font-family: 'Courier New', monospace;*/
}

#platform-assistant-container .session-item-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
}

#platform-assistant-container .session-item-date {
    color: #6b7280;
}

#platform-assistant-container .session-item-messages {
    color: #9ca3af;
}

#platform-assistant-container .session-item-actions {
    display: flex;
    gap: 6px;
    margin-right: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

#platform-assistant-container .session-item:hover .session-item-actions {
    opacity: 1;
}

#platform-assistant-container .session-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
    padding: 0;
}

#platform-assistant-container .session-action-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

#platform-assistant-container .session-edit-btn:hover {
    background: #dbeafe;
    color: #3b82f6;
}

#platform-assistant-container .session-delete-btn:hover {
    background: #fee2e2;
    color: #dc3545;
}

#platform-assistant-container .session-action-btn:active {
    transform: scale(0.95);
}

#platform-assistant-container .session-item-arrow {
    color: #9ca3af;
    font-size: 16px;
    transition: transform 0.15s ease, color 0.15s ease;
}

#platform-assistant-container .session-item:hover .session-item-arrow {
    color: #6b7280;
    transform: translateX(3px);
}

#platform-assistant-container .sessions-list-loading,
#platform-assistant-container .sessions-list-empty,
#platform-assistant-container .sessions-list-error {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

#platform-assistant-container .sessions-list-error {
    color: #dc3545;
}

#platform-assistant-container .view-all-sessions-btn {
    padding: 10px 20px;
    background: #f9fafb;
    border: none;
    border-top: 1px solid #e5e7eb;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    width: 100%;
    text-align: center;
}

#platform-assistant-container .view-all-sessions-btn.hidden {
    display: none;
}

#platform-assistant-container .view-all-sessions-btn:hover {
    background: #f3f4f6;
    color: #2563eb;
}

/* Keep modal styles for backward compatibility but hidden by default */
#sessions-modal {
    display: none !important;
}

#sessions-modal.show {
    opacity: 1;
}

#sessions-modal .sessions-modal-content {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 70vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

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

#sessions-modal .sessions-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

#sessions-modal .sessions-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

#sessions-modal .close-modal-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #9ca3af;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

#sessions-modal .close-modal-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

#sessions-modal .sessions-modal-body {
    padding: 16px 24px 24px;
    overflow-y: auto;
    flex: 1;
}

#sessions-modal .session-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

#sessions-modal .session-list-item:hover {
    border-color: #3b82f6;
    background: #f9fafb;
    transform: translateX(4px);
}

#sessions-modal .session-list-item:active {
    transform: translateX(4px) scale(0.98);
}

#sessions-modal .session-list-info {
    flex: 1;
}

#sessions-modal .session-list-id {
    /* font-family: 'Courier New', monospace;*/
    font-size: 13px;
    color: #111827;
    font-weight: 600;
    margin-bottom: 6px;
}

#sessions-modal .session-list-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #6b7280;
}

#sessions-modal .session-list-date {
    display: flex;
    align-items: center;
}

#sessions-modal .session-list-messages {
    display: flex;
    align-items: center;
}

#sessions-modal .session-list-arrow {
    color: #9ca3af;
    font-size: 20px;
    transition: all 0.2s;
}

#sessions-modal .session-list-item:hover .session-list-arrow {
    color: #3b82f6;
    transform: translateX(4px);
}

#sessions-modal .no-sessions-found {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 14px;
}

/* Scrollbar for sessions modal */
#sessions-modal .sessions-modal-body::-webkit-scrollbar {
    width: 8px;
}

#sessions-modal .sessions-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#sessions-modal .sessions-modal-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

#sessions-modal .sessions-modal-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Keep the old scoped styles for backwards compatibility */
#platform-assistant-container .sessions-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#platform-assistant-container .sessions-modal.show {
    opacity: 1;
}

#platform-assistant-container .sessions-modal-content {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 70vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

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

#platform-assistant-container .sessions-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

#platform-assistant-container .sessions-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

#platform-assistant-container .close-modal-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #9ca3af;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

#platform-assistant-container .close-modal-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

#platform-assistant-container .sessions-modal-body {
    padding: 16px 24px 24px;
    overflow-y: auto;
    flex: 1;
}

#platform-assistant-container .session-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

#platform-assistant-container .session-list-item:hover {
    border-color: #3b82f6;
    background: #f9fafb;
    transform: translateX(4px);
}

#platform-assistant-container .session-list-item:active {
    transform: translateX(4px) scale(0.98);
}

#platform-assistant-container .session-list-info {
    flex: 1;
}

#platform-assistant-container .session-list-id {
    /* font-family: 'Courier New', monospace;*/
    font-size: 13px;
    color: #111827;
    font-weight: 600;
    margin-bottom: 6px;
}

#platform-assistant-container .session-list-meta {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: #6b7280;
}

#platform-assistant-container .session-list-date {
    display: flex;
    align-items: center;
}

#platform-assistant-container .session-list-messages {
    display: flex;
    align-items: center;
}

#platform-assistant-container .session-list-arrow {
    color: #9ca3af;
    font-size: 20px;
    transition: all 0.2s;
}

#platform-assistant-container .session-list-item:hover .session-list-arrow {
    color: #3b82f6;
    transform: translateX(4px);
}

#platform-assistant-container .no-sessions-found {
    text-align: center;
    padding: 40px 20px;
    color: #9ca3af;
    font-size: 14px;
}

/* Scrollbar for sessions modal */
#platform-assistant-container .sessions-modal-body::-webkit-scrollbar {
    width: 8px;
}

#platform-assistant-container .sessions-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

#platform-assistant-container .sessions-modal-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

#platform-assistant-container .sessions-modal-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Forms */

/*#main-content.assistant-open.maximise-workarea-inner #content-center {*/
/*    width: 75% !important;*/
/*}*/

/*#main-content.assistant-open.maximise-workarea-inner .action-menu{*/
/*    right: 25% !important;*/
/*}*/

/* ========================================================================
   Enhanced Markdown Rendering Styles
   ======================================================================== */

/* Markdown Tables - Optimized for message containers with proper containment */
#platform-assistant-container .markdown-table,
#platform-assistant-container .message-content table {
    border-collapse: collapse;
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    margin: 8px 0;
    font-size: 13px;
    background-color: white;
    border: 1px solid #e5e7eb;
    /* border-radius: 6px; */
    display: block;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

#platform-assistant-container .markdown-table::-webkit-scrollbar,
#platform-assistant-container .message-content table::-webkit-scrollbar {
    height: 5px;
}

#platform-assistant-container .markdown-table::-webkit-scrollbar-track,
#platform-assistant-container .message-content table::-webkit-scrollbar-track {
    background: transparent;
}

#platform-assistant-container .markdown-table::-webkit-scrollbar-thumb,
#platform-assistant-container .message-content table::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

#platform-assistant-container .markdown-table::-webkit-scrollbar-thumb:hover,
#platform-assistant-container .message-content table::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

#platform-assistant-container .markdown-table thead,
#platform-assistant-container .message-content table thead {
    /* background-color: #f9fafb; */
    background-color: #eaeaec;
}

#platform-assistant-container .markdown-table th,
#platform-assistant-container .message-content table th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    white-space: normal;
}

#platform-assistant-container .markdown-table th:last-child,
#platform-assistant-container .message-content table th:last-child {
    border-right: none;
}

#platform-assistant-container .markdown-table td,
#platform-assistant-container .message-content table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    color: #1f2937;
    white-space: normal;
}

#platform-assistant-container .markdown-table td:last-child,
#platform-assistant-container .message-content table td:last-child {
    border-right: none;
}

#platform-assistant-container .markdown-table tr:last-child td,
#platform-assistant-container .message-content table tbody tr:last-child td {
    border-bottom: none;
}

#platform-assistant-container .markdown-table tr:hover,
#platform-assistant-container .message-content table tbody tr:hover {
    background-color: #f9fafb;
}

/* Markdown Headings - Optimized for messages */
#platform-assistant-container .message-content h1,
#platform-assistant-container .message-content h2,
#platform-assistant-container .message-content h3,
#platform-assistant-container .message-content h4,
#platform-assistant-container .message-content h5,
#platform-assistant-container .message-content h6 {
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
    /* Note: margins are controlled by the reset rules above */
}

#platform-assistant-container .message-content h1 {
    font-size: 1.25em;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 4px;
}

#platform-assistant-container .message-content h2 {
    font-size: 1.15em;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 3px;
}

#platform-assistant-container .message-content h3 {
    font-size: 1.1em;
}

#platform-assistant-container .message-content h4 {
    font-size: 1.05em;
}

#platform-assistant-container .message-content h5 {
    font-size: 1em;
}

#platform-assistant-container .message-content h6 {
    font-size: 0.95em;
    color: #6b7280;
}

/* Markdown Lists - Optimized for messages */
#platform-assistant-container .message-content ul {
    list-style-type: disc;
}

#platform-assistant-container .message-content ol {
    list-style-type: decimal;
}

#platform-assistant-container .message-content li {
    margin: 5px 0;
    line-height: 1.65;
    color: #374151;
}

#platform-assistant-container .message-content li > ul,
#platform-assistant-container .message-content li > ol {
    margin: 2px 0;
}

/* Task Lists (GFM) */
#platform-assistant-container .message-content .task-list-item {
    list-style-type: none;
    margin-left: -24px;
    padding-left: 24px;
}

#platform-assistant-container .message-content .task-list-item input[type=\"checkbox\"] {
    margin-right: 8px;
    cursor: default;
}

/* Markdown Blockquotes - Optimized for messages */
#platform-assistant-container .message-content blockquote {
    /* Note: margins are controlled by the reset rules */
    padding: 8px 12px;
    border-left: 3px solid #3b82f6;
    background-color: #eff6ff;
    color: #1e40af;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

/* Markdown Horizontal Rules */
#platform-assistant-container .message-content hr {
    /* Note: margins are controlled by the reset rules */
    border: none;
    border-top: 1px solid #e5e7eb;
}

/* Markdown Images */
#platform-assistant-container .message-content .markdown-image,
#platform-assistant-container .message-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    /* Note: margins are controlled by the reset rules */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ── CODE BLOCKS ─────────────────────────────────────────────────────────── */

/* Non-scrolling outer wrapper — button and label are positioned here */
#platform-assistant-container .message-content .code-block-outer {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* Header strip: 38px frosted tint + 1px separator, then dark body */
    background:
            linear-gradient(to bottom,
            rgba(255, 255, 255, 0.07) 37px,
            rgba(255, 255, 255, 0.07) 38px,
            transparent                38px
            ),
            linear-gradient(to bottom,
            rgba(255, 255, 255, 0.04) 38px,
            transparent                38px
            ),
            #1e1e1e;
}

/* The pre itself — only scrolling code, no header padding needed */
#platform-assistant-container .message-content .code-block,
#platform-assistant-container .message-content pre {
    margin: 0 !important;
    border: none;
    border-radius: 0;
    color: #d4d4d4;
    padding: 52px 16px 16px !important;
    overflow-x: auto;
    white-space: pre;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.65;
    max-width: 100%;
    background: transparent !important;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

#platform-assistant-container .message-content .code-block code,
#platform-assistant-container .message-content pre code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
    color: inherit;
    display: block;
    white-space: pre;
    word-wrap: normal;
}

/* Language label — top-left of the outer wrapper (never scrolls) */
#platform-assistant-container .message-content .code-block-outer > .code-lang-label {
    position: absolute;
    top: 10px;
    left: 14px;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
    pointer-events: none;
    z-index: 3;
    line-height: 18px;
}

/* Copy button — top-right of the outer wrapper (never scrolls) */
#platform-assistant-container .message-content .code-block-outer > .code-copy-btn {
    position: absolute;
    top: 5px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    opacity: 0;
    z-index: 3;
}

#platform-assistant-container .message-content .code-block-outer:hover > .code-copy-btn {
    opacity: 1;
}

#platform-assistant-container .message-content .code-block-outer > .code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
}

#platform-assistant-container .message-content .code-block-outer > .code-copy-btn.copied {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
    opacity: 1;
}

/* Custom scrollbar for code blocks */
#platform-assistant-container .message-content .code-block::-webkit-scrollbar,
#platform-assistant-container .message-content pre::-webkit-scrollbar {
    height: 6px;
}

#platform-assistant-container .message-content .code-block::-webkit-scrollbar-track,
#platform-assistant-container .message-content pre::-webkit-scrollbar-track {
    background: transparent;
}

#platform-assistant-container .message-content .code-block::-webkit-scrollbar-thumb,
#platform-assistant-container .message-content pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

#platform-assistant-container .message-content .code-block::-webkit-scrollbar-thumb:hover,
#platform-assistant-container .message-content pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* ECharts container — either a ```echarts fenced code block once rendered,
   or the agent's own <div id="..."> chart target once we've parsed and
   initialized it. Mirrors agent-execution.css's equivalent block. */
#platform-assistant-container .message-content .echarts-container {
    width: 100%;
    height: 360px;
    min-height: 360px;
    margin: 14px 0;
    border-radius: 10px;
    background: #fff;
}

/* Loading placeholder shown while a chart is still streaming in, in place
   of the raw <div>/<script> markup until it fully arrives and is parsed. */
#platform-assistant-container .message-content .echarts-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 120px;
    margin: 14px 0;
    padding: 0 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#platform-assistant-container .message-content .echarts-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.75);
    animation: echarts-spin 0.8s linear infinite;
}

#platform-assistant-container .message-content .echarts-loading-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes echarts-spin {
    to { transform: rotate(360deg); }
}

#platform-assistant-container .message-content .inline-code {
    background-color: #f3f4f6;
    color: #dc2626;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.9em;
}

/* Markdown Links */
#platform-assistant-container .message-content a {
    color: #3b82f6;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

#platform-assistant-container .message-content a:hover {
    border-bottom-color: #3b82f6;
}

/* Markdown Strikethrough (GFM) */
#platform-assistant-container .message-content del {
    color: #6b7280;
    text-decoration: line-through;
}

/* Markdown Strong and Emphasis */
#platform-assistant-container .message-content strong {
    font-weight: 600;
    color: #111827;
}

#platform-assistant-container .message-content em {
    font-style: italic;
}

/* ============================================================================
   CRITICAL: Remove ALL browser default margins from marked.js generated HTML
   ============================================================================ */

/* Reset margins on ALL markdown elements (comprehensive approach) */
#platform-assistant-container .message-content p,
#platform-assistant-container .message-content h1,
#platform-assistant-container .message-content h2,
#platform-assistant-container .message-content h3,
#platform-assistant-container .message-content h4,
#platform-assistant-container .message-content h5,
#platform-assistant-container .message-content h6,
#platform-assistant-container .message-content ul,
#platform-assistant-container .message-content ol,
#platform-assistant-container .message-content blockquote,
#platform-assistant-container .message-content pre,
#platform-assistant-container .message-content table {
    margin: 0 !important;
    padding: 0 !important;
}

/* Re-apply controlled spacing only where needed */
#platform-assistant-container .message-content p + p {
    margin-top: 8px !important;
}

/* Add back essential padding for lists */
#platform-assistant-container .message-content ul,
#platform-assistant-container .message-content ol {
    padding-left: 20px !important;
    margin: 6px 0 15px !important;
}

/* Add back essential margin for headings between content */
#platform-assistant-container .message-content h1,
#platform-assistant-container .message-content h2,
#platform-assistant-container .message-content h3,
#platform-assistant-container .message-content h4,
#platform-assistant-container .message-content h5,
#platform-assistant-container .message-content h6 {
    margin: 20px 0 10px 0 !important;
    padding-bottom: 6px !important;
}

/* First heading in message should have no top margin */
#platform-assistant-container .message-content > h1:first-child,
#platform-assistant-container .message-content > h2:first-child,
#platform-assistant-container .message-content > h3:first-child,
#platform-assistant-container .message-content > h4:first-child,
#platform-assistant-container .message-content > h5:first-child,
#platform-assistant-container .message-content > h6:first-child {
    margin-top: 0 !important;
}

/* Add back essential margin and padding for blockquotes and code blocks */
#platform-assistant-container .message-content blockquote,
#platform-assistant-container .message-content pre,
#platform-assistant-container .message-content table {
    margin: 10px 0 15px !important;
}

/* Restore padding stripped by the reset above — code blocks need it for readability */
#platform-assistant-container .message-content pre {
    padding: 52px 16px 16px !important;
}

#platform-assistant-container .message-content blockquote {
    padding: 8px 12px !important;
}

/* Absolute first and last child resets - catch all */
#platform-assistant-container .message-content > *:first-child {
    margin-top: 0 !important;
}

#platform-assistant-container .message-content > *:last-child {
    margin-bottom: 0 !important;
}

/* ===== Assistant Todos Component ===== */
.assistant-todos-container {
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}

.assistant-todos-container.hidden {
    display: none;
}

.assistant-todos-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    gap: 8px;
    background: transparent;
}

.assistant-todos-header:hover {
    background: #f1f5f9;
}

.assistant-todos-chevron {
    font-size: 10px;
    color: #94a3b8;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assistant-todos-chevron::before {
    content: '▶';
    display: block;
    line-height: 1;
}

.assistant-todos-chevron.expanded::before {
    content: '▼';
}

.assistant-todos-title {
    flex: 1;
}

.assistant-todos-badge {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 10px;
}

.assistant-todos-body {
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px 8px;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    padding 0.3s ease;
    opacity: 1;
    scrollbar-width: thin;
    scrollbar-color: #6b7280 #f3f4f6;
}

.assistant-todos-body.hidden {
    max-height: 0;
    padding: 0 12px;
    opacity: 0;
    overflow: hidden;
}

/* Custom scrollbar for Todos body - matches chat messages */
.assistant-todos-body::-webkit-scrollbar {
    width: 8px;
}

.assistant-todos-body::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.assistant-todos-body::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
    border: 2px solid #f8fafc;
}

.assistant-todos-body::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.assistant-todos-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.assistant-todos-list li {
    display: flex;
    align-items: center;
    padding: 6px 4px;
    font-size: 12px;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
    min-height: 32px;
}

.assistant-todos-list li:hover {
    background: rgba(241, 245, 249, 0.5);
}

.assistant-todos-list li:last-child {
    border-bottom: none;
}

.assistant-todo-status {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

/* Completed epic icon - green outlined tick */
.assistant-todo-icon-completed {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #10b981;
    background: transparent;
    color: #10b981;
    font-size: 10px;
    font-weight: 700;
    /* line-height: 1; */
    box-sizing: border-box;
}

/* Error epic icon - red outlined X */
.assistant-todo-icon-error {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #dc3545;
    background: transparent;
    color: #dc3545;
    font-size: 9px;
    font-weight: 700;
    /* line-height: 1; */
    box-sizing: border-box;
}

/* Pending epic icon - orange outlined clock */
.assistant-todo-icon-pending {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #f59e0b;
    background: transparent;
    color: #f59e0b;
    font-size: 9px;
    font-weight: 400;
    /* line-height: 1; */
    box-sizing: border-box;
}

/* In-progress epic icon */
.assistant-todo-icon-in-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #3b82f6;
    font-size: 10px;
}

.assistant-todo-name {
    flex: 1;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    line-height: 1.4;
}

.assistant-todo-name.completed {
    color: #94a3b8;
    font-weight: 400;
}

.assistant-todo-name.pending {
    color: #64748b;
    font-weight: 500;
}

.assistant-todo-name.in-progress {
    color: #3b82f6;
    font-weight: 500;
}

.assistant-todo-name.error {
    color: #dc3545;
    font-weight: 500;
}

.assistant-todo-continue-btn {
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 7px;
    border: 0px solid var(--accent);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.assistant-todo-continue-btn:hover {
    opacity: 0.9;
}

.assistant-todo-continue-btn:active {
    opacity: 0.8;
}

.assistant-todo-continue-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Running epic indicator - spinning circle */
.assistant-todo-running-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: todoSpin 0.8s linear infinite;
    box-sizing: border-box;
}

@keyframes todoSpin {
    to { transform: rotate(360deg); }
}

.assistant-todo-name.running {
    color: var(--accent);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════
   STATUS/EVENT STREAMING — collapsible timeline containers
   (Runtime-authoritative styles are injected by ensureEventSeriesStyles()
   in assistant-loader.js so they always apply regardless of CSS bundling/
   caching; these rules mirror them here for reference/consistency.)
   ══════════════════════════════════════════════════ */
/* .message-event lays its direct children out as a flex ROW (avatar + bubble alignment
   elsewhere in chat). This wrapper is the sole flex child so its own contents (series box,
   divider, Analysing/Executing indicator) stack in a COLUMN instead of side-by-side.
   The left accent border + padding + streaming background live HERE (not on the inner
   .event-series box) so the bar spans the full height of the series box, the divider,
   AND the Analysing/Executing indicator underneath it — matching platform-app-generator's
   streaming look exactly. */
.event-series-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 2px 0 2px 12px;
    border-left: 2px solid transparent;
    transition: border-left-color 0.22s ease, background 0.22s ease;
}

.event-series-content.event-series-streaming {
    border-left-color: #0355A4 !important;
    background: linear-gradient(90deg, rgba(3, 85, 164, 0.03) 0%, transparent 100%) !important;
    border-radius: 2px 8px 8px 2px !important;
}

.event-series-content.event-series-execution.event-series-streaming {
    border-left-color: #f59e0b !important;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.04) 0%, transparent 100%) !important;
}

/* Borderless inline container — no card/box, matches platform-app-generator's
   inline thinking panel (accent bar only while streaming, plain text once done). */
.event-series {
    margin: 4px 0;
}

/* Collapsed summary header — a plain clickable row, no card chrome. Hidden until
   the series is "done"; while streaming only the item list + Analysing indicator show. */
.event-series-header {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 2px;
    margin-left: -2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #6b7280;
    user-select: none;
    transition: background 0.15s ease;
}

.event-series.done .event-series-header {
    display: flex;
    align-items: center;
}

.event-series-header:hover {
    background: rgba(107, 114, 128, 0.08);
    color: #374151;
}

/* Chevron drawn with CSS borders (thin caret, matches the reference icon)
   instead of a filled unicode triangle glyph. */
.event-series-header .event-series-chevron {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    margin-bottom: 4px;
    flex-shrink: 0;
    border-right: 1.5px solid #9ca3af;
    border-bottom: 1.5px solid #9ca3af;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

/* Collapsed = chevron points down (default); expanded = rotated to point up */
.event-series.done:not(.collapsed) .event-series-chevron {
    transform: rotate(225deg);
    margin-bottom: 0px;
}

.event-series.done .event-series-list {
    margin-top: 3px;
    padding-left: 10px;
    border-left: 2px solid #e5e7eb;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease, padding 0.25s ease;
}

.event-series.done.collapsed .event-series-list {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.event-series-list {
    display: flex;
    flex-direction: column;
}

/* Fixed-height streaming viewport (matches app-gen's .thinkingTimeline exactly):
   the container no longer grows unbounded as more statuses arrive — it scrolls
   internally and auto-follows the newest entry. Scrollbar hidden while live. */
.event-series-streaming .event-series-list {
    height: 72px;
    overflow-y: auto;
    overflow-x: hidden;
    overflow-anchor: none;
    padding: 3px 8px 3px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.event-series-streaming .event-series-list::-webkit-scrollbar {
    display: none;
}

/* Expanded history view: a single-line history should size to its own content instead
   of always reserving the full box, matching a natural "shrink to fit, scroll beyond
   that" behaviour. max-height is a generous cap (not a tight one, unlike the 72px
   streaming viewport) — it exists only so expand/collapse has a real numeric endpoint
   to transition between (see the shared max-height transition above); in practice it's
   larger than any real history list, so content still just sizes to fit. Scrollbar
   hidden, matching the live view — still scrollable via mouse wheel/touch/keyboard,
   just no visible scrollbar track.
   overflow-x is explicitly hidden — without it, setting overflow-y:auto alone makes
   browsers silently force overflow-x:auto too, producing an unwanted horizontal scrollbar. */
.event-series.done:not(.collapsed) .event-series-list {
    /* max-height: 1000px; */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.event-series.done:not(.collapsed) .event-series-list::-webkit-scrollbar {
    display: none;
}

/* Each timeline entry: dot + text in a flex row (matches app-gen's .thinkingTimelineItem) */
.event-series-list .event-series-item {
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 2px 4px;
    margin: 0 -4px;
    border-radius: 5px;
    transition: background 0.18s ease;
    animation: event-series-item-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes event-series-item-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Colour-coded dot prefix per event category — mirrors platform-app-generator's
   classifyThinkingLine timeline dots (tool/agent/result/status). */
.event-series-item-dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 5.5px;
    background: #d1d5db;
    transition: background 0.2s ease;
}

.event-series-item-dot-tool   { background: #8b5cf6; }
.event-series-item-dot-agent  { background: #0284c7; }
.event-series-item-dot-result { background: #16a34a; }
.event-series-item-dot-status { background: #94a3b8; }

/* Non-execute (analysis) history is plain text once expanded — no dot bullets.
   Execution history keeps its colour-coded dots (matches the reference). */
.event-series.done:not(.event-series-execution) .event-series-item-dot {
    display: none;
}

/* Muted by default (matches app-gen's .thinkingItemText) */
.event-series-item-text {
    flex: 1;
    min-width: 0;
    color: #6b7280;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.event-series-item-time {
    margin-left: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #9ca3af;
    white-space: nowrap;
}

/* Only the most-recently-streamed line is highlighted — subtle blue/amber tint
   plus stronger text contrast (matches app-gen's .thinkingTimelineItemActive). */
.event-series-item-active {
    background: rgba(3, 85, 164, 0.05);
}

.event-series-item-active .event-series-item-text {
    color: #374151;
    font-weight: 500;
}

/* The current/live line's dot breathes (shrinks/grows) while streaming,
   matching app-gen's .thinkingItemDotActive pulse. */
.event-series-item-active .event-series-item-dot {
    animation: event-series-dot-active-pulse 1.4s ease-in-out infinite;
}

@keyframes event-series-dot-active-pulse {
    0%, 100% { opacity: 0.65; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.25); }
}

.event-series-execution .event-series-item-active {
    background: rgba(245, 158, 11, 0.07);
}

/* Brief collapsing transition before the summary header swaps in, mirrors the
   ~290ms exit animation in platform-app-generator's ThinkingPanel.
   height/max-height here hold the list at the same fixed size the streaming state
   used — .event-series-streaming is removed at the same moment this class is added
   (so the border/background fade can start immediately, see finalizeEventSeriesParts),
   and without this the list would otherwise jump to an unconstrained natural height
   for this brief window, before the real collapse (triggered by .done.collapsed)
   even begins. */
.event-series-collapsing .event-series-list {
    height: 72px;
    max-height: 72px;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.event-series-header .event-series-check {
    color: #0355A4;
}

/* Divider between the streamed item list and the Analysing/Executing indicator */
.event-series-divider {
    border-top: 1px solid rgba(107, 114, 128, 0.18);
    margin: 6px 0 6px 0;
}

/* Animated "Analysing.../Executing..." indicator — sits at the BOTTOM of the
   container, below the streamed items, while streaming is in progress
   (matches app-gen's .thinkingFooterLabel + .thinkingPulseRing + .thinkingBounceDots). */
.event-series-analysing {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: #0355A4;
    letter-spacing: 0.01em;
}

.event-series-analysing-label {
    line-height: 1;
}

.event-series-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0355A4;
    flex-shrink: 0;
    animation: event-series-pulse 1.6s ease-in-out infinite;
}

@keyframes event-series-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.event-series-bounce-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 1px;
}

.event-series-bounce-dots .event-series-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #0355A4;
    animation: event-series-dot-bounce 1.2s ease-in-out infinite;
}

.event-series-bounce-dots .event-series-dot:nth-child(1) { animation-delay: 0s; }
.event-series-bounce-dots .event-series-dot:nth-child(2) { animation-delay: 0.2s; }
.event-series-bounce-dots .event-series-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes event-series-dot-bounce {
    0%, 60%, 100% { transform: translateY(0) scale(0.9); opacity: 0.4; }
    30% { transform: translateY(-3px) scale(1.1); opacity: 1; }
}

/* Execution (amber) variant — visually distinguishes tool-execute events from analysis events */
.event-series-analysing-execution {
    color: #b45309;
}

.event-series-analysing-execution .event-series-pulse {
    background: #f59e0b;
}

.event-series-analysing-execution .event-series-dot {
    background: #f59e0b;
}

.event-series-execution .event-series-header .event-series-check {
    color: #b45309;
}

/* Execution summary label: one flowing sentence ("⚡ Execution: tool completed in Xs")
   that wraps naturally at the chat width — matches platform-app-generator's single
   <span> footer label exactly (icon + text + chevron all inline). */
.event-series-header-label {
    flex: unset;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.event-series-execution .event-series-header {
    align-items: flex-start;
}

.event-series-execution .event-series-header .event-series-chevron {
    margin-top: 2px;
}