/* Candy-style DM chat panel shared by /friends and /games (dm-panel.js). */

.oto-dm-panel {
    --dm-ink: var(--gp-ink, #4a3a55);
    --dm-muted: var(--gp-muted, #8a7d95);
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 8800; /* under the friend card overlay (9000) */
    width: min(360px, calc(100vw - 24px));
    height: min(500px, calc(100vh - 90px));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    color: var(--dm-ink);
    background:
        radial-gradient(circle at 10% 4%, rgba(155, 217, 255, 0.22), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(255, 111, 174, 0.16), transparent 26%),
        #fff;
    box-shadow: 0 24px 64px rgba(74, 58, 85, 0.32), 0 8px 18px rgba(74, 58, 85, 0.14);
    font-family: inherit;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 180ms ease, transform 200ms cubic-bezier(0.34, 1.35, 0.5, 1);
}

.oto-dm-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }
.oto-dm-panel[hidden] { display: none !important; }

.oto-dm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px 14px;
    border-bottom: 1px solid rgba(74, 58, 85, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.oto-dm-head-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 900;
    overflow: hidden;
}

.oto-dm-head-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oto-dm-head-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfc4dc;
}

.oto-dm-head-dot.online { background: #35d07f; }

.oto-dm-icon-btn {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(74, 58, 85, 0.1);
    border-radius: 50%;
    color: var(--dm-muted);
    background: rgba(243, 236, 250, 0.9);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.oto-dm-icon-btn:hover { color: var(--dm-ink); background: #f3ecfa; transform: translateY(-1px); }
.oto-dm-icon-btn:active { transform: scale(0.92); }
.oto-dm-icon-btn:focus-visible { outline: 3px solid #9bd9ff; outline-offset: 2px; }
.oto-dm-icon-btn[hidden] { display: none !important; }

.oto-dm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px;
}

/* ── Conversation list ── */

.oto-dm-list { display: flex; flex-direction: column; gap: 4px; }

.oto-dm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 140ms ease;
}

.oto-dm-row:hover { background: rgba(155, 217, 255, 0.16); }
.oto-dm-row:focus-visible { outline: 3px solid #9bd9ff; outline-offset: -2px; }

.oto-dm-avatar {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: visible;
}

.oto-dm-avatar img,
.oto-dm-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-sizing: border-box;
    background: linear-gradient(135deg, #9bd9ff, #ff6fae);
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(74, 58, 85, 0.18);
}

.oto-dm-avatar .oto-dm-online-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #cfc4dc;
    display: none;
}

.oto-dm-avatar.online .oto-dm-online-dot { display: block; background: #35d07f; }

.oto-dm-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.oto-dm-row-name {
    font-weight: 800;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oto-dm-row-preview {
    color: var(--dm-muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oto-dm-row.has-unread .oto-dm-row-preview { color: var(--dm-ink); font-weight: 700; }

.oto-dm-unread-badge {
    flex: none;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6fae, #ff4d94);
    color: #fff;
    font-size: 11.5px;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(255, 77, 148, 0.35);
}

.oto-dm-empty {
    margin: 26px 10px;
    color: var(--dm-muted);
    font-size: 13.5px;
    text-align: center;
    line-height: 1.5;
}

/* ── Thread ── */

.oto-dm-thread { display: flex; flex-direction: column; gap: 3px; }

/* Scroll-up pagination sentinel: keeps its height whether the label shows or
   not, so toggling it never shifts the prepend anchor. */
.oto-dm-load-older {
    align-self: center;
    margin: 2px 0 6px;
    color: var(--dm-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    visibility: hidden;
}

.oto-dm-load-older.is-loading { visibility: visible; }

.oto-dm-bubble {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 18px;
    font-size: 13.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.oto-dm-bubble.theirs {
    align-self: flex-start;
    background: #f3ecfa;
    color: var(--dm-ink);
    border-bottom-left-radius: 6px;
}

.oto-dm-bubble.mine {
    align-self: flex-end;
    background: linear-gradient(135deg, #6ec1ff, #4da3f5);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.oto-dm-bubble.mine.pending { opacity: 0.6; }

.oto-dm-time {
    align-self: center;
    margin: 8px 0 4px;
    color: var(--dm-muted);
    font-size: 11px;
    font-weight: 700;
}

/* Auto-translate caption under incoming bubbles */
.oto-dm-trans {
    align-self: flex-start;
    margin: 1px 0 2px 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dm-muted);
    font: inherit;
    font-size: 10.5px;
    font-weight: 800;
}

button.oto-dm-trans { cursor: pointer; }

button.oto-dm-trans:hover,
button.oto-dm-trans:focus-visible {
    color: var(--dm-ink);
    text-decoration: underline;
    outline: none;
}

/* ── Composer ── */

.oto-dm-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(74, 58, 85, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

.oto-dm-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 14px;
    border: 1.5px solid rgba(74, 58, 85, 0.14);
    border-radius: 999px;
    background: #fff;
    color: var(--dm-ink);
    font: inherit;
    font-size: 13.5px;
}

.oto-dm-input:focus { outline: none; border-color: #9bd9ff; box-shadow: 0 0 0 3px rgba(155, 217, 255, 0.3); }

.oto-dm-send {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6fae, #ff4d94);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 77, 148, 0.32);
    transition: transform 140ms ease, filter 140ms ease;
}

.oto-dm-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.oto-dm-send:active:not(:disabled) { transform: scale(0.94); }
.oto-dm-send:disabled { opacity: 0.55; cursor: default; }
.oto-dm-send:focus-visible { outline: 3px solid #9bd9ff; outline-offset: 2px; }

.oto-dm-error {
    padding: 0 14px 8px;
    color: #d5455c;
    font-size: 12px;
    font-weight: 700;
}

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

/* ── New-message toasts (top-center, like friend-request cards) ── */

#otoDmToasts {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 52px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: min(340px, 86vw);
}

.oto-dm-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    background: #fff;
    color: var(--gp-ink, #4a3a55);
    box-shadow: 0 12px 32px rgba(74, 58, 85, 0.26);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 240ms ease, transform 240ms ease;
}

.oto-dm-toast.is-in { opacity: 1; transform: translateY(0); }

.oto-dm-toast .oto-dm-toast-preview {
    display: block;
    color: var(--gp-muted, #8a7d95);
    font-weight: 600;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oto-dm-toast .oto-dm-toast-main { flex: 1 1 auto; min-width: 0; }

/* ── Unread chip on /friends rows (rows are <button>s, so this is a span) ── */

.friend-dm-badge {
    flex: none;
    align-self: center;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6fae, #ff4d94);
    color: #fff;
    font-size: 11.5px;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(255, 77, 148, 0.35);
}

/* ── Sidebar nav unread badge (decorates the Friends link) ── */

.oto-dm-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6fae, #ff4d94);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 520px) {
    .oto-dm-panel {
        right: 8px;
        left: 8px;
        bottom: 8px;
        width: auto;
        height: min(480px, calc(100vh - 72px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .oto-dm-panel,
    .oto-dm-toast,
    .oto-dm-icon-btn,
    .oto-dm-send {
        transition: none;
    }
}