/* ---- Base ---- */
body{ min-height:100vh; }
.navbar-brand{ color:#682acd; }
.btn-primary{ background:#682acd; border-color:#682acd; }

/* ===== Tiendomi Inbox (estilos scopeados) ===== */
:root{
  --ti-bg:#f6f7fb;
  --ti-card:#ffffff;
  --ti-text:#1f2937;
  --ti-muted:#6b7280;
  --ti-border:#e5e7eb;
  --ti-accent:#7c3aed; /* morado amable estilo referencia */
  --ti-accent-soft:#ede9fe;
  --ti-success:#10b981;
}

/* GRID principal (3 columnas) */
.ti-inbox{
  display:grid;
  grid-template-columns: 260px 2fr 300px;
  gap:16px;
  min-height:calc(100vh - 140px);
}
.ti-inbox__list,
.ti-inbox__chat,
.ti-inbox__info{
  background:var(--ti-card);
  border:1px solid var(--ti-border);
  border-radius:12px;
  overflow:hidden;
  flex-direction: column;
}

/* LISTA (columna izquierda) */
.ti-inbox__list-header{ padding:12px; border-bottom:1px solid var(--ti-border); }
.ti-inbox__title{ font-weight:700; color:var(--ti-text); margin-bottom:8px; }
.ti-inbox__search{ display:flex; gap:8px; }
.ti-inbox__search input{
  flex:1; border:1px solid var(--ti-border); border-radius:10px; padding:8px 10px; background:#fff;
}
.ti-inbox__icon-btn{
  min-width:38px; border:1px solid var(--ti-border); background:#fff; border-radius:10px;
}
.ti-inbox__tabs{ margin-top:10px; display:flex; gap:8px; }
.ti-inbox__tabs button{
  border:none; background:transparent; padding:6px 10px; border-radius:999px; color:var(--ti-muted);
}
.ti-inbox__tabs .active{ background:var(--ti-accent-soft); color:var(--ti-accent); font-weight:600; }

.ti-inbox__items{ list-style:none; margin:0; padding:0; max-height:calc(100% - 92px); overflow:auto; }
.ti-inbox__item{ border-bottom:1px solid var(--ti-border); cursor:pointer; }
.ti-inbox__item:hover{ background:#fafafa; }
.ti-inbox__item-main{ display:flex; gap:10px; padding:12px; }
.ti-inbox__avatar{ width:28px; height:28px; border-radius:50%; background:#eef2ff; color:#4f46e5; display:grid; place-items:center; font-size:12px; font-weight:700; }
.ti-inbox__avatar.lg{ width:36px; height:36px; font-size:14px; }
.ti-inbox__item-texts{ flex:1; min-width:0; }
.ti-inbox__name{ font-weight:600; color:var(--ti-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ti-inbox__preview{ color:var(--ti-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.ti-inbox__meta{ display:flex; gap:8px; align-items:center; margin-top:6px; font-size:12px; color:var(--ti-muted); }
.ti-inbox__chip{ border:1px solid var(--ti-border); border-radius:8px; padding:2px 6px; font-size:11px; background:#fff; }
.ti-inbox__chip.whatsapp{ border-color:#d1fae5; background:#ecfdf5; color:#059669; }
.ti-inbox__chip.instagram{ border-color:#ffe4e6; background:#fff1f2; color:#db2777; }
.ti-inbox__chip.messenger{ border-color:#dbeafe; background:#eff6ff; color:#2563eb; }
.ti-inbox__badge{ background:#ef4444; color:#fff; border-radius:10px; padding:0 6px; font-size:11px; }
.ti-inbox__time{ margin-left:auto; }
aside.ti-inbox__list,aside.ti-inbox__info{font-size: 13px;}

/* Hooks para tu JS (click en lista) */
#conversation-list .conv{ cursor:pointer; }
#conversation-list .conv.active,
#conversation-list .conv:hover{ background:#f9fafb; }

/* CHAT (columna central) */
.ti-inbox__chat{
  position:relative;          /* FIX: evita superposiciones */
  display:flex;
  overflow:hidden;            /* contén hilo y composer */
}
.ti-inbox__chat-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--ti-border);
}
.ti-inbox__assign{
  background:var(--ti-accent-soft); color:var(--ti-accent); padding:6px 10px; border-radius:8px; font-weight:600;
}
.ti-inbox__close{
  border:1px solid var(--ti-border); background:#fff; border-radius:8px; padding:6px 10px; color:var(--ti-text);
}

/* Hilo de mensajes */
.ti-inbox__thread{
  flex:1;
  min-height:300px;
  padding:16px;
  overflow-y:auto;
  background:#fafafa;         /* FIX: fondo limpio */
  display:flex;
  flex-direction:column;
  font-size: 14px;
}

/* Burbujas */
.ti-msg{ display:flex; flex-direction:column; margin:8px 0; max-width:72%; }
.ti-msg.in{  align-self:flex-start; }
.ti-msg.out{ align-self:flex-end; }
.ti-bubble{ padding:10px 12px; border-radius:16px; line-height:1.35; background:#f3f4f6; color:var(--ti-text); }
.ti-msg.out .ti-bubble{ background:var(--ti-accent-soft); color:#4c1d95; border:1px solid #ddd6fe; }
.ti-ts{ margin-top:4px; font-size:12px; color:var(--ti-muted); }

/* Composer */
.ti-inbox__composer{
  border-top:1px solid var(--ti-border);
  padding:12px;
  display:flex;
  gap:8px;
  align-items:center;
}
.ti-inbox__composer input{
  flex:1;
  height:auto;                /* FIX: evita crecer en vertical */
  min-height:40px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--ti-border);
  background:#fff;
}
.ti-inbox__send{
  padding:10px 14px;
  border:none;
  border-radius:12px;
  background:var(--ti-accent);
  color:#fff;
}
.ti-inbox__composer--empty{ justify-content:center; color:var(--ti-muted); }

/* PANEL DERECHO (info) */
.ti-inbox__info{ padding:12px; overflow:visible; /* FIX: que no se “meta” sobre el chat */ }
.ti-card{ border:1px solid var(--ti-border); border-radius:12px; padding:12px; background:#fff; }
.ti-card__header{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.ti-card__title{ font-weight:700; }
.ti-card__subtitle{ font-size:12px; color:var(--ti-muted); }

.ti-card__row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--ti-border); }
.ti-card__row:last-child{ border-bottom:none; }
.ti-card__label{ color:var(--ti-muted); }
.ti-card__value{ font-weight:600; }

.ti-accordion{ border-top:1px solid var(--ti-border); padding-top:8px; margin-top:8px; }
.ti-accordion summary{ cursor:pointer; font-weight:700; color:var(--ti-text); }
.ti-acc__body{ padding:8px 0 6px; }
.ti-acc__body.muted{ color:var(--ti-muted); }
.ti-pill{ border:1px dashed var(--ti-accent); background:var(--ti-accent-soft); color:var(--ti-accent); border-radius:999px; padding:4px 10px; font-size:12px; }

/* ===== COMPAT: aplicar el look nuevo también a la estructura legacy ===== */
/* Contenedor del hilo */
#thread{ background:#fafafa; }

/* Cada mensaje */
#thread .msg{
  display:flex;
  flex-direction:column;
  margin:8px 0;
  max-width:72%;
}
#thread .msg.in{  align-self:flex-start; }
#thread .msg.out{ align-self:flex-end; }

/* La “burbuja” */
#thread .msg .bubble{
  padding:10px 12px;
  border-radius:16px;
  line-height:1.35;
  background:#f3f4f6;
  color:var(--ti-text);
}
#thread .msg.out .bubble{
  background:var(--ti-accent-soft);
  color:#4c1d95;
  border:1px solid #ddd6fe;
}

/* Timestamp/meta */
#thread .msg .meta{
  margin-top:4px;
  font-size:12px;
  color:var(--ti-muted);
}