/* =========================================================
   POLY — RESPOSTAS SUGERIDAS / TEMPLATE
   ========================================================= */

.template-picker-wrapper {
    position: relative;
    z-index: 520;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.template-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #28224F;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

.template-button:hover,
.template-button[aria-expanded="true"] {
    background: #EAF5F6;
    color: #3193A3;
    transform: scale(1.05);
}

.template-panel[hidden] {
    display: none !important;
}

.template-panel {
    position: absolute;

    left: -26px;
    bottom: calc(100% + 16px);

    z-index: 99999;

    width: 410px;
    max-width: min(410px, calc(100vw - 34px));
    max-height: min(560px, 70vh);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #E1E6EC;
    border-radius: 18px;

    background: #FFFFFF;

    box-shadow:
        0 24px 70px rgba(29, 29, 60, .20),
        0 6px 18px rgba(29, 29, 60, .08);

    animation: templatePanelIn .16s ease-out;
}

@keyframes templatePanelIn {
    from {
        opacity: 0;
        transform: translateY(7px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.template-panel-header {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 12px 14px 10px 16px;

    border-bottom: 1px solid #EEF1F4;
}

.template-panel-header > div:first-child {
    min-width: 0;
}

.template-panel-header strong,
.template-panel-header small {
    display: block;
}

.template-panel-header strong {
    color: #1D1D3C;

    font-size: 14px;
    font-weight: 800;
}

.template-panel-header small {
    margin-top: 2px;

    color: #8995A4;

    font-size: 10px;
}

.template-panel-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.template-refresh,
.template-close {
    width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #687588;

    font-size: 19px;
    line-height: 1;

    cursor: pointer;
}

.template-refresh:hover,
.template-close:hover {
    background: #F0F3F6;
    color: #28224F;
}

.template-refresh:disabled {
    opacity: .45;
    cursor: wait;
}

.template-search-box {
    height: 43px;

    display: flex;
    align-items: center;
    gap: 8px;

    margin: 11px 13px 8px;
    padding: 0 12px;

    border: 1px solid #E1E6EB;
    border-radius: 12px;

    background: #F7F9FA;
}

.template-search-box > span {
    color: #8A96A4;

    font-size: 20px;
}

.template-search-box input {
    min-width: 0;
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;
    color: #1D1D3C;

    font: inherit;
    font-size: 13px;
}

.template-search-box input::placeholder {
    color: #98A2AF;
}

.template-status {
    padding: 15px 16px;

    color: #7B8797;

    font-size: 12px;
    text-align: center;
}

.template-status.loading {
    color: #3193A3;
}

.template-status.error {
    margin: 4px 13px 10px;
    padding: 11px 12px;

    border: 1px solid rgba(209, 0, 0, .18);
    border-radius: 10px;

    background: rgba(209, 0, 0, .05);
    color: #A42626;

    text-align: left;
}

.template-status.empty {
    color: #7C8796;
}

.template-list {
    min-height: 70px;
    max-height: 390px;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 4px 9px 11px;

    scrollbar-width: thin;
    scrollbar-color: #D3D9E0 transparent;
}

.template-list::-webkit-scrollbar {
    width: 6px;
}

.template-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #D3D9E0;
}

.template-item {
    width: 100%;

    display: block;

    margin: 0;
    padding: 12px 11px;

    border: 0;
    border-bottom: 1px solid #EEF1F4;
    border-radius: 11px;

    background: transparent;

    color: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background .14s ease,
        transform .14s ease;
}

.template-item:hover {
    background: #F3F8F8;
}

.template-item:active {
    transform: scale(.992);
}

.template-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.template-item-top strong {
    min-width: 0;

    color: #1D1D3C;

    font-size: 12px;
    font-weight: 800;
}

.template-category {
    flex: 0 0 auto;

    padding: 4px 7px;

    border-radius: 999px;

    background: rgba(49, 147, 163, .10);
    color: #227D89;

    font-size: 9px;
    font-weight: 800;
}

.template-item p {
    margin: 7px 0 9px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;

    color: #526074;

    font-size: 12px;
    line-height: 1.42;
}

.template-item-footer {
    min-height: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.template-shortcut {
    color: #8A96A5;

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
}

.template-use {
    color: #3193A3;

    font-size: 10px;
    font-weight: 800;
}

.template-no-results {
    padding: 25px 14px;

    color: #7B8797;

    font-size: 12px;
    text-align: center;
}

/* Mobile: vira bottom sheet acima da navegação inferior */
@media (max-width: 820px) {
    .template-picker-wrapper {
        grid-area: template;

        width: 38px !important;
        height: 38px !important;

        z-index: 5600 !important;
    }

    .template-button {
        width: 38px !important;
        height: 38px !important;
    }

    .template-panel {
        position: fixed !important;

        left: 8px !important;
        right: 8px !important;
        bottom: calc(var(--mobile-nav-height, 68px) + 8px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        max-width: none !important;
        max-height: min(68vh, 570px) !important;
        max-height: min(68dvh, 570px) !important;

        border-radius: 20px 20px 16px 16px !important;
    }

    .template-list {
        max-height: min(48vh, 390px) !important;
    }

    .template-item {
        min-height: 72px;
        padding: 13px 12px;
    }

    .template-item p {
        -webkit-line-clamp: 4;
        font-size: 12px;
    }
}