/* LUB Shakthi — the directory and member messaging.
 *
 * The member side's warm system, not the chapter module's quiet one: this is
 * the half of the app people open because they want to, not because it is
 * their job.
 */

/* ═══════════════════════════════════════════════════════ directory */

.dir-head h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.02em; }
.dir-head .sub { max-width: 64ch; }

.dir-search { margin: 16px 0 10px; }

.dir-box {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--line-2);
    border-radius: 999px; padding: 6px 6px 6px 16px;
    transition: border-color .15s, box-shadow .15s;
}
.dir-box:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(249,115,22,.1);
}
.dir-box > .material-symbols-outlined { color: var(--ink-3); flex: none; }
.dir-box input {
    flex: 1; border: 0; min-height: 40px; padding: 0;
    background: none; font-size: 15px;
}
.dir-box input:focus { box-shadow: none; }
.dir-box .btn { border-radius: 999px; flex: none; }
.dir-clear { display: grid; place-items: center; color: var(--ink-3); flex: none; }
.dir-clear:hover { color: var(--ink); }

.dir-filters { margin-top: 10px; }
.dir-filters > summary {
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    padding: 7px 13px; border: 1px solid var(--line-2); border-radius: 999px;
    list-style: none;
}
.dir-filters > summary::-webkit-details-marker { display: none; }
.dir-filters > summary:hover { border-color: var(--ink-3); }

.dir-filter-grid {
    display: grid; gap: 12px; margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: end;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 16px;
}
.dir-filter-grid .field { margin: 0; }
.dir-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.dir-check input { width: 16px; height: 16px; min-height: 0; }
.dir-filter-acts { display: flex; gap: 8px; }

.dir-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 14px 0 10px;
}
.dir-count { font-size: 13px; color: var(--ink-3); margin: 0; flex: 1; }

/* Two layouts, chosen and remembered. The card grid they replaced put three
   postcards to a row, so a chapter of sixty was four screens of scrolling. */
.dir-views {
    display: flex; gap: 2px; flex: none;
    background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 2px;
}
.dir-view {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-3);
}
.dir-view:hover { color: var(--ink-2); }
.dir-view.is-on { background: #fff; color: var(--brand-deep); box-shadow: 0 1px 3px rgba(17,24,39,.1); }
.dir-view .material-symbols-outlined { font-size: 17px; }

@media (max-width: 520px) {
    .dir-view .lbl { display: none; }
    .dir-view { padding: 5px 9px; }
}

/* ── the list ─────────────────────────────────────────────────────────── */

.dir-list {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
}
.dir-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
    transition: background .14s;
}
.dir-row:last-child { border-bottom: 0; }
.dir-row:hover { background: var(--bg); }
.dir-row > .dir-id { flex: 1; min-width: 0; }
.dir-row-meta { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.dir-row-meta .chip { font-size: 11px; }
.dir-row-meta .chip .material-symbols-outlined { font-size: 13px; }
.dir-row-acts { display: flex; gap: 6px; flex: none; }
.dir-row-acts form { margin: 0; }
.dir-row-acts .act-wa:hover { border-color: #25D366; color: #128C4A; background: #F0FDF4; }

/* On a phone the row stacks: the chips and the buttons drop under the name
   rather than squeezing it to nothing. */
@media (max-width: 700px) {
    .dir-row { flex-wrap: wrap; }
    .dir-row > .dir-id { flex: 1 0 100%; }
    .dir-row-meta { justify-content: flex-start; flex: 1; }
    .dir-row-acts .btn .lbl { display: none; }
}

/* ── the register ─────────────────────────────────────────────────────── */

.dir-tablewrap { padding: 0; }
.dir-table th a {
    display: inline-flex; align-items: center; gap: 4px; color: inherit;
}
.dir-table th a:hover { color: var(--brand-deep); }
.dir-table th .material-symbols-outlined { font-size: 15px; opacity: .5; }
.dir-table th.is-sorted a { color: var(--brand-deep); }
.dir-table th.is-sorted .material-symbols-outlined { opacity: 1; }
.dir-cell-id { color: inherit; display: block; }
.dir-cell-id .n { display: block; font-weight: 650; font-size: 13.5px; }
.dir-cell-id .d { display: block; font-size: 11.5px; color: var(--ink-3); }
.dir-cell-id:hover .n { color: var(--brand-deep); }
.dir-th-act, .dir-td-act { width: 1%; white-space: nowrap; }
.dir-td-act form { margin: 0; }

/* It is the register, so it prints: the controls go, the rule stays. */
@media print {
    .dir-bar, .dir-search, .dir-head .sub, .dir-th-act, .dir-td-act { display: none; }
    .dir-tablewrap { border: 0; }
}

.dir-id { display: flex; align-items: center; gap: 11px; color: inherit; min-width: 0; }
.dir-id .grow { min-width: 0; }
.dir-id .n {
    display: block; font-weight: 700; font-size: 14.5px;
    letter-spacing: -.01em; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-id .d {
    display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-id:hover .n { color: var(--brand-deep); }

/* ═══════════════════════════════════════════════════════ chat shell */

/* The page is the chat.
 *
 * It used to be two cards floating in the 760px reading column, which on a
 * desktop meant a thread barely wider than a phone with two thirds of the
 * window empty either side. It now fills the window below the bar: the list
 * of conversations against the left edge, the thread taking the rest. No
 * gaps, no rounded corners, nothing to scroll past — the only thing that
 * scrolls is inside a pane. */
.chat-shell {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 0;
    /* The thread scrolls inside itself, so the shell is pinned to the
       viewport rather than growing the page. */
    height: calc(100dvh - var(--mtop-h, 62px) - var(--mtabs-h, 0px) - var(--mbot-h, 0px));
    min-height: 460px;
}

.chat-list {
    background: #fff; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; overflow: hidden;
}

/* Below the full-width breakpoint the shell is back inside the reading
   column, so the panes become cards again. */
@media (max-width: 899px) {
    .chat-shell { gap: 16px; }
    .chat-list {
        border: 1px solid var(--line); border-radius: var(--r-lg);
    }
}

/* On a very wide screen the thread stops growing: a line of chat 1400px long
   is unreadable, and a messenger is read, not surveyed. */
@media (min-width: 1500px) {
    .chat-shell { grid-template-columns: 380px minmax(0, 1fr); }
}
.chat-list-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.chat-list-top strong { font-size: 16px; letter-spacing: -.01em; }
.chat-list-acts { display: flex; gap: 6px; }

.chat-list-search {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.chat-list-search .material-symbols-outlined { color: var(--ink-3); font-size: 19px; }
.chat-list-search input {
    flex: 1; border: 0; min-height: 30px; padding: 0; background: none; font-size: 13.5px;
}
.chat-list-search input:focus { box-shadow: none; }

.chat-threads { flex: 1; overflow-y: auto; }

.chat-thread {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px; color: inherit;
    border-bottom: 1px solid var(--line);
}
.chat-thread:hover { background: var(--bg); }
.chat-thread.is-on { background: var(--brand-50); }
.chat-thread .grow { min-width: 0; }

.chat-thread-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.chat-thread-top .n {
    font-weight: 650; font-size: 14px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.chat-thread-top .t { font-size: 11px; color: var(--ink-3); flex: none; }

.chat-thread-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 2px;
}
.chat-thread-bottom .p {
    font-size: 12.5px; color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-unread {
    flex: none; background: var(--brand); color: #fff;
    font-size: 10.5px; font-weight: 700;
    border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center;
}

.chat-avatar.is-group {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--brand-100); color: var(--brand);
}

.chat-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; background: #fff;
}
@media (max-width: 899px) {
    .chat-empty { border: 1px solid var(--line); border-radius: var(--r-lg); }
}
.chat-empty .material-symbols-outlined { font-size: 44px; color: var(--ink-3); }
.chat-empty h2 { margin: 0; font-size: 19px; }
.chat-empty p { margin: 0; font-size: 13.5px; color: var(--ink-3); max-width: 38ch; }

/* ═══════════════════════════════════════════════════════ the thread */

.chat-thread-pane {
    background: #fff;
    display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
@media (max-width: 899px) {
    .chat-thread-pane {
        border: 1px solid var(--line); border-radius: var(--r-lg);
    }
}

.chat-top {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 14px; border-bottom: 1px solid var(--line); flex: none;
}
.chat-top .n { font-weight: 700; font-size: 15px; }
.chat-top .d { font-size: 12px; color: var(--ink-3); }
.chat-back { display: none; }

.chat-menu { position: relative; }
.chat-menu > summary { list-style: none; cursor: pointer; }
.chat-menu > summary::-webkit-details-marker { display: none; }
.chat-menu-sheet {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    min-width: 250px; max-height: 340px; overflow-y: auto;
    background: #fff; border: 1px solid var(--line-2);
    border-radius: 12px; box-shadow: var(--shadow-2);
}
.chat-menu-head {
    padding: 10px 14px; font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
    border-bottom: 1px solid var(--line);
}
.chat-menu-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; font-size: 13.5px;
}
.chat-menu-out {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 11px 14px; border: 0; border-top: 1px solid var(--line);
    background: none; cursor: pointer; color: var(--red); font-size: 13.5px;
    font-weight: 600; text-align: left;
}
.chat-menu-out:hover { background: var(--red-bg); }

/* The conversation itself, on the association's own paper rather than a
   photograph — a tinted panel reads as a chat without costing a texture. */
.chat-scroll {
    flex: 1; overflow-y: auto;
    padding: 16px; background: #FAF8F5;
    display: flex; flex-direction: column; gap: 8px;
}

/* A short conversation sits on the composer, not at the top of an empty
   panel with the composer a screen below it. The spacer takes the slack when
   there is any and collapses to nothing when the thread fills the pane —
   which `justify-content: flex-end` cannot do without clipping the oldest
   message out of reach once it does. */
.chat-scroll::before { content: ''; margin-top: auto; }

/* Now that the pane fills the window, the conversation inside it is held to
   a readable column. A line of chat 1200px wide is not a conversation. */
/* Scoped to the pane so these land after the base padding declared further
   down the file, rather than losing to it on source order. */
@media (min-width: 900px) {
    .chat-thread-pane .chat-scroll { padding: 18px max(18px, (100% - 880px) / 2); }
    .chat-thread-pane .chat-compose { padding: 10px max(12px, (100% - 880px) / 2) 14px; }
    .chat-thread-pane .chat-typing { padding-left: max(18px, (100% - 880px) / 2); }
}

.chat-first {
    margin: auto; text-align: center; color: var(--ink-3); max-width: 34ch;
}
.chat-first .material-symbols-outlined { font-size: 34px; }
.chat-first p { font-size: 13.5px; margin: 8px 0 0; }

.msg-system {
    align-self: center; text-align: center;
    font-size: 11.5px; color: var(--ink-3);
    background: rgba(17,24,39,.05); border-radius: 999px;
    padding: 4px 12px; max-width: 80%;
}

.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }

.msg-body {
    background: #fff; border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;
    padding: 8px 11px 5px; min-width: 0;
}
.msg.is-mine .msg-body {
    background: var(--brand-50); border-color: var(--brand-200);
    border-radius: 14px 14px 4px 14px;
}

.msg-who {
    font-size: 11.5px; font-weight: 700; color: var(--brand-deep); margin-bottom: 2px;
}

.msg-quote {
    border-left: 3px solid var(--brand-200);
    padding: 4px 8px; margin: 0 0 6px;
    background: rgba(17,24,39,.035); border-radius: 0 6px 6px 0;
}
.msg-quote .q-who { display: block; font-size: 11px; font-weight: 700; color: var(--brand-deep); }
.msg-quote .q-text { display: block; font-size: 12px; color: var(--ink-3); }

.msg-text { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.msg-text.is-gone {
    display: flex; align-items: center; gap: 6px;
    font-style: italic; color: var(--ink-3);
}
.msg-text.is-gone .material-symbols-outlined { font-size: 16px; }

.msg-img { display: block; margin: 0 0 5px; }
.msg-img img {
    display: block; max-width: 100%; height: auto;
    border-radius: 9px; max-height: 320px; object-fit: cover;
}

.msg-file {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; margin: 0 0 5px;
    background: rgba(17,24,39,.04); border-radius: 9px; color: inherit;
}
.msg-file:hover { background: rgba(17,24,39,.07); }
.msg-file .n {
    display: block; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
}
.msg-file .d { display: block; font-size: 11px; color: var(--ink-3); }

.msg-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px;
    margin-top: 2px;
}
.msg-time, .msg-edited { font-size: 10.5px; color: var(--ink-3); }
.msg-edited { font-style: italic; }
/* Sent, delivered, read — three states in one glyph.
   One tick while it is only on the server, two grey once the other side's
   page has asked for messages since, two saffron once they have actually
   been looking at the thread. */
.msg-ticks { cursor: default; }
.msg-ticks .material-symbols-outlined { font-size: 15px; color: var(--line-2); }
.msg-ticks.is-delivered .material-symbols-outlined { color: var(--ink-3); }
.msg-ticks.is-read .material-symbols-outlined { color: var(--brand); }

/* And once, in words, under the last thing you said: a tick is a hover, and
   a phone has no hover. */
.msg-receipt {
    align-self: flex-end;
    font-size: 11px; color: var(--ink-3);
    margin: -4px 4px 2px; letter-spacing: .01em;
}
.msg-receipt.is-read { color: var(--brand-deep); font-weight: 600; }

/* The actions appear on hover, so a thread reads as a conversation rather
   than a list of rows with buttons on them. */
.msg-acts { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-acts, .msg:focus-within .msg-acts { opacity: 1; }
.msg-act {
    width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: none; color: var(--ink-3); cursor: pointer;
    display: grid; place-items: center;
}
.msg-act:hover { background: rgba(17,24,39,.07); color: var(--ink); }
.msg-act .material-symbols-outlined { font-size: 16px; }

/* --------------------------------------------------------- typing + send */

.chat-typing {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 18px; flex: none; background: #FAF8F5;
}
.chat-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
    animation: chat-bounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
.chat-typing em { font-size: 11.5px; color: var(--ink-3); font-style: normal; margin-left: 6px; }

@keyframes chat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-typing span { animation: none; }
}

.chat-compose {
    flex: none; border-top: 1px solid var(--line); padding: 10px 12px; background: #fff;
}
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row textarea {
    flex: 1; resize: none; min-height: 40px; max-height: 140px;
    border-radius: 20px; padding: 10px 14px; font-size: 14px; line-height: 1.45;
}
.chat-send {
    width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
    background: var(--brand); color: #fff; cursor: pointer;
    display: grid; place-items: center;
}
.chat-send:hover { background: var(--brand-deep); }
.chat-compose label.icon-btn { cursor: pointer; flex: none; }

.chat-reply {
    display: flex; align-items: center; gap: 10px;
    border-left: 3px solid var(--brand); background: var(--brand-50);
    border-radius: 0 8px 8px 0; padding: 7px 10px; margin-bottom: 8px;
}
.chat-reply strong { display: block; font-size: 11.5px; color: var(--brand-deep); }
.chat-reply span { font-size: 12.5px; color: var(--ink-2); }
.chat-reply button { border: 0; background: none; cursor: pointer; color: var(--ink-3); }

.chat-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chat-file-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg); border: 1px solid var(--line-2);
    border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12px;
    max-width: 220px;
}
.chat-file-chip > span:first-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-file-chip button {
    width: 17px; height: 17px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(17,24,39,.1); color: var(--ink-2); line-height: 1;
    display: grid; place-items: center;
}

/* ───────────────────────────────────────────── group picker */

.grp-search {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--line-2); border-radius: 10px;
    padding: 6px 12px; margin-bottom: 8px;
}
.grp-search input { flex: 1; border: 0; min-height: 32px; padding: 0; background: none; }
.grp-search input:focus { box-shadow: none; }

.grp-list {
    max-height: 340px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 10px;
}
.grp-row {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.grp-row:last-child { border-bottom: 0; }
.grp-row:hover { background: var(--bg); }
.grp-row input { width: 17px; height: 17px; min-height: 0; flex: none; }
.grp-row .n { display: block; font-size: 13.5px; font-weight: 600; }
.grp-row .d { display: block; font-size: 11.5px; color: var(--ink-3); }

/* ───────────────────────────────────────────── narrow screens */

@media (max-width: 899px) {
    /* One pane at a time: the list, or the thread you opened from it.
       Same boundary as the card treatment above, so there is no band where
       the panes are cards but still side by side. */
    .chat-shell { grid-template-columns: 1fr; }
    .chat-shell.has-thread .chat-list { display: none; }
    .chat-back { display: grid; }
    .msg { max-width: 88%; }
}