/* People section: the directory, Messages and the Library. Everything shared
   (cards, tables, chips, drawer, forms) comes from app.css; only what these
   three pages add lives here. */

/* ── Directory ─────────────────────────────────────────────────────────── */
.ppl-tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:14px}
.ppl-tabs button{border:0;background:transparent;height:34px;padding:0 12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;border-radius:6px 6px 0 0}
.ppl-tabs button:hover{background:var(--surface-2)}
.ppl-tabs button.on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.ppl-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.ppl-head .k{font-weight:600}
.facts a{color:var(--accent);text-decoration:none}
.facts a:hover{text-decoration:underline}
.chip .x{margin-left:2px;opacity:.7;font-size:12px}
.chip .x:hover{opacity:1}
.toolbar input.in{width:260px;height:32px}
.tbl td .row{gap:10px}
.ccard{padding:14px 16px;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2);font-size:13.5px}
.ccard .t{font-weight:700;font-size:15px}
.ccard .spread{padding:3px 0}
.ccard hr{border:0;border-top:1px solid var(--rule);margin:8px 0}
.act-list{display:flex;flex-direction:column;gap:6px}
.act-list .btn{justify-content:flex-start}
.act-list .btn .muted{margin-left:auto}
.photo-pick{display:flex;align-items:center;gap:12px}
.photo-pick img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--rule)}
.file-hidden{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

/* ── Messages ──────────────────────────────────────────────────────────── */
.chat.chat3{grid-template-columns:300px minmax(0,1fr) 240px;min-height:calc(100vh - 220px)}
.chat .list{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.chat .list .ci{align-items:flex-start}
.chat .list .ci .av{margin-top:2px}
.chat .list .ci .t{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.chat .pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat .msgs{flex:1;overflow-y:auto;min-height:0}
.chat .rail{border-left:1px solid var(--rule-2);padding:14px;overflow-y:auto}
.chat .day-sep{align-self:center;padding:4px 10px;border-radius:10px;background:var(--surface-2);font-size:12.5px;color:var(--muted)}
.chat .mrow{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:100%}
.chat .mrow.me{align-items:flex-end}
.chat .mrow .bub{display:flex;gap:6px;align-items:flex-end;max-width:100%}
.chat .msg{white-space:pre-wrap;overflow-wrap:anywhere}
.chat .msg .att-img{display:block;max-width:240px;max-height:240px;border-radius:8px;margin-top:4px;cursor:zoom-in}
.chat .msg .att-file{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);margin-top:4px;color:var(--ink)}
.chat .msg.me .att-file{background:rgba(255,255,255,.15);border-color:transparent;color:inherit}
.chat .msg.me .att-file a{color:inherit}
.chat .meta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);padding:0 34px}
.chat .mrow.me .meta{padding:0 4px}
.chat .meta .btn.sm{height:20px;padding:0 6px;font-size:11px}
.chat .compose{padding:10px 16px;border-top:1px solid var(--rule-2)}
.chat .compose textarea.in{min-height:36px;height:36px;max-height:160px;padding:7px 10px;resize:none}
.chat .compose .btn.ghost{height:36px}
.chat .rail .mem{display:flex;gap:8px;align-items:center;padding:4px 0}
.chat .rail .mem .n{font-size:13px;font-weight:600}
.chat .rail .mem .s{font-size:11.5px;color:var(--muted)}
.chat .rail .shared{display:flex;gap:6px;align-items:center;font-size:13px;padding:3px 0}
.chat .rail .shared span.f{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat .edit-wrap{width:min(420px,100%);display:flex;flex-direction:column;gap:6px}
.chat .list .chips{display:flex;gap:6px;flex-wrap:wrap;padding:6px 12px}
.chat .empty{margin:auto}
.only-narrow{display:none}
@media (max-width:1100px){.chat.chat3{grid-template-columns:260px minmax(0,1fr)}.chat .rail{display:none}}
@media (max-width:760px){
  .chat.chat3{grid-template-columns:1fr;min-height:0}
  .chat.chat3.has-room .list{display:none}
  .chat.chat3:not(.has-room) .pane{display:none}
  .chat .list{border-right:0}
  .only-narrow{display:inline-flex}
}

/* ── Library ───────────────────────────────────────────────────────────── */
.lib-sec{display:flex;align-items:center;padding:12px 16px 4px}
.lib-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--rule-2);cursor:pointer}
.lib-row:hover{background:var(--surface-2)}
.lib-row.on{background:var(--accent-soft)}
.lib-row .t{font-weight:600}
.lib-row .m{font-size:12px;color:var(--muted)}
.lib-row .tags{margin-left:auto;display:flex;gap:4px;flex-shrink:0}
.lib-read{max-width:62ch;font-size:15px;line-height:1.6}
.lib-read h4{margin:14px 0 6px;font-size:15px}
.lib-read h4.h1{font-size:16.5px}
.lib-read p{margin:0 0 10px}
.lib-read .li{display:flex;gap:8px;margin:3px 0}
.lib-read .li b{color:var(--accent);flex-shrink:0}
.lib-read .lead{color:var(--muted);margin-bottom:12px}
.lib-att{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;font-size:13.5px}
.lib-att .f{flex:1;min-width:0}
.lib-att .f small{display:block;color:var(--muted);font-size:11.5px}
.lib-media{max-width:100%;border-radius:10px;margin:12px 0;border:1px solid var(--rule);background:#000}
.lib-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;padding:18px 20px;gap:24px}
@media (max-width:900px){.lib-grid{grid-template-columns:1fr}}
.lib-who .row{padding:6px 0}
.lib-edit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1000px){.lib-edit{grid-template-columns:1fr}}
.lib-edit .preview{position:sticky;top:0}
.lib-tools{display:flex;gap:4px;flex-wrap:wrap}
textarea.in.lib-body{min-height:320px;font-family:var(--f-data);font-size:13.5px;line-height:1.5}
.lib-banner{display:flex;align-items:center;gap:8px;padding:8px 20px;background:var(--warn-soft);color:var(--warn);font-size:13.5px}
.lib-banner .sp{flex:1}

/* ── Contact card print ────────────────────────────────────────────────── */
@media print{
  .shell,.scrim,.toast{display:none!important}
  .drawer{position:static;width:auto;transform:none;box-shadow:none;border:0}
  .drawer-h .x,.drawer-f{display:none!important}
  .drawer-b{overflow:visible}
}

/* Pinned message, above the thread. Deliberately quiet: it is a reference the
   room keeps coming back to, not an alert. */
.chat-pin{display:flex;align-items:center;gap:9px;padding:8px 16px;border-bottom:1px solid var(--rule-2);background:var(--surface-2);font-size:13px}
.chat-pin .f{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Emergency order: the move buttons sit tight together at the end of the row. */
.tbl td.r .btn.sm.ghost{padding:0 7px}

/* Library: a draft is marked everywhere it appears, never silently different. */
.lib-row .t .draft{margin-left:6px}