.office-crm-loading,
.office-crm-thread-empty,
.office-crm-empty {
    color: var(--office-muted, #647069);
    padding: 24px;
}

.office-crm-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.office-crm-page-focus {
    height: calc(100dvh - 24px);
    gap: 10px;
    overflow: hidden;
}

.office-crm-header,
.office-crm-toolbar,
.office-crm-shell,
.office-crm-list,
.office-crm-thread {
    background: var(--office-surface, #ffffff);
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 8px;
}

.office-crm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
}

.office-crm-page-focus .office-crm-header {
    padding: 14px 16px;
}

.office-crm-page-focus .office-crm-header p {
    display: none;
}

.office-crm-page-focus .office-crm-header h1 {
    margin-bottom: 0;
}

.office-crm-read-filter {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--office-border, #dfe7e2);
    border-bottom: 1px solid var(--office-border, #dfe7e2);
    background: color-mix(in srgb, var(--office-surface-muted, #f8faf8) 62%, var(--office-surface, #ffffff));
}

.office-crm-read-filter button {
    min-width: 92px;
    min-height: 30px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 4px;
    background: var(--office-surface, #ffffff);
    color: var(--office-muted, #647069);
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 600;
}

.office-crm-read-filter button.active {
    border-color: var(--office-primary, #002aba);
    background: color-mix(in srgb, var(--office-primary, #002aba) 12%, var(--office-surface, #ffffff));
    color: var(--office-primary, #002aba);
}

.office-crm-read-filter button.human-support-filter {
    align-items: center;
    border-color: rgba(0, 42, 186, 0.24);
    color: #c2410c;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    min-width: 180px;
}

.office-crm-read-filter button.human-support-filter.active {
    border-color: rgba(0, 42, 186, 0.42);
    background: color-mix(in srgb, #002aba 14%, var(--office-surface, #ffffff));
    color: #c2410c;
}

.office-crm-read-filter button.human-support-filter svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.office-crm-read-filter button:disabled {
    opacity: 0.55;
}

.office-crm-header span,
.office-crm-toolbar span,
.office-crm-list-header span,
.office-crm-thread-header span {
    color: var(--office-primary, #002aba);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.office-crm-header span {
    display: block;
    margin-bottom: 0.25rem;
}

.office-crm-header h1,
.office-crm-list-header h2,
.office-crm-thread-header h2 {
    color: var(--office-foreground, #17211c);
    margin: 0;
}

.office-crm-list-header h2,
.office-crm-thread-header h2 {
    margin: 4px 0;
}

.office-crm-header h1 {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0;
}

.office-crm-header p,
.office-crm-thread-header p {
    color: var(--office-muted, #647069);
    margin: 0;
}

.office-crm-protocol-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 10px 0 4px;
}

.office-crm-protocol-summary span {
    background: color-mix(in srgb, var(--office-primary, #002aba) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--office-primary, #002aba) 24%, transparent);
    border-radius: 999px;
    color: var(--office-primary, #002aba);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 9px;
    text-transform: uppercase;
}

.office-crm-protocol-summary.empty span {
    background: color-mix(in srgb, var(--office-muted, #647069) 10%, transparent);
    border-color: color-mix(in srgb, var(--office-muted, #647069) 24%, transparent);
    color: var(--office-muted, #647069);
}

.office-crm-protocol-summary small {
    color: var(--office-muted, #647069);
    font-size: 0.78rem;
}

.office-crm-header p {
    margin-top: 0.45rem;
}

.office-crm-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    padding: 16px;
    align-items: end;
}

.office-crm-channel-selector {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.office-crm-channel-selector button {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 6px;
    background: var(--office-surface-muted, #f8faf8);
    color: var(--office-muted, #647069);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.office-crm-channel-selector button.active {
    background: color-mix(in srgb, var(--office-primary, #002aba) 12%, var(--office-surface, #ffffff));
    border-color: var(--office-primary, #002aba);
    color: var(--office-primary, #002aba);
}

.office-crm-channel-selector button:focus-visible {
    outline: 2px solid var(--office-primary, #002aba);
    outline-offset: 2px;
}

.office-crm-channel-selector button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.office-crm-page-focus > :not(.office-crm-shell) {
    flex-shrink: 0;
}

.office-crm-page-focus .office-crm-shell {
    flex: 1;
    min-height: 0;
}

.office-crm-page-focus .office-crm-toolbar {
    padding: 12px;
}

.office-crm-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.office-crm-toolbar input,
.office-crm-toolbar select,
.office-crm-transfer-select {
    min-height: 42px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 6px;
    background: var(--office-surface-muted, #f8faf8);
    color: var(--office-foreground, #17211c);
    padding: 0 12px;
}

.office-crm-toolbar div,
.office-crm-thread-actions,
.office-crm-pagination {
    display: flex;
    gap: 8px;
}

.office-crm-thread-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.office-crm-meta-guidance-panel {
    align-items: center;
    border-bottom: 1px solid var(--office-border, #dfe7e2);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    padding: 12px 16px;
}

.office-crm-meta-guidance-panel.open {
    background: color-mix(in srgb, #0ea5e9 10%, var(--office-surface, #ffffff));
}

.office-crm-meta-guidance-panel.closed {
    background: color-mix(in srgb, #002aba 14%, var(--office-surface, #ffffff));
}

.office-crm-meta-guidance-copy {
    display: grid;
    gap: 4px;
}

.office-crm-meta-guidance-copy span {
    color: var(--office-primary, #002aba);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.office-crm-meta-guidance-copy strong {
    color: var(--office-foreground, #17211c);
    font-size: 0.98rem;
}

.office-crm-meta-guidance-copy p {
    color: var(--office-muted, #647069);
    margin: 0;
}

.office-crm-meta-template-panel {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--office-border, #dfe7e2);
    background: color-mix(in srgb, #002aba 8%, var(--office-surface, #ffffff));
}

.office-crm-meta-template-panel-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.office-crm-meta-template-panel-header div {
    display: grid;
    gap: 4px;
}

.office-crm-meta-template-panel-header span,
.office-crm-meta-template-form label > span,
.office-crm-meta-template-parameters label > span {
    color: var(--office-primary, #002aba);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.office-crm-meta-template-panel-header strong,
.office-crm-meta-template-preview strong,
.office-crm-meta-template-empty strong {
    color: var(--office-foreground, #17211c);
}

.office-crm-meta-template-panel-header small,
.office-crm-meta-template-preview span,
.office-crm-meta-template-preview small,
.office-crm-meta-template-empty span {
    color: var(--office-muted, #647069);
}

.office-crm-meta-template-empty,
.office-crm-meta-template-preview {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--office-border, #dfe7e2) 60%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--office-surface-muted, #f8faf8) 84%, var(--office-surface, #ffffff));
}

.office-crm-meta-template-form {
    display: grid;
    gap: 12px;
}

.office-crm-meta-template-form label,
.office-crm-meta-template-parameters label {
    display: grid;
    gap: 6px;
}

.office-crm-meta-template-form select,
.office-crm-meta-template-parameters input {
    min-height: 40px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 10px;
    background: var(--office-surface, #ffffff);
    color: var(--office-foreground, #17211c);
    padding: 0 12px;
}

.office-crm-meta-template-parameters {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.office-crm-chat-search {
    align-items: end;
    background: color-mix(in srgb, var(--office-surface-muted, #f8faf8) 72%, var(--office-surface, #ffffff));
    border-bottom: 1px solid var(--office-border, #dfe7e2);
    display: grid;
    flex: 0 0 auto;
    gap: 10px;
    grid-template-columns: minmax(180px, 1fr) auto auto auto;
    padding: 12px 16px;
}

.office-crm-chat-search label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.office-crm-chat-search span {
    color: var(--office-primary, #002aba);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.office-crm-chat-search input {
    min-height: 40px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 6px;
    background: var(--office-surface, #ffffff);
    color: var(--office-foreground, #17211c);
    padding: 0 12px;
}

.office-crm-chat-search-close {
    min-width: 40px;
    padding-inline: 0;
}

.office-crm-search-result-nav {
    align-items: center;
    background: color-mix(in srgb, #eab308 10%, var(--office-surface, #ffffff));
    border-bottom: 1px solid color-mix(in srgb, #eab308 28%, var(--office-border, #dfe7e2));
    color: var(--office-foreground, #17211c);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 16px;
}

.office-crm-search-result-nav > span {
    color: color-mix(in srgb, #a16207 84%, var(--office-foreground, #17211c));
    font-size: 0.82rem;
    font-weight: 700;
}

.office-crm-search-result-nav > div {
    display: flex;
    gap: 8px;
}

.office-crm-transfer-select {
    max-width: 180px;
}

.office-crm-assignment-status {
    display: inline-flex;
    margin-top: 4px;
    color: var(--office-muted, #647069);
    font-size: 0.78rem;
    font-weight: 600;
}

.office-crm-assignment-status.mine,
.office-crm-assignment-status.transfer-in {
    color: #15803d;
}

.office-crm-assignment-status.locked,
.office-crm-assignment-status.transfer-pending {
    color: #b45309;
}

.office-crm-assignment-status.human-support {
    color: #c2410c;
}

.office-crm-secondary-button {
    min-height: 40px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 6px;
    background: var(--office-surface, #ffffff);
    color: var(--office-foreground, #17211c);
    padding: 0 14px;
    font-weight: 600;
}

.office-crm-secondary-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.office-crm-danger-button {
    min-height: 40px;
    border: 1px solid rgba(220, 38, 38, 0.38);
    border-radius: 6px;
    background: rgba(220, 38, 38, 0.12);
    color: var(--office-feedback-error-text, #9f1239);
    padding: 0 14px;
    font-weight: 600;
}

.office-crm-focus-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
}

.office-crm-focus-button:hover,
.office-crm-focus-button[aria-pressed="true"] {
    border-color: rgba(0, 42, 186, 0.42);
    background: rgba(0, 42, 186, 0.12);
    color: var(--office-primary, #002aba);
}

.office-crm-focus-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.office-crm-danger-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.office-crm-feedback {
    border-radius: 8px;
    padding: 12px 14px;
}

.office-crm-feedback.error {
    background: rgba(220, 38, 38, 0.14);
    color: var(--office-feedback-error-text, #9f1239);
    border: 1px solid rgba(220, 38, 38, 0.35);
}

.office-crm-feedback.info {
    background: rgba(21, 128, 61, 0.14);
    color: #15803d;
    border: 1px solid rgba(21, 128, 61, 0.35);
}

.office-crm-feedback.compact {
    margin: 0 16px 16px;
}

.office-crm-transfer-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(21, 128, 61, 0.3);
    border-left: 4px solid #15803d;
    border-radius: 8px;
    background: color-mix(in srgb, #15803d 9%, var(--office-surface, #ffffff));
    padding: 14px 16px;
}

.office-crm-transfer-alert-copy {
    min-width: 0;
}

.office-crm-transfer-alert-copy span {
    color: #15803d;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.office-crm-transfer-alert-copy strong {
    display: block;
    margin-top: 4px;
    color: var(--office-foreground, #17211c);
}

.office-crm-transfer-alert-copy p {
    margin: 4px 0 0;
    color: var(--office-muted, #647069);
}

.office-crm-transfer-alert-tags,
.office-crm-transfer-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.office-crm-transfer-alert-tags {
    margin-top: 10px;
}

.office-crm-transfer-alert-tags span {
    border: 1px solid rgba(21, 128, 61, 0.24);
    border-radius: 999px;
    background: color-mix(in srgb, #15803d 12%, var(--office-surface, #ffffff));
    color: #166534;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: none;
}

.office-crm-shell {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    height: min(720px, calc(100vh - 250px));
    min-height: 520px;
    overflow: hidden;
}

.office-crm-page-focus .office-crm-shell {
    height: auto;
    min-height: 0;
}

.office-crm-list {
    border: 0;
    border-right: 1px solid var(--office-border, #dfe7e2);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.office-crm-list-header,
.office-crm-thread-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--office-border, #dfe7e2);
}

.office-crm-conversation-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--office-muted, #647069) 34%, transparent) transparent;
    scrollbar-width: thin;
}

.office-crm-conversation-list::-webkit-scrollbar {
    width: 6px;
}

.office-crm-conversation-list::-webkit-scrollbar-track {
    background: transparent;
}

.office-crm-conversation-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--office-muted, #647069) 30%, transparent);
    border-radius: 999px;
}

.office-crm-conversation-list::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--office-primary, #002aba) 62%, var(--office-muted, #647069));
}

.office-crm-conversation {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--office-border, #dfe7e2);
    background: transparent;
    color: var(--office-foreground, #17211c);
    padding: 14px 16px;
    text-align: left;
}

.office-crm-conversation.assigned {
    padding-bottom: 42px;
}

.office-crm-conversation.selected {
    background: var(--office-hover, #eef3ef);
}

.office-crm-conversation.transfer-in {
    border-left: 4px solid #15803d;
    background: color-mix(in srgb, #15803d 8%, transparent);
    padding-left: 12px;
}

.office-crm-conversation.transfer-in.selected {
    background: color-mix(in srgb, #15803d 12%, var(--office-hover, #eef3ef));
}

.office-crm-conversation.transfer-pending {
    border-left: 4px solid #b45309;
    background: color-mix(in srgb, #b45309 8%, transparent);
    padding-left: 12px;
}

.office-crm-conversation.human-support {
    border-left: 4px solid #002aba;
    background: color-mix(in srgb, #002aba 10%, transparent);
    padding-left: 12px;
}

.office-crm-conversation.human-support.selected {
    background: color-mix(in srgb, #002aba 14%, var(--office-hover, #eef3ef));
}

.office-crm-conversation-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.office-crm-conversation-title strong {
    color: var(--office-foreground, #17211c);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-crm-conversation-title em {
    background: var(--office-primary, #002aba);
    border-radius: 999px;
    color: #fff;
    font-style: normal;
    min-width: 22px;
    padding: 2px 7px;
    text-align: center;
}

.office-crm-contact-badge {
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    text-transform: uppercase;
}

.office-crm-contact-badge.client {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.office-theme-dark .office-crm-contact-badge.client {
    background: rgba(22, 163, 74, 0.22);
    border-color: rgba(74, 222, 128, 0.46);
    color: #bbf7d0;
}

.office-crm-contact-badge.inactive-client {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.36);
    color: #cbd5e1;
}

.office-crm-contact-badge.lead {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(37, 99, 235, 0.42);
    color: #93c5fd;
}

.office-crm-contact-badge.collaborator {
    background: rgba(234, 179, 8, 0.16);
    border-color: rgba(234, 179, 8, 0.42);
    color: #fde68a;
}

.office-crm-contact-badge.contact,
.office-crm-contact-badge.unknown {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.32);
    color: var(--office-muted, #647069);
}

.office-crm-conversation span,
.office-crm-conversation small,
.office-crm-conversation p,
.office-crm-pagination {
    color: var(--office-muted, #647069);
}

.office-crm-conversation p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-crm-conversation-status {
    display: block;
    font-weight: 600;
}

.office-crm-conversation-status.human-support {
    color: #c2410c;
}

.office-crm-attendant-badge {
    align-items: center;
    border: 1px solid rgba(20, 184, 166, 0.34);
    border-radius: 999px;
    bottom: 12px;
    color: #0f766e;
    display: inline-flex;
    font-size: 0.625rem;
    font-weight: 700;
    gap: 4px;
    line-height: 1;
    max-width: calc(100% - 32px);
    overflow: hidden;
    padding: 3px 6px;
    position: absolute;
    right: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-crm-attendant-badge span {
    animation: office-crm-attendant-pulse 2.8s ease-in-out infinite;
    background: #14b8a6;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.34);
    color: #14b8a6;
    flex: 0 0 auto;
    height: 5px;
    width: 5px;
}

.office-crm-attendant-badge.other {
    background: rgba(20, 184, 166, 0.08);
}

.office-crm-attendant-badge.mine {
    background: rgb(117 255 0 / 64%);
    border-color: rgb(0 0 0 / 60%);
    color: #282424;
}

.office-crm-attendant-badge.mine span {
    background: #000000;
    box-shadow: 0 0 0 0 rgba(0, 42, 186, 0.34);
    color: #000000;
}

.office-theme-dark .office-crm-attendant-badge {
    color: #99f6e4;
}

.office-theme-dark .office-crm-attendant-badge.mine {
    color: #000000;
}

@keyframes office-crm-attendant-pulse {
    0% {
        box-shadow: 0 0 0 0 currentColor;
        opacity: 0.9;
    }

    70% {
        box-shadow: 0 0 0 6px transparent;
        opacity: 0.55;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
        opacity: 0.9;
    }
}

.office-crm-pagination {
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 12px;
}

.office-crm-thread {
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.office-crm-messages {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--office-muted, #647069) 42%, transparent) var(--office-surface, #ffffff);
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.office-crm-messages::-webkit-scrollbar {
    width: 10px;
}

.office-crm-messages::-webkit-scrollbar-track {
    background: var(--office-surface, #ffffff);
    border-left: 1px solid var(--office-border, #dfe7e2);
}

.office-crm-messages::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--office-muted, #647069) 38%, transparent);
    border: 2px solid var(--office-surface, #ffffff);
    border-radius: 999px;
}

.office-crm-messages::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--office-primary, #002aba) 70%, var(--office-muted, #647069));
}

.office-crm-message {
    display: flex;
}

.office-crm-message.inbound {
    justify-content: flex-start;
}

.office-crm-message.outbound {
    justify-content: flex-end;
}

.office-crm-message div {
    max-width: min(620px, 82%);
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 8px;
    background: var(--office-surface-muted, #f8faf8);
    color: var(--office-foreground, #17211c);
    padding: 10px 12px;
}

.office-crm-message.outbound div {
    background: rgba(0, 42, 186, 0.16);
    border-color: rgba(0, 42, 186, 0.36);
}

.office-crm-message.search-match > div {
    border-color: rgba(234, 179, 8, 0.86);
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
}

.office-crm-message.search-match > div::before {
    display: block;
    margin: 0 0 6px;
    color: #a16207;
    content: "Resultado da pesquisa";
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.office-crm-message p {
    margin: 0 0 6px;
    white-space: pre-wrap;
}

.office-crm-message-body a {
    color: var(--office-primary, #002aba);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.office-crm-message.outbound .office-crm-message-body a {
    color: color-mix(in srgb, var(--office-primary, #002aba) 82%, var(--office-foreground, #17211c));
}

.office-crm-quoted-reply {
    display: grid;
    gap: 3px;
    margin: 0 0 8px;
    padding: 7px 9px;
    border-left: 3px solid var(--office-primary, #002aba);
    border-radius: 4px;
    background: color-mix(in srgb, var(--office-surface, #ffffff) 68%, transparent);
}

.office-crm-message.outbound .office-crm-quoted-reply {
    background: color-mix(in srgb, var(--office-surface, #ffffff) 58%, transparent);
}

.office-crm-quoted-reply strong {
    color: var(--office-primary, #002aba);
    font-size: 0.78rem;
    font-weight: 600;
}

.office-crm-quoted-reply span {
    display: -webkit-box;
    color: var(--office-muted, #647069);
    font-size: 0.84rem;
    line-height: 1.28;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.office-crm-message small {
    color: var(--office-muted, #647069);
}

.office-crm-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.office-crm-message-meta strong {
    color: var(--office-primary, #002aba);
    font-size: 0.82rem;
}

.office-crm-message-reply,
.office-crm-message-delete {
    border: 0;
    background: transparent;
    color: var(--office-primary, #002aba);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0;
}

.office-crm-message-delete {
    color: var(--office-feedback-error-text, #9f1239);
}

.office-crm-message-reply:disabled,
.office-crm-message-delete:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.office-crm-message-meta span {
    color: var(--office-muted, #647069);
    flex: 0 0 auto;
}

.office-crm-message-meta-right {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.office-crm-delivery-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 12px;
    color: var(--office-muted, #647069);
}

.office-crm-delivery-status svg {
    width: 18px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.office-crm-delivery-label {
    width: auto;
    height: auto;
    white-space: nowrap;
}

.office-crm-delivery-status.delivered {
    color: #16a34a;
}

.office-crm-delivery-status.failed {
    color: #dc2626;
}

.office-crm-attachment {
    display: grid;
    gap: 5px;
    margin: 4px 0 8px;
    padding: 10px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 6px;
    background: color-mix(in srgb, var(--office-surface-muted, #f8faf8) 70%, var(--office-surface, #ffffff));
}

.office-crm-attachment strong,
.office-crm-attachment span,
.office-crm-attachment small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-crm-attachment strong {
    color: var(--office-foreground, #17211c);
    font-size: 0.94rem;
}

.office-crm-attachment .office-crm-secondary-button {
    justify-self: start;
    min-height: 34px;
}

.office-crm-audio-player {
    width: min(340px, 100%);
    height: 38px;
    margin-top: 2px;
}

.office-crm-audio-button {
    color: var(--office-primary, #002aba);
}

.office-crm-composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--office-border, #dfe7e2);
    background:
        radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--office-border, #dfe7e2) 35%, transparent) 1px, transparent 2px) 0 0 / 36px 36px,
        color-mix(in srgb, var(--office-surface, #ffffff) 84%, #020617);
}

.office-crm-composer-capability-hint {
    color: var(--office-muted, #647069);
    font-size: 0.82rem;
    line-height: 1.45;
}

.office-crm-composer-row {
    display: grid;
    grid-template-columns: 36px 36px minmax(0, 1fr) 36px;
    align-items: end;
    gap: 0;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--office-border, #dfe7e2) 40%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--office-surface-muted, #f8faf8) 86%, #111827);
    padding: 4px 6px;
}

.office-crm-attachment-menu {
    display: none;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--office-border, #dfe7e2) 54%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--office-surface-muted, #f8faf8) 90%, #111827);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.28);
    padding: 6px;
    scrollbar-color: color-mix(in srgb, var(--office-muted, #647069) 34%, transparent) transparent;
    scrollbar-width: thin;
}

.office-crm-attachment-menu.open {
    display: flex;
}

.office-crm-emoji-menu {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    width: max-content;
    max-width: min(360px, 100%);
    overflow: visible;
    padding: 8px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 8px;
    background: var(--office-surface-muted, #f8faf8);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.office-crm-emoji-menu.open {
    display: flex;
}

.office-crm-emoji-menu button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
}

.office-crm-emoji-menu button:hover {
    background: color-mix(in srgb, var(--office-border, #dfe7e2) 34%, transparent);
}

.office-crm-emoji-menu button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.office-crm-attachment-menu::-webkit-scrollbar {
    height: 6px;
}

.office-crm-attachment-menu::-webkit-scrollbar-track {
    background: transparent;
}

.office-crm-attachment-menu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--office-muted, #647069) 30%, transparent);
    border-radius: 999px;
}

.office-crm-attachment-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 158px;
    min-height: 42px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--office-foreground, #17211c);
    cursor: pointer;
    padding: 8px 10px;
    overflow: hidden;
}

.office-crm-attachment-option input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 0;
    opacity: 0;
}

.office-crm-attachment-option input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
}

.office-crm-attachment-option:hover {
    background: color-mix(in srgb, var(--office-border, #dfe7e2) 22%, transparent);
}

.office-crm-attachment-option > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    color: var(--attachment-accent, var(--office-primary, #002aba));
}

.office-crm-attachment-option svg {
    width: 20px;
    height: 20px;
    color: inherit;
}

.office-crm-attachment-option strong {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-crm-attachment-option.document {
    --attachment-accent: #7c3aed;
}

.office-crm-attachment-option.certificate {
    --attachment-accent: #10b981;
}

.office-crm-attachment-option.image {
    --attachment-accent: #2563eb;
}

.office-crm-attachment-option.audio {
    --attachment-accent: #db2777;
}

.office-crm-composer textarea {
    align-self: end;
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    max-height: 180px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--office-foreground, #17211c);
    line-height: 20px;
    padding: 8px 8px;
    overflow-y: hidden;
    resize: none;
    scrollbar-color: color-mix(in srgb, var(--office-muted, #647069) 42%, transparent) transparent;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.office-crm-composer textarea:focus {
    outline: 0;
}

.office-crm-composer textarea::-webkit-scrollbar {
    width: 8px;
}

.office-crm-composer textarea::-webkit-scrollbar-track {
    background: transparent;
}

.office-crm-composer textarea::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--office-muted, #647069) 34%, transparent);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.office-crm-composer textarea::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--office-primary, #002aba) 62%, var(--office-muted, #647069));
    border: 2px solid transparent;
    background-clip: padding-box;
}

.office-crm-composer textarea:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.office-crm-attach-button,
.office-crm-emoji-button,
.office-crm-send-button,
.office-crm-attachment-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.office-crm-attach-button {
    position: relative;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--office-muted, #647069);
    cursor: pointer;
    overflow: hidden;
}

.office-crm-attach-button.active {
    color: var(--office-primary, #002aba);
}

.office-crm-attach-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.office-crm-emoji-button {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--office-muted, #647069);
    padding: 0;
}

.office-crm-attach-button:hover {
    color: var(--office-primary, #002aba);
}

.office-crm-emoji-button:hover,
.office-crm-emoji-button.active {
    color: var(--office-primary, #002aba);
}

.office-crm-attach-button svg,
.office-crm-emoji-button svg,
.office-crm-send-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.office-crm-file-input {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
}

.office-crm-file-input:disabled {
    cursor: not-allowed;
}

.office-crm-selected-attachment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: min(520px, 100%);
    border: 1px solid color-mix(in srgb, var(--office-primary, #002aba) 35%, var(--office-border, #dfe7e2));
    border-radius: 12px;
    background: color-mix(in srgb, var(--office-primary, #002aba) 10%, var(--office-surface-muted, #f8faf8));
    color: var(--office-foreground, #17211c);
    padding: 8px 10px 8px 12px;
}

.office-crm-selected-quote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: min(520px, 100%);
    border-left: 3px solid var(--office-primary, #002aba);
    border-radius: 8px;
    background: color-mix(in srgb, var(--office-primary, #002aba) 10%, var(--office-surface-muted, #f8faf8));
    color: var(--office-foreground, #17211c);
    padding: 8px 10px;
}

.office-crm-selected-quote > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.office-crm-selected-quote strong,
.office-crm-selected-quote small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-crm-selected-quote strong {
    color: var(--office-primary, #002aba);
    font-size: 0.82rem;
}

.office-crm-selected-quote small {
    color: var(--office-muted, #647069);
}

.office-crm-selected-attachment-list {
    display: grid;
    gap: 10px;
    width: min(520px, 100%);
}

.office-crm-selected-attachment span {
    display: grid;
    min-width: 0;
}

.office-crm-selected-attachment strong,
.office-crm-selected-attachment small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.office-crm-selected-attachment strong {
    font-size: 0.9rem;
}

.office-crm-selected-attachment small {
    color: var(--office-muted, #647069);
}

.office-crm-selected-attachment-items {
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}

.office-crm-selected-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--office-border, #dfe7e2) 72%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--office-surface, #ffffff) 92%, var(--office-surface-muted, #f8faf8));
    padding: 8px 10px;
}

.office-crm-selected-attachment-item > span {
    flex: 1;
}

.office-crm-recorded-audio {
    align-items: center;
    flex-wrap: wrap;
}

.office-crm-recorded-audio .office-crm-audio-player {
    flex: 1 1 220px;
    min-width: 180px;
}

.office-crm-recording-audio {
    border-color: rgba(219, 39, 119, 0.42);
    background: color-mix(in srgb, #db2777 12%, var(--office-surface-muted, #f8faf8));
}

.office-crm-recording-audio strong {
    color: #db2777;
}

.office-crm-attachment-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    background: color-mix(in srgb, var(--office-muted, #647069) 18%, transparent);
    color: var(--office-foreground, #17211c);
    font-weight: 700;
}

.office-crm-attachment-remove:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.office-crm-send-button {
    position: relative;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--office-muted, #647069);
    padding: 0;
}

.office-crm-send-button:not(:disabled) {
    color: var(--office-primary, #002aba);
}

.office-crm-send-button span {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.office-crm-send-button:disabled {
    cursor: not-allowed;
    opacity: 0.92;
}

.office-crm-contact-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 23, 42, 0.55);
}

.office-crm-contact-modal-card {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 50;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    transform: translate(-50%, -50%);
    background: var(--office-surface, #ffffff);
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 8px;
}

.office-crm-contact-modal-header,
.office-crm-contact-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--office-border, #dfe7e2);
}

.office-crm-contact-modal-header h2 {
    margin: 4px 0;
}

.office-crm-contact-modal-header p {
    color: var(--office-muted, #647069);
    margin: 0;
}

.office-crm-contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
}

.office-crm-contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.office-crm-contact-field-wide {
    grid-column: 1 / -1;
}

.office-crm-contact-form-field span {
    color: var(--office-primary, #002aba);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.office-crm-contact-input,
.office-crm-contact-form-field .office-crm-contact-input {
    min-height: 42px;
    border: 1px solid var(--office-border, #dfe7e2);
    border-radius: 6px;
    background: var(--office-surface-muted, #f8faf8);
    color: var(--office-foreground, #17211c);
    padding: 0 12px;
}

.office-crm-contact-textarea,
.office-crm-contact-form-field textarea.office-crm-contact-input {
    min-height: 96px;
    padding: 10px 12px;
    resize: vertical;
}

.office-crm-contact-form-field .validation-message {
    color: var(--office-feedback-error-text, #9f1239);
    font-size: 0.82rem;
}

.office-crm-contact-modal-actions {
    justify-content: flex-end;
    border-bottom: 0;
    border-top: 1px solid var(--office-border, #dfe7e2);
}

@media (max-width: 900px) {
    .office-crm-list,
    .office-crm-thread {
        min-width: 0;
    }

    .office-crm-read-filter,
    .office-crm-list-header {
        flex-wrap: wrap;
    }

    .office-crm-transfer-alert {
        flex-direction: column;
        align-items: stretch;
    }

    .office-crm-toolbar,
    .office-crm-shell,
    .office-crm-chat-search,
    .office-crm-contact-form-grid {
        grid-template-columns: 1fr;
    }

    .office-crm-list {
        border-right: 0;
        border-bottom: 1px solid var(--office-border, #dfe7e2);
    }

    .office-crm-shell {
        height: calc(100vh - 220px);
        min-height: 520px;
    }

    .office-crm-composer {
        grid-template-columns: 1fr;
    }
}

.office-crm-shell.office-crm-shell-single { grid-template-columns: minmax(0, 1fr); }
.office-crm-image-preview { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 6px; }
.office-crm-message-author { display: block; margin-bottom: 4px; }

.office-internal-chat { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.portal-crm-page .office-crm-thread-header { flex-wrap: wrap; align-items: flex-start; }
.portal-crm-page .office-crm-thread-actions { flex-wrap: wrap; }
.portal-crm-page .office-crm-composer { flex: 0 0 auto; }
.office-internal-chat .office-crm-thread-header { flex-direction: column; align-items: stretch; }
.office-internal-chat .office-crm-thread-actions { justify-content: flex-start; }
.office-internal-chat .office-crm-composer { flex: 0 0 auto; }
.office-crm-page-focus .office-internal-chat { flex: 1; min-height: 0; gap: 10px; overflow-y: auto; }
.office-crm-page-focus .office-internal-chat .office-crm-shell { flex: 1 0 520px; }
.office-internal-panel, .office-internal-feedback { padding: 12px; border: 1px solid var(--office-border, #dfe7e2); border-radius: 6px; }
.office-internal-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.office-internal-panel label { display: grid; gap: 6px; min-width: 0; max-width: 100%; }
.office-internal-panel textarea { width: 100%; }
.office-internal-panel input, .office-internal-panel select { max-width: 100%; }
.office-internal-feedback { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
    .portal-crm-page .office-crm-shell { height: auto; min-height: 600px; overflow: visible; }
    .portal-crm-page .office-crm-messages { flex: 1 0 200px; max-height: 60dvh; }
    .portal-crm-page .office-crm-thread-actions { justify-content: flex-start; }
    .office-internal-chat .office-crm-shell { height: auto; min-height: 0; overflow: visible; }
    .office-internal-chat .office-crm-list { height: 300px; }
    .office-internal-chat .office-crm-thread { min-height: 600px; }
    .office-internal-chat .office-crm-messages { flex: 1 0 200px; max-height: 60dvh; }
    .office-internal-chat .office-crm-thread-actions { flex-wrap: wrap; }
}

/* Shared messenger presentation; the portal keeps its company/team navigation. */
.chat-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: color-mix(in srgb, var(--office-primary, #002aba) 9%, var(--office-surface, #fff)); color: var(--office-primary, #002aba); flex: 0 0 auto; }
.chat-avatar .chat-avatar-initials { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: inherit; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.chat-avatar .chat-avatar-presence { position: absolute; right: -1px; bottom: 0; width: 11px; height: 11px; border: 2px solid var(--office-surface, #fff); border-radius: 50%; background: #20bb8c; }
.portal-messenger { height: calc(100dvh - 40px); min-height: 0; gap: 16px; }
.portal-messenger-title { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; min-height: 44px; padding: 0 4px; }
.portal-messenger-title h1 { margin: 0; font-size: 23px; line-height: 1.3; letter-spacing: -.035em; color: var(--office-foreground, #17211c); }
.portal-messenger-title p { margin: 3px 0 0; font-size: 12px; color: var(--office-muted, #647069); }
.portal-team-toggle { display: none; align-items: center; gap: 7px; background: var(--office-surface, #fff); color: var(--office-primary, #002aba); border: 1px solid var(--office-border, #dfe7e2); border-radius: 10px; padding: 9px 12px; font-size: 12px; cursor: pointer; }
.portal-team-toggle span { font-size: 10px; background: var(--office-hover, #eef3ef); padding: 2px 5px; border-radius: 6px; }
.portal-messenger .office-crm-shell { position: relative; flex: 1; height: auto; min-height: 0; grid-template-columns: 248px minmax(0, 1fr); border-radius: 18px; border-color: color-mix(in srgb, var(--office-border, #dfe7e2) 75%, transparent); box-shadow: 0 8px 32px color-mix(in srgb, var(--office-shadow, #10181414) 35%, transparent); overflow: hidden; }
.portal-messenger .chat-contact-sidebar { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow-y: auto; border-right: 1px solid var(--office-border, #dfe7e2); background: var(--office-surface, #fff); padding: 20px 12px 16px; }
.portal-accounting-conversation { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid color-mix(in srgb, var(--office-primary, #002aba) 8%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--office-primary, #002aba) 5%, var(--office-surface, #fff)); color: var(--office-foreground, #17211c); padding: 13px 10px; width: 100%; min-width: 0; cursor: pointer; }
.portal-accounting-conversation > span:last-child, .portal-attendant > span:last-child { display: grid; gap: 5px; min-width: 0; }
.portal-accounting-conversation strong { font-size: 12px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.portal-accounting-conversation small { font-size: 10px; line-height: 1.5; color: var(--office-muted, #647069); }
.portal-accounting-conversation .chat-avatar img, .chat-messenger .office-crm-thread-header > .chat-avatar img { object-fit: contain; padding: 5px; }
.portal-online-team { padding: 18px 4px 8px; }
.portal-online-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px 10px; }
.portal-online-heading h3 { font-size: 11px; font-weight: 600; margin: 0; color: var(--office-muted, #647069); }
.portal-online-heading > span { padding: 3px 6px; background: color-mix(in srgb, #20bb8c 9%, var(--office-surface, #fff)); color: color-mix(in srgb, #14976f 80%, var(--office-foreground, #17211c)); font-size: 10px; border-radius: 6px; }
.portal-attendant { display: flex; gap: 10px; align-items: center; padding: 12px 4px; }
.portal-attendant strong { font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.portal-attendant small { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--office-muted, #647069); }
.portal-online-dot { width: 5px; height: 5px; background: #20bb8c; border-radius: 50%; display: inline-block; }
.portal-presence-empty { color: var(--office-muted, #647069); font-size: 11px; line-height: 1.75; padding: 6px 4px; margin: 0; }
.portal-conversations-note { margin-top: auto; display: flex; gap: 9px; padding: 16px 8px 0; border-top: 1px solid var(--office-border, #dfe7e2); color: var(--office-muted, #647069); }
.portal-conversations-note svg { flex: 0 0 auto; margin-top: 2px; opacity: .65; }
.portal-conversations-note p { margin: 0; font-size: 10px; line-height: 1.8; }
.chat-messenger .office-crm-thread { min-height: 0; overflow: hidden; background: var(--office-surface, #fff); }
.chat-messenger .office-crm-thread-header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; flex: 0 0 auto; padding: 16px 22px; border-bottom: 1px solid var(--office-border, #dfe7e2); }
.chat-messenger .office-crm-thread-header > div { min-width: 0; }
.chat-messenger .office-crm-thread-header h2 { font-size: 15px; line-height: 1.5; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
.chat-messenger .office-crm-thread-header p { margin: 3px 0 0; font-size: 11px; line-height: 1.5; color: var(--office-muted, #647069); }
.chat-messenger .office-crm-protocol-summary { gap: 6px; margin: 5px 0 0; align-items: center; flex-wrap: wrap; }
.chat-messenger .office-crm-protocol-summary span { font-size: 9px; padding: 3px 7px; border-radius: 6px; font-weight: 550; text-transform: none; }
.chat-messenger .office-crm-protocol-summary small { font-size: 9px; }
.chat-messenger .office-crm-protocol-summary.empty { display: none; }
.chat-messenger .office-crm-thread-actions { align-items: center; flex-wrap: nowrap; gap: 7px; }
.chat-messenger .office-crm-thread-actions .office-crm-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border: 0; padding: 9px 10px; border-radius: 9px; background: var(--office-surface-muted, #f8faf8); color: var(--office-muted, #647069); font-size: 11px; }
.chat-messenger .office-crm-thread-actions button span { font-size: 11px; font-weight: 500; text-transform: none; color: inherit; }
.chat-messenger .office-crm-thread-actions button:hover { color: var(--office-primary, #002aba); background: var(--office-hover, #eef3ef); }
.chat-messenger .office-crm-messages { flex: 1 1 0; min-height: 0; max-height: none; padding: 12px 20px 20px; gap: 5px; overflow-y: auto; overscroll-behavior: contain; }
.chat-messenger .office-crm-thread-empty { flex: 1 1 0; display: grid; place-content: center; text-align: center; padding: 30px; font-size: 14px; line-height: 1.8; }
.chat-day-divider { display: flex; justify-content: center; padding: 8px 0 16px; flex: 0 0 auto; }
.chat-day-divider span { padding: 5px 12px; border: 1px solid var(--office-border, #dfe7e2); background: var(--office-surface, #fff); border-radius: 20px; color: var(--office-muted, #647069); font-size: 10px; line-height: 1.5; }
.chat-messenger .office-crm-message { justify-content: flex-start; align-items: flex-start; gap: 10px; flex: 0 0 auto; padding: 4px 0; }
.chat-messenger .chat-message-avatar { width: 32px; height: 32px; min-width: 32px; margin-top: 8px; }
.chat-messenger .chat-message-avatar .chat-avatar-initials { font-size: 10px; }
.chat-messenger .office-crm-message > .office-crm-message-content { flex: 1; max-width: min(800px, calc(100% - 42px)); border: 0; border-radius: 12px; padding: 10px 12px; background: transparent; overflow-wrap: anywhere; }
.chat-messenger .office-crm-message.outbound > .office-crm-message-content { background: color-mix(in srgb, var(--office-primary, #002aba) 4%, var(--office-surface, #fff)); }
.chat-message-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.chat-message-heading .office-crm-message-author { margin: 0; font-size: 12px; font-weight: 650; color: var(--office-foreground, #17211c); }
.chat-message-heading time { color: var(--office-muted, #647069); font-size: 10px; font-weight: 400; }
.chat-messenger .office-crm-message p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--office-foreground, #17211c); }
.chat-messenger .office-crm-message-meta { gap: 8px; margin-top: 6px; font-size: 10px; justify-content: flex-start; }
.chat-messenger .office-crm-message-reply { font-size: 10px; font-weight: 500; }
.chat-messenger .office-crm-message-meta strong { font-size: 10px; font-weight: 400; }
.chat-messenger .office-crm-composer { flex: 0 0 auto; border: 0; background: transparent; padding: 12px 20px 18px; gap: 8px; }
.chat-messenger .office-crm-composer-row { min-height: 56px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--office-primary, #002aba) 25%, var(--office-border, #dfe7e2)); border-radius: 14px; background: var(--office-surface, #fff); align-items: center; box-shadow: 0 2px 8px color-mix(in srgb, var(--office-shadow, #10181414) 35%, transparent); }
.chat-messenger .office-crm-composer-row:focus-within { border-color: color-mix(in srgb, var(--office-primary, #002aba) 60%, var(--office-border, #dfe7e2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--office-primary, #002aba) 7%, transparent); }
.chat-messenger .office-crm-composer textarea { min-height: 40px; max-height: 160px; padding: 10px; line-height: 20px; font-size: 13px; background: transparent; color: var(--office-foreground, #17211c); }
.chat-messenger .office-crm-composer textarea::placeholder { color: var(--office-muted, #647069); opacity: .8; }
.chat-messenger .office-crm-send-button { border-radius: 10px; background: var(--office-primary, #002aba); color: #fff; box-shadow: 0 3px 7px color-mix(in srgb, var(--office-primary, #002aba) 18%, transparent); }
.chat-messenger .office-crm-send-button:not(:disabled) { color: #fff; }
.chat-messenger .office-crm-send-button:disabled { background: var(--office-hover, #eef3ef); color: var(--office-muted, #647069); box-shadow: none; }
.chat-messenger .office-crm-attach-button, .chat-messenger .office-crm-emoji-button { color: var(--office-muted, #647069); }
.chat-messenger .office-crm-composer-capability-hint { font-size: 10px; }
.portal-messenger .portal-older-messages { flex: 0 0 auto; align-self: center; min-height: 28px; margin: 8px 0 0; font-size: 10px; padding: 5px 12px; border-radius: 20px; }
.chat-messenger .office-internal-panel { flex: 0 0 auto; max-height: 160px; overflow-y: auto; margin: 10px 16px 0; font-size: 11px; border-radius: 10px; }
.chat-messenger .office-internal-feedback { flex: 0 0 auto; max-height: 110px; overflow-y: auto; font-size: 11px; }
@media (max-width: 1100px) {
    .portal-messenger .office-crm-shell { grid-template-columns: 208px minmax(0, 1fr); }
    .chat-messenger .office-crm-thread-header { padding: 14px; gap: 9px; }
    .chat-messenger .office-crm-thread-actions button span { display: none; }
    .chat-messenger .office-crm-protocol-summary small { display: none; }
}
@media (max-width: 900px) {
    .portal-messenger { height: calc(100dvh - 24px); min-height: 500px; gap: 12px; }
    .portal-messenger-title h1 { font-size: 21px; }
    .portal-team-toggle { display: inline-flex; }
    .portal-messenger .office-crm-shell { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 14px; }
    .portal-messenger .chat-contact-sidebar { display: none; }
    .portal-messenger-people-open .chat-contact-sidebar { display: flex; position: absolute; z-index: 20; inset: 0 auto 0 0; width: min(300px, calc(100% - 44px)); border-right: 1px solid var(--office-border, #dfe7e2); box-shadow: 12px 0 28px var(--office-shadow, #10181414); }
    .chat-messenger .office-crm-thread-header { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 12px; }
    .chat-messenger .office-crm-thread-header > .chat-avatar { width: 34px; height: 34px; min-width: 34px; }
    .chat-messenger .office-crm-thread-header h2 { font-size: 13px; }
    .chat-messenger .office-crm-thread-header p { font-size: 10px; }
    .chat-messenger .office-crm-thread-actions { gap: 3px; }
    .chat-messenger .office-crm-thread-actions .office-crm-secondary-button { padding: 8px; min-width: 30px; }
    .chat-messenger .office-crm-messages { flex: 1 1 0; max-height: none; padding: 8px 10px 12px; }
    .chat-messenger .office-crm-message { gap: 4px; }
    .chat-messenger .chat-message-avatar { width: 28px; height: 28px; min-width: 28px; }
    .chat-messenger .office-crm-message > .office-crm-message-content { max-width: calc(100% - 32px); padding: 9px; }
    .chat-messenger .office-crm-composer { padding: 10px 12px 14px; }
    .chat-messenger .office-crm-composer textarea { padding: 10px 6px; font-size: 16px; }
}

/* Office adaptation: multiple conversations and provider-specific operating controls. */
.office-messenger { height: calc(100dvh - 40px); min-height: 700px; gap: 12px; }
.office-messenger .office-crm-header { background: transparent; border: 0; padding: 0 4px; flex: 0 0 auto; }
.office-messenger .office-crm-header > div > span { font-size: 10px; letter-spacing: .12em; margin-bottom: 4px; }
.office-messenger .office-crm-header h1 { font-size: 23px; line-height: 1.3; letter-spacing: -.035em; }
.office-messenger .office-crm-header p { font-size: 12px; line-height: 1.6; margin-top: 4px; }
.office-messenger .office-crm-toolbar { display: flex; flex-wrap: wrap; align-items: center; border-radius: 14px; padding: 12px 14px; gap: 12px; flex: 0 0 auto; }
.office-messenger .office-crm-internal-filters { flex: 0 1 340px; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.office-messenger .office-crm-internal-filters label { flex: 1 1 130px; min-width: 0; }
.office-messenger .office-crm-toolbar label { min-width: 0; }
.office-messenger .office-crm-toolbar label > span { font-size: 10px; text-transform: none; }
.office-messenger .office-crm-toolbar input, .office-messenger .office-crm-toolbar select { border-radius: 9px; min-height: 38px; font-size: 12px; width: 100%; min-width: 0; }
.office-messenger .office-crm-channel-selector { border-radius: 12px; padding: 4px; gap: 4px; }
.office-messenger .office-crm-channel-selector button { border-radius: 9px; font-size: 11px; min-height: 36px; padding: 8px 12px; }
.office-messenger .office-crm-secondary-button { border-radius: 9px; font-size: 11px; min-height: 34px; }
.office-messenger .office-internal-chat { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 12px; }
.office-messenger .office-crm-shell { flex: 1 1 0; min-height: 0; height: auto; grid-template-columns: 290px minmax(0, 1fr); border-radius: 18px; overflow: hidden; border-color: color-mix(in srgb, var(--office-border, #dfe7e2) 75%, transparent); box-shadow: 0 8px 32px color-mix(in srgb, var(--office-shadow, #10181414) 35%, transparent); }
.office-messenger .office-crm-list { position: relative; border: 0; border-right: 1px solid var(--office-border, #dfe7e2); border-radius: 0; min-height: 0; overflow: hidden; }
.office-messenger .office-crm-list-header { padding: 14px 16px; min-height: 60px; }
.office-messenger .office-crm-list-header h2 { font-size: 12px; font-weight: 600; line-height: 1.5; }
.office-crm-list-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.office-crm-list-icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 11px; background: color-mix(in srgb, var(--office-primary, #002aba) 4%, var(--office-surface, #fff)); color: var(--office-text, #132139); cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.office-crm-list-new-button { background: #3988ff; color: #fff; }
.office-crm-list-icon-button:hover:not(:disabled) { box-shadow: inset 0 0 0 32px #0000000a; }
.office-crm-list-icon-button:focus-visible { outline: 2px solid var(--office-primary, #002aba); outline-offset: 3px; }
.office-crm-list-icon-button:disabled { opacity: .45; cursor: not-allowed; }
.office-crm-list-search { flex: 0 0 auto; align-items: center; min-width: 0; }
.office-crm-list-search input { box-sizing: border-box; flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; height: 30px; padding: 6px 10px; border: 1px solid var(--office-border, #dfe7e2); border-radius: 8px; background: var(--office-surface, #fff); color: var(--office-foreground, #17211c); font: inherit; font-size: 12px; }
.office-crm-list-search input:focus-visible { outline: 2px solid var(--office-primary, #002aba); outline-offset: 2px; }
.office-crm-contact-picker { position: absolute; z-index: 8; top: 62px; left: 10px; right: 10px; display: flex; flex-direction: column; max-height: calc(100% - 74px); padding: 8px; border: 1px solid var(--office-border, #dfe7e2); border-radius: 18px; background: var(--office-surface, #fff); box-shadow: 0 8px 28px #182d4924; }
.office-crm-contact-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 8px; }
.office-crm-contact-picker-header strong { color: var(--office-foreground, #17211c); font-size: 12px; font-weight: 600; }
.office-crm-contact-picker-search { padding: 0 4px 8px; }
.office-crm-contact-picker-results { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.office-crm-contact-picker-results ul { list-style: none; padding: 0; margin: 0; }
.office-crm-contact-picker-results p { padding: 12px 8px; margin: 0; font-size: 12px; color: var(--office-muted, #647069); }
.office-crm-contact-option { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 0; border-radius: 13px; background: transparent; color: var(--office-muted, #647069); text-align: left; cursor: pointer; }
.office-crm-contact-option:hover:not(:disabled), .office-crm-contact-option:focus-visible { background: color-mix(in srgb, #3988ff 12%, var(--office-surface, #fff)); color: var(--office-foreground, #17211c); outline: none; }
.office-crm-contact-option:focus-visible { box-shadow: inset 0 0 0 2px var(--office-primary, #002aba); }
.office-crm-contact-option:disabled { opacity: .5; cursor: not-allowed; }
.office-crm-contact-option .chat-avatar { width: 28px; height: 28px; min-width: 28px; font-size: 10px; }
.office-crm-contact-option-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.5; }
.office-crm-contact-option small { color: var(--office-muted, #647069); font-size: 9px; }
.office-crm-contact-picker-hint { padding: 8px 4px 2px; color: var(--office-muted, #647069); font-size: 10px; line-height: 1.5; }
.office-messenger .office-crm-read-filter { padding: 8px 10px; gap: 5px; flex-wrap: wrap; border-top: 0; }
.office-messenger .office-crm-read-filter button { min-width: 0; min-height: 29px; border-radius: 8px; font-size: 10px; padding: 4px 8px; }
.office-messenger .office-crm-read-filter button.human-support-filter { min-width: 0; }
.office-messenger .office-crm-conversation-list { gap: 7px; padding: 10px; min-height: 0; overflow-y: auto; }
.office-messenger .office-crm-conversation { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 9px; row-gap: 5px; padding: 12px 10px; border-radius: 12px; min-width: 0; }
.office-messenger .office-crm-conversation > :not(.chat-avatar) { grid-column: 2; min-width: 0; }
.office-messenger .office-crm-conversation > .chat-avatar { grid-column: 1; grid-row: 1 / span 8; align-self: start; width: 34px; height: 34px; min-width: 34px; padding: 0; }
.office-messenger .office-crm-conversation-title { gap: 5px; flex-wrap: wrap; }
.office-messenger .office-crm-conversation-title strong { font-size: 12px; line-height: 1.5; }
.office-messenger .office-crm-conversation > span:not(.chat-avatar):not(.office-crm-conversation-title):not(.office-crm-attendant-badge), .office-messenger .office-crm-conversation > small, .office-messenger .office-crm-conversation > p { font-size: 10px; line-height: 1.6; }
.office-messenger .office-crm-pagination { padding: 10px; align-items: center; gap: 6px; }
.office-messenger .office-crm-pagination > span { font-size: 11px; }
.office-messenger .office-crm-thread { border: 0; border-radius: 0; }
.office-messenger .office-crm-thread-header { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 18px 10px; row-gap: 10px; }
.office-messenger .office-crm-thread-header > div:not(.office-crm-thread-actions) > span { font-size: 9px; line-height: 1.5; }
.office-messenger .office-crm-thread-header .office-crm-assignment-status { font-size: 10px; }
.office-messenger .office-crm-protocol-summary.empty { display: flex; }
.office-messenger .office-crm-thread-actions { grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-start; gap: 6px; padding-top: 8px; border-top: 1px solid var(--office-border, #dfe7e2); }
.office-messenger .office-crm-thread-actions:empty { display: none; }
.office-messenger .office-crm-thread-actions .office-crm-secondary-button { padding: 7px 10px; min-height: 32px; }
.office-messenger .office-crm-transfer-select { min-width: 0; max-width: 100%; min-height: 32px; border-radius: 8px; font-size: 11px; }
.office-messenger .office-crm-meta-guidance-panel, .office-messenger .office-crm-meta-template-panel { flex: 0 0 auto; padding: 10px 14px; font-size: 11px; }
.office-messenger .office-crm-meta-template-panel { max-height: 230px; overflow-y: auto; }
.office-messenger .office-crm-chat-search-panel, .office-messenger .office-crm-protocol-close-panel { flex: 0 0 auto; max-height: 190px; overflow-y: auto; }
.office-messenger .office-crm-transfer-alert { flex: 0 0 auto; max-height: 160px; overflow-y: auto; border-radius: 12px; }
.office-messenger .office-crm-selected-attachments, .office-messenger .office-crm-recorded-audio { max-height: 180px; overflow-y: auto; border-radius: 12px; }
.office-messenger .office-crm-composer-capability-hint { line-height: 1.6; }
.office-messenger.office-crm-page-focus { height: calc(100dvh - 24px); min-height: 0; }
.office-messenger.office-crm-page-focus .office-crm-shell { flex: 1 1 0; min-height: 0; }
@media (max-width: 1200px) {
    .office-messenger .office-crm-shell { grid-template-columns: 250px minmax(0, 1fr); }
    .office-messenger .office-crm-toolbar { flex-wrap: wrap; }
}
@media (max-width: 760px) {
    .office-messenger .office-crm-internal-filters { flex: 1 1 100%; margin-left: 0; }
    .office-crm-contact-picker { position: fixed; z-index: 100; top: max(16px, 8dvh); left: 12px; right: 12px; max-height: 84dvh; }
    .office-messenger, .office-messenger.office-crm-page-focus { height: auto; min-height: 0; overflow: visible; gap: 10px; }
    .office-messenger .office-crm-header { padding: 0 2px; }
    .office-messenger .office-crm-header h1 { font-size: 21px; }
    .office-messenger .office-crm-header p { font-size: 11px; }
    .office-messenger .office-crm-toolbar { padding: 10px; gap: 8px; }
    .office-messenger .office-crm-channel-selector { width: 100%; flex-wrap: wrap; }
    .office-messenger .office-crm-channel-selector button { flex: 1 1 auto; padding: 7px 8px; }
    .office-messenger .office-crm-toolbar label { flex: 1 1 130px; }
    .office-messenger .office-internal-chat { flex: none; min-height: 0; }
    .office-messenger .office-crm-shell, .office-messenger.office-crm-page-focus .office-crm-shell { flex: none; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; overflow: hidden; border-radius: 14px; }
    .office-messenger .office-crm-list { height: 300px; max-height: 300px; border-right: 0; border-bottom: 1px solid var(--office-border, #dfe7e2); }
    .office-messenger .office-crm-thread { min-height: 650px; max-height: 900px; }
    .office-messenger .office-crm-thread-header { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
    .office-messenger .office-crm-thread-actions { gap: 5px; }
    .office-messenger .office-crm-thread-actions .office-crm-secondary-button { padding: 7px 8px; }
    .office-messenger .office-crm-messages { max-height: 430px; flex: 1 1 auto; }
}