<!--
|--------------------------------------------------------------------------
| Agência PSI — GlobalSearch (topbar)
|--------------------------------------------------------------------------
| Busca global com atalho Ctrl+K / ⌘+K. Consulta a RPC `search_global` e
| mostra resultados agrupados por entidade + ações rápidas client-side.
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { useRouter } from 'vue-router';
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
import { supabase } from '@/lib/supabase/client';
import { useTenantStore } from '@/stores/tenantStore';
import { searchPages } from './pagesIndex';
import { useRecentPatients } from '@/composables/useRecentPatients';

const router = useRouter();
const tenantStore = useTenantStore();
const { items: recentPatients, hasItems: hasRecentPatients } = useRecentPatients();

// ────────────────────────────────────────────────────────────
// State
// ────────────────────────────────────────────────────────────
const rootEl = ref(null);
const inputEl = ref(null);
const query = ref('');
const results = ref({ patients: [], appointments: [], documents: [], services: [], intakes: [] });
const loading = ref(false);
const showPanel = ref(false);
const activeIndex = ref(-1);

// ────────────────────────────────────────────────────────────
// Ações estáticas (client-side, respondem na hora)
// ────────────────────────────────────────────────────────────
const STATIC_ACTIONS = [
    { id: 'act_new_patient',   label: 'Novo paciente',  icon: 'pi pi-user-plus', sublabel: 'Cadastrar paciente',      to: '/therapist/patients/cadastro',  keywords: ['novo','paciente','cadastrar','criar','add'] },
    { id: 'act_agenda',        label: 'Agenda',         icon: 'pi pi-calendar',  sublabel: 'Ver calendário',          to: '/therapist/agenda',             keywords: ['agenda','calendario','sessoes','hoje'] },
    { id: 'act_patients',      label: 'Pacientes',      icon: 'pi pi-users',     sublabel: 'Lista de pacientes',      to: '/therapist/patients',           keywords: ['pacientes','lista','todos'] },
    { id: 'act_financial',     label: 'Financeiro',     icon: 'pi pi-dollar',    sublabel: 'Dashboard financeiro',    to: '/therapist/financeiro',         keywords: ['financeiro','cobrancas','pagamentos','dinheiro'] },
    { id: 'act_documents',     label: 'Documentos',     icon: 'pi pi-file',      sublabel: 'Gestão de documentos',    to: '/therapist/documents',          keywords: ['documentos','arquivos','anexos'] },
    { id: 'act_services',      label: 'Serviços',       icon: 'pi pi-briefcase', sublabel: 'Precificação de serviços', to: '/configuracoes/precificacao',  keywords: ['servicos','precificacao','precos','modalidade'] },
    { id: 'act_settings',      label: 'Configurações',  icon: 'pi pi-cog',       sublabel: 'Preferências',            to: '/configuracoes',                keywords: ['configuracoes','settings','preferencias','ajustes'] }
];

function normalize(s) {
    return String(s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().trim();
}

const filteredActions = computed(() => {
    const q = normalize(query.value);
    if (!q) return STATIC_ACTIONS.slice(0, 4); // quick defaults quando vazio
    return STATIC_ACTIONS.filter((a) => {
        const hay = normalize(a.label + ' ' + (a.keywords || []).join(' '));
        return hay.includes(q);
    }).slice(0, 4);
});

// Páginas do app (client-side, filtrado por papel ativo)
const filteredPages = computed(() => {
    const q = query.value.trim();
    const role = tenantStore?.activeRole || null;
    if (!q) return []; // só mostra páginas quando o usuário busca algo
    return searchPages(q, role, 5);
});

// ────────────────────────────────────────────────────────────
// Flat list pra navegação por teclado
// ────────────────────────────────────────────────────────────
// Recently-viewed só aparece quando a query está vazia — não polui resultados de busca.
const showRecent = computed(() => !query.value.trim() && hasRecentPatients.value);
const recentItems = computed(() => showRecent.value ? (recentPatients.value || []).slice(0, 5) : []);

const flatList = computed(() => {
    const out = [];
    filteredActions.value.forEach((a, i)         => out.push({ group: 'actions',      item: a, idx: i }));
    recentItems.value.forEach((p, i)             => out.push({ group: 'recent',       item: p, idx: i }));
    results.value.patients.forEach((p, i)        => out.push({ group: 'patients',     item: p, idx: i }));
    results.value.intakes.forEach((r, i)         => out.push({ group: 'intakes',      item: r, idx: i }));
    results.value.appointments.forEach((a, i)    => out.push({ group: 'appointments', item: a, idx: i }));
    results.value.documents.forEach((d, i)       => out.push({ group: 'documents',    item: d, idx: i }));
    results.value.services.forEach((s, i)        => out.push({ group: 'services',     item: s, idx: i }));
    filteredPages.value.forEach((p, i)           => out.push({ group: 'pages',        item: p, idx: i }));
    return out;
});

function findFlatIndex(group, idx) {
    return flatList.value.findIndex((e) => e.group === group && e.idx === idx);
}

const hasAnyResult = computed(() =>
    filteredActions.value.length
    || results.value.patients.length
    || results.value.intakes.length
    || results.value.appointments.length
    || results.value.documents.length
    || results.value.services.length
    || filteredPages.value.length
);

// ────────────────────────────────────────────────────────────
// Fetch (debounced, com controle de ordem)
// ────────────────────────────────────────────────────────────
let debounceT = null;
let searchSeq = 0;

function resetResults() {
    results.value = { patients: [], appointments: [], documents: [], services: [], intakes: [] };
}

watch(query, (v) => {
    if (debounceT) clearTimeout(debounceT);
    const q = String(v || '').trim();
    if (q.length < 2) {
        resetResults();
        activeIndex.value = flatList.value.length ? 0 : -1;
        loading.value = false;
        return;
    }
    loading.value = true;
    const mySeq = ++searchSeq;
    debounceT = setTimeout(async () => {
        try {
            const { data, error } = await supabase.rpc('search_global', { p_q: q, p_limit: 6 });
            if (mySeq !== searchSeq) return; // resposta antiga, descarta
            if (error) {
                // eslint-disable-next-line no-console
                console.error('[search_global] erro:', error);
                resetResults();
            } else {
                results.value = {
                    patients:     Array.isArray(data?.patients)     ? data.patients     : [],
                    appointments: Array.isArray(data?.appointments) ? data.appointments : [],
                    documents:    Array.isArray(data?.documents)    ? data.documents    : [],
                    services:     Array.isArray(data?.services)     ? data.services     : [],
                    intakes:      Array.isArray(data?.intakes)      ? data.intakes      : []
                };
            }
        } catch (e) {
            if (mySeq !== searchSeq) return;
            // eslint-disable-next-line no-console
            console.error('[search_global] exceção:', e);
            resetResults();
        } finally {
            if (mySeq === searchSeq) loading.value = false;
        }
        activeIndex.value = flatList.value.length ? 0 : -1;
    }, 200);
});

// ────────────────────────────────────────────────────────────
// Teclado
// ────────────────────────────────────────────────────────────
function focusInput() {
    nextTick(() => {
        const inst = inputEl.value;
        const el = inst?.$el?.tagName === 'INPUT' ? inst.$el : inst?.$el?.querySelector?.('input');
        el?.focus?.();
        try { el?.select?.(); } catch { /* ignore */ }
    });
}

function onGlobalKeydown(e) {
    const isK = e.key?.toLowerCase() === 'k';
    const cmd = e.ctrlKey || e.metaKey;
    if (cmd && isK) {
        e.preventDefault();
        e.stopPropagation();
        showPanel.value = true;
        focusInput();
        return;
    }
    if (e.key === 'Escape' && showPanel.value) {
        showPanel.value = false;
    }
}

function onInputKeydown(e) {
    const n = flatList.value.length;
    if (e.key === 'ArrowDown') {
        if (!n) return;
        e.preventDefault();
        activeIndex.value = (activeIndex.value + 1 + n) % n;
    } else if (e.key === 'ArrowUp') {
        if (!n) return;
        e.preventDefault();
        activeIndex.value = (activeIndex.value - 1 + n) % n;
    } else if (e.key === 'Enter') {
        const entry = flatList.value[activeIndex.value];
        if (entry) {
            e.preventDefault();
            goTo(entry);
        }
    } else if (e.key === 'Escape') {
        showPanel.value = false;
        const inst = inputEl.value;
        const el = inst?.$el?.tagName === 'INPUT' ? inst.$el : inst?.$el?.querySelector?.('input');
        el?.blur?.();
    }
}

async function goTo(entry) {
    // Recent patients: usa id pra navegar pro prontuário do paciente
    if (entry?.group === 'recent' && entry?.item?.id) {
        showPanel.value = false;
        query.value = '';
        resetResults();
        activeIndex.value = -1;
        await router.push({ path: '/therapist/patients/' + entry.item.id });
        return;
    }

    const target = entry?.item?.to || entry?.item?.deeplink || entry?.item?.path;
    if (!target) return;
    showPanel.value = false;
    query.value = '';
    resetResults();
    activeIndex.value = -1;
    await router.push(target);
}

function onFocus() {
    showPanel.value = true;
    if (flatList.value.length && activeIndex.value < 0) activeIndex.value = 0;
}

function onDocMouseDown(e) {
    if (!showPanel.value) return;
    const el = rootEl.value;
    if (!el) return;
    if (!el.contains(e.target)) showPanel.value = false;
}

onMounted(() => {
    window.addEventListener('keydown', onGlobalKeydown, true);
    document.addEventListener('mousedown', onDocMouseDown);
});
onBeforeUnmount(() => {
    if (debounceT) clearTimeout(debounceT);
    window.removeEventListener('keydown', onGlobalKeydown, true);
    document.removeEventListener('mousedown', onDocMouseDown);
});

// ────────────────────────────────────────────────────────────
// UI helpers
// ────────────────────────────────────────────────────────────
const kbdIsMac = typeof navigator !== 'undefined' && /Mac|iP(ad|od|hone)/i.test(navigator.platform || '');
const kbdModifier = kbdIsMac ? '⌘' : 'Ctrl';
</script>

<template>
    <div ref="rootEl" class="gs-root">
        <div class="gs-field">
            <IconField class="gs-field__wrap">
                <InputIcon class="pi pi-search gs-field__icon" />
                <InputText
                    ref="inputEl"
                    v-model="query"
                    type="search"
                    autocomplete="off"
                    spellcheck="false"
                    placeholder="Buscar pacientes, agenda, documentos…"
                    class="gs-field__input"
                    @focus="onFocus"
                    @keydown="onInputKeydown"
                />
            </IconField>
            <span class="gs-field__kbd" aria-hidden="true">
                <kbd>{{ kbdModifier }}</kbd>
                <kbd>K</kbd>
            </span>
        </div>

        <div v-if="showPanel" class="gs-panel" role="listbox">
            <div v-if="loading" class="gs-panel__state">
                <i class="pi pi-spin pi-spinner" /> buscando…
            </div>

            <div v-else-if="query.trim().length >= 2 && !hasAnyResult" class="gs-panel__state">
                Nada encontrado pra <b>{{ query }}</b>.
            </div>

            <template v-else>
                <!-- Acessados recentemente (só quando query vazia) -->
                <div v-if="showRecent" class="gs-group">
                    <div class="gs-group__title">Acessados recentemente</div>
                    <button
                        v-for="(p, i) in recentItems"
                        :key="'rp-' + p.id"
                        type="button"
                        class="gs-item"
                        :class="{ 'is-active': findFlatIndex('recent', i) === activeIndex }"
                        @mouseenter="activeIndex = findFlatIndex('recent', i)"
                        @click="goTo({ group: 'recent', item: p, idx: i })"
                    >
                        <span class="gs-item__icon"><i class="pi pi-history" /></span>
                        <span class="gs-item__main">
                            <span class="gs-item__label">{{ p.nome }}</span>
                            <span class="gs-item__sub">{{ p.extras?.telefone || p.extras?.email || 'Abrir prontuário' }}</span>
                        </span>
                        <i class="gs-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Ações -->
                <div v-if="filteredActions.length" class="gs-group">
                    <div class="gs-group__title">{{ query.trim() ? 'Ações' : 'Atalhos' }}</div>
                    <button
                        v-for="(a, i) in filteredActions"
                        :key="a.id"
                        type="button"
                        class="gs-item"
                        :class="{ 'is-active': findFlatIndex('actions', i) === activeIndex }"
                        @mouseenter="activeIndex = findFlatIndex('actions', i)"
                        @click="goTo({ group: 'actions', item: a, idx: i })"
                    >
                        <span class="gs-item__icon"><i :class="a.icon" /></span>
                        <span class="gs-item__main">
                            <span class="gs-item__label">{{ a.label }}</span>
                            <span class="gs-item__sub">{{ a.sublabel }}</span>
                        </span>
                        <i class="gs-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Pacientes -->
                <div v-if="results.patients.length" class="gs-group">
                    <div class="gs-group__title">Pacientes</div>
                    <button
                        v-for="(p, i) in results.patients"
                        :key="p.id"
                        type="button"
                        class="gs-item"
                        :class="{ 'is-active': findFlatIndex('patients', i) === activeIndex }"
                        @mouseenter="activeIndex = findFlatIndex('patients', i)"
                        @click="goTo({ group: 'patients', item: p, idx: i })"
                    >
                        <span class="gs-item__avatar">
                            <img v-if="p.avatar_url" :src="p.avatar_url" :alt="p.label" />
                            <i v-else class="pi pi-user" />
                        </span>
                        <span class="gs-item__main">
                            <span class="gs-item__label">{{ p.label }}</span>
                            <span class="gs-item__sub">{{ p.sublabel }}</span>
                        </span>
                        <i class="gs-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Cadastros pendentes (intakes) -->
                <div v-if="results.intakes.length" class="gs-group">
                    <div class="gs-group__title">Cadastros pendentes</div>
                    <button
                        v-for="(r, i) in results.intakes"
                        :key="r.id"
                        type="button"
                        class="gs-item"
                        :class="{ 'is-active': findFlatIndex('intakes', i) === activeIndex }"
                        @mouseenter="activeIndex = findFlatIndex('intakes', i)"
                        @click="goTo({ group: 'intakes', item: r, idx: i })"
                    >
                        <span class="gs-item__icon gs-item__icon--amber"><i class="pi pi-inbox" /></span>
                        <span class="gs-item__main">
                            <span class="gs-item__label">{{ r.label }}</span>
                            <span class="gs-item__sub">{{ r.sublabel }}</span>
                        </span>
                        <i class="gs-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Agendamentos -->
                <div v-if="results.appointments.length" class="gs-group">
                    <div class="gs-group__title">Agendamentos</div>
                    <button
                        v-for="(a, i) in results.appointments"
                        :key="a.id"
                        type="button"
                        class="gs-item"
                        :class="{ 'is-active': findFlatIndex('appointments', i) === activeIndex }"
                        @mouseenter="activeIndex = findFlatIndex('appointments', i)"
                        @click="goTo({ group: 'appointments', item: a, idx: i })"
                    >
                        <span class="gs-item__icon gs-item__icon--blue"><i class="pi pi-calendar" /></span>
                        <span class="gs-item__main">
                            <span class="gs-item__label">{{ a.label }}</span>
                            <span class="gs-item__sub">{{ a.sublabel }}</span>
                        </span>
                        <i class="gs-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Documentos -->
                <div v-if="results.documents.length" class="gs-group">
                    <div class="gs-group__title">Documentos</div>
                    <button
                        v-for="(d, i) in results.documents"
                        :key="d.id"
                        type="button"
                        class="gs-item"
                        :class="{ 'is-active': findFlatIndex('documents', i) === activeIndex }"
                        @mouseenter="activeIndex = findFlatIndex('documents', i)"
                        @click="goTo({ group: 'documents', item: d, idx: i })"
                    >
                        <span class="gs-item__icon gs-item__icon--purple"><i class="pi pi-file" /></span>
                        <span class="gs-item__main">
                            <span class="gs-item__label">{{ d.label }}</span>
                            <span class="gs-item__sub">{{ d.sublabel }}</span>
                        </span>
                        <i class="gs-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Serviços -->
                <div v-if="results.services.length" class="gs-group">
                    <div class="gs-group__title">Serviços</div>
                    <button
                        v-for="(s, i) in results.services"
                        :key="s.id"
                        type="button"
                        class="gs-item"
                        :class="{ 'is-active': findFlatIndex('services', i) === activeIndex }"
                        @mouseenter="activeIndex = findFlatIndex('services', i)"
                        @click="goTo({ group: 'services', item: s, idx: i })"
                    >
                        <span class="gs-item__icon gs-item__icon--orange"><i class="pi pi-briefcase" /></span>
                        <span class="gs-item__main">
                            <span class="gs-item__label">{{ s.label }}</span>
                            <span class="gs-item__sub">{{ s.sublabel }}</span>
                        </span>
                        <i class="gs-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Páginas do app -->
                <div v-if="filteredPages.length" class="gs-group">
                    <div class="gs-group__title">Páginas</div>
                    <button
                        v-for="(p, i) in filteredPages"
                        :key="p.id"
                        type="button"
                        class="gs-item"
                        :class="{ 'is-active': findFlatIndex('pages', i) === activeIndex }"
                        @mouseenter="activeIndex = findFlatIndex('pages', i)"
                        @click="goTo({ group: 'pages', item: p, idx: i })"
                    >
                        <span class="gs-item__icon gs-item__icon--slate"><i :class="p.icon" /></span>
                        <span class="gs-item__main">
                            <span class="gs-item__label">{{ p.label }}</span>
                            <span class="gs-item__sub">{{ p.sublabel }}</span>
                        </span>
                        <i class="gs-item__go pi pi-arrow-right" />
                    </button>
                </div>

                <!-- Hint -->
                <div v-if="!query.trim()" class="gs-panel__hint">
                    <i class="pi pi-info-circle" />
                    Digite ao menos 2 caracteres para buscar em pacientes, agenda, documentos e serviços.
                </div>
            </template>
        </div>
    </div>
</template>

<style scoped>
.gs-root {
    position: relative;
    width: 100%;
    max-width: 420px;
    min-width: 220px;
    flex: 1 1 320px;
}

.gs-field { position: relative; display: flex; align-items: center; }
.gs-field__wrap { flex: 1; min-width: 0; }
.gs-field__icon { font-size: 0.82rem; opacity: 0.6; }

.gs-field__wrap :deep(.p-inputtext) {
    width: 100%;
    padding: 8px 56px 8px 34px;
    font-size: 0.82rem;
    height: 36px;
    border-radius: 10px;
    background: var(--p-content-background, var(--surface-card));
    border: 1px solid var(--p-content-border-color, var(--surface-border));
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.gs-field__wrap :deep(.p-inputtext:hover) {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--surface-border));
}
.gs-field__wrap :deep(.p-inputtext:focus) {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
    outline: none;
}

.gs-field__kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    gap: 3px;
    pointer-events: none;
}
.gs-field__kbd kbd {
    font-family: inherit;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-color) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    color: var(--text-color-secondary);
    line-height: 1;
    min-width: 16px;
    text-align: center;
}

.gs-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 3100;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.3);
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    min-width: 360px;
}

.gs-panel__state {
    padding: 18px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-color-secondary);
}
.gs-panel__hint {
    padding: 10px 12px;
    font-size: 0.72rem;
    color: var(--text-color-secondary);
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0.85;
}

.gs-group + .gs-group {
    margin-top: 4px;
    border-top: 1px solid var(--surface-border);
    padding-top: 4px;
}
.gs-group__title {
    padding: 8px 10px 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-color-secondary);
    opacity: 0.7;
}

.gs-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    text-align: left;
    font-family: inherit;
    color: var(--text-color);
}
.gs-item.is-active {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.gs-item__icon,
.gs-item__avatar {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 0.82rem;
}
.gs-item__icon {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}
.gs-item__icon--blue {
    background: color-mix(in srgb, #60a5fa 14%, transparent);
    color: #60a5fa;
}
.gs-item__icon--purple {
    background: color-mix(in srgb, #c084fc 14%, transparent);
    color: #c084fc;
}
.gs-item__icon--orange {
    background: color-mix(in srgb, #fb923c 14%, transparent);
    color: #fb923c;
}
.gs-item__icon--amber {
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    color: #f59e0b;
}
.gs-item__icon--slate {
    background: color-mix(in srgb, var(--text-color) 8%, transparent);
    color: var(--text-color-secondary);
}
.gs-item__avatar {
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-color) 6%, transparent);
    color: var(--text-color-secondary);
}
.gs-item__avatar img { width: 100%; height: 100%; object-fit: cover; }

.gs-item__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gs-item__label {
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-item__sub {
    font-size: 0.7rem;
    color: var(--text-color-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-item__go {
    font-size: 0.7rem;
    color: var(--text-color-secondary);
    opacity: 0;
    transition: opacity 0.12s;
}
.gs-item.is-active .gs-item__go { opacity: 1; color: var(--primary-color); }

/* Responsive */
@media (max-width: 820px) { .gs-root { max-width: 260px; flex-basis: 220px; } }

/* Compact: ≤ 640px → só ícone + kbd visíveis (input textual colapsado) */
@media (max-width: 640px) {
    .gs-root {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }
    .gs-field__wrap :deep(.p-inputtext) {
        width: 92px;
        padding: 8px 42px 8px 30px;
        color: transparent;
        caret-color: transparent;
        cursor: pointer;
    }
    .gs-field__wrap :deep(.p-inputtext::placeholder) {
        color: transparent;
    }
    /* Mantém kbd visível em compact (dica visual do atalho) */
    .gs-field__kbd {
        display: inline-flex;
        right: 6px;
        pointer-events: none;
    }
    .gs-field__kbd kbd {
        font-size: 0.55rem;
        padding: 1px 4px;
    }

    /* Focado: expande como overlay sobre o topbar */
    .gs-root:focus-within {
        position: absolute;
        top: 50%;
        left: 0.5rem;
        right: 0.5rem;
        transform: translateY(-50%);
        z-index: 110;
    }
    .gs-root:focus-within .gs-field__wrap :deep(.p-inputtext) {
        width: 100%;
        padding: 8px 56px 8px 34px;
        color: inherit;
        caret-color: auto;
        cursor: text;
        background: var(--p-content-background, var(--surface-card));
    }
    .gs-root:focus-within .gs-field__wrap :deep(.p-inputtext::placeholder) {
        color: var(--text-color-secondary);
        opacity: 0.6;
    }
}
</style>
