.nx-comms {
  box-sizing: border-box;
  width: min(440px, calc(100% - 24px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  overflow: auto;
  color: #17241e;
  background: #fff;
  border: 1px solid #dce4df;
  border-radius: 8px;
  box-shadow: 0 20px 60px #10221826;
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}
.nx-comms *, .nx-comms *::before, .nx-comms *::after { box-sizing: border-box; letter-spacing: 0; }
.nx-comms::backdrop { background: #10221880; }
.nx-comms [hidden] { display: none !important; }
.nx-comms-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.nx-comms h2 { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 650; }
.nx-comms h3 { margin: 0 0 5px; font-size: 17px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.nx-comms-recipient { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.nx-comms-recipient > div { min-width: 0; }
.nx-comms-avatar { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 50%; background: #e2f4eb; color: #087349; font-size: 20px; font-weight: 600; }
.nx-comms-from { margin: 0; color: #60716a; font-size: 13px; overflow-wrap: anywhere; }
.nx-comms-status { margin: 0 0 12px; min-height: 21px; font-weight: 600; line-height: 1.5; }
.nx-comms-status[data-state="connected"] { color: #087349; }
.nx-comms-status[data-state="ringing"], .nx-comms-status[data-state="connecting"] { color: #1254a5; }
.nx-comms-detail { margin: 0 0 20px; color: #9b3434; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.nx-comms-compose { display: grid; gap: 8px; margin-top: 20px; }
.nx-comms-compose label { font-size: 13px; font-weight: 600; }
.nx-comms textarea { display: block; width: 100%; min-height: 120px; max-height: 260px; resize: vertical; padding: 12px; border: 1px solid #bccdc2; border-radius: 5px; color: #17241e; background: #fff; font: inherit; line-height: 1.6; }
.nx-comms textarea:disabled { background: #f3f6f4; }
.nx-comms select { width:100%; min-height:40px; border:1px solid #bccdc2; border-radius:5px; padding:8px; background:#fff; color:#17241e; font:inherit; }
.nx-comms-count { text-align: right; color: #60716a; font-size: 12px; font-variant-numeric: tabular-nums; }
.nx-comms-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e7ece9; }
.nx-comms button { min-height: 40px; max-width: 100%; padding: 9px 14px; border: 1px solid transparent; border-radius: 5px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; line-height: 1.4; overflow-wrap: anywhere; }
.nx-comms button:disabled { opacity: .48; cursor: not-allowed; }
.nx-comms button:focus-visible, .nx-comms input:focus-visible, .nx-comms textarea:focus-visible { outline: 3px solid #4a8fe5; outline-offset: 3px; }
.nx-comms-primary { background: #087349; color: #fff; }
.nx-comms-primary:hover:not(:disabled) { background: #065b39; }
.nx-comms-danger { background: #b93242; color: #fff; }
.nx-comms-danger:hover:not(:disabled) { background: #9d2433; }
.nx-comms-secondary { color: #1254a5; background: #edf4ff; }
.nx-comms .nx-comms-close { color: #42594c; background: transparent; padding: 7px; }
.nx-comms-close:hover { background: #f0f5f2; }
.nx-comms-mute { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-right: auto; font-size: 13px; cursor: pointer; }
.nx-comms-mute input { width: 18px; height: 18px; accent-color: #087349; }
@media (max-width: 360px) { .nx-comms { padding: 18px; } }