/* ===== Team chat (js/team-chat.js) =====
   The list is cards of rows, like Settings. A conversation reuses the
   assistant's page (.ai-page / .ai-log / .ai-msg / .ai-input-row), so the two
   read as one app; only who is speaking differs. */

.tc-list{display:flex;flex-direction:column;gap:14px;max-width:760px}
.tc-actions{display:flex;gap:8px;flex-wrap:wrap}
.tc-actions .btn .ic{width:18px;height:18px}
.tc-card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.tc-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;min-height:68px;color:var(--ink);text-align:left;
  background:none;border:none;font:inherit;cursor:pointer;position:relative}
.tc-row + .tc-row::before{content:"";position:absolute;top:0;left:70px;right:0;border-top:1px solid var(--line-2)}
.tc-row:hover{background:color-mix(in srgb, var(--line-2) 50%, transparent)}
.tc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tc-line{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.tc-line b{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-last{color:var(--ink-soft);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tc-when{color:var(--ink-faint);font-size:12px;flex-shrink:0;font-variant-numeric:tabular-nums}
.tc-pin{color:var(--accent-ink);font-size:12px;font-weight:700;flex-shrink:0}
.tc-dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex-shrink:0}
/* Unread messages, on the avatar's corner as WeChat has them. */
.tc-avw{position:relative;flex-shrink:0;display:flex}
.tc-count{position:absolute;top:-6px;right:-7px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--red);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;
  box-shadow:0 0 0 2px var(--card);font-variant-numeric:tabular-nums}
.tc-ava{width:44px;height:44px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:15px}
.tc-ava.grp{background:var(--blue-soft);color:var(--blue)}
.tc-ava.ai{background:var(--accent);color:#fff}
.tc-ava .ic{width:22px;height:22px}
.tc-note{margin:0 4px;font-size:13px}

/* Pickers in a sheet: a person to talk to, the people in a group. */
.tc-pick{display:flex;flex-direction:column;margin:0 -6px}
.tc-pick .tc-row{min-height:60px;padding:8px 6px;border-radius:12px}
.tc-pick .tc-row + .tc-row::before{left:62px}
.tc-pick input[type=checkbox]{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}
.tc-sub{font-size:13px;font-weight:600;color:var(--ink-soft);margin:4px 0 6px}

/* One conversation. */
.tc-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line-2);min-height:56px}
.tc-head b{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-head .faint{font-size:13px;white-space:nowrap}
.tc-back,.tc-edit{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;color:var(--ink);
  background:none;border:none;cursor:pointer;flex-shrink:0}
.tc-back:hover,.tc-edit:hover{background:var(--line-2)}
.tc-back .ic{width:24px;height:24px}
.tc-edit{margin-left:auto}
.tc-log{display:flex;flex-direction:column;overflow-y:auto}
.tc-msg{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:min(68ch,86%)}
.tc-msg.me{align-self:flex-end;align-items:flex-end}
.tc-msg .ai-msg{max-width:100%;overflow-wrap:anywhere}
.tc-from{font-size:12px;font-weight:600;color:var(--ink-faint);padding:0 4px}
.tc-img{display:block;max-width:min(260px,100%);max-height:320px;border-radius:12px;cursor:zoom-in}
.tc-img + *{margin-top:6px}
.tc-time{align-self:center;font-size:12px;color:var(--ink-faint);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.tc-state{font-size:12px;color:var(--ink-faint);padding:0 4px;background:none;border:none;font:inherit;font-size:12px}
.tc-state.bad{color:var(--red);font-weight:700;cursor:pointer}
.tc-loading{align-self:center;margin:auto 0;text-align:center}
.tc-photo{min-height:44px;width:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.tc-photo .ic{width:20px;height:20px}
@media (max-width:720px){
  .tc-head{padding:6px 2px}
}

/* Said in the chat → a record: the assistant's card under your own message,
   and, once saved, a note under it for everyone. */
.tc-rec{max-width:100%;width:min(380px,100%);text-align:left;margin-top:4px}
.tc-recorded{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--green-ink);
  background:var(--green-soft);border-radius:999px;padding:3px 10px;margin-top:2px}
.tc-recorded .ic{width:14px;height:14px}
.tc-recorded.off{color:var(--ink-faint);background:var(--line-2)}
/* @Assistant's answer in a conversation. */
.tc-ai{border:1.5px solid var(--accent-soft)}
.tc-from .ic{width:13px;height:13px;vertical-align:-2px;color:var(--accent)}
/* The owner's Today: what came in through chat. */
.tc-digest{display:flex;flex-direction:column;gap:4px;padding:14px 16px;margin-bottom:16px;color:var(--ink)}
.tc-digest b{display:flex;align-items:center;gap:8px;font-size:15px}
.tc-digest b .ic{width:18px;height:18px;color:var(--accent)}
/* Venue notices for staff: read here, posted by the owner and managers. */
.tc-readonly{padding:14px 18px;text-align:center;font-size:13.5px}
.tc-title{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1;background:none;border:0;padding:6px 0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tc-title b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-info-name{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tc-info-name b{display:block;font-size:17px}
.tc-info-name .faint{font-size:13px}
/* New chat · New group: one row, the width of the list under them, each half
   (one button alone takes the whole row). */
.tc-actions{display:flex;gap:10px}
.tc-actions > .btn{flex:1 1 0;justify-content:center;min-width:0}
/* A group's name gets the whole line, its "Everyone in the restaurant ›"
   under it: side by side, the name was cut to "Venue n…". */
.tc-title{flex-direction:column;align-items:flex-start;gap:1px}
.tc-title b{max-width:100%}
.tc-title .faint{font-size:12.5px}