body {
    background: #f3f4f6;
}

.stat-card {
    transition: box-shadow 0.15s ease-in-out;
}

.stat-card:hover {
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);
}

.stat-value {
    margin-top: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    color: #6b7280;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.page-header {
    gap: 0.75rem;
}

.table td,
.table th,
.break-anywhere {
    overflow-wrap: anywhere;
}

.chart-container {
    position: relative;
    min-height: 280px;
}

/* Summit brand palette (aligned with summitexplorerjd.ec: dark navy ink + green accent) */
.conversation-layout {
    --sn-brand: #3fa872;
    --sn-brand-dark: #1e5c38;
    --sn-brand-light: #4ebb7f;
    --sn-brand-soft: #e6f6ec;
    --sn-ink: #0c1625;
    --sn-slate: #566475;
    --sn-mist: #a8bbc8;
    --sn-border: #dde4e8;
}

.chat-card { position: relative; overflow: hidden; border: 0; box-shadow: 0 .25rem .75rem rgb(12 22 37 / 6%); }
.chat-card .card-header { border-bottom: 1px solid var(--sn-border); }
.chat-avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--sn-brand-light), var(--sn-brand-dark)); }
.chat-messages { min-height: 28rem; max-height: 68vh; overflow-y: auto; padding: 1.25rem; background-color: #f3f7f5; background-image: radial-gradient(rgb(12 22 37 / 4%) 1px, transparent 1px); background-size: 18px 18px; }
.chat-row { display: flex; margin-bottom: .65rem; }
.chat-row-inbound { justify-content: flex-start; }
.chat-row-outbound { justify-content: flex-end; }
.chat-bubble { max-width: min(78%, 34rem); padding: .55rem .7rem .3rem; border-radius: .7rem; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / 10%); overflow-wrap: anywhere; }
.chat-row-outbound .chat-bubble { background: var(--sn-brand-soft); }
.chat-row-audio .chat-bubble { width: min(100%, 24rem); }
.chat-text { white-space: pre-wrap; }
.chat-meta { margin-top: .2rem; color: var(--sn-slate); font-size: .7rem; text-align: right; }
.chat-image, .chat-video { display: block; width: 100%; max-height: 24rem; border-radius: .45rem; object-fit: contain; background: #111; }
.chat-audio { display: block; width: 100%; min-width: 0; }
.chat-media-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.chat-media-actions .btn { border-color: rgb(0 0 0 / 10%); }
.chat-bubble .btn-outline-primary, .chat-bubble .btn-outline-success { --bs-btn-color: var(--sn-brand-dark); --bs-btn-border-color: var(--sn-brand-light); --bs-btn-hover-bg: var(--sn-brand-light); --bs-btn-hover-border-color: var(--sn-brand-light); }
.chat-scroll-bottom { position: absolute; right: 1.25rem; bottom: 1rem; z-index: 5; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(0 0 0 / 12%); border-radius: 50%; color: var(--sn-slate); background: rgb(255 255 255 / 96%); box-shadow: 0 .3rem .8rem rgb(0 0 0 / 20%); transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease; }
.chat-scroll-bottom:hover { color: var(--sn-brand-dark); box-shadow: 0 .45rem 1rem rgb(0 0 0 / 25%); transform: translateY(-2px); }
.chat-scroll-bottom[hidden] { display: none; }
.conversation-media-preview { overflow: hidden; padding: .5rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-tertiary-bg); }
.conversation-media-preview img, .conversation-media-preview video { display: block; width: 100%; max-height: 14rem; object-fit: contain; border-radius: .4rem; background: #111; }
.conversation-media-preview audio { display: block; width: 100%; }
.chat-caption { white-space: pre-wrap; }
.conversation-composer { position: sticky; top: 1rem; border: 0; box-shadow: 0 .25rem .75rem rgb(12 22 37 / 6%); }

.conversation-badge-open { background: var(--sn-brand-soft); color: var(--sn-brand-dark); }
.conversation-badge-closed { background: #eef1f3; color: var(--sn-slate); }

/* Compact chat-style composer */
.conversation-attachment-panel { background: #f8faf9; border: 1px solid var(--sn-border); border-radius: .75rem; padding: .75rem; }
.conversation-input-bar { background: #fff; border: 1px solid var(--sn-border); border-radius: 1.5rem; padding: .35rem .5rem .35rem .5rem; transition: border-color .15s ease, box-shadow .15s ease; }
.conversation-input-bar:focus-within { border-color: var(--sn-brand-light); box-shadow: 0 0 0 .2rem rgb(78 187 127 / 15%); }
.conversation-plus-btn { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: none; background: var(--sn-brand-soft); color: var(--sn-brand-dark); display: grid; place-items: center; font-size: 1.1rem; line-height: 1; }
.conversation-plus-btn:hover { background: var(--sn-brand-light); color: #fff; }
.conversation-textarea { display: block; width: 100%; border: none; resize: none; max-height: 8rem; padding: .45rem .1rem; background: transparent; outline: none; font-size: .95rem; line-height: 1.35; }
.conversation-send-btn { flex: none; width: 2.35rem; height: 2.35rem; border-radius: 50%; border: none; background: var(--sn-brand-dark); color: #fff; display: grid; place-items: center; font-size: 1.05rem; transition: background .15s ease, transform .1s ease; }
.conversation-send-btn:hover { background: var(--sn-brand-light); }
.conversation-send-btn:active { transform: scale(.94); }
.conversation-type-pill { display: flex; align-items: center; gap: .4rem; background: var(--sn-brand-soft); color: var(--sn-brand-dark); border-radius: 1rem; padding: .4rem .7rem; font-size: .85rem; font-weight: 500; }
.conversation-type-option.dropdown-item:hover, .conversation-type-option.dropdown-item:focus { background: var(--sn-brand-soft); color: var(--sn-brand-dark); }

/* .table-stack: shared responsive pattern for every admin list table.
   Below the breakpoint each <tr> becomes a card and each <td> a
   label/value row (label from its own data-label attribute), instead of
   relying only on table-responsive's horizontal scroll. */
@media (max-width: 767.98px) {
    .table-stack thead {
        display: none;
    }

    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tbody tr {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
    }

    .table-stack tbody tr:last-child {
        margin-bottom: 0;
    }

    .table-stack tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.35rem 0;
        text-align: right;
        border: 0;
    }

    .table-stack tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-weight: 600;
        color: var(--bs-secondary-color);
        text-align: left;
    }

    .table-stack tbody td[data-label=""],
    .table-stack tbody td:not([data-label])::before {
        display: none;
    }
}

.variables-panel {
    min-height: 3.25rem;
    padding: 0.75rem;
    background: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.variable-chip {
    font-family: var(--bs-font-monospace);
}

.CodeMirror {
    height: auto;
    min-height: 17rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: 0.925rem;
}

.CodeMirror-focused {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.CodeMirror-scroll {
    min-height: 17rem;
}

@media (max-width: 575.98px) {
    .page-header {
        align-items: stretch !important;
        flex-direction: column;
    }

    .page-header .btn {
        align-self: flex-start;
    }

    .responsive-input-group {
        display: flex;
        gap: 0.5rem;
    }

    .responsive-input-group > .form-control,
    .responsive-input-group > .btn {
        border-radius: var(--bs-border-radius) !important;
        width: 100%;
    }

    .display-5 {
        font-size: calc(1.55rem + 1.5vw);
    }

    .card-body {
        padding: 1rem;
    }

    .chart-container {
        min-height: 240px;
    }

    .chat-messages { min-height: 24rem; max-height: 62vh; padding: .75rem; }
    .chat-bubble { max-width: 90%; }
    .chat-row-audio .chat-bubble { width: 90%; max-width: 22rem; }
    .chat-scroll-bottom { right: 1rem; bottom: .75rem; }
    .conversation-composer { position: static; }
}