/* ── Inbox page layout ──────────────────────────────────────── */
#page-inbox.active { display:flex!important; flex-direction:column; height:calc(100vh - 60px); }

/* Top action bar */
.ib-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ib-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--white);
  font-size:var(--fs-sm);
  font-weight:var(--fw-medium);
  color: var(--gray-700);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ib-topbar-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.ib-topbar-btn:disabled { opacity: .5; cursor: default; }
.ib-live-badge {
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  color: var(--success-strong);
  padding: 4px 10px;
  background: var(--success-bg);
  border-radius: 20px;
  letter-spacing: .02em;
}

/* Main layout */
.ib-layout   { display:flex; flex:1; overflow:hidden; height:100%; }
.ib-sidebar  { width:320px; min-width:280px; border-right:1px solid var(--border); display:flex; flex-direction:column; background:var(--white); overflow:hidden; }
.ib-center   { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
.ib-contact  { width:272px; min-width:240px; border-left:1px solid var(--border); background:var(--white); overflow-y:auto; }

/* Main tabs: All | By Campaign */
.ib-main-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
}
.ib-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-size:var(--fs-base);
  font-weight:var(--fw-medium);
  color: var(--gray-500);
  cursor: pointer;
  transition: all .15s;
  margin-bottom: -1px;
}
.ib-tab:hover { color: var(--gray-800); }
.ib-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight:var(--fw-semibold); }

/* Sub-filter row */
.ib-filter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.ib-filter-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size:var(--fs-sm);
  cursor: pointer;
  color: var(--gray-600);
  font-weight:var(--fw-medium);
  white-space: nowrap;
  transition: all .12s;
  flex-shrink: 0;
}
.ib-filter-btn:hover  { border-color: var(--primary); color: var(--primary); }
.ib-filter-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight:var(--fw-semibold); }

/* Label dropdown */
.ib-label-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size:var(--fs-sm);
  color: var(--gray-600);
  font-weight:var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .12s;
}
.ib-label-dd:hover { border-color: var(--gray-300); }
.ib-label-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 150px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  z-index: 100;
  overflow: hidden;
}
.ib-label-menu div {
  padding: 8px 14px;
  font-size:var(--fs-base);
  color: var(--gray-700);
  cursor: pointer;
  transition: background .1s;
}
.ib-label-menu div:hover { background: var(--gray-50); }

/* Conversation list items */
.ib-conv-item { padding:12px 14px; border-bottom:1px solid var(--gray-50); cursor:pointer; display:flex; gap:10px; align-items:flex-start; transition:background .15s; }
.ib-conv-item:hover  { background: var(--gray-50); }
.ib-conv-item.active { background:color-mix(in srgb, var(--tag-indigo) 10%, var(--white)); border-left:3px solid var(--accent); padding-left:11px; }
.ib-conv-item.pinned .ib-pin-icon { display:inline!important; }

/* Avatar */
.ib-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--on-accent); flex-shrink:0; }

/* Thread messages */
.ib-msg-row  { display:flex; gap:10px; margin-bottom:16px; }
.ib-msg-row.out { flex-direction:row-reverse; }
.ib-msg-av  { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--on-accent); flex-shrink:0; align-self:flex-end; }
.ib-bubble  { max-width:72%; padding:10px 14px; border-radius:14px; font-size:var(--fs-base); line-height:var(--lh-normal); }
.ib-bubble.in  { background:var(--white); border:1px solid var(--gray-100); border-radius:14px 14px 14px 4px; }
.ib-bubble.out { background:var(--accent); color:var(--on-accent); border-radius:14px 14px 4px 14px; }

/* Empty right-panel state */
.ib-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  padding: 40px;
}

/* Keyboard shortcut hints */
.ib-kbd-hints {
  display: flex;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.ib-kbd-hints span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size:var(--fs-sm);
  color: var(--gray-400);
}
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 5px;
  font-family: inherit;
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  color: var(--gray-600);
  line-height:var(--lh-snug);
}

/* Left empty state */
.ib-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  text-align: center;
  gap: 10px;
}
.ib-list-empty svg { color: var(--gray-200); }
.ib-list-empty p  { margin: 0; }

@media(max-width:1100px) { .ib-contact { display:none; } }
@media(max-width:700px)  { .ib-sidebar { width:260px; min-width:220px; } }