.crm-live-support {
    overflow: hidden;
}

.crm-live-support__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    min-height: 620px;
    border-top: 1px solid var(--crm-line, rgba(255, 255, 255, .08));
}

.crm-live-support__queue {
    grid-column: 2;
    border-inline-start: 1px solid var(--crm-line, rgba(255, 255, 255, .08));
    background: rgba(7, 13, 18, .44);
}

.crm-live-support__queue > header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--crm-line, rgba(255, 255, 255, .08));
}

.crm-live-support__queue > header strong { color: var(--crm-text, #f4f7f8); }
.crm-live-support__queue > header span { color: var(--crm-muted, #8c9aa3); font-size: .76rem; }

.crm-live-support__queue-list {
    max-height: 650px;
    overflow: auto;
    padding: 9px;
}

.crm-live-support__queue-item {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    margin: 0 0 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: inherit;
    background: transparent;
    text-align: right;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.crm-live-support__queue-item:hover,
.crm-live-support__queue-item.is-active {
    border-color: rgba(71, 194, 204, .28);
    background: linear-gradient(130deg, rgba(71, 194, 204, .1), rgba(90, 162, 236, .035));
}

.crm-live-support__queue-item:hover { transform: translateX(-2px); }
.crm-live-support__queue-item.is-unread { border-inline-end-color: #efb04f; }
.crm-live-support__queue-item.is-unread .crm-live-support__queue-copy strong::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-start: 7px;
    border-radius: 50%;
    background: #efb04f;
    box-shadow: 0 0 10px rgba(239, 176, 79, .7);
}

.crm-live-support__avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border: 1px solid rgba(71, 194, 204, .32);
    border-radius: 50%;
    color: #7bd9df;
    background: rgba(71, 194, 204, .1);
    font-weight: 900;
}

.crm-live-support__queue-copy,
.crm-live-support__queue-meta { display: grid; min-width: 0; gap: 4px; }
.crm-live-support__queue-copy strong { overflow: hidden; color: var(--crm-text, #f4f7f8); text-overflow: ellipsis; white-space: nowrap; }
.crm-live-support__queue-copy small { overflow: hidden; color: var(--crm-muted, #8c9aa3); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.crm-live-support__queue-meta { justify-items: end; }
.crm-live-support__queue-meta time { color: var(--crm-muted, #8c9aa3); font-size: .62rem; white-space: nowrap; }
.crm-live-support__queue-meta b { padding: 3px 6px; border-radius: 999px; font-size: .59rem; white-space: nowrap; }
.crm-live-support__queue-meta .status-waiting { color: #efb04f; background: rgba(239, 176, 79, .1); }
.crm-live-support__queue-meta .status-active { color: #60c389; background: rgba(96, 195, 137, .1); }
.crm-live-support__queue-meta .status-closed { color: #8c9aa3; background: rgba(140, 154, 163, .1); }

.crm-live-support__thread-panel {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    background: linear-gradient(145deg, rgba(12, 19, 25, .56), rgba(7, 12, 17, .82));
}

.crm-live-support__conversation { min-height: 620px; display: grid; grid-template-rows: auto minmax(330px, 1fr) auto; }
.crm-live-support__visitor {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--crm-line, rgba(255, 255, 255, .08));
}

.crm-live-support__visitor > div:first-child { display: flex; align-items: center; gap: 11px; min-width: 0; }
.crm-live-support__visitor p { display: grid; gap: 4px; margin: 0; }
.crm-live-support__visitor p strong { color: var(--crm-text, #f4f7f8); }
.crm-live-support__visitor p small { display: flex; flex-wrap: wrap; gap: 10px; color: var(--crm-muted, #8c9aa3); }
.crm-live-support__actions { display: flex; align-items: center; gap: 7px; }
.crm-live-support__actions > span { color: var(--crm-muted, #8c9aa3); font-size: .72rem; }
.crm-live-support__actions button {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 7px;
    color: var(--crm-muted, #aeb8be);
    background: rgba(255, 255, 255, .035);
}
.crm-live-support__actions button:hover,
.crm-live-support__actions button.is-active { border-color: rgba(71, 194, 204, .45); color: #75d7dd; background: rgba(71, 194, 204, .09); }
.crm-live-support__actions button[data-support-status="closed"].is-active { border-color: rgba(239, 122, 110, .4); color: #ef8f85; background: rgba(239, 122, 110, .08); }

.crm-live-support__messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    overflow: auto;
    background-image: radial-gradient(circle at 50% 20%, rgba(71, 194, 204, .055), transparent 42%);
}

.crm-live-support__message { max-width: min(72%, 650px); display: grid; gap: 5px; }
.crm-live-support__message p { margin: 0; padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px 11px 3px 11px; color: #eaf0f2; background: rgba(255, 255, 255, .045); line-height: 1.85; white-space: pre-wrap; }
.crm-live-support__message small { color: #77868f; font-size: .66rem; }
.crm-live-support__message.is-agent { align-self: flex-end; }
.crm-live-support__message.is-agent p { border-color: rgba(71, 194, 204, .22); border-radius: 11px 11px 11px 3px; background: linear-gradient(135deg, rgba(71, 194, 204, .17), rgba(90, 162, 236, .1)); }
.crm-live-support__message.is-agent small { text-align: left; }
.crm-live-support__message.is-visitor { align-self: flex-start; }

.crm-live-support__composer { padding: 14px 18px 16px; border-top: 1px solid var(--crm-line, rgba(255, 255, 255, .08)); background: rgba(6, 11, 15, .7); }
.crm-live-support__composer label { display: block; margin-bottom: 7px; color: var(--crm-muted, #93a0a8); font-size: .72rem; }
.crm-live-support__composer textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; color: var(--crm-text, #f4f7f8); background: rgba(255, 255, 255, .035); outline: none; }
.crm-live-support__composer textarea:focus { border-color: rgba(71, 194, 204, .55); box-shadow: 0 0 0 3px rgba(71, 194, 204, .08); }
.crm-live-support__composer > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.crm-live-support__composer small { color: #ef8f85; }
.crm-live-support__composer button { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid #58bdc5; border-radius: 7px; color: #071316; background: linear-gradient(135deg, #79d8d8, #55b7d7); font-weight: 900; }
.crm-live-support__composer button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.crm-live-support__composer :disabled { cursor: not-allowed; opacity: .5; }

.crm-live-support__blank,
.crm-live-support__empty-queue { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 300px; padding: 28px; text-align: center; }
.crm-live-support__blank { min-height: 620px; }
.crm-live-support__blank svg,
.crm-live-support__empty-queue svg { width: 38px; height: 38px; fill: none; stroke: #5fc5cc; stroke-width: 1.4; }
.crm-live-support__blank strong,
.crm-live-support__empty-queue strong { color: var(--crm-text, #f4f7f8); }
.crm-live-support__blank small,
.crm-live-support__empty-queue small { color: var(--crm-muted, #8c9aa3); }

html[data-crm-theme="light"] .crm-live-support__queue,
html[data-crm-theme="light"] .crm-live-support__thread-panel,
html[data-crm-theme="light"] .crm-live-support__composer { background: rgba(255, 253, 248, .8); }
html[data-crm-theme="light"] .crm-live-support__message p { color: #302a22; background: rgba(55, 45, 34, .045); }
html[data-crm-theme="light"] .crm-live-support__composer textarea { color: #302a22; border-color: rgba(55, 45, 34, .14); background: #fff; }

@media (max-width: 980px) {
    .crm-live-support__layout { grid-template-columns: 1fr; }
    .crm-live-support__queue,
    .crm-live-support__thread-panel { grid-column: 1; grid-row: auto; }
    .crm-live-support__queue { border-inline-start: 0; border-bottom: 1px solid var(--crm-line, rgba(255, 255, 255, .08)); }
    .crm-live-support__queue-list { display: flex; max-height: none; overflow-x: auto; }
    .crm-live-support__queue-item { min-width: 280px; }
    .crm-live-support__conversation,
    .crm-live-support__blank { min-height: 540px; }
}

@media (max-width: 640px) {
    .crm-live-support__visitor { align-items: flex-start; flex-direction: column; }
    .crm-live-support__actions { width: 100%; flex-wrap: wrap; }
    .crm-live-support__actions > span { margin-inline-end: auto; }
    .crm-live-support__message { max-width: 88%; }
    .crm-live-support__messages { padding: 14px; }
}