/*
  CodideX Communication Core
  Day 6A UI extensions for WhatsApp, push, SMS, email, circulars, announcements,
  parents, events, and notification-center workflows.
*/

.cdx-communication-metrics,
.cdx-communication-grid,
.cdx-communication-card-grid,
.cdx-template-grid,
.cdx-audience-grid,
.cdx-parent-grid,
.cdx-event-grid,
.cdx-notification-center-grid {
  display: grid;
  gap: var(--cdx-space-4);
}

.cdx-communication-metrics > *,
.cdx-communication-grid > *,
.cdx-communication-card-grid > *,
.cdx-template-grid > *,
.cdx-audience-grid > *,
.cdx-parent-grid > *,
.cdx-event-grid > *,
.cdx-notification-center-grid > * {
  min-width: 0;
}

.cdx-communication-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--cdx-space-5);
}

.cdx-communication-grid,
.cdx-notification-center-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.cdx-communication-span-12 {
  grid-column: span 12;
}

.cdx-communication-span-8 {
  grid-column: span 8;
}

.cdx-communication-span-7 {
  grid-column: span 7;
}

.cdx-communication-span-6 {
  grid-column: span 6;
}

.cdx-communication-span-5 {
  grid-column: span 5;
}

.cdx-communication-span-4 {
  grid-column: span 4;
}

.cdx-communication-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cdx-template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cdx-audience-grid,
.cdx-parent-grid,
.cdx-event-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cdx-communication-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: var(--cdx-space-3);
  align-items: center;
}

.cdx-communication-filter-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdx-space-2);
  align-items: center;
  justify-content: flex-end;
}

.cdx-communication-widget,
.cdx-template-card,
.cdx-audience-card,
.cdx-parent-card,
.cdx-event-card,
.cdx-circular-card,
.cdx-announcement-card,
.cdx-notification-card,
.cdx-campaign-card {
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow-xs);
  transition: transform var(--cdx-transition-fast), box-shadow var(--cdx-transition-fast), border-color var(--cdx-transition-fast), background var(--cdx-transition-fast);
}

.cdx-communication-widget:hover,
.cdx-template-card:hover,
.cdx-audience-card:hover,
.cdx-parent-card:hover,
.cdx-event-card:hover,
.cdx-circular-card:hover,
.cdx-announcement-card:hover,
.cdx-notification-card:hover,
.cdx-campaign-card:hover {
  border-color: rgba(47, 128, 237, 0.28);
  box-shadow: var(--cdx-shadow-sm);
  transform: translateY(-2px);
}

.cdx-communication-widget strong,
.cdx-template-card strong,
.cdx-audience-card strong,
.cdx-parent-card strong,
.cdx-event-card strong,
.cdx-circular-card strong,
.cdx-announcement-card strong,
.cdx-notification-card strong,
.cdx-campaign-card strong {
  color: var(--cdx-heading);
}

.cdx-channel-icon,
.cdx-channel-avatar,
.cdx-doc-icon,
.cdx-event-date,
.cdx-notification-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--cdx-radius-md);
  background: rgba(47, 128, 237, 0.1);
  color: var(--cdx-primary-700);
}

.cdx-channel-icon.is-whatsapp {
  background: rgba(32, 169, 139, 0.12);
  color: var(--cdx-secondary-700);
}

.cdx-channel-icon.is-push {
  background: rgba(14, 165, 233, 0.12);
  color: var(--cdx-info);
}

.cdx-channel-icon.is-sms {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.cdx-channel-icon.is-email {
  background: rgba(124, 92, 255, 0.13);
  color: var(--cdx-accent);
}

.cdx-message-preview {
  display: grid;
  gap: var(--cdx-space-3);
  padding: var(--cdx-space-4);
  border: 1px solid rgba(32, 169, 139, 0.22);
  border-radius: var(--cdx-radius-lg);
  background:
    linear-gradient(135deg, rgba(32, 169, 139, 0.08), transparent 54%),
    var(--cdx-surface-soft);
}

.cdx-message-bubble {
  max-width: 92%;
  padding: var(--cdx-space-3) var(--cdx-space-4);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
  color: var(--cdx-text);
  box-shadow: var(--cdx-shadow-xs);
  line-height: 1.5;
}

.cdx-message-bubble.is-outgoing {
  justify-self: end;
  border-bottom-right-radius: var(--cdx-radius-xs);
  background: rgba(32, 169, 139, 0.14);
}

.cdx-message-bubble.is-incoming {
  justify-self: start;
  border-bottom-left-radius: var(--cdx-radius-xs);
}

.cdx-message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cdx-space-2);
  margin-top: var(--cdx-space-2);
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-xs);
  font-weight: 800;
}

.cdx-media-placeholder {
  min-height: 118px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--cdx-border-strong);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface-soft);
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-sm);
  font-weight: 850;
}

.cdx-device-preview {
  max-width: 330px;
  margin-inline: auto;
  padding: var(--cdx-space-3);
  border: 1px solid var(--cdx-border);
  border-radius: 1.6rem;
  background: linear-gradient(180deg, var(--cdx-surface-muted), var(--cdx-surface));
  box-shadow: var(--cdx-shadow-md);
}

.cdx-device-screen {
  min-height: 440px;
  overflow: hidden;
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(15, 39, 69, 0.1), transparent 36%),
    var(--cdx-surface-soft);
}

.cdx-device-status {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--cdx-space-4);
  color: var(--cdx-heading);
  font-size: var(--cdx-font-size-xs);
  font-weight: 900;
}

.cdx-lockscreen-card,
.cdx-push-card {
  padding: var(--cdx-space-3);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--cdx-radius-lg);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(14px);
  box-shadow: var(--cdx-shadow-sm);
}

.cdx-push-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--cdx-space-3);
}

.cdx-push-app-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--cdx-radius-md);
  background: linear-gradient(135deg, var(--cdx-primary-600), var(--cdx-secondary-500));
  color: var(--cdx-white);
}

.cdx-delivery-list,
.cdx-communication-timeline,
.cdx-notification-feed,
.cdx-circular-list,
.cdx-event-timeline {
  display: grid;
  gap: var(--cdx-space-3);
}

.cdx-delivery-row,
.cdx-timeline-row,
.cdx-feed-row,
.cdx-circular-row,
.cdx-event-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--cdx-space-3);
  align-items: center;
  padding: var(--cdx-space-3);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface-soft);
  transition: transform var(--cdx-transition-fast), border-color var(--cdx-transition-fast), background var(--cdx-transition-fast);
}

.cdx-delivery-row:hover,
.cdx-timeline-row:hover,
.cdx-feed-row:hover,
.cdx-circular-row:hover,
.cdx-event-step:hover {
  border-color: rgba(47, 128, 237, 0.25);
  background: var(--cdx-surface);
  transform: translateX(2px);
}

.cdx-template-card {
  display: grid;
  gap: var(--cdx-space-3);
}

.cdx-template-card-header,
.cdx-parent-card-header,
.cdx-event-card-header,
.cdx-announcement-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cdx-space-3);
}

.cdx-template-body {
  min-height: 90px;
  padding: var(--cdx-space-3);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface-soft);
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-sm);
  font-weight: 700;
}

.cdx-audience-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--cdx-space-3);
  align-items: center;
}

.cdx-composer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: var(--cdx-space-4);
  align-items: start;
}

.cdx-composer-panel {
  display: grid;
  gap: var(--cdx-space-4);
}

.cdx-channel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdx-space-2);
}

.cdx-channel-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--cdx-space-2);
  min-height: 2.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-pill);
  background: var(--cdx-surface);
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-sm);
  font-weight: 850;
}

.cdx-channel-tab.active,
.cdx-channel-tab:hover {
  border-color: rgba(47, 128, 237, 0.28);
  background: var(--cdx-primary-50);
  color: var(--cdx-primary-700);
}

.cdx-announcement-card.is-pinned {
  border-color: rgba(245, 158, 11, 0.36);
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.12), transparent 58%),
    var(--cdx-surface);
}

.cdx-announcement-card.is-urgent,
.cdx-notification-card.is-unread {
  border-left: 4px solid var(--cdx-danger);
}

.cdx-announcement-card.is-info {
  border-left: 4px solid var(--cdx-info);
}

.cdx-doc-preview {
  min-height: 180px;
  display: grid;
  align-content: start;
  gap: var(--cdx-space-3);
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-md);
  background:
    linear-gradient(180deg, rgba(47, 128, 237, 0.06), transparent),
    var(--cdx-surface-soft);
}

.cdx-doc-line {
  height: 0.55rem;
  border-radius: var(--cdx-radius-pill);
  background: var(--cdx-border-strong);
}

.cdx-doc-line.is-short {
  width: 58%;
}

.cdx-parent-card {
  display: grid;
  gap: var(--cdx-space-3);
}

.cdx-parent-channel-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdx-space-2);
}

.cdx-engagement-meter {
  display: grid;
  gap: var(--cdx-space-2);
}

.cdx-event-date {
  width: 58px;
  height: 64px;
  display: inline-grid;
  place-items: center;
  color: var(--cdx-primary-700);
  font-family: var(--cdx-font-display);
  font-weight: 900;
  text-align: center;
}

.cdx-event-date span {
  display: block;
  color: var(--cdx-text-muted);
  font-family: var(--cdx-font-sans);
  font-size: var(--cdx-font-size-xs);
  font-weight: 850;
}

.cdx-notification-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--cdx-space-3);
  align-items: start;
}

.cdx-notification-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdx-space-3);
  margin-bottom: var(--cdx-space-3);
  color: var(--cdx-heading);
  font-family: var(--cdx-font-display);
  font-weight: 900;
}

.cdx-notification-time {
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-xs);
  font-weight: 850;
  white-space: nowrap;
}

.cdx-communication-illustration {
  width: min(190px, 52vw);
  display: block;
  margin-inline: auto;
}

.cdx-mobile-preview-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cdx-space-4);
}

.cdx-mini-phone {
  padding: var(--cdx-space-3);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-xl);
  background: var(--cdx-surface-soft);
}

.cdx-mini-phone-screen {
  min-height: 190px;
  padding: var(--cdx-space-3);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
}

/* Day 6B: Doubts, counselling, absentee CRM, and advanced email workflows */
.cdx-insight-grid,
.cdx-doubt-group-grid,
.cdx-feed-grid,
.cdx-case-grid,
.cdx-template-library,
.cdx-attachment-grid,
.cdx-profile-grid {
  display: grid;
  gap: var(--cdx-space-4);
}

.cdx-insight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cdx-doubt-group-grid,
.cdx-feed-grid,
.cdx-case-grid,
.cdx-template-library {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cdx-attachment-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cdx-profile-grid {
  grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1fr);
  align-items: start;
}

.cdx-communication-stat {
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface-soft);
}

.cdx-communication-stat strong {
  display: block;
  color: var(--cdx-heading);
  font-family: var(--cdx-font-display);
  font-size: var(--cdx-font-size-2xl);
  line-height: 1;
}

.cdx-communication-stat span {
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-sm);
  font-weight: 800;
}

.cdx-discussion-card,
.cdx-case-card,
.cdx-email-template-card,
.cdx-feed-card {
  display: grid;
  gap: var(--cdx-space-3);
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow-xs);
  transition: transform var(--cdx-transition-fast), box-shadow var(--cdx-transition-fast), border-color var(--cdx-transition-fast);
}

.cdx-discussion-card:hover,
.cdx-case-card:hover,
.cdx-email-template-card:hover,
.cdx-feed-card:hover {
  border-color: rgba(47, 128, 237, 0.3);
  box-shadow: var(--cdx-shadow-sm);
  transform: translateY(-2px);
}

.cdx-card-meta-row,
.cdx-chip-row,
.cdx-chat-tools,
.cdx-editor-toolbar,
.cdx-recipient-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdx-space-2);
  align-items: center;
}

.cdx-thread-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr) minmax(220px, 0.28fr);
  gap: var(--cdx-space-4);
  align-items: start;
}

.cdx-thread-sidebar,
.cdx-thread-participants,
.cdx-chat-window,
.cdx-email-preview,
.cdx-editor-shell,
.cdx-counsellor-timeline {
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow-xs);
}

.cdx-thread-sidebar,
.cdx-thread-participants {
  padding: var(--cdx-space-4);
}

.cdx-thread-list,
.cdx-participant-list,
.cdx-case-timeline {
  display: grid;
  gap: var(--cdx-space-3);
}

.cdx-thread-item {
  display: grid;
  gap: 0.25rem;
  padding: var(--cdx-space-3);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface-soft);
  transition: border-color var(--cdx-transition-fast), background var(--cdx-transition-fast), transform var(--cdx-transition-fast);
}

.cdx-thread-item.active {
  border-color: rgba(47, 128, 237, 0.38);
  background: rgba(47, 128, 237, 0.08);
}

.cdx-thread-item:hover {
  border-color: rgba(47, 128, 237, 0.3);
  background: var(--cdx-surface);
  transform: translateX(2px);
}

.cdx-chat-window {
  overflow: hidden;
}

.cdx-chat-header,
.cdx-chat-composer,
.cdx-editor-header,
.cdx-preview-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cdx-space-3);
  padding: var(--cdx-space-4);
  border-bottom: 1px solid var(--cdx-border);
  background: color-mix(in srgb, var(--cdx-surface) 94%, transparent);
}

.cdx-chat-composer {
  border-top: 1px solid var(--cdx-border);
  border-bottom: 0;
}

.cdx-chat-body {
  display: grid;
  gap: var(--cdx-space-4);
  max-height: 620px;
  overflow-y: auto;
  padding: var(--cdx-space-5);
  background:
    linear-gradient(180deg, rgba(47, 128, 237, 0.04), transparent 40%),
    var(--cdx-surface-soft);
}

.cdx-chat-message {
  display: grid;
  gap: var(--cdx-space-2);
  max-width: min(680px, 92%);
  padding: var(--cdx-space-3) var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: 1rem;
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow-xs);
  transition: transform var(--cdx-transition-fast), border-color var(--cdx-transition-fast);
}

.cdx-chat-message:hover {
  border-color: rgba(47, 128, 237, 0.26);
  transform: translateY(-1px);
}

.cdx-chat-message.is-teacher {
  justify-self: end;
  border-color: rgba(32, 169, 139, 0.26);
  border-bottom-right-radius: var(--cdx-radius-xs);
  background:
    linear-gradient(135deg, rgba(32, 169, 139, 0.16), rgba(47, 128, 237, 0.08)),
    var(--cdx-surface);
}

.cdx-chat-message.is-pinned {
  border-left: 4px solid var(--cdx-warning);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.1);
}

.cdx-attachment-card,
.cdx-upload-zone,
.cdx-email-preview-card,
.cdx-profile-summary {
  padding: var(--cdx-space-4);
  border: 1px dashed var(--cdx-border-strong);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface-soft);
}

.cdx-attachment-card {
  display: flex;
  align-items: center;
  gap: var(--cdx-space-2);
  border-style: solid;
  color: var(--cdx-heading);
  font-size: var(--cdx-font-size-sm);
  font-weight: 850;
}

.cdx-attachment-card i {
  color: var(--cdx-primary-600);
}

.cdx-upload-zone {
  min-height: 168px;
  display: grid;
  place-items: center;
  text-align: center;
  transition: border-color var(--cdx-transition-fast), background var(--cdx-transition-fast), transform var(--cdx-transition-fast);
}

.cdx-upload-zone:hover,
.cdx-upload-zone.is-dragover {
  border-color: rgba(47, 128, 237, 0.5);
  background: rgba(47, 128, 237, 0.08);
  transform: translateY(-2px);
}

.cdx-editor-shell {
  overflow: hidden;
}

.cdx-editor-toolbar {
  padding: var(--cdx-space-3) var(--cdx-space-4);
  border-bottom: 1px solid var(--cdx-border);
  background: linear-gradient(180deg, var(--cdx-surface), var(--cdx-surface-soft));
}

.cdx-editor-toolbar .btn-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.cdx-editor-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface);
}

.cdx-editor-toolbar-divider {
  width: 1px;
  height: 1.5rem;
  background: var(--cdx-border);
}

.cdx-composer-fields {
  display: grid;
  gap: var(--cdx-space-3);
}

.cdx-composer-field {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--cdx-space-3);
  align-items: center;
}

.cdx-composer-field label {
  margin: 0;
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-xs);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cdx-recipient-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cdx-space-2);
  min-height: 2.875rem;
  align-items: center;
  padding: 0.45rem;
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface);
}

.cdx-rich-editor {
  min-height: 340px;
  padding: var(--cdx-space-5);
  background: var(--cdx-surface);
  color: var(--cdx-text);
  line-height: 1.68;
}

.cdx-rich-editor:focus {
  outline: none;
  box-shadow: inset var(--cdx-shadow-focus);
}

.cdx-email-preview {
  overflow: hidden;
}

.cdx-email-device {
  margin: var(--cdx-space-4);
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background:
    linear-gradient(180deg, rgba(47, 128, 237, 0.06), transparent 38%),
    var(--cdx-surface-soft);
}

.cdx-email-device.is-mobile {
  max-width: 300px;
  min-height: 420px;
  margin-inline: auto;
  border-radius: 1.5rem;
}

.cdx-email-device-header {
  display: flex;
  justify-content: space-between;
  gap: var(--cdx-space-3);
  margin-bottom: var(--cdx-space-3);
  color: var(--cdx-text-muted);
  font-size: var(--cdx-font-size-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.cdx-email-preview-card {
  border-style: solid;
  background: var(--cdx-surface);
  box-shadow: var(--cdx-shadow-sm);
}

.cdx-crm-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--cdx-space-3);
  align-items: center;
  padding: var(--cdx-space-3);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-md);
  background: var(--cdx-surface-soft);
}

.cdx-crm-row.is-critical {
  border-left: 4px solid var(--cdx-danger);
}

.cdx-thread-participants .cdx-crm-row {
  grid-template-columns: 44px minmax(0, 1fr);
}

.cdx-thread-participants .cdx-crm-row > .cdx-status {
  grid-column: 2;
  justify-self: start;
}

.cdx-timeline-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: var(--cdx-space-3);
  align-items: start;
}

.cdx-timeline-marker {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(47, 128, 237, 0.12);
  color: var(--cdx-primary-700);
}

.cdx-mini-chart {
  min-height: 160px;
  display: grid;
  grid-template-columns: repeat(6, minmax(20px, 1fr));
  gap: var(--cdx-space-3);
  align-items: end;
  padding: var(--cdx-space-4);
  border: 1px solid var(--cdx-border);
  border-radius: var(--cdx-radius-lg);
  background: var(--cdx-surface-soft);
}

.cdx-mini-chart span {
  border-radius: var(--cdx-radius-pill) var(--cdx-radius-pill) 0 0;
  background: linear-gradient(180deg, var(--cdx-primary-500), var(--cdx-secondary-500));
}

[data-theme="dark"] .cdx-channel-icon,
[data-theme="dark"] .cdx-channel-avatar,
[data-theme="dark"] .cdx-doc-icon,
[data-theme="dark"] .cdx-event-date,
[data-theme="dark"] .cdx-notification-icon {
  background: rgba(47, 128, 237, 0.16);
  color: var(--cdx-primary-300);
}

[data-theme="dark"] .cdx-channel-icon.is-whatsapp {
  background: rgba(32, 169, 139, 0.16);
  color: var(--cdx-secondary-300);
}

[data-theme="dark"] .cdx-lockscreen-card,
[data-theme="dark"] .cdx-push-card {
  background: rgba(18, 28, 46, 0.82);
}

[data-theme="dark"] .cdx-channel-tab.active,
[data-theme="dark"] .cdx-channel-tab:hover {
  background: rgba(47, 128, 237, 0.16);
  color: var(--cdx-primary-300);
}

[data-theme="dark"] .cdx-announcement-card.is-pinned {
  background:
    linear-gradient(180deg, rgba(245, 158, 11, 0.13), transparent 58%),
    var(--cdx-surface);
}

[data-theme="dark"] .cdx-chat-body,
[data-theme="dark"] .cdx-thread-item.active,
[data-theme="dark"] .cdx-chat-message.is-teacher,
[data-theme="dark"] .cdx-upload-zone:hover {
  background: rgba(47, 128, 237, 0.12);
}

[data-theme="dark"] .cdx-upload-zone.is-dragover {
  background: rgba(47, 128, 237, 0.16);
}

[data-theme="dark"] .cdx-timeline-marker {
  background: rgba(47, 128, 237, 0.18);
  color: var(--cdx-primary-300);
}

@media (max-width: 1199.98px) {
  .cdx-communication-metrics,
  .cdx-communication-card-grid,
  .cdx-audience-grid,
  .cdx-parent-grid,
  .cdx-event-grid,
  .cdx-insight-grid,
  .cdx-doubt-group-grid,
  .cdx-feed-grid,
  .cdx-case-grid,
  .cdx-template-library {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cdx-communication-span-8,
  .cdx-communication-span-7,
  .cdx-communication-span-6,
  .cdx-communication-span-5,
  .cdx-communication-span-4 {
    grid-column: span 12;
  }

  .cdx-thread-layout,
  .cdx-profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .cdx-communication-metrics,
  .cdx-communication-grid,
  .cdx-communication-card-grid,
    .cdx-template-grid,
    .cdx-audience-grid,
    .cdx-parent-grid,
    .cdx-event-grid,
    .cdx-notification-center-grid,
    .cdx-communication-toolbar,
    .cdx-composer-grid,
    .cdx-mobile-preview-row,
    .cdx-insight-grid,
    .cdx-doubt-group-grid,
    .cdx-feed-grid,
    .cdx-case-grid,
    .cdx-template-library,
    .cdx-attachment-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdx-communication-span-12,
  .cdx-communication-span-8,
  .cdx-communication-span-7,
  .cdx-communication-span-6,
  .cdx-communication-span-5,
  .cdx-communication-span-4 {
    grid-column: auto;
  }

  .cdx-communication-filter-set {
    justify-content: stretch;
  }

  .cdx-communication-filter-set > * {
    flex: 1 1 150px;
  }

  .cdx-delivery-row,
  .cdx-timeline-row,
  .cdx-feed-row,
  .cdx-circular-row,
  .cdx-event-step,
  .cdx-notification-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .cdx-delivery-row > .cdx-status,
  .cdx-timeline-row > .cdx-status,
  .cdx-feed-row > .cdx-status,
  .cdx-circular-row > .cdx-status,
  .cdx-event-step > .cdx-status,
  .cdx-notification-card > .cdx-notification-time {
    grid-column: 2;
    justify-self: start;
  }

  .cdx-device-preview {
    max-width: 100%;
  }

  .cdx-device-screen {
    min-height: 360px;
  }

  .cdx-chat-body {
    max-height: none;
    padding: var(--cdx-space-4);
  }

  .cdx-chat-message {
    max-width: 100%;
  }

  .cdx-composer-field {
    grid-template-columns: 1fr;
    gap: var(--cdx-space-2);
  }

  .cdx-editor-toolbar-group {
    flex: 1 1 auto;
    justify-content: center;
  }

  .cdx-crm-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .cdx-crm-row > .cdx-status {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 575.98px) {
  .cdx-topbar-actions > .cdx-communication-shortcut {
    display: none;
  }

  .cdx-channel-tabs {
    flex-direction: column;
  }

  .cdx-channel-tab {
    justify-content: center;
  }
}