/* Syntrix AI CRM – small additions on top of Sneat */
.brand-name { font-size: 1.15rem !important; letter-spacing: -.2px; text-transform: none !important; white-space: nowrap; }
.menu-agency { margin-top: auto; border-top: 1px solid var(--bs-border-color); }
.demo-badge { font-size: .65rem; letter-spacing: .5px; }
.kpi-card .avatar { width: 2.6rem; height: 2.6rem; }
.kpi-card .kpi-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.table td, .table th { vertical-align: middle; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.text-pre { white-space: pre-line; }
.min-w-0 { min-width: 0; }
.card-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }

/* ---------- Inbox (WhatsApp style) ---------- */
.inbox-wrap { display: flex; height: calc(100vh - 12.5rem); min-height: 480px; overflow: hidden; }
.inbox-list { width: 340px; flex-shrink: 0; border-right: 1px solid var(--bs-border-color); display: flex; flex-direction: column; }
.inbox-list .list-scroll { overflow-y: auto; flex: 1; }
.inbox-filters { display: flex; gap: .35rem; flex-wrap: wrap; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); scrollbar-width: none; }
.inbox-filters .btn { white-space: nowrap; }
.chat-item { display: flex; gap: .75rem; padding: .8rem 1rem; border-bottom: 1px solid var(--bs-border-color); color: inherit; text-decoration: none; }
.chat-item:hover { background: rgba(105, 108, 255, .05); }
.chat-item.active { background: rgba(105, 108, 255, .12); }
.chat-item .preview { font-size: .8125rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .when { font-size: .72rem; color: var(--bs-secondary-color); white-space: nowrap; }
.inbox-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-head { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.chat-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; background: #efeae2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23d8d2c8'/%3E%3C/svg%3E"); }
.bubble-row { display: flex; margin-bottom: .45rem; }
.bubble-row.out { justify-content: flex-end; }
.bubble { max-width: min(78%, 560px); padding: .45rem .7rem .3rem; border-radius: .6rem; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); background: #fff; color: #111b21; font-size: .9rem; white-space: pre-wrap; word-wrap: break-word; }
.bubble-row.out .bubble { background: #d9fdd3; }
.bubble-row.out.human .bubble { background: #e0e7ff; }
.bubble-row.out.needs_template .bubble, .bubble-row.out.failed .bubble { background: #ffe3e3; }
.bubble .meta { display: block; text-align: right; font-size: .68rem; color: #667781; margin-top: .15rem; }
.bubble .who { font-size: .7rem; font-weight: 600; display: block; margin-bottom: .1rem; }
.bubble .attach { display: flex; align-items: center; gap: .5rem; padding: .5rem; border-radius: .4rem; background: rgba(0,0,0,.05); margin-bottom: .25rem; text-decoration: none; color: inherit; }
.bubble img.attach-img { max-width: 220px; border-radius: .4rem; display: block; margin-bottom: .25rem; }
.chat-day { text-align: center; margin: .75rem 0; }
.chat-day span { background: #fff; color: #54656f; font-size: .72rem; padding: .2rem .6rem; border-radius: .5rem; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.chat-compose { padding: .75rem 1rem; border-top: 1px solid var(--bs-border-color); background: var(--bs-paper-bg, #fff); }
.chat-compose textarea { resize: none; }
.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--bs-secondary-color); text-align: center; padding: 2rem; }
.handoff-bar { background: #fff4e5; color: #8a5300; padding: .5rem 1rem; font-size: .85rem; border-bottom: 1px solid #ffe0b2; }
.window-bar { background: #fdecec; color: #a12622; padding: .5rem 1rem; font-size: .85rem; }

/* ---------- Simulator ---------- */
.phone { max-width: 400px; margin: 0 auto; border-radius: 1.5rem; overflow: hidden; border: 8px solid #222; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.phone .phone-head { background: #075e54; color: #fff; padding: .75rem 1rem; display: flex; align-items: center; gap: .6rem; }
.phone .chat-body { height: 440px; }
.phone .bubble-row.in { justify-content: flex-end; }
.phone .bubble-row.in .bubble { background: #d9fdd3; }
.phone .bubble-row.out { justify-content: flex-start; }
.phone .bubble-row.out .bubble { background: #fff; }

@media (max-width: 991.98px) {
  .inbox-wrap { height: calc(100vh - 9.5rem); }
  .inbox-list { width: 100%; border-right: 0; }
  .inbox-wrap.has-chat .inbox-list { display: none; }
  .inbox-wrap:not(.has-chat) .inbox-chat { display: none; }
  .bubble { max-width: 88%; }
  .container-p-y.inbox-page { padding-top: .5rem !important; }
}
@media (max-width: 575.98px) {
  .layout-navbar { margin-top: .5rem !important; }
  .chat-head .btn-group-sm .btn { padding: .25rem .5rem; }
  .kpi-card .kpi-value { font-size: 1.35rem; }
  .card-body { padding: 1rem; }
}

/* Sneat Pro-style button variants (not in the free build) */
.btn-label-primary { color: var(--bs-primary); background-color: var(--bs-primary-bg-subtle); border-color: transparent; }
.btn-label-primary:hover, .btn-label-primary:focus, .btn-label-primary.active { color: #fff; background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-text-primary { color: var(--bs-primary); background: transparent; border-color: transparent; }
.btn-text-primary:hover { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.btn-label-secondary { color: var(--bs-secondary); background-color: var(--bs-secondary-bg-subtle); border-color: transparent; }
.btn-label-secondary:hover, .btn-label-secondary:focus, .btn-label-secondary.active { color: #fff; background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
.btn-text-secondary { color: var(--bs-secondary); background: transparent; border-color: transparent; }
.btn-text-secondary:hover { background-color: var(--bs-secondary-bg-subtle); color: var(--bs-secondary); }
.btn-label-success { color: var(--bs-success); background-color: var(--bs-success-bg-subtle); border-color: transparent; }
.btn-label-success:hover, .btn-label-success:focus, .btn-label-success.active { color: #fff; background-color: var(--bs-success); border-color: var(--bs-success); }
.btn-text-success { color: var(--bs-success); background: transparent; border-color: transparent; }
.btn-text-success:hover { background-color: var(--bs-success-bg-subtle); color: var(--bs-success); }
.btn-label-info { color: var(--bs-info); background-color: var(--bs-info-bg-subtle); border-color: transparent; }
.btn-label-info:hover, .btn-label-info:focus, .btn-label-info.active { color: #fff; background-color: var(--bs-info); border-color: var(--bs-info); }
.btn-text-info { color: var(--bs-info); background: transparent; border-color: transparent; }
.btn-text-info:hover { background-color: var(--bs-info-bg-subtle); color: var(--bs-info); }
.btn-label-warning { color: var(--bs-warning); background-color: var(--bs-warning-bg-subtle); border-color: transparent; }
.btn-label-warning:hover, .btn-label-warning:focus, .btn-label-warning.active { color: #fff; background-color: var(--bs-warning); border-color: var(--bs-warning); }
.btn-text-warning { color: var(--bs-warning); background: transparent; border-color: transparent; }
.btn-text-warning:hover { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning); }
.btn-label-danger { color: var(--bs-danger); background-color: var(--bs-danger-bg-subtle); border-color: transparent; }
.btn-label-danger:hover, .btn-label-danger:focus, .btn-label-danger.active { color: #fff; background-color: var(--bs-danger); border-color: var(--bs-danger); }
.btn-text-danger { color: var(--bs-danger); background: transparent; border-color: transparent; }
.btn-text-danger:hover { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.btn-label-dark { color: var(--bs-dark); background-color: var(--bs-dark-bg-subtle); border-color: transparent; }
.btn-label-dark:hover, .btn-label-dark:focus, .btn-label-dark.active { color: #fff; background-color: var(--bs-dark); border-color: var(--bs-dark); }
.btn-text-dark { color: var(--bs-dark); background: transparent; border-color: transparent; }
.btn-text-dark:hover { background-color: var(--bs-dark-bg-subtle); color: var(--bs-dark); }