/* Smart search only; the desktop entry point does not load this stylesheet. */
.smart-search { overflow-wrap: anywhere; min-width: 0; }
.smart-search-chips, .smart-search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.smart-search-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 14px; box-sizing: border-box; border: 1px solid var(--divider, #ded9eb); border-radius: 24px; color: var(--primary-text, #30264b); text-decoration: none; background: var(--bg-color, #fff); }
.smart-search-chip.is-active { background: #9575cd26; border-color: var(--primary-light, #9575cd); font-weight: 600; }
.smart-search-chip span { opacity: .7; }
.smart-search-list { display: block; }

.smart-search-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding-bottom: 4px; }
.smart-search-chips::-webkit-scrollbar { display: none; }
.smart-search-chips .smart-search-chip { flex: 0 0 auto; white-space: nowrap; background: #3B3363 !important; border: 0 !important; color: #fff; }
.smart-search-chips .smart-search-chip.is-active { background: #6448B1 !important; }
.smart-search-chips:empty { display: none; }
.smart-search-card { min-width: 0; }
.smart-search-cover { display: block; width: 70px; height: 70px; border-radius: .7rem; overflow: hidden; }
.smart-search-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.smart-search-card-people .smart-search-cover { border-radius: 50%; }
.smart-search-card .smart-search-copy { padding-left: .5rem; }
.smart-search-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.smart-search-kind, .smart-search-reason, .smart-search-author { color: var(--primary-light, #756784); font-size: 12px; }
.smart-search-title { font-weight: 600; font-size: 16px; color: var(--primary-text, #30264b); text-decoration: none; }
.smart-search-title mark { background: #ffc85755; color: inherit; border-radius: 3px; }
.smart-search-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.smart-search-actions button { min-width: 44px; min-height: 44px; }
.smart-search-actions progress { width: 100%; max-width: 180px; height: 6px; }
.smart-search-state { text-align: center; padding: 8px; }
.smart-search-state:empty, .smart-search-count:empty, .smart-search-filters:empty { display: none; }
.smart-search-clear { position: absolute; right: 44px; top: 0; min-width: 44px; height: 48px; border: 0; background: transparent; color: inherit; font-size: 24px; }
.smart-search-form input[name="q"] { padding-right: 88px; }
.smart-search-form form { position: relative; }

.smart-search-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.smart-search-pending { padding: 12px; font-size: 14px; }


.tale-search-panel > .tale-search-suggestions { padding-bottom: max(6px, env(safe-area-inset-bottom)); }

/* Keep submit, clear and voice controls in the same 48px coordinate space. */
.search.smart-search-form { padding: 0; }
.smart-search-form form, .smart-search-form .si-wrapper { width: 100%; height: 48px; position: relative; }
.smart-search-form .si-wrapper { display: block; }
.smart-search-form input[name="q"] { width: 100%; height: 48px; box-sizing: border-box; padding: 0 88px 0 44px !important; margin: 0; }
.smart-search-form .btn-search, .smart-search-form .smart-search-clear, .smart-search-form .si-btn { position: absolute; top: 0; width: 44px; min-width: 44px; height: 48px; margin: 0; padding: 0 !important; transform: none; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: inherit; z-index: 5; }
.smart-search-form .btn-search { left: 0 !important; right: auto; }
.smart-search-form .smart-search-clear { right: 44px; left: auto; }
.smart-search-form .si-btn { right: 0; left: auto; }
.smart-search-form button svg { width: 22px; height: 22px; flex: 0 0 22px; fill: currentColor; }

/* Home and music share a vertically centered search field. */
.search.smart-search-entry { padding: 0; }
.smart-search-entry form, .smart-search-entry .si-wrapper { position: relative; width: 100%; height: 48px; }
.smart-search-entry input[name="q"] { display: block; width: 100%; height: 48px; box-sizing: border-box; margin: 0; padding: 0 44px !important; line-height: normal; border: 0; }
.smart-search-entry .btn-search, .smart-search-entry .si-btn { position: absolute; top: 0; width: 44px; height: 48px; margin: 0; padding: 0 !important; transform: none; display: flex; align-items: center; justify-content: center; z-index: 5; }
.smart-search-entry .btn-search { left: 0 !important; }
.smart-search-entry .si-btn { right: 0; }
.smart-search-entry button svg, .smart-search-entry button svg-icon { width: 22px; height: 22px; }

/* Empty results and spelling choices use the same smart palette. */
.smart-search-empty { margin: 8px 0 24px; padding: 28px 20px 24px; border-radius: 20px; background: #292344; color: #fff; }
.smart-search-empty-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%; background: #3B3363; color: #C7B5FF; }
.smart-search-empty-icon svg { display: block; width: 52px; height: 52px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.smart-search .smart-search-empty h2 { margin: 0 0 12px; font-family: inherit; font-size: 22px; font-weight: 600; line-height: 1.3; text-transform: none; color: #fff; }
.smart-search-empty-query { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: #E1DAF4; overflow-wrap: anywhere; }
.smart-search-empty-hint { margin: 0; font-size: 14px; line-height: 1.5; color: #BBB1D2; }
.smart-search-corrections { margin: 12px 8px 20px; padding: 16px; border-radius: 16px; background: #332E59; text-align: left; }
.smart-search-corrections-title { margin: 0 0 12px; color: #E1DAF4; font-size: 14px; line-height: 1.4; font-weight: 500; }
.smart-search-correction-options { display: flex; flex-wrap: wrap; gap: 8px; }
.smart-search .smart-search-correction { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; box-sizing: border-box; padding: 10px 16px; border: 0; border-radius: 12px; background: #6448B1; color: #fff; font-size: 15px; line-height: 1.4; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.smart-search-empty .smart-search-corrections { margin: 20px 0 0; background: #3B3363; }
.smart-search-browse { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 20px; padding: 8px 12px; color: #D1C0FF; font-size: 14px; line-height: 1.4; text-decoration: none; }
.smart-search-correction:focus-visible, .smart-search-browse:focus-visible, .smart-search-chip:focus-visible { outline: 2px solid #D1C0FF; outline-offset: 3px; }
@media (hover: hover) { .smart-search .smart-search-correction:hover { background: #7558C5; } .smart-search-browse:hover { color: #fff; } }

.tale-search-corrections { margin: 4px; padding: 14px; border-radius: 14px; background: #3B3363; }
.tale-search-corrections-title { margin: 0 0 10px; color: #E1DAF4; font-size: 13px; line-height: 1.4; font-weight: 500; }
.tale-search-correction-options { display: flex; flex-wrap: wrap; gap: 8px; }
.tale-search-suggestions .tale-search-correction { display: inline-flex; min-height: 44px; max-width: 100%; padding: 10px 14px; border-radius: 10px; background: #6448B1; color: #fff; font-size: 14px; line-height: 1.35; font-weight: 500; }
.tale-search-suggestions .tale-search-correction:hover, .tale-search-suggestions .tale-search-correction[aria-selected="true"] { background: #7558C5; color: #fff; }

/* Match the ordinary result cards' outer gutters. */
.smart-search-chips, .smart-search-filters { margin-left: .5rem; margin-right: .5rem; }
.smart-search-count { margin-left: .5rem; margin-right: .5rem; }
.smart-search-state { padding: 0; margin-left: .5rem; margin-right: .5rem; }
.smart-search-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
.smart-search-suggest { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; max-width: 260px; padding: 12px 20px; border: 0; border-radius: 12px; background: linear-gradient(90deg, rgba(240, 169, 89, 1) 0%, rgba(243, 139, 110, 1) 50%, rgba(244, 110, 146, 1) 100%); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.smart-search-empty-actions .smart-search-browse { margin-top: 0; }
.smart-search-suggest:focus-visible { outline: 2px solid #D1C0FF; outline-offset: 3px; }
@media (hover: hover) { .smart-search-suggest:hover { filter: brightness(1.05); } }

.smart-search-result-summary { margin: 12px .5rem; }
.smart-search-result-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; box-sizing: border-box; padding: 8px 14px; border-radius: 12px; background: #3B3363; color: #E1DAF4; font-size: 14px; line-height: 1.4; }
.smart-search-result-badge strong { color: #fff; font-weight: 600; }