/* API Key Styling - No masking by default, applied via JS when needed */
#api-key {
	font-family: monospace;
	color: #666;
}

/* Image API Key Styling - No masking by default */
#image-api-key {
	font-family: monospace;
	color: #666;
}

/* Image Endpoint Styling - No masking, keep visible */
#image-endpoint {
	font-family: monospace;
	color: #666;
}

/* API Endpoint Styling - No masking, keep visible */
#api-endpoint {
	font-family: monospace;
}

/* API Key Form Styles and Settings Styles */
#apikeydiv,
#settingsdiv {
	display: none;
	top: 0;
	bottom: calc(var(--bottom-bar-height) + var(--browser-bottom-inset));
	left: 0;
	position: fixed;
	z-index: 10000;
	width: 100%;
	height: auto;
	animation: fadeInFromNone 0.2s ease-out;
	overflow-y: auto;
}

.custom-api-box {
	background: rgb(30 30 35 / 70%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 0;
	padding: 20px;
	position: relative;
	min-height: 100%;
	z-index: 122;
	font-size: 10pt;
	text-align: left;
	color: white;
	height: auto;
	padding-bottom: 24px;
	padding-left: 0;
	padding-right: 0;
}

.custom-api-box a {
	color: white;
}

.close-button {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s;
	padding: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-button:hover {
	background-color: var(--chat-background--textarea);
}

.form-group {
	margin-bottom: 9px;
}

.custom-api-box h3 {
	margin-top: 0;
	color: white;
	border-bottom: 1px solid var(--chat-background--textarea);
	padding-bottom: 10px;
}

.form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 10pt;
}

/* Checkbox label styling for flexbox alignment */
.checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: normal;
	margin-bottom: 0;
}

.checkbox-label:not(:last-child) {
	margin-bottom: 8px;
}

.api-input {
	width: 100%;
	padding: 7px;
	border-radius: 4px;
	font-size: 14px;
	transition: border-color 0.3s;
	background-color: white;
	border: 0;
	color: #2a4cad;
	font-weight: 400;
}

/* Style for masked text input - handled above */

.api-input:focus {
	border-color: #2a4cad;
	outline: none;
}

.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 5px;
}

.radio-option {
	display: flex;
	align-items: center;
	background-color: white;
	border-radius: 4px;
	padding: 4px 4px;
	transition: all 0.2s;
	cursor: pointer;
	color: #2a4cad;
}

.radio-option input[type="radio"] {
	margin-right: 6px;
}

.radio-option input[type="radio"]:checked+label {
	/* color: #2a4cad; */
	font-weight: bold;
}

.radio-option label {
	cursor: pointer;
}

.button-row {
	/* display: flex; */
	gap: 10px;
	/* margin-top: 20px; */
}

.button-row.save-btn {
	/* margin-top: -10px; */
}

.btn {
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: bold;
}

.primary-btn {
	/* background-color: white; */
	color: #2a4cad;
	font-weight: bold;
	display: inline-block;
	/* margin-bottom: 14px; */
	max-width: 100%;
}

.openrouter-connect-btn {
	align-items: center;
	display: flex;
	font-size: 15px;
	gap: 10px;
	justify-content: center;
	min-height: 44px;
	width: 100%;
}

.openrouter-connect-icon {
	height: 20px;
	width: 20px;
	filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(182deg) brightness(95%) contrast(88%);
}

#settingsdiv select.btn.primary-btn {
	background-color: #fff !important;
	color: #2a4cad !important;
	font-size: 14px;
	font-weight: 400 !important;
	padding: 7px;
	border-radius: 4px;
	border: 0;
	font-family: inherit;
	appearance: auto;
	-webkit-appearance: menulist;
}

#settingsdiv select.api-input {
	background-color: #fff !important;
	color: #2a4cad !important;
	font-size: 14px;
	font-weight: 400 !important;
	border: 0;
	font-family: inherit;
	appearance: auto;
	-webkit-appearance: menulist;
	margin-bottom: 10px;
}

#settingsdiv select.btn.primary-btn option {
	background-color: #fff !important;
	color: #2a4cad !important;
	font-weight: 400 !important;
}

#settingsdiv select.api-input option {
	background-color: #fff !important;
	color: #2a4cad !important;
	font-weight: 400 !important;
}

#model-select {
	width: 100%;
}
#access-mode-select {
	width: 100%;
}
#model-select-writing {
	width: 100%;
}
#model-select-translate {
	width: 100%;
}
#model-select-apply {
	width: 100%;
}
#model-select-image {
	width: 100%;
}
#model-select-ocr {
	width: 100%;
}
#model-select-transcript {
	width: 100%;
}

.secondary-btn {
	background-color: white;
	color: #2a4cad;
}

.api-info {
	/* padding-top: 15px; */
	font-size: 13px;
}

#api-key-status {
	font-weight: bold;
}

#license-key-status {
	font-weight: bold;
}

/* Settings Section Styling */
.settings-section h4 {
	margin-top: 0;
	margin-bottom: 15px;
	color: #fff;
	font-size: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 8px;
}

.settings-section h5 {
	margin-top: 20px;
	margin-bottom: 10px;
	color: #ccc;
	font-size: 14px;
}

.qr-placeholder {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 500px;
	min-width: min(100%, 500px);
	height: auto;
	margin: 0;
}

#close-settings {
	margin-top: 15px;
}

/* Custom login message styling */
#custom-login-message {
	color: white !important;
	font-size: small;
	margin-top: 5px;
	width: 100%;
}

/* Custom API message styling */
#custom-api-message {
	font-size: small;
	margin-top: 5px;
	width: 100%;
}

/* API key status styling */
#api-key-status.success {
	color: yellow;
}

#license-key-status.success {
	color: yellow;
}

#license-key-status.invalid {
	color: #ff9a9a;
}

#tokens-input {
	color: crimson;
}

#tokens-output {
	color: crimson;
}

.custom-prompts-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
	margin-bottom: 14px;
}

.custom-prompt-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.custom-prompt-main {
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.custom-prompt-label {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}

.custom-prompt-text {
	color: rgba(255, 255, 255, 0.82);
	font-size: 13px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
}

.custom-prompt-delete {
	flex: 0 0 auto;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	width: 32px;
	height: 32px;
	cursor: pointer;
	font-size: 14px;
}

.custom-prompt-delete:hover {
	background: rgba(255, 77, 77, 0.35);
}

.custom-prompts-empty {
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
}