/* MCP Tool Message Formatting */

/* Container for tool messages */
.tool-message {
    background-color: var(--tool-msg-bg, #f8f9fa);
    border-left: 4px solid var(--tool-msg-border, #6c757d); 
    padding: var(--custom-message-padding, 10px) 8px;
    margin: var(--custom-message-margin, 10px) 0;
    border-radius: var(--custom-corner-radius, 4px);
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: var(--body-font-family);
    line-height: var(--custom-line-height, 1.6);
}

/* Dark theme support */
.dark-theme .tool-message {
    background-color: var(--tool-msg-bg, #2d3033);
    color: var(--tool-msg-text, #e0e0e0);
}

/* Tool message header with tool name */
.tool-message-header {
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.95em;
    color: var(--tool-header-color, #495057);
    border-bottom: 1px solid var(--tool-header-border, rgba(108, 117, 125, 0.3));
    padding-bottom: 4px;
    display: flex;
    align-items: center;
}

.dark-theme .tool-message-header {
    color: var(--tool-header-color, #adb5bd);
    border-bottom-color: var(--tool-header-border, rgba(173, 181, 189, 0.3));
}

/* Tool icon */
.tool-icon {
    margin-right: 6px;
    width: 16px;
    height: 16px;
}

/* Toggle arrows for collapsible tools */
.toggle-icon {
    margin-left: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* Tool content area */
.tool-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.collapsed .tool-content {
    max-height: 0;
    transition: max-height 0.2s ease;
}

/* Tool result formatting */
.tool-result {
    font-family: var(--code-font-family);
    font-size: 0.9em;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Citation formatting */
.tool-citation {
    font-style: italic;
    font-size: 0.9em;
    color: var(--citation-color, #6c757d);
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--citation-border, rgba(108, 117, 125, 0.3));
}

.dark-theme .tool-citation {
    color: var(--citation-color, #adb5bd);
    border-top-color: var(--citation-border, rgba(173, 181, 189, 0.3));
}

/* AI response that references tool output */
.ai-tool-reference {
    background-color: var(--ai-reference-bg, rgba(13, 110, 253, 0.08));
    border-radius: 4px;
    padding: 2px 4px;
    font-weight: 500;
}

.dark-theme .ai-tool-reference {
    background-color: var(--ai-reference-bg, rgba(13, 110, 253, 0.15));
}

/* Indent tools that are part of a chain or sequence */
.tool-chain-item {
    margin-left: 20px;
    position: relative;
}

.tool-chain-item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: -10px;
    height: calc(100% + 10px);
    width: 2px;
    background-color: var(--chain-line, rgba(108, 117, 125, 0.3));
}

.dark-theme .tool-chain-item::before {
    background-color: var(--chain-line, rgba(173, 181, 189, 0.3));
}

/* Copy button for tool outputs */
.copy-tool-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--button-bg);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: var(--button-text-color);
    cursor: pointer;
    font-size: ${buttonFontSize}px;
    padding: 4px;
    z-index: 10;
    opacity: 0.9;
}

.copy-tool-button:hover {
    background: var(--button-hover-bg);
    opacity: 1;
}

/* Tool type badges */
.tool-badge {
    display: inline-block;
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    background-color: var(--badge-bg, #e9ecef);
    color: var(--badge-text, #495057);
}

.dark-theme .tool-badge {
    background-color: var(--badge-bg, #343a40);
    color: var(--badge-text, #e9ecef);
}

/* Different badge types */
.badge-tool {
    background-color: var(--badge-tool-bg, #6c757d);
    color: var(--badge-tool-text, white);
}

.badge-function {
    background-color: var(--badge-function-bg, #0d6efd);
    color: var(--badge-function-text, white);
}

.badge-data {
    background-color: var(--badge-data-bg, #20c997);
    color: var(--badge-data-text, white);
}

.badge-log {
    background-color: var(--badge-log-bg, #6c757d);
    color: var(--badge-log-text, white);
}

/* Thinking/reasoning section */
.thinking-section {
    background-color: var(--thinking-bg, #fff3cd);
    border-left: 4px solid var(--thinking-border, #ffc107);
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    font-style: italic;
}

.dark-theme .thinking-section {
    background-color: var(--thinking-bg, #332701);
    color: var(--thinking-text, #e0e0e0);
}

/* Variable colors based on theme */
:root {
    --tool-msg-bg: #f8f9fa;
    --tool-msg-border: #6c757d;
    --tool-msg-text: #212529;
    --tool-header-color: #495057;
    --tool-header-border: rgba(108, 117, 125, 0.3);
    --citation-color: #6c757d;
    --citation-border: rgba(108, 117, 125, 0.3);
    --ai-reference-bg: rgba(13, 110, 253, 0.08);
    --chain-line: rgba(108, 117, 125, 0.3);
    --badge-bg: #e9ecef;
    --badge-text: #495057;
    --thinking-bg: #fff3cd;
    --thinking-border: #ffc107;
    --thinking-text: #212529;
}

.dark-theme {
    --tool-msg-bg: #2d3033;
    --tool-msg-border: #6c757d;
    --tool-msg-text: #e0e0e0;
    --tool-header-color: #adb5bd;
    --tool-header-border: rgba(173, 181, 189, 0.3);
    --citation-color: #adb5bd;
    --citation-border: rgba(173, 181, 189, 0.3);
    --ai-reference-bg: rgba(13, 110, 253, 0.15);
    --chain-line: rgba(173, 181, 189, 0.3);
    --badge-bg: #343a40;
    --badge-text: #e9ecef;
    --thinking-bg: #332701;
    --thinking-border: #ffc107;
    --thinking-text: #e0e0e0;
}
