/* Copy Input Clipboard – Styles */
.cic-box {
	--cic-bg: #ffffff;
	--cic-field: #f4f4f5;
	--cic-border: #d4d4d8;
	--cic-text: #18181b;
	--cic-accent: #2563eb;
	--cic-ok: #16a34a;
	--cic-muted: #71717a;

	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 420px;
	padding: 8px;
	background: var(--cic-bg);
	border: 1px solid var(--cic-border);
	border-radius: 12px;
	font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
	box-sizing: border-box;
}

.cic-box input.cic-input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--cic-field);
	font-size: 15px;
	line-height: 1.3;
	color: var(--cic-text) !important;
	outline: none;
	box-shadow: none;
	transition: border-color .15s ease, background .15s ease;
}
/* Platzhalter in der gewählten Textfarbe (leicht transparent) */
.cic-box input.cic-input::placeholder {
	color: var(--cic-text);
	opacity: .55;
}
.cic-box .cic-input:focus {
	border-color: var(--cic-accent);
}

.cic-action {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--cic-muted);
	cursor: pointer;
	box-shadow: none;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
.cic-action:hover { background: rgba(0, 0, 0, .06); color: var(--cic-accent); }
.cic-action:active { transform: scale(.92); }
.cic-action.is-ok { color: var(--cic-ok); }

.cic-action svg { width: 19px; height: 19px; }

/* Klicks immer auf den Button leiten (nicht auf das SVG) -> Kopieren/Speichern robust */
.cic-box svg { pointer-events: none; }

/* Icon-Wechsel bei Erfolg */
.cic-action .cic-i-alt { display: none; }
.cic-action.is-ok .cic-i-main { display: none; }
.cic-action.is-ok .cic-i-alt  { display: block; }

/* Editor-Vorschau: deaktiviertes Feld trotzdem lesbar darstellen */
.editor-styles-wrapper .cic-box .cic-input[readonly] {
	background: var(--cic-field);
	cursor: default;
}
.editor-styles-wrapper .cic-action { pointer-events: none; }

/* ----- Größen-Varianten ----- */
.cic-box.cic-size-small  { max-width: 320px; padding: 6px; gap: 6px; }
.cic-box.cic-size-small  .cic-input  { padding: 6px 9px; font-size: 13px; }
.cic-box.cic-size-small  .cic-action { width: 32px; height: 32px; }
.cic-box.cic-size-small  .cic-action svg { width: 16px; height: 16px; }

.cic-box.cic-size-medium { max-width: 420px; }   /* Standard */

.cic-box.cic-size-large  { max-width: 520px; padding: 10px; gap: 10px; }
.cic-box.cic-size-large  .cic-input  { padding: 12px 15px; font-size: 17px; }
.cic-box.cic-size-large  .cic-action { width: 44px; height: 44px; }
.cic-box.cic-size-large  .cic-action svg { width: 22px; height: 22px; }