.ct-products-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
 gap:14px;
 margin-top:12px;
}
.ct-product-box{
 background:#fff;
 border-radius:18px;
 overflow:hidden;
 border:1px solid rgba(0,0,0,.08);
 box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.ct-product-image{
 width:100%;
 height:150px;
 object-fit:cover;
 background:linear-gradient(135deg, color-mix(in srgb, var(--chat-company-color, #2563eb) 14%, #ffffff), #f3f4f6);
}
.ct-product-content{
 padding:14px;
 display:flex;
 flex-direction:column;
 gap:8px;
}
.ct-product-title{
 font-size:15px;
 font-weight:800;
 color:#111827;
}
.ct-product-description{
 font-size:13px;
 color:#6b7280;
 min-height:38px;
}
.ct-product-price{
 font-size:16px;
 font-weight:900;
 color:var(--chat-company-color, #2563eb);
}
.ct-product-interest{
 border:none;
 border-radius:12px;
 padding:12px;
 background:var(--chat-company-color, #2563eb);
 color:#fff;
 font-weight:700;
 cursor:pointer;
}


/* Detalhes do produto em popup */
.ct-product-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:10px;
}

.ct-product-details-btn,
.ct-product-interest-btn,
.ct-human-button{
    border:0;
    border-radius:999px;
    padding:9px 13px;
    font-weight:800;
    cursor:pointer;
    transition:transform .16s ease, filter .16s ease;
}

.ct-product-details-btn{
    background:color-mix(in srgb, var(--chat-company-color, #3730a3) 12%, #ffffff);
    color:color-mix(in srgb, var(--chat-company-color, #3730a3) 74%, #1e1b4b);
}

.ct-product-details-btn:hover,
.ct-product-interest-btn:hover,
.ct-human-button:hover{
    transform:translateY(-1px);
    filter:brightness(.98);
}

.ct-product-modal[hidden]{
    display:none !important;
}

.ct-product-modal{
    position:fixed;
    inset:0;
    z-index:999999;
    display:grid;
    place-items:center;
    padding:20px;
}

.ct-product-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.72);
    backdrop-filter:blur(8px);
}

.ct-product-modal-card{
    position:relative;
    z-index:1;
    width:min(560px, 96vw);
    max-height:88vh;
    overflow:auto;
    background:#fff;
    color:#0f172a;
    border-radius:24px;
    box-shadow:0 30px 90px rgba(0,0,0,.35);
    border:1px solid rgba(15,23,42,.12);
}

.ct-product-modal-close{
    position:absolute;
    top:10px;
    right:12px;
    width:38px;
    height:38px;
    border:0;
    border-radius:999px;
    background:rgba(15,23,42,.82);
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    z-index:2;
}

.ct-product-modal-image{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
    background:#e2e8f0;
}

.ct-product-modal-body{
    padding:22px;
}

.ct-product-modal-body h3{
    margin:0 0 8px;
    font-size:1.35rem;
    font-weight:900;
}

.ct-product-modal-price{
    color:var(--chat-company-color, #2563eb);
    font-weight:900;
    margin-bottom:12px;
}

.ct-product-modal-body p{
    margin:0;
    color:#334155;
    line-height:1.55;
    white-space:pre-line;
}

/* ── API Rich Cards (nó API do ChatFlow) ───────────────────────────── */
.ct-rich-message { flex-direction: column; align-items: flex-start !important; }

.ct-api-cards-wrap { width: 100%; margin-top: 8px; }

.ct-api-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ct-api-card {
    flex: 1 1 180px;
    max-width: 220px;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.09);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}
.ct-api-card-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: linear-gradient(135deg, color-mix(in srgb, var(--chat-company-color, #2563eb) 14%, #ffffff), #f1f5f9);
    display: block;
}
.ct-api-card-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.ct-api-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ct-api-card-subtitle {
    font-size: 13px;
    font-weight: 800;
    color: var(--chat-company-color, #2563eb);
}
.ct-api-card-desc {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.ct-api-card-actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ct-api-card-action {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--chat-company-color, #2563eb);
    background: transparent;
    color: var(--chat-company-color, #2563eb);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ct-api-card-action:hover { background: var(--chat-company-color, #2563eb); color: #fff; }

.ct-map-card {
    width: min(100%, 420px);
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--chat-company-color, #2563eb) 28%, rgba(148,163,184,.35));
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    color: #111827;
    box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

.ct-map-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--chat-company-color, #2563eb) 12%, #fff), #fff);
}

.ct-map-header .material-symbols-outlined {
    color: var(--chat-company-color, #2563eb);
    font-size: 22px;
    line-height: 1;
}

.ct-map-title {
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.ct-map-address {
    margin-top: 2px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
}

.ct-map-frame-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 190px;
    background: #e5e7eb;
}

.ct-map-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ct-map-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 900;
    color: var(--chat-company-color, #2563eb);
    text-decoration: none;
    border-top: 1px solid rgba(148,163,184,.28);
}

.ct-map-link:hover {
    background: color-mix(in srgb, var(--chat-company-color, #2563eb) 10%, #fff);
}

@media (max-width: 520px) {
    .ct-map-card {
        width: 100%;
    }

    .ct-map-frame-wrap {
        min-height: 170px;
    }
}

.ct-api-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.ct-api-top-action {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--chat-company-color, #2563eb);
    background: transparent;
    color: var(--chat-company-color, #2563eb);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ct-api-top-action:hover { background: var(--chat-company-color, #2563eb); color: #fff; }

body.ct-product-modal-open{
    overflow:hidden;
}


/* Chat front: grid responsivo começando à esquerda */
.chat-panel .ct-products-grid,
.messages .ct-products-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:14px;
    width:100%;
}

.chat-panel .ct-product-box,
.messages .ct-product-box{
    flex:1 1 220px;
    max-width:280px;
    min-width:220px;
}

@media(max-width:560px){
    .chat-panel .ct-product-box,
    .messages .ct-product-box{
        flex-basis:100%;
        max-width:100%;
        min-width:0;
    }
}

/* ── Menu de opções do Switch – segue o tema escuro do chat ─────────────── */
.ct-switch-menu-wrap{
    width:100%;
    margin-top:8px;
}

.ct-switch-menu-list{
    display:block;
    overflow:visible;
    padding:0;
}

.ct-switch-menu-card{
    width:100%;
    flex:1 1 auto;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.ct-switch-menu-card .ct-api-card-body{
    padding:0;
    gap:8px;
}

.ct-switch-menu-card .ct-api-card-title{
    font-size:14px;
    font-weight:800;
    color:#f8fafc;
    -webkit-line-clamp:unset;
}

.ct-switch-menu-card .ct-api-card-subtitle{
    color:var(--chat-company-color, #60a5fa);
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.ct-switch-menu-actions{
    display:grid;
    gap:8px;
    margin-top:10px;
}

.ct-switch-menu-action{
    width:100%;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.07);
    color:#f1f5f9;
    border-radius:12px;
    padding:10px 12px;
    font-size:13px;
    font-weight:700;
    text-align:left;
    box-shadow:none;
    cursor:pointer;
    transition:background .15s, border-color .15s, transform .15s;
    white-space: normal;
}
.ct-switch-menu-action span:not(.material-symbols-outlined):not(.ct-menu-number):not(.ct-menu-arrow){
    white-space: normal;
    word-break: break-word;
}

.ct-switch-menu-action:hover{
    background:color-mix(in srgb, var(--chat-company-color, #2563eb) 24%, rgba(255,255,255,.07));
    border-color:color-mix(in srgb, var(--chat-company-color, #2563eb) 54%, rgba(255,255,255,.18));
    color:color-mix(in srgb, var(--chat-company-color, #2563eb) 34%, #ffffff);
    transform:translateY(-1px);
}

.ct-menu-number{
    width:24px;
    height:24px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:color-mix(in srgb, var(--chat-company-color, #2563eb) 25%, rgba(255,255,255,.08));
    color:color-mix(in srgb, var(--chat-company-color, #2563eb) 35%, #ffffff);
    font-size:12px;
    font-weight:900;
    flex-shrink:0;
}

.ct-menu-arrow{
    color:rgba(255,255,255,.35);
    font-size:20px;
}