/* Play-test 9 (stream D-UI): windows you can drag (X3), the barber window never scrolls sideways (X4), the character
   list with Delete (X6), the admin's Online players (X1), chat lines that wrap. Listed in index.html after pt8.css. */

/* ---- X3: a window you moved keeps its own left / top ---- */
.tv-panel.placed, .tv-panel.centered.placed { right: auto; bottom: auto; transform: none; }
.bag.placed { right: auto; bottom: auto; transform: none; }
.tv-drag { cursor: grab; user-select: none; touch-action: none; }
.dragging .tv-drag { cursor: grabbing; }
.dragging { transition: none !important; }
body.sheet-with-bag .bag.placed, body.sheet-with-bag .tv-panel.sheet-panel.placed { right: auto; }
html[data-layout="phone"] .tv-drag { cursor: default; touch-action: auto; }
@media (max-width: 720px) { .tv-drag { cursor: default; } }

/* ---- X4: the appearance / barber window ---- */
.appearance-panel .tvp-body, .appearance-panel .ap-body { overflow-x: hidden; }
.appearance-panel .ap-row { min-width: 0; }
.appearance-panel .ap-row select { min-width: 0; }
.appearance-panel .ap-row .chips, .appearance-panel .ap-swatches { min-width: 0; flex: 1 1 0; }
.appearance-panel .ap-foot { flex-wrap: wrap; }
.appearance-panel .ap-bill { overflow-wrap: anywhere; }

/* ---- X6: your characters ---- */
.char-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px; max-height: min(42vh, 330px); overflow-y: auto; padding-right: 4px; }
.char-row { display: flex; align-items: center; gap: 6px; flex: none; }
.char-row .chip.char { flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-align: left; }
.char-row .char-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-row .char-del { flex: none; color: var(--ink-faint); }
.char-row .char-del:hover { color: #ff9a8a; border-color: #a0483a; }
.char-limit { margin: 6px 0 0; color: var(--ink-faint); }
.char-limit.full { color: var(--warn, #e0a050); }
.char-said { margin: 2px 0 0; color: var(--good, #7fe08a); }
.char-said:empty, .char-limit:empty { display: none; }
#new-char:disabled { opacity: 0.5; cursor: not-allowed; }
.tv-confirm.char-delete { position: fixed; left: 50% !important; right: auto !important; bottom: auto !important; top: max(8px, min(22vh, calc(100vh - 330px))) !important; transform: translateX(-50%) !important; z-index: 1000; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - 16px); overflow-y: auto; pointer-events: auto; display: block; }
.char-delete strong { display: block; font-family: var(--serif); color: var(--gold-hi); font-size: 17px; margin-bottom: 4px; }
.char-delete label { display: block; margin: 8px 0 2px; }
.char-delete .label { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 3px; }
.char-delete input { width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--edge-strong, #6a5230); background: rgba(0, 0, 0, 0.45); color: var(--ink, #efe6d0); font: inherit; }
.char-delete input::placeholder { color: var(--ink-faint, #8a7f6a); opacity: 0.6; }
.char-delete input:focus { outline: 2px solid var(--gold, #d9b26a); outline-offset: 1px; }
.char-delete p { margin: 4px 0; }
.char-delete .note:empty { display: none; }
.char-delete .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.char-delete button.danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- X1: who is online (admins) ---- */
.on-wrap { max-height: min(56vh, 460px); overflow: auto; }
.on-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.on-table th { position: sticky; top: 0; text-align: left; padding: 3px 8px; background: var(--panel, #1c1610); border-bottom: 1px solid var(--edge); font-weight: 600; }
.on-table td { padding: 4px 8px; border-bottom: 1px solid rgba(217, 178, 106, 0.1); vertical-align: baseline; }
.on-table tbody tr:hover { background: rgba(217, 178, 106, 0.07); }
.on-sort { color: var(--ink-dim); } .on-sort.on { color: var(--gold-hi); }
.on-name { font-weight: 600; } .on-level { text-align: right; width: 3.5em; }
.on-tag, .on-acct { margin-left: 6px; font-weight: 400; font-size: 11px; color: var(--ink-faint); } .on-tag { color: var(--gold); }
.on-at { font-size: 12px; color: var(--ink-faint); }
.rp-env { color: var(--ink-faint); }

/* ---- chat: a long system line (the message of the day) wraps, whole ---- */
.chat-log p { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }

html[data-layout="phone"] .char-row .char-del, html[data-layout="phone"] .on-sort, html[data-layout="phone"] .char-delete button { min-height: var(--tap, 44px); min-width: var(--tap, 44px); }
html[data-layout="phone"] .on-table td { padding: 10px 6px; }
@media (max-width: 520px) { .on-cls, .on-table th:nth-child(4) { display: none; } .on-acct { display: block; margin-left: 0; } }
html[data-layout="phone"] .char-delete input { min-height: var(--tap, 44px); }

/* wrap-up (report S#66): the title offers this browser's guest characters to the account you signed in to */
.guest-offer { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--gold, #c9a14a); border-radius: 8px; background: rgba(201, 161, 74, 0.08); }
.guest-offer p { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.guest-offer .row { display: flex; gap: 8px; flex-wrap: wrap; }
.guest-offer .note { margin: 6px 0 0; }