/* Apex Chat theme for the Chatwoot v4.18.0 agent dashboard.
   Keep the native Chatwoot layout and interactions intact. */
:root {
  --iris-9: 113 75 209;
  --iris-10: 96 60 186;
  --iris-11: 101 66 189;
  --violet-9: 113 75 209;
  --violet-10: 96 60 186;
  --violet-11: 101 66 189;
  --background-color: 214 219 226;
  --surface-1: 226 230 235;
  --surface-2: 233 236 240;
  --border-container: 185 194 207;
  --border-strong: 185 194 207;
  --border-weak: 201 209 219;
}

.dark {
  --iris-9: 128 84 232;
  --iris-10: 150 105 241;
  --iris-11: 183 154 255;
  --violet-9: 128 84 232;
  --violet-10: 150 105 241;
  --violet-11: 183 154 255;
  --background-color: 13 18 22;
  --surface-1: 23 29 34;
  --surface-2: 30 37 44;
  --border-container: 44 53 62;
  --border-strong: 44 53 62;
  --border-weak: 38 46 54;
}

/* Palette mirrors src/components/inbox-theme.module.css. */
:root.apex-embedded,
:root.apex-embedded body {
  --apex-bg: #d6dbe2;
  --apex-surface: #e2e6eb;
  --apex-raised: #e9ecf0;
  --apex-text: #253044;
  --apex-muted: #4d596b;
  --apex-border: #b9c2cf;
  --apex-accent: #714bd1;
  --apex-accent-text: #6542bd;
  --apex-soft: #dcd5ec;
  --apex-wallpaper: #ccd3dc;
  --apex-incoming: #e2e6eb;
  --apex-outgoing: #d7cee9;
  --slate-1: 226 230 235;
  --slate-2: 233 236 240;
  --slate-3: 217 223 230;
  --slate-4: 214 219 226;
  --slate-5: 201 209 219;
  --slate-6: 185 194 207;
  --slate-7: 170 182 198;
  --slate-8: 140 154 174;
  --slate-9: 109 123 143;
  --slate-10: 90 105 125;
  --slate-11: 77 89 107;
  --slate-12: 37 48 68;
  --background-color: 214 219 226;
  --surface-1: 226 230 235;
  --surface-2: 233 236 240;
  --surface-active: 220 213 236;
  --solid-1: 226 230 235;
  --solid-2: 233 236 240;
  --solid-3: 217 223 230;
  --solid-active: 220 213 236;
  --card-color: 233 236 240;
  --border-container: 185 194 207;
  --border-strong: 185 194 207;
  --border-weak: 201 209 219;
  --blue-3: 235 228 248;
  --blue-4: 220 213 236;
  --blue-5: 211 198 237;
  --blue-6: 192 172 228;
  --blue-7: 167 138 217;
  --blue-8: 142 105 208;
  --blue-9: 113 75 209;
  --blue-10: 96 60 186;
  --blue-11: 101 66 189;
  --blue-12: 62 38 116;
  --text-blue: 37 48 68;
  --text-purple: 62 38 116;
  --solid-blue: 220 213 236;
  --solid-iris: 220 213 236;
}
:root.apex-embedded[data-apex-theme='dark'],
:root.apex-embedded[data-apex-theme='dark'] body {
  --apex-bg: #0d1216;
  --apex-surface: #171d22;
  --apex-raised: #252d35;
  --apex-text: #e8edf2;
  --apex-muted: #a0abb5;
  --apex-border: #2c353e;
  --apex-accent: #8054e8;
  --apex-accent-text: #b79aff;
  --apex-soft: #272239;
  --apex-wallpaper: #0a1014;
  --apex-incoming: #232b31;
  --apex-outgoing: #302b43;
  --slate-1: 23 29 34;
  --slate-2: 30 37 44;
  --slate-3: 37 45 53;
  --slate-4: 44 53 62;
  --slate-5: 49 59 70;
  --slate-6: 60 72 85;
  --slate-7: 76 89 103;
  --slate-8: 96 110 124;
  --slate-9: 117 131 145;
  --slate-10: 145 158 171;
  --slate-11: 160 171 181;
  --slate-12: 232 237 242;
  --background-color: 13 18 22;
  --surface-1: 23 29 34;
  --surface-2: 30 37 44;
  --surface-active: 39 34 57;
  --solid-1: 23 29 34;
  --solid-2: 30 37 44;
  --solid-3: 37 45 53;
  --solid-active: 39 34 57;
  --card-color: 30 37 44;
  --border-container: 44 53 62;
  --border-strong: 44 53 62;
  --border-weak: 38 46 54;
  --blue-3: 39 34 57;
  --blue-4: 48 43 67;
  --blue-5: 62 49 86;
  --blue-6: 77 59 111;
  --blue-7: 99 70 147;
  --blue-8: 117 77 179;
  --blue-9: 128 84 232;
  --blue-10: 150 105 241;
  --blue-11: 183 154 255;
  --blue-12: 232 221 255;
  --text-blue: 232 237 242;
  --text-purple: 232 221 255;
  --solid-blue: 48 43 67;
  --solid-iris: 48 43 67;
}
.apex-embedded #app > #app > .flex-grow > aside {
  display: none;
}
.apex-embedded #app main {
  background: var(--apex-bg);
  color: var(--apex-text);
}
.apex-embedded .conversations-list-wrap {
  border-right: 1px solid var(--apex-border);
  background: var(--apex-surface);
}
.apex-embedded .conversation-details-wrap {
  background: var(--apex-surface);
}
.apex-embedded .conversation-panel {
  background: var(--apex-wallpaper);
}
.apex-embedded .message-bubble-container.justify-start .left-bubble {
  background: var(--apex-incoming);
  color: var(--apex-text);
  border: 1px solid var(--apex-border);
}
.apex-embedded .message-bubble-container.justify-end .right-bubble {
  background: var(--apex-outgoing);
  color: var(--apex-text);
  border: 1px solid var(--apex-border);
}
.apex-embedded .message-bubble-container.apex-deleted-message :is(.left-bubble,.right-bubble) {
  background: color-mix(in srgb, #ef4444 15%, var(--apex-surface));
  border: 1px solid color-mix(in srgb, #ef4444 60%, var(--apex-border));
  color: var(--apex-text);
}
.apex-embedded .message-bubble-container.apex-deleted-message .context-menu-wrap { display: none; }
.apex-embedded .message-bubble-container.apex-deleted-message .apex-deleted-note {
  display: block;
  width: 100%;
  padding: 2px 12px 0;
  color: #ef4444;
  font-size: 11px;
  font-weight: 700;
}
.apex-embedded .reply-box {
  background: var(--apex-surface);
  border: 1px solid var(--apex-border);
  border-radius: 12px;
  box-shadow: none;
}
.apex-embedded .reply-box:focus-within {
  border-color: var(--apex-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--apex-accent) 14%, transparent);
}
.apex-embedded .conversation-details-wrap > div:first-child {
  background: var(--apex-raised);
}
.apex-embedded :is(button, a, input, [contenteditable]):focus-visible {
  outline: 2px solid var(--apex-accent);
  outline-offset: 2px;
}
.apex-native-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 46px;
  padding: 8px 14px;
  background: var(--apex-surface);
  color: var(--apex-muted);
  border-bottom: 1px solid var(--apex-border);
  font:
    12px Inter,
    system-ui,
    sans-serif;
}
.apex-native-controls span {
  margin-right: auto;
}
.apex-native-controls button {
  padding: 7px 11px;
  min-height: 32px;
  color: var(--apex-accent-text);
  background: var(--apex-soft);
  border: 1px solid var(--apex-border);
  border-radius: 7px;
  cursor: pointer;
}
.apex-native-controls button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.apex-native-controls button[hidden] {
  display: none;
}
.apex-managed #app {
  height: calc(100dvh - var(--apex-control-height, 46px));
}
.apex-managed:not(.apex-can-reply) .reply-box {
  opacity: 0.5;
}
@media (max-width: 700px) {
  .apex-native-controls button {
    min-height: 44px;
  }
  .apex-embedded .conversations-list-wrap {
    width: min(100%, 310px);
  }
  .apex-native-controls {
    font-size: 12px;
  }
}
/* Apex owns the queue, contact header and tabs; this surface is messages only. */
.apex-managed .conversations-list-wrap,
.apex-managed .conversation-details-wrap > div:first-child {
  display: none !important;
}
.apex-managed .conversation-details-wrap {
  border: 0;
}
.apex-managed #app .h-screen {
  height: 100%;
}
.apex-managed .conversation-panel {
  background-color: var(--apex-wallpaper);
  background-image: url('/apex-chat-doodles.svg');
  background-size: 460px;
}

.apex-managed .conversation-details-wrap > div:nth-child(2) > div:nth-child(2) {
  display: none;
}
/* The original Apex composer is rendered by InboxConversation in the parent. */
.apex-managed .resizable-editor-wrapper {
  display: none !important;
}