/* Meta Business Suite Inbox — pixel-matched tokens */
#uc-inbox-app {
  --mi-bg: #ffffff;
  --mi-canvas: #ffffff;
  --mi-list-bg: #ffffff;
  --mi-text: #080809;
  --mi-secondary: #65676b;
  --mi-tertiary: #8a8d91;
  --mi-border: #ced0d4;
  --mi-divider: #e4e6eb;
  --mi-hover: #f2f3f5;
  --mi-active: #e7f3ff;
  --mi-blue: #0866ff;
  --mi-blue-press: #0654d0;
  --mi-link: #0064e0;
  --mi-badge: #e41e3f;
  --mi-wa-out: #d9fdd3;
  --mi-wa-out-text: #111b21;
  --mi-msng-out: #0084ff;
  --mi-ig-out: linear-gradient(135deg, #c026d3 0%, #7c3aed 100%);
  --mi-in: #f0f2f5;
  --mi-composer: #f0f2f5;
  --mi-font: "Segoe UI Historic", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mi-list: 348px;
  --mi-detail: 300px;

  display: none;
  position: fixed;
  /* Sit under the shared app header (title + account) */
  top: 64px;
  right: 0;
  bottom: 0;
  left: var(--uc-meta-rail, 272px);
  z-index: 2400;
  background: var(--mi-bg);
  overflow: hidden;
  font-family: var(--mi-font);
  color: var(--mi-text);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}

body.uc-page-inbox #uc-inbox-app {
  display: flex;
  flex-direction: column;
}

body.uc-settings-open.uc-page-inbox #uc-inbox-app {
  left: calc(var(--uc-meta-rail, 272px) + var(--uc-meta-settings, 240px));
}

body.uc-rail-collapsed.uc-page-inbox #uc-inbox-app {
  left: var(--uc-meta-rail-collapsed, 60px);
}

#uc-inbox-app *,
#uc-inbox-app *::before,
#uc-inbox-app *::after {
  box-sizing: border-box;
}

/* Hide React page body under inbox; shared #uc-app-topbar stays fixed above */
body.uc-page-inbox #root main > div:last-child {
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* —— Channel tabs strip (page title lives in shared app header) —— */
.mi-top {
  flex: 0 0 auto;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--mi-divider);
  background: #fff;
}

.mi-top-row {
  display: none;
}

/* Title moved to shared #uc-header-page-title */

.mi-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--mi-text);
}

.mi-sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: var(--mi-secondary);
}

.mi-top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mi-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  height: 36px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  color: var(--mi-text);
}

.mi-btn-ad {
  background: #e7f3ff;
  color: var(--mi-blue);
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  height: 36px;
  padding: 0 12px;
}

.mi-btn-ad:hover {
  background: #d8ecff;
}

.mi-icon-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mi-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.mi-icon-btn:hover {
  background: var(--mi-hover);
}

.mi-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mi-avail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 18px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--mi-text);
  cursor: pointer;
}

.mi-avail:hover {
  background: var(--mi-hover);
}

.mi-avail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #31a24c;
  box-shadow: 0 0 0 2px #fff;
}

/* Channel tabs — Meta underline style */
.mi-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -4px;
}

.mi-tabs::-webkit-scrollbar {
  display: none;
}

.mi-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  color: var(--mi-secondary);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  flex: 0 0 auto;
}

.mi-tab:hover {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px 8px 0 0;
}

.mi-tab.is-active {
  color: var(--mi-blue);
  border-bottom-color: var(--mi-blue);
}

.mi-tab-label {
  flex: 0 0 auto;
}

/* Fixed-width badge gutter — tabs never shift when counts appear/disappear */
.mi-badge-slot {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 22px;
  height: 18px;
  flex: 0 0 22px;
}

.mi-badge-slot:not(.has-count) {
  visibility: hidden;
}

.mi-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--mi-badge);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* —— 3 columns —— */
.mi-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--mi-list) minmax(0, 1fr) var(--mi-detail);
  background: #fff;
}

.mi-body.mi-detail-collapsed {
  grid-template-columns: var(--mi-list) minmax(0, 1fr) 0;
}

.mi-body.mi-detail-collapsed .mi-detail {
  display: none;
}

/* Left list */
.mi-list {
  border-right: 1px solid var(--mi-divider);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--mi-list-bg);
}

.mi-list-tools {
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mi-search-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.mi-search {
  flex: 1;
  height: 36px;
  border-radius: 18px;
  border: none;
  background: #f0f2f5
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2365676b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")
    12px center / 16px no-repeat;
  padding: 0 12px 0 36px;
  font-family: inherit;
  font-size: 15px;
  color: var(--mi-text);
  outline: none;
}

.mi-search::placeholder {
  color: var(--mi-tertiary);
}

.mi-tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #e4e6eb;
  color: var(--mi-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
}

.mi-tool-btn:hover {
  background: #d8dadf;
}

.mi-tool-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.mi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mi-chip {
  appearance: none;
  border: none;
  background: #e4e6eb;
  color: var(--mi-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  cursor: pointer;
  line-height: 28px;
}

.mi-chip:hover {
  background: #d8dadf;
}

.mi-chip.is-on {
  background: #e7f3ff;
  color: var(--mi-blue);
}

.mi-folder {
  margin: 4px 8px 0;
  border-radius: 8px;
}

.mi-folder-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mi-secondary);
  text-align: left;
}

.mi-folder-btn:hover {
  background: var(--mi-hover);
}

.mi-folder-btn svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  transition: transform 0.15s;
}

.mi-folder.is-open .mi-folder-btn svg {
  transform: rotate(90deg);
}

.mi-chat-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 8px;
}

.mi-chat-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0 10px;
  align-items: center;
  padding: 8px 12px;
  margin: 0 4px;
  border-radius: 8px;
  cursor: pointer;
  border: 0;
  width: calc(100% - 8px);
  text-align: left;
  background: transparent;
  font-family: inherit;
  color: inherit;
}

.mi-chat-item:hover {
  background: var(--mi-hover);
}

.mi-chat-item.is-active {
  background: var(--mi-active);
}

.mi-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}

.mi-avatar,
.mi-avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.mi-avatar-fallback {
  background: #bcc0c4;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 18px;
}

.mi-plat {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #25d366;
}

.mi-plat svg {
  width: 10px;
  height: 10px;
  display: block;
}

.mi-plat.fb {
  background: #0866ff;
}

.mi-plat.ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.mi-plat.wa {
  background: #25d366;
}

.mi-plat.cm {
  background: #65676b;
}

.mi-chat-main {
  min-width: 0;
  padding-right: 4px;
}

.mi-chat-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--mi-text);
}

.mi-chat-item.is-unread .mi-chat-name {
  font-weight: 700;
}

.mi-chat-snip {
  margin-top: 1px;
  font-size: 13px;
  line-height: 16px;
  color: var(--mi-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-chat-item.is-unread .mi-chat-snip {
  color: var(--mi-text);
  font-weight: 600;
}

.mi-chat-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  align-self: start;
  padding-top: 2px;
}

.mi-chat-time {
  font-size: 12px;
  line-height: 16px;
  color: var(--mi-secondary);
  white-space: nowrap;
}

.mi-unread-pip {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--mi-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.mi-empty-list {
  padding: 48px 24px;
  text-align: center;
  color: var(--mi-secondary);
  font-size: 15px;
  line-height: 1.4;
}

/* Center thread */
.mi-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border-right: 1px solid var(--mi-divider);
}

.mi-thread-head {
  flex: 0 0 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--mi-divider);
}

.mi-thread-who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mi-thread-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-assign {
  height: 36px;
  max-width: 220px;
  border-radius: 6px;
  border: 1px solid var(--mi-divider);
  background: #fff;
  padding: 0 28px 0 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mi-secondary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2365676b'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.mi-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 12px;
  background: #fff;
  min-height: 0;
}

.mi-day {
  text-align: center;
  margin: 14px 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mi-secondary);
}

.mi-bubble-row {
  display: flex;
  margin: 2px 0;
  align-items: flex-end;
  gap: 6px;
}

.mi-bubble-row.out {
  justify-content: flex-end;
}

.mi-bubble {
  max-width: min(68%, 480px);
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}

.mi-bubble.in {
  background: var(--mi-in);
  color: var(--mi-text);
  border-bottom-left-radius: 4px;
}

.mi-bubble.out.origin-meta,
.mi-bubble.out.origin-qr {
  background: var(--mi-wa-out);
  color: var(--mi-wa-out-text);
  border-bottom-right-radius: 4px;
}

.mi-bubble.out.origin-messenger {
  background: var(--mi-msng-out);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.mi-bubble.out.origin-instagram,
.mi-bubble.out.origin-instagram_comment {
  background: var(--mi-ig-out);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.mi-bubble.out {
  background: var(--mi-wa-out);
  color: var(--mi-wa-out-text);
  border-bottom-right-radius: 4px;
}

.mi-bubble-meta {
  font-size: 11px;
  color: var(--mi-tertiary);
  padding: 0 4px 2px;
  white-space: nowrap;
}

.mi-bubble img,
.mi-bubble video {
  max-width: 100%;
  border-radius: 12px;
  display: block;
  margin-top: 4px;
}

/* Composer — Meta footer style */
.mi-composer {
  flex: 0 0 auto;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--mi-divider);
  background: #fff;
}

.mi-composer-box {
  display: flex;
  flex-direction: column;
  background: var(--mi-composer);
  border-radius: 20px;
  padding: 10px 12px 6px;
  gap: 4px;
}

.mi-composer textarea {
  width: 100%;
  border: 0;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  min-height: 20px;
  max-height: 120px;
  padding: 0;
  outline: none;
  color: var(--mi-text);
}

.mi-composer-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mi-composer-tools .mi-icon-btn {
  width: 32px;
  height: 32px;
  color: var(--mi-secondary);
}

.mi-composer-tools .mi-icon-btn svg {
  width: 20px;
  height: 20px;
}

.mi-composer-tools .mi-spacer {
  flex: 1;
}

.mi-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--mi-blue);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.mi-send:disabled {
  opacity: 0.35;
  cursor: default;
}

.mi-send svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mi-thread-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--mi-secondary);
  font-size: 15px;
  padding: 40px;
  text-align: center;
}

/* Right detail — Meta contact card */
.mi-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  overflow: hidden;
}

.mi-detail-head {
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
  border-bottom: 1px solid var(--mi-divider);
}

.mi-detail-head .mi-avatar,
.mi-detail-head .mi-avatar-fallback {
  width: 80px;
  height: 80px;
  font-size: 28px;
}

.mi-detail-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  margin-top: 4px;
}

.mi-link {
  color: var(--mi-link);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: inherit;
  padding: 0;
}

.mi-link:hover {
  text-decoration: underline;
}

.mi-collapse-detail {
  position: absolute;
  top: 8px;
  right: 8px;
}

.mi-detail-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.mi-sec {
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--mi-divider);
}

.mi-sec-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.mi-sec-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mi-text);
}

.mi-sec-sub {
  font-size: 12px;
  color: var(--mi-secondary);
  line-height: 1.35;
  margin-top: 6px;
}

.mi-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mi-secondary);
  margin-bottom: 4px;
}

.mi-handle {
  font-size: 14px;
  font-weight: 600;
  color: var(--mi-link);
}

.mi-bio {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mi-text);
  white-space: pre-wrap;
}

.mi-select,
.mi-input {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--mi-divider);
  padding: 0 10px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  outline: none;
  color: var(--mi-text);
}

.mi-select:focus,
.mi-input:focus,
.mi-textarea:focus {
  border-color: var(--mi-blue);
  box-shadow: 0 0 0 2px rgba(8, 102, 255, 0.2);
}

.mi-textarea {
  width: 100%;
  min-height: 64px;
  border-radius: 6px;
  border: 1px solid var(--mi-divider);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  outline: none;
}

.mi-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.mi-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.mi-label-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  background: #e4e6eb;
  font-size: 12px;
  font-weight: 600;
}

.mi-label-pill button {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--mi-secondary);
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
}

.mi-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mi-suggest-chip {
  appearance: none;
  border: 1px solid var(--mi-divider);
  background: #fff;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--mi-text);
  cursor: pointer;
}

.mi-suggest-chip:hover,
.mi-suggest-chip.is-on {
  background: #e7f3ff;
  border-color: transparent;
  color: var(--mi-blue);
}

.mi-note-item {
  background: #f2f3f5;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 6px;
  line-height: 1.4;
}

.mi-add-note {
  width: 100%;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: #e4e6eb;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--mi-text);
  cursor: pointer;
  margin-top: 8px;
}

.mi-add-note:hover {
  background: #d8dadf;
}

.mi-note-editor {
  display: none;
  margin-top: 8px;
}

.mi-note-editor.is-open {
  display: block;
}

/* Hide Meta-unlike status footer */
.mi-status {
  display: none;
}

@media (max-width: 1100px) {
  .mi-body {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .mi-detail {
    display: none;
  }
}

@media (max-width: 760px) {
  .mi-body {
    grid-template-columns: 1fr;
  }
  .mi-list {
    display: none;
  }
}