/* ---------- inbox (.ib-) ---------- */
/* page: page bar over a two-pane card that fills the rest of the viewport */
.page.ib-page { max-width: none; height: calc(100vh - var(--topbar-h) - 48px); min-height: 460px; gap: 12px; container: ib-page / inline-size; }
.ib-search { flex: 0 1 240px; width: 240px; min-width: 150px; }
.select.ib-account { width: auto; max-width: 220px; flex: 0 1 auto; }
.btn.ib-sync { margin-left: auto; }
.ib-panes { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); overflow: hidden; }
.ib-panes > * { min-width: 0; min-height: 0; }
.ib-list { border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface); }
.ib-detail { overflow-y: auto; display: flex; flex-direction: column; background: var(--bg); }

.ib-items:focus { outline: none; }
.ib-list-pad { padding: 10px; }
.ib-list-pad > .card { border: 0; }
.ib-list-foot { padding: 10px 14px; text-align: center; }
.ib-item-meta { gap: 5px; min-width: 0; }
.ib-snippet { color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.ib-item-tags { gap: 4px; margin-top: 4px; }
.ib-item-tags .tag { gap: 4px; }
.ib-item-tags .avatar.xs { --size: 14px; font-size: 7px; }
.ib-max-120 { max-width: 120px; }
.inbox-item .avatar > .pbadge { border-color: var(--surface); }

.ib-stars { color: var(--warning); letter-spacing: 1px; font-size: 12px; line-height: 1.2; }
.ib-stars-off { color: var(--border-strong); }

/* detail pane */
.ib-detail-pad { padding: 20px; }
.ib-placeholder { margin: auto; }
.ib-back { display: none; align-self: flex-start; margin-left: -6px; }
.ib-detail-head {
  position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.ib-who { gap: 12px; align-items: center; }
.ib-who h2 { font-size: 16px; }
.ib-who .tag { gap: 4px; }
.ib-actions { gap: 6px; }
.ib-assignee { max-width: 160px; }
.ib-detail-body { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 28px; min-width: 0; }

.ib-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ib-msg { display: flex; gap: 10px; align-items: flex-start; max-width: min(640px, 100%); min-width: 0; }
.ib-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 4px 12px 12px 12px; padding: 9px 12px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ib-bubble-meta { gap: 6px; }
.ib-text { font-size: 13.5px; overflow-wrap: anywhere; }
.ib-msg.is-current .ib-bubble { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 0 0 3px var(--accent-soft); }
.ib-msg.is-out { align-self: flex-end; }
.ib-msg.is-out .ib-bubble { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 12px 4px 12px 12px; }

.ib-reply { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ib-reply .textarea { min-height: 76px; }

.ib-notes { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-lg); border: 1px dashed var(--border-strong); background: color-mix(in srgb, var(--warning) 5%, var(--surface)); }
.ib-notes h3 { font-size: 13px; }
.ib-notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ib-note { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.ib-notes .textarea { min-height: 56px; }

@media (max-width: 1023px) {
  .page.ib-page { height: calc(100vh - var(--topbar-h) - 32px); }
}
@media (max-width: 1100px) {
  .ib-panes { grid-template-columns: 300px minmax(0, 1fr); }
}
/* single pane (keep the width in step with SINGLE_PANE_MAX in inbox.js) */
@container ib-page (max-width: 639.98px) {
  .ib-panes { grid-template-columns: minmax(0, 1fr); }
  .ib-list { border-right: 0; }
  .has-selection .ib-list, :not(.has-selection) > .ib-detail { display: none; }
  .ib-back { display: inline-flex; }
}
/* phones: the page scrolls as a whole instead of the panes */
@media (max-width: 760px) {
  .page.ib-page { height: auto; min-height: 0; }
  .page-bar.ib-bar { position: static; }
  .ib-search { flex: 1 1 160px; width: auto; min-width: 0; order: 5; }
  .btn.ib-sync { order: 6; margin-left: 0; }
  .select.ib-account { flex: 1 1 140px; max-width: none; }
  .ib-panes { overflow: visible; }
  .ib-list { border-radius: var(--r-lg); overflow: visible; }
  .ib-detail { overflow: visible; border-radius: var(--r-lg); }
  .ib-page.has-selection .ib-bar { display: none; }
  .ib-detail-head { top: var(--topbar-h); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 10px 12px; }
  .ib-detail-body { padding: 14px 12px 24px; }
  .ib-detail-pad { padding: 16px 12px; }
  .ib-hide-sm { display: none; }
  .ib-msg { max-width: 100%; }
}
@media (max-width: 480px) {
  .page.ib-page { gap: 10px; }
  .ib-hide-xs { display: none; }
}