.alee-se-wrap {
--alee-se-bg: #ffffff;
--alee-se-text: #0f172a;
--alee-se-muted: #64748b;
--alee-se-border: #e2e8f0;
--alee-se-border-focus: #6366f1;
--alee-se-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
--alee-se-shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.08), 0 8px 32px rgba(15, 23, 42, 0.10);
--alee-se-radius: 10px;
--alee-se-radius-sm: 6px;
--alee-se-accent: #6366f1;
--alee-se-accent-soft: rgba(99, 102, 241, 0.08);
--alee-se-danger: #ef4444;
position: relative;
width: 100%;
max-width: 560px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Thai", "Sarabun", sans-serif;
}
@media (prefers-color-scheme: dark) {
.alee-se-wrap {
--alee-se-bg: #0f172a;
--alee-se-text: #f1f5f9;
--alee-se-muted: #94a3b8;
--alee-se-border: #1e293b;
--alee-se-border-focus: #818cf8;
--alee-se-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3);
--alee-se-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 32px rgba(0, 0, 0, 0.5);
--alee-se-accent-soft: rgba(129, 140, 248, 0.16);
}
} .alee-se-form {
display: flex;
align-items: center;
gap: 0;
position: relative;
background: var(--alee-se-bg);
border: 1px solid var(--alee-se-border);
border-radius: var(--alee-se-radius);
padding: 6px 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.alee-se-form:focus-within {
border-color: var(--alee-se-border-focus);
box-shadow: 0 0 0 3px var(--alee-se-accent-soft);
}
.alee-se-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
color: var(--alee-se-muted);
flex-shrink: 0;
}
.alee-se-input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font-size: 15px;
padding: 8px 4px;
color: var(--alee-se-text);
font-family: inherit;
}
.alee-se-input::placeholder {
color: var(--alee-se-muted);
}
.alee-se-input::-webkit-search-decoration,
.alee-se-input::-webkit-search-cancel-button,
.alee-se-input::-webkit-search-results-button,
.alee-se-input::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
}
.alee-se-clear {
background: transparent;
border: 0;
cursor: pointer;
color: var(--alee-se-muted);
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0;
transition: background 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}
.alee-se-clear:hover {
background: var(--alee-se-accent-soft);
color: var(--alee-se-text);
}
.alee-se-clear[hidden] {
display: none;
} .alee-se-hp {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
} .alee-se-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--alee-se-bg);
border: 1px solid var(--alee-se-border);
border-radius: var(--alee-se-radius);
box-shadow: var(--alee-se-shadow-lg);
z-index: 9999;
max-height: 70vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.alee-se-dropdown[hidden] {
display: none;
}
.alee-se-list {
list-style: none;
margin: 0;
padding: 6px 0;
}
.alee-se-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
color: var(--alee-se-text);
text-decoration: none;
transition: background 0.1s ease;
border-left: 3px solid transparent;
}
.alee-se-item:hover,
.alee-se-item.is-active {
background: var(--alee-se-accent-soft);
border-left-color: var(--alee-se-accent);
}
.alee-se-item__thumb {
width: 44px;
height: 44px;
border-radius: var(--alee-se-radius-sm);
overflow: hidden;
background: var(--alee-se-accent-soft);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.alee-se-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.alee-se-item__thumb-placeholder {
color: var(--alee-se-muted);
}
.alee-se-item__body {
flex: 1 1 auto;
min-width: 0;
}
.alee-se-item__title {
font-size: 14px;
font-weight: 500;
line-height: 1.35;
color: var(--alee-se-text);
margin: 0 0 3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.alee-se-item__title mark {
background: var(--alee-se-accent-soft);
color: var(--alee-se-accent);
font-weight: 600;
padding: 0;
}
.alee-se-item__meta {
font-size: 12px;
color: var(--alee-se-muted);
display: flex;
gap: 8px;
align-items: center;
}
.alee-se-item__meta-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
opacity: 0.5;
} .alee-se-state {
padding: 20px 16px;
text-align: center;
color: var(--alee-se-muted);
font-size: 14px;
}
.alee-se-state--empty {
padding: 32px 16px;
}
.alee-se-state__icon {
display: inline-flex;
margin-bottom: 6px;
color: var(--alee-se-muted);
opacity: 0.6;
} .alee-se-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--alee-se-border);
border-top-color: var(--alee-se-accent);
border-radius: 50%;
animation: alee-se-spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes alee-se-spin {
to { transform: rotate(360deg); }
} .alee-se-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-top: 1px solid var(--alee-se-border);
font-size: 13px;
color: var(--alee-se-muted);
background: var(--alee-se-accent-soft);
}
.alee-se-footer__link {
color: var(--alee-se-accent);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
.alee-se-footer__link:hover {
text-decoration: underline;
}
.alee-se-kbd {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border: 1px solid var(--alee-se-border);
border-radius: 4px;
background: var(--alee-se-bg);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: var(--alee-se-muted);
margin: 0 2px;
} .alee-se-error {
padding: 14px 16px;
color: var(--alee-se-danger);
font-size: 13px;
text-align: center;
} @media (max-width: 480px) {
.alee-se-wrap {
max-width: 100%;
}
.alee-se-dropdown {
max-height: 60vh;
}
.alee-se-item__thumb {
width: 40px;
height: 40px;
}
}