/* Support inbox: three panes (list | conversation | context). Tokens come from styles.css. */

.ib-tabs { margin-bottom: 10px; }
.ib-count { margin-left: 6px; }
.ib-search { margin-bottom: 12px; max-width: 520px; }

.ib-layout { display: grid; gap: 14px; align-items: start; grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.6fr) minmax(230px, 0.9fr); grid-template-areas: 'list conv ctx'; }
.ib-layout:not(.has-selection) { grid-template-areas: 'list conv conv'; }
.ib-list { grid-area: list; margin-bottom: 0; max-height: calc(100vh - 250px); min-height: 220px; overflow-y: auto; }
.ib-conv { grid-area: conv; margin-bottom: 0; min-height: 320px; }
.ib-ctx { grid-area: ctx; display: flex; flex-direction: column; min-width: 0; }
.ib-ctx .card { margin-bottom: 12px; }
.ib-pad { padding: 12px 14px; }
.ib-pad .state { margin: 0; }

/* list */
.ib-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: inherit; font: inherit; padding: 12px 14px; cursor: pointer; }
.ib-item:hover { background: var(--surface-2); }
.ib-item:focus-visible { outline-offset: -2px; }
.ib-item.is-selected { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.ib-items > [role='listitem']:last-child .ib-item { border-bottom: 0; }
.ib-avatar { width: 30px; height: 30px; margin-top: 2px; }
.ib-item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ib-row { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.ib-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-time { flex: none; white-space: nowrap; }
.ib-topic { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ib-item.is-unread .ib-topic { color: var(--text); font-weight: 600; }
.ib-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.ib-sub { color: var(--info); overflow-wrap: anywhere; }
.ib-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 8px; }

/* conversation */
.ib-conv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ib-conv-title { font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; outline: none; }
.ib-conv-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.ib-back { display: none; }
.ib-bubble, .ib-sent { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.ib-sent { border-left: 3px solid var(--info); }
.ib-from { margin-bottom: 8px; overflow-wrap: anywhere; }
.ib-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-composer textarea { min-height: 150px; }
.ib-honest { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); margin: -4px 0 12px; }
.ib-honest .icon { margin-top: 3px; color: var(--info); }
.ib-reply-status:empty { display: none; }
.ib-reply-status .notice { margin: 12px 0 0; }
.ib-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 260px; color: var(--muted); text-align: center; }

/* context */
.ib-person { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ib-email { overflow-wrap: anywhere; }
.ib-kv .kv-row { grid-template-columns: minmax(80px, 36%) minmax(0, 1fr); padding: 6px 0; }
.ib-others { margin-top: 6px; }
.ib-other-list { list-style: none; margin: 0; padding: 0; }
.ib-other { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--border); color: var(--text); font: inherit; padding: 8px 0; cursor: pointer; }
.ib-other:hover .ib-other-topic { text-decoration: underline; }
.ib-snooze, .ib-canned { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-hint { margin-top: 8px; }

/* two panes: context sits under the conversation */
@media (max-width: 1279px) {
  .ib-layout, .ib-layout:not(.has-selection) { grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.6fr); grid-template-areas: 'list conv' 'list ctx'; }
  .ib-list { max-height: calc(100vh - 220px); grid-row: 1 / span 2; }
}

/* one pane on a phone: the list, or the open message with its context below */
@media (max-width: 760px) {
  .ib-layout, .ib-layout:not(.has-selection) { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'list' 'conv' 'ctx'; }
  .ib-list { max-height: none; grid-row: auto; }
  .ib-layout:not(.has-selection) .ib-conv, .ib-layout:not(.has-selection) .ib-ctx { display: none; }
  .ib-layout.has-selection .ib-list { display: none; }
  .ib-back { display: inline-flex; }
  .ib-conv-actions { margin-left: 0; width: 100%; }
  .ib-conv { min-height: 0; }
}