/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

/* Remove the outline and change border color on focus instead */
.workbench-hover-container.locked:has(.chat-context-usage-details) .monaco-hover.workbench-hover {
	outline: none;
}
.workbench-hover-container:focus-within.locked:has(.chat-context-usage-details) .monaco-hover.workbench-hover {
	outline: none;
	border-color: var(--vscode-focusBorder);
}

.chat-context-usage-details {
	display: flex;
	flex-direction: column;
	padding: 4px 0;
	min-width: 200px;
}

.chat-context-usage-details:focus {
	outline: none;
}

/* Using same structure as ChatUsageWidget quota items */
.chat-context-usage-details .quota-item {
	margin-bottom: 4px;
}

.chat-context-usage-details .quota-item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2px;
}

.chat-context-usage-details .quota-item-label {
	color: var(--vscode-foreground);
}

.chat-context-usage-details .quota-item-value {
	color: var(--vscode-descriptionForeground);
}

.chat-context-usage-details .token-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 2px;
}

.chat-context-usage-details .token-count-label {
	font-size: 12px;
	color: var(--vscode-descriptionForeground);
}

/* Progress bar - matching chat usage implementation */
.chat-context-usage-details .quota-item .quota-bar {
	width: 100%;
	height: 4px;
	background-color: var(--vscode-gauge-background);
	border-radius: 4px;
	border: 1px solid var(--vscode-gauge-border);
	margin: 2px 0;
}

.chat-context-usage-details .quota-item .quota-bar .quota-bit {
	height: 100%;
	background-color: var(--vscode-gauge-foreground);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.chat-context-usage-details .quota-item.warning .quota-bar {
	background-color: var(--vscode-gauge-warningBackground);
}

.chat-context-usage-details .quota-item.warning .quota-bar .quota-bit {
	background-color: var(--vscode-gauge-warningForeground);
}

.chat-context-usage-details .quota-item.error .quota-bar {
	background-color: var(--vscode-gauge-errorBackground);
}

.chat-context-usage-details .quota-item.error .quota-bar .quota-bit {
	background-color: var(--vscode-gauge-errorForeground);
}

.chat-context-usage-details .warning-message {
	font-size: 12px;
	color: var(--vscode-descriptionForeground);
	margin-bottom: 4px;
}

/* Token details breakdown */
.chat-context-usage-details .token-details-container {
	margin-top: 4px;
}

.chat-context-usage-details .token-category {
	margin-bottom: 4px;
}

.chat-context-usage-details .token-category-header {
	font-weight: 600;
	color: var(--vscode-foreground);
	margin-bottom: 2px;
}

.chat-context-usage-details .token-detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 8px;
}

.chat-context-usage-details .token-detail-label {
	color: var(--vscode-foreground);
}

.chat-context-usage-details .token-detail-value {
	color: var(--vscode-descriptionForeground);
}

.chat-context-usage-details .actions-section .separator {
	border-top: 1px solid var(--vscode-editorHoverWidget-border);
	margin: 4px 0;
}

.chat-context-usage-details .actions-section .actions-header {
	font-weight: 600;
	color: var(--vscode-foreground);
	margin-bottom: 4px;
}

.chat-context-usage-details .actions-section .button-bar-container {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.chat-context-usage-details .actions-section .button-bar-container .monaco-button-bar {
	flex-direction: column;
	gap: 4px;
}

.chat-context-usage-details .actions-section .button-bar-container .monaco-button {
	width: 100%;
	justify-content: center;
}
