/* =====================================================================
   NEXUS · §4.8 Bulk Messaging & Command Communication
   ===================================================================== */

body.nx-messaging { background: linear-gradient(180deg, var(--nx-ink-950), var(--nx-ink-900)); color: #FFF; min-height: 100vh; margin: 0; }
.msg-shell { max-width: 1440px; margin: 0 auto; padding: 20px; }

.msg-hero {
  padding: 22px 28px;
  border-radius: 14px;
  background: radial-gradient(60% 100% at 100% 0%, rgba(6, 182, 212, 0.22), transparent 60%),
              linear-gradient(135deg, var(--nx-teal-950), var(--nx-ink-900));
  border: 1px solid rgba(6, 182, 212, 0.28);
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
.msg-hero .kicker { font-family: var(--font-mono); font-size: 11px; color: var(--nx-teal-300); letter-spacing: 0.14em; font-weight: var(--fw-black); }
.msg-hero h1 { font-size: 28px; font-weight: var(--fw-black); letter-spacing: -0.02em; margin: 4px 0 4px; }
.msg-hero .lead { color: rgba(255,255,255,0.75); font-size: 14px; max-width: 780px; }

/* Grid */
.msg-grid { display: grid; grid-template-columns: 440px 1fr; gap: 16px; min-height: calc(100vh - 240px); }
@media (max-width: 1100px) { .msg-grid { grid-template-columns: 1fr; } }

.msg-card { background: rgba(15, 23, 42, 0.75); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 18px 20px; }
.msg-card h3 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6); font-weight: var(--fw-black);
  text-transform: uppercase; margin: 0 0 12px;
}

/* Compose form */
.compose { display: flex; flex-direction: column; gap: 14px; }
.compose label {
  display: block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55); font-weight: var(--fw-black);
  text-transform: uppercase; margin-bottom: 6px;
}

/* Message type pills */
.mtype-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 700px) { .mtype-grid { grid-template-columns: repeat(2, 1fr); } }
.mtype {
  padding: 10px 8px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  color: rgba(255,255,255,0.7);
  transition: all 150ms var(--ease-out);
}
.mtype:hover { border-color: var(--nx-teal-400); color: #FFF; }
.mtype.on { border-color: var(--nx-teal-500); background: rgba(6, 182, 212, 0.12); color: #FFF; }
.mtype .ic { font-size: 20px; margin-bottom: 4px; }
.mtype .n { font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-black); letter-spacing: 0.04em; }

/* Tier selector */
.tier-picker { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.tier-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
}
.tier-btn:hover { background: rgba(255,255,255,0.06); color: #FFF; }
.tier-btn.on { border-color: var(--nx-teal-500); background: rgba(6, 182, 212, 0.12); color: #FFF; }
.tier-btn .code {
  width: 36px;
  padding: 2px 4px;
  background: rgba(6, 182, 212, 0.14);
  color: var(--nx-teal-300);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-weight: var(--fw-black);
  text-align: center;
  font-size: 10px;
}
.tier-btn.on .code { background: var(--nx-teal-500); color: #032530; }
.tier-btn .name { flex: 1; }
.tier-btn .n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}

/* Text inputs */
.compose input,
.compose textarea,
.compose select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  color: #FFF;
  font-size: 13px;
  font-family: var(--font-sans);
}
.compose textarea { min-height: 90px; resize: vertical; }
.compose input:focus, .compose textarea:focus, .compose select:focus {
  outline: none; border-color: var(--nx-teal-500);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.16);
}

/* Toggle row */
.compose .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compose .opt-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  font-size: 12px; color: rgba(255,255,255,0.7);
}
.compose .opt-toggle input { width: 16px; height: 16px; margin: 0; }

.compose .send-btn {
  padding: 14px;
  background: var(--nx-teal-500);
  color: #032530;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 150ms var(--ease-out);
}
.compose .send-btn:hover { background: var(--nx-teal-400); }
.compose .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.compose .estimate {
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.06);
  border-left: 3px solid var(--nx-amber-500);
  border-radius: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-mono);
  line-height: 1.5;
}
.compose .estimate strong { color: var(--nx-amber-400); }

/* Sent list + AI consolidation */
.sent-list { display: flex; flex-direction: column; gap: 12px; }
.sent-msg {
  padding: 16px 18px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border-left: 3px solid var(--nx-teal-500);
}
.sent-msg .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.sent-msg .type-tag {
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  background: rgba(6, 182, 212, 0.14);
  color: var(--nx-teal-300);
}
.sent-msg .type-tag.emergency  { background: rgba(239, 68, 68, 0.16);  color: #FCA5A5; }
.sent-msg .type-tag.directive  { background: rgba(245, 158, 11, 0.16); color: var(--nx-amber-400); }
.sent-msg .type-tag.info       { background: rgba(96, 165, 250, 0.16); color: #93C5FD; }
.sent-msg .type-tag.mobilise   { background: rgba(167, 139, 250, 0.16); color: #C4B5FD; }
.sent-msg .sent-at { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.5); }
.sent-msg h4 { margin: 0 0 6px; font-size: 15px; font-weight: var(--fw-black); }
.sent-msg .to { font-family: var(--font-mono); font-size: 11px; color: var(--nx-teal-300); margin-bottom: 8px; }
.sent-msg .body-txt { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.5; margin-bottom: 12px; }

.sent-msg .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sent-msg .stat {
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  text-align: center;
  font-family: var(--font-mono);
}
.sent-msg .stat .l { font-size: 9px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; font-weight: var(--fw-black); text-transform: uppercase; }
.sent-msg .stat .v { font-size: 15px; color: #FFF; font-weight: var(--fw-black); margin-top: 2px; }
.sent-msg .stat.ack .v { color: #6EE7B7; }
.sent-msg .stat.pending .v { color: var(--nx-amber-400); }
.sent-msg .stat.late .v { color: #FCA5A5; }

.sent-msg .response-bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
}
.sent-msg .response-bar .b-ack     { background: #10B981; height: 100%; }
.sent-msg .response-bar .b-pending { background: var(--nx-amber-500); height: 100%; }
.sent-msg .response-bar .b-late    { background: #EF4444; height: 100%; }

/* AI consolidation card */
.ai-consol {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(6, 182, 212, 0.06);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 8px;
}
.ai-consol h5 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--nx-teal-300);
  font-weight: var(--fw-black);
  text-transform: uppercase;
}
.ai-consol p { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.6; }
.ai-consol .themes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ai-consol .theme {
  padding: 3px 8px;
  background: rgba(6, 182, 212, 0.14);
  color: var(--nx-teal-300);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
}

/* Success flash */
.toast-flash {
  position: fixed; bottom: 20px; right: 20px;
  padding: 14px 20px;
  background: var(--nx-teal-800);
  color: #FFF;
  border-radius: 10px;
  border: 1px solid var(--nx-teal-500);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4);
  font-size: 13px;
  z-index: 100;
  display: none;
  max-width: 340px;
}
.toast-flash.show { display: block; animation: fadeInUp 300ms var(--ease-out); }
.toast-flash .t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--nx-teal-300); font-weight: var(--fw-black); margin-bottom: 4px; }