/* The unified inbox, drawn in CSS.
 *
 * Modelled on the real Good Yield inbox, which is the single best argument the
 * product has: three channels in one list, every thread showing whether anyone
 * has actually picked it up, and the stock item attached to the conversation.
 *
 * NOTHING HERE IS GENERATED AND NOTHING WAS SENT ANYWHERE. The reference
 * screenshot carries real contact names, real avatars and a photographed land
 * title deed, so it stayed on this machine and was used only to read the
 * layout. Every name, message and number below is invented. An inbox is pure
 * interface with no photography in it, so there is nothing an image model
 * could usefully contribute anyway.
 *
 * The three things this screen has to say, in order:
 *   1. every channel arrives in one place
 *   2. each thread is either claimed by somebody or it is not
 *   3. the thread knows which piece of stock it is about
 */

.ib { display: flex; min-height: 430px; }

/* ── list column ─────────────────────────────────────────────────────────── */
.ib-list {
  flex: 0 0 268px; border-right: 1px solid var(--os-line);
  background: #fff; display: flex; flex-direction: column; min-width: 0;
}
.ib-srch {
  margin: 10px 11px 8px; border: 1px solid var(--os-line); border-radius: 7px;
  padding: 5px 10px; font-size: 11px; color: var(--os-mute);
}

/* channel tabs — the "one place" claim, made visible */
.ib-ch { display: flex; gap: 6px; padding: 0 11px 8px; }
.ib-ch span {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--os-line); border-radius: 999px;
  padding: 3px 9px; font-size: 10px; color: var(--os-mute); white-space: nowrap;
}
.ib-ch span i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ib-ch span.on { background: #06C755; border-color: #06C755; color: #fff; font-weight: 600; }
.ib-ch span.wa i { color: #25D366; }
.ib-ch span.web i { color: #6A7480; }
.ib-ch span.ig i { color: #E4405F; }
.ib-ch span.fb i { color: #0866FF; }

.ib-filt {
  display: flex; gap: 5px; flex-wrap: wrap; padding: 0 11px 8px;
  border-bottom: 1px solid var(--os-line);
}
.ib-filt b, .ib-filt span {
  font-size: 9.5px; padding: 2px 7px; border-radius: 999px; font-weight: 500;
  color: var(--os-mute); background: #F4F2EC; white-space: nowrap;
}
.ib-filt b { background: var(--os-ink); color: #fff; font-weight: 600; }
.ib-filt em {
  font-style: normal; font-size: 9.5px; color: var(--os-accent); font-weight: 700;
  padding: 2px 7px;
}

.ib-rows { overflow: hidden; }
.ib-r {
  display: flex; gap: 9px; padding: 9px 11px;
  border-bottom: 1px solid var(--os-line); position: relative;
}
.ib-r.sel { background: #F6F4EE; box-shadow: inset 2px 0 0 var(--os-accent); }
.ib-av {
  position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(140deg, #D8D3C6, #B9B2A1);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: rgba(0,0,0,.42);
}
.ib-av em {
  position: absolute; left: -3px; top: -3px; min-width: 15px; height: 15px;
  border-radius: 999px; background: var(--os-accent); color: #fff;
  font-style: normal; font-size: 8.5px; font-weight: 700;
  display: grid; place-items: center; padding: 0 3px; border: 1.5px solid #fff;
}
.ib-t { min-width: 0; flex: 1; }
.ib-n {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.ib-n b { font-size: 11.5px; font-weight: 600; }
.ib-n span { font-size: 9px; color: var(--os-mute); white-space: nowrap; }
.ib-p {
  font-size: 10.5px; color: var(--os-mute); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the claim state — pillar two, on every single row */
.ib-s { font-size: 9px; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.ib-s i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ib-s.un { color: #B4791C; }
.ib-s.mine { color: var(--os-accent); }

/* ── thread ──────────────────────────────────────────────────────────────── */
.ib-th { flex: 1; display: flex; flex-direction: column; background: var(--os-paper); min-width: 0; }
.ib-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--os-line); background: #fff;
}
.ib-hd .ib-av { flex: 0 0 26px; width: 26px; height: 26px; font-size: 10px; }
.ib-hd b { font-size: 12px; font-weight: 600; display: block; }
.ib-hd small {
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--os-mute);
}
.ib-assign {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--os-line); border-radius: 7px; padding: 3px 9px;
  font-size: 10px; color: var(--os-ink); white-space: nowrap;
}
.ib-assign i {
  width: 16px; height: 16px; border-radius: 50%; background: var(--os-accent);
  color: #fff; font-style: normal; font-size: 8px; display: grid; place-items: center;
}

/* the stock item the conversation is about — pillar three */
.ib-ctx {
  display: flex; align-items: center; gap: 9px; margin: 10px 14px 0;
  background: #fff; border: 1px solid var(--os-line); border-radius: 9px; padding: 8px 10px;
}
.ib-ctx img { width: 44px; height: 33px; object-fit: cover; border-radius: 5px; flex: 0 0 44px; }
.ib-ctx b { font-size: 11px; font-weight: 600; display: block; }
.ib-ctx small { font-size: 9.5px; color: var(--os-mute); }
.ib-ctx .os-pill { margin: 0 0 0 auto; }

.ib-msgs { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.ib-day {
  align-self: center; font-size: 9px; color: var(--os-mute);
  background: rgba(0,0,0,.045); padding: 2px 9px; border-radius: 999px;
}
.ib-m { max-width: 74%; }
.ib-m small {
  display: block; font-size: 9px; color: var(--os-mute); margin-bottom: 3px;
}
.ib-m p {
  background: #fff; border: 1px solid var(--os-line); border-radius: 11px;
  border-top-left-radius: 3px; padding: 7px 10px; font-size: 11.5px; line-height: 1.45;
}
.ib-m time { font-size: 8.5px; color: var(--os-mute); margin-top: 3px; display: block; }
.ib-m.out { align-self: flex-end; }
.ib-m.out p {
  background: var(--os-accent); color: #fff; border-color: transparent;
  border-top-left-radius: 11px; border-top-right-radius: 3px;
}
.ib-m.out time { text-align: right; }
/* a drafted reply, waiting on a person. the approval gate, on screen. */
.ib-m.draft p {
  background: #FFFBF2; border: 1px dashed #D9BE7E; color: var(--os-ink);
  border-top-left-radius: 11px; border-top-right-radius: 3px;
}
.ib-m.draft .ib-gate {
  display: flex; gap: 6px; margin-top: 5px; justify-content: flex-end;
}
.ib-gate b, .ib-gate span {
  font-size: 9.5px; padding: 3px 9px; border-radius: 6px; font-weight: 600;
}
.ib-gate b { background: var(--os-accent); color: #fff; }
.ib-gate span { background: #fff; border: 1px solid var(--os-line); color: var(--os-mute); }
.ib-ai {
  display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #8A6A2E; margin-bottom: 3px;
}

.ib-comp {
  margin: 0 14px 12px; background: #fff; border: 1px solid var(--os-line);
  border-radius: 9px; padding: 8px 11px; font-size: 11px; color: var(--os-mute);
  display: flex; align-items: center; gap: 9px;
}
.ib-comp span:last-child { margin-left: auto; color: var(--os-accent); font-weight: 600; }

@media (max-width: 900px) { .ib-list { display: none; } }