/* ==========================================================================
   Mail To Form — modal.css
   Styled to resemble a modern email compose window (Gmail-inspired).
   ========================================================================== */

/* ── Scope wrapper & custom properties ──────────────────────────────────── */
/* .mtf-scope is a display:contents wrapper that acts as the root for all     */
/* custom property definitions below. This scopes colours to plugin elements  */
/* only, so theme variables never interfere.                                   */
.mtf-scope {
	/* Transparent to layout — both fixed children break out of flow anyway */
	display: contents;

	/* Colour tokens — overridden per-site via inline CSS from saved options */
	--mtf-primary:         #1a73e8;
	--mtf-primary-dark:    #1558cc;
	--mtf-primary-darker:  #1046b0;
	--mtf-secondary:        #34a853;
	--mtf-secondary-dark:   #2d9147;
	--mtf-secondary-darker: #26803f;
	--mtf-red:              #ea4335;
	--mtf-text:            #202124;
	--mtf-text-muted:      #5f6368;
	--mtf-border:          #e0e0e0;
	--mtf-bg:              #ffffff;
	--mtf-bg-field:        #f8f9fa;
	--mtf-shadow:          0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
	--mtf-radius:          8px;
	--mtf-font:            'Google Sans', Roboto, Arial, sans-serif;
	--mtf-transition:      0.18s ease;
	--mtf-z:               99999;
}

/* ── Scoped CSS reset ────────────────────────────────────────────────────── */
/* Prevent theme margin/padding/border resets and font overrides from          */
/* bleeding into any element inside the plugin's modal or picker.              */
.mtf-modal *,
.mtf-modal *::before,
.mtf-modal *::after,
.mtf-picker *,
.mtf-picker *::before,
.mtf-picker *::after {
	box-sizing: border-box;
}

.mtf-modal input,
.mtf-modal textarea,
.mtf-modal button,
.mtf-modal select,
.mtf-modal label,
.mtf-picker input,
.mtf-picker button,
.mtf-picker label {
	font-family:        var(--mtf-font);
	font-size:          14px;
	line-height:        1.5;
	-webkit-appearance: none;
	appearance:         none;
	border-radius:      0;
	border:             none;
	background:         none;
	color:              inherit;
	margin:             0 !important;
	padding:            0;
}

.mtf-modal label {
	margin-right: 20px !important;
}

/* ── Explicit type-selector overrides ───────────────────────────────────── */
/* Themes frequently target input[type="text"] etc. with higher-specificity   */
/* rules. Matching those selectors inside our scope with !important ensures   */
/* plugin styles always win regardless of theme load order.                   */
.mtf-modal input[type="text"],
.mtf-modal input[type="email"],
.mtf-modal input[type="tel"],
.mtf-modal input[type="url"],
.mtf-modal input[type="number"],
.mtf-modal input[type="date"],
.mtf-modal input[type="search"],
.mtf-modal input[type="password"],
.mtf-modal textarea,
.mtf-modal select {
	font-family:        var(--mtf-font) !important;
	font-size:          14px !important;
	line-height:        1.5 !important;
	color:              var(--mtf-text) !important;
	background:         transparent !important;
	background-color:   transparent !important;
	background-image:   none !important;
	border:             none !important;
	border-radius:      0 !important;
	box-shadow:         none !important;
	outline:            none !important;
	-webkit-appearance: none !important;
	appearance:         none !important;
	margin:             0 !important;
	padding:            0 !important;
	width:              auto !important;
	height:             auto !important;
	max-width:          none !important;
	max-height:         none !important;
	min-width:          0 !important;
	display:            inline !important;
	min-height: 		  3.5rem !important;
}

/* Restore the layout properties our field classes actually need */
.mtf-modal .mtf-field-input,
.mtf-modal .mtf-textarea {
	display:  block !important;
	width:    100% !important;
	padding:  14px 0 !important;
	flex:     1 !important;
}

.mtf-modal .mtf-textarea {
	padding:    16px 0 12px !important;
	min-height: 200px !important;
	resize:     none !important;
}

/* ── Button type-selector overrides ─────────────────────────────────────── */
/* Themes often target button[type="submit"], input[type="submit"], and .btn  */
/* with high-specificity rules. Strip those back to a clean base inside our   */
/* modal scope, then let the .mtf-btn classes apply the real styles.          */
.mtf-modal button,
.mtf-modal button[type="submit"],
.mtf-modal button[type="button"],
.mtf-modal button[type="reset"],
.mtf-modal input[type="submit"],
.mtf-modal input[type="button"],
.mtf-modal input[type="reset"],
.mtf-modal .btn {
	display:            inline-flex !important;
	align-items:        center !important;
	justify-content:    center !important;
	font-family:        var(--mtf-font) !important;
	font-size:          14px !important;
	font-weight:        400 !important;
	line-height:        1.5 !important;
	border:             none !important;
	border-radius:      0 !important;
	box-shadow:         none !important;
	margin:             0 !important;
	width:              auto !important;
	height:             auto !important;
	text-decoration:    none !important;
	text-transform:     none !important;
	letter-spacing:     normal !important;
	cursor:             pointer !important;
	-webkit-appearance: none !important;
	appearance:         none !important;
	opacity:            1 !important;
}

/* Restore .mtf-btn base styles */
.mtf-modal .mtf-btn {
	font-weight:   500 !important;
	padding:       8px 20px !important;
	border-radius: 4px !important;
	gap:           6px !important;
	white-space:   nowrap !important;
	transition:    background var(--mtf-transition), box-shadow var(--mtf-transition), opacity var(--mtf-transition) !important;
}

/* Restore .mtf-btn-primary (send button) */
.mtf-modal .mtf-btn-primary {
	background:   var(--mtf-secondary) !important;
	color:        #fff !important;
	box-shadow:   0 1px 3px rgba(0,0,0,.18) !important;
}

.mtf-modal .mtf-btn-primary:hover {
	background:  var(--mtf-secondary-dark) !important;
	box-shadow:  0 2px 6px rgba(0,0,0,.22) !important;
}

.mtf-modal .mtf-btn-primary:active {
	background:  var(--mtf-secondary-darker) !important;
}

.mtf-modal .mtf-btn-primary:disabled {
	background:  color-mix(in srgb, var(--mtf-secondary) 45%, white) !important;
	cursor:      not-allowed !important;
	box-shadow:  none !important;
}

/* Restore .mtf-btn-ghost (save draft button) */
.mtf-modal .mtf-btn-ghost {
	font-size:    13px !important;
	color:        var(--mtf-text-muted) !important;
	border:       1px solid transparent !important;
	border-radius: 4px !important;
}

.mtf-modal .mtf-btn-ghost:hover {
	background:    var(--mtf-bg-field) !important;
	border-color:  var(--mtf-border) !important;
	color:         var(--mtf-text) !important;
}

/* Restore .mtf-icon-btn — shared layout */
.mtf-modal .mtf-icon-btn {
	width:        32px !important;
	height:       32px !important;
	padding:      0 !important;
	border-radius: 50% !important;
}

/* Header icon buttons (close) — white on dark primary */
.mtf-modal .mtf-modal-header .mtf-icon-btn {
	color:        rgba(255,255,255,.85) !important;
}

.mtf-modal .mtf-modal-header .mtf-icon-btn:hover {
	background:  rgba(255,255,255,.18) !important;
	color:       #fff !important;
}

.mtf-modal .mtf-modal-header .mtf-icon-btn:focus-visible {
	outline:        2px solid rgba(255,255,255,.6) !important;
	outline-offset: 1px !important;
}

/* Footer icon buttons (attach) — muted on light background */
.mtf-modal .mtf-modal-footer .mtf-icon-btn {
	color: var(--mtf-primary) !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	padding: 0 !important;
}

.mtf-modal .mtf-modal-footer .mtf-icon-btn:hover {
	background: rgba(0,0,0,.06) !important;
	color:      var(--mtf-primary-dark) !important;
}

.mtf-modal .mtf-modal-footer .mtf-icon-btn:focus-visible {
	outline:        2px solid var(--mtf-primary) !important;
	outline-offset: 1px !important;
}



.mtf-modal p,
.mtf-modal ul,
.mtf-modal ol,
.mtf-modal li,
.mtf-modal h1,
.mtf-modal h2,
.mtf-modal h3,
.mtf-modal h4 {
	margin:      0;
	padding:     0;
	font-size:   inherit;
	font-weight: inherit;
	line-height: inherit;
	color:       inherit;
	list-style:  none;
}

.mtf-modal a,
.mtf-picker a {
	color:           inherit;
	text-decoration: none;
}

.mtf-modal img,
.mtf-picker img {
	max-width: 100%;
	height:    auto;
	display:   block;
}

/* ── Overlay ────────────────────────────────────────────────────────────── */
.mtf-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: var(--mtf-z);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mtf-transition), visibility var(--mtf-transition);
	backdrop-filter: blur(2px);
}

.mtf-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* ── Modal card ─────────────────────────────────────────────────────────── */
.mtf-modal {
	position: relative;
	width: 100%;
	max-width: 580px;
	min-height: 320px;
	background: var(--mtf-bg);
	border-radius: var(--mtf-radius);
	box-shadow: var(--mtf-shadow);
	display: flex;
	flex-direction: column;
	max-height: 90vh;
	overflow: hidden;
	font-family: var(--mtf-font);
	transform: translateY(12px) scale(0.98);
	transition: transform var(--mtf-transition);
	margin: 16px;
}

.mtf-overlay.is-open .mtf-modal {
	transform: translateY(0) scale(1);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.mtf-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 14px 20px;
	background: var(--mtf-primary);
	border-radius: var(--mtf-radius) var(--mtf-radius) 0 0;
	flex-shrink: 0;
}

.mtf-modal-title {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: .01em;
}

.mtf-header-actions {
	display: flex;
	gap: 4px;
}

/* ── Icon buttons ───────────────────────────────────────────────────────── */
.mtf-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: rgba(255,255,255,.85);
	transition: background var(--mtf-transition), color var(--mtf-transition);
	padding: 0;
	flex-shrink: 0;
}

.mtf-icon-btn:hover {
	background: rgba(255,255,255,.18);
	color: #fff;
}

.mtf-icon-btn:focus-visible {
	outline: 2px solid rgba(255,255,255,.6);
	outline-offset: 1px;
}

/* Discard button uses the non-header icon style */
.mtf-discard-btn {
	color: var(--mtf-text-muted);
	width: 32px;
	height: 32px;
	padding: 0 !important;
    border-radius: 50% !important;
}

.mtf-discard-btn svg{
	width: 20px;
	height: 20px;
}

.mtf-discard-btn:hover {
	background: rgba(234,67,53,.1);
	color: var(--mtf-red);
}

/* ── Form fields ────────────────────────────────────────────────────────── */
.mtf-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.mtf-field-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--mtf-border);
	padding: 0 20px;
	position: relative;
	transition: border-bottom-color var(--mtf-transition);
}

.mtf-field-row:focus-within {
	border-bottom-color: var(--mtf-primary);
}

.mtf-field-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--mtf-text-muted);
	min-width: 62px;
	flex-shrink: 0;
	padding: 14px 14px 14px 0;
	pointer-events: none;
	user-select: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mtf-field-input {
	flex: 1;
	font-family: var(--mtf-font);
	font-size: 14px;
	color: var(--mtf-text);
	background: transparent;
	border: none !important;
	outline: none;
	padding: 14px 0;
	min-width: 0;
}

/* Read-only "To" field */
.mtf-field-to .mtf-field-input {
	color: var(--mtf-text);
	font-weight: 500;
	cursor: default;
	border: none;
}

.mtf-field-input::placeholder {
	color: #bdc1c6;
}

/* Inline field error */
.mtf-field-error {
	display: block;
	width: 100%;
	font-size: 11px;
	color: var(--mtf-red);
	padding: 2px 0 6px 76px;
	min-height: 0;
}

.mtf-field-error:empty {
	display: none;
}

/* ── Message textarea ───────────────────────────────────────────────────── */
.mtf-message-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 200px;
	padding: 0 20px;
	background: var(--mtf-bg);
}

.mtf-textarea {
	flex: 1;
	width: 100%;
	font-family: var(--mtf-font);
	font-size: 14px;
	line-height: 1.7;
	color: var(--mtf-text);
	background: transparent;
	border: none;
	outline: none;
	resize: none;
	padding: 16px 0 12px;
	min-height: 200px;
	box-sizing: border-box;
}

.mtf-textarea::placeholder {
	color: #bdc1c6;
}

/* ── Attachment chips area ──────────────────────────────────────────────── */
.mtf-attachment-area {
	padding: 0 20px 14px;
	min-height: 0;
}

.mtf-attachment-area:empty,
.mtf-attachment-chips:empty {
	display: none;
}

.mtf-attachment-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 10px;
}

.mtf-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--mtf-bg-field);
	border: 1px solid var(--mtf-border);
	border-radius: 6px;
	padding: 7px 8px 7px 10px;
	font-size: 12px;
	color: var(--mtf-text);
	max-width: 240px;
	transition: border-color var(--mtf-transition), background var(--mtf-transition);
	position: relative;
}

.mtf-chip::before {
	content: '';
	display: block;
	width: 14px;
	height: 16px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.mtf-chip:hover {
	border-color: #bdc1c6;
	background: #f1f3f4;
}

.mtf-chip.is-loading {
	background: var(--mtf-bg-field);
	border-color: var(--mtf-border);
	color: var(--mtf-text-muted);
}

.mtf-chip.is-loading::before {
	background-image: none;
}

.mtf-chip-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 140px;
	font-weight: 500;
	color: var(--mtf-text);
}

.mtf-chip-size {
	color: var(--mtf-text-muted);
	font-size: 11px;
	flex-shrink: 0;
}

.mtf-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--mtf-text-muted);
	padding: 0;
	line-height: 1;
	font-size: 18px;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-left: 2px;
	transition: background var(--mtf-transition), color var(--mtf-transition);
}

.mtf-chip-remove:hover {
	background: color-mix(in srgb, var(--mtf-red) 12%, transparent);
	color: var(--mtf-red);
}

/* Spinner for uploading chip */
.mtf-chip-loader {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 2px solid var(--mtf-border);
	border-top-color: var(--mtf-primary);
	border-radius: 50%;
	animation: mtf-spin .7s linear infinite;
	flex-shrink: 0;
	margin-left: 2px;
}

@keyframes mtf-spin {
	to { transform: rotate(360deg); }
}

/* ── Footer / toolbar ───────────────────────────────────────────────────── */
.mtf-modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px 12px 20px;
	border-top: 1px solid var(--mtf-border);
	background: var(--mtf-bg);
	flex-shrink: 0;
	gap: 8px;
}

.mtf-footer-left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mtf-footer-right {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.mtf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--mtf-font);
	font-size: 14px;
	font-weight: 500;
	padding: 8px 20px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	transition: background var(--mtf-transition), box-shadow var(--mtf-transition), opacity var(--mtf-transition);
	white-space: nowrap;
	text-decoration: none;
}

.mtf-btn-primary {
	background: var(--mtf-secondary);
	color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.mtf-btn-primary:hover {
	background: var(--mtf-secondary-dark);
	box-shadow: 0 2px 6px rgba(0,0,0,.22);
}

.mtf-btn-primary:active {
	background: var(--mtf-secondary-darker);
}

.mtf-btn-primary:disabled {
	background: color-mix(in srgb, var(--mtf-secondary) 45%, white);
	cursor: not-allowed;
	box-shadow: none;
}

.mtf-btn-ghost {
	background: transparent;
	color: var(--mtf-text-muted);
	border: 1px solid transparent;
	font-size: 13px;
}

.mtf-btn-ghost:hover {
	background: var(--mtf-bg-field);
	border-color: var(--mtf-border);
	color: var(--mtf-text);
}

/* Attach label styled as icon button in toolbar */
.mtf-attach-label {
	color: var(--mtf-primary);
	cursor: pointer;
	border-radius: 50%;
}

.mtf-attach-label:hover {
	background: color-mix(in srgb, var(--mtf-primary) 10%, transparent);
	color: var(--mtf-primary-dark);
}

.mtf-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

/* ── Status message ─────────────────────────────────────────────────────── */
.mtf-status-msg {
	font-size: 12px;
	font-style: italic;
	transition: color var(--mtf-transition);
}

.mtf-status-msg.is-success { color: var(--mtf-secondary); }
.mtf-status-msg.is-error   { color: var(--mtf-red); }
.mtf-status-msg.is-info    { color: var(--mtf-primary); }

/* ── Success screen ─────────────────────────────────────────────────────── */
.mtf-success-screen {
	position: absolute;
	inset: 0;
	z-index: 10;
	background: var(--mtf-bg);
	border-radius: var(--mtf-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 32px;
	text-align: center;
}

.mtf-success-screen[hidden] {
	display: none;
}

.mtf-success-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.mtf-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: color-mix(in srgb, var(--mtf-secondary) 12%, white);
	border-radius: 50%;
}

.mtf-success-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--mtf-text);
	margin: 4px 0 0;
}

.mtf-success-body {
	font-size: 14px;
	color: var(--mtf-text-muted);
	line-height: 1.5;
	max-width: 380px;
	margin: 0 0 8px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.mtf-modal {
		max-width: 100%;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.mtf-overlay {
		align-items: flex-end;
	}

	.mtf-modal-header {
		border-radius: 0;
	}

	.mtf-btn-ghost {
		display: none;
	}
}

/* ── Focus-visible ring for accessibility ───────────────────────────────── */
.mtf-btn:focus-visible,
.mtf-attach-label:focus-visible {
	outline: 2px solid var(--mtf-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Default mail client fallback dialog
   ========================================================================== */

.mtf-fallback-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--mtf-z) + 20);
	background: rgba(0,0,0,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.mtf-fallback-backdrop[hidden] {
	display: none;
}

.mtf-fallback-box {
	background: var(--mtf-bg);
	border-radius: var(--mtf-radius);
	box-shadow: var(--mtf-shadow);
	padding: 28px 28px 24px;
	max-width: 360px;
	width: 100%;
	font-family: var(--mtf-font);
	text-align: center;
}

.mtf-fallback-question {
	font-size: 16px;
	font-weight: 600;
	color: var(--mtf-text);
	margin: 0 0 20px;
	line-height: 1.4;
}

.mtf-fallback-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ==========================================================================
   Mail client picker popover
   ========================================================================== */

.mtf-picker {
	position: fixed;
	z-index: calc(var(--mtf-z) + 10);
	background: var(--mtf-bg);
	border-radius: 10px;
	box-shadow: 0 4px 24px rgba(0,0,0,.18), 0 1px 6px rgba(0,0,0,.10);
	width: 288px;
	overflow: hidden;
	font-family: var(--mtf-font);
	/* Positioned via JS; start hidden */
	opacity: 0;
	transform: scale(0.95);
	transform-origin: top left;
	transition: opacity .15s ease, transform .15s ease;
	pointer-events: none;
}

.mtf-picker.is-open {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

/* ── Picker header ──────────────────────────────────────────────────────── */
.mtf-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px 8px;
	border-bottom: 1px solid var(--mtf-border);
	gap: 8px;
}

.mtf-picker-email {
	font-size: 12px;
	color: var(--mtf-text-muted);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.mtf-picker-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 50%;
	color: var(--mtf-text-muted);
	padding: 0;
	transition: background var(--mtf-transition);
}

.mtf-picker-close:hover {
	background: #f1f3f4;
	color: var(--mtf-text);
}

.mtf-picker-close:focus-visible {
	outline: 2px solid var(--mtf-blue);
	outline-offset: 1px;
}

/* ── Picker list ────────────────────────────────────────────────────────── */
.mtf-picker-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mtf-picker-list li {
	margin: 0;
	padding: 0;
}

.mtf-picker-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 6px 12px !important;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--mtf-font);
	transition: background var(--mtf-transition);
}

.mtf-picker-option:hover {
	background: #f1f3f4;
}

.mtf-picker-option:focus-visible {
	outline: 2px solid var(--mtf-primary);
	outline-offset: -2px;
}

.mtf-picker-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	background: #f1f3f4;
	border-radius: 8px;
	color: var(--mtf-text-muted);
}

.mtf-picker-label {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.mtf-picker-option-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--mtf-text);
	white-space: nowrap;
}

.mtf-picker-option-sub {
	font-size: 11px;
	color: var(--mtf-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mtf-picker-external {
	flex-shrink: 0;
	color: #bdc1c6;
}

.mtf-picker-copy-tick {
	flex-shrink: 0;
}

.mtf-picker-copy-tick[hidden] {
	display: none;
}

/* Picker backdrop (transparent, just for click-outside detection) */
.mtf-picker-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--mtf-z) + 9);
	background: transparent;
}

/* ── Responsive: full-width bottom sheet on mobile ──────────────────────── */
@media (max-width: 400px) {
	.mtf-picker {
		width: 100%;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		transform-origin: bottom center;
	}
}