/* ── Two-column chat layout ──────────────────────────────────────────────── */
.chat-layout {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ── Left sidebar: contact list ──────────────────────────────────────────── */
.chat-sidebar {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    height: 64px;                      /* match thread-header height */
    border-bottom: 1px solid var(--border);
    gap: .5rem;
    flex-shrink: 0;
    background: var(--surface);
}

.chat-sidebar .chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.chat-sidebar .chat-list::-webkit-scrollbar { width: 4px; }
.chat-sidebar .chat-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.chat-sidebar .chat-list::-webkit-scrollbar-track { background: transparent; }

.chat-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.chat-item:last-child { border-bottom: none; }
.chat-item:hover, .chat-item:focus { background: var(--bg); outline: none; }
.chat-item.active { background: rgba(194,24,91,.08); border-left: 3px solid var(--primary); }

/* ── Right panel: active thread ──────────────────────────────────────────── */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(rgba(194, 24, 92, 0.89), rgba(173, 20, 86, 0.676)), url("../images/bows_background.png");
    min-width: 0;
    overflow: hidden;
}

.chat-main .thread-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: .75rem 1.25rem;
    height: 64px;                      /* match sidebar-header height */
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
    margin-bottom: 0;
}

.chat-main .chat-thread {
    flex: 1;
    min-height: 0;
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    display: flex;
    flex-direction: column;
}

.chat-main .chat-thread::-webkit-scrollbar { width: 4px; }
.chat-main .chat-thread::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.chat-main .chat-thread::-webkit-scrollbar-track { background: transparent; }

.chat-main .send-bar {
    padding: .875rem 1.5rem;
    margin-top: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Empty right panel */
.chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.85);
    font-size: .9375rem;
    font-weight: 500;
    gap: .5rem;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #e91e8c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Conversation list items ─────────────────────────────────────────────── */
.chat-item-body { flex: 1; min-width: 0; }

.chat-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .2rem;
}

.chat-item-name    { font-weight: 600; font-size: .9375rem; }
.chat-item-date    { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.chat-item-preview { font-size: .8125rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Thread header ───────────────────────────────────────────────────────── */
.btn-refresh {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-muted, #888);
    padding: .25rem .4rem;
    border-radius: 6px;
    transition: color .15s, background .15s;
    line-height: 1;
}
.btn-refresh:hover { color: var(--text); background: var(--border); }
.btn-refresh.spinning { animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.thread-partner-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.thread-partner { font-size: 1rem; font-weight: 600; }

/* standalone chat-thread (outside .chat-main, e.g. old inline use) */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow-y: auto;
    padding: .75rem 0;
}

/* ── Key fingerprint ─────────────────────────────────────────────────────── */
.key-fingerprint { font-size: .72rem; font-family: monospace; color: var(--muted); margin: .25rem 0 .5rem; min-height: 1em; }

/* ── Inbox header (non-split fallback) ───────────────────────────────────── */
.inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.inbox-header h2 { font-size: 1.25rem; font-weight: 600; }
.inbox-actions { display: flex; gap: .5rem; }

/* ── Legacy message card ─────────────────────────────────────────────────── */
.message-list { display: flex; flex-direction: column; gap: .75rem; }
.message-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px var(--shadow);
}
.msg-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .375rem; }
.msg-sender { font-weight: 600; font-size: .9375rem; }
.msg-date   { font-size: .8rem; color: var(--muted); }
.msg-body   { font-size: .9375rem; line-height: 1.55; color: var(--text); }
.msg-actions { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .875rem; }

/* ── Send bar ────────────────────────────────────────────────────────────── */
.send-bar {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.send-input {
    flex: 1;
    padding: .625rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font);
    font-size: .9375rem;
    outline: none;
    background: var(--bg);
    transition: border-color .15s, box-shadow .15s;
}

.send-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(194,24,91,.12);
    background: var(--surface);
}

.send-btn {
    border-radius: 999px;
    padding: .625rem 1.25rem;
    flex-shrink: 0;
}

/* ── Bubbles ─────────────────────────────────────────────────────────────── */

/* Outer row: avatar + bubble side by side */
.bubble-wrap {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: .375rem;
}
.bubble-wrap.sent     { flex-direction: row-reverse; }
.bubble-wrap.received { flex-direction: row; }

/* Small avatar circle inside the bubble row */
.bubble-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(220, 11, 109, 0.82);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    align-self: flex-end;
    border: 2px solid var(--border)
}

/* Sent avatar: white background with pink text */
.bubble-wrap.sent .bubble-avatar {
    background: #fff;
    color: var(--primary);
    font-size: 1.5rem;
    border: 2px solid var(--border);
}

.bubble {
    max-width: 65%;
    padding: .5rem .875rem .4rem;
    border-radius: 18px;
    box-shadow: 0 1px 3px var(--shadow);
    border: none;
}

.bubble.sent {
    background-color: rgba(214, 10, 95, 0.68);
    color: #fff;
    border-bottom-right-radius: 5px;
}

.bubble.received {
    background-color: rgba(255, 255, 255, 0.831);
    color: var(--text);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
}

.bubble .msg-body {
    font-size: .9375rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    color: inherit;
}

/* Sender name shown on received bubbles */
.bubble-sender {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: .2rem;
}

/* Forwarded tag */
.bubble-forwarded {
    font-size: .68rem;
    font-style: italic;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    border-left: 2px solid rgba(255,255,255,.5);
    padding-left: .4rem;
    margin-bottom: .35rem;
}
.bubble.received .bubble-forwarded {
    color: var(--muted);
    border-left-color: var(--border);
}

/* ── WhatsApp-style date divider ─────────────────────────────────────────── */
.date-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .75rem 0 .5rem;
    color: rgba(255,255,255,.75);
    font-size: .72rem;
    font-weight: 600;
}
.date-divider::before,
.date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.25);
}
.date-divider span {
    background: rgba(0,0,0,.18);
    padding: .15rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Bubble footer — all items on same baseline ───────────────────────────── */
.bubble-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .4rem;
}

.bubble-footer-left {
    display: flex;
    align-items: flex-end;
    gap: .35rem;
    flex-wrap: wrap;
    min-width: 0;
    line-height: 1.5rem;
}

.bubble .msg-date {
    font-size: .72rem;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
    line-height: 1.5rem;
}
.bubble.received .msg-date { color: var(--muted); }

/* keep badge on same line as buttons */
.bubble-footer .badge {
    line-height: 1.5rem;
    vertical-align: middle;
}

/* ── Bubble action icons ─────────────────────────────────────────────────── */
.bubble .msg-actions {
    display: flex;
    gap: .25rem;
    align-items: center;
    flex-shrink: 0;
}

/* Icon buttons */
.btn-icon {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    cursor: pointer;
    font-size: .875rem;
    height: 1.5rem;
    padding: 0 .35rem;
    border-radius: 6px;
    line-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    transition: background .12s;
}
.btn-icon:hover:not(:disabled) { background: rgba(255,255,255,.35); }
.btn-icon:disabled { opacity: .35; cursor: not-allowed; }

/* Received bubbles: dark background on icons */
.bubble.received .btn-icon {
    background: rgba(194,24,91,.07);
    border-color: var(--border);
}
.bubble.received .btn-icon:hover:not(:disabled) { background: rgba(194,24,91,.14); }

/* Revoke button */
.btn-revoke {
    font-size: .72rem;
    height: 1.5rem;
    padding: 0 .5rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.18);
    color: #fff;
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    white-space: nowrap;
}
.btn-revoke:hover:not(:disabled) { background: rgba(255,255,255,.3); }
.btn-revoke:disabled { opacity: .35; cursor: not-allowed; }

/* ── Anchor details disclosure ───────────────────────────────────────────── */
.msg-anchor-details {
    margin: .375rem 0 .25rem;
    font-size: .78rem;
}

.msg-anchor-details summary {
    cursor: pointer;
    color: var(--muted);
    user-select: none;
    padding: .15rem 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.msg-anchor-details summary::-webkit-details-marker { display: none; }
.msg-anchor-details summary::before { content: '▶'; font-size: .6rem; transition: transform .15s; }
.msg-anchor-details[open] summary::before { transform: rotate(90deg); }

.msg-hash-rows {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-top: .4rem;
}

.msg-hash-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.msg-hash-label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
    width: 2.5rem;
}

.msg-hash-val {
    font-size: .68rem;
    font-family: monospace;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 26ch;
    flex: 1;
    min-width: 0;
}

.btn-copy {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .75rem;
    padding: 0 .15rem;
    flex-shrink: 0;
    line-height: 1;
    opacity: .6;
    transition: opacity .12s;
}
.btn-copy:hover { opacity: 1; }

/* ── Revoked bubble ──────────────────────────────────────────────────────── */
.bubble-wrap.revoked .bubble { opacity: .6; }

/* ── Anchor / unanchored badge ───────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .68rem;
    padding: .1rem .45rem;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 500;
    flex-shrink: 0;
}

.badge-anchored {
    background: rgba(21,128,61,.12);
    color: #166534;
    border: 1px solid rgba(21,128,61,.25);
}

.bubble.sent .badge-anchored {
    background: rgba(255,255,255,.2);
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.3);
}

.badge-unanchored {
    background: rgba(107,114,128,.1);
    color: var(--muted);
    border: 1px solid rgba(107,114,128,.2);
}

.bubble.sent .badge-unanchored {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
    border-color: rgba(255,255,255,.2);
}

.revoked-badge {
    font-size: .68rem;
    padding: .1rem .4rem;
    border-radius: 4px;
    background: rgba(185,28,28,.12);
    color: var(--danger);
    border: 1px solid rgba(185,28,28,.25);
    white-space: nowrap;
}

.bubble.sent .revoked-badge {
    background: rgba(255,255,255,.18);
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.3);
}