/* One-on-one chat window: two characters facing each other across the log.

   Fixed size and draggable. A window that grows with its content shifts under the
   cursor as messages arrive, and one pinned to the middle of the screen sits on
   top of the fight. */

.dm-window {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 2147483100;
  width: 600px;
  height: 430px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: rgba(12, 12, 20, .97);
  border: 1px solid rgba(240, 171, 252, .34);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .62), 0 0 40px rgba(240, 171, 252, .18);
  color: #eef2ff;
  font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}
/* Once dragged, left/top are authoritative and the centring transform is dropped
   by the JS — this only stops the default `bottom` fighting the new position. */
.dm-window.is-placed { bottom: auto; }
.dm-window[hidden] { display: none; }

.dm-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: rgba(240, 171, 252, .10);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  cursor: grab;
  touch-action: none;          /* so a drag does not scroll the page on touch */
  user-select: none;
}
.dm-head:active { cursor: grabbing; }
.dm-title { color: #f0abfc; font-size: 14px; }
.dm-title small { color: #9fb6c9; font-weight: 500; font-size: 11px; }
.dm-close {
  border: 0;
  border-radius: 7px;
  padding: 2px 9px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
}

/* Characters flank the log. They are decoration, so they shrink away first when
   the window is narrow — the conversation is the part that must stay usable. */
.dm-body {
  flex: 1;
  min-height: 0;              /* lets the log scroll instead of stretching the window */
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
}
.dm-portrait {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #9fb6c9;
  font-size: 10px;
  font-weight: 500;
}
.dm-portrait-name {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The frame. The stage inside is left at the renderer's own 280x430 geometry and
   scaled to fit by JS, which MEASURES the painted art — the rig and the legacy
   sprite draw at different internal scales, so a fixed zoom cropped people's
   legs off. */
.dm-char {
  position: relative;
  flex: 1;
  width: 132px;
  min-height: 0;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 78%, rgba(240, 171, 252, .16), rgba(255, 255, 255, .03) 68%);
  overflow: hidden;
}
.dm-char .exp-char-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 280px;
  height: 430px;
  transform-origin: 0 0;
  pointer-events: none;
}
/* The peer faces inward, but the flip is applied by fitCharacter as part of the
   stage transform — NOT here. A mirror on the frame inverts the axis the fit
   translation is computed in, which pushed the peer's body out of its own box. */

.dm-log {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* scrolling the log must not scroll the page */
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dm-log::-webkit-scrollbar { width: 8px; }
.dm-log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; }
.dm-log::-webkit-scrollbar-track { background: transparent; }

.dm-msg {
  align-self: flex-start;
  flex: 0 0 auto;
  max-width: 82%;
  padding: 6px 9px;
  border-radius: 12px 12px 12px 3px;
  background: rgba(255, 255, 255, .10);
  word-break: break-word;
}
.dm-msg.is-mine {
  align-self: flex-end;
  border-radius: 12px 12px 3px 12px;
  background: linear-gradient(180deg, rgba(240, 171, 252, .30), rgba(192, 132, 252, .26));
}
.dm-msg-text { display: block; font-weight: 500; }
.dm-msg-time { display: block; margin-top: 2px; color: #9fb6c9; font-size: 9px; font-weight: 500; }

/* Someone leaving. Centred and unattributed so it cannot be mistaken for either
   person speaking. */
.dm-sys {
  align-self: center;
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #9fb6c9;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}
.dm-empty { margin: auto; color: #9fb6c9; font-size: 12px; font-weight: 500; }

.dm-foot { flex: 0 0 auto; display: flex; gap: 6px; padding: 0 12px 8px; }
.dm-input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #eef2ff;
  font: 600 13px/1 system-ui, sans-serif;
}
.dm-input:disabled { opacity: .45; cursor: not-allowed; }
.dm-foot button {
  border: 0;
  border-radius: 9px;
  padding: 9px 16px;
  background: linear-gradient(180deg, #d946ef, #a21caf);
  color: #fff;
  font: 700 12px/1 system-ui, sans-serif;
  cursor: pointer;
}
.dm-foot button:disabled { opacity: .4; cursor: not-allowed; }
.dm-foot button:not(:disabled):hover { filter: brightness(1.12); }

/* The remaining-messages counter. It is a live readout of the server's cap, not a
   client-side rule — the server refuses regardless of what this says. */
.dm-note { flex: 0 0 auto; padding: 0 12px 9px; color: #64748b; font-size: 10px; font-weight: 500; }
.dm-note.is-capped { color: #fbbf24; }

@media (max-width: 720px) {
  .dm-window { width: calc(100vw - 24px); height: 340px; }
  /* Drop the portraits before the log: a 90px-wide conversation is unusable. */
  .dm-portrait { display: none; }
}