/* World chat side panel (js/chat.js). Sizes use the landscape frame units (--u, --fw, --fh). */
.ch-wrap { position: absolute; inset: 0; z-index: 800; background: rgba(12, 18, 36, 0); transition: background 0.25s; }
.ch-wrap.on { background: rgba(12, 18, 36, 0.35); }
.ch-wrap.hidden { display: none; }
.ch-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(calc(var(--u) * 96), calc(var(--fw) - 24px)); display: flex; flex-direction: column;
  background: #f4f6fb; box-shadow: -10px 0 40px rgba(10, 20, 50, 0.25); border-radius: calc(var(--u) * 4) 0 0 calc(var(--u) * 4);
  transform: translateX(105%); transition: transform 0.25s cubic-bezier(.2, .9, .3, 1); }
.ch-wrap.on .ch-panel { transform: none; }
.ch-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 3) calc(var(--u) * 3.4) calc(var(--u) * 2.4);
  border-bottom: 1px solid rgba(30, 40, 80, 0.08); background: #fff; border-radius: calc(var(--u) * 4) 0 0 0; }
.ch-head b { display: block; font-size: calc(var(--u) * 3.6); color: #1f2a44; }
.ch-head small { font-size: calc(var(--u) * 2.2); color: #8a93a6; }
.ch-x { width: calc(var(--u) * 8); aspect-ratio: 1; border-radius: 50%; background: #eef1f7; font-size: calc(var(--u) * 4.4); line-height: 1; color: #4a5470; flex: none; }
.ch-list { flex: 1; overflow-y: auto; padding: calc(var(--u) * 2.4) calc(var(--u) * 2.6); display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); overscroll-behavior: contain; }
.ch-empty { margin: auto; color: #8a93a6; font-size: calc(var(--u) * 2.6); text-align: center; }
.ch-msg { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.4); max-width: 92%; }
.ch-msg.ch-mine { align-self: flex-end; flex-direction: row-reverse; }
.ch-av { flex: none; width: calc(var(--u) * 7); aspect-ratio: 1; border-radius: 50%; background: #dfe5f1 center 24% / 280% no-repeat; box-shadow: 0 0 0 2px #fff; }
.ch-bub { min-width: 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 0.8);
  background: #fff; box-shadow: 0 2px 8px rgba(30, 40, 80, 0.06); }
.ch-msg.ch-mine .ch-bub { background: #2f6bff; color: #fff; border-radius: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 0.8) calc(var(--u) * 3); }
.ch-meta { display: flex; align-items: baseline; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2.1); margin-bottom: calc(var(--u) * 0.4); white-space: nowrap; }
.ch-meta b { font-size: calc(var(--u) * 2.4); color: #2f6bff; overflow: hidden; text-overflow: ellipsis; }
.ch-meta em { font-style: normal; color: #8a93a6; font-weight: 700; }
.ch-meta time { color: #a3abbd; margin-left: auto; }
.ch-msg.ch-mine .ch-meta b, .ch-msg.ch-mine .ch-meta em, .ch-msg.ch-mine .ch-meta time { color: rgba(255, 255, 255, 0.85); }
.ch-bub p { margin: 0; font-size: calc(var(--u) * 2.7); line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; }
.ch-foot { padding: calc(var(--u) * 2) calc(var(--u) * 2.6) calc(var(--u) * 2.6); background: #fff; border-top: 1px solid rgba(30, 40, 80, 0.08); }
.ch-form { display: flex; gap: calc(var(--u) * 1.4); }
.ch-in { flex: 1; min-width: 0; padding: calc(var(--u) * 1.8) calc(var(--u) * 2.6); border-radius: 999px; border: 1px solid #dfe4ee; background: #f4f6fb; font: inherit; font-size: calc(var(--u) * 2.7); }
.ch-in:focus { outline: none; border-color: #2f6bff; background: #fff; }
.ch-send { flex: none; width: calc(var(--u) * 7.6); aspect-ratio: 1; border-radius: 50%; background: #2f6bff; display: grid; place-items: center; }
.ch-send svg { width: 50%; fill: #fff; }
.ch-note { display: none; margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 2.2); color: #e0483d; }
.ch-note.on { display: block; }
.ch-signin { display: block; padding: calc(var(--u) * 2) 0; border-radius: 999px; background: #2f6bff; color: #fff; text-align: center; font-weight: 700; font-size: calc(var(--u) * 2.8); text-decoration: none; }