/* iChat operational workspace: shared structure, tenant-owned identity. */
:root {
  --workspace-control-height: 38px;
  --workspace-ink: #202b31;
  --workspace-muted: #65737a;
  --workspace-line: #e3e8eb;
}
body { color: var(--workspace-ink); background: #f6f7f9 !important; }
html[lang="en"] body, html[lang="fr"] body { font-family: Inter, "Segoe UI", "IBM Plex Sans Arabic", sans-serif; }
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Segoe UI", sans-serif; }
button, input, select, textarea { font-family: inherit; letter-spacing: 0; }
button, select, a { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--chat-accent); outline-offset: 2px;
}
button:disabled { cursor: not-allowed; opacity: .55; }
.rail { background: #243238 !important; border: 0 !important; }
.rail .logo { background: var(--chat-accent) !important; border: 0 !important; border-radius: 8px !important; }
.rail-btn { color: #bfc9ce !important; }
.rail-btn.active, .rail-btn:hover { background: #ffffff18 !important; color: #fff !important; }
.sidebar { background: #fcfdfd !important; border-inline-end: 1px solid var(--workspace-line) !important; }
.side-head, .sidebar .search, .nav-list { margin-inline: 12px; }
.nav-item { border-radius: 6px !important; min-height: 42px; font-size: 13px !important; font-weight: 500 !important; }
.nav-item.active { color: var(--chat-accent) !important; background: var(--chat-accent-soft) !important; box-shadow: none !important; }
.product h1 { font-size: 22px !important; font-weight: 700 !important; }
.topbar { background: #fff !important; border-bottom: 1px solid var(--workspace-line) !important; box-shadow: none !important; }
.top-title h2 { font-size: 19px !important; font-weight: 650 !important; }
.top-title p { display: none; }
.top-actions > .ghost, .top-actions > .primary { width: 38px; height: 38px; padding: 0 !important; justify-content: center; }
.top-actions > .ghost span, .top-actions > .primary span { display: none; }
.ghost, .primary, .language-select, .user-chip { border-radius: 6px !important; box-shadow: none !important; }
.card { border-radius: 8px !important; box-shadow: none !important; }
.card-head h3 { font-size: 15px !important; font-weight: 650 !important; }
.content { background: #f6f7f9; }
.thread, .conversation-list, .inspector, .workspace, .thread-profile, .thread-profile > div { min-width: 0; }
.conversation-list-head { background: #fff !important; padding: 12px 14px !important; min-height: 64px !important; }
.conversation-list-title { flex-wrap: wrap; gap: 6px !important; }
.conversation-list-title h3 { font-size: 19px !important; font-weight: 650 !important; }
.conversation-list-title .pill { background: #eef2f4 !important; border: 0 !important; color: #4b5c65 !important; border-radius: 5px !important; }
.conversation-tools { padding: 0 12px 10px !important; gap: 9px !important; }
.conversation-search-field { background: #f3f5f7 !important; height: 42px !important; }
.conversation-search-field input { font-weight: 400 !important; font-size: 13px !important; }
.conversation-filter-row select { height: var(--workspace-control-height) !important; font-size: 12px !important; font-weight: 500 !important; padding-inline: 8px 20px !important; cursor: pointer; }
.conversation-more-filters { position: relative; height: var(--workspace-control-height); min-width: 38px; width: 38px; padding: 0; }
.conversation-more-filters > span:not(.conversation-filter-count), .conversation-more-filters > svg:first-child { display: none; }
.conversation-filter-count { position: absolute; margin-inline-start: 27px; margin-top: -25px; }
.conversation-advanced-filters { background: transparent; padding: 0; border: 0; }
.applied-conversation-filters { display: flex; gap: 5px; overflow-x: auto; padding-block: 2px 4px; scrollbar-width: thin; }
.applied-conversation-filters[hidden] { display: none; }
.applied-filter { flex: 0 0 auto; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--chat-divider); border-radius: 6px; background: var(--chat-accent-soft); color: var(--chat-accent); font-size: 11px; min-height: 30px; padding: 4px 8px; cursor: pointer; }
.conv-row { min-height: 104px !important; padding: 12px !important; gap: 10px !important; }
.conv-row .avatar { width: 42px !important; height: 42px !important; background: #e7edf0 !important; color: #536b78 !important; font-weight: 600 !important; }
.conv-phone-title { font-size: 15px !important; font-weight: 650 !important; font-variant-numeric: tabular-nums; }
.conv-contact-name { font-size: 11px !important; }
.conv-preview { font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #67777e !important; }
.conv-context-row { gap: 6px !important; }
.conv-context-row .status-badge { max-width: 170px; font-weight: 500; font-size: 10px !important; border-radius: 4px !important; padding: 3px 6px !important; }
.conv-context-row .source-logo-wrap { min-width: 50px; }
.thread-head { min-height: 76px !important; height: auto !important; gap: 8px !important; padding: 10px 16px !important; background: #fcfdfd !important; }
.thread-profile { display: flex !important; align-items: center; gap: 10px; flex: 1 1 auto; }
.thread-profile > div:last-child { flex: 1; min-width: 0; }
.thread-profile strong { font-size: 16px !important; font-weight: 650 !important; font-variant-numeric: tabular-nums; }
.thread-profile .thread-sub { font-size: 11px !important; line-height: 1.7; }
.thread-actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.thread-actions .status-select { font-size: 12px !important; max-width: 170px !important; font-weight: 500 !important; }
.mobile-inspector-toggle, .mobile-inspector-close { display: inline-grid !important; }
.message-pane { overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px 24px !important; }
.bubble { width: fit-content !important; min-width: 80px; max-width: min(82%, 580px) !important; font-size: 14px !important; line-height: 1.6 !important; overflow-wrap: anywhere; padding: 9px 12px 6px !important; margin-bottom: 8px !important; }
.bubble .message-status { font-variant-numeric: tabular-nums; font-size: 10px !important; font-weight: 400 !important; margin-top: 4px; }
.bubble .message-sender { font-size: 10px !important; font-weight: 500 !important; }
.composer { padding: 10px 12px !important; background: #f6f8f9 !important; }
.composer-main { min-height: 48px; gap: 5px; align-items: flex-end; }
.composer textarea { font-size: 14px !important; line-height: 1.5 !important; border-radius: 8px !important; padding: 12px !important; }
.composer .icon-btn, .composer .send { width: 42px !important; height: 44px !important; }
.media-message, .media-preview-trigger, .voice-message { max-width: 100% !important; min-width: 0 !important; }
.media-message img, .media-message video { max-width: 100% !important; object-fit: contain !important; }
.inspector { background: #fff !important; }
.inspector .card-head { min-height: 64px !important; padding: 12px 16px !important; background: #fff !important; }
.inspector .card-body { padding: 14px 16px !important; overscroll-behavior: contain; scrollbar-gutter: stable; }
.inspector .form-row { margin-bottom: 18px !important; }
.inspector .form-row > label { font-size: 12px !important; font-weight: 600 !important; }
.inspector select, .internal-note-input { font-size: 13px !important; border-radius: 6px !important; background: #fbfcfd !important; }
.internal-notes-box { border: 0 !important; padding: 0 !important; background: none !important; }
.internal-note-item { border-radius: 0 !important; border: 0 !important; border-inline-start: 2px solid var(--chat-accent) !important; padding: 8px 10px !important; background: #f7f9fa !important; }
.current-routing { display: flex; align-items: center; gap: 10px; padding: 12px 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--workspace-line); }
.current-routing > svg { color: var(--chat-accent); width: 22px; flex-shrink: 0; }
.current-routing div { min-width: 0; }
.current-routing small { display: block; color: var(--workspace-muted); font-size: 11px; }
.current-routing strong { display: block; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.current-routing span { display: block; color: var(--workspace-muted); font-size: 12px; overflow-wrap: anywhere; }
.transfer-team-pill { border-radius: 6px !important; font-size: 12px !important; min-height: 36px !important; }
.dashboard-command { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 2px 0 22px !important; gap: 20px; }
.dashboard-command h3 { font-size: 24px !important; line-height: 1.4 !important; font-weight: 650 !important; }
.dashboard-command p { display: none; }
.dashboard-command-meta { border: 0 !important; background: transparent !important; padding: 0 !important; }
.dashboard-live-state { background: transparent !important; border: 0 !important; font-size: 11px !important; }
.dashboard-context { border: 0 !important; background: transparent !important; padding: 5px 0 !important; }
.dashboard-priority { border-radius: 6px !important; box-shadow: none !important; min-height: 64px !important; padding: 12px 16px !important; }
.dashboard-kpis { gap: 12px !important; margin-block: 20px !important; }
.dashboard-kpi { padding: 16px !important; min-height: 164px; display: flex !important; flex-direction: column; gap: 12px !important; position: relative; }
.dashboard-kpi::before, .dashboard-kpi::after { display: none !important; }
.dashboard-kpi-head { width: 100%; align-items: center; }
.dashboard-kpi .item-icon { width: 30px !important; height: 30px !important; border-radius: 6px !important; }
.dashboard-kpi-label { font-size: 12px !important; font-weight: 500 !important; }
.dashboard-kpi-value { font-size: 30px !important; line-height: 1.2 !important; font-weight: 650 !important; font-variant-numeric: tabular-nums; position: static !important; text-align: start !important; width: 100%; }
.dashboard-kpi-foot { position: static !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.6 !important; margin: 0 !important; }
.dashboard-kpi-meter { position: static !important; height: 3px !important; width: 100% !important; margin-top: auto !important; }
.dashboard-grid { gap: 24px !important; }
.dashboard-stack > .card { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.dashboard-stack > .card > .card-head { background: transparent !important; padding-inline: 0 !important; }
.dashboard-stack > .card > .card-body { background: #fff !important; border-block: 1px solid var(--workspace-line); padding: 12px !important; }
.dashboard-status-action { border-radius: 4px !important; }
.dashboard-action:hover { background: #f3f6f7 !important; }
.dashboard-status-title strong, .dashboard-row strong { font-weight: 550 !important; font-size: 13px !important; }
.dashboard-meter { height: 4px !important; }
.table { border-collapse: collapse; width: 100%; }
.table th, .table td { font-size: 13px; padding: 14px 12px !important; }
.table th { font-weight: 550 !important; background: #f6f8f9 !important; color: #60717b !important; }
.table tbody tr:hover { background: #f7fafb; }
@media (min-width: 1181px) {
  #screen-inbox .inbox-layout { grid-template-columns: minmax(310px, 340px) minmax(0, 1fr) minmax(280px, 300px) !important; }
  body.desktop-inspector-collapsed #screen-inbox .inbox-layout { grid-template-columns: minmax(310px, 360px) minmax(0, 1fr) !important; }
  body.desktop-inspector-collapsed .inspector { display: none !important; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  #screen-inbox .inbox-layout { grid-template-columns: minmax(275px, 32%) minmax(0, 1fr) !important; }
  .thread-profile .avatar { display: none; }
  .thread-head { flex-wrap: wrap; padding: 8px 10px !important; }
  .thread-actions { gap: 3px; }
  .thread-actions .status-select { max-width: 165px !important; }
}
@media (max-width: 760px) {
  .thread-head { min-height: 64px !important; flex-wrap: wrap; padding: 8px !important; }
  .thread-profile { flex: 1 1 140px; }
  .thread-profile strong { font-size: 15px !important; }
  .thread-profile .avatar { display: none; }
  .thread-actions { flex: 0 1 auto; gap: 2px !important; }
  .thread-actions .status-select { max-width: 138px !important; min-width: 0 !important; }
  .thread-head .icon-btn { width: 36px !important; height: 40px !important; }
  .conversation-list-head { min-height: 56px !important; }
  .conversation-more-filters, .conversation-filter-row select { height: 42px !important; }
  .message-pane { padding: 14px 10px !important; }
  .bubble { max-width: 90% !important; }
  .composer textarea, .conversation-search-field input { font-size: 16px !important; }
  .composer { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; }
  .mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
  .dashboard-command h3 { font-size: 20px !important; }
  .dashboard-kpi { min-height: 150px; padding: 12px !important; }
  .dashboard-kpi-value { font-size: 26px !important; }
}
@media (max-width: 380px) {
  .thread-actions { grid-column: 1 / -1; width: 100%; justify-content: flex-end; }
  .thread-head { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 2px !important; }
  .thread-profile { flex-basis: calc(100% - 45px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}