/* people.css - the People box on the owner's profile (his order, 2026-10-31),
   and the delete button on a message in the Messages box. Theme tokens only,
   so dark and light both follow. */

#peopleCard .ppl-count{ font-size:12px; font-weight:600; color:var(--dk-muted); margin-left:4px; }
#peopleCard .ppl-count.on{ color:var(--dk-green); }
#peopleCard .ppl-sub{ font-size:12.5px; color:var(--dk-muted); line-height:1.45; margin:-2px 0 10px; }
#peopleCard .ppl-list{ display:flex; flex-direction:column; gap:6px; }
#peopleCard .ppl-empty{ font-size:13px; color:var(--dk-muted); padding:10px 4px; line-height:1.45; }

#peopleCard .ppl-row{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center;
  gap:4px 12px; background:var(--dk-row); border-radius:8px; padding:10px 12px; }
/* not using it: a hollow ring; using it now: a solid green dot with a soft halo */
#peopleCard .ppl-dot{ width:10px; height:10px; border-radius:50%; box-sizing:border-box;
  border:2px solid var(--dk-muted); align-self:start; margin-top:5px; }
#peopleCard .ppl-row.online .ppl-dot{ border:0; background:var(--dk-green);
  box-shadow:0 0 0 4px var(--dk-green-bg, rgba(14,203,129,.18)); }
#peopleCard .ppl-main{ min-width:0; }
#peopleCard .ppl-name{ font-size:14px; font-weight:600; color:var(--dk-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#peopleCard .ppl-email{ font-size:12px; color:var(--dk-muted); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#peopleCard .ppl-status{ font-size:12.5px; color:var(--dk-text-2); margin-top:4px; }
#peopleCard .ppl-status.on{ color:var(--dk-green); font-weight:600; }
#peopleCard .ppl-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
#peopleCard .ppl-seat{ font-size:11.5px; padding:2px 8px; border-radius:999px; white-space:nowrap;
  background:var(--dk-panel); color:var(--dk-text-2); box-shadow:inset 0 0 0 1px var(--dk-line); }
#peopleCard .ppl-seat.waiting{ color:var(--dk-amber); }
html[data-theme] #screen-profile #peopleCard .ppl-msg{ width:auto; margin:0; padding:6px 14px; font-size:13px; }

@media (max-width:560px){
  #peopleCard .ppl-row{ grid-template-columns:auto minmax(0, 1fr); }
  #peopleCard .ppl-side{ grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ---- the Messages box: delete a line (the owner only) --------------------- */
#chatCard .chat-meta{ display:flex; align-items:center; gap:8px; }
html[data-theme] #chatCard .chat-del{ margin:0; width:auto; min-height:0; height:auto; padding:0 2px;
  border:0; border-radius:3px; background:none; box-shadow:none; filter:none; text-transform:none;
  letter-spacing:0; font:inherit; font-size:11px; color:var(--dk-muted); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; opacity:0; }
#chatCard .chat-msg:hover .chat-del,
#chatCard .chat-msg:focus-within .chat-del{ opacity:1; }
html[data-theme] #chatCard .chat-del:hover{ color:var(--dk-red); background:none; }
html[data-theme] #chatCard .chat-del:focus-visible{ opacity:1; outline:2px solid var(--dk-line-strong); outline-offset:1px; }
/* a phone has no hover: the button is always there */
@media (hover:none){ html[data-theme] #chatCard .chat-del{ opacity:1; } }

/* a green dot beside a name in the owner's conversation list = using the app now */
#chatCard .chat-person-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--dk-green); }

/* ---- offices in the main app (2026-11-08) --------------------------------- */
#peopleCard .ppl-own{ grid-template-columns:minmax(0, 1fr); }
#peopleCard .ppl-office{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin-top:5px; font-size:12.5px; color:var(--dk-text-2); }
#peopleCard .ppl-office-what{ font-weight:600; color:var(--dk-text); }
html[data-theme] #peopleCard .ppl-office-change{ margin:0; width:auto; min-height:0; height:auto; padding:0 2px;
  border:0; background:none; box-shadow:none; filter:none; text-transform:none; letter-spacing:0;
  font:inherit; font-size:12px; color:var(--dk-muted); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; }
html[data-theme] #peopleCard .ppl-office-change:hover{ color:var(--dk-text); background:none; }
#peopleCard .ppl-office-fixed{ font-weight:600; color:var(--dk-text); }
html[data-theme] #peopleCard .ppl-office-kind,
html[data-theme] #peopleCard .ppl-office-name{ width:auto; margin:0; min-height:0; height:30px;
  padding:0 8px; font-size:13px; border-radius:6px; }
html[data-theme] #peopleCard .ppl-office-name{ width:170px; max-width:100%; }
html[data-theme] #screen-profile #peopleCard .ppl-office-save,
html[data-theme] #screen-profile #peopleCard .ppl-office-cancel{ width:auto; margin:0; padding:5px 12px; font-size:12.5px; }
#peopleCard .ppl-office-err{ flex-basis:100%; color:var(--dk-red); font-size:12px; }
#peopleCard .ppl-office-err:empty{ display:none; }
#peopleCard .ppl-door{ font-size:12px; color:var(--dk-muted); padding:6px 4px 0; }