/* inbox.claryt.com — o que é do inbox e vale para todas as páginas. Vem depois do site.css (a folha do
   claryt.com copiada como está, que é a base da identidade) e antes das folhas de página (css/<página>.css).
   Mesmas cores do tema escuro do site.css; nada de cor nova sem função (azul = informação/foco,
   verde = concluído, âmbar = atenção, sempre acompanhados de texto). */

/* ── marca: o nome da oferta fica SEPARADO do logo, depois de um fio ── */
.inbox-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.offer-name {
  padding-left: 14px;
  border-left: 1px solid #3c3e45;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #d9dadf;
}
/* no rodapé o logo é célula da grade: sem isto ele estica e o flex o centraliza na altura da coluna mais alta */
.footer-top > .inbox-logo { align-self: start; }
@media (max-width: 800px) {
  .inbox-logo { gap: 11px; }
  .offer-name { padding-left: 11px; font-size: .9375rem; }
}
/* celular estreito: o nome da oferta encolhe para logo, Menu e "Vamos conversar" caberem numa linha só (375 px) */
@media (max-width: 400px) {
  .inbox-logo { gap: 8px; }
  .offer-name { padding-left: 8px; font-size: .8125rem; }
}

/* ── tela ilustrativa do inbox (src/mock.tsx) ── */
.ibx-window {
  margin: 0;
}
.ibx-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #1a1b1e;
  min-height: 0;
}
.ibx-body.has-list { grid-template-columns: 230px minmax(0, 1fr); }
.ibx-body.has-side { grid-template-columns: minmax(0, 1fr) 210px; }
.ibx-body.has-list.has-side { grid-template-columns: 210px minmax(0, 1fr) 200px; }

.ibx-list {
  border-right: 1px solid #383a42;
  min-width: 0;
}
.ibx-list-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #383a42;
  font: 400 .6875rem/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a3a6b2;
}
.ibx-conv {
  display: grid;
  gap: 4px;
  padding: 11px 14px;
  border-bottom: 1px solid #2f3137;
}
.ibx-conv.is-current {
  background: #24262c;
  box-shadow: inset 2px 0 #8abaff;
}
.ibx-conv-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: .8125rem;
}
.ibx-conv-top strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #eceef3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ibx-conv-top time {
  flex-shrink: 0;
  font: 400 .6875rem var(--mono);
  color: #9a9dab;
}
.ibx-unread {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8abaff;
  flex-shrink: 0;
}
.ibx-conv > p {
  font-size: .75rem;
  line-height: 1.45;
  color: #a9acb8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ibx-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font: 400 .6875rem/1.4 var(--mono);
  letter-spacing: .06em;
  color: #9a9dab;
}

.ibx-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ibx-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #383a42;
}
.ibx-thread-head strong {
  font-size: .875rem;
  font-weight: 550;
  color: #eef0f5;
}
.ibx-thread-head small {
  display: block;
  margin-top: 3px;
  font: 400 .6875rem/1.4 var(--mono);
  letter-spacing: .06em;
  color: #9fa3b0;
}

.ibx-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.ibx-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 80%;
}
.ibx-msg.in { align-self: flex-start; }
.ibx-msg.out { align-self: flex-end; align-items: flex-end; }
.ibx-who {
  font: 400 .6875rem/1.4 var(--mono);
  letter-spacing: .08em;
  color: #9fa3b0;
}
.ibx-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid #393b42;
  border-radius: 10px;
  background: #24262b;
  color: #e6e8ee;
  font-size: .8125rem;
  line-height: 1.5;
}
.ibx-msg.in .ibx-bubble { border-bottom-left-radius: 3px; }
.ibx-msg.out .ibx-bubble {
  background: #2c2f36;
  border-color: #4a4e58;
  border-bottom-right-radius: 3px;
}
.ibx-msg.agent .ibx-bubble {
  background: #18263a;
  border-color: #2f4a6d;
  color: #dbe8fb;
}
.ibx-msg.note .ibx-bubble {
  background: #2b2517;
  border-color: #5a4a22;
  border-style: dashed;
  color: #f0dfb2;
}
.ibx-msg.note .ibx-who { color: #d9c48e; }
.ibx-time {
  font: 400 .6875rem var(--mono);
  color: #8e92a0;
}
.ibx-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 .75rem/1.4 var(--mono);
  color: #c9ccd6;
}
.ibx-transcript {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 9px;
  border-left: 2px solid #4a4e58;
  font-size: .75rem;
  color: #b4b8c4;
}
.ibx-event {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 .6875rem/1.5 var(--mono);
  letter-spacing: .06em;
  color: #a3a7b4;
  text-align: center;
}
.ibx-event::before,
.ibx-event::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #34363d;
}
.ibx-event.info { color: #b9d8ff; }
.ibx-event.warning { color: #f0d28b; }
.ibx-event.success { color: #a7dfbf; }
.ibx-tool {
  align-self: flex-end;
  padding: 5px 9px;
  border: 1px dashed #36577f;
  border-radius: 6px;
  font: 400 .6875rem/1.5 var(--mono);
  letter-spacing: .04em;
  color: #a9c4e8;
}

/* cartões centrados (Msg kind "help" e "instruction"): a situação vem no rótulo; a cor só acompanha —
   âmbar = pedido de ajuda pendente (o tom da nota interna), verde = respondido (.badge.success), grafite = instrução */
.ibx-card {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: min(100%, 400px);
  padding: 9px 12px;
  border: 1px solid #4a4e58;
  border-radius: 8px;
  background: #24262b;
}
.ibx-card-head {
  font: 400 .6875rem/1.45 var(--mono);
  letter-spacing: .06em;
  color: #c9ccd6;
}
.ibx-card-text {
  font-size: .8125rem;
  line-height: 1.5;
  color: #e6e8ee;
}
.ibx-card .ibx-time { align-self: flex-end; }
.ibx-card.is-help {
  background: #2b2517;
  border-color: #5a4a22;
}
.ibx-card.is-help .ibx-card-head { color: #f0d28b; }
.ibx-card.is-answered {
  background: #1c3c2f;
  border-color: #2f5a45;
}
.ibx-card.is-answered .ibx-card-head { color: #a7dfbf; }

/* faixa sob o cabeçalho da conversa (ThreadBanner): encaminhamento, situação da conversa */
.ibx-banner {
  padding: 8px 16px;
  border-bottom: 1px solid #383a42;
  font: 400 .6875rem/1.5 var(--mono);
  letter-spacing: .06em;
  color: #b9d8ff;
}

.ibx-composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 10px 14px 12px;
  border-top: 1px solid #383a42;
}
.ibx-composer-tabs {
  display: flex;
  gap: 16px;
  font: 400 .6875rem/1.4 var(--mono);
  letter-spacing: .08em;
  color: #8f93a1;
}
.ibx-composer-tabs .on { color: #eef0f5; }
.ibx-composer-field {
  padding: 8px 10px;
  border: 1px solid #444751;
  border-radius: 6px;
  font-size: .75rem;
  color: #8f93a1;
}
.ibx-composer-field.has-text { color: #e6e8ee; }

.ibx-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  border-left: 1px solid #383a42;
  min-width: 0;
}
.ibx-facts dl { margin: 8px 0 0; }
.ibx-facts dl > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 0;
  border-top: 1px solid #34363d;
  font-size: .75rem;
}
.ibx-facts dt { color: #9fa3b0; }
.ibx-facts dd { margin: 0; color: #e3e5ec; }

.ibx-channel {
  font: 400 .6875rem/1.4 var(--mono);
  letter-spacing: .08em;
  color: #b6bac6;
}

/* no tablet a coluna lateral sai; no celular sai também a lista — fica a conversa */
@media (max-width: 1100px) {
  .ibx-body.has-side { grid-template-columns: minmax(0, 1fr); }
  .ibx-body.has-list.has-side { grid-template-columns: 200px minmax(0, 1fr); }
  .ibx-side { display: none; }
}
@media (max-width: 800px) {
  .ibx-body.has-list,
  .ibx-body.has-list.has-side { grid-template-columns: minmax(0, 1fr); }
  .ibx-list { display: none; }
  .ibx-msg { max-width: 88%; }
  .ibx-thread { padding: 14px 12px; }
}