/* dialogue.css — module scoped
   Ultra-clean walkie-talkie comms skin
   Neutral grey hardware, high legibility
*/

/* =========================================================
   WALKIE-TALKIE DEVICE PLATE
========================================================= */

.dialogue-plate{
  cursor: pointer;
  user-select: none;
  position: relative;
  transform: translateZ(0);
  transition: transform 110ms ease-out, filter 140ms ease-out;

  /* clean device casing */
  background: linear-gradient(180deg, #4a4a4a 0%, #3f3f3f 100%);
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  padding: 20px 18px 22px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.35),
    0 10px 22px rgba(0,0,0,0.35);

  color: #f2eee6;
}

/* antenna */
.dialogue-plate::after{
  content: "";
  position: absolute;
  top: -32px;
  left: 22px;
  width: 6px;
  height: 32px;
  background: #6a6a6a;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    0 2px 4px rgba(0,0,0,0.35);
}

/* channel label */
.dialogue-shell::before{
  content: "CH-01  •  RADIO TRANSMISSION";
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d0d0d0;
  opacity: 0.9;
}

/* =========================================================
   PUSH-TO-TALK PRESS ANIMATION
========================================================= */

.dialogue-plate:active{
  transform: translateY(2px) scale(0.995);
  filter: brightness(0.97);
}

.dialogue-plate{
  will-change: transform;
}

/* =========================================================
   INTERNAL LAYOUT
========================================================= */

.dialogue-shell{
  outline: none;
  border-left: 2px solid rgba(255,255,255,0.18);
  padding-left: 14px;
}

.dialogue-id{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.dialogue-portrait{
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;

  border: 1px solid #7a7a7a;
  background-color: #2f2f2f;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    0 2px 6px rgba(0,0,0,0.4);
}

.dialogue-name{
  font-family: var(--font-label);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: #ffffff;
}

.dialogue-role{
  font-family: var(--font-data);
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
  color: #d6d2cb;
}

/* =========================================================
   TEXT AREA → SPEAKER GRILL
========================================================= */

.dialogue-text{
  margin-top: 14px;
  padding: 14px 12px;
  font-family: var(--font-body);
  line-height: 1.55;
  min-height: 64px;
  border-radius: 6px;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.10) 2px,
      transparent 2px,
      transparent 6px
    );

  border: 1px solid rgba(255,255,255,0.22);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.35);
}

.dialogue-prompt{
  margin-top: 12px;
  font-family: var(--font-data);
  font-size: 11px;
  opacity: 0.82;
  color: #e6e2da;
}

/* =========================================================
   STATUS LED
========================================================= */

.dialogue-led{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 12px;
  background: #8a8a8a;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 0 0 1px rgba(0,0,0,0.45);
}

.dialogue-shell.is-typing .dialogue-led{
  background: #f0c35a;
  box-shadow:
    0 0 10px rgba(240,195,90,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.35);
}

.dialogue-shell.is-complete .dialogue-led{
  background: #8fb58a;
  box-shadow:
    0 0 10px rgba(143,181,138,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.28);
}

/* =========================================================
   SIGNAL INTERFERENCE (SUBTLE)
========================================================= */

@keyframes commsFlicker{
  0% { opacity: 1; }
  50% { opacity: 0.96; }
  100% { opacity: 1; }
}

.dialogue-shell.is-typing .dialogue-text{
  animation: commsFlicker 260ms linear infinite;
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){
  .dialogue-plate{ transition: none !important; }
  .dialogue-plate:active{ transform: none !important; filter: none !important; }
  .dialogue-shell.is-typing .dialogue-text{ animation: none !important; }
}
/* Radio plate baseline: explicitly NOT a folder */
.radio-plate{
  margin: 0;                 /* don’t inherit plate spacing assumptions */
  padding: 0;                /* dialogue-plate controls padding */
  border: none;              /* dialogue-plate controls border */
  background: transparent;   /* dialogue-plate controls background */
  box-shadow: none;          /* dialogue-plate controls shadow */
}

/* Kill any leftover pseudo-elements from legacy styles */
.radio-plate::before,
.radio-plate::after{
  content: none !important;
  display: none !important;
}
/* =========================================================
   RADIO DEVICE — HARD SURFACE LOCK
   Prevent transparency bleed from layout containers
========================================================= */

.dialogue-plate{
  background-color: #3b3b3b !important; /* neutral radio grey */
  background-image: linear-gradient(
    180deg,
    #444 0%,
    #2f2f2f 100%
  ) !important;

  opacity: 1 !important;
  isolation: isolate; /* blocks parent blend/opacity */
}
/* =========================================================
   RADIO DEVICE — 3D GREY + SOFT INSET VIGNETTE
   Authoritative final surface
========================================================= */

.dialogue-plate{
  /* Base material */
  background-color: #4a4a4a !important;
  background-image:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 55%,
      rgba(0,0,0,0.25) 100%
    ),
    linear-gradient(
      180deg,
      #525252 0%,
      #3a3a3a 100%
    ) !important;

  /* Physical depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),   /* top lip */
    inset 0 -3px 6px rgba(0,0,0,0.55),      /* bottom cavity */
    inset 0 0 0 1px rgba(255,255,255,0.04), /* inner rim */
    0 10px 24px rgba(0,0,0,0.45),            /* lift */
    0 2px 0 rgba(0,0,0,0.6);                 /* hard base */

  border: 1px solid #2b2b2b;
  border-radius: 12px;

  opacity: 1 !important;
  isolation: isolate; /* blocks parent blending */
}

/* =========================================================
   SOFT EDGE VIGNETTE (DEPTH PERCEPTION)
========================================================= */

.dialogue-plate::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.28) 100%
    );

  mix-blend-mode: multiply;
}
/* =========================================================
   RADIO DEVICE — LIGHT GREY / 3D / CLEAN (AUTHORITATIVE)
   Overrides all previous dialogue-plate styling
========================================================= */

.dialogue-plate{
  isolation: isolate;
  position: relative;

  /* Light industrial grey casing */
  background:
    radial-gradient(
      120% 140% at 20% 10%,
      #f4f5f6 0%,
      #e6e7e9 45%,
      #d8dade 100%
    );

  border: 1px solid #b8bcc2;
  border-radius: 14px;
  padding: 20px 18px 22px;

  /* 3D depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -10px 18px rgba(0,0,0,0.08),
    0 18px 36px rgba(0,0,0,0.22);

  color: #2a2a2a;
}

/* Soft inset vignette */
.dialogue-plate::before{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  pointer-events: none;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.6),
    inset 0 0 22px rgba(0,0,0,0.08);
}

/* Remove antenna / folder / tab DNA */
.dialogue-plate::after{ display:none !important; }
.dialogue-shell::before{ content:none !important; }

/* =========================================================
   INTERNAL LAYOUT CLEANUP
========================================================= */

.dialogue-shell{
  outline: none;
  border-left: none !important;   /* 🔥 removes the weird vertical line */
  padding-left: 0 !important;
}

/* Header row */
.dialogue-id{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 12px;

  border-bottom: 1px solid rgba(0,0,0,0.12);
}

/* Portrait → looks like radio screen */
.dialogue-portrait{
  width: 56px;
  height: 56px;
  border-radius: 8px;

  background-color: #1c1f24;
  border: 1px solid #8e939a;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    inset 0 -4px 6px rgba(0,0,0,0.35);
}

/* Text identity */
.dialogue-name{
  font-family: var(--font-label);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: #1f1f1f;
}

.dialogue-role{
  font-family: var(--font-data);
  font-size: 11px;
  opacity: 0.65;
  margin-top: 2px;
}

/* =========================================================
   SPEAKER GRILL (TEXT AREA)
========================================================= */

.dialogue-text{
  margin-top: 14px;
  padding: 14px 14px;
  min-height: 64px;
  border-radius: 8px;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0.06),
      rgba(0,0,0,0.06) 2px,
      transparent 2px,
      transparent 6px
    );

  border: 1px solid #b7bbc1;

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.18);
}

/* =========================================================
   STATUS LED — REPOSITIONED + INTEGRATED
========================================================= */

.dialogue-led{
  width: 11px;
  height: 11px;
  border-radius: 50%;

  /* Lock LED into header rail */
  align-self: center;
  margin-left: 10px;

  background: #7d8a7d;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.5),
    0 0 0 1px rgba(0,0,0,0.35);
}

/* Idle */
.dialogue-shell.is-idle .dialogue-led{
  background: #9aa19a;
}

/* Typing (active transmission) */
.dialogue-shell.is-typing .dialogue-led{
  background: #6bcf8e;
  box-shadow:
    0 0 10px rgba(107,207,142,0.65),
    inset 0 0 0 1px rgba(255,255,255,0.65),
    0 0 0 1px rgba(0,0,0,0.35);
}

/* Complete */
.dialogue-shell.is-complete .dialogue-led{
  background: #5fae77;
  box-shadow:
    0 0 8px rgba(95,174,119,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.55);
}

/* =========================================================
   PRESS FEEL (SUBTLE)
========================================================= */

.dialogue-plate:active{
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -6px 12px rgba(0,0,0,0.10),
    0 10px 20px rgba(0,0,0,0.22);
}
/* =========================================================
   RADIO TEXT — FORCE WHITE FOR CONTRAST
========================================================= */

.dialogue-plate,
.dialogue-plate *{
  color: #ffffff !important;
}

.dialogue-role{
  color: rgba(255,255,255,0.78) !important;
}

.dialogue-prompt{
  color: rgba(255,255,255,0.82) !important;
}
/* =========================================================
   FACEPLATE ENGRAVING (SUBTLE)
========================================================= */

.dialogue-plate::after{
  content: "RIS // RADIO LINK";
  position: absolute;
  left: 18px;
  top: 10px;
  pointer-events: none;

  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  /* engraved effect */
  color: rgba(255,255,255,0.28);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.35),     /* lower shadow */
    0 -1px 0 rgba(255,255,255,0.10); /* upper bevel */
  opacity: 0.85;
}
/* =========================================================
   LED PULSE CADENCE (RADIO-ACCURATE)
========================================================= */

@keyframes ledPulse{
  /* quick pop + brief decay + quiet gap */
  0%   { transform: scale(1);   filter: brightness(1);   opacity: 0.9; }
  6%   { transform: scale(1.08);filter: brightness(1.35);opacity: 1; }
  18%  { transform: scale(1.00);filter: brightness(1.10);opacity: 0.95; }
  36%  { transform: scale(1.03);filter: brightness(1.20);opacity: 1; }
  60%  { transform: scale(1.00);filter: brightness(1.00);opacity: 0.85; }
  100% { transform: scale(1.00);filter: brightness(1.00);opacity: 0.85; }
}

/* Only pulse while typing */
.dialogue-shell.is-typing .dialogue-led{
  animation: ledPulse 1.05s ease-in-out infinite;
  transform-origin: center;
}
/* =========================================================
   SPEAKER GRILL DEPTH SHIFT (WHILE TYPING)
========================================================= */

@keyframes grillShift{
  0%   { box-shadow: inset 0 2px 6px rgba(0,0,0,0.20); transform: translateY(0); }
  25%  { box-shadow: inset 0 3px 8px rgba(0,0,0,0.28); transform: translateY(0.3px); }
  55%  { box-shadow: inset 0 1px 5px rgba(0,0,0,0.18); transform: translateY(-0.2px); }
  100% { box-shadow: inset 0 2px 6px rgba(0,0,0,0.20); transform: translateY(0); }
}

.dialogue-shell.is-typing .dialogue-text{
  animation: grillShift 260ms linear infinite;
}
.dialogue-text{
  background-color: rgba(0,0,0,0.22) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
/* =========================================================
   FACEPLATE ENGRAVING — OPERATOR LINK
========================================================= */

.dialogue-plate::after{
  content: "RIS // OPERATOR LINK";
  position: absolute;
  left: 18px;
  top: 10px;
  pointer-events: none;

  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.28);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.35),
    0 -1px 0 rgba(255,255,255,0.10);
  opacity: 0.9;
}

/* =========================================================
   TX UI (badge + states)
========================================================= */

.comms-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 6px;
}

.tx-badge{
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  padding: 4px 10px;
  border-radius: 999px;

  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,255,255,0.18);

  opacity: 0.75;
  transform: translateY(-1px);
}

/* =========================================================
   LED pulse cadence (radio-accurate)
========================================================= */

@keyframes ledPulse{
  0%   { transform: scale(1);   filter: brightness(1);   opacity: 0.9; }
  6%   { transform: scale(1.08);filter: brightness(1.35);opacity: 1; }
  18%  { transform: scale(1.00);filter: brightness(1.10);opacity: 0.95; }
  36%  { transform: scale(1.03);filter: brightness(1.22);opacity: 1; }
  60%  { transform: scale(1.00);filter: brightness(1.00);opacity: 0.85; }
  100% { transform: scale(1.00);filter: brightness(1.00);opacity: 0.85; }
}

.dialogue-shell.is-typing .dialogue-led{
  animation: ledPulse 1.05s ease-in-out infinite;
  transform-origin: center;
}

/* =========================================================
   Speaker grill depth shift while typing
========================================================= */

@keyframes grillShift{
  0%   { box-shadow: inset 0 2px 6px rgba(0,0,0,0.20); transform: translateY(0); }
  25%  { box-shadow: inset 0 3px 9px rgba(0,0,0,0.30); transform: translateY(0.3px); }
  55%  { box-shadow: inset 0 1px 5px rgba(0,0,0,0.18); transform: translateY(-0.2px); }
  100% { box-shadow: inset 0 2px 6px rgba(0,0,0,0.20); transform: translateY(0); }
}

.dialogue-shell.is-typing .dialogue-text{
  animation: grillShift 260ms linear infinite;
}

/* =========================================================
   TX state visuals (tiny, clean)
========================================================= */

.dialogue-shell.tx-idle .tx-badge{
  opacity: 0.72;
}

.dialogue-shell.tx-sending .tx-badge{
  opacity: 1;
  border-color: rgba(107,207,142,0.35);
  box-shadow: 0 0 0 3px rgba(107,207,142,0.12);
}

@keyframes txPing{
  0% { transform: translateY(-1px) scale(1); }
  35% { transform: translateY(-1px) scale(1.06); }
  100% { transform: translateY(-1px) scale(1); }
}

.dialogue-shell.tx-sent .tx-badge{
  opacity: 1;
  border-color: rgba(107,207,142,0.6);
  box-shadow: 0 0 12px rgba(107,207,142,0.35);
  animation: txPing 240ms ease-out 1;
}

.dialogue-shell.tx-error .tx-badge{
  opacity: 1;
  border-color: rgba(255,120,120,0.55);
  box-shadow: 0 0 12px rgba(255,120,120,0.22);
}

/* Reduced motion respects your system */
@media (prefers-reduced-motion: reduce){
  .dialogue-shell.is-typing .dialogue-led{ animation: none !important; }
  .dialogue-shell.is-typing .dialogue-text{ animation: none !important; }
  .dialogue-shell.tx-sent .tx-badge{ animation: none !important; }
}
/* =========================================================
   TX COMMS INPUT — THEME-RESPECTFUL (ULTRA CLEAN)
   Paste this at the END of core/ui/dialogue/dialogue.css
   (It will override older comms styles without breaking anything)
========================================================= */

/* Block spacing inside the radio */
.comms-box{
  margin-top: 14px;
}

/* Label + TX badge row */
.comms-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 0 0 8px;
}

/* Engraved label */
.comms-label{
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
  opacity: 0.9;
}

/* TX pill — subtle, readable */
.tx-badge{
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  padding: 4px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);

  color: rgba(255,255,255,0.80);
  opacity: 0.85;
  transform: translateY(-1px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 6px 14px rgba(0,0,0,0.18);
}

/* Input — “radio buffer window” (not a generic textarea) */
.comms-input{
  width: 100%;
  box-sizing: border-box;

  /* muted “glass” on grey faceplate */
  background:
    radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.10), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.28));
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;

  padding: 11px 12px;
  font-family: var(--font-data);
  font-size: 12px;
  line-height: 1.45;

  color: #fff; /* ✅ high contrast */
  outline: none;
  resize: vertical;

  /* inset + vignette depth */
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,0.34),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 10px 22px rgba(0,0,0,0.20);
}

/* Soft inner vignette */
.comms-input{
  background-blend-mode: screen, normal;
}

.comms-input::placeholder{
  color: rgba(255,255,255,0.58);
}

/* Focus — “armed to transmit” */
.comms-input:focus{
  border-color: rgba(122, 205, 148, 0.55);
  box-shadow:
    0 0 0 3px rgba(122, 205, 148, 0.16),
    inset 0 2px 10px rgba(0,0,0,0.34),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 12px 26px rgba(0,0,0,0.22);
}

/* TX states (ties into your boot.js state toggles) */
.dialogue-shell.tx-sending .comms-input{
  border-color: rgba(122, 205, 148, 0.35);
  box-shadow:
    0 0 0 3px rgba(122, 205, 148, 0.10),
    inset 0 2px 10px rgba(0,0,0,0.34),
    0 12px 26px rgba(0,0,0,0.22);
}

.dialogue-shell.tx-sent .comms-input{
  border-color: rgba(122, 205, 148, 0.60);
  box-shadow:
    0 0 0 3px rgba(122, 205, 148, 0.16),
    0 0 14px rgba(122, 205, 148, 0.18),
    inset 0 2px 10px rgba(0,0,0,0.34),
    0 12px 26px rgba(0,0,0,0.22);
}

.dialogue-shell.tx-error .comms-input{
  border-color: rgba(255, 140, 140, 0.58);
  box-shadow:
    0 0 0 3px rgba(255, 140, 140, 0.12),
    0 0 14px rgba(255, 140, 140, 0.16),
    inset 0 2px 10px rgba(0,0,0,0.34),
    0 12px 26px rgba(0,0,0,0.22);
}

/* Reduced motion: keep clean */
@media (prefers-reduced-motion: reduce){
  .comms-input,
  .tx-badge{
    box-shadow:
      inset 0 2px 10px rgba(0,0,0,0.34),
      0 10px 22px rgba(0,0,0,0.20);
  }
}
/* =========================================================
   HARD OVERRIDE: TX input visibility (wins vs components.css)
   Paste at END of dialogue.css
========================================================= */

.dialogue-plate .comms-input{
  color: #ffffff !important;
  caret-color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* fixes some Chrome rendering cases */
}

.dialogue-plate .comms-input::placeholder{
  color: rgba(255,255,255,0.58) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.58) !important;
}

.dialogue-plate .comms-input{
  background:
    radial-gradient(120% 140% at 20% 10%, rgba(255,255,255,0.10), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.28)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}