/* Timmy Companion — reusable TSF platform presentation component (UI foundation).
   Scope: .tc* only. The surrounding card is provided by the host surface, so the
   same component renders inside the TS01 right panel and the Timmy Settings
   previews without owning layout outside its own block.

   Responsive presentation sizing (handbook v1.2 §15): large workspace → larger
   presentation (--large), contextual panel → medium (--panel), narrow panel →
   compact (--compact). Host media queries may further reduce the panel variant. */

.tc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.tc-avatar {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}

.tc-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.tc-online {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35);
}

.tc-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tc-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tc-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}

.tc-presence {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 0 6px;
  line-height: 1.6;
}

.tc-status {
  font-size: 10.5px;
  color: #94a3b8;
}

.tc-greeting {
  font-size: 11.5px;
  line-height: 1.4;
  color: #475569;
}

.tc-actions {
  flex: 1 1 100%;
  margin-left: 0;
}

.tc-action {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}

.tc-action:hover {
  background: #f8fafc;
}

/* ---- Presentation variants ---- */
.tc--compact {
  gap: 8px;
}

.tc--compact .tc-avatar {
  width: 32px;
  height: 32px;
}

.tc--compact .tc-online {
  width: 9px;
  height: 9px;
}

.tc--compact .tc-greeting {
  display: none;
}

.tc--compact .tc-actions {
  flex: 1 1 100%;
  margin-left: 0;
}

.tc--panel .tc-avatar {
  width: 44px;
  height: 44px;
}

.tc--large {
  gap: 12px;
}

.tc--large .tc-avatar {
  width: 64px;
  height: 64px;
}

.tc--large .tc-name {
  font-size: 15px;
}

.tc--large .tc-status {
  font-size: 11px;
}

.tc--large .tc-greeting {
  font-size: 12px;
}

.tc--large .tc-action {
  padding: 7px 14px;
}