/**
 * Tool Call Component Styles
 * 
 * Shows tool execution with state (pending/success/fail) and
 * expandable details for inputs/outputs.
 */

.tool-call {
    font-size: 0.8125rem;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    background: var(--bg-page);
    overflow: hidden;
    margin: 0.25rem 0;
}

/* State-based border colors */
.tool-call--pending {
    border-color: var(--status-pending-border);
    background: var(--status-pending-bg);
}

.tool-call--success {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
}

.tool-call--fail {
    border-color: var(--status-fail-border);
    background: var(--status-fail-bg);
}

/* Summary row (always visible) */
.tool-call__summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    list-style: none;
    list-style-type: none;
    user-select: none;
    transition: background-color 0.15s;
}

/* Hide native disclosure markers across all browsers */
.tool-call__summary::-webkit-details-marker,
.tool-call__summary::marker {
    display: none !important;
    content: "" !important;
    font-size: 0;
    width: 0;
    height: 0;
}

.tool-call > summary {
    list-style: none;
}

.tool-call > summary::before,
.tool-call > summary::after {
    display: none;
}

.tool-call__summary:hover {
    background: rgba(0, 0, 0, 0.03);
}

.tool-call--pending .tool-call__summary:hover {
    background: rgba(86, 171, 189, 0.12);
}

/* Icon wrapper with resource + operation badge */
.tool-call__icon-wrapper {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.tool-call__resource-icon {
    width: 24px;
    height: 24px;
    color: var(--gray-600);
    filter: none;
}

/* Apply color filter based on status */
.tool-call--pending .tool-call__resource-icon {
    color: var(--status-pending);
    filter: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(1234%) hue-rotate(213deg) brightness(97%) contrast(92%);
}

.tool-call--success .tool-call__resource-icon {
    color: var(--status-success);
    filter: brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(451%) hue-rotate(100deg) brightness(93%) contrast(91%);
}

.tool-call--fail .tool-call__resource-icon {
    color: var(--status-fail);
    filter: brightness(0) saturate(100%) invert(22%) sepia(93%) saturate(5252%) hue-rotate(355deg) brightness(93%) contrast(90%);
}

/* Operation badge - small circle in bottom-right */
.tool-call__operation-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    background: var(--bg-page);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xs);
}

.tool-call__operation-icon {
    width: 10px;
    height: 10px;
    color: var(--gray-500);
    filter: brightness(0) saturate(100%) invert(44%) sepia(10%) saturate(686%) hue-rotate(176deg) brightness(96%) contrast(88%);
}

/* Operation badge colors based on status */
.tool-call--pending .tool-call__operation-badge {
    background: var(--status-pending-bg);
}

.tool-call--pending .tool-call__operation-icon {
    filter: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(1234%) hue-rotate(213deg) brightness(97%) contrast(92%);
}

.tool-call--success .tool-call__operation-badge {
    background: var(--status-success-bg);
}

.tool-call--success .tool-call__operation-icon {
    filter: brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(451%) hue-rotate(100deg) brightness(93%) contrast(91%);
}

.tool-call--fail .tool-call__operation-badge {
    background: var(--status-fail-bg);
}

.tool-call--fail .tool-call__operation-icon {
    filter: brightness(0) saturate(100%) invert(22%) sepia(93%) saturate(5252%) hue-rotate(355deg) brightness(93%) contrast(90%);
}

/* Tool name */
.tool-call__name {
    font-weight: 600;
    color: var(--gray-700);
    font-family: var(--font-mono);
}

/* Brief summary */
.tool-call__brief {
    color: var(--gray-500);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Status indicator wrapper */
.tool-call__status-indicator {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* Chevron */
.tool-call__chevron {
    color: var(--gray-400);
    flex-shrink: 0;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
}

.tool-call[open] .tool-call__chevron {
    transform: rotate(180deg);
}

/* Details section (expanded content) */
.tool-call__details {
    padding: 0.75rem;
    border-top: 1px solid var(--border-default);
    background: var(--gray-50);
}

.tool-call--pending .tool-call__details {
    background: var(--status-pending-bg);
    border-top-color: var(--status-pending-border);
}

.tool-call--success .tool-call__details {
    background: var(--status-success-bg);
    border-top-color: var(--status-success-border);
}

.tool-call--fail .tool-call__details {
    background: var(--status-fail-bg);
    border-top-color: var(--status-fail-border);
}

/* Section within details */
.tool-call__section {
    margin-bottom: 0.75rem;
}

.tool-call__section:last-child {
    margin-bottom: 0;
}

/* Labels */
.tool-call__label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}

.tool-call__section--error .tool-call__label {
    color: var(--status-fail);
}

/* Content container */
.tool-call__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Field layout */
.tool-call__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tool-call__field-key {
    font-weight: 500;
    color: var(--gray-500);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tool-call__field-value {
    color: var(--gray-700);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Field list styling (for foods, nutrients, etc.) */
.tool-call__field-list {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tool-call__field-list li {
    color: var(--gray-700);
    font-size: 0.8125rem;
    list-style: none;
    list-style-type: none;
    padding: 0.375rem 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    border: 1px solid var(--border-default);
}

.tool-call__field-list li::marker {
    content: none;
    display: none;
}

/* Success state styling for result list items */
.tool-call--success .tool-call__field-list li {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--status-success-border);
}

/* Legacy data display (key-value pairs) - kept for backwards compatibility */
.tool-call__data {
    margin: 0;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow: hidden;
}

.tool-call__row {
    display: flex;
    align-items: baseline;
    padding: 0.375rem 0.625rem;
    border-bottom: 1px solid var(--gray-100);
}

.tool-call__row:last-child {
    border-bottom: none;
}

.tool-call__key {
    font-weight: 500;
    color: var(--gray-500);
    font-size: 0.75rem;
    min-width: 100px;
    flex-shrink: 0;
}

.tool-call__value {
    color: var(--gray-700);
    font-size: 0.8125rem;
    margin: 0;
    word-break: break-word;
}

/* Legacy list styling */
.tool-call__list {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
}

.tool-call__list li {
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
    list-style: none;
    list-style-type: none;
}

.tool-call__list li::marker {
    content: none;
    display: none;
}

.tool-call__list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tool-call__list li:first-child {
    padding-top: 0;
}

/* Error message */
.tool-call__error-msg {
    background: var(--status-fail-bg);
    border: 1px solid var(--status-fail-border);
    border-radius: 6px;
    padding: 0.5rem 0.625rem;
    color: var(--status-fail);
    font-size: 0.8125rem;
}

/* Pending message with spinner */
.tool-call__pending-msg {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--status-pending);
    padding: 0.25rem 0;
}