/* messaging.css — Gen-3 FRLG chat overlay for window.__junoDM.
   Mirrors the guide-panel language (dark GBA-screen backdrop + gen3-frame1
   paper window from styles.css). All-caps PokeText chrome for headers,
   readable PokeDialogue body. Mobile-first: composer is pinned to the panel
   base and the message list scrolls, so the on-screen keyboard never covers
   the input. ADDITIVE — scoped entirely under .juno-dm. */

.juno-dm {
  --u: 2px;
  position: absolute;
  inset: 0;
  z-index: 70; /* above the guide panels (60) — a chat is a focused modal */
  display: flex;
  padding: clamp(8px, 2vw, 20px);
  overflow: hidden;
  color: #404040;
  font-family: 'PokeDialogue', 'PokeText', "Courier New", monospace;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .05) 3px 4px),
    linear-gradient(180deg,
      #000 0 4%,
      #7a1818 4% 9%,
      #10283A 9% 91%,
      #7a1818 91% 96%,
      #000 96% 100%);
}

.juno-dm[hidden] { display: none; }

.juno-dm button:focus-visible,
.juno-dm input:focus-visible {
  outline: 3px solid #ffcd4c;
  outline-offset: 2px;
}

.dm-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  height: 100%;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 18px);
  overflow: hidden; /* the list scrolls, not the panel — keyboard-safe */
}

.dm-masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 3px double #B8B8B0;
}

.dm-masthead-text { min-width: 0; }

.dm-kicker {
  margin: 0 0 4px;
  color: #C74637;
  font: 800 9px/1.2 'PokeText', ui-monospace, monospace;
  letter-spacing: .18em;
}

.dm-title {
  margin: 0;
  overflow: hidden;
  color: #424242;
  font-family: 'PokeText', ui-monospace, monospace;
  font-size: clamp(16px, 3vw, 24px);
  line-height: 1.15;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #D0D0C8;
}

.dm-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  color: #F8F8F8;
  font: 900 24px/26px system-ui, sans-serif;
  background: #E82010;
  border: 2px solid #293131;
  border-radius: 50%;
  box-shadow: 2px 2px 0 #293131;
  cursor: pointer;
}

.dm-status {
  margin: 8px 0 0;
  padding: 5px 9px;
  color: #8B6420;
  font-size: 11px;
  letter-spacing: .02em;
  background: #FCEFC7;
  border: 1px solid #E0C97A;
  border-radius: 4px;
}

.dm-list {
  flex: 1 1 auto;
  margin: 10px 0;
  padding: 4px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-color: #7373AC #DED5DE;
}

.dm-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 86%;
  align-self: flex-start;
  padding: 7px 10px;
  background: #F0EFEA;
  border: 2px solid #C8C8C0;
  border-radius: 8px;
}

.dm-row-me {
  align-self: flex-end;
  background: #E6F0FF;
  border-color: #9CC0EC;
}

.dm-row-who {
  color: #7A3E8C;
  font: 700 9px/1.2 'PokeText', ui-monospace, monospace;
  letter-spacing: .1em;
}

.dm-row-me .dm-row-who { color: #2A4B7C; }

.dm-row-text {
  color: #303030;
  font-size: 14px;
  line-height: 1.35;
  /* literal text (set via textContent) — wrap long/pasted payloads safely */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dm-composer {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 3px double #B8B8B0;
}

.dm-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  color: #303030;
  font-family: 'PokeDialogue', "Courier New", monospace;
  font-size: 15px; /* >=16px-ish avoids iOS zoom while keeping GBA feel */
  background: #FFFFFF;
  border: 2px solid #626294;
  border-radius: 6px;
}

.dm-send {
  flex: 0 0 auto;
  padding: 0 16px;
  color: #F8F8F8;
  font: 800 12px/1 'PokeText', ui-monospace, monospace;
  letter-spacing: .08em;
  background: #3068C8;
  border: 2px solid #293131;
  border-radius: 6px;
  box-shadow: 2px 2px 0 #293131;
  cursor: pointer;
}

.dm-send:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #293131; }

@media (max-width: 420px) {
  .dm-panel { width: 100%; padding: 10px; }
  .dm-row { max-width: 92%; }
}