/*
 * messages.css — Direct Messages (/messages/).
 *
 * Two-pane layout: conversation list (left) + thread (right). Mobile is
 * single-pane: .dm-page.thread-open swaps to the thread view. Includes
 * online-presence dot, stacked group avatars, typing/read affordances,
 * and the sidebar messages-badge unread pill.
 */

/* ==========================================================
   Direct Messages (/messages/)
   Two-pane: conversation list (left) + thread (right).
   Mobile: single pane, .dm-page.thread-open swaps to thread.
   ========================================================== */

.main-content:has(.dm-page) {
    height: 100vh;
    overflow: hidden;
}

.dm-page {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: 100%;
    background: var(--surface);
    overflow: hidden;
}

/* ---- Avatars (shared) ---- */
.dm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-weight: var(--fw-semibold);
    /* overflow stays visible so the online dot can sit on the bottom-right
       corner without being chopped to a sliver. The image clips itself
       below via border-radius: inherit. */
    flex-shrink: 0;
}
.dm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.dm-avatar-initial {
    background: linear-gradient(135deg, #4f6df0 0%, #1E40E8 100%);
    color: #fff;
}
.dm-avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.dm-avatar-md { width: 44px; height: 44px; font-size: 16px; }
.dm-avatar-lg { width: 38px; height: 38px; font-size: 14px; }

/* ---- Left pane: conversation list ---- */
.dm-conv-list {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    min-height: 0;
}
.dm-conv-list-head {
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.dm-conv-list-head h1 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0;
    color: var(--text);
}
.dm-newchat-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}
.dm-newchat-btn:hover {
    background: var(--primary-light);
    color: var(--primary);
}
.dm-conv-list-body {
    flex: 1;
    overflow-y: auto;
    padding: .25rem 0;
}
.dm-conv-list-empty {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}
.dm-conv-list-empty p { margin-bottom: 1rem; }
.dm-conv-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .65rem 1rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background var(--transition);
    position: relative;
}
.dm-conv-row:hover { background: var(--bg); }
.dm-conv-row.active {
    background: var(--primary-light);
    border-left-color: var(--primary);
}
.dm-conv-info {
    flex: 1;
    min-width: 0;
}
.dm-conv-toprow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.dm-conv-name {
    font-weight: var(--fw-semibold);
    color: var(--text);
    font-size: var(--fs-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-conv-row.unread .dm-conv-name { font-weight: var(--fw-bold); }
.dm-conv-time {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}
.dm-conv-preview {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dm-conv-row.unread .dm-conv-preview { color: var(--text-soft); }
.dm-conv-unread-badge {
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: var(--fw-bold);
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* ---- Right pane: thread ---- */
.dm-thread {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
}
.dm-thread-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    gap: .5rem;
}
.dm-thread-placeholder[hidden] { display: none; }
.dm-thread-placeholder-ring {
    width: 96px;
    height: 96px;
    border: 2px solid var(--text);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    margin-bottom: 1rem;
}
.dm-thread-placeholder-ring svg {
    /* Visually offset the airplane so it sits centered inside the circle */
    transform: translate(-2px, 1px);
}
.dm-thread-placeholder h2 {
    font-size: var(--fs-lg);
    color: var(--text);
    margin: 0;
    font-weight: var(--fw-semibold);
}
.dm-thread-placeholder p {
    margin: 0;
    color: var(--text-muted);
}
.dm-thread-placeholder-btn {
    margin-top: 1rem;
}
.dm-thread-active {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Without this override, the [hidden] attribute loses to display: flex above
   and the composer stays visible when no thread is selected. */
.dm-thread-active[hidden] { display: none; }
.dm-thread-head {
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    background: var(--surface);
}
.dm-thread-back {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
}
.dm-thread-back:hover { background: var(--bg); }
.dm-thread-titlewrap {
    display: block;
    flex: 1;
    min-width: 0;
    text-align: left;
}
.dm-thread-title {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: 0;
}
.dm-thread-sub {
    display: block;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0;
}
/* Group-aware header trigger — opens the members panel on click. */
.dm-thread-info-trigger {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    min-width: 0;
    padding: .25rem .4rem;
    margin: 0 0 0 -.4rem;
    border: 0;
    background: transparent;
    border-radius: 10px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
    transition: background var(--transition);
}
.dm-thread-info-trigger.is-clickable { cursor: pointer; }
.dm-thread-info-trigger.is-clickable:hover { background: var(--bg); }
.dm-thread-info-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
.dm-thread-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
}
.dm-thread-loadmore {
    align-self: center;
    margin-bottom: .5rem;
}
.dm-loadmore-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: var(--fs-sm);
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
}
.dm-loadmore-btn:hover { background: var(--bg); }
.dm-thread-messages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;  /* anchor to bottom when short */
}
.dm-thread-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    font-size: var(--fs-sm);
}
.dm-bubble {
    max-width: 70%;
    padding: .55rem .85rem;
    border-radius: 18px;
    font-size: var(--fs-md);
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-top: 1px;
}
.dm-bubble-mine {
    background: var(--primary);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 6px;
}
.dm-bubble-theirs {
    background: var(--bg);
    color: var(--text);
    align-self: flex-start;
    border-bottom-left-radius: 6px;
}
.dm-bubble-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .9rem 0 .15rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.dm-bubble-meta-mine {
    align-self: flex-end;
}
.dm-bubble-sender {
    font-weight: var(--fw-medium);
    color: var(--text-soft);
}

/* ---- Composer (Instagram-style single pill) ---- */
.dm-composer {
    flex-shrink: 0;
    padding: .75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.dm-composer-pill {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: .35rem .35rem .35rem 1rem;
    transition: border-color var(--transition);
}
.dm-composer-pill:focus-within { border-color: var(--primary); }
.dm-composer-input {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    padding: .4rem 0;
    font-size: var(--fs-md);
    font-family: inherit;
    line-height: 1.4;
    color: var(--text);
    resize: none;
    max-height: 120px;
    /* Hide the scrollbar — the textarea grows to fit content via JS, and on
       overflow we still allow scroll but not the visible gutter that was
       rendering as a "divider" between the textarea and the send button. */
    overflow-y: auto;
    scrollbar-width: none;
}
.dm-composer-input::-webkit-scrollbar { width: 0; height: 0; }
.dm-composer-send {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.dm-composer-send:hover:not(:disabled) { background: var(--primary-light); }
.dm-composer-send:disabled { opacity: .35; cursor: not-allowed; }

/* ---- New-chat modal ---- */
/* ---- Inline compose pane (left side) ---- */
.dm-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    height: 100%;
}
.dm-pane[hidden] { display: none; }
.dm-pane-compose {
    background: var(--surface);
}
.dm-compose-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1rem 1rem .5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.dm-compose-head h1 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    margin: 0;
    color: var(--text);
}
.dm-compose-back {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dm-compose-back:hover { background: var(--bg); color: var(--text); }
.dm-compose-searchwrap {
    padding: .5rem 1rem;
    flex-shrink: 0;
}
.dm-compose-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .55rem .85rem;
    font-size: var(--fs-md);
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition);
}
.dm-compose-input:focus { border-color: var(--primary); }
.dm-compose-list {
    flex: 1;
    overflow-y: auto;
    padding: .25rem 0;
    min-height: 0;
}
.dm-compose-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .55rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background var(--transition);
}
.dm-compose-row:hover { background: var(--bg); }
.dm-compose-uname {
    flex: 1;
    color: var(--text);
    font-weight: var(--fw-medium);
}
.dm-compose-empty {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

/* ---- Messages tabbar (Individual / Group) ---- */
.dm-tabbar {
    flex-shrink: 0;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border);
}
.dm-tabbar .tabbar-inner {
    position: relative;
    display: flex;
    gap: .25rem;
}
.dm-tabbar .tabbar-btn {
    background: transparent;
    border: none;
    padding: .65rem .25rem;
    margin-right: 1rem;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: color var(--transition);
}
.dm-tabbar .tabbar-btn:hover { color: var(--text-soft); }
.dm-tabbar .tabbar-btn-active { color: var(--primary); }
.dm-tabbar .tabbar-count {
    background: var(--bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--fw-bold);
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 14px;
    text-align: center;
}
.dm-tabbar .tabbar-btn-active .tabbar-count {
    background: var(--primary-light);
    color: var(--primary);
}
.dm-tabbar .tabbar-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--primary);
    border-radius: 1px 1px 0 0;
    transition: left .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1);
}

/* ---- Folder accent circle (group conversation rows) ---- */
.dm-folder-circle {
    color: var(--ink, #fff);
    background: var(--tint, var(--primary));
    font-weight: var(--fw-bold);
}
.dm-folder-circle[data-accent="cobalt"] { background: #1E40E8; color: #fff; }
.dm-folder-circle[data-accent="moss"]   { background: #0E7C5A; color: #fff; }
.dm-folder-circle[data-accent="amber"]  { background: #C77700; color: #fff; }
.dm-folder-circle[data-accent="rose"]   { background: #DB2777; color: #fff; }
.dm-folder-circle[data-accent="violet"] { background: #7C3AED; color: #fff; }
.dm-folder-circle[data-accent="teal"]   { background: #0D9488; color: #fff; }
.dm-folder-circle[data-accent="slate"]  { background: #475569; color: #fff; }
.dm-folder-circle[data-accent="coral"]  { background: #EA580C; color: #fff; }

/* ---- Stacked group avatar (Instagram-style member collage) ---- */
.dm-avatar-stack {
    background: transparent;
    overflow: visible;
    position: relative;
}
.dm-avatar-stack-tile {
    position: absolute;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: #fff;
    font-weight: var(--fw-semibold);
    box-sizing: border-box;
    box-shadow: 0 0 0 2px var(--surface);
}
.dm-avatar-stack-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dm-avatar-stack-tile-initial {
    background: linear-gradient(135deg, #4f6df0 0%, #1E40E8 100%);
}
.dm-avatar-stack-back  { top: 0; left: 0; z-index: 1; }
.dm-avatar-stack-front { bottom: 0; right: 0; z-index: 2; }

.dm-avatar-stack.dm-avatar-md .dm-avatar-stack-tile { width: 30px; height: 30px; font-size: 12px; }
.dm-avatar-stack.dm-avatar-lg .dm-avatar-stack-tile { width: 26px; height: 26px; font-size: 11px; }
.dm-avatar-stack.dm-avatar-sm .dm-avatar-stack-tile { width: 17px; height: 17px; font-size: 9px; }

/* ---- Group members panel (opened from group thread header) ---- */
.dm-members-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}
.dm-members-backdrop[hidden] { display: none; }
.dm-members-card {
    background: var(--surface);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    max-height: min(80vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(15, 23, 42, .25);
}
.dm-members-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.1rem .85rem;
    border-bottom: 1px solid var(--border);
}
.dm-members-headtext { min-width: 0; }
.dm-members-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-members-sub {
    margin: .15rem 0 0;
    font-size: .82rem;
    color: var(--text-muted);
}
.dm-members-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: .35rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
    flex-shrink: 0;
}
.dm-members-close:hover { background: var(--bg); color: var(--text); }
.dm-members-list {
    overflow-y: auto;
    padding: .35rem 0 .6rem;
}
.dm-members-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1.1rem;
    color: inherit;
    text-decoration: none;
    transition: background var(--transition);
}
.dm-members-row:hover { background: var(--bg); }
.dm-members-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dm-members-name {
    font-size: .92rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: .45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-members-you {
    font-size: .65rem;
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dm-members-status {
    font-size: .78rem;
    color: var(--green);
}

/* ---- Sidebar / mobile-tab Messages unread badge (Phase 3) ---- */
.sidebar-nav-icon-with-badge { position: relative; }
.mobile-tab-with-badge { position: relative; }
.messages-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: var(--fw-bold);
    line-height: 14px;
    text-align: center;
    border-radius: 999px;
    border: 1.5px solid var(--surface);
    box-sizing: content-box;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Sit above the icon and any focus rings */
    z-index: 1;
}
.mobile-tab-with-badge .messages-badge {
    border-color: var(--surface);
    top: 6px;
    right: calc(50% - 14px);
}

/* ---- Online presence dot (Phase 2) ---- */
.dm-avatar { position: relative; }
.dm-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: var(--green-light);
    border: 2px solid var(--surface);
    border-radius: 999px;
    box-sizing: border-box;
}
.dm-avatar-sm .dm-online-dot { width: 8px; height: 8px; border-width: 1.5px; }
.dm-avatar-lg .dm-online-dot { width: 11px; height: 11px; }

/* ---- Typing indicator (Phase 2) ---- */
.dm-typing-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    align-self: flex-start;
    margin-top: .5rem;
    padding-left: .25rem;
}
.dm-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: .55rem .75rem;
    background: var(--bg);
    border-radius: 18px;
    border-bottom-left-radius: 6px;
}
.dm-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--text-muted);
    animation: dmTypingPulse 1.2s infinite ease-in-out both;
}
.dm-typing-dot:nth-child(2) { animation-delay: .15s; }
.dm-typing-dot:nth-child(3) { animation-delay: .3s; }
.dm-typing-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
@keyframes dmTypingPulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: .4; }
    40%           { transform: scale(1.1); opacity: 1; }
}

/* ---- Mobile: single pane ---- */
@media (max-width: 720px) {
    .dm-page { grid-template-columns: 1fr; }
    .dm-thread { display: none; }
    .dm-page.thread-open .dm-conv-list { display: none; }
    .dm-page.thread-open .dm-thread { display: flex; }
    .dm-thread-back { display: inline-flex; }
}