.inbox-root {
  --inbox-ice: #9adcf5;
  --inbox-purple: #a98cff;
  --inbox-human: #7ed7ad;
  --inbox-approval: #f3a45f;
  height: calc(100dvh - 190px);
  min-height: 560px;
  overflow: hidden;
}

.manager-page:has(.inbox-root) {
  max-width: 1680px;
}

.inbox-shell {
  display: grid;
  grid-template-columns: minmax(190px, .65fr) minmax(290px, 1fr) minmax(460px, 1.75fr) minmax(260px, .9fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #101419;
  box-shadow: var(--shadow);
}

.inbox-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: rgba(24, 29, 35, .96);
}

.inbox-panel:last-child { border-right: 0; }
.inbox-folders,
.inbox-context { background: rgba(31, 36, 44, .88); backdrop-filter: blur(16px); }
.inbox-panel__header { flex: 0 0 auto; padding: 14px; border-bottom: 1px solid var(--border); }
.inbox-panel__header h1,
.inbox-panel__header h2 { margin: 4px 0; font-size: 1.05rem; }
.inbox-panel__body { min-height: 0; padding: 14px; overflow-y: auto; overscroll-behavior: contain; }
.inbox-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.inbox-nav-list,
.inbox-label-list,
.inbox-conversation-list,
.inbox-timeline { list-style: none; margin: 0; padding: 0; }
.inbox-nav-list { display: grid; gap: 4px; }
.inbox-nav-button,
.inbox-conversation,
.inbox-back,
.inbox-filter-toggle {
  width: 100%;
  border: 0;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.inbox-nav-button { display: flex; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 8px; }
.inbox-nav-button:hover,
.inbox-nav-button[aria-current="true"] { background: rgba(154, 220, 245, .12); color: var(--inbox-ice); }
.inbox-nav-button:focus-visible,
.inbox-conversation:focus-visible,
.inbox-filter input:focus-visible,
.inbox-filter select:focus-visible,
.inbox-composer button:focus-visible,
.inbox-back:focus-visible { outline: 3px solid var(--inbox-ice); outline-offset: 2px; }
.inbox-label-heading { margin: 22px 10px 8px; color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.inbox-label-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--inbox-purple); display: inline-block; margin-right: 8px; }

.inbox-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(82px, .8fr)) auto; gap: 6px; align-items: end; }
.inbox-filter { display: grid; gap: 5px; color: var(--muted); font-size: .75rem; }
.inbox-filter--search { grid-column: auto; }
.inbox-filter input,
.inbox-filter select,
.inbox-composer textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #11161c; color: var(--text); padding: 7px;
}
.inbox-conversation-list { border-top: 1px solid var(--border); }
.inbox-conversation { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 12px; border-bottom: 1px solid var(--border); }
.inbox-conversation:hover,
.inbox-conversation[aria-current="true"] { background: rgba(154, 220, 245, .08); }
.inbox-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #293542; color: var(--inbox-ice); font-weight: 800; overflow: hidden; }
.inbox-avatar img { width: 100%; height: 100%; object-fit: cover; }
.inbox-conversation__content { min-width: 0; }
.inbox-conversation__title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.inbox-conversation__preview { margin: 5px 0 0; color: var(--muted); font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-conversation__signals { display: flex; min-width: 0; align-items: center; gap: 6px; margin-top: 7px; color: var(--muted); font-size: .68rem; white-space: nowrap; overflow: hidden; }
.inbox-conversation__meta { color: var(--muted); font-size: .72rem; text-align: right; }
.inbox-badge { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px; color: var(--muted); font-size: .68rem; }
.inbox-platform-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px; color: #dce7f0; background: rgba(255, 255, 255, .04); font-size: .68rem; line-height: 1.25; }
.inbox-history-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; border: 1px dashed rgba(154, 220, 245, .52); border-radius: 999px; padding: 2px 7px; color: #d9f3fc; background: rgba(154, 220, 245, .08); font-size: .68rem; line-height: 1.25; }
.inbox-history-chip > span { font-weight: 900; }
.inbox-history-chip--partial { border-style: solid; border-color: rgba(243, 164, 95, .72); color: #ffe0bd; background: rgba(243, 164, 95, .12); }
.inbox-platform-chip > span { font-size: .58rem; font-weight: 900; letter-spacing: .02em; }
.inbox-platform-chip--instagram { border-color: rgba(225, 82, 145, .55); color: #ffc5df; }
.inbox-platform-chip--tiktok { border-color: rgba(63, 226, 219, .5); color: #b8fffb; }
.inbox-platform-chip--x { border-color: rgba(220, 226, 232, .5); color: #f3f6f8; }
.inbox-platform-chip--sms { border-color: rgba(126, 215, 173, .5); color: #caf7df; }
.inbox-platform-chip--rcs { border-color: rgba(92, 145, 255, .55); color: #bed2ff; }
.inbox-platform-chip--imessage { border-color: rgba(72, 205, 104, .55); color: #baf5c8; }
.inbox-platform-chip--epic { border-color: rgba(169, 140, 255, .55); color: #ddd2ff; }
.inbox-badge--olivia { color: #ddd2ff; border-color: rgba(169, 140, 255, .4); }
.inbox-badge--human { color: #caf7df; border-color: rgba(126, 215, 173, .4); }
.inbox-badge--approval { color: #ffd8b1; border-color: rgba(243, 164, 95, .45); }
.inbox-unread { min-width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--inbox-ice); color: #071118; font-weight: 800; }

.inbox-thread { background: #12171d; }
.inbox-thread .inbox-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inbox-thread__identity { min-width: 0; }
.inbox-thread__identity p { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; color: var(--muted); }
.inbox-history-notice { flex: 0 0 auto; margin: 12px 18px 0; padding: 10px 12px; border: 1px solid rgba(243, 164, 95, .52); border-radius: 10px; color: #f7e4cd; background: rgba(243, 164, 95, .08); overflow-wrap: anywhere; }
.inbox-history-notice strong { display: block; color: #ffe0bd; font-size: .84rem; }
.inbox-history-notice p { margin: 4px 0 0; font-size: .76rem; line-height: 1.45; }
.inbox-history-notice ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: .72rem; }
.inbox-timeline { flex: 1 1 auto; min-height: 0; padding: 18px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.inbox-history-control { min-height: 32px; display: grid; place-items: center; color: var(--muted); font-size: .76rem; }
.inbox-history-control button { border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; color: var(--text); background: var(--panel-2); cursor: pointer; }
.inbox-date-separator { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .72rem; margin: 18px 0; }
.inbox-date-separator::before,
.inbox-date-separator::after { content: ""; height: 1px; flex: 1; background: var(--border); }
.inbox-message { min-width: 0; max-width: 78%; margin: 9px 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: #20262e; overflow-wrap: anywhere; word-break: break-word; }
.inbox-message--outbound { margin-left: auto; background: rgba(90, 113, 137, .24); }
.inbox-message--olivia { border-color: rgba(169, 140, 255, .42); }
.inbox-message--human_operator { border-color: rgba(126, 215, 173, .42); }
.inbox-message--scheduled_automation { border-color: rgba(154, 220, 245, .35); }
.inbox-message--system_event { max-width: 100%; background: transparent; color: var(--muted); text-align: center; }
.inbox-message--imported_history { border-style: dashed; opacity: .8; }
.inbox-message__author { color: var(--muted); font-size: .72rem; }
.inbox-message__body { margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-message__meta { color: var(--muted); font-size: .68rem; }
.inbox-attachment { display: inline-block; margin: 5px 5px 0 0; padding: 5px 7px; border-radius: 6px; background: rgba(255, 255, 255, .06); }

.inbox-composer { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--border); background: rgba(24, 29, 35, .95); }
.inbox-composer__tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.inbox-composer button { border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; background: var(--panel-2); color: var(--text); }
.inbox-composer textarea { resize: none; color: var(--muted); }
.inbox-composer__notice { margin: 7px 0 0; color: var(--muted); font-size: .72rem; }

.inbox-context-section { padding: 15px; border-bottom: 1px solid var(--border); }
.inbox-context-section h3 { margin: 0 0 10px; font-size: .88rem; }
.inbox-facts { display: grid; grid-template-columns: minmax(80px, .75fr) 1fr; gap: 8px; margin: 0; font-size: .78rem; }
.inbox-facts dt { color: var(--muted); }
.inbox-facts dd { margin: 0; overflow-wrap: anywhere; }
.inbox-state { display: grid; place-items: center; min-height: 180px; padding: 24px; color: var(--muted); text-align: center; }
.inbox-load-more { display: block; margin: 14px auto; }
.inbox-back,
.inbox-filter-toggle,
.inbox-context-toggle { display: none; width: auto; padding: 7px; }

@media (max-width: 1200px) {
  .inbox-shell { grid-template-columns: minmax(280px, .9fr) minmax(430px, 1.7fr) minmax(250px, .8fr); }
  .inbox-folders { display: none; }
  .inbox-filter-toggle { display: inline-block; }
  .inbox-shell.folders-open .inbox-folders { display: flex; position: absolute; z-index: 5; width: 280px; height: min(650px, calc(100dvh - 190px)); overflow: hidden; box-shadow: var(--shadow); }
  .inbox-filters { grid-template-columns: 1fr 1fr; }
  .inbox-filter--search { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .manager-page:has(.inbox-root) { padding: 12px; }
  .inbox-root { height: auto; min-height: calc(100dvh - 150px); overflow: visible; }
  .inbox-shell { display: block; height: auto; min-height: calc(100dvh - 150px); overflow: visible; }
  .inbox-conversations { display: flex; min-height: calc(100dvh - 150px); }
  .inbox-thread,
  .inbox-context { display: none; }
  .inbox-shell.has-selection .inbox-conversations { display: none; }
  .inbox-shell.has-selection .inbox-thread { display: flex; height: calc(100dvh - 150px); min-height: 480px; }
  .inbox-shell.has-selection .inbox-context { display: none; }
  .inbox-shell.has-selection.context-open .inbox-thread { display: none; }
  .inbox-shell.has-selection.context-open .inbox-context { display: flex; min-height: calc(100dvh - 150px); }
  .inbox-back { display: inline-block; }
  .inbox-context-toggle { display: inline-block; }
  .inbox-conversations > .inbox-scroll,
  .inbox-context > .inbox-scroll { max-height: none; }
}

@media (max-width: 620px) {
  .inbox-message { max-width: 90%; }
  .inbox-filters { grid-template-columns: 1fr; }
  .inbox-filter--search { grid-column: auto; }
}
