.communications-main { width: min(1560px, calc(100% - 40px)); padding-top: 24px; }
.communications-main .account-page-heading { margin-bottom: 22px; }
.communications-main .account-page-heading h1 { font-size: 32px; }
.communications-main .account-lede { font-size: 15px; }
.communications-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr) 260px; min-height: 650px; height: calc(100dvh - 220px); max-height: 1000px; overflow: hidden; border: 1px solid var(--account-border); border-radius: 16px; background: white; box-shadow: 0 4px 20px rgb(16 24 40 / 4%); }
.communications-inbox { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--account-border); }
.communications-search { padding: 18px 14px; border-bottom: 1px solid var(--account-border); }
.communications-search > label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 7px; }
.communications-search > div:first-of-type { display: flex; gap: 6px; }
.communications-search input[type="search"] { min-width: 0; width: 100%; }
.communications-search input, .communications-search select, .communications-context input:not([type="checkbox"]), .communications-context select { border: 1px solid #cfd5df; background: white; border-radius: 6px; padding: 8px; font: inherit; font-size: 13px; }
.communications-search input[type="submit"] { padding: 8px; }
.communications-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 12px; }
.communications-filters label { font-size: 12px; color: var(--account-muted); }
.communications-filters label[for="channel"] { grid-column: 2; grid-row: 1; }
.communications-contact-list { overflow-y: auto; flex: 1; }
.communications-contact { display: flex; gap: 10px; align-items: start; padding: 18px 14px; border-bottom: 1px solid #f0f2f5; text-decoration: none; color: var(--account-ink) !important; }
.communications-contact:hover { background: #f8faff; }
.communications-contact[aria-current="page"] { background: #eef2ff; box-shadow: inset 3px 0 var(--account-accent); }
.communications-avatar { display: grid; flex-shrink: 0; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #4754a4; background: #e9edf9; font-weight: 700; }
.communications-contact-text { display: grid; gap: 5px; min-width: 0; font-size: 13px; }
.communications-contact-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.communications-contact-text > span { color: #475467; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.communications-contact-text small { color: var(--account-muted); font-size: 11px; }
.communications-unread { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; margin-top: 6px; margin-left: auto; background: var(--account-accent); }
.communications-conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.communications-thread-heading { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--account-border); }
.communications-thread-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.communications-thread-heading p { margin: 4px 0 0; font-size: 13px; }
.communications-refresh { margin-left: auto; font-size: 13px; }
.communications-back { display: none; }
.communications-history { display: block; flex: 1; min-height: 180px; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px; background: #fafbfc; }
.communications-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.communications-event { max-width: 95%; border: 1px solid var(--account-border); border-radius: 10px; padding: 14px 16px; background: white; font-size: 14px; overflow-wrap: anywhere; }
.communications-event p { margin: 8px 0; line-height: 1.55; }
.communications-event-outbound { background: #edf3ff; border-color: #dce6ff; margin-left: auto; min-width: 45%; }
.communications-event-note { background: #fffbea; border-color: #f2e8b7; }
.communications-event-appointment { border-style: dashed; }
.communications-event-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }
.communications-event-meta time { color: var(--account-muted); font-size: 11px; }
.communications-event .account-badge { padding: 3px 7px; font-size: 10px; }
.communications-event summary { cursor: pointer; color: var(--account-accent); margin-top: 8px; }
.communications-event audio { display: block; max-width: 100%; margin-block: 10px; }
.communications-composer { border-top: 1px solid var(--account-border); padding: 14px 24px; background: white; max-height: 320px; overflow-y: auto; }
.communications-composer details + details { margin-top: 12px; }
.communications-composer summary { cursor: pointer; font-size: 13px; font-weight: 650; }
.communications-composer label { display: block; margin: 12px 0 6px; font-size: 12px; }
.communications-composer textarea { display: block; width: 100%; resize: vertical; min-height: 60px; max-height: 180px; border: 1px solid #cfd5df; border-radius: 8px; padding: 10px; font: inherit; font-size: 14px; }
.communications-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.communications-composer-footer small { color: var(--account-muted); font-size: 11px; }
.communications-context { border-left: 1px solid var(--account-border); padding: 20px; overflow-y: auto; font-size: 13px; }
.communications-context > details > summary { font-size: 14px; font-weight: 700; }
.communications-context > details > .communications-context-body { display: block; }
.communications-context section { padding-block: 16px; border-bottom: 1px solid var(--account-border); }
.communications-context h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--account-muted); margin: 0 0 12px; }
.communications-context label { display: block; margin: 10px 0 6px; }
.communications-context input:not([type="checkbox"]), .communications-context select { width: 100%; }
.communications-context input[type="submit"] { margin-top: 10px; white-space: normal; }
.communications-context summary { cursor: pointer; }
.communications-paging { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 12px; }
.communications-read { text-align: right; margin-top: 14px; font-size: 12px; }
.communications-welcome { grid-column: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.communications-welcome h2 { font-size: 24px; letter-spacing: -.025em; }
.communications-welcome p { max-width: 400px; font-size: 15px; line-height: 1.6; }
.communications-welcome-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; font-size: 32px; background: #eef2ff; color: var(--account-accent); }
.communications-list-empty { padding: 32px 18px; color: var(--account-muted); font-size: 13px; line-height: 1.6; }
.communications-layout :focus-visible { outline: 3px solid #6b8de5; outline-offset: 3px; }
@media (max-width: 1200px) {
  .communications-layout { grid-template-columns: 270px minmax(0, 1fr); }
  .communications-context { display: none; }
  .communications-layout.has-thread { height: auto; min-height: 650px; max-height: none; }
  .communications-layout.has-thread .communications-inbox { grid-row: span 2; max-height: calc(100dvh - 220px); }
  .communications-context { display: block; grid-column: 2; border-top: 1px solid var(--account-border); border-left: 0; }
  .communications-context > details:not([open]) > .communications-context-body { display: none; }
  .communications-conversation { height: calc(100dvh - 260px); min-height: 600px; }
  .communications-welcome { grid-column: 2; }
}
@media (max-width: 760px) {
  .communications-main { width: calc(100% - 24px); padding-top: 18px; }
  .communications-main .account-page-heading h1 { font-size: 27px; }
  .communications-layout { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 230px); min-height: 450px; }
  .communications-inbox { border-right: 0; }
  .communications-layout.has-thread > .communications-inbox, .communications-welcome { display: none; }
  .communications-context { grid-column: 1; }
  .communications-conversation { min-height: 520px; height: calc(100dvh - 210px); }
  .communications-back { display: block; width: 100%; font-size: 12px; }
  .communications-thread-heading, .communications-composer { padding: 14px; }
  .communications-history { padding: 14px; }
  .communications-event { max-width: 100%; padding: 12px; }
  .communications-composer-footer { align-items: flex-start; }
}