/* ============================================================================
   /client/chats — Chats del cliente (DS Bauhaus) · refs Figma 286:11109 · 333:1540
   Layout de dos paneles: lista de conversaciones (izq) + hilo (der).
   Solo tokens del DS; radius 0 (excepciones: avatar 999px, badge píldora 2px).
   ========================================================================== */

/* ---------- Topbar (ajustes de anchors del DS) ---------- */
.wo-app a.wo-o-tile{color:var(--neutral-500);text-decoration:none}
.wo-app a.wo-o-tile:hover{color:var(--neutral-500);text-decoration:none;background:var(--yellow-400)}

/* ---------- Shell de página (los paneles scrollean, la página no) ---------- */
.cch-main{display:flex;flex-direction:column;height:calc(100vh - 64px);height:calc(100dvh - 64px);overflow:hidden}
.cch-shell{flex:1;display:flex;min-height:0}

/* ---------- Carga ---------- */
.cch-loading{flex:1;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8)}
.cch-loading .wo-skeleton{height:72px}

/* ---------- Estado vacío a página completa (ref 286:11109) ---------- */
.cch-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-8);text-align:center}
.cch-empty-icon{width:40px;height:40px;color:var(--ink)}
.cch-empty-icon svg{width:100%;height:100%}
.cch-empty-title{font-family:var(--font-display);font-size:var(--title-lg-size);line-height:1.12;letter-spacing:var(--h1-track);color:var(--text-heading);max-width:960px;margin:0}
.cch-empty-sub{font-size:var(--body-s-size);line-height:var(--body-s-lh);color:var(--text-muted);max-width:480px;margin:0}
.cch-empty .wo-btn{margin-top:var(--space-4)}

/* ---------- Columna izquierda · lista de conversaciones ---------- */
.cch-list{width:360px;flex:none;display:flex;flex-direction:column;min-height:0;border-right:var(--border-strong-width) solid var(--border-strong)}
.cch-search{position:relative;padding:var(--space-4);border-bottom:var(--border-hairline) solid var(--border-subtle)}
.cch-search [data-wo-icon]{position:absolute;left:calc(var(--space-4) + var(--space-3));top:50%;transform:translateY(-50%);color:var(--neutral-400);pointer-events:none}
.cch-search .wo-input{border:var(--border-strong-width) solid var(--border-strong);background:var(--surface-card);padding-left:var(--space-10)}
.cch-search .wo-input:focus{padding-left:var(--space-10)}

.cch-tabs{display:flex;gap:var(--space-4);padding:0 var(--space-4);border-bottom:var(--border-hairline) solid var(--border-subtle)}
.cch-tab{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--neutral-400);background:transparent;border:0;border-bottom:var(--border-strong-width) solid transparent;padding:var(--space-3) 0;cursor:pointer;white-space:nowrap}
.cch-tab:hover{color:var(--neutral-500)}
.cch-tab.is-active,.cch-tab[aria-pressed="true"]{color:var(--neutral-500);border-bottom-color:var(--accent)}

.cch-rows{flex:1;overflow-y:auto;min-height:0}
.cch-row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;width:100%;box-sizing:border-box;padding:var(--space-4);background:transparent;border:0;border-bottom:var(--border-hairline) solid var(--border-subtle);text-align:left;cursor:pointer;font-family:var(--font-body)}
.cch-row:hover{background:var(--sand-050)}
.cch-row.is-active{background:var(--neutral-200)}
.cch-row-main{display:block;min-width:0}
.cch-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.cch-row-name{font-size:var(--body-s-size);font-weight:var(--weight-bold);color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cch-row-time{flex:none;font-family:var(--font-mono);font-size:11px;color:var(--text-faint)}
.cch-row-aff{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-top:var(--space-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cch-row-bottom{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}
.cch-row-preview{flex:1;min-width:0;font-size:var(--body-s-size);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cch-unread{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 var(--space-1);box-sizing:border-box;background:var(--ink);color:var(--white);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums}
.cch-list .wo-empty{padding:var(--space-10) var(--space-6)}

/* ---------- Avatar circular con iniciales (excepción 999px del DS) ---------- */
.cch-avatar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--yellow-300);color:var(--neutral-500);font-family:var(--font-display);font-size:15px;text-transform:uppercase;flex:none}

/* ---------- Columna derecha · hilo ---------- */
.cch-thread{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.cch-thread-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);color:var(--text-muted);text-align:center;padding:var(--space-8)}
.cch-thread-body{flex:1;display:flex;flex-direction:column;min-height:0}

.cch-thread-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-6);border-bottom:var(--border-hairline) solid var(--border-subtle)}
.cch-back{display:none}
.cch-head-main{min-width:0}
.cch-head-top{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.cch-head-name{font-family:var(--font-display);font-size:20px;color:var(--text-heading);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cch-head-sub{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin:var(--space-1) 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cch-head-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-3);flex:none}
.wo-app a.cch-head-link{font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--neutral-500)}
.wo-app a.cch-head-link:hover{color:var(--ink)}

/* Tag compacto (header y banner) */
.cch-tag-s{padding:5px 10px;font-size:11px;white-space:nowrap}

/* ---------- Banner del proyecto (franja beige) ---------- */
.cch-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);background:var(--surface-media);border-bottom:var(--border-strong-width) solid var(--border-strong)}
.cch-banner.is-collapsed{display:none}
.cch-banner-main{min-width:0}
.cch-banner-title{font-family:var(--font-display);font-size:var(--h3-size);line-height:var(--h3-lh);color:var(--text-heading);margin:var(--space-1) 0}
.cch-banner-meta{color:var(--text-muted);margin:0}

/* ---------- Timeline de mensajes ---------- */
.cch-messages{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6)}
.cch-day{align-self:center;font-family:var(--font-mono);font-size:var(--meta-s-size);letter-spacing:var(--meta-s-track);text-transform:uppercase;color:var(--text-faint);margin:var(--space-2) 0}
.cch-msg{max-width:min(72%,560px);padding:var(--space-3) var(--space-4);font-size:var(--body-m-size);line-height:var(--body-m-lh);border-radius:var(--radius-none);word-break:break-word;white-space:pre-line}
.cch-msg--out{align-self:flex-end;background:var(--surface-inverse);color:var(--white)}
.cch-msg--in{align-self:flex-start;background:var(--surface-media);color:var(--neutral-500)}
.cch-messages-empty{align-self:center;margin:auto;color:var(--text-muted);font-size:var(--body-s-size);text-align:center}

/* ---------- Composer ---------- */
.cch-composer{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:var(--border-strong-width) solid var(--border-strong)}
.cch-composer .wo-input{flex:1;border:var(--border-strong-width) solid var(--border-strong);background:var(--surface-card)}
.cch-composer .wo-input:focus{padding:var(--field-padding-y) var(--field-padding-x)}
.cch-send{flex:none}
.cch-composer-error{padding:0 var(--space-6) var(--space-3);color:var(--status-error-fg);font-size:var(--body-s-size)}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .cch-list{width:100%;border-right:0}
  .cch-thread{display:none}
  .cch-shell.is-thread-open .cch-list{display:none}
  .cch-shell.is-thread-open .cch-thread{display:flex}
  .cch-back{display:inline-flex}
  .cch-empty-title{font-size:var(--h3-size)}
  .cch-thread-head{flex-wrap:wrap;padding:var(--space-3) var(--space-4)}
  .cch-head-link{display:none}
  .cch-banner{flex-wrap:wrap;padding:var(--space-3) var(--space-4)}
  .cch-messages{padding:var(--space-4)}
  .cch-msg{max-width:88%}
  .cch-composer{padding:var(--space-3) var(--space-4)}
  .cch-composer .cch-send-label{display:none}
}