:root { --wsi-blue: #0073aa; --wsi-bg: #f0f2f5; --wsi-border: #dcdcde; --wsi-green: #10b981; --wsi-red: #ef4444; --wsi-wa: #25d366; }
.wsi-wrapper { margin: 20px 20px 0 0; font-family: -apple-system, sans-serif; }
.wsi-header { background: #fff; padding: 25px 40px; border: 1px solid var(--wsi-border); border-radius: 12px 12px 0 0; }
.wsi-logo { font-size: 26px; font-weight: 800; }
.wsi-logo span { color: var(--wsi-blue); font-weight: 300; }
.wsi-nav { display: flex; background: #fff; padding: 0 40px; border: 1px solid var(--wsi-border); border-top: none; gap: 30px; }
.wsi-nav-item { padding: 18px 0; text-decoration: none; color: #64748b; font-weight: 600; border-bottom: 3px solid transparent; font-size: 14px; transition: 0.2s; }
.wsi-nav-item.is-active { color: var(--wsi-blue); border-bottom-color: var(--wsi-blue); }
.wsi-content { background: var(--wsi-bg); padding: 40px; border: 1px solid var(--wsi-border); border-top: none; border-radius: 0 0 12px 12px; }
.wsi-card { background: #fff; padding: 30px; border-radius: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid var(--wsi-border); }
.wsi-module-grid { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.wsi-module-card { width: 220px; padding: 20px !important; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.wsi-module-card h4 { margin: 0; font-size: 15px; color: #1e293b; }
.wsi-wh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; margin-top: 20px; }
.wsi-wh-card { background: #fff; padding: 15px 20px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: 0.2s; }
.wsi-webhook-toggle { cursor: pointer; }
.wsi-webhook-toggle:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.wsi-wh-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.wsi-wh-card.active { border-left: 4px solid var(--wsi-green); }
.wsi-wh-card.active .wsi-wh-dot { background: var(--wsi-green); box-shadow: 0 0 8px var(--wsi-green); }
.wsi-wh-card.inactive { border-left: 4px solid var(--wsi-red); }
.wsi-wh-card.inactive .wsi-wh-dot { background: var(--wsi-red); }
.wsi-wh-info { display: flex; flex-direction: column; }
.wsi-wh-name { font-weight: 700; font-size: 13px; }
.wsi-wh-type { font-size: 11px; text-transform: uppercase; color: #64748b; }
.wsi-input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; color: #334155; font-size: 14px; box-sizing: border-box; }
.wsi-table { width: 100%; border-collapse: collapse; }
.wsi-table td { padding: 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.wsi-table th { text-align: left; padding: 12px; background: #f8fafc; color: #64748b; font-size: 13px; }
.wsi-align-center { text-align: center !important; }
.wsi-align-center .wsi-icon-picker-box, .wsi-align-center .wsi-switch { display: inline-flex !important; margin: 0 auto !important; }
.wsi-switch { position: relative; display: inline-block; width: 44px; height: 22px; vertical-align: middle; }
.wsi-switch input { opacity: 0; width: 0; height: 0; }
.wsi-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 22px; }
.wsi-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .wsi-slider { background-color: var(--wsi-blue); }
input:checked + .wsi-slider:before { transform: translateX(22px); }
.wsi-del { background:none; border:1px solid var(--wsi-red); color:var(--wsi-red); border-radius:4px; padding:2px 10px; font-size:20px; cursor:pointer;}
.wsi-icon-picker-box { position: relative; }
.wsi-selected-icon { width: 40px; height: 40px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wsi-icons-grid { display: none; position: absolute; top: 45px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--wsi-border); padding: 8px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); grid-template-columns: repeat(2, 1fr); gap: 5px; z-index: 99; width: 80px; }
.wsi-grid-4 { grid-template-columns: repeat(4, 1fr) !important; width: 160px !important; }
.wsi-icons-grid .dashicons { font-size: 20px; padding: 8px; cursor: pointer; border-radius: 4px; }
.wsi-icons-grid .dashicons:hover { background: var(--wsi-bg); color: var(--wsi-blue); }
.chatbot-automacao-container { display: flex; gap: 30px; align-items: flex-start; }
.chatbot-settings-column { flex: 1; }
.chatbot-field-group { margin-bottom: 25px; }
.chatbot-field-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; }
#preview-chat-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
#preview-chat-btn svg { width: 30px; height: 30px; fill: white; }
#preview-chat-btn img { width: 35px; height: 35px; object-fit: contain; }
.preview-device-frame { background-color: #f0f0f1; border: 1px solid #ddd; border-radius: 8px; box-shadow: inset 0 0 20px rgba(0,0,0,0.05); width: 100%; min-height: 520px; display: flex; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box; }
#preview-chat-window { width: 300px; background: white; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ddd; position: relative; }
#preview-chat-header { color: white; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
#preview-chat-body { flex: 1; padding: 15px; background: #f9f9f9; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.preview-msg { padding: 8px 12px; border-radius: 18px; font-size: 13px; max-width: 80%; }
.preview-msg-bot { background: white; align-self: flex-start; border: 1px solid #eee; color: #334155; }
.preview-msg-user { color: white; align-self: flex-end; padding: 8px 12px; background: var(--wsi-blue); }
#preview-chat-input-area { padding: 10px; background: white; border-top: 1px solid #ddd; display: flex; gap: 5px; }
#preview-chat-input-area input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 20px; }
.wsi-selector-row { display: flex; background: #f1f5f9; padding: 4px; border-radius: 8px; border: 1px solid #cbd5e1; width: fit-content; max-width: 100%; }
.wsi-sel-btn { position: relative; cursor: pointer; flex: 1; }
.wsi-sel-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.wsi-sel-btn span { display: block; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: #64748b; transition: 0.2s; text-align: center; white-space: nowrap; }
.wsi-sel-btn input:checked + span { background: #fff; color: var(--wsi-blue); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.wp-color-result.button { margin: 0 0 0 5px; height: 40px; }
.column-wsi_img { width: 60px; }
.wp-list-table th.column-wsi_tts { text-align: center !important; width: 30px !important; }
td.column-wsi_tts { text-align: center !important; vertical-align: top !important; padding-top: 10px !important; }
.wsi-tts-cell { display: flex !important; justify-content: center !important; align-items: flex-start !important; height: 32px !important; margin: 0 auto !important; }
.wsi-tts-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 4px !important; border: 1px solid #0073aa !important; background: #f0f6fc !important; cursor: pointer; }
.wsi-tts-btn .dashicons { font-size: 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; color: #0073aa !important; }
.wsi-tts-btn:hover { background: #e2e6ea !important; border-color: #005a87 !important; }
.spin { animation: wsi-spin 1s infinite linear; }
@keyframes wsi-spin { from {transform:rotate(0deg);} to {transform:rotate(359deg);} }
#wsi-chat-btn { position:fixed; bottom:20px; right:20px; width:60px; height:60px; border-radius:50%; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer; box-shadow:0 4px 15px rgba(0,0,0,0.2); z-index:999999; padding:0 !important; overflow:hidden !important; }
.wsi-chat-icon-main { width:100%; height:100%; display:flex !important; align-items:center !important; justify-content:center !important; }
.wsi-chat-icon-main svg, .wsi-chat-icon-main img { width:32px !important; height:32px !important; display:block !important; margin:0 !important; }
.wsi-chat-icon-close { width:100%; height:100%; display:none; align-items:center !important; justify-content:center !important; font-size:24px; color:#fff; line-height:0 !important; margin:0 !important; }
#wsi-chat-window { position:fixed; bottom:90px; right:20px; width:350px; background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.2); display:none; flex-direction:column; z-index:999999; overflow:hidden; font-family:sans-serif; }
#wsi-chat-header { color:#fff; padding:15px; font-weight:bold; display:flex; justify-content:space-between; }
#wsi-chat-body { flex:1; padding:15px; background:#f9f9f9; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.wsi-m { max-width:80%; padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.4; position:relative; word-wrap:break-word; box-shadow:0 1px 1px rgba(0,0,0,0.05); }
.wsi-m-bot { align-self:flex-start; background:#fff; color:#1e293b; border:1px solid #e2e8f0; }
.wsi-m-user { align-self:flex-end; background:var(--wsi-blue); color:#fff; }
#wsi-chat-input-area { padding:10px; background:#fff; border-top:1px solid #eee; display:flex; gap:10px; }
#wsi-chat-input { flex:1; border:1px solid #ddd; padding:8px 12px; border-radius:20px; outline:none; color:#333 !important; }
#wsi-chat-send { background:none; border:none; font-weight:bold; cursor:pointer; }
#toplevel_page_wsi-hub .wp-menu-image { background-color: currentColor; -webkit-mask-image: url('icone.svg'); mask-image: url('icone.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 28px auto; mask-size: 28px auto; -webkit-mask-position: center 2px; mask-position: center 2px; opacity: 0.6; transition: opacity 0.1s ease; }
#toplevel_page_wsi-hub:hover .wp-menu-image, #toplevel_page_wsi-hub.wp-has-current-submenu .wp-menu-image, #toplevel_page_wsi-hub.current .wp-menu-image { opacity: 1; }
.wsi-group-card { background:#fff; border:1px solid #e2e8f0; border-radius:6px; margin-bottom:20px; overflow:hidden; }
.wsi-group-header-compact { background:#f1f5f9; padding:15px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e2e8f0; cursor:pointer; transition: background 0.2s; }
.wsi-group-header-compact:hover { background: #eef2f6; }
.wsi-toggle-icon { color: #64748b; font-size: 20px; transition: transform 0.2s; }
.wsi-toggle-icon.rotated { transform: rotate(90deg); }
.wsi-input-transparent { background:transparent; border:none; font-size:16px; font-weight:bold; color:#334155; width:100%; outline:none; }
.wsi-input-transparent:focus { border-bottom:1px solid var(--wsi-blue); }
.wsi-btn-del-group { color:#ef4444; cursor:pointer; font-size:24px; width:24px; height:24px; transition:0.2s; }
.wsi-btn-del-group:hover { color:#b91c1c; transform:scale(1.1); }
.wsi-input-inline { display:inline-block; width:auto; padding:5px 10px; border:1px solid #cbd5e1; border-radius:4px; font-size:12px; }
.wsi-fields-container { padding:15px; min-height:50px; background:#f8fafc; }
.wsi-group-footer { padding:15px; background:#fff; border-top:1px solid #e2e8f0; text-align:right; }
.wsi-field-card { background:#fff; border:1px solid #cbd5e1; border-radius:6px; margin-bottom:10px; transition:box-shadow 0.2s; }
.wsi-field-card:hover { box-shadow:0 4px 6px rgba(0,0,0,0.05); }
.wsi-field-header { padding:10px 15px; display:flex; align-items:center; gap:12px; cursor:move; background:#fff; border-bottom:1px solid #f1f5f9; }
.wsi-field-title { font-weight:600; font-size:14px; color:#334155; }
.wsi-field-type { background:#e0f2fe; color:#0284c7; font-size:10px; text-transform:uppercase; padding:2px 8px; border-radius:10px; font-weight:700; }
.wsi-field-actions { margin-left:auto; color:#94a3b8; cursor:pointer; }
.wsi-field-actions:hover { color:var(--wsi-red); }
.wsi-field-body { padding:15px; }
.wsi-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.wsi-sortable-placeholder { border:2px dashed #cbd5e1; background:#f1f5f9; height:50px; margin-bottom:10px; border-radius:6px; }
.wsi-acf-grid-container { display:flex; flex-wrap:wrap; gap:20px; max-width:100%; align-items:flex-end; }
.wsi-acf-cell { box-sizing:border-box; }
.wsi-col-auto { flex: 0 1 auto; min-width: 150px; }
.wsi-col-grow { flex: 1 1 300px; }
.wsi-col-full { flex: 1 1 100%; width: 100%; }
.wsi-col-100 { flex: 1 1 100%; width: 100%; }
.wsi-col-50 { flex: 0 0 calc(50% - 10px); width: calc(50% - 10px); }
.wsi-col-33 { flex: 0 0 calc(33.333% - 14px); width: calc(33.333% - 14px); }
.wsi-acf-label { display:block; font-weight:600; margin-bottom:8px; font-size:13px; color:#1d2327; }
.wsi-media-preview img { max-width:150px; height:auto; border-radius:4px; border:1px solid #ddd; margin-bottom:10px; display:block; }
.wsi-gallery-grid { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.wsi-gal-item img { width:80px; height:80px; object-fit:cover; border-radius:4px; border:1px solid #ddd; }
.wsi-acf-cell input, .wsi-acf-cell select, .wsi-acf-cell textarea { box-sizing: border-box; width: 100%; max-width: 100%; }
.wsi-acf-cell input[type="checkbox"], .wsi-acf-cell input[type="radio"] { width: auto; margin-right: 5px; }
.wsi-validation-bar { position: fixed; top: 46px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 600px; background: #e5f5fa; border-left: 4px solid var(--wsi-blue); color: #1d2327; padding: 15px 20px; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); font-weight: 600; display: none; font-size: 14px; z-index: 999999; text-align: center; }
@media (min-width: 783px) { .wsi-validation-bar { top: 46px; }}
.wsi-validation-bar .dashicons { color: var(--wsi-blue); font-size: 20px; width: 20px; height: 20px; margin-right: 8px; vertical-align: bottom; }
.wsi-typing-box { align-self: flex-start; background: #fff; padding: 12px 15px; border-radius: 18px; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.05); width: fit-content; border: 1px solid #e2e8f0; }
.wsi-typing-dot { width: 6px; height: 6px; background-color: #94a3b8; border-radius: 50%; animation: wsi-dot-bounce 1.4s infinite ease-in-out both; }
.wsi-typing-dot:nth-child(1) { animation-delay: -0.32s; }
.wsi-typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes wsi-dot-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
#wsi-chat-input:disabled, #wsi-chat-send:disabled { opacity: 0.6; cursor: not-allowed; background-color: #f5f5f5; }