:root {
    --ctw-dark: #1A1612;
    --ctw-brown: #3D2E1F;
    --ctw-gold: #B8956A;
    --ctw-gold-soft: #D4BC98;
    --ctw-sand: #EDE5DA;
    --ctw-light: #F7F4F0;
    --ctw-white: #FFFFFF;
    --ctw-border: #E8E2DA;
    --ctw-muted: #A09588;
}

/* PREVENÇÃO TOTAL DE TEMAS WORDPRESS */
#ctw-wrap {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 9999999 !important;
}

#ctw-wrap, #ctw-wrap * {
    font-family: 'Outfit', sans-serif !important;
    box-sizing: border-box !important;
    line-height: normal;
}

#ctw-wrap div, #ctw-wrap button, #ctw-wrap input, #ctw-wrap a, #ctw-wrap span {
    margin: 0;
}

/* FAB */
#ctw-wrap .ctw-fab {
    width: 60px !important; height: 60px !important;
    background: var(--ctw-white) !important;
    border-radius: 50% !important;
    border: none !important; cursor: pointer !important; float: right;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 8px 30px rgba(26, 22, 18, 0.2) !important;
    transition: transform 0.25s, box-shadow 0.2s !important;
    margin-top: 16px !important;
    padding: 0 !important;
}
#ctw-wrap .ctw-fab:hover { transform: scale(1.05) !important; }
#ctw-wrap .ctw-fab svg { width: 26px !important; height: 26px !important; stroke: var(--ctw-dark) !important; fill: none !important; transition: 0.3s !important; }
#ctw-wrap .ctw-fab img { width: 34px !important; height: 34px !important; object-fit: contain !important; transition: transform 0.3s !important; }
#ctw-wrap.open .ctw-fab svg { transform: rotate(90deg) !important; }

/* Main Window */
#ctw-wrap .ctw-box {
    width: 380px !important;
    height: 610px !important;
    max-height: calc(100vh - 120px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: none;
    flex-direction: column !important;
    background: var(--ctw-white) !important;
    box-shadow: 0 8px 40px rgba(26, 22, 18, .15), 0 0 0 1px var(--ctw-border) !important;
    transform-origin: bottom right !important;
    animation: ctw-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 !important;
}
#ctw-wrap.open .ctw-box { display: flex !important; }
@keyframes ctw-in { from { opacity:0; transform: scale(0.95) translateY(20px); } to { opacity:1; transform: scale(1) translateY(0); } }

/* Header */
#ctw-wrap .ctw-h { background: var(--ctw-dark) !important; padding: 14px 16px !important; display: flex !important; align-items: center !important; gap: 11px !important; flex-shrink: 0 !important; }
#ctw-wrap .ctw-h .av { width: 38px !important; height: 38px !important; flex-shrink: 0 !important; padding: 7px !important; border-radius: 50% !important; background: var(--ctw-sand) !important; color: var(--ctw-dark) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
#ctw-wrap .ctw-h .info { flex: 1 !important; padding: 0 !important;}
#ctw-wrap .ctw-h .nm { font-weight: 700 !important; font-size: 14px !important; color: var(--ctw-white) !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; margin-bottom: 2px !important; padding: 0 !important;}
#ctw-wrap .ctw-h .st { font-size: 11.5px !important; color: var(--ctw-muted) !important; display: flex !important; align-items: center !important; gap: 5px !important; padding: 0 !important;}
#ctw-wrap .ctw-h .dt { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #8AB882 !important; padding: 0 !important;}
#ctw-wrap .ctw-h .acts { display: flex !important; gap: 2px !important; padding: 0 !important;}
#ctw-wrap .ctw-h .acts button { background: none !important; border: none !important; color: rgba(255, 255, 255, .45) !important; cursor: pointer !important; padding: 6px !important; border-radius: 6px !important; display: flex !important; transition: color .2s !important; }
#ctw-wrap .ctw-h .acts button:hover { color: rgba(255, 255, 255, .8) !important; }
#ctw-wrap .ctw-h .acts button svg { fill: none !important; }

/* Chat Area */
#ctw-wrap .ctw-c { flex: 1 !important; overflow-y: auto !important; padding: 20px 16px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; background: var(--ctw-white) !important; scroll-behavior: smooth !important;}
#ctw-wrap .ctw-c::-webkit-scrollbar { width: 3px !important; }
#ctw-wrap .ctw-c::-webkit-scrollbar-thumb { background: var(--ctw-border) !important; border-radius: 10px !important; }

/* Rows and Bubbles */
#ctw-wrap .r { display: flex !important; gap: 9px !important; align-items: flex-end !important; animation: f .35s ease both !important; margin-bottom: 2px !important; padding: 0 !important;}
#ctw-wrap .r.u { flex-direction: row-reverse !important; gap: 0 !important; margin-top: 4px !important; }
#ctw-wrap .r.hv .ma { visibility: hidden !important; }
#ctw-wrap .ma { width: 26px !important; height: 26px !important; flex-shrink: 0 !important; margin-bottom: 1px !important; padding: 4px !important; border-radius: 50% !important; background: var(--ctw-sand) !important; color: var(--ctw-dark) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
#ctw-wrap .ma img, #ctw-wrap .ctw-h .av img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 50% !important; display: block !important; }

#ctw-wrap .bb { padding: 10px 15px !important; font-size: 13.5px !important; line-height: 1.55 !important; white-space: pre-line !important; word-wrap: break-word !important; }
#ctw-wrap .bb.bot { background: var(--ctw-light) !important; color: var(--ctw-brown) !important; border-radius: 14px 14px 14px 4px !important; max-width: 255px !important;}
#ctw-wrap .bb.bot.sk { border-radius: 14px !important; }
#ctw-wrap .bb.usr { background: var(--ctw-dark) !important; color: var(--ctw-white) !important; font-weight: 500 !important; border-radius: 14px 14px 4px 14px !important; max-width: 255px !important;}

/* Timestamp */
#ctw-wrap .t { font-size: 10px !important; color: var(--ctw-muted) !important; margin-top: 1px !important; padding-left: 33px !important; margin-bottom: 10px !important;}
#ctw-wrap .t.u { text-align: right !important; padding: 0 4px 0 0 !important; padding-left: 0 !important; }

/* Quick Replies */
#ctw-wrap .qr { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; padding-left: 33px !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; margin-top: 2px !important; margin-bottom: 12px !important;}
#ctw-wrap .qb {
    background: var(--ctw-white) !important; border: 1.5px solid var(--ctw-border) !important; border-radius: 18px !important;
    padding: 7px 16px !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--ctw-brown) !important;
    cursor: pointer !important; transition: all .2s !important; outline: none !important; margin: 0 !important;
}
#ctw-wrap .qb:hover { border-color: var(--ctw-gold) !important; color: var(--ctw-dark) !important; background: var(--ctw-light) !important; }

/* Upload button special style */
#ctw-wrap .qb.up { border-color: var(--ctw-gold) !important; background: var(--ctw-light) !important; }
#ctw-wrap .qb.up:hover { background: var(--ctw-sand) !important; }

/* File chips */
#ctw-wrap .file-chip {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    background: var(--ctw-sand) !important; border-radius: 12px !important;
    padding: 4px 10px !important; font-size: 11px !important; color: var(--ctw-brown) !important;
    margin: 2px 0 !important;
}

/* Progress bar */
#ctw-wrap .prog { padding: 0 16px !important; padding-bottom: 6px !important; background: var(--ctw-white) !important; flex-shrink: 0 !important; }
#ctw-wrap .prog-bar { height: 3px !important; background: var(--ctw-border) !important; border-radius: 3px !important; overflow: hidden !important; }
#ctw-wrap .prog-fill { height: 100% !important; background: var(--ctw-gold) !important; border-radius: 3px !important; transition: width 0.4s ease !important; }
#ctw-wrap .prog-txt { font-size: 9.5px !important; color: var(--ctw-muted) !important; margin-top: 3px !important; text-align: right !important; }

#ctw-wrap .g { height: 8px !important; }

/* Input Bar */
#ctw-wrap .ib { padding: 10px 14px !important; border-top: 1px solid var(--ctw-border) !important; background: var(--ctw-white) !important; display: flex !important; align-items: center !important; gap: 9px !important; flex-shrink: 0 !important; margin:0 !important;}
#ctw-wrap .ib input { flex: 1 !important; background: var(--ctw-light) !important; border: 1.5px solid transparent !important; border-radius: 22px !important; padding: 10px 16px !important; font-size: 13px !important; color: var(--ctw-dark) !important; outline: none !important; transition: border-color .2s !important; margin: 0 !important;}
#ctw-wrap .ib input::placeholder { color: var(--ctw-muted) !important; }
#ctw-wrap .ib input:focus { border-color: var(--ctw-gold-soft) !important; }
#ctw-wrap .sb { width: 36px !important; height: 36px !important; border-radius: 50% !important; border: none !important; background: var(--ctw-dark) !important; color: var(--ctw-white) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: opacity .2s !important; padding: 0 !important;}
#ctw-wrap .sb:hover { opacity: .8 !important; }
#ctw-wrap .sb svg { fill: none !important; }

/* Footer */
#ctw-wrap .ft { text-align: center !important; padding: 6px 0 8px !important; flex-shrink: 0 !important; background: var(--ctw-white) !important; margin: 0 !important;}
#ctw-wrap .ft span { font-size: 10.5px !important; color: var(--ctw-muted) !important; letter-spacing: .3px !important; padding: 0 !important; margin: 0 !important;}
#ctw-wrap .ft a { color: var(--ctw-gold) !important; text-decoration: none !important; font-weight: 600 !important; padding: 0 !important; margin: 0 !important;}

@keyframes f { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media(max-width: 480px) {
    #ctw-wrap .ctw-box { width: calc(100vw - 32px) !important; height: calc(100vh - 100px) !important; max-height: none !important;}
    #ctw-wrap { right: 16px !important; bottom: 16px !important; }
}
