:root {
    --crm-primary:#0864e8;
    --crm-primary-dark:#0751be;
    --crm-gray-50:#f7f9fc;
    --crm-gray-100:#f0f4fa;
    --crm-gray-200:#e3e9f2;
    --crm-gray-400:#8c9bb1;
    --crm-gray-500:#62718a;
    --crm-gray-700:#34425c;
    --crm-gray-800:#17243c;
    --corporate-light:#f7f9fc;
    --corporate-dark:#17243c;
    --corporate-info:#0864e8;
    --corporate-success:#187449;
    --corporate-warning:#996011;
    --corporate-danger:#c4314b;
    --corporate-gray:#62718a;
    --border-color:#e3e9f2;
    --shadow-sm:0 1px 3px #17243c05;
    --shadow-md:0 4px 16px #17243c08;
    --bs-primary:#0864e8}

* {
    box-sizing:border-box}
body {
    margin:0;
    background:#fff;
    color:#17243c;
    font:14px/1.5 Inter,system-ui,sans-serif}
a {
    color:#0864e8}
button,a,input,select,textarea {
    touch-action:manipulation}
a:focus-visible,button:focus-visible {
    outline:3px solid #79adfa;
    outline-offset:3px}
.crm-sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:240px;
    background:#f6f9fd;
    border-right:1px solid var(--border-color);
    z-index:1000;
    overflow-y:auto}
.crm-sidebar-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 20px;
    gap:10px}
.crm-logo {
    display:flex;
    align-items:center;
    gap:12px;
    color:#142039;
    font-size:21px;
    font-weight:700;
    text-decoration:none}
.crm-sidebar-toggle {
    background:none;
    border:0;
    color:#62718a;
    padding:8px;
    border-radius:6px}
.crm-sidebar-nav {
    padding:12px}
.crm-nav-link {
    display:flex;
    gap:14px;
    align-items:center;
    padding:13px 12px;
    margin:4px 0;
    color:#41516b;
    text-decoration:none;
    border-radius:7px}
.crm-nav-link i {
    font-size:19px}
.crm-nav-link.active,.crm-nav-link:hover {
    background:#e4efff;
    color:#0864e8}
.nav-caption {
    margin:28px 12px 12px;
    color:#62718a;
    font-size:12px}
.crm-main {
    margin-left:240px;
    min-height:100vh}
.crm-header {
    min-height:65px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 28px;
    border-bottom:1px solid var(--border-color)}
.crm-header-left {
    display:flex;
    align-items:center;
    gap:12px}
.crm-breadcrumb {
    color:#62718a}
.crm-breadcrumb a {
    text-decoration:none}
.crm-content {
    padding:26px 28px}
.crm-sidebar.collapsed {
    width:76px}
.crm-sidebar.collapsed .crm-logo span,.crm-sidebar.collapsed .crm-nav-link span,.crm-sidebar.collapsed .nav-caption {
    display:none}
.crm-sidebar.collapsed .crm-sidebar-header {
    padding:20px 8px;
    flex-wrap:wrap}
.crm-sidebar.collapsed+.crm-main {
    margin-left:76px}
.crm-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border:0;
    border-radius:7px;
    font-weight:500;
    text-decoration:none}
.crm-btn-secondary {
    background:#f0f4fa;
    color:#41516b}
.crm-btn-primary,.btn-primary {
    background:#0864e8;
    color:white;
    border-color:#0864e8}
.btn {
    font-size:14px;
    border-radius:7px;
    padding:9px 14px}
.btn-primary:hover {
    background:#0751be}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px}
.page-heading h1 {
    font-size:28px;
    font-weight:700;
    margin:0 0 4px}
.page-heading p {
    color:#62718a;
    margin:0}
.queue-tabs {
    display:flex;
    gap:22px;
    border-bottom:1px solid var(--border-color);
    margin-bottom:18px;
    flex-wrap:wrap}
.queue-tabs>a,.queue-tabs>span {
    padding:12px 8px;
    color:#52627c;
    text-decoration:none;
    border-bottom:3px solid transparent}
.queue-tabs .active {
    color:#0864e8;
    border-color:#0864e8;
    font-weight:600}
.queue-tabs span span,.queue-tabs a span {
    padding:2px 8px;
    background:#eaf1fc;
    border-radius:12px;
    margin-left:7px}
.queue-filters {
    display:flex;
    gap:10px;
    margin-bottom:18px;
    flex-wrap:wrap}
.queue-filters .form-select {
    width:auto;
    max-width:220px}
.queue-filters .search-field {
    flex:1;
    min-width:200px}
.form-control,.form-select {
    border-color:#dce4ef;
    border-radius:7px;
    font-size:14px;
    padding:10px 12px}
.support-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:18px;
    align-items:start}
.ticket-queue {
    min-width:0}
.queue-ticket {
    display:flex;
    gap:14px;
    align-items:flex-start;
    text-decoration:none;
    color:#17243c;
    border-bottom:1px solid var(--border-color);
    border-left:4px solid transparent;
    padding:22px 14px}
.queue-ticket:hover {
    background:#f7faff;
    color:#17243c}
.queue-ticket.selected {
    background:#edf5ff;
    border-left-color:#0864e8}
.ticket-copy {
    flex:1;
    min-width:0;
    overflow-wrap:anywhere}
.ticket-copy strong {
    font-weight:600}
.ticket-meta,.ticket-time {
    color:#62718a;
    font-size:12px;
    margin-top:6px}
.ticket-tags {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    max-width:155px}
.status-pill,.priority-pill {
    font-size:11px;
    padding:4px 7px;
    border-radius:6px;
    display:inline-block}
.status-pill {
    background:#e5f0ff;
    color:#075abb}
.status-pending_close {
    background:#fff0db;
    color:#925407}
.status-closed {
    background:#edf0f4;
    color:#52627c}
.priority-pill {
    background:#f1f4f8;
    color:#52627c}
.priority-urgent,.priority-high {
    background:#ffe8ed;
    color:#b7213c}
.priority-low {
    background:#e4f6ed;
    color:#17683f}
.ticket-time {
    width:76px;
    flex-shrink:0;
    margin:0}
.unread-count {
    display:block;
    width:24px;
    text-align:center;
    background:#0864e8;
    color:#fff;
    border-radius:50%;
    padding:3px;
    margin-top:8px}
.conversation-panel {
    border:1px solid var(--border-color);
    border-radius:9px;
    overflow:hidden;
    min-width:0}
.conversation-toolbar {
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:12px 16px;
    border-bottom:1px solid var(--border-color);
    font-size:12px;
    color:#62718a}
#ticket-preview {
    width:100%;
    height:calc(100vh - 300px);
    min-height:560px;
    border:0;
    display:block}
#ticket-preview[hidden] {
    display:none}
.queue-empty {
    padding:60px 24px;
    text-align:center;
    color:#62718a}
.queue-empty i {
    font-size:30px}
.queue-empty h2 {
    font-size:18px;
    color:#34425c;
    margin-top:15px}
.pagination-bar {
    display:flex;
    justify-content:space-between;
    padding:20px;
    gap:15px}
.card,.crm-card {
    border:1px solid var(--border-color);
    border-radius:9px;
    box-shadow:none;
    background:#fff}
.card-header,.crm-card-header {
    padding:16px 20px;
    background:#fff;
    border-bottom:1px solid var(--border-color)}
.card-body,.crm-card-body {
    padding:20px}
.card-footer {
    background:#fff;
    border-top:1px solid var(--border-color);
    padding:16px}
.message-item {
    border:0;
    border-radius:8px;
    background:#f6f9fd;
    box-shadow:none;
    padding:16px;
    overflow-wrap:anywhere}
.message-item.internal {
    border-left:3px solid #d3a64a;
    background:#fff8ea}
.crm-card:hover {
    transform:none}
.crm-metric {
    padding:20px}
.crm-metric-value {
    font-size:30px;
    color:#0864e8}
.crm-table {
    width:100%}
.crm-table td,.crm-table th {
    padding:12px;
    border-bottom:1px solid var(--border-color)}
.support-embedded .crm-sidebar,.support-embedded .crm-header {
    display:none}
.support-embedded .crm-main {
    margin:0}
.support-embedded .crm-content {
    padding:16px}
.support-embedded .crm-content>.row>.col-md-8,.support-embedded .crm-content>.row>.col-md-4 {
    width:100%}
.support-embedded #messages-container {
    max-height:none!important}
.support-embedded h4 {
    font-size:20px}
.support-embedded .card {
    border:0}
.support-embedded .card-header {
    padding:10px 0}
.support-embedded .card-body {
    padding:14px 0}
.support-embedded .card-footer {
    padding:16px 0}
.support-embedded .message-item {
    padding:14px}
.support-embedded .crm-content>.row>.col-md-4 {
    border-top:1px solid var(--border-color);
    padding-top:18px}

@media(max-width:1250px) {
    .support-workspace {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.queue-ticket {
    flex-wrap:wrap}
.ticket-copy {
    flex-basis:100%}
.ticket-tags {
    max-width:none;
    flex:1}
}

@media(max-width:1000px) {
    .support-workspace {
    grid-template-columns:1fr}
.conversation-panel {
    display:none}
.crm-sidebar {
    width:210px}
.crm-main {
    margin-left:210px}
.queue-ticket {
    flex-wrap:nowrap}
.ticket-copy {
    flex-basis:auto}
}

@media(max-width:767px) {
    .crm-sidebar {
    transform:translateX(-100%);
    width:240px}
.crm-sidebar.show {
    transform:translateX(0)}
.crm-main,.crm-sidebar.collapsed+.crm-main {
    margin-left:0}
.crm-content {
    padding:20px 16px}
.crm-header {
    padding:12px 16px}
.page-heading {
    align-items:flex-start;
    flex-direction:column}
.page-heading h1 {
    font-size:25px}
.queue-tabs {
    gap:8px}
.queue-tabs>a {
    padding:10px 2px;
    font-size:12px}
.queue-filters .form-select {
    max-width:100%;
    flex:1;
    min-width:130px}
.queue-ticket {
    flex-wrap:wrap;
    padding:18px 10px}
.ticket-copy {
    flex-basis:100%}
.form-control,.form-select {
    font-size:16px}
.btn {
    min-height:42px}
}

:root {
    --radius-lg:9px;
    --radius-md:7px;
    --crm-success:#187449;
    --crm-warning:#996011;
    --crm-danger:#c4314b;
    --crm-info:#0864e8;
    --crm-accent:#0864e8;
    --crm-gray-600:#52627c;
    --crm-gray-300:#cbd5e1;
    --crm-gray-900:#142039;
    --crm-secondary:#34425c;
    --crm-light:#f7f9fc;
    --crm-dark:#17243c}

.support-embedded .ticket-properties {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    font-size:12px}
.support-embedded .ticket-properties>.col-md-6 {
    width:100%}
.support-embedded .ticket-properties p {
    margin-bottom:5px}
.support-embedded .card.mb-4 {
    margin-bottom:12px!important}
.support-embedded .card-body>hr {
    margin:10px 0}
.support-embedded .card-header h5 {
    font-size:14px}
.support-embedded .card-header {
    gap:8px;
    flex-wrap:wrap}
.support-embedded #message-form .input-group {
    display:flex;
    flex-direction:column;
    gap:10px}
.support-embedded #message-input {
    width:100%;
    border-radius:7px;
    resize:vertical}
.support-embedded #message-form button[type=submit] {
    align-self:flex-end;
    border-radius:7px}
.support-embedded .card:has(#message-form) {
    position:relative}
.support-embedded .card-footer {
    position:sticky;
    bottom:0;
    z-index:2;
    background:#fff}
.dashboard-heading {
    padding:20px}
.dashboard-heading>.d-flex {
    flex-wrap:wrap;
    gap:16px}
.metric-card {
    border-radius:9px;
    text-align:left;
    padding:22px}
.metric-card:hover {
    transform:none;
    box-shadow:none}
.metric-card::before {
    display:none}
.metric-icon.primary,.metric-icon.success,.metric-icon.warning,.metric-icon.info {
    background:#eaf2ff;
    color:#0864e8;
    margin:0 0 14px}
.metric-value {
    font-size:30px}
.dashboard-grid {
    grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}