/* Communications hub — loaded only by communications.html; does not affect other routes. */
/* Scope: main.communications-main (same element as .app-container on this page) */

/* Hub column width — does not override global main.app-container */
/* Заполняет оставшуюся высоту под .app-main-view (layout.css), иначе блок «висит» и не совпадает с референсом по вертикали */
main.communications-main #comms-hub-root {
  max-width: 100%;
  margin-inline: 0;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

main.communications-main .comm-card {
  width: 100%;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--aim-card-radius);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

main.communications-main .hub-toolbar {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 var(--grid-8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--aim-gap-tight);
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  margin-bottom: var(--aim-gap-inner);
  box-shadow: none;
  backdrop-filter: none;
}

main.communications-main .hub-search-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 414px;
  height: 35px;
  min-width: 0;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 999px;
  box-sizing: border-box;
  flex-shrink: 0;
}

main.communications-main .hub-search-pill .aim-nav-icon,
main.communications-main .hub-search-pill [data-lucide] {
  flex-shrink: 0;
  color: var(--text-muted);
}

main.communications-main .hub-search-pill input {
  width: auto !important;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  opacity: 0.9;
  outline: none;
  font-family: inherit;
}

main.communications-main .hub-toolbar input {
  padding-left: 4px;
}

main.communications-main .hub-search-pill input::placeholder {
  color: var(--text-muted);
}

main.communications-main .hub-search-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

main.communications-main .hub-filter-chips {
  display: flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
}

main.communications-main .hub-filter-chips::before {
  content: none;
}

main.communications-main .hub-chip {
  border: 0;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: var(--font-label);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: var(--text-muted);
}

main.communications-main .hub-chip--on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.18),
    0 0 5px rgba(129, 140, 248, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

main.communications-main .divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.08);
}

main.communications-main .hub-toolbar::after {
  content: "";
  display: none;
}

main.communications-main .filters {
  display: flex;
  gap: 2px;
}

main.communications-main .filter-pill {
  height: 30px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: var(--font-label);
}

main.communications-main .filter-pill.active,
main.communications-main .filter-pill.hub-chip--on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

main.communications-main .filter-pill:not(.active):not(.hub-chip--on):hover {
  background: rgba(255, 255, 255, 0.12);
}

main.communications-main .hub-panes {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  /* Высота из референса — за счёт flex внутри #comms-hub-root, а не жёсткий calc поверх .app-main-view */
  min-height: min(520px, 70dvh);
}

main.communications-main .comm-content {
  display: flex;
  min-height: 0;
}

main.communications-main .comm-content .hub-inbox {
  flex: 0 0 clamp(236px, 26vw, 300px);
}

main.communications-main .comm-content .hub-chat {
  flex: 1 1 auto;
}

main.communications-main .comm-content .hub-context {
  flex: 0 0 clamp(236px, 26vw, 300px);
}

main.communications-main .hub-inbox {
  flex: 0 0 clamp(236px, 26vw, 300px);
  width: clamp(236px, 26vw, 300px);
  max-width: 300px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: var(--grid-16) var(--grid-12);
  gap: var(--aim-gap-micro);
}

main.communications-main .hub-inbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--grid-8) var(--grid-12);
  gap: var(--aim-gap-tight);
}

main.communications-main .hub-inbox__title {
  margin: 0;
  line-height: 1.2;
}

main.communications-main .hub-inbox__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
  padding: 0 var(--grid-12);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-indigo) 88%, #000);
  color: #fff;
  font-size: var(--font-label);
  font-weight: var(--font-weight-semibold);
}

main.communications-main .hub-inbox__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}

main.communications-main .hub-inbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--aim-gap-tight);
  padding: 0 var(--grid-12);
  min-height: 64px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

main.communications-main .hub-inbox-row__type {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.35);
  color: var(--accent-indigo);
}

main.communications-main .hub-inbox-row__type [data-lucide],
main.communications-main .hub-inbox-row__type .aim-nav-icon {
  width: 14px;
  height: 14px;
}

main.communications-main .hub-inbox-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

main.communications-main .hub-inbox-row--active {
  background: rgba(129, 140, 248, 0.08);
  border-color: rgba(129, 140, 248, 0.5);
}

main.communications-main .hub-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: #fafafa;
  box-sizing: border-box;
}

main.communications-main .hub-avatar--rose {
  background: rgba(248, 113, 113, 0.22);
  border: 1px solid rgba(248, 113, 113, 0.6);
}

main.communications-main .hub-avatar--blue {
  background: rgba(59, 130, 246, 0.22);
  border: 1px solid rgba(59, 130, 246, 0.6);
}

main.communications-main .hub-avatar--amber {
  background: rgba(251, 191, 36, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.6);
}

main.communications-main .hub-avatar--green {
  background: rgba(34, 197, 94, 0.22);
  border: 1px solid rgba(34, 197, 94, 0.6);
}

main.communications-main .hub-avatar--violet {
  background: rgba(139, 92, 246, 0.22);
  border: 1px solid rgba(139, 92, 246, 0.6);
}

main.communications-main .hub-avatar--sky {
  background: rgba(14, 165, 233, 0.22);
  border: 1px solid rgba(14, 165, 233, 0.6);
}

main.communications-main .hub-avatar--pink {
  background: rgba(236, 72, 153, 0.22);
  border: 1px solid rgba(236, 72, 153, 0.6);
}

main.communications-main .hub-inbox-row__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

main.communications-main .hub-inbox-row__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

main.communications-main .hub-inbox-row__tags {
  margin-top: 0;
}

main.communications-main .hub-inbox-row__name {
  font-size: var(--font-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

main.communications-main .hub-inbox-row__time {
  font-size: var(--font-label);
  color: var(--text-muted);
}

main.communications-main .hub-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
}

main.communications-main .hub-tag--review {
  background: rgba(251, 191, 36, 0.14);
  color: #fbbf24;
}

main.communications-main .hub-tag--question {
  background: rgba(129, 140, 248, 0.14);
  color: #818cf8;
}

main.communications-main .hub-tag--chat {
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
}

main.communications-main .hub-tag__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-indigo);
  flex-shrink: 0;
}

main.communications-main .hub-stars {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

main.communications-main .hub-star {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--accent-amber);
}

main.communications-main .hub-star--dim {
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

main.communications-main .hub-inbox-row__preview {
  font-size: var(--font-label);
  line-height: 1.35;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

main.communications-main .hub-divider {
  width: 0;
  align-self: stretch;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

main.communications-main .hub-chat {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

main.communications-main .hub-chat-head {
  display: flex;
  align-items: flex-start;
  gap: var(--grid-12);
  padding: var(--grid-12) var(--grid-16);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg-card) 40%, transparent);
}

main.communications-main .hub-chat-head__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

main.communications-main .hub-chat-head__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--aim-gap-micro);
  padding-top: 2px;
}

main.communications-main .hub-chat-head__title {
  margin: 0;
  min-width: 0;
  font-size: var(--type-section);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-primary);
}

main.communications-main .hub-chat-head__sub {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-label);
  line-height: 1.35;
}

main.communications-main .hub-chat-head__actions {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--aim-gap-tight);
}

main.communications-main .hub-chat-head__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--aim-btn-height);
  height: var(--aim-btn-height);
  padding: 0;
  border-radius: var(--aim-btn-radius);
  border: 1px solid var(--border-subtle);
  background: var(--glass-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

main.communications-main .hub-chat-head__more-btn:hover {
  background: var(--glass-bg-strong);
  color: var(--text-primary);
}

main.communications-main .hub-chat-head__more {
  padding: 6px 8px;
  min-height: 0;
  height: auto;
}

main.communications-main .hub-msg-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--grid-16);
  display: flex;
  flex-direction: column;
  gap: var(--aim-gap-inner);
  background: color-mix(in srgb, var(--bg-main) 55%, transparent);
}

main.communications-main .hub-msg-date {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

main.communications-main .hub-msg-date--sep {
  display: flex;
  align-items: center;
  gap: var(--grid-12);
  margin: var(--grid-8) 0 var(--grid-12);
  color: var(--text-muted);
}

main.communications-main .hub-msg-date--sep::before,
main.communications-main .hub-msg-date--sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-subtle);
  opacity: 0.85;
}

main.communications-main .hub-msg-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

main.communications-main .hub-msg-row--out {
  align-items: flex-end;
}

main.communications-main .hub-bubble {
  max-width: min(420px, 92%);
  padding: var(--grid-12) var(--grid-16);
  border-radius: var(--radius-xl);
  box-sizing: border-box;
}

main.communications-main .hub-bubble--in {
  background: color-mix(in srgb, var(--bg-card) 92%, #fff);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--glass-shadow);
}

main.communications-main .hub-bubble--out {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

main.communications-main .hub-bubble--ai {
  background: color-mix(in srgb, var(--accent-indigo) 14%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent-indigo) 42%, transparent);
}

main.communications-main .hub-bubble__text {
  margin: 0;
  line-height: 1.45;
}

main.communications-main .hub-bubble__foot {
  margin-top: 4px;
  line-height: 1.35;
  color: var(--text-muted);
}

main.communications-main .hub-bubble__ai-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-indigo);
  margin-bottom: 2px;
}

main.communications-main .hub-bubble__ai-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-indigo);
}

main.communications-main .hub-compose {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--aim-gap-inner);
  padding: var(--grid-12) var(--grid-16);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
}

main.communications-main .hub-compose--stack .hub-compose__textarea {
  width: 100%;
  min-height: 44px;
  border-radius: var(--aim-btn-radius);
  resize: vertical;
}

main.communications-main .hub-task-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--aim-gap-tight);
}

/* Единый стиль кнопок действий во всех режимах:
   берем размер/типографику из ручного поиска и спокойное свечение как у "Скопировать". */
main.communications-main .hub-task-actions .btn-apple {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 500;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, #fff 20%);
  background: color-mix(in srgb, var(--bg-card) 92%, #000 8%);
  color: var(--text-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 14px rgba(8, 12, 24, 0.16);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

main.communications-main .hub-task-actions .btn-apple:hover {
  background: color-mix(in srgb, var(--bg-card) 88%, #fff 12%);
  border-color: color-mix(in srgb, var(--accent-indigo) 24%, var(--border-subtle));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 16px rgba(8, 12, 24, 0.2);
}

main.communications-main .hub-task-actions .btn-apple:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-indigo) 42%, var(--border-subtle));
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.2),
    0 0 0 3px rgba(129, 140, 248, 0.08);
}

main.communications-main .hub-task-actions .btn-apple [data-lucide] {
  width: 14px;
  height: 14px;
}

main.communications-main .hub-compose input {
  flex: 1 1 auto;
  min-width: 0;
}

main.communications-main .hub-context {
  flex: 0 0 clamp(236px, 26vw, 300px);
  width: clamp(236px, 26vw, 300px);
  max-width: 300px;
  min-width: 0;
  min-height: 0;
  padding: var(--grid-16) var(--grid-12);
  display: flex;
  flex-direction: column;
  gap: var(--grid-16);
  overflow-y: auto;
}

main.communications-main .hub-ctx-card {
  padding: var(--grid-16);
  display: flex;
  flex-direction: column;
  gap: var(--grid-16);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 82%, #fff 18%);
  background: color-mix(in srgb, var(--bg-card) 94%, #000 6%);
  box-shadow:
    0 12px 28px rgba(3, 7, 18, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

main.communications-main .hub-ctx-profile {
  display: flex;
  align-items: center;
  gap: var(--grid-12);
}

main.communications-main .hub-ctx-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fafafa;
  background: color-mix(in srgb, var(--bg-card) 72%, #fb7185 28%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, #fb7185 45%);
  flex-shrink: 0;
}

main.communications-main .hub-ctx-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

main.communications-main .hub-ctx-name {
  display: block;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.01em;
}

main.communications-main .hub-ctx-sub {
  display: block;
  color: var(--text-muted);
  line-height: 1.3;
}

main.communications-main .hub-ctx-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: flex-start;
  gap: var(--grid-12);
}

main.communications-main .hub-ctx-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

main.communications-main .hub-ctx-stat__lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

main.communications-main .hub-ctx-stat__val {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

main.communications-main .hub-ctx-stat__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}

main.communications-main .hub-ctx-stat__dot--blue {
  background: #60a5fa;
}

main.communications-main .hub-ctx-stat__dot--rose {
  background: #fb7185;
}

main.communications-main .hub-ctx-stat__dot--green {
  background: #4ade80;
}

main.communications-main .hub-ctx-stat__val--green {
  color: var(--accent-green);
}

main.communications-main .hub-ctx-stat__val--rose {
  color: #fb7185;
}

main.communications-main .hub-ctx-stat__val--amber {
  color: var(--accent-amber);
}

main.communications-main .glass-card.hub-ai-answer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--grid-16);
  gap: var(--grid-12);
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-card) 95%, #000 5%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, #fff 20%);
  box-shadow:
    0 12px 28px rgba(3, 7, 18, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

main.communications-main .glass-card.hub-ai-answer::before {
  content: none;
}

main.communications-main .glass-card.hub-ai-answer > * {
  position: relative;
  z-index: 1;
}

main.communications-main .glass-card.hub-ai-answer.ai-insight-glow {
  background: color-mix(in srgb, var(--bg-card) 95%, #000 5%);
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, #fff 20%);
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 28px rgba(3, 7, 18, 0.23),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

main.communications-main .glass-card.hub-ai-answer.ai-insight-glow::before {
  content: none;
}

main.communications-main .hub-ai-answer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

main.communications-main .hub-ai-settings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--grid-12);
}

main.communications-main .hub-ai-setting-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

main.communications-main .hub-ai-setting-row__lbl {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

main.communications-main .hub-ai-select {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, #fff 20%);
  background: color-mix(in srgb, var(--bg-card) 92%, #000 8%);
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
}

main.communications-main .hub-ai-select:focus,
main.communications-main .hub-ai-select:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-indigo) 46%, var(--border-subtle));
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.2),
    0 0 0 3px rgba(129, 140, 248, 0.08);
}

main.communications-main .hub-ai-answer__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

main.communications-main .hub-ai-answer__head .btn-apple.hub-ai-answer__regen {
  flex-shrink: 0;
  font-size: 12px;
}

main.communications-main .hub-ai-answer__body {
  margin: 0;
  line-height: 1.45;
}

main.communications-main .hub-ai-answer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

main.communications-main .hub-msg-scroll--manual {
  border-bottom: 1px solid var(--border-subtle);
}

main.communications-main .hub-manual-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

main.communications-main .hub-manual-pane__label {
  color: var(--text-muted);
  letter-spacing: 0.02em;
  padding: 0 2px;
}

main.communications-main .hub-manual-pane__textarea {
  min-height: 140px;
  resize: vertical;
  border-radius: var(--radius-xl);
}

main.communications-main .hub-manual-pane--answer {
  margin-bottom: 2px;
}

main.communications-main .hub-compose__textarea:focus,
main.communications-main .hub-compose__textarea:focus-visible {
  border-color: color-mix(in srgb, var(--accent-indigo) 58%, var(--border-subtle));
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.26),
    0 0 12px rgba(129, 140, 248, 0.16);
  outline: none;
}

main.communications-main .hub-ctx-avatar--manual {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

main.communications-main .hub-ctx-avatar-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: conic-gradient(
    from 220deg,
    #4ade80 0deg 120deg,
    #60a5fa 120deg 240deg,
    #fb7185 240deg 360deg
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 12px rgba(96, 165, 250, 0.1);
  overflow: hidden;
}

main.communications-main .hub-ctx-avatar-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(10, 12, 24, 0.88);
  z-index: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 10px 30px rgba(255, 255, 255, 0.02);
}

main.communications-main .hub-ctx-avatar-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%);
  z-index: 0;
  pointer-events: none;
}

main.communications-main .hub-ctx-avatar-ring__label {
  position: relative;
  z-index: 1;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1;
  margin-top: 3px;
}

main.communications-main .hub-ctx-avatar-ring__value {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
  margin-top: 1px;
}

main.communications-main .hub-ctx-avatar-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
}

main.communications-main .hub-ctx-avatar-dot--blue { background: #60a5fa; }
main.communications-main .hub-ctx-avatar-dot--rose { background: #fb7185; }
main.communications-main .hub-ctx-avatar-dot--green { background: #4ade80; }

main.communications-main .hub-quick-title {
  margin: 0;
  padding-top: 4px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-muted) 86%, #fff 14%);
  font-size: 12px;
  line-height: 1.25;
}

main.communications-main .hub-quick-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

main.communications-main .hub-quick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

main.communications-main .hub-quick-row__chev {
  color: var(--text-muted);
  flex-shrink: 0;
}

main.communications-main .hub-quick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
}

main.communications-main .glass-card.hub-quick-row {
  padding: 9px 12px;
}

main.communications-main .hub-quick-row__txt {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-secondary);
  min-width: 0;
}

@media (max-width: 1100px) {
  main.communications-main .hub-panes {
    flex-direction: column;
    overflow: auto;
  }
  main.communications-main .hub-inbox {
    width: 100%;
    flex: 0 0 auto;
    max-height: 320px;
  }
  main.communications-main .hub-divider {
    width: 100%;
    height: 1px;
  }
  main.communications-main .hub-chat {
    flex: 1 1 auto;
    min-height: 280px;
  }
  main.communications-main .hub-context {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* === Pane chrome (no fixed px column overrides — uses clamp rules above) === */
main.communications-main .hub-inbox,
main.communications-main .hub-chat,
main.communications-main .hub-context {
  height: 100%;
  box-sizing: border-box;
}

main.communications-main .hub-inbox__list,
main.communications-main .hub-msg-scroll,
main.communications-main .hub-context {
  overflow-y: auto;
}

main.communications-main .hub-inbox__list,
main.communications-main .hub-msg-scroll {
  flex: 1 1 auto;
}

main.communications-main .hub-panes * {
  min-height: 0;
}

main.communications-main .hub-chat-head,
main.communications-main .hub-compose {
  flex-shrink: 0;
}

main.communications-main .hub-divider {
  display: none;
}

main.communications-main .comm-card.hub-panes {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-card) 88%, #000) 0%,
    var(--bg-card) 100%
  );
  border: 1px solid var(--border-subtle);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

main.communications-main .hub-inbox,
main.communications-main .hub-chat {
  border-right: 1px solid var(--border-subtle);
}

main.communications-main .hub-inbox {
  background: color-mix(in srgb, #fff 3.5%, var(--bg-main));
}

main.communications-main .hub-context {
  background: color-mix(in srgb, #fff 2.5%, var(--bg-main));
}

main.communications-main .hub-chat {
  background: color-mix(in srgb, #fff 2%, var(--bg-main));
}

main.communications-main .hub-filter-chips {
  background: transparent;
  backdrop-filter: none;
  border: 0;
  border-radius: 999px;
  padding: 0;
}

main.communications-main .filter-pill.active,
main.communications-main .hub-chip--on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.18),
    0 0 5px rgba(129, 140, 248, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

main.communications-main .hub-chip:not(.hub-chip--on) {
  background: transparent;
  border: 0;
  box-shadow: none;
}

main.communications-main .hub-chip:not(.hub-chip--on):hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

main.communications-main .aim-comms-page-head {
  margin-bottom: var(--aim-gap-inner);
}

main.communications-main .comm-toolbar {
  margin-block: 0 6px;
  align-self: flex-start;
  margin-left: 0;
}

main.communications-main .hub-ai-chip {
  padding: var(--grid-8) var(--grid-12);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  font-size: var(--font-label);
}

main.communications-main .hub-quick-row {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 78%, #fff 22%);
  background: color-mix(in srgb, var(--bg-card) 94%, #000 6%);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

main.communications-main .hub-quick-row:hover {
  background: color-mix(in srgb, var(--bg-card) 90%, #fff 10%);
  border-color: color-mix(in srgb, var(--accent-indigo) 24%, var(--border-subtle));
  box-shadow: 0 6px 12px rgba(8, 12, 24, 0.18);
}

main.communications-main .hub-quick-row:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-indigo) 44%, var(--border-subtle));
  box-shadow:
    0 0 0 1px rgba(129, 140, 248, 0.2),
    0 0 0 3px rgba(129, 140, 248, 0.08);
}

main.communications-main .hub-quick-row__txt {
  font-size: var(--font-label);
  color: var(--text-secondary);
}

main.communications-main .aim-comms-ai-send.btn-apple {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--aim-btn-radius);
  font-weight: var(--font-weight-semibold);
}