.mobile-back { display: none; }

.inbox-layout {
  display: grid;
  grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr);
  min-height: 39rem;
  overflow: clip;
}

.conversation-column { min-width: 0; border-inline-end: 1px solid var(--color-line); }
.filter-bar { display: grid; gap: var(--space-xs); padding: var(--space-sm); border-block-end: 1px solid var(--color-line); }
.conversation-list { display: grid; margin: 0; padding: 0; list-style: none; }

.conversation {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: var(--space-sm);
  width: 100%;
  min-height: 6.2rem;
  padding: var(--space-md);
  border: 0;
  border-block-end: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: start;
}

.conversation[aria-current="true"] { background: var(--color-brand-50); box-shadow: inset 3px 0 0 var(--color-brand-600); }

.conversation-avatar {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface-hover);
  color: var(--color-brand-800);
  font-size: var(--text-xs);
  font-weight: 600;
}

.conversation-main { min-width: 0; }
.conversation-main strong,
.conversation-main span { display: block; }
.conversation-main strong { font-size: var(--text-sm); }
.conversation-main span {
  overflow: hidden;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-meta { display: grid; justify-items: end; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.unread-count { display: grid; min-width: 1.3rem; height: 1.3rem; place-items: center; border-radius: var(--radius-pill); background: var(--color-brand-700); color: var(--color-on-dark); font-weight: 700; }

.chat-panel { display: grid; grid-template-rows: auto minmax(18rem, 1fr) auto; min-width: 0; background: var(--color-app-bg); }
.chat-header,
.composer { padding: var(--space-md) var(--space-lg); background: var(--color-surface); }
.chat-header { display: flex; align-items: center; gap: var(--space-sm); border-block-end: 1px solid var(--color-line); }
.chat-header > div { min-width: 0; flex: 1; }
.chat-header p { color: var(--color-muted); font-size: var(--text-xs); }

.messages { display: flex; flex-direction: column; gap: var(--space-sm); min-height: 0; padding: var(--space-lg); overflow-y: auto; }
.message { align-self: flex-start; max-width: min(76%, 36rem); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); }
.message.outbound { align-self: flex-end; border-color: var(--color-brand-200); background: var(--color-brand-100); color: var(--color-ink); }
.message small { display: block; margin-block-start: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.message.outbound small { color: var(--color-muted); }

.ai-suggestion { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-gold-300); border-radius: var(--radius-md); background: var(--color-gold-50); color: var(--color-warning); font-size: var(--text-sm); }
.composer { display: grid; gap: var(--space-sm); border-block-start: 1px solid var(--color-line); }
.composer-actions { display: flex; justify-content: space-between; gap: var(--space-sm); }

@media (hover: hover) and (pointer: fine) {
  .conversation:hover { background: var(--color-brand-50); }
}