/* WhatsApp Inbox — painel embutido no layout padrão do CRM */

.pagina--inbox {
    flex: 1 1 auto;
    min-height: calc(100vh - var(--crm-header-h) - 3rem);
}

.wa-inbox-shell {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 560px;
    height: calc(100vh - var(--crm-header-h) - 8.25rem);
    border: 1px solid #d1d7db;
    border-radius: 10px;
    overflow: hidden;
    background: #d1d7db;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 16px rgba(11, 20, 26, 0.08);
}

.wa-inbox-shell.wa-dark {
    border-color: #222d34;
    background: #222e35;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.wa-inbox-shell *,
.wa-app * {
    box-sizing: border-box;
}

.wa-app {
    --wa-bg-app: #fff;
    --wa-bg-surface: #fff;
    --wa-bg-header: #f0f2f5;
    --wa-bg-search: #f0f2f5;
    --wa-bg-input: #fff;
    --wa-bg-chat: #efeae2;
    --wa-bg-hover: #f5f6f6;
    --wa-bg-active: #f0f2f5;
    --wa-bg-bubble-in: #fff;
    --wa-bg-bubble-out: #d9fdd3;
    --wa-bg-empty: #f0f2f5;
    --wa-bg-menu: #fff;
    --wa-bg-menu-hover: #f5f6f6;
    --wa-border: #e9edef;
    --wa-border-soft: #f0f2f5;
    --wa-text-primary: #111b21;
    --wa-text-secondary: #667781;
    --wa-text-muted: #667781;
    --wa-text-empty-title: #41525d;
    --wa-icon: #54656f;
    --wa-icon-hover-bg: rgba(11, 20, 26, 0.06);
    --wa-shadow: 0 6px 18px rgba(11, 20, 26, 0.12);
    --wa-bubble-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    --wa-menu-shadow: 0 2px 5px rgba(11, 20, 26, 0.26), 0 8px 18px rgba(11, 20, 26, 0.12);
    --wa-chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23d4cdc4' fill-opacity='0.45'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='130' cy='70' r='1.5'/%3E%3Ccircle cx='220' cy='40' r='2'/%3E%3Ccircle cx='80' cy='140' r='1.5'/%3E%3Ccircle cx='180' cy='120' r='2'/%3E%3Ccircle cx='260' cy='160' r='1.5'/%3E%3Ccircle cx='40' cy='230' r='2'/%3E%3Ccircle cx='150' cy='210' r='1.5'/%3E%3Ccircle cx='240' cy='250' r='2'/%3E%3C/g%3E%3C/svg%3E");
    --wa-badge-bg: #fee2e2;
    --wa-badge-text: #b91c1c;
    --wa-send-disabled: #8696a0;

    display: flex !important;
    flex-direction: row;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--wa-bg-app);
    box-shadow: none;
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--wa-text-primary);
    overflow: hidden;
}

.wa-app.wa-dark {
    --wa-bg-app: #111b21;
    --wa-bg-surface: #111b21;
    --wa-bg-header: #202c33;
    --wa-bg-search: #202c33;
    --wa-bg-input: #2a3942;
    --wa-bg-chat: #0b141a;
    --wa-bg-hover: #202c33;
    --wa-bg-active: #2a3942;
    --wa-bg-bubble-in: #202c33;
    --wa-bg-bubble-out: #005c4b;
    --wa-bg-empty: #222e35;
    --wa-bg-menu: #233138;
    --wa-bg-menu-hover: #182229;
    --wa-border: #222d34;
    --wa-border-soft: #222d34;
    --wa-text-primary: #e9edef;
    --wa-text-secondary: #8696a0;
    --wa-text-muted: #8696a0;
    --wa-text-empty-title: #d1d7db;
    --wa-icon: #aebac1;
    --wa-icon-hover-bg: rgba(134, 150, 160, 0.12);
    --wa-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    --wa-bubble-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.25);
    --wa-menu-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    --wa-chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='130' cy='70' r='1.5'/%3E%3Ccircle cx='220' cy='40' r='2'/%3E%3Ccircle cx='80' cy='140' r='1.5'/%3E%3Ccircle cx='180' cy='120' r='2'/%3E%3Ccircle cx='260' cy='160' r='1.5'/%3E%3Ccircle cx='40' cy='230' r='2'/%3E%3Ccircle cx='150' cy='210' r='1.5'/%3E%3Ccircle cx='240' cy='250' r='2'/%3E%3C/g%3E%3C/svg%3E");
    --wa-badge-bg: rgba(239, 68, 68, 0.18);
    --wa-badge-text: #fca5a5;
    --wa-send-disabled: #54656f;
}

.wa-sidebar {
    width: 30%;
    min-width: 340px;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid var(--wa-border);
    background: var(--wa-bg-surface);
    overflow: hidden;
}

.wa-sidebar-header {
    height: 60px;
    min-height: 60px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--wa-bg-header);
    flex-shrink: 0;
}

.wa-sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wa-sidebar-title h1 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--wa-text-primary);
}

.wa-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wa-status-dot.connected { background: #25d366; }
.wa-status-dot.waiting { background: #f59e0b; }
.wa-status-dot.disconnected { background: #ef4444; }

.wa-icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--wa-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.wa-icon-btn:hover {
    background: var(--wa-icon-hover-bg);
}

.wa-search-wrap {
    padding: 8px 12px;
    background: var(--wa-bg-surface);
    border-bottom: 1px solid var(--wa-border);
    flex-shrink: 0;
}

.wa-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--wa-bg-search);
    border-radius: 8px;
    padding: 0 12px;
    height: 35px;
}

.wa-search input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 0.875rem;
    color: var(--wa-text-primary);
    min-width: 0;
}

.wa-search input::placeholder {
    color: var(--wa-text-secondary);
}

.wa-chat-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--wa-bg-surface);
    min-height: 0;
}

.wa-chat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--wa-border-soft);
    transition: background 0.12s ease;
}

.wa-chat-item:hover {
    background: var(--wa-bg-hover);
}

.wa-chat-item.active {
    background: var(--wa-bg-active);
}

.wa-avatar {
    width: 49px;
    height: 49px;
    min-width: 49px;
    min-height: 49px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    text-transform: uppercase;
}

.wa-chat-item-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.wa-chat-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.wa-chat-item-name {
    font-size: 1rem;
    color: var(--wa-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.wa-chat-item-time {
    font-size: 0.75rem;
    color: var(--wa-text-secondary);
    flex-shrink: 0;
}

.wa-chat-item-preview {
    font-size: 0.875rem;
    color: var(--wa-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-badge-blocked {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--wa-badge-bg);
    color: var(--wa-badge-text);
    font-size: 0.65rem;
    font-weight: 600;
    vertical-align: middle;
}

.wa-empty-list {
    padding: 32px 24px;
    text-align: center;
    color: var(--wa-text-secondary);
    font-size: 0.875rem;
}

.wa-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--wa-bg-chat);
    overflow: hidden;
}

.wa-chat-header {
    height: 60px;
    min-height: 60px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--wa-bg-header);
    border-left: 1px solid var(--wa-border);
    flex-shrink: 0;
}

.wa-chat-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.wa-chat-header-text {
    min-width: 0;
}

.wa-chat-header-name {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--wa-text-primary);
}

.wa-chat-header-sub {
    font-size: 0.8125rem;
    color: var(--wa-text-secondary);
}

.wa-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wa-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 60px;
    background-color: var(--wa-bg-chat);
    background-image: var(--wa-chat-pattern);
    min-height: 0;
}

.wa-message-row {
    display: flex;
    margin-bottom: 8px;
}

.wa-message-row.in {
    justify-content: flex-start;
}

.wa-message-row.out {
    justify-content: flex-end;
}

.wa-bubble {
    max-width: min(65%, 520px);
    padding: 6px 8px 8px 9px;
    border-radius: 8px;
    box-shadow: var(--wa-bubble-shadow);
    position: relative;
    word-wrap: break-word;
}

.wa-bubble.in {
    background: var(--wa-bg-bubble-in);
    border-top-left-radius: 0;
}

.wa-bubble.out {
    background: var(--wa-bg-bubble-out);
    border-top-right-radius: 0;
}

.wa-bubble-text {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--wa-text-primary);
    white-space: pre-wrap;
}

.wa-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
    float: right;
    margin-left: 12px;
    position: relative;
    top: 4px;
}

.wa-bubble-time {
    font-size: 0.6875rem;
    color: var(--wa-text-secondary);
}

.wa-bubble-check {
    font-size: 0.875rem;
    color: #53bdeb;
    line-height: 1;
}

.wa-bubble-error {
    font-size: 0.75rem;
    color: #f87171;
    margin-top: 4px;
    clear: both;
}

.wa-composer-wrap {
    padding: 10px 16px;
    background: var(--wa-bg-header);
    border-left: 1px solid var(--wa-border);
    flex-shrink: 0;
}

.wa-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.wa-composer-input-wrap {
    flex: 1;
    background: var(--wa-bg-input);
    border-radius: 8px;
    padding: 9px 12px;
    min-height: 42px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.wa-composer textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: 0.9375rem;
    line-height: 1.35;
    font-family: inherit;
    color: var(--wa-text-primary);
    max-height: 120px;
    background: transparent;
    min-width: 0;
}

.wa-composer textarea::placeholder {
    color: var(--wa-text-secondary);
}

.wa-send-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #008069;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
    padding: 0;
}

.wa-send-btn:disabled {
    background: var(--wa-send-disabled);
    cursor: default;
}

.wa-send-btn:not(:disabled):hover {
    background: #006d59;
}

.wa-empty-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px;
    border-bottom: 6px solid #25d366;
    background: var(--wa-bg-empty);
    min-height: 0;
    overflow: hidden;
}

.wa-empty-chat-icon {
    width: 320px;
    max-width: 70%;
    height: auto;
    margin-bottom: 28px;
    opacity: 0.85;
}

.wa-app.wa-dark .wa-empty-chat-icon path:first-child {
    fill: #1f2c34;
}

.wa-empty-chat h2 {
    margin: 0 0 12px;
    font-size: 2rem;
    font-weight: 300;
    color: var(--wa-text-empty-title);
}

.wa-empty-chat p {
    margin: 0;
    max-width: 560px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--wa-text-secondary);
}

.wa-alert-wrap {
    padding: 24px;
}

.wa-menu {
    position: relative;
}

.wa-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--wa-bg-menu);
    border-radius: 8px;
    box-shadow: var(--wa-menu-shadow);
    padding: 8px 0;
    z-index: 20;
}

.wa-menu-item {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 12px 24px;
    font-size: 0.875rem;
    color: var(--wa-text-primary);
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.wa-menu-item:hover {
    background: var(--wa-bg-menu-hover);
}

.wa-menu-item.danger {
    color: #f87171;
}

.wa-menu-item-muted {
    cursor: default;
    color: var(--wa-text-muted);
}

.wa-menu-item-muted:hover {
    background: transparent;
}

.wa-back-btn {
    display: none;
}

@media (max-width: 900px) {
    .wa-app.wa-chat-open .wa-sidebar {
        display: none;
    }

    .wa-back-btn {
        display: inline-flex;
    }

    .wa-messages {
        padding: 16px 12px;
    }

    .wa-sidebar {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}