/* =====================================================================
   DOMINO — Inbox (unified communications)
   Two-pane: conversation list + reading pane. Loads after domino.css.
   ===================================================================== */

.inbox { height: 100%; display: flex; flex-direction: column; background: var(--canvas); min-height: 0; }
.scroll--flush { overflow: hidden !important; }

/* filter / search bar */
.inbox__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.inbox__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.chan-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--slate-500); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 7px 13px; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.chan-chip:hover { background: var(--neutral-50); color: var(--ink-800); }
.chan-chip.is-active { background: var(--slate-600); color: #fff; }
.chan-chip__dot { width: 8px; height: 8px; border-radius: 50%; }
.chan-chip__n { font-size: 11px; font-weight: 700; opacity: 0.7; }
.chan-chip.is-active .chan-chip__n { opacity: 0.85; }

.inbox__search {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--neutral-50); border: 1px solid var(--hairline);
  border-radius: var(--r-control); padding: 8px 13px; width: 240px;
  color: var(--slate-400);
}
.inbox__search input {
  border: 0; background: transparent; outline: none; flex: 1;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink-900); min-width: 0;
}
.inbox__search svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* panes */
.inbox__panes { flex: 1; display: flex; min-height: 0; }
.inbox__list {
  width: 384px; flex: 0 0 384px;
  border-right: 1px solid var(--hairline);
  overflow-y: auto; background: var(--surface);
  scrollbar-width: thin; scrollbar-color: var(--slate-200) transparent;
}
.inbox__list::-webkit-scrollbar { width: 8px; }
.inbox__list::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 4px; }

/* conversation row */
.conv {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px;
  padding: 14px 18px; cursor: pointer;
  border-bottom: 1px solid var(--hairline-soft);
  border-left: 3px solid transparent;
  transition: background var(--duration-fast) var(--ease-out);
}
.conv:hover { background: var(--neutral-50); }
.conv.is-active { background: color-mix(in oklab, var(--ac) 7%, var(--surface)); border-left-color: var(--ac); }
.conv__avwrap { position: relative; width: 42px; height: 42px; }
.conv__av {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--neutral-100); border: 1px solid var(--hairline);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--slate-600);
}
.conv__badge {
  position: absolute; bottom: -3px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--surface);
  display: grid; place-items: center; color: #fff;
}
.conv.is-active .conv__badge { border-color: color-mix(in oklab, var(--ac) 7%, var(--surface)); }
.conv__badge svg { width: 10px; height: 10px; }
.conv__main { min-width: 0; }
.conv__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conv__name { font-size: 13.5px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.is-unread .conv__name { font-weight: 700; }
.conv__time { font-size: 11px; color: var(--slate-400); flex: 0 0 auto; }
.conv__chan { font-size: 11px; color: var(--slate-400); margin-top: 1px; }
.conv__sub { font-size: 13px; color: var(--ink-800); font-weight: 500; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv.is-unread .conv__sub { font-weight: 600; }
.conv__prev { font-size: 12.5px; color: var(--slate-400); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.conv__row2 { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.conv__unread { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); flex: 0 0 auto; }

/* reading pane */
.inbox__read { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--canvas); }
.read__head {
  flex: 0 0 auto; padding: 18px 28px 16px;
  border-bottom: 1px solid var(--hairline); background: var(--surface);
}
.read__crumbs { display: flex; align-items: center; gap: 10px; }
.read__subject { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); margin-top: 8px; }
.read__parties { font-size: 12.5px; color: var(--slate-400); margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.read__head-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-control);
  border: 1px solid var(--hairline); background: var(--surface);
  color: var(--slate-400); display: grid; place-items: center; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { color: var(--ink-800); border-color: var(--slate-300); background: var(--neutral-50); }
.icon-btn svg { width: 16px; height: 16px; }

.read__body {
  flex: 1; overflow-y: auto; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 20px;
  scrollbar-width: thin; scrollbar-color: var(--slate-200) transparent;
}
.read__body::-webkit-scrollbar { width: 8px; }
.read__body::-webkit-scrollbar-thumb { background: var(--slate-200); border-radius: 4px; }

.msg { display: flex; gap: 12px; max-width: 660px; }
.msg__av {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  background: var(--neutral-100); border: 1px solid var(--hairline);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--slate-600);
}
.msg__c { min-width: 0; }
.msg__meta { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.msg__name { font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.msg__time { font-size: 11px; color: var(--slate-400); }
.msg__bubble {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 4px 12px 12px 12px; padding: 13px 16px;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-800); box-shadow: var(--shadow-xs);
}
.msg.is-me { align-self: flex-end; flex-direction: row-reverse; }
.msg.is-me .msg__meta { flex-direction: row-reverse; }
.msg.is-me .msg__bubble {
  background: color-mix(in oklab, var(--ac) 12%, var(--surface));
  border-color: var(--ac-line); border-radius: 12px 4px 12px 12px; color: var(--ink-900);
}
.msg.is-me .msg__av { background: var(--ac-soft); border-color: var(--ac-line); color: var(--ac-700); }

/* composer */
.read__composer { flex: 0 0 auto; border-top: 1px solid var(--hairline); padding: 14px 28px 18px; background: var(--surface); }
.composer__suggest {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-size: 12.5px; color: var(--slate-500);
  background: var(--ac-soft); border: 1px solid var(--ac-line);
  border-radius: var(--r-control); padding: 9px 13px; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.composer__suggest:hover { background: color-mix(in oklab, var(--ac) 18%, var(--surface)); }
.composer__suggest svg { width: 15px; height: 15px; color: var(--ac-700); flex: 0 0 auto; }
.composer__suggest b { color: var(--ac-700); font-weight: 700; }
.composer__suggest .txt { color: var(--ink-800); }
.composer__box { border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-out); }
.composer__box:focus-within { border-color: var(--slate-300); }
.composer__box textarea {
  width: 100%; border: 0; outline: none; resize: none; background: transparent;
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.6; color: var(--ink-900);
  padding: 13px 15px; min-height: 56px; box-sizing: border-box;
}
.composer__actions { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px; }
.composer__tools { display: flex; gap: 2px; }
.composer__send { display: flex; gap: 8px; }
.composer__hint { font-size: 11.5px; color: var(--slate-400); }

/* empty reading pane */
.read__empty { flex: 1; display: grid; place-items: center; color: var(--slate-300); }