/* ── OneChat Unified Design System (Modern Slate Canvas & Elevated Cards) ── */
:root {
    --bg-dark: #f1f5f9;
    --bg-sidebar: #ffffff;
    --bg-panel: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f8fafc;
    --bg-active: #f1f5f9;
    --border: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --green: #16a34a;
    --green-dim: rgba(22,163,74,0.1);
    --red: #ef4444;
    --red-dim: rgba(239,68,68,0.1);
    --blue: #2563eb;
    --blue-dim: rgba(37,99,235,0.1);
    --orange: #f59e0b;
    --purple: #8b5cf6;
    --agent-colors: #e91e63, #9c27b0, #3f51b5, #009688, #ff5722, #795548, #607d8b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f1f5f9;
    color: #0f172a;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* App Layout */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ── Icon Sidebar (OneChat Dark Navy Style) ── */
#icon-sidebar {
    width: 68px; background: #0f172a; border-right: 1px solid #1e293b;
    display: flex; flex-direction: column; align-items: center; flex-shrink: 0; z-index: 10;
    padding: 14px 0 10px; user-select: none;
}
.onechat-brand-logo {
    width: 40px; height: 40px; border-radius: 50%; background: #2563eb;
    display: flex; align-items: center; justify-content: center;
    color: #fff; margin-bottom: 18px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(37,99,235,0.4); transition: transform 0.15s;
}
.onechat-brand-logo:hover { transform: scale(1.05); }
.oc-logo-text { font-size: 14px; font-weight: 800; letter-spacing: -0.5px; }
.nav-icon {
    width: 54px; height: 48px; border-radius: 8px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; margin-bottom: 6px; color: #94a3b8; transition: all 0.15s; position: relative;
    padding: 4px 2px; text-decoration: none;
}
.nav-icon:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
.nav-icon.active { background: #2563eb; color: #ffffff; }
.nav-icon svg { width: 18px; height: 18px; fill: currentColor; }
.nav-icon .nav-label {
    font-size: 9.5px; font-weight: 500; margin-top: 3px; line-height: 1; text-align: center;
    letter-spacing: 0.1px; max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-icon .nav-badge {
    position: absolute; top: 3px; right: 8px; background: #ef4444; color: #fff;
    font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 1.5px solid #0f172a;
}
.icon-sidebar-top { display: flex; flex-direction: column; align-items: center; flex: 1; width: 100%; }
.icon-sidebar-bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.agent-avatar-small {
    width: 32px; height: 32px; border-radius: 50%; background: #3b82f6;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; margin-top: 6px;
    border: 2px solid rgba(255,255,255,0.2);
}

/* ── User Profile Popup Menu (OneChat Style) ── */
.profile-menu-overlay {
    position: fixed; inset: 0; z-index: 998; background: transparent;
}
.profile-popup-menu {
    position: fixed; left: 74px; bottom: 12px; width: 240px;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 999; overflow: hidden; font-family: inherit; color: #1e293b; user-select: none;
    animation: pmSlideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pmSlideIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pm-header {
    padding: 12px 14px; display: flex; align-items: center; gap: 10px;
}
.pm-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: #3b82f6;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #ffffff; flex-shrink: 0;
}
.pm-user-info { display: flex; flex-direction: column; overflow: hidden; }
.pm-name {
    font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.pm-org {
    font-size: 11px; color: #64748b; margin-top: 1px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

.pm-divider {
    height: 1px; background: #f1f5f9; margin: 4px 0;
}
.pm-section-title {
    padding: 6px 14px 2px; font-size: 10.5px; font-weight: 600; color: #94a3b8;
    text-transform: capitalize;
}
.pm-group {
    display: flex; flex-direction: column; padding: 2px 0;
}
.pm-item {
    display: flex; align-items: center; gap: 10px; padding: 6px 14px;
    font-size: 12px; font-weight: 500; color: #334155; cursor: pointer;
    transition: background 0.12s;
}
.pm-item:hover { background: #f8fafc; color: #0f172a; }
.pm-item svg { width: 15px; height: 15px; fill: #64748b; flex-shrink: 0; }
.pm-item:hover svg { fill: #0f172a; }

.pm-item-arrow {
    justify-content: space-between;
}
.pm-item-toggle {
    justify-content: space-between; cursor: default;
}
.pm-item-toggle:hover { background: transparent; }

.pm-item-logout {
    color: #ef4444 !important; font-weight: 600;
}
.pm-item-logout svg { fill: #ef4444 !important; }
.pm-item-logout:hover { background: #fef2f2 !important; color: #dc2626 !important; }

/* ── Modern Switch Toggle ── */
.pm-switch {
    position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; cursor: pointer;
}
.pm-switch input { opacity: 0; width: 0; height: 0; }
.pm-slider {
    position: absolute; cursor: pointer; inset: 0; background-color: #cbd5e1;
    transition: 0.2s; border-radius: 18px;
}
.pm-slider:before {
    position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px;
    background-color: white; transition: 0.2s; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pm-switch input:checked + .pm-slider { background-color: #2563eb; }
.pm-switch input:checked + .pm-slider:before { transform: translateX(14px); }

/* ── Property Switcher ── */
.property-switcher {
    display: none; position: fixed; left: 56px; top: 0; width: 280px; height: 100vh;
    background: var(--bg-panel); border-right: 1px solid var(--border); z-index: 200;
    flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,0.3);
}
.property-switcher.open { display: flex; }
.ps-header {
    padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ps-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ps-search {
    padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ps-search input {
    width: 100%; padding: 8px 10px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text-primary); font-size: 13px; outline: none;
}
.ps-search input:focus { border-color: var(--green); }
.ps-search input::placeholder { color: var(--text-muted); }
.ps-list { flex: 1; overflow-y: auto; }
.ps-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    cursor: pointer; transition: background 0.1s; border-bottom: 1px solid var(--border);
}
.ps-item:hover { background: var(--bg-hover); }
.ps-item.active { background: var(--bg-active); }
.ps-item-icon {
    width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; font-size: 15px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.ps-item-info { flex: 1; min-width: 0; }
.ps-item-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-item-domain { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-item-bar {
    height: 4px; background: var(--border); border-radius: 2px; margin-top: 4px; overflow: hidden;
}
.ps-item-bar-fill { height: 100%; background: var(--green); border-radius: 2px; }
.ps-footer {
    padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.ps-create-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px;
    background: none; border: 1px dashed var(--border); border-radius: 8px;
    color: var(--green); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
}
.ps-create-btn:hover { background: var(--green-dim); border-color: var(--green); }
.ps-overlay {
    display: none; position: fixed; inset: 0; z-index: 199;
}
.ps-overlay.open { display: block; }

/* ── Contacts Panel (Hidden) ── */
#contacts-panel {
    display: none !important;
}
.panel-header {
    padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.panel-header-left { display: flex; flex-direction: column; }
.panel-header-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.panel-header-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.panel-collapse-btn {
    background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px;
    padding: 4px; display: flex; align-items: center;
}
.panel-collapse-btn:hover { color: var(--text-secondary); }
.contacts-search {
    padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.contacts-search input {
    width: 100%; padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text-primary); font-size: 13px; outline: none;
}
.contacts-search input:focus { border-color: var(--green); }
.contacts-search input::placeholder { color: var(--text-muted); }
#contacts-list { flex: 1; overflow-y: auto; }
.contact-group-header {
    padding: 10px 16px 6px; font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
}
.contact-group-header .group-arrow { transition: transform 0.2s; font-size: 10px; }
.contact-group-header .group-count {
    background: var(--bg-hover); color: var(--text-secondary); font-size: 10px;
    padding: 1px 6px; border-radius: 8px; font-weight: 600;
}
.contact-item {
    display: flex; align-items: center; padding: 8px 16px; cursor: pointer;
    transition: background 0.1s; gap: 8px;
}
.contact-item:hover { background: var(--bg-hover); }
.contact-item.active { background: var(--bg-active); }
.contact-status {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.contact-status.online { background: var(--green); }
.contact-status.offline { background: var(--red); }
.contact-name {
    flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-agent-badge {
    font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
    white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis;
    color: #fff;
}
.panel-footer {
    padding: 8px 12px; border-top: 1px solid var(--border); display: flex;
    align-items: center; justify-content: space-around; flex-shrink: 0;
}
.panel-footer-btn {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 6px; border-radius: 6px; display: flex; align-items: center; position: relative;
}
.panel-footer-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.panel-footer-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Main Content ── */
#main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-dark); }

/* ── Property Bar (Hidden) ── */
.property-bar {
    display: none !important;
}

/* ── Dashboard ── */
#view-dashboard { flex: 1; overflow-y: auto; padding: 24px; }
.dashboard-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;
}
.dashboard-header h2 { font-size: 18px; font-weight: 600; }
.website-selector {
    padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; color: var(--text-primary); font-size: 13px; outline: none; cursor: pointer;
}
.website-selector option { background: var(--bg-card); }
.dashboard-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px;
}
.stat-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; min-height: 100px;
}
.stat-card-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.stat-card-header .stat-icon {
    width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.stat-card-header .stat-icon svg { width: 16px; height: 16px; fill: #fff; }
.stat-value {
    font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1;
}
.stat-change {
    display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-left: 8px;
}
.stat-change.up { color: var(--green); }
.stat-change.down { color: var(--red); }
.stat-label {
    font-size: 12px; color: var(--text-muted); margin-top: 8px;
}
.stat-row {
    display: flex; align-items: baseline; gap: 16px; margin-top: 8px;
}
.stat-row-item { text-align: center; }
.stat-row-item .stat-row-val { font-size: 24px; font-weight: 700; }
.stat-row-item .stat-row-label { font-size: 11px; color: var(--text-muted); }
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.stat-sub span { color: var(--text-secondary); }
.chart-placeholder {
    height: 60px; margin-top: 10px; display: flex; align-items: flex-end; gap: 2px;
}
.chart-bar {
    flex: 1; background: var(--green); border-radius: 2px 2px 0 0; min-height: 2px;
    opacity: 0.7; transition: opacity 0.2s;
}
.chart-bar:hover { opacity: 1; }

/* Reporting card */
.reporting-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.reporting-row:last-child { border-bottom: none; }
.reporting-label { font-size: 13px; color: var(--text-secondary); }
.reporting-value { font-size: 13px; font-weight: 600; }

/* History & cards below dashboard */
.dashboard-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.history-card, .latest-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; min-height: 200px;
}
.card-title {
    display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
    margin-bottom: 16px;
}
.card-title .card-icon {
    width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.card-title .card-icon svg { width: 14px; height: 14px; fill: #fff; }
.history-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 0; color: var(--text-muted);
}
.history-empty svg { width: 48px; height: 48px; fill: var(--text-muted); margin-bottom: 12px; opacity: 0.5; }
.history-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 0;
    border-bottom: 1px solid var(--border); font-size: 13px;
}
.history-item:last-child { border-bottom: none; }
.history-item .hi-name { font-weight: 500; color: var(--text-primary); flex: 1; }
.history-item .hi-msg { color: var(--text-muted); flex: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item .hi-time { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }

/* ── Messaging View (OneChat Style) ── */
#view-messaging { flex: 1; display: flex; flex-direction: row; overflow: hidden; background: #f1f5f9; }
.onechat-chats-sidebar {
    width: 300px; background: #ffffff; border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column; flex-shrink: 0; user-select: none;
}
.onechat-chats-header {
    padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.onechat-chats-heading {
    font-size: 15px; font-weight: 700; color: #0f172a; letter-spacing: -0.2px;
}
.onechat-chats-actions { display: flex; align-items: center; gap: 6px; }
.oc-btn-tooltip-wrapper { position: relative; display: inline-flex; align-items: center; }
.oc-action-btn {
    background: transparent; border: 1px solid transparent; color: #64748b; cursor: pointer;
    padding: 6px 8px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.oc-action-btn:hover { background: #eff6ff; color: #2563eb; }
.oc-action-btn.active { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; font-weight: 700; }

/* OneChat Tooltip */
.oc-custom-tooltip {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden;
    transform: translateY(-4px); transition: all 0.18s ease; z-index: 999;
}
.oc-btn-tooltip-wrapper:hover .oc-custom-tooltip {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.onechat-chats-body {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; position: relative;
    padding: 6px 0 16px;
}
.onechat-section { margin-bottom: 12px; }
.onechat-section-header {
    padding: 6px 14px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
}
.onechat-section-title {
    font-size: 10.5px; font-weight: 700; color: #64748b; letter-spacing: 0.4px; text-transform: uppercase;
}
.onechat-chevron { color: #94a3b8; transition: transform 0.2s; }
.onechat-channel-subhead {
    padding: 6px 14px 2px; font-size: 10px; font-weight: 700; color: #94a3b8;
    letter-spacing: 0.4px; text-transform: uppercase;
}
.onechat-channel-header {
    padding: 8px 14px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer;
}
.onechat-channel-title {
    display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #1e293b;
}
.onechat-hash {
    font-weight: 800; color: #475569; position: relative; display: inline-flex; align-items: center;
}
.onechat-hash-dot {
    position: absolute; top: -2px; left: -3px; width: 6px; height: 6px; border-radius: 50%;
    background: #ef4444;
}
.onechat-channel-count { color: #64748b; font-weight: 600; font-size: 12px; margin-left: 2px; }

.onechat-card-group {
    display: flex; flex-direction: column; gap: 6px; padding: 2px 10px;
}

/* Incoming Cards (Coral Red Modern) */
.oc-card-incoming {
    background: #ffffff; border: 1.5px solid #fecdd3; border-left: 4px solid #f43f5e;
    border-radius: 8px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; position: relative; transition: all 0.15s ease; box-shadow: 0 1px 3px rgba(244,63,94,0.08);
    text-decoration: none; color: inherit;
}
.oc-card-incoming:hover { transform: translateY(-1px); border-color: #f43f5e; box-shadow: 0 4px 12px rgba(244,63,94,0.18); background: #fff5f5; text-decoration: none; }
.oc-card-incoming.active { background: #fff1f2 !important; border-color: #f43f5e !important; box-shadow: 0 0 0 2px rgba(244,63,94,0.3) !important; }

/* Web Widget Channel Cards (Emerald / Mint Modern) */
.oc-card-channel {
    background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #10b981;
    border-radius: 8px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; position: relative; transition: all 0.15s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    text-decoration: none; color: inherit;
}
.oc-card-channel:hover { transform: translateY(-1px); border-color: #94a3b8; box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-decoration: none; }
.oc-card-channel.active { background: #eff6ff !important; border-color: #3b82f6 !important; border-left-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59,130,246,0.3) !important; }

/* Card Content Details */
.oc-card-left { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.oc-card-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.oc-card-incoming .oc-card-avatar { background: #fee2e2; color: #e11d48; border: 1px solid #fecdd3; }
.oc-card-channel .oc-card-avatar { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

.oc-card-meta { display: flex; flex-direction: column; min-width: 0; }
.oc-card-name {
    font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; line-height: 1.2;
}
.oc-card-incoming .oc-card-name { color: #0f172a; }
.oc-card-channel .oc-card-name { color: #0f172a; }

.oc-card-sub {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.oc-card-incoming .oc-card-sub { color: #e11d48; font-weight: 600; background: #fee2e2; padding: 1px 5px; border-radius: 4px; display: inline-block; width: fit-content; }
.oc-card-channel .oc-card-sub { color: #475569; }

.oc-card-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.oc-bot-badge {
    background: #f1f5f9; color: #334155; font-size: 9.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 10px; max-width: 130px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.oc-bot-badge.is-assigned {
    background: #eff6ff; color: #2563eb; border-color: #bfdbfe; font-weight: 700;
}
.oc-card-incoming .oc-bot-badge { background: #f43f5e; color: #ffffff; border: none; }
.oc-channel-icon-badge {
    width: 16px; height: 16px; border-radius: 50%; background: #3b82f6; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 9px;
    position: absolute; right: -3px; top: -3px; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    border: 1.5px solid #fff;
}

/* Floating Unreads */
.onechat-floating-unreads {
    position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: #60a5fa; color: #ffffff; padding: 5px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px;
    cursor: pointer; box-shadow: 0 4px 12px rgba(96,165,250,0.4); z-index: 5;
    transition: transform 0.15s, background 0.15s;
}
/* ── Modern Unread Indicators & Pulse Animations ── */
.oc-card-channel.has-unread {
    background: #ffffff !important;
    border-left: 4.5px solid #ef4444 !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12) !important;
}

.oc-card-channel.has-unread:hover {
    background: #fff5f5 !important;
    border-color: #ef4444 !important;
}

.oc-card-incoming.has-unread {
    border-left: 4.5px solid #e11d48 !important;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.16) !important;
}

.oc-card-name.is-unread {
    font-weight: 800 !important;
    color: #0f172a !important;
}

.oc-unread-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.35);
    animation: ocPulseBadge 2s infinite ease-in-out;
}

.oc-card-last-msg {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
    line-height: 1.3;
}

.oc-card-last-msg.is-unread-msg {
    font-weight: 600;
    color: #0f172a;
}

.oc-unread-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ef4444;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
    animation: ocPulseBadge 1.8s infinite;
}

@keyframes ocPulseBadge {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.88; }
}

/* Open Tabs Unread */
.oc-tab-chip.is-unread {
    border-color: #fca5a5 !important;
    background: #fff5f5 !important;
    color: #b91c1c !important;
}

.oc-tab-chip.is-unread .oc-tab-dot {
    background: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
    animation: ocPulseBadge 1.5s infinite;
}

.oc-tab-unread-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    margin-left: 4px;
    line-height: 1;
}

/* Multi-Chat Panel Unread */
.multi-chat-panel.has-unread-panel {
    border-top: 3px solid #ef4444 !important;
}

.oc-panel-unread-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid #fecaca;
    animation: ocPulseBadge 2s infinite;
}

/* Watch List (Pinned to Bottom OneChat Style) */
.onechat-watchlist-footer {
    flex-shrink: 0;
    border-top: 1px solid #f1f5f9;
    background: #ffffff;
    z-index: 5;
    margin-top: auto;
}
.onechat-watchlist-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.onechat-watchlist-header:hover {
    background: #f8fafc;
}
.onechat-watchlist-box {
    padding: 12px 14px;
    text-align: center;
    color: #64748b;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
}
.oc-wl-main { font-size: 12px; font-weight: 600; color: #475569; }
.oc-wl-hint { font-size: 10.5px; color: #94a3b8; margin-top: 3px; }

/* OneChat Main Chat Area */
.onechat-main-chat {
    flex: 1; display: flex; flex-direction: column; background: #f8fafc;
}
.onechat-empty-state {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px; user-select: none;
}
.onechat-empty-title {
    font-size: 19px; font-weight: 600; color: #475569; letter-spacing: -0.2px;
}

/* Chat Header & stream in Light theme */
.onechat-main-chat .chat-header {
    padding: 14px 24px; background: #ffffff; border-bottom: 1px solid #e2e8f0;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.onechat-main-chat .chat-actions {
    display: flex; align-items: center; gap: 10px;
}
.oc-header-icon-btn {
    width: 32px; height: 32px; border-radius: 8px; background: transparent;
    border: 1px solid #e2e8f0; color: #64748b; display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: all 0.15s ease;
}
.oc-header-icon-btn:hover {
    background: #f1f5f9; color: #0f172a; border-color: #cbd5e1;
}
.oc-header-icon-btn.is-hidden svg {
    transform: rotate(180deg);
}
.oc-header-icon-btn.is-active {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #93c5fd !important;
}

/* ── OneChat Workspace & Units ── */
#view-messaging {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    background: #f1f5f9 !important;
}

.onechat-main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #f1f5f9;
}

.onechat-top-bar {
    height: 48px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    gap: 10px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.oc-tabs-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.oc-tabs-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
    padding: 0;
}
.oc-tabs-nav-btn:hover:not(:disabled) {
    background: #ffffff;
    color: #0f172a;
    border-color: #94a3b8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.oc-tabs-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #e2e8f0;
}

.oc-tabs-track {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0;
}
.oc-tabs-track::-webkit-scrollbar { display: none; }

.oc-tab-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: #eef2f6;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
    user-select: none;
    max-width: 170px;
    text-decoration: none;
}
.oc-tab-chip:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
    color: #0f172a;
    text-decoration: none;
}
.oc-tab-chip.active {
    background: #ffffff;
    border-color: #22c55e !important;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}
.oc-tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
}
.oc-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    color: #94a3b8;
    margin-left: 2px;
    transition: all 0.15s;
    line-height: 1;
}
.oc-tab-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Layout Controls: Split View Icon Dropdown */
.oc-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.oc-split-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.oc-split-trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}
.oc-split-trigger-btn:hover {
    background: #ffffff;
    border-color: #94a3b8;
    color: #0f172a;
}
.oc-split-trigger-btn.is-active {
    background: #f1f5f9;
    border-color: #22c55e;
    color: #16a34a;
}

.oc-split-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1000;
}

.oc-split-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid transparent;
    background: transparent;
    border-radius: 8px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}
.oc-split-opt:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #e2e8f0;
}
.oc-split-opt.active {
    background: #eff6ff;
    color: #2563eb;
    border-color: #93c5fd;
}

.onechat-workspace {
    flex: 1;
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
    background: #e2e8f0;
    padding: 8px;
    gap: 8px;
    position: relative;
}

.multi-chat-track {
    display: flex;
    flex-direction: row;
    gap: 8px;
    height: 100%;
    width: 100%;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 2px;
}

.multi-chat-panel, .onechat-chat-unit {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    box-sizing: border-box;
}

.multi-chat-panel.active-panel, .onechat-chat-unit.is-active-pane {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25), 0 6px 18px rgba(15, 23, 42, 0.1) !important;
}

/* Dynamic Panel Widths by Columns & Auto-expansion when fewer chats are open */
.multi-chat-panel:only-child, .onechat-chat-unit:only-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

.split-cols-3 .multi-chat-panel:first-child:nth-last-child(2),
.split-cols-3 .multi-chat-panel:first-child:nth-last-child(2) ~ .multi-chat-panel,
.split-cols-4 .multi-chat-panel:first-child:nth-last-child(2),
.split-cols-4 .multi-chat-panel:first-child:nth-last-child(2) ~ .multi-chat-panel {
    width: calc(50% - 4px);
    max-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
}

.split-cols-4 .multi-chat-panel:first-child:nth-last-child(3),
.split-cols-4 .multi-chat-panel:first-child:nth-last-child(3) ~ .multi-chat-panel {
    width: calc(33.333% - 5.33px);
    max-width: calc(33.333% - 5.33px);
    flex: 1 1 calc(33.333% - 5.33px);
}

.split-cols-1 .multi-chat-panel, .split-cols-1 .onechat-chat-unit {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
}
.split-cols-2 .multi-chat-panel, .split-cols-2 .onechat-chat-unit {
    width: calc(50% - 4px);
    max-width: calc(50% - 4px);
    min-width: 320px;
    flex: 1 1 calc(50% - 4px);
}
.split-cols-3 .multi-chat-panel, .split-cols-3 .onechat-chat-unit {
    width: calc(33.333% - 5.33px);
    max-width: calc(33.333% - 5.33px);
    min-width: 280px;
    flex: 1 1 calc(33.333% - 5.33px);
}
.split-cols-4 .multi-chat-panel, .split-cols-4 .onechat-chat-unit {
    width: calc(25% - 6px);
    max-width: calc(25% - 6px);
    min-width: 240px;
    flex: 1 1 calc(25% - 6px);
}

.oc-chat-stream-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 200px;
    overflow: hidden;
    background: #ffffff;
}

.oc-chat-stream-col .chat-header {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 14px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.oc-chat-stream-col .chat-visitor-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.oc-chat-stream-col .chat-visitor-info strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.oc-chat-stream-col .visitor-meta {
    display: block;
    font-size: 10.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.oc-chat-stream-col .chat-actions, .chat-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-header-close-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.btn-header-close-chat:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #ef4444;
}

.btn-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}
.btn-header-icon:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}
.btn-header-icon.btn-close-tab:hover, .btn-header-icon.btn-close-tab-panel:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #ef4444;
}

.oc-chat-stream-col .messages-stream {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc !important;
}

.oc-chat-stream-col .input-area {
    position: relative !important;
    padding: 10px 16px 14px;
    background: #ffffff;
    border-top: 1.5px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Modern Floating Shortcut / Canned Responses Dropdown ── */
.oc-shortcut-popup {
    position: absolute;
    bottom: calc(100% - 2px);
    left: 12px;
    right: 12px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.18), 0 8px 12px -6px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow: hidden;
    z-index: 50;
    animation: fadeIn 0.15s ease-out;
}

.oc-shortcut-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11.5px;
    color: #1e293b;
    font-weight: 600;
}

.oc-shortcut-hint {
    font-size: 10.5px;
    color: #64748b;
    font-weight: normal;
}

.oc-shortcut-list {
    overflow-y: auto;
    max-height: 195px;
    display: flex;
    flex-direction: column;
}

.oc-shortcut-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s ease;
}

.oc-shortcut-item:last-child {
    border-bottom: none;
}

.oc-shortcut-item:hover, .oc-shortcut-item.selected {
    background: #eff6ff;
}

.oc-sc-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: #1d4ed8;
    background: #dbeafe;
    border-radius: 6px;
    font-family: 'SF Mono', Consolas, monospace;
    flex-shrink: 0;
}

.oc-sc-text {
    font-size: 12.5px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* ── Image Lightbox Modal ── */
.oc-image-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.oc-image-lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.oc-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.oc-lightbox-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-width: 92vw;
    max-height: 92vh;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.oc-image-lightbox-overlay.active .oc-lightbox-container {
    transform: scale(1);
}

.oc-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(30, 41, 59, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 16px;
}

.oc-lightbox-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-lightbox-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oc-lightbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.oc-lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.oc-lightbox-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    cursor: pointer;
    transition: all 0.15s ease;
}

.oc-lightbox-close-btn:hover {
    background: #ef4444;
    color: #ffffff;
}

.oc-lightbox-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #020617;
    overflow: auto;
    max-height: calc(92vh - 60px);
}

.oc-lightbox-img {
    max-width: 88vw;
    max-height: calc(88vh - 70px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.oc-msg-img-preview {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.oc-msg-img-preview:hover {
    transform: scale(1.02);
    filter: brightness(1.04);
}

/* ── Input Header Toolbar ── */
.oc-input-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.oc-input-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oc-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}

.oc-toolbar-btn:hover {
    color: #2563eb;
    background: #eff6ff;
}

/* ── Modern Floating Emoji Picker Popup ── */
.oc-emoji-popup {
    position: absolute;
    bottom: calc(100% - 2px);
    right: 14px;
    width: 310px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.2), 0 8px 12px -6px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    z-index: 60;
    overflow: hidden;
    animation: fadeIn 0.15s ease-out;
}

.oc-emoji-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
}

.oc-emoji-close-btn {
    background: none;
    border: none;
    font-size: 16px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.oc-emoji-close-btn:hover {
    color: #ef4444;
}

.oc-emoji-search-wrap {
    padding: 6px 10px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.oc-emoji-search {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.oc-emoji-search:focus {
    border-color: #3b82f6;
}

.oc-emoji-body {
    max-height: 200px;
    overflow-y: auto;
    padding: 6px;
}

.oc-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
}

.oc-emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    padding: 4px 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.1s ease;
    user-select: none;
}

.oc-emoji-item:hover {
    background: #eff6ff;
    transform: scale(1.22);
}

.oc-input-mode-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.oc-input-tab {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.oc-input-tab:hover {
    color: #1e293b;
    background: #f1f5f9;
}
.oc-input-tab.active {
    color: #0f172a;
    background: #e2e8f0;
    font-weight: 700;
}
.oc-input-tab[data-tab-mode="whisper"].active, .oc-input-tab[data-mode="whisper"].active {
    color: #7e22ce !important;
    background: #f3e8ff !important;
    font-weight: 700;
}

.oc-attachment-preview-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    margin-bottom: 6px;
    position: relative;
    animation: fadeIn 0.15s ease-out;
}
.oc-attachment-preview-thumb {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}
.oc-attachment-preview-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.oc-attachment-preview-name {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oc-attachment-preview-size {
    font-size: 10.5px;
    color: #64748b;
}
.oc-attachment-remove-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fee2e2;
    color: #ef4444;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.15s ease;
}
.oc-attachment-remove-btn:hover {
    background: #fecaca;
    color: #dc2626;
    transform: scale(1.08);
}

.oc-input-box-wrapper, .chat-input-box {
    position: relative !important;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.oc-input-unassigned-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(248, 250, 252, 0.95);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 5;
    animation: fadeIn 0.15s ease-out;
}

.btn-assign-overlay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
    transition: all 0.15s ease;
    user-select: none;
}

.btn-assign-overlay:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.btn-assign-overlay:active {
    transform: translateY(0);
}

.input-area textarea {
    flex: 1;
    padding: 10px 14px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    color: #0f172a;
    font-size: 13.5px;
    line-height: 1.45;
    resize: none;
    height: 52px;
    min-height: 52px;
    max-height: 130px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    box-sizing: border-box;
}
.input-area textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Whisper Input State (OneChat Lavender Style) */
.input-area.is-whisper textarea {
    background: #faf5ff !important;
    border-color: #d8b4fe !important;
    color: #581c87 !important;
    box-shadow: 0 0 0 1px #d8b4fe !important;
}
.input-area.is-whisper textarea:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25) !important;
}
.input-area.is-whisper .send-btn {
    background: #9333ea !important;
}
.input-area.is-whisper .send-btn:hover {
    background: #7e22ce !important;
}

/* Whisper Message in Chat Stream (OneChat Style - Right Aligned) */
.msg-whisper-wrapper {
    align-self: flex-end !important;
    display: flex;
    flex-direction: column;
    margin: 4px 0;
    max-width: 75% !important;
    min-width: 180px;
    padding: 9px 13px;
    background: #faf5ff !important;
    border: 1.5px solid #d8b4fe !important;
    border-right: 3.5px solid #9333ea !important;
    border-radius: 12px 12px 2px 12px !important;
    box-shadow: 0 2px 6px rgba(147, 51, 234, 0.08);
    box-sizing: border-box;
}
.msg-whisper-banner {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #7e22ce;
    margin-bottom: 3px;
}
.msg-whisper-content {
    font-size: 13px;
    line-height: 1.45;
    color: #3b0764;
    word-break: break-word;
}
.msg-whisper-time {
    font-size: 10px;
    color: #a855f7;
    font-weight: 600;
    margin-top: 4px;
    text-align: right;
}

/* Message Bubble Rules */
.msg {
    max-width: 68%; min-width: 140px; padding: 8px 13px; border-radius: 12px; font-size: 13px;
    line-height: 1.45; word-break: break-word; position: relative; display: flex; flex-direction: column;
}
.msg-sender-tag {
    font-size: 11px; font-weight: 700; margin-bottom: 3px; display: flex; align-items: center; gap: 5px;
}
.msg-content {
    font-size: 13px; line-height: 1.45; word-break: break-word;
}
.msg-time {
    font-size: 10px; margin-top: 4px; text-align: right; font-weight: 500; opacity: 0.85;
}

/* Visitor message: clean gray/white card with subtle border & shadow */
.msg-visitor, .onechat-main-chat .msg-visitor, .onechat-chat-unit .msg-visitor {
    align-self: flex-start;
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-radius: 10px !important;
    border-bottom-left-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    border: none !important;
    max-width: 65% !important;
    padding: 8px 12px !important;
}
.msg-visitor .msg-sender-tag, .onechat-main-chat .msg-visitor .msg-sender-tag, .onechat-chat-unit .msg-visitor .msg-sender-tag { display: none; }
.msg-visitor .msg-time, .onechat-main-chat .msg-visitor .msg-time, .onechat-chat-unit .msg-visitor .msg-time { color: #64748b; font-size: 9.5px; margin-top: 3px; text-align: right; }

/* Agent Message: OneChat Emerald Green Bubble with Right Avatar Photo */
.msg-agent-wrapper {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 75%;
    gap: 2px;
    margin: 2px 0;
}
.msg-agent-meta {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-right: 36px;
    letter-spacing: -0.1px;
}
.msg-agent-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.msg-agent, .onechat-main-chat .msg-agent, .onechat-chat-unit .msg-agent {
    background: #4ade80 !important;
    color: #0f172a !important;
    border-radius: 10px !important;
    border-bottom-right-radius: 2px !important;
    box-shadow: 0 1px 4px rgba(74, 222, 128, 0.25) !important;
    padding: 8px 12px !important;
    min-width: 60px !important;
    max-width: 100% !important;
}
.msg-agent .msg-sender-tag, .onechat-main-chat .msg-agent .msg-sender-tag, .onechat-chat-unit .msg-agent .msg-sender-tag { display: none; }
.msg-agent .msg-content, .onechat-main-chat .msg-agent .msg-content, .onechat-chat-unit .msg-agent .msg-content { color: #0f172a !important; font-size: 13px; line-height: 1.45; }
.msg-agent .msg-time, .onechat-main-chat .msg-agent .msg-time, .onechat-chat-unit .msg-agent .msg-time { color: #166534 !important; font-size: 9.5px; font-weight: 600; margin-top: 3px; text-align: right; }

.msg-agent-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    border: 1px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 1px;
}
.msg-agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bot message: emerald card */
.msg-bot, .onechat-main-chat .msg-bot, .onechat-chat-unit .msg-bot {
    align-self: flex-start;
    background: #f0fdf4 !important;
    color: #14532d !important;
    border-top-left-radius: 2px !important;
    box-shadow: 0 1px 4px rgba(22,101,52,0.06) !important;
    border: 1px solid #bbf7d0 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
}
.msg-bot .msg-sender-tag, .onechat-main-chat .msg-bot .msg-sender-tag, .onechat-chat-unit .msg-bot .msg-sender-tag { color: #16a34a; font-size: 11px; font-weight: 700; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
.msg-bot .msg-time, .onechat-main-chat .msg-bot .msg-time, .onechat-chat-unit .msg-bot .msg-time { color: #86efac; font-size: 9.5px; margin-top: 3px; text-align: right; }

/* ── Knowledge Base Source Citations & Edit Quick Action ── */
.msg-bot-kb-sources-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
    margin-right: 36px;
}

.oc-kb-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.oc-kb-source-pill:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.18);
}

.oc-kb-source-pill strong {
    color: #1e293b;
    font-weight: 700;
}

.oc-kb-source-pill:hover strong {
    color: #1e40af;
}

.oc-kb-source-edit-icon {
    font-size: 10.5px;
    font-weight: 600;
    margin-left: 2px;
    color: #64748b;
    background: rgba(0, 0, 0, 0.04);
    padding: 1px 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.oc-kb-source-pill:hover .oc-kb-source-edit-icon {
    background: #dbeafe;
    color: #2563eb;
}

.input-area textarea {
    border-radius: 8px; color: #0f172a; font-size: 13.5px; resize: none;
    outline: none; max-height: 140px; min-height: 52px; font-family: inherit;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.input-area textarea:focus { border-color: #2563eb; background: #ffffff; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.input-area textarea::placeholder { color: #94a3b8; }
.send-btn {
    width: 52px; height: 52px; border: none; border-radius: 10px; background: #2563eb;
    color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.15s, background 0.15s; box-shadow: 0 3px 10px rgba(37,99,235,0.25);
}
.send-btn:hover { background: #1d4ed8; transform: scale(1.03); }
.send-btn svg { width: 20px; height: 20px; fill: #ffffff; margin-left: 2px; }

/* ── Settings View (Administration - OneChat Clean Style with Card Depth) ── */
#view-settings { flex: 1; display: none; overflow: hidden; flex-direction: column; background: #f1f5f9; }
.admin-layout { display: flex; height: 100%; background: #f1f5f9; }
.admin-sidebar {
    width: 240px; background: #ffffff; border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; user-select: none;
}
.admin-sidebar-header {
    padding: 16px 20px 14px; font-size: 15px; font-weight: 700; color: #0f172a;
    border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between;
}
.admin-sidebar-collapse {
    background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px;
    display: flex; align-items: center; border-radius: 4px;
}
.admin-sidebar-collapse:hover { color: #0f172a; background: #f1f5f9; }
.admin-nav { padding: 8px 0; flex: 1; }
.admin-nav-item {
    display: flex; align-items: center; gap: 10px; padding: 9px 20px;
    cursor: pointer; color: #475569; font-size: 13px; font-weight: 500;
    transition: all 0.15s; border-left: 3px solid transparent;
}
.admin-nav-item:hover { background: #f8fafc; color: #0f172a; }
.admin-nav-item.active { background: rgba(37, 99, 235, 0.08); color: #2563eb; border-left-color: #2563eb; font-weight: 600; }
.admin-nav-item svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.admin-content { flex: 1; overflow-y: auto; padding: 28px 36px; background: #f1f5f9; color: #0f172a; }
.admin-content-title { font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 24px; letter-spacing: -0.3px; }

/* Overview settings rows & elevated cards */
.overview-row {
    display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.overview-field {
    flex: 1; min-width: 280px; background: #ffffff !important; border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important; padding: 20px 22px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.overview-field > div[style*="background:var(--bg-card)"] {
    background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important;
}
.overview-field-label {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
    color: #0f172a; margin-bottom: 12px; letter-spacing: -0.2px;
}
.overview-field-label svg { width: 16px; height: 16px; fill: #64748b; }
.overview-field-input-row { display: flex; gap: 10px; }
.overview-field-input-row input, .overview-field-input-row select {
    flex: 1; padding: 10px 14px; background: #f8fafc; border: 1px solid #cbd5e1;
    border-radius: 8px; color: #0f172a; font-size: 13.5px; outline: none; transition: all 0.15s;
}
.overview-field-input-row input:focus, .overview-field-input-row select:focus {
    background: #ffffff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.overview-field .save-inline {
    padding: 10px 22px; background: #2563eb; border: none;
    border-radius: 8px; color: #ffffff; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(37,99,235,0.2);
}
.overview-field .save-inline:hover { background: #1d4ed8; color: #fff; }
.overview-id-row {
    display: flex; align-items: center; gap: 8px;
}
.overview-id-row input {
    font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 12px;
    background: #f8fafc !important; color: #334155 !important; border: 1px solid #cbd5e1 !important;
}
.overview-id-row .copy-btn {
    padding: 8px 12px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px;
    color: #334155; cursor: pointer; display: flex; align-items: center; transition: all 0.15s; font-weight: 600; font-size: 12px;
}
.overview-id-row .copy-btn:hover { color: #2563eb; border-color: #2563eb; background: #f8fafc; }
.overview-id-row .copy-btn svg { width: 16px; height: 16px; fill: currentColor; }
.status-toggle {
    display: flex; align-items: center; gap: 10px;
}
.status-toggle-label { font-size: 13.5px; font-weight: 600; color: #0f172a; }
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
    position: absolute; inset: 0; background: #cbd5e1; border-radius: 22px;
    transition: all 0.25s ease;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.12);
}
.toggle-slider::before {
    content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
    background: #ffffff; left: 3px; bottom: 3px; transition: all 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.toggle-switch input:checked + .toggle-slider { background: #2563eb; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Section divider in overview */
.admin-section-divider {
    border: none; border-top: 1px solid #e2e8f0; margin: 24px 0;
}
.admin-section-title {
    display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700;
    color: #0f172a; margin-bottom: 16px;
}
.admin-section-title svg { width: 18px; height: 18px; fill: #64748b; }

.settings-section {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.settings-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: #0f172a; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.form-row input, .form-row textarea, .form-row select {
    width: 100%; padding: 9px 12px; background: #ffffff; border: 1px solid #cbd5e1;
    border-radius: 6px; color: #0f172a; font-size: 13px; outline: none; transition: all 0.15s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
    border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.form-row textarea { min-height: 60px; resize: vertical; font-family: inherit; }
.embed-code, #widget-code-box, .wizard-embed-code {
    background: #0f172a !important; padding: 14px 16px !important; border-radius: 8px !important; font-size: 12px !important;
    font-family: 'SF Mono', Monaco, 'Fira Code', Consolas, monospace !important; color: #38bdf8 !important; word-break: break-all !important;
    border: 1px solid #1e293b !important; margin-top: 6px !important; line-height: 1.6 !important;
}
.settings-table { width: 100%; border-collapse: collapse; background: #ffffff; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.settings-table th {
    text-align: left; font-size: 11.5px; font-weight: 600; color: #64748b;
    text-transform: uppercase; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; background: #f8fafc;
}
.settings-table td { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; font-size: 13px; color: #0f172a; }
.settings-table tr:hover { background: #f8fafc; }
.settings-table .status-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px;
}

/* ── Modal (OneChat Style) ── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.modal-box {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px;
    width: 90%; max-width: 480px; max-height: 80vh; overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    color: #0f172a;
}
.modal-header {
    padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
    display: flex; justify-content: space-between; align-items: center; background: #ffffff;
}
.modal-header h3 { font-size: 15px; font-weight: 700; color: #0f172a; }
.modal-close { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 22px; padding: 4px; border-radius: 4px; }
.modal-close:hover { color: #0f172a; background: #f1f5f9; }
.modal-body { padding: 20px; color: #0f172a; background: #ffffff; }

/* ── Toasts ── */
#toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex;
    flex-direction: column; gap: 8px;
}
.toast {
    padding: 12px 20px; border-radius: 8px; font-size: 13px; font-weight: 500;
    animation: toastIn 0.3s ease; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    min-width: 250px;
}
.toast-success { background: #16a34a; color: #fff; }
.toast-error { background: #ef4444; color: #fff; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Create Property Wizard ── */
.wizard-overlay {
    position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.wizard-container {
    width: 100%; max-width: 560px; padding: 40px; position: relative;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); color: #0f172a;
}
.wizard-progress {
    display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 40px;
}
.wizard-step-dot {
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #94a3b8; border: 2px solid #e2e8f0; background: #ffffff;
    transition: all 0.3s;
}
.wizard-step-dot.active { border-color: #2563eb; color: #2563eb; background: rgba(37, 99, 235, 0.08); }
.wizard-step-dot.done { border-color: #2563eb; color: #fff; background: #2563eb; }
.wizard-step-line {
    width: 120px; height: 3px; background: #e2e8f0; border-radius: 2px; position: relative; overflow: hidden;
}
.wizard-step-line::after {
    content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0;
    background: #2563eb; border-radius: 2px; transition: width 0.3s;
}
.wizard-step-line.half::after { width: 50%; }
.wizard-step-line.full::after { width: 100%; }
.wizard-title {
    font-size: 22px; font-weight: 700; color: #0f172a; text-align: center; margin-bottom: 32px;
}
.wizard-form-group { margin-bottom: 20px; }
.wizard-form-group label {
    display: block; font-size: 13px; font-weight: 600; color: #334155;
    margin-bottom: 8px;
}
.wizard-form-group input, .wizard-form-group textarea {
    width: 100%; padding: 12px 16px; background: #ffffff; border: 1px solid #cbd5e1;
    border-radius: 8px; color: #0f172a; font-size: 14px; outline: none;
    transition: border-color 0.2s;
}
.wizard-form-group input:focus, .wizard-form-group textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.wizard-form-group input::placeholder, .wizard-form-group textarea::placeholder { color: #94a3b8; }
.wizard-form-group textarea { min-height: 80px; resize: vertical; font-family: inherit; }
.wizard-embed-code {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 16px; margin-top: 20px; font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 12px; color: #2563eb; word-break: break-all; line-height: 1.6;
}
.wizard-footer {
    display: flex; justify-content: flex-end; gap: 12px; margin-top: 40px;
    padding-top: 20px; border-top: 1px solid #e2e8f0;
}
.wizard-footer .btn { min-width: 100px; padding: 10px 24px; font-size: 14px; }

/* ── Bots View (OneChat / Tawk.to Style) ── */
#view-bots { flex: 1; display: none; overflow-y: auto; padding: 28px 32px; background: #f8fafc; }
.bots-page-header {
    display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px;
}
.bots-page-info h2 { font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.bots-page-info p { font-size: 13px; color: #475569; max-width: 680px; line-height: 1.5; }
.bots-page-info a { color: #2563eb; font-weight: 500; }
.bots-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px;
}
.bot-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column; transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); position: relative;
}
.bot-card:hover { border-color: #2563eb; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08); }
.bot-card-banner {
    height: 70px; background: linear-gradient(135deg, rgba(79,140,255,0.15), rgba(3,192,74,0.15));
    position: relative; display: flex; justify-content: flex-end; padding: 10px;
}
.bot-card-del-btn {
    width: 28px; height: 28px; border-radius: 6px; background: rgba(255,82,82,0.1);
    border: 1px solid rgba(255,82,82,0.2); color: var(--red); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.bot-card-del-btn:hover { background: var(--red); color: #fff; }
.bot-card-del-btn svg { width: 14px; height: 14px; fill: currentColor; }
.bot-card-avatar-wrap {
    margin-top: -32px; display: flex; justify-content: center; position: relative;
}
.bot-card-avatar {
    width: 58px; height: 58px; border-radius: 14px; background: var(--bg-panel);
    border: 3px solid var(--bg-card); display: flex; align-items: center; justify-content: center;
    overflow: hidden; font-size: 24px; font-weight: 700; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.bot-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bot-card-body {
    padding: 14px 18px 18px; text-align: center; display: flex; flex-direction: column; flex: 1;
}
.bot-card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.bot-card-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.bot-card-meta {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.bot-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px;
    border-radius: 6px; background: var(--bg-hover); color: var(--text-secondary);
}
.bot-tag.provider-openai { background: rgba(16,163,127,0.15); color: #10a37f; }
.bot-tag.provider-gemini { background: rgba(79,140,255,0.15); color: var(--blue); }
.bot-tag.provider-deepseek { background: rgba(77,107,254,0.15); color: #4d6bfe; }
.bot-tag.provider-openrouter { background: rgba(156,39,176,0.15); color: var(--purple); }
.bot-card-date { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 14px; }
.bot-card-actions {
    display: flex; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
}
.bot-card-actions .btn { flex: 1; font-size: 12px; padding: 7px 10px; }

/* Create New Bot Card */
.bot-card-create {
    background: rgba(79,140,255,0.04); border: 2px dashed rgba(79,140,255,0.3);
    border-radius: 14px; min-height: 240px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; cursor: pointer; text-align: center;
    padding: 24px; transition: all 0.2s ease;
}
.bot-card-create:hover { background: rgba(79,140,255,0.08); border-color: var(--blue); transform: translateY(-2px); }
.bot-card-create-icon {
    width: 54px; height: 54px; border-radius: 50%; background: var(--blue-dim);
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
    color: var(--blue); font-size: 26px; font-weight: 300; transition: transform 0.2s;
}
.bot-card-create:hover .bot-card-create-icon { transform: scale(1.1); background: var(--blue); color: #fff; }
.bot-card-create-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
/* ── Unified Buttons (OneChat Style) ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; border: none; outline: none; text-decoration: none;
}
.btn-primary, .btn-green { background: #2563eb; color: #ffffff; }
.btn-primary:hover, .btn-green:hover { background: #1d4ed8; color: #ffffff; }
.btn-outline { background: #ffffff; border: 1px solid #cbd5e1; color: #334155; }
.btn-outline:hover { background: #f8fafc; border-color: #94a3b8; color: #0f172a; }
.btn-danger { background: #ef4444; color: #ffffff; }
.btn-danger:hover { background: #dc2626; color: #ffffff; }

/* ── Bot Editor Modal & Tabs ── */
.bot-editor-modal .modal-box {
    max-width: 820px; width: 95%; max-height: 88vh; display: flex; flex-direction: column;
    background: #ffffff; border: 1px solid #e2e8f0;
}
.bot-tabs-bar {
    display: flex; border-bottom: 1px solid #e2e8f0; background: #f8fafc;
    padding: 0 16px; overflow-x: auto;
}
.bot-tab-btn {
    padding: 12px 16px; border: none; background: none; color: #64748b;
    font-size: 13px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent;
    display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: all 0.15s;
}
.bot-tab-btn:hover { color: #0f172a; }
.bot-tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; }
.bot-tab-btn svg { width: 16px; height: 16px; fill: currentColor; }
.bot-tab-content { padding: 20px; overflow-y: auto; flex: 1; background: #ffffff; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-helper { font-size: 11px; color: #64748b; margin-top: 4px; line-height: 1.4; }

/* Knowledge base list */
.kb-item {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 14px; margin-bottom: 12px; position: relative;
}
.kb-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kb-item-title { font-size: 13px; font-weight: 700; color: #0f172a; }
.kb-del-btn { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 12px; padding: 2px; }

/* Playground */
.playground-box {
    display: flex; flex-direction: column; height: 380px; background: #ffffff;
    border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
}
.playground-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }
.playground-input-row {
    display: flex; gap: 8px; padding: 10px 14px; background: #ffffff; border-top: 1px solid #e2e8f0;
}
.playground-input-row input {
    flex: 1; padding: 8px 12px; background: #ffffff; border: 1px solid #cbd5e1;
    border-radius: 6px; color: #0f172a; font-size: 13px; outline: none;
}
.playground-input-row input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* Conversation Bot Badge */
.conv-bot-badge {
    display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; cursor: pointer; text-transform: uppercase;
    white-space: nowrap; flex-shrink: 0;
}
.conv-bot-badge.active { background: rgba(37, 99, 235, 0.1); color: #2563eb; border: 1px solid rgba(37, 99, 235, 0.3); }
.conv-bot-badge.disabled { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }

/* ── Knowledge Base & Labels Management Styles ── */
.oc-kb-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.oc-kb-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oc-kb-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.oc-kb-tab:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.oc-kb-tab.active {
    color: #2563eb;
    background: #eff6ff;
    border-color: #bfdbfe;
    font-weight: 700;
}

.oc-kb-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 7px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
}

.oc-label-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.15s ease;
}
.oc-label-badge svg {
    flex-shrink: 0;
}

.oc-kb-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.oc-kb-search-box {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.oc-kb-search-box input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
}

.oc-kb-search-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.oc-kb-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.oc-label-filter-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 2px;
}

.oc-label-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.oc-label-pill-btn svg {
    flex-shrink: 0;
}

.oc-label-pill-btn:hover {
    border-color: #94a3b8;
    color: #1e293b;
}

.oc-label-pill-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.oc-kb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.oc-kb-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.oc-kb-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #1e293b;
}

.oc-kb-table tr:hover td {
    background: #f8fafc;
}

/* ── Nav Icon 3-Dots indicator ── */
.nav-icon-dots {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0.5;
}
.nav-icon-dots span {
    width: 2.5px;
    height: 2.5px;
    background: currentColor;
    border-radius: 50%;
}
.nav-icon:hover .nav-icon-dots {
    opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 1200px) { .dashboard-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .msg-chat { display: none; }
}

/* ── OneChat Style Bot Detail View ── */
.onechat-view {
    background: #f8fafc;
    color: #1e293b;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}
.onechat-header {
    background: #fff;
    padding: 16px 32px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.onechat-breadcrumbs {
    font-size: 13px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.onechat-breadcrumbs a {
    color: #64748b;
    text-decoration: none;
    cursor: pointer;
}
.onechat-breadcrumbs a:hover {
    color: #2563eb;
}
.onechat-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 24px 32px;
    gap: 24px;
}
.onechat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.onechat-title-bar {
    padding: 24px 32px 0;
}
.onechat-title-bar h2 {
    font-size: 20px;
    color: #0f172a;
    margin: 0 0 16px;
}
.onechat-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 32px;
    gap: 32px;
}
.onechat-tab {
    padding: 12px 0;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}
.onechat-tab:hover {
    color: #334155;
}
.onechat-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}
.onechat-content {
    padding: 32px;
    flex: 1;
}
.onechat-form-group {
    margin-bottom: 24px;
}
.onechat-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    margin-bottom: 8px;
}
.onechat-input, .onechat-textarea, .onechat-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    transition: all 0.2s;
}
.onechat-input:focus, .onechat-textarea:focus, .onechat-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.onechat-textarea {
    resize: vertical;
    min-height: 100px;
}
.onechat-avatar-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.onechat-avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e2e8f0;
    overflow: hidden;
}
.onechat-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.onechat-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
}
.onechat-btn-primary {
    background: #2563eb;
    color: #fff;
}
.onechat-btn-primary:hover { background: #1d4ed8; }
.onechat-btn-outline {
    background: transparent;
    border-color: #cbd5e1;
    color: #475569;
}
.onechat-btn-outline:hover { background: #f1f5f9; }
.onechat-footer {
    padding: 16px 32px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

/* Right Sidebar (Widget Preview & Sources) */
.onechat-sidebar {
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
}
.onechat-widget-preview {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 380px;
    min-height: 320px;
    overflow: hidden;
}
.onechat-widget-header {
    background: #335987;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.onechat-widget-title {
    font-weight: 600;
    font-size: 13.5px;
}
.onechat-widget-sub {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 2px;
}
.onechat-widget-body {
    flex: 1;
    background: #f8fafc;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}
.onechat-widget-input {
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.onechat-widget-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
}
.onechat-sources {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    max-height: 420px;
}
.onechat-sources-title {
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0;
    color: #0f172a;
}
.oc-playground-bot-bubble {
    transition: all 0.15s ease;
}
.oc-playground-bot-bubble:hover {
    filter: brightness(0.96);
}
.oc-source-card {
    transition: all 0.15s ease;
}
.oc-source-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
/* OneChat Knowledge Base Styles */
.onechat-kb-subnav {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    width: fit-content;
    margin-bottom: 20px;
}
.onechat-kb-subpill {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.onechat-kb-subpill:hover {
    color: #1e293b;
}
.onechat-kb-subpill.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.onechat-tag-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    min-height: 42px;
}
.onechat-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #334155;
}
.onechat-tag-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.onechat-tag-pill .remove-tag {
    cursor: pointer;
    color: #94a3b8;
    margin-left: 4px;
    font-size: 14px;
}
.onechat-tag-pill .remove-tag:hover {
    color: #ef4444;
}
.onechat-article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 12px;
}
.onechat-article-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.onechat-article-table td {
    padding: 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}
.onechat-article-table tr:hover td {
    background: #f8fafc;
}
.badge-success-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
}
.badge-label-purple {
    display: inline-block;
    padding: 3px 10px;
    background: #6366f1;
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.onechat-action-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s;
}
.onechat-action-btn:hover {
    color: #2563eb;
}
.onechat-action-btn.del:hover {
    color: #ef4444;
}

/* OneChat Article Editor Modal */
.onechat-art-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.onechat-art-modal {
    background: #fff;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.onechat-art-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
}
.onechat-art-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
}
.onechat-art-save-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}
.onechat-art-save-btn:hover {
    background: #1d4ed8;
}
.onechat-art-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}
.onechat-props-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 16px;
}
.onechat-props-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}
.onechat-props-label {
    width: 140px;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.onechat-props-input-wrap {
    flex: 1;
}
.onechat-props-input {
    width: 100%;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #0f172a;
    outline: none;
    transition: all 0.15s;
}
.onechat-props-input:focus {
    background: #fff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.onechat-editor-box {
    margin-top: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.onechat-editor-toolbar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.onechat-tool-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 13px;
    color: #475569;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onechat-tool-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.onechat-editor-textarea {
    width: 100%;
    min-height: 280px;
    padding: 16px;
    border: none;
    outline: none;
    font-size: 14px;
    line-height: 1.6;
    color: #0f172a;
    font-family: inherit;
    resize: vertical;
}

/* OneChat Dynamic Value Override Styles */
.badge-exact-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
}
.dyn-select-name {
    width: 100%;
    max-width: 220px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    color: #1e293b;
    font-weight: 500;
    outline: none;
    transition: all 0.15s;
}
.dyn-select-name:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.dyn-override-textarea {
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: #1e293b;
    outline: none;
    resize: vertical;
    font-family: inherit;
    transition: all 0.15s;
}
.dyn-override-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* OneChat Tools Styles */
.onechat-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}
.onechat-tool-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.onechat-tool-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.onechat-tool-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.onechat-tool-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.onechat-tool-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.onechat-tool-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}
.onechat-tool-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
    flex: 1;
}
.onechat-tool-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}
.onechat-tool-link {
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
}
.onechat-tool-link:hover {
    text-decoration: underline;
}

/* OneChat Switch Toggle */
.onechat-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.onechat-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.onechat-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 24px;
}
.onechat-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.onechat-switch input:checked + .onechat-switch-slider {
    background-color: #2563eb;
}
.onechat-switch input:checked + .onechat-switch-slider:before {
    transform: translateX(20px);
}
.badge-beta-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #ecfeff;
    color: #0891b2;
    border: 1px solid #a5f3fc;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
}

/* OneChat Notify Human Details Styles */
.onechat-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.15s ease;
}
.onechat-back-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.onechat-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.onechat-char-counter {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}
.onechat-seg-group {
    display: inline-flex;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.onechat-seg-btn {
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}
.onechat-seg-btn.active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}
.onechat-agent-search-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.onechat-agent-search-input {
    flex: 1;
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
}
.onechat-agent-search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ── OneChat My Account View ── */
.onechat-account-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    overflow-y: auto;
    color: #1e293b;
    font-family: inherit;
}
.oc-account-header {
    padding: 24px 36px 18px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.oc-account-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}
.oc-account-breadcrumb {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}
.oc-account-btn {
    padding: 8px 24px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.oc-account-btn:hover {
    background: #1d4ed8;
}
.oc-account-btn.saving {
    background: #16a34a;
}
.oc-account-body {
    padding: 32px 36px 60px;
    flex: 1;
}
.oc-account-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 48px;
    max-width: 1100px;
}
.oc-account-col-left {
    display: flex;
    flex-direction: column;
}
.oc-account-section-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}
.oc-account-section-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}
.oc-account-trans-box {
    margin-top: 20px;
}
.oc-account-trans-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
}
.oc-account-trans-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}
.oc-account-col-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.oc-account-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.oc-card-header-label {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 12px;
}
.oc-account-avatar-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}
.oc-account-avatar-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 700;
    color: #ffffff;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    position: relative;
    transition: transform 0.15s;
}
.oc-account-avatar-circle:hover {
    transform: scale(1.02);
}
.oc-account-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.oc-account-field {
    margin-bottom: 16px;
}
.oc-account-field:last-child {
    margin-bottom: 0;
}
.oc-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}
.oc-input-text {
    width: 100%;
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #0f172a;
    outline: none;
    transition: all 0.15s;
    font-family: inherit;
}
.oc-input-text:not([readonly]) {
    background: #ffffff;
    border-color: #cbd5e1;
}
.oc-input-text:not([readonly]):focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.oc-input-select {
    width: 100%;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12.5px;
    color: #0f172a;
    outline: none;
}
.oc-input-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.oc-pwd-eye {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
}
.oc-pwd-eye:hover {
    opacity: 1;
}

/* ── View: Inbox (OneChat Table View) ── */
#view-inbox {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    background: #f1f5f9;
    padding: 24px 36px;
}
.inbox-header-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.4px;
    margin-bottom: 16px;
}
.inbox-tabs-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
}
.inbox-tab {
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    padding-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}
.inbox-tab:hover {
    color: #0f172a;
}
.inbox-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 700;
}
.inbox-add-view-btn {
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 10px;
}
.inbox-card-table-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.inbox-action-bar {
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.inbox-refresh-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}
.inbox-refresh-btn {
    background: none;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 5px 7px;
    cursor: pointer;
    color: #475569;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.inbox-refresh-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}
.inbox-controls-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inbox-search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 12px;
    gap: 8px;
    width: 220px;
    transition: border-color 0.15s;
}
.inbox-search-box:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.inbox-search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #0f172a;
    width: 100%;
}
.inbox-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}
.inbox-filter-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}
.inbox-view-mode-btns {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
}
.inbox-view-btn {
    background: #ffffff;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
}
.inbox-view-btn.active {
    background: #f1f5f9;
    color: #0f172a;
}
.inbox-table-responsive {
    width: 100%;
    overflow-x: auto;
}
.inbox-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.inbox-table th {
    background: #f8fafc;
    padding: 12px 16px;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    user-select: none;
}
.inbox-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
    font-size: 13px;
    vertical-align: middle;
}
.inbox-table tbody tr {
    transition: background 0.12s ease;
    cursor: pointer;
}
.inbox-table tbody tr:hover {
    background: #f8fafc;
}
.inbox-table tbody tr:last-child td {
    border-bottom: none;
}
.inbox-customer-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inbox-cust-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #334155;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.inbox-cust-info {
    display: flex;
    flex-direction: column;
}
.inbox-cust-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 13px;
}
.inbox-cust-email {
    font-size: 11.5px;
    color: #64748b;
}
.inbox-msg-cell {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
}
.inbox-badge-brand {
    display: inline-block;
    padding: 3px 8px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(37,99,235,0.15);
}
.inbox-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 700;
}
.inbox-status-pill.active {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.2);
}
.inbox-status-pill.pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.inbox-status-pill.closed {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}
.inbox-pagination-bar {
    padding: 12px 18px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    font-size: 12.5px;
    color: #64748b;
}
.inbox-page-select {
    padding: 4px 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    color: #0f172a;
    outline: none;
}
.inbox-page-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.inbox-page-btn {
    padding: 5px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}
.inbox-page-btn:hover:not(:disabled) {
    background: #eff6ff;
    color: #2563eb;
    border-color: #2563eb;
}
.inbox-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Inbox Conversation Detail Modal ── */
.inbox-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
    animation: inboxModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes inboxModalFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.inbox-modal-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    width: 100%;
    max-width: 1080px;
    height: 88vh;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    color: #0f172a;
}

.inbox-modal-header {
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    flex-shrink: 0;
    gap: 16px;
}

.inbox-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.inbox-modal-header-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.inbox-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-modal-subinfo {
    font-size: 11.5px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inbox-modal-id-code {
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.inbox-modal-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.inbox-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inbox-modal-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.inbox-modal-btn-chat {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.inbox-modal-btn-chat:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.inbox-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.inbox-modal-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.inbox-modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
}

.inbox-modal-chat-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
}

.inbox-modal-chat-meta {
    padding: 9px 18px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.inbox-modal-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
}

.inbox-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #64748b;
    font-size: 13px;
    gap: 12px;
}

.inbox-modal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    font-size: 13px;
    gap: 8px;
}

.inbox-modal-closed-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin: 12px 0 4px 0;
}

.inbox-modal-info-pane {
    width: 320px;
    flex-shrink: 0;
    background: #ffffff;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.inbox-info-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inbox-info-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inbox-info-grid {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inbox-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 12px;
    gap: 10px;
}

.inbox-info-lbl {
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
}

.inbox-info-val {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}

.inbox-info-url {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.inbox-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.inbox-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inbox-footer-btn:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #94a3b8;
}

.inbox-footer-close {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.inbox-footer-close:hover {
    background: #1e293b;
    border-color: #1e293b;
    color: #ffffff;
}

/* ── View: Reports (OneChat Style) ── */
#view-reports {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    background: #f1f5f9;
    padding: 24px 36px 80px 36px;
    position: relative;
    height: 100%;
    min-height: 0;
}
.reports-header-title {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.4px;
    margin-bottom: 16px;
}
.reports-tabs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.reports-tab-btn {
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.reports-tab-btn:hover {
    color: #0f172a;
    background: #ffffff;
}
.reports-tab-btn.active {
    color: #0f172a;
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-weight: 700;
}
.reports-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 24px 28px;
    margin-bottom: 30px;
    position: relative;
}
.reports-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.reports-sub-heading {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
}
.reports-beta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}
.reports-desc-text {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 20px;
}
.reports-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.reports-control-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.reports-control-box select {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
}
.reports-btn-reset {
    padding: 7px 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}
.reports-btn-reset:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.sankey-wrapper {
    width: 100%;
    position: relative;
    padding: 30px 0 20px 0;
    overflow: visible;
}
.sankey-svg {
    width: 100%;
    min-width: 860px;
    height: 380px;
}
.sankey-legend-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 0 22px 0;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #475569;
}
.sankey-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sankey-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.reports-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 6px;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 12px;
}
.reports-filter-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.reports-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}
.reports-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 12px;
}
.reports-btn-summary {
    padding: 8px 18px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.reports-btn-summary:hover {
    background: #1d4ed8;
}

/* Custom Date Range Picker Popover */
.reports-date-picker-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 320px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.16), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    padding: 16px;
    z-index: 10000;
    animation: flyoutSlideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.rdp-header {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}
.rdp-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.rdp-preset-btn {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.rdp-preset-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.rdp-preset-btn.active {
    background: #eff6ff;
    color: #2563eb;
    border-color: #93c5fd;
}
.rdp-inputs-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.rdp-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rdp-input-group label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}
.rdp-input-group input[type="date"] {
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    color: #0f172a;
}
.rdp-input-group input[type="date"]:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.rdp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.rdp-btn-cancel {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
}
.rdp-btn-apply {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: #2563eb;
    border: 1px solid #1d4ed8;
    border-radius: 6px;
    cursor: pointer;
}
.rdp-btn-apply:hover {
    background: #1d4ed8;
}
.reports-sidebar-flyout {
    position: fixed;
    left: 68px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.16), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    padding: 8px;
    width: 215px;
    z-index: 10000;
    animation: flyoutSlideIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes flyoutSlideIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.reports-context-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.reports-context-item:hover {
    background: #f1f5f9;
    color: #2563eb;
}
.reports-context-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 6px 0;
}
.reports-context-header {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px 2px 12px;
}

/* ── Sankey Flow Tooltip & Multi-Channel Tags ── */
.sankey-tooltip-card {
    position: absolute;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 14px 35px -4px rgba(0, 0, 0, 0.18), 0 8px 12px -6px rgba(0, 0, 0, 0.1);
    padding: 14px 18px;
    min-width: 220px;
    pointer-events: none;
    z-index: 1000;
    display: none;
    transition: opacity 0.15s ease, transform 0.12s ease;
    margin-top: 0;
}
.sankey-tooltip-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    margin-bottom: 8px;
}
.sankey-tooltip-pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}
.sankey-pill {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
}
.sankey-tooltip-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 8px;
}
.sankey-tooltip-sub {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
}
.sankey-tooltip-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sankey-tooltip-label {
    font-size: 10.5px;
    color: #64748b;
    margin-bottom: 2px;
}
.sankey-tooltip-val {
    font-size: 12px;
    font-weight: 700;
    color: #0284c7;
}

/* ── Sankey SVG Animations & Visual Polish ── */
@keyframes sankeyFlowWipe {
    0% {
        opacity: 0;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    100% {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes sankeyStreamFlow {
    0% {
        stroke-dashoffset: 40;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes sankeyNodeReveal {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }
    60% {
        transform: scaleY(1.04);
        opacity: 1;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.sankey-svg .sankey-flow-path {
    animation: sankeyFlowWipe 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
    cursor: pointer;
}

.sankey-svg:hover .sankey-flow-path:not(:hover) {
    opacity: 0.18 !important;
    filter: grayscale(30%) !important;
}

.sankey-svg .sankey-flow-path:hover {
    opacity: 0.95 !important;
    filter: drop-shadow(0 6px 14px rgba(37, 99, 235, 0.45)) brightness(1.1) !important;
}

.sankey-streamline {
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 2.2;
    stroke-dasharray: 6 12;
    animation: sankeyStreamFlow 1.2s linear infinite;
    pointer-events: none;
    fill: none;
}

.sankey-node-bar {
    transform-origin: center;
    animation: sankeyNodeReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.sankey-node-bar:hover {
    filter: brightness(1.15) drop-shadow(0 4px 8px rgba(0,0,0,0.15));
    transform: scaleX(1.1);
    cursor: pointer;
}

.reports-channel-tags-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 13px;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.reports-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}
.reports-chip-close {
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
    font-weight: bold;
}
.reports-chip-close:hover {
    color: #ef4444;
}

/* ── Resolution Report Detailed Table ── */
.reports-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-top: 18px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.reports-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.reports-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 12.5px;
    min-width: 980px;
}
.reports-table th {
    background: #f8fafc;
    padding: 12px 16px;
    color: #64748b;
    font-weight: 700;
    font-size: 11.5px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.reports-table td {
    padding: 12px 16px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: nowrap;
}
.reports-table tr:hover td {
    background: #f8fafc;
    cursor: pointer;
}
.reports-table tr:last-child td {
    border-bottom: none;
}
.reports-id-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: monospace;
    font-size: 12px;
    color: #0f172a;
    font-weight: 600;
}
.reports-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 2px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s;
}
.reports-copy-btn:hover {
    color: #2563eb;
    background: #eff6ff;
}
.reports-label-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
}
.reports-badge-green { background: #dcfce7; color: #166534; }
.reports-badge-teal { background: #ccfbf1; color: #115e59; }
.reports-badge-purple { background: #f3e8ff; color: #6b21a8; }
.reports-badge-pink { background: #fce7f3; color: #9d174d; }
.reports-badge-lime { background: #ecfccb; color: #3f6212; }
.reports-badge-blue { background: #e0e7ff; color: #3730a3; }

.reports-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    font-size: 12.5px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 12px;
}
.reports-pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.reports-page-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.reports-page-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.reports-page-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* ── Show Summary Modal ── */
.summary-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}
.summary-modal-card {
    background: #ffffff;
    border-radius: 14px;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.24);
    animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
}
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.summary-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
}
.summary-modal-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}
.summary-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    line-height: 1;
}
.summary-modal-close:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.summary-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.summary-filter-section {
    margin-bottom: 16px;
}
.summary-filter-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
}
.summary-filter-chips-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: #334155;
    font-weight: 600;
}
.summary-metrics-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow-x: auto;
}
.summary-metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}
.summary-metrics-table th {
    background: #f8fafc;
    padding: 10px 14px;
    color: #64748b;
    font-weight: 700;
    font-size: 11.5px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.summary-metrics-table td {
    padding: 10px 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
}
.summary-metrics-table tr:last-child td {
    border-bottom: none;
}
.summary-flow-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
}
.summary-pill-tag {
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.summary-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 12px;
    color: #64748b;
    flex-wrap: wrap;
    gap: 12px;
}
.summary-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.summary-btn-download {
    padding: 7px 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
}
.summary-btn-download:hover {
    background: #f1f5f9;
}
.summary-btn-copy {
    padding: 7px 18px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}
.summary-btn-copy:hover {
    background: #1d4ed8;
}

/* ── OneChat Right Info Panel (Sidebar Inspector) ── */
.onechat-info-sidebar {
    width: 270px;
    min-width: 240px;
    background: #f8fafc;
    border-left: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    font-family: inherit;
}
#view-messaging.is-split-view .onechat-info-sidebar {
    width: 240px;
    min-width: 200px;
}

/* Tabs */
.oc-info-tabs {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 6px 10px;
    gap: 6px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.oc-info-tab {
    flex: 1;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
}
.oc-info-tab:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.oc-info-tab.active {
    background: #eff6ff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(37,99,235,0.1);
}

/* Body & Cards */
.oc-info-body {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}
.oc-info-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.oc-info-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
}
.oc-info-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.1px;
}

/* Labels & Groups */
.oc-info-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.oc-info-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.oc-info-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.oc-info-id-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
}
.oc-info-id-val {
    font-size: 11.5px;
    font-family: monospace;
    color: #334155;
    word-break: break-all;
    user-select: all;
}
.oc-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.oc-icon-btn:hover {
    color: #2563eb;
    background: #eff6ff;
}

.oc-info-val-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 8px;
    width: fit-content;
}
.oc-labels-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.oc-label-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}
.oc-label-pill-close {
    cursor: pointer;
    font-size: 12px;
    opacity: 0.7;
    font-weight: 700;
}
.oc-label-pill-close:hover {
    opacity: 1;
}

/* Attributes */
.oc-attributes-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oc-attr-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
}
.oc-attr-key {
    font-size: 9.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.oc-attr-val-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.oc-attr-val {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
}
.oc-attr-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.oc-btn-add-attr {
    width: 100%;
    padding: 8px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.oc-btn-add-attr:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
}

/* Session Info */
.oc-info-val-text {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
}
.oc-info-val-platform {
    font-size: 11px;
    line-height: 1.45;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    word-break: break-all;
    max-height: 90px;
    overflow-y: auto;
}
/* ── Automation Rules Styles ── */
.settings-sidebar-flyout {
    width: 220px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.settings-sidebar-flyout .reports-context-header {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px 2px 10px;
    margin-top: 2px;
}
.settings-sidebar-flyout .reports-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    color: #334155;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.settings-sidebar-flyout .reports-context-item:hover {
    background: #f1f5f9;
    color: #2563eb;
}
.settings-sidebar-flyout .reports-context-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 4px 0;
}
.settings-sidebar-flyout::-webkit-scrollbar {
    width: 5px;
}
.settings-sidebar-flyout::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.automation-rules-view {
    flex: 1;
    padding: 28px 36px;
    overflow-y: auto;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}

.ar-page-header {
    margin-bottom: 20px;
}

.ar-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.ar-subtitle {
    font-size: 13.5px;
    color: #64748b;
    margin-top: 4px;
    line-height: 1.5;
}

.ar-pill-tabs {
    display: inline-flex;
    gap: 6px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 20px;
    align-self: flex-start;
}

.ar-pill-tab {
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: all 0.15s ease;
}

.ar-pill-tab:hover {
    color: #0f172a;
}

.ar-pill-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.ar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.ar-search-wrap {
    position: relative;
    flex: 1;
    max-width: 440px;
}

.ar-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.ar-search-input {
    width: 100%;
    padding: 9px 14px 9px 38px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
    outline: none;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ar-search-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ar-btn-primary {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}

.ar-btn-primary:hover {
    background: #1d4ed8;
}

.ar-btn-primary:active {
    transform: scale(0.98);
}

.ar-rules-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.ar-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 13px;
}

.ar-table th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 20px;
}

.ar-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.ar-rule-row {
    transition: background 0.15s;
}

.ar-rule-row:hover {
    background: #f8fafc;
}

.ar-rule-name {
    font-weight: 600;
    color: #0f172a;
    font-size: 13.5px;
    margin-bottom: 2px;
}

.ar-rule-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.ar-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.ar-event-badge.conv-created {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.ar-event-badge.msg-created {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.ar-event-badge.time-trigger {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.ar-event-badge.ticket-created {
    background: #faf5ff;
    color: #9333ea;
    border: 1px solid #e9d5ff;
}

.ar-event-badge.bot-handover {
    background: #f0fdfa;
    color: #0d9488;
    border: 1px solid #99f6e4;
}

.ar-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ar-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.ar-chip-action {
    background: #faf5ff;
    color: #7e22ce;
    border-color: #e9d5ff;
    font-weight: 500;
}

.ar-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: #64748b;
}

.ar-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    color: #cbd5e1;
}

.ar-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px;
}

.ar-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ar-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1;
    transition: .2s;
    border-radius: 20px;
}

.ar-switch-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
}

.ar-switch input:checked + .ar-switch-slider {
    background-color: #2563eb;
}

.ar-switch input:checked + .ar-switch-slider:before {
    transform: translateX(18px);
}

/* Modal builder styling */
.modal-box.ar-modal-wide {
    max-width: 860px !important;
    width: 95% !important;
    max-height: 92vh !important;
    padding: 0 !important;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background: #ffffff;
    overflow: hidden;
}

.ar-modal-container {
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ar-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}

.ar-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

.ar-modal-close {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    line-height: 1;
}

.ar-modal-close:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.ar-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ar-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ar-form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

.ar-form-input, .ar-form-select, .ar-form-textarea {
    width: 100%;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 13px;
    color: #0f172a;
    outline: none;
    transition: all 0.15s;
}

.ar-form-input:focus, .ar-form-select:focus, .ar-form-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ar-form-textarea {
    min-height: 70px;
    resize: vertical;
}

.ar-builder-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ar-builder-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
}

.ar-btn-remove {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ar-btn-remove:hover {
    background: #fca5a5;
}

.ar-btn-add-item {
    padding: 7px 12px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    transition: all 0.15s;
}

.ar-btn-add-item:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.ar-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #ffffff;
}







/* ── Modern Typing Indicator Bubble ── */
#typing-indicator, #typing-indicator-split, .oc-typing-indicator-bar {
    padding: 4px 18px 2px 18px;
    background: transparent;
    transition: all 0.2s ease;
}

.oc-typing-bubble {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    animation: fadeIn 0.15s ease-out;
    max-width: 90%;
    margin-bottom: 6px;
}

.oc-typing-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oc-typing-preview-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    color: #1e293b;
    word-break: break-word;
    box-sizing: border-box;
    width: 100%;
}

.oc-typing-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4f46e5;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oc-typing-body {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #475569;
}

.oc-typing-name {
    font-weight: 600;
    color: #0f172a;
}

.oc-typing-dots {
    display: inline-flex;
    gap: 3.5px;
    align-items: center;
    margin-left: 2px;
}

.oc-typing-dots .oc-dot {
    width: 4.5px;
    height: 4.5px;
    background: #6366f1;
    border-radius: 50%;
    animation: ocDotBounce 1.4s infinite ease-in-out both;
}

.oc-typing-dots .oc-dot:nth-child(1) { animation-delay: -0.32s; }
.oc-typing-dots .oc-dot:nth-child(2) { animation-delay: -0.16s; }
.oc-typing-dots .oc-dot:nth-child(3) { animation-delay: 0s; }

@keyframes ocDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1.15); opacity: 1; }
}

/* System Event / Assignment Notification */
.msg-system-event-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 8px 0;
    padding: 0 4px;
    box-sizing: border-box;
}

.msg-system-event-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f0fdfa;
    border-left: 3.5px solid #10b981;
    border-radius: 4px 8px 8px 4px;
    padding: 8px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    gap: 12px;
}

.msg-system-event-content {
    font-size: 12.5px;
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
}

.msg-system-event-time {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    margin-left: auto;
}

/* AI Status Indicator Capsule (Timer + Action + Spinner) */
.oc-ai-status-container {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 6px 0 4px 0;
    transition: all 0.2s ease;
}

.oc-ai-status-capsule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 4px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    animation: fadeIn 0.2s ease-out;
}

.oc-ai-status-timer {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}

.oc-ai-status-text {
    font-size: 12px;
    font-weight: 500;
    color: #334155;
}

.oc-ai-status-spinner {
    font-size: 13px;
    font-family: monospace;
    font-weight: 700;
    color: #6366f1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

/* Tool Triggered Message in Chat (Notify Human Agent) */
.msg-system-tool-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 8px 0;
    padding: 0 4px;
    box-sizing: border-box;
    gap: 5px;
}

.msg-system-tool-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #f0fdfa;
    border-left: 3.5px solid #10b981;
    border-radius: 4px 8px 8px 4px;
    padding: 7px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    gap: 12px;
}

.msg-system-tool-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #1e293b;
    font-weight: 500;
}

.oc-tool-pill {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.msg-system-tool-card {
    background: #f8faff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 9px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.04);
}

.msg-tool-reason {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.msg-tool-visibility {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

/* Auto-Labeling Settings & Pills */
.al-table-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: visible !important;
    margin-top: 12px;
}

.al-table {
    width: 100%;
    border-collapse: collapse;
}

.al-table th {
    background: #f8fafc;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.al-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    position: relative;
    overflow: visible !important;
}

.al-table tr:last-child td {
    border-bottom: none;
}

.al-desc-textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #1e293b;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.al-desc-textarea:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.al-labels-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    background: #ffffff;
    min-height: 40px;
    box-sizing: border-box;
    position: relative;
    overflow: visible !important;
}

.al-label-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 2px 8px 2px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: #1e293b;
}

.al-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.al-label-close {
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
    margin-left: 2px;
    line-height: 1;
    font-weight: 700;
}

.al-label-close:hover {
    color: #ef4444;
}

.al-add-label-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 1;
    min-width: 140px;
}

.al-add-label-input {
    border: none;
    outline: none;
    font-size: 12px;
    padding: 3px 6px;
    min-width: 120px;
    width: 100%;
    color: #1e293b;
    background: transparent;
}

.al-add-label-input::placeholder {
    color: #94a3b8;
}

.al-label-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-width: 360px;
    max-height: 250px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 12px 30px -4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999999 !important;
    padding: 6px;
    box-sizing: border-box;
}

.al-dropdown-header {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 8px 6px;
}

.al-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.12s ease;
    user-select: none;
}

.al-dropdown-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.al-dropdown-item.selected {
    background: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}

.al-dropdown-item .al-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.al-dropdown-item .al-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-dropdown-item .al-item-badge {
    font-size: 10px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-dropdown-create {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #2563eb;
    font-weight: 600;
    background: #f0fdf4;
    cursor: pointer;
    border: 1px dashed #86efac;
    margin-bottom: 6px;
    transition: background 0.12s ease;
}

.al-dropdown-create:hover {
    background: #dcfce7;
}

.btn-del-al-row {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #ef4444;
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-del-al-row:hover {
    background: #fee2e2;
}

/* Sidebar label pills with dots */
.oc-label-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
    color: #334155;
}

.oc-label-dot-human { background: #10b981; }
.oc-label-dot-deposit { background: #10b981; }
.oc-label-dot-withdraw { background: #ef4444; }
.oc-label-dot-lock { background: #8b5cf6; }
.oc-label-dot-warning { background: #f59e0b; }
.oc-label-dot-default { background: #3b82f6; }