/* Chat de sala: fijo a la derecha en PC, hoja desde abajo en móvil. © 2026 Extun. */
.room { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.chat { position: sticky; top: 12px; height: calc(var(--vh) - 40px); max-height: 760px; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 10px 24px -18px rgba(22,33,58,.35); }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1.5px solid var(--grid); }
.chat-head h3 { font-size: 21px; flex: 1; }
.chat-head .close { display: none; }
.chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; background-image: linear-gradient(var(--grid) 1px, transparent 1px); background-size: 100% 26px; background-position: 0 -1px; }
.chat-empty { margin: auto; text-align: center; color: var(--ink-soft); font-size: 14px; background: var(--sheet); padding: 8px 12px; border-radius: 8px; }
.cm { display: grid; grid-template-columns: 30px 1fr; gap: 8px; margin-top: 8px; }
.cm.cont { margin-top: 0; }
.cm.cont .av, .cm.cont .who { visibility: hidden; height: 0; }
.cm.cont .av { height: 0; }
.cm .who { font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.cm .who time { font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.cm .who button { all: unset; cursor: pointer; }
.cm .who button:hover { text-decoration: underline; }
.cm .tx { background: #fff; border: 1px solid var(--grid); border-radius: 4px 12px 12px 12px; padding: 6px 10px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 15px; line-height: 1.4; }
.cm.me .tx { background: color-mix(in srgb, var(--game, var(--pen)) 12%, #fff); border-color: color-mix(in srgb, var(--game, var(--pen)) 30%, #fff); }
.cm.hit .tx { background: var(--warn-bg); border-color: #e9cf5a; }
.mention { font-weight: 700; background: linear-gradient(transparent 55%, var(--hl) 55%); }
.sysline { font-size: 13px; color: var(--ink-soft); display: flex; gap: 7px; align-items: center; margin: 7px 0 2px; background: var(--sheet); width: fit-content; max-width: 100%; padding: 0 6px 0 0; border-radius: 6px; }
.sysline .ico { color: var(--ink-faint); }
.stampmsg { display: flex; align-items: center; gap: 8px; margin: 7px 0 2px; font-size: 13px; background: var(--sheet); width: fit-content; padding-right: 8px; border-radius: 99px; }
.stampmsg .st { font-family: var(--hand); font-weight: 700; font-size: 17px; padding: 0 10px; border-radius: 99px; background: var(--hl); color: var(--ink); transform: rotate(-2deg); }
.chat-jump { position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px; z-index: 2; border: 0; border-radius: 99px; padding: 6px 14px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }
.typing { height: 22px; padding: 0 16px; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; }
.stamps { display: flex; gap: 6px; padding: 4px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.stamps::-webkit-scrollbar { display: none; }
.stamps button { flex: none; border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 3px 12px; font-family: var(--hand); font-weight: 700; font-size: 16px; line-height: 1.4; }
.stamps button:hover { background: var(--hl); border-color: var(--hl); }
.chat-form { display: flex; gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--grid); background: var(--sheet); }
.chat-form .input { min-height: 44px; font-size: 16px; }
.chat-off { padding: 14px 16px; font-size: 14px; color: var(--ink-soft); border-top: 1.5px solid var(--grid); }
.chat-fab { display: none; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--margin); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }

@media (max-width: 1020px) {
  .room { grid-template-columns: minmax(0, 1fr); }
  .chat { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100dvh); max-height: none; z-index: 60; border-radius: 0; border: 0; transform: translateY(102%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  .chat.open { transform: none; visibility: visible; transition: transform .22s ease; }
  .chat-head .close { display: inline-grid; }
  .chat-fab { display: inline-flex; position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; min-height: 50px; padding: 0 18px; border-radius: 25px; border: 0; background: var(--ink); color: #fff; font-weight: 600; align-items: center; gap: 8px; box-shadow: 0 10px 24px -8px rgba(22,33,58,.6); }
  .chat-fab .badge { position: absolute; top: -6px; right: -4px; }
  .chat-jump { bottom: 128px; }
}
.chat-toggle { display: none; position: relative; }
@media (max-width: 1020px) { .chat-toggle { display: inline-flex; } .chat-toggle .badge { position: absolute; top: -7px; right: -6px; } }