/* =============================================
   MIAUZAP DASHBOARD - DARK THEME
   Fundo escuro + Teal header + Roxo/Magenta CTAs
   ============================================= */

:root {
  --primary-color: #24b6b0;
  --secondary-color: #42c8c0;
  --tertiary-color: #1677d2;
  --accent-purple: #6f6acb;
  --accent-magenta: #d64d7f;
  --gradient-cta: #1677d2;
  --gradient-header: #171c24;
  --background-color: #10141a;
  --surface-color: #12171e;
  --surface-2: #181e27;
  --surface-3: #202733;
  --card-border: #29313d;
  --text-color: #eef2f7;
  --text-muted: #929dab;
  --success-green: #42c77a;
  --glass-bg: #131820;
  --glass-border: 1px solid #29313d;
  --glass-shadow: none;
  --border-radius: 6px;
}

/* =============================================
   BASE
   ============================================= */

body {
  background: var(--background-color) !important;
  background-image: none !important;
  color: var(--text-color) !important;
  font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  min-height: 100vh;
}

/* =============================================
   GLASS PANEL
   ============================================= */

.glass-panel {
  background: var(--glass-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: var(--border-radius) !important;
}

/* =============================================
   TYPOGRAPHY & ICONS
   ============================================= */

.cat-icon-gradient {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ui.header {
  font-weight: 600 !important;
  color: var(--text-color) !important;
}

/* =============================================
   LAYOUT HELPERS
   ============================================= */

.hidden {
  display: none !important;
}

.ui.stackable.cards>.card.hidden {
  display: none !important;
}

.container {
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.p1 {
  padding-right: 1em;
  padding-left: 1em;
}

.mb-4 {
  margin-bottom: 1.5em !important;
}

.adminlogin {
  display: none;
}

.required {
  color: #ff6b6b;
}

/* =============================================
   HEADER / MENU
   ============================================= */

.menu-header {
  background: linear-gradient(135deg, #062535 0%, #0a3544 50%, #083040 100%) !important;
  color: white !important;
  margin-bottom: 2em !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
  border-bottom: 1px solid rgba(0, 194, 212, 0.25) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease-in-out;
}

.menu-header .title-container {
  font-size: clamp(1.5em, 3vw, 1.8em) !important;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.main-header {
  background: linear-gradient(135deg, #062535 0%, #0a3544 50%, #083040 100%) !important;
  color: white !important;
  padding: 1.5em 2em !important;
  border-radius: 24px !important;
  margin-bottom: 2em !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(0, 194, 212, 0.2) !important;
  transition: all 0.3s ease-in-out;
}

.main-header .title-container {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}

.main-header .whatsapp.icon {
  font-size: 1em !important;
}

@media (min-width: 768px) {
  .main-header {
    padding: 2em !important;
  }
}

/* =============================================
   MENU ITEM OVERRIDES
   ============================================= */

a#menulogout,
a:visited#menulogout {
  color: var(--text-muted) !important;
  transition: color 0.2s;
}

a#menulogout:hover {
  color: var(--primary-color) !important;
}

#user-role-indicator.admin {
  color: #ff6b6b;
  font-weight: bold;
}

#user-role-indicator.admin i.icon {
  color: #ff4444;
}

#user-role-indicator.user {
  color: #a3f298;
}

#user-role-indicator.user i.icon {
  color: #a3f298;
}

.ui.secondary.pointing.menu {
  margin-bottom: 0;
  border-bottom: none;
}

/* =============================================
   LOGIN
   ============================================= */

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(480px, 1.1fr);
  background: #0f131a;
}

.auth-brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(38px, 6vw, 84px);
  background: #071d36;
  border-right: 1px solid rgba(68, 205, 226, 0.26);
}

.auth-brand-image {
  width: min(320px, 72%);
  aspect-ratio: 1;
  object-fit: contain;
  align-self: center;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.35));
}

.auth-brand-copy {
  max-width: 520px;
}

.auth-brand-copy span,
.auth-eyebrow,
.dashboard-eyebrow {
  color: #3fd3df;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.auth-brand-copy h1 {
  color: #fff;
  margin: 10px 0;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: 0;
}

.auth-brand-copy p,
.auth-subtitle {
  color: #9ba9bc;
  font-size: 16px;
  line-height: 1.6;
}

.auth-form-panel,
.auth-single-layout {
  display: grid;
  place-items: center;
  padding: 32px;
}

.auth-single-layout {
  min-height: 100vh;
  background: #0f131a;
}

.auth-form-shell {
  width: min(100%, 430px);
}

.auth-form-shell-wide {
  width: min(100%, 620px);
}

.auth-form-shell h2 {
  color: #f6f8fb;
  font-size: 30px;
  margin: 8px 0;
  letter-spacing: 0;
}

.auth-form {
  margin-top: 28px;
}

.auth-form.ui.form .field > label,
.auth-field-heading label {
  color: #dbe2ec !important;
  font-weight: 700;
}

.auth-form.ui.form input {
  min-height: 48px;
  background: #171d27 !important;
  border: 1px solid #2b3646 !important;
  color: #f8fafc !important;
  border-radius: 6px !important;
}

.auth-form.ui.form input:focus {
  border-color: #36c4d6 !important;
  box-shadow: 0 0 0 3px rgba(54, 196, 214, 0.13) !important;
}

.auth-submit.ui.button {
  min-height: 48px;
  margin-top: 10px;
  border-radius: 6px !important;
  background: #147bd1 !important;
}

.auth-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.auth-link,
.auth-back-button {
  border: 0;
  background: transparent;
  color: #4dd3df;
  cursor: pointer;
  padding: 0;
}

.auth-back-button {
  display: block;
  margin: 18px 0 28px;
}

.auth-mobile-brand {
  display: none;
  align-items: center;
  gap: 10px;
  color: #fff;
  margin-bottom: 26px;
}

.auth-mobile-brand img,
.auth-inline-logo,
.sidebar-brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 50%;
}

.auth-inline-logo {
  width: 62px;
  height: 62px;
  display: block;
}

.sidebar-brand-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

@media (max-width: 850px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-form-panel { min-height: 100vh; padding: 24px; }
  .auth-mobile-brand { display: flex; }
}

.login {
  border-radius: 24px !important;
  background: var(--surface-color) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 152, 0, 0.1) !important;
  padding: 3.5em !important;
  position: relative;
  overflow: hidden;
}

.login::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-cta);
  border-radius: 24px 24px 0 0;
}

/* Platform and Instagram workspaces */
.platform-admin-view,
.instagram-workspace {
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  background: #141820;
}

.workspace-page-header,
.workspace-section-heading,
.settings-channel-heading,
.instagram-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.workspace-page-header {
  margin-bottom: 22px;
}

.workspace-page-header h2,
.workspace-section-heading h3,
.settings-channel-heading h3 {
  margin: 4px 0;
  color: #f7f9fc;
  letter-spacing: 0;
}

.workspace-page-header p,
.settings-channel-heading p {
  margin: 0;
  color: #929dad;
}

.platform-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  border-top: 1px solid #293241;
  border-bottom: 1px solid #293241;
  margin-bottom: 24px;
}

.platform-kpi-row > div {
  min-height: 96px;
  padding: 18px;
  border-right: 1px solid #293241;
}

.platform-kpi-row > div:last-child { border-right: 0; }
.platform-kpi-row span { display: block; color: #8e9aab; font-size: 12px; text-transform: uppercase; font-weight: 700; }
.platform-kpi-row strong { display: block; color: #fff; font-size: 30px; margin-top: 7px; }

.workspace-section {
  padding: 20px 0 26px;
  border-bottom: 1px solid #293241;
}

.workspace-section-heading { margin-bottom: 16px; }
.workspace-section-heading span { color: #37c9d6; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.platform-company-table-wrap { overflow-x: auto; }
.platform-company-table-wrap .ui.table { min-width: 920px; }

.platform-channel-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.platform-channel-badges span { padding: 3px 7px; border: 1px solid #344254; color: #c9d3df; border-radius: 4px; font-size: 11px; }
.platform-channel-options { display: flex !important; flex-wrap: wrap; gap: 14px; }
.platform-channel-options > label:first-child { width: 100%; }
.platform-channel-options > label:not(:first-child) { color: #dce4ee; font-weight: 500; }
.platform-channel-options input { margin-right: 5px; }

.platform-meta-form { max-width: 920px; }
.platform-webhook-hint { color: #aab5c3; margin: 4px 0 18px; }
.platform-webhook-hint code { color: #46d7df; }

.instagram-automation-layout {
  flex: 1;
  min-height: 0;
  border-top: 1px solid #293241;
  overflow: hidden;
}

#instagram-automation-view:not(.hidden) { display: flex; flex-direction: column; overflow: hidden; }
#instagram-automation-view .workspace-page-header { flex: 0 0 auto; margin-bottom: 12px; }
#instagram-automation-view .workspace-page-header p { display: none; }
#instagram-automation-view .workspace-page-header h2 { font-size: 20px; }
#instagram-automation-view .instagram-flow-editor { height: 100%; padding: 10px 0 0; }
#instagramFlowForm { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }

.instagram-flow-setup { border: 1px solid #303b4b; border-radius: 5px; background: #171d25; overflow: hidden; }
.instagram-flow-setup-summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 9px 7px 13px; }
.instagram-flow-setup-summary span { display: block; color: #7f8da0; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.instagram-flow-setup-summary strong { display: block; max-width: min(680px, 72vw); overflow: hidden; margin-top: 2px; color: #e9f0f7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.instagram-flow-setup-summary button { width: 32px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid #374557; border-radius: 4px; background: #202936; color: #b8c5d3; cursor: pointer; }
.instagram-flow-setup-summary button:hover { border-color: #3c8a91; color: #5ee1df; }
.instagram-flow-setup-summary button i { margin: 0 !important; transition: transform .16s ease; }
.instagram-flow-setup:not(.collapsed) .instagram-flow-setup-summary button i { transform: rotate(180deg); }
.instagram-flow-setup-body { display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); max-height: min(330px, 42vh); border-top: 1px solid #303b4b; }
.instagram-flow-setup.collapsed .instagram-flow-setup-body { display: none; }
.instagram-flow-setup-fields { min-width: 0; padding: 12px 14px; overflow-y: auto; }
.instagram-flow-setup-fields .instagram-editor-actions { margin-top: 10px; }

.instagram-flow-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-right: 1px solid #303b4b;
  overflow-y: auto;
}

.instagram-flow-list-item {
  width: 100%;
  min-width: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border: 1px solid #293241;
  background: transparent;
  color: #d9e1eb;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.instagram-flow-list-item.active { color: #46d4dd; background: #17232d; }
.instagram-flow-list-item small { color: #8491a2; display: block; margin-top: 3px; }
.instagram-flow-list-actions { display: inline-flex; align-items: center; gap: 10px; margin-left: 14px; color: #94a2b4; }
.instagram-flow-list-actions i { margin: 0 !important; padding: 4px; }
.instagram-flow-list-actions .copy.icon:hover { color: #5ee1df; }
.instagram-flow-list-actions .trash.icon:hover { color: #ff7d85; }
.instagram-flow-editor { min-width: 0; }
.instagram-flow-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.instagram-flow-publication-picker { display: grid; grid-template-columns: minmax(210px, 340px) 38px; gap: 7px; }
.instagram-flow-publication-picker select,
.instagram-account-media-actions select { min-height: 38px; border: 1px solid #344152; border-radius: 5px; background: #121820; color: #e8eef6; padding: 7px 10px; }

.instagram-visual-builder {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  margin: 8px 0 0;
  border: 1px solid #2b3544;
  border-radius: 6px;
  overflow: hidden;
}

.instagram-block-palette { display: flex; gap: 8px; padding: 10px; background: #11161d; border-bottom: 1px solid #2b3544; overflow-x: auto; }
.instagram-block-palette button {
  width: auto;
  min-width: 128px;
  min-height: 38px;
  margin: 0;
  border: 1px solid #344152;
  border-radius: 5px;
  background: #1a212c;
  color: #dce5ef;
  text-align: left;
  cursor: grab;
}

.instagram-flow-canvas {
  position: relative;
  background: #171c24;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: grab;
  scrollbar-width: none;
}

.instagram-flow-canvas::-webkit-scrollbar { display: none; }
.instagram-flow-canvas.is-panning { cursor: grabbing; user-select: none; }
.instagram-flow-canvas.is-panning .instagram-node { user-select: none; }

.instagram-flow-canvas::after { content: ''; display: block; width: var(--instagram-flow-width, 1220px); height: var(--instagram-flow-height, 620px); pointer-events: none; }
.instagram-flow-canvas:not(:has(.instagram-node))::before { content: attr(data-empty); position: absolute; inset: 0; display: grid; place-items: center; color: #6f7c8e; }
.instagram-flow-connectors { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
.instagram-flow-connectors path { fill: none; stroke: #22c8c1; stroke-width: 2.5; opacity: 0.72; }
.instagram-flow-connection-layer { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.instagram-flow-connection-tools { position: absolute; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #354456; border-radius: 5px; background: #151b24; box-shadow: 0 5px 14px rgba(0,0,0,.34); transform: translate(-50%, -50%); pointer-events: auto; }
.instagram-flow-connection-tools > button { width: 24px; height: 24px; display: inline-grid; place-items: center; border: 0; border-radius: 3px; background: transparent; color: #a9b7c7; padding: 0; cursor: pointer; }
.instagram-flow-connection-tools > button i { margin: 0 !important; }
.instagram-flow-connection-tools > .instagram-connection-add:hover { background: rgba(34,200,193,.16); color: #5ee1df; }
.instagram-flow-connection-tools > .instagram-connection-delete:hover { background: rgba(239,107,115,.15); color: #ff8d94; }
.instagram-connection-insert-menu { position: absolute; top: 34px; left: 50%; width: 290px; display: none; padding: 9px; border: 1px solid #3a485b; border-radius: 6px; background: #111720; box-shadow: 0 18px 40px rgba(0,0,0,.5); transform: translateX(-50%); }
.instagram-flow-connection-tools.menu-open .instagram-connection-insert-menu { display: block; }
.instagram-connection-insert-menu > strong { display: block; margin: 0 0 7px; color: #dbe7f2; font-size: 11px; }
.instagram-connection-insert-menu > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.instagram-connection-insert-type { min-width: 0; min-height: 32px; display: flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 4px; background: #19212c; color: #b9c7d5; padding: 6px 7px; text-align: left; cursor: pointer; }
.instagram-connection-insert-type:hover { border-color: #397c84; background: #1c2a34; color: #5ee1df; }
.instagram-connection-insert-type i { width: 16px; margin: 0 !important; text-align: center; }
.instagram-connection-insert-type span { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.instagram-node { position: absolute; z-index: 2; width: 240px; min-height: 72px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; gap: 8px; align-items: center; padding: 8px; background: #202732; border: 1px solid #344152; border-left: 3px solid #34c6d3; border-radius: 5px; box-shadow: 0 6px 16px rgba(0,0,0,.2); transition: width .16s ease, border-color .16s ease, box-shadow .16s ease; }
.instagram-node:hover { border-color: #496075; }
.instagram-node.expanded { z-index: 10; width: 440px; align-items: start; border-color: #3f7886; box-shadow: 0 18px 45px rgba(0,0,0,.48); }
.instagram-node.dragging { z-index: 15; box-shadow: 0 14px 32px rgba(0,0,0,.42); transition: none; }
.instagram-node input,
.instagram-node textarea,
.instagram-node select { width: 100%; min-height: 32px; background: #151a22; color: #f2f5f9; border: 1px solid #394456; border-radius: 4px; padding: 6px 7px; }
.instagram-node textarea { min-height: 62px; line-height: 1.35; resize: vertical; }
.instagram-node label { display: block; margin: 6px 0 4px; color: #aeb9c7; font-size: 11px; }
.instagram-node-kind { display: inline-flex; color: #4bd7df; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.instagram-node-state { display: block; margin-top: 7px; color: #8fa0b2; font-size: 11px; line-height: 1.35; }
.instagram-node-sequence { display: grid; place-items: center; align-content: center; gap: 4px; width: 42px; min-height: 52px; color: #5ee1df; border-right: 1px solid #344152; cursor: move; user-select: none; }
.instagram-node-sequence i { margin: 0 !important; font-size: 19px; }
.instagram-node-sequence span { color: #8292a5; font-size: 9px; font-weight: 800; }
.instagram-node-open { min-width: 0; border: 0; background: transparent; color: #edf3f8; padding: 2px 0; text-align: left; cursor: pointer; }
.instagram-node-open span { display: block; overflow: hidden; color: #4bd7df; font-size: 10px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.instagram-node-open strong { display: block; overflow: hidden; margin-top: 5px; color: #bdc8d5; font-size: 11px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.instagram-node-open:hover strong { color: #ffffff; }
.instagram-node-editor { display: none; grid-column: 1 / -1; width: 100%; max-height: 610px; margin-top: 2px; padding: 10px 4px 3px; overflow-y: auto; border-top: 1px solid #334050; }
.instagram-node.expanded .instagram-node-editor { display: block; }
.instagram-node-compact-outputs { position: absolute; top: 50%; right: -10px; display: flex; flex-direction: column; gap: 7px; transform: translateY(-50%); }
.instagram-node.expanded .instagram-node-compact-outputs { display: none; }
.instagram-compact-output { width: 15px !important; height: 15px !important; }
.instagram-compact-output.is-unconnected { border-style: dashed; background: #202b37; opacity: .9; }
.instagram-node-private_buttons { border-left-color: #f472b6; }
.instagram-node-action_buttons { border-left-color: #67a7ff; }
.instagram-node-form { border-left-color: #4bd7df; }
.instagram-node-random_comment_reply { border-left-color: #a78bfa; }
.instagram-node-end { border-left-color: #ef6b73; }
.instagram-flow-options-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.instagram-flow-options-heading label { margin: 0; }
.instagram-flow-option-add,
.instagram-flow-option-remove { width: 28px; height: 28px; border: 1px solid #3a485b; border-radius: 4px; background: #171d26; color: #b9c6d5; cursor: pointer; }
.instagram-flow-option-add:hover { color: #5ee1df; border-color: #3f9196; }
.instagram-flow-option-remove:hover { color: #ff8d94; border-color: #85464c; }
.instagram-flow-option-remove:disabled { opacity: 0.35; cursor: default; }
.instagram-flow-option-add i,
.instagram-flow-option-remove i { margin: 0 !important; }
.instagram-flow-options { display: grid; gap: 6px; margin-top: 6px; }
.instagram-flow-variants { display: grid; gap: 6px; margin-top: 6px; }
.instagram-flow-variant-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; align-items: stretch; padding: 6px; border: 1px solid #303c4d; border-radius: 4px; background: #1a2029; }
.instagram-flow-variant-row label { min-width: 0; margin: 0 !important; }
.instagram-flow-variant-row label > span,
.instagram-form-fields label > span { display: block; margin: 0 0 3px; color: #8494a7; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.instagram-flow-variant-row textarea { min-height: 52px; resize: vertical; }
.instagram-flow-variant-add,
.instagram-flow-variant-remove { width: 28px; height: 28px; border: 1px solid #3a485b; border-radius: 4px; background: #171d26; color: #b9c6d5; cursor: pointer; }
.instagram-flow-variant-add:hover { color: #5ee1df; border-color: #3f9196; }
.instagram-flow-variant-remove:hover { color: #ff8d94; border-color: #85464c; }
.instagram-flow-variant-add:disabled,
.instagram-flow-variant-remove:disabled { opacity: 0.35; cursor: default; }
.instagram-flow-variant-add i,
.instagram-flow-variant-remove i { margin: 0 !important; }
.instagram-form-fields { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 7px; margin-top: 8px; }
.instagram-form-fields label { min-width: 0; margin: 0 !important; }
.instagram-flow-option-row { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) 28px 12px; gap: 5px; align-items: end; padding: 6px; border: 1px solid #303c4d; border-radius: 4px; background: #1a2029; }
.instagram-flow-option-row input,
.instagram-flow-option-row select { min-width: 0; height: 31px; min-height: 31px; padding: 5px 6px; font-size: 11px; }
.instagram-flow-option-field { min-width: 0; margin: 0 !important; }
.instagram-flow-option-field > span { display: block; margin: 0 0 3px; color: #8494a7; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.instagram-flow-option-row .node-option-title-field { grid-column: 1; grid-row: 1; }
.instagram-flow-option-row .node-option-action-field { grid-column: 2; grid-row: 1; }
.instagram-flow-option-row .node-option-value-field { grid-column: 1; grid-row: 2; }
.instagram-flow-option-row .node-option-destination-field { grid-column: 2; grid-row: 2; }
.instagram-flow-option-row .instagram-flow-option-remove { grid-column: 3; grid-row: 1 / 3; height: 100%; }
.instagram-flow-option-row .instagram-connector-output { grid-column: 4; grid-row: 1 / 3; }
.instagram-flow-option-row.is-link .node-option-value-field { grid-column: 1 / 3; }
.instagram-flow-option-row.is-reply .node-option-destination-field { grid-column: 1 / 3; }
.instagram-file-picker { display: inline-flex !important; align-items: center; gap: 6px; width: auto; padding: 8px 10px; border: 1px solid #3b5368; border-radius: 4px; color: #c9e6ea !important; cursor: pointer; }
.instagram-file-picker input { display: none; }
.instagram-upload-status { margin-left: 8px; color: #8fa0b2; }
.instagram-node-buttons { border-left-color: #f0a13a; }
.instagram-node-private_reply { border-left-color: #d85d9e; }
.instagram-node-wait_reply { border-left-color: #8b79e8; }
.instagram-node-remove { width: 22px; height: 26px; border: 0; background: transparent; color: #ef6c74; padding: 0; cursor: pointer; }
.instagram-node-remove i { margin: 0 !important; }
.instagram-node-default-route { display: grid; grid-template-columns: minmax(0, 1fr) 14px; gap: 6px; align-items: end; margin-top: 8px; padding-top: 7px; border-top: 1px solid #334050; }
.instagram-node-default-route label { grid-column: 1 / 3; margin: 0 !important; }
.instagram-node-default-route select { grid-column: 1; }
.instagram-connector-output,
.instagram-connector-input { width: 14px; height: 14px; border: 2px solid #4ce0dc; border-radius: 50%; background: #17202a; box-shadow: 0 0 0 3px rgba(34,200,193,.12); cursor: crosshair; }
.instagram-connector-output { display: inline-block; align-self: center; }
.instagram-connector-output:hover,
.instagram-connector-output.active { background: #4ce0dc; box-shadow: 0 0 0 5px rgba(34,200,193,.22); }
.instagram-connector-output.disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }
.instagram-connector-input { position: absolute; z-index: 3; left: -10px; top: 28px; width: 16px; height: 16px; border-color: #67a7ff; box-shadow: 0 0 0 3px rgba(103,167,255,.13); }
.instagram-flow-canvas.is-connecting .instagram-connector-input { animation: instagram-connector-pulse 1s ease-in-out infinite alternate; }
.instagram-flow-canvas.is-connecting .instagram-node:hover .instagram-connector-input { background: #67a7ff; }
@keyframes instagram-connector-pulse { from { box-shadow: 0 0 0 3px rgba(103,167,255,.13); } to { box-shadow: 0 0 0 7px rgba(103,167,255,.28); } }
.instagram-flow-variable-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 0 0; }
.instagram-flow-variable-bar > span { color: #8fa0b2; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.instagram-flow-variable-bar button { border: 1px solid #385468; background: #14212b; color: #aee9eb; border-radius: 4px; padding: 6px 9px; cursor: pointer; }

.instagram-post-editor-layout { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(320px, 430px); gap: 34px; border-top: 1px solid #293241; padding: 22px 0 28px; }
.instagram-post-composer { padding-right: 30px; border-right: 1px solid #293241; }
.instagram-post-upload { min-height: 94px; display: flex !important; align-items: center; justify-content: center; gap: 10px; border: 1px dashed #3d6270; border-radius: 6px; background: #131b23; color: #bfeff0 !important; cursor: pointer; }
.instagram-post-upload:hover { border-color: #27c9c2; background: #16242b; }
.instagram-post-upload input { display: none; }
.instagram-post-upload-status { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.instagram-post-upload-status span { padding: 5px 8px; border: 1px solid #334153; border-radius: 4px; color: #b8c5d3; font-size: 11px; }
.instagram-post-upload-status span .check.icon { color: #5cdd8a; }
.instagram-post-upload-status span.error { border-color: #713d45; color: #ffabb2; }
.instagram-image-editor { margin: 18px 0; padding: 14px; border: 1px solid #334253; border-radius: 6px; background: #11171e; }
.instagram-image-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.instagram-image-editor-head span { display: block; color: #36cbc9; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.instagram-image-editor-head strong { color: #edf3f8; }
.instagram-image-filter-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; }
.instagram-image-filter-strip button { min-width: 72px; border: 1px solid #344456; border-radius: 4px; background: #1a222c; color: #aebbc9; padding: 7px 9px; cursor: pointer; }
.instagram-image-filter-strip button.active { border-color: #2fc8c4; color: #73ece7; background: #153137; }
#instagramImageCanvas { display: block; width: min(100%, 620px); max-height: 580px; margin: 0 auto 14px; object-fit: contain; background: #080b0f; border: 1px solid #2d3947; }
.instagram-image-text-controls { display: grid; grid-template-columns: minmax(180px, 1fr) 44px repeat(3, minmax(110px, .55fr)) auto; gap: 10px; align-items: end; }
.instagram-image-text-controls > label { margin: 0 !important; color: #9eacbc !important; font-size: 11px; }
.instagram-image-text-controls input[type="range"] { width: 100%; padding: 0; }
.instagram-image-text-controls input[type="color"] { width: 42px; height: 38px; padding: 3px; }
.instagram-post-flow { display: block !important; margin-top: 4px; color: #52d7d4 !important; }
.instagram-post-url-details { margin: 12px 0 16px; border-bottom: 1px solid #293241; padding-bottom: 12px; }
.instagram-post-url-details summary { color: #8fa0b2; cursor: pointer; font-size: 12px; }
.instagram-post-url-details .field { margin-top: 10px !important; }
.instagram-post-preview-panel { min-width: 0; }
.instagram-preview { width: min(100%, 390px); margin: 0 auto; border: 1px solid #303a48; border-radius: 7px; overflow: hidden; background: #11161d; color: #eff3f7; }
.instagram-preview-head { min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 9px; align-items: center; padding: 9px 12px; }
.instagram-preview-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #263443; color: #f06da9; }
.instagram-preview-media { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: #202731; color: #667487; font-size: 42px; }
.instagram-preview-media img,
.instagram-preview-media video { width: 100%; height: 100%; object-fit: cover; }
.instagram-preview-count { position: absolute; top: 10px; right: 10px; padding: 4px 7px; border-radius: 4px; background: rgba(9, 12, 16, 0.78); color: #fff; font-size: 11px; }
.instagram-preview-actions { display: flex; gap: 14px; padding: 12px 13px 5px; font-size: 19px; }
.instagram-preview-actions .bookmark.icon { margin-left: auto; }
.instagram-preview > p { min-height: 52px; margin: 0; padding: 7px 13px 15px; color: #dce3eb; line-height: 1.45; overflow-wrap: anywhere; }
.instagram-content-switch { display: inline-flex; margin: 4px 0 18px; padding: 3px; border: 1px solid #303b4a; border-radius: 6px; background: #11161d; }
.instagram-content-switch button { min-height: 36px; border: 0; border-radius: 4px; background: transparent; color: #99a7b8; padding: 7px 13px; cursor: pointer; }
.instagram-content-switch button.active { background: #1b3940; color: #69e2dc; }
.instagram-content-panel { display: none; padding-top: 4px; }
.instagram-content-panel.active { display: block; }
.instagram-account-media-actions { display: flex; align-items: center; gap: 8px; }
.instagram-account-media-actions select { min-width: 210px; }
.instagram-account-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #293241; }
.instagram-account-media-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; min-width: 0; padding: 16px 18px 16px 0; border-bottom: 1px solid #293241; }
.instagram-account-media-item:nth-child(odd) { border-right: 1px solid #293241; }
.instagram-account-media-item:nth-child(even) { padding-left: 18px; }
.instagram-account-media-thumb { position: relative; display: block; width: 150px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 5px; background: #202731; }
.instagram-account-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.instagram-account-media-thumb span { position: absolute; left: 7px; bottom: 7px; padding: 3px 5px; border-radius: 3px; background: rgba(8, 11, 15, 0.8); color: #fff; font-size: 9px; }
.instagram-account-media-body { min-width: 0; }
.instagram-account-media-body > strong { display: -webkit-box; overflow: hidden; color: #edf2f7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.instagram-account-media-body > small { display: block; margin: 6px 0 12px; color: #8491a2; }
.instagram-media-comments { grid-column: 1 / -1; margin-top: 12px; padding-top: 10px; border-top: 1px solid #303a48; }
.instagram-media-comments > div { padding: 8px 0; border-bottom: 1px solid #28313e; }
.instagram-media-comments strong { color: #53d7d6; font-size: 12px; }
.instagram-media-comments p { margin: 3px 0; color: #dbe3eb; }
.instagram-media-comments small { color: #7f8c9d; }
.instagram-post-list-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid #293241; align-items: center; }
.instagram-post-list-item img { width: 54px; height: 54px; object-fit: cover; border-radius: 5px; background: #242b35; }
.instagram-post-list-item strong { color: #eef2f7; display: block; }
.instagram-post-list-item small { color: #8793a3; }
.instagram-status { display: inline-flex; margin-top: 5px; padding: 2px 6px; border-radius: 4px; color: #b8c3d0; border: 1px solid #394557; font-size: 10px; text-transform: uppercase; }
.instagram-status.published { color: #78db9c; border-color: #33704c; }
.instagram-status.failed { color: #ff8b91; border-color: #763840; }

.channel-connections-list { margin: 20px 0; }
.channel-connection-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid #303846; }
.channel-connection-row img { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; }
.channel-connection-row strong { display: block; color: #fff; }
.channel-connection-row small { color: #8d99a8; }
.manual-connection-disclosure { margin-top: 26px; border-top: 1px solid #303846; padding-top: 16px; color: #aeb9c6; }
.manual-connection-disclosure summary { cursor: pointer; color: #46cfd9; }
.manual-connection-disclosure form { margin-top: 18px; }

@media (max-width: 1050px) {
  .platform-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .platform-kpi-row > div { border-bottom: 1px solid #293241; }
  .instagram-automation-layout,
  .instagram-post-editor-layout { grid-template-columns: 1fr; }
  .instagram-flow-setup-body { grid-template-columns: 1fr; max-height: min(440px, 55vh); }
  .instagram-flow-list { flex-direction: row; border-right: 0; border-bottom: 1px solid #293241; overflow-x: auto; overflow-y: hidden; }
  .instagram-flow-list-item { min-width: 220px; }
  .instagram-flow-editor { padding-left: 0; }
  .instagram-post-composer { border-right: 0; border-bottom: 1px solid #293241; padding: 0 0 24px; }
  .instagram-account-media-grid { grid-template-columns: 1fr; }
  .instagram-account-media-item:nth-child(odd) { border-right: 0; }
  .instagram-account-media-item:nth-child(even) { padding-left: 0; }
  .instagram-image-text-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .instagram-visual-builder { grid-template-columns: 1fr; }
  .instagram-block-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-right: 0; border-bottom: 1px solid #2b3544; }
  .instagram-block-palette button { margin: 0; }
  .instagram-flow-canvas { min-height: 560px; }
  .instagram-flow-header-actions,
  .instagram-account-media-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .instagram-flow-publication-picker { grid-template-columns: minmax(0, 1fr) 38px; }
  .instagram-account-media-actions select { width: 100%; min-width: 0; }
  .instagram-account-media-item { grid-template-columns: 94px minmax(0, 1fr); }
  .instagram-account-media-thumb { width: 94px; }
  .instagram-flow-option-row { grid-template-columns: minmax(100px, 1fr) minmax(130px, 1fr) 32px 14px; }
  .instagram-image-text-controls { grid-template-columns: 1fr; }
}

#loginForm label {
  color: var(--primary-color) !important;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.85rem;
  letter-spacing: 0.5px;
}

/* =============================================
   CARDS
   ============================================= */

.ui.cards>.card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  border-radius: 16px !important;
  margin: 0.7em !important;
  background-color: var(--surface-2) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-color) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.ui.cards>.card:not(.no-hover):hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 194, 212, 0.3) !important;
  background-color: var(--surface-3) !important;
}

.ui.cards>.card .header {
  color: var(--text-color) !important;
}

.ui.cards>.card .description {
  color: var(--text-muted) !important;
}

.ui.cards>.card .ui.right.ribbon.label {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-color: var(--secondary-color) !important;
}

/* =============================================
   DIVIDERS
   ============================================= */

.ui.horizontal.divider {
  font-size: 1.1em !important;
  color: var(--primary-color) !important;
  margin: 2.5em 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.ui.horizontal.divider::before,
.ui.horizontal.divider::after {
  background-color: rgba(0, 194, 212, 0.2) !important;
}

/* =============================================
   BUTTONS
   ============================================= */

.ui.button {
  border-radius: 10px !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
}

/* Primary button → roxo/magenta gradient */
.ui.primary.button,
.ui.positive.button,
#apiSendTestBtn {
  background: var(--gradient-cta) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(123, 47, 247, 0.4) !important;
}

.ui.primary.button:hover,
.ui.positive.button:hover,
#apiSendTestBtn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 30px rgba(123, 47, 247, 0.55) !important;
  filter: brightness(1.1);
}

/* Secondary button */
.ui.secondary.button {
  background: var(--surface-3) !important;
  color: var(--text-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ui.secondary.button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* Generic button default */
.ui.button:not(.primary):not(.secondary):not(.positive):not(.negative):not(.red):not(.green):not(.blue):not(.orange):not(.purple):not(.teal):not(.cancel) {
  background: var(--surface-3) !important;
  color: var(--text-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ui.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.ui.red.button {
  background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
  color: white !important;
}

.ui.green.button {
  background: linear-gradient(135deg, #00875a, #00c853) !important;
  color: white !important;
}

.ui.blue.button {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
  color: #000 !important;
}

.ui.purple.button {
  background: linear-gradient(135deg, #6c3483, #8e44ad) !important;
  color: white !important;
}

.ui.cancel.button,
.ui.button.cancel {
  background: var(--surface-3) !important;
  color: var(--text-muted) !important;
}

/* =============================================
   FORMS & INPUTS
   ============================================= */

.ui.form input,
.ui.form textarea,
.ui.form select {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: var(--surface-color) !important;
  color: var(--text-color) !important;
  transition: all 0.3s ease;
}

.ui.form input::placeholder,
.ui.form textarea::placeholder {
  color: var(--text-muted) !important;
}

.ui.form input:focus,
.ui.form textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(0, 194, 212, 0.15) !important;
  background: var(--surface-2) !important;
}

.ui.form label {
  color: var(--text-muted) !important;
}

.ui.dropdown,
.ui.selection.dropdown {
  background: var(--surface-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-color) !important;
  border-radius: 10px !important;
}

.ui.dropdown .menu {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ui.dropdown .menu .item {
  color: var(--text-color) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.ui.dropdown .menu .item:hover,
.ui.dropdown .menu .item.selected {
  background: rgba(255, 152, 0, 0.15) !important;
  color: var(--primary-color) !important;
}

/* Accessibility Fixes */
.ui.form .field>label {
  color: var(--text-color) !important;
  opacity: 0.9;
}

.ui.table thead th {
  color: var(--primary-color) !important;
}

/* =============================================
   MIAUCHAT PRODUCT UI REFRESH
   Cleaner operational dashboard layer.
   ============================================= */

:root {
  --primary-color: #14b8a6;
  --secondary-color: #2563eb;
  --tertiary-color: #f59e0b;
  --accent-purple: #7c3aed;
  --accent-magenta: #db2777;
  --gradient-cta: linear-gradient(135deg, #14b8a6 0%, #2563eb 100%);
  --gradient-header: linear-gradient(135deg, #101827 0%, #182235 100%);
  --background-color: #0f1115;
  --surface-color: #171a21;
  --surface-2: #1f2430;
  --surface-3: #262d3a;
  --card-border: rgba(148, 163, 184, 0.22);
  --text-color: #f8fafc;
  --text-muted: #a7b0bf;
  --success-green: #22c55e;
  --glass-bg: rgba(23, 26, 33, 0.92);
  --glass-border: 1px solid rgba(148, 163, 184, 0.18);
  --glass-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  --border-radius: 8px;
}

body {
  background: var(--background-color) !important;
  background-image: none !important;
  letter-spacing: 0 !important;
}

.glass-panel,
.ui.segment.glass-panel,
.ui.card,
.ui.cards>.card,
.login {
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24) !important;
}

.ui.cards>.card:not(.no-hover):hover,
.ui.button:hover {
  transform: none !important;
}

#sidebar {
  background: #121720 !important;
}

.sidebar-header {
  min-height: 64px;
}

.sidebar-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--text-muted) !important;
  padding: 11px 18px !important;
  margin: 2px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.sidebar-item:hover,
.sidebar-item.active {
  background: rgba(20, 184, 166, 0.12) !important;
  color: #e6fffb !important;
}

.dashboard-view>h2,
#settings-view>h2 {
  font-size: 1.35rem !important;
}

#settings-view .settings-layout {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 14px;
  margin: 0 !important;
  transition: grid-template-columns 0.2s ease;
}

#settings-view .settings-layout > .column {
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
}

#settings-view .settings-navigation-column {
  overflow: hidden;
  padding-right: 12px !important;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

#settings-view .settings-content-column { padding-left: 0 !important; }

.settings-navigation-toolbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0 2px 0 12px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.settings-navigation-toolbar .button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: grid !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center;
  color: var(--text-muted) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.settings-navigation-toolbar .button:hover {
  color: #5eead4 !important;
  border-color: rgba(45, 212, 191, 0.45) !important;
  background: rgba(13, 148, 136, 0.1) !important;
}

.settings-navigation-toolbar .button .icon { margin: 0 !important; }

#settings-view.settings-menu-collapsed .settings-layout {
  grid-template-columns: 46px minmax(0, 1fr);
}

#settings-view.settings-menu-collapsed .settings-navigation-column { padding-right: 10px !important; }
#settings-view.settings-menu-collapsed .settings-navigation-toolbar { justify-content: center; padding: 0; }
#settings-view.settings-menu-collapsed .settings-navigation-toolbar > span,
#settings-view.settings-menu-collapsed #settingsMenu { display: none !important; }

.ui.tabular.menu .item,
#settingsMenu .item {
  border-radius: 8px !important;
}

#settingsMenu .item {
  color: var(--text-muted) !important;
  background: transparent !important;
}

#settingsMenu .item:hover {
  color: var(--text-color) !important;
  background: rgba(148, 163, 184, 0.08) !important;
}

#settingsMenu .active.item {
  color: var(--text-color) !important;
  background: var(--surface-2) !important;
  border-color: var(--card-border) !important;
}

@media (max-width: 900px) {
  #settings-view .settings-layout,
  #settings-view.settings-menu-collapsed .settings-layout { grid-template-columns: minmax(0, 1fr); }
  #settings-view .settings-navigation-column {
    padding: 0 0 10px !important;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  }
  #settings-view.settings-menu-collapsed .settings-navigation-column { padding: 0 0 8px !important; }
  #settings-view.settings-menu-collapsed .settings-navigation-toolbar { justify-content: flex-end; }
}

.ui.table {
  background: var(--surface-color) !important;
  color: var(--text-color) !important;
  border-color: var(--card-border) !important;
}

.ui.table td,
.ui.table th {
  border-color: rgba(148, 163, 184, 0.14) !important;
}

.ui.table thead th {
  background: #111827 !important;
  color: #cbd5e1 !important;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.chat-item {
  border-radius: 8px;
  margin: 6px 10px;
}

.chat-item:hover,
.chat-item.active {
  background: rgba(37, 99, 235, 0.14) !important;
}

.message .bubble,
.message-bubble {
  border-radius: 8px !important;
}

.ui.button,
.ui.label,
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.dropdown,
.ui.selection.dropdown {
  border-radius: 8px !important;
}

.ui.primary.button,
.ui.positive.button,
#apiSendTestBtn {
  box-shadow: none !important;
}

.ui.modal>.header {
  background: #111827 !important;
  color: var(--text-color) !important;
  border-bottom: 1px solid var(--card-border) !important;
}

.ui.modal>.content,
.ui.modal>.actions {
  background: var(--surface-color) !important;
  color: var(--text-color) !important;
}

.ui.list .item .header {
  color: var(--text-color) !important;
}

.ui.list .item .description {
  color: var(--text-muted) !important;
}

.ui.modal .header {
  color: #ffffff !important;
}

input,
textarea {
  color: #ffffff !important;
}

/* =============================================
   GRID
   ============================================= */

.ui.grid {
  margin: -0.7em !important;
}

.ui.grid>.column {
  padding: 0.7em !important;
}

/* =============================================
   TABLES
   ============================================= */

.ui.celled.table {
  background: transparent !important;
  color: var(--text-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ui.table thead tr th {
  background: var(--surface-3) !important;
  color: var(--primary-color) !important;
  border-bottom: 1px solid rgba(0, 194, 212, 0.2) !important;
  font-weight: 700 !important;
}

.ui.table tbody tr td {
  background: var(--surface-color) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  color: var(--text-color) !important;
}

.ui.table tbody tr:hover td {
  background: var(--surface-2) !important;
}

/* =============================================
   SEGMENTS
   ============================================= */

.ui.segment {
  background: var(--surface-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
  color: var(--text-color) !important;
}

/* =============================================
   MESSAGES
   ============================================= */

.ui.message {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-color) !important;
  border-radius: 10px !important;
}

.ui.info.message {
  background: rgba(0, 194, 212, 0.08) !important;
  border: 1px solid rgba(0, 194, 212, 0.25) !important;
  color: var(--text-color) !important;
}

.ui.warning.message {
  background: rgba(255, 167, 38, 0.08) !important;
  border: 1px solid rgba(255, 167, 38, 0.25) !important;
  color: #ffc107 !important;
}

.ui.success.message,
.ui.success.message {
  background: rgba(0, 230, 118, 0.08) !important;
  border: 1px solid rgba(0, 230, 118, 0.25) !important;
  color: var(--success-green) !important;
  border-radius: 12px !important;
  animation: slideIn 0.4s ease;
}

.ui.error.message {
  background: rgba(219, 40, 40, 0.08) !important;
  border: 1px solid rgba(219, 40, 40, 0.25) !important;
  color: #ff6b6b !important;
  border-radius: 10px !important;
}

@keyframes slideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* =============================================
   MODALS
   ============================================= */

.ui.modal {
  border-radius: 18px !important;
  background: var(--surface-color) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7) !important;
}

.ui.modal>.content {
  background: var(--surface-color) !important;
  color: var(--text-color) !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
}

.ui.modal>.header {
  border-radius: 18px 18px 0 0 !important;
  background: linear-gradient(135deg, #062535 0%, #0a3544 100%) !important;
  color: white !important;
  border-bottom: 1px solid rgba(0, 194, 212, 0.25) !important;
  padding: 1.5em !important;
}

.ui.modal>.actions {
  border-radius: 0 0 18px 18px !important;
  background: var(--surface-2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Scrollbar for modals */
.ui.modal>.content::-webkit-scrollbar {
  width: 6px;
}

.ui.modal>.content::-webkit-scrollbar-track {
  background: transparent;
}

.ui.modal>.content::-webkit-scrollbar-thumb {
  background: rgba(0, 194, 212, 0.35);
  border-radius: 3px;
}

/* Modal-specific buttons */
.ui.modal .actions .ui.button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.ui.modal .actions .ui.blue.button {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
  color: #000 !important;
}

.ui.modal .actions .ui.green.button {
  background: linear-gradient(135deg, #00875a, var(--success-green)) !important;
  color: #000 !important;
}

.ui.modal .actions .ui.orange.button {
  background: linear-gradient(135deg, #e55a00, #f2711c) !important;
  color: white !important;
}

.ui.modal .actions .ui.purple.button {
  background: linear-gradient(135deg, var(--accent-purple), #a855f7) !important;
  color: white !important;
}

.ui.modal .actions .ui.red.button {
  background: linear-gradient(135deg, #c0392b, #e74c3c) !important;
  color: white !important;
}

.ui.modal .ui.form .field.error input,
.ui.modal .ui.form .field.error textarea {
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15) !important;
}

/* =============================================
   DIMMER / LOADER
   ============================================= */

.ui.dimmer {
  background: rgba(0, 0, 0, 0.75) !important;
}

.ui.active.inverted.dimmer {
  background: rgba(0, 0, 0, 0.6) !important;
  border-radius: inherit !important;
}

/* =============================================
   API PLAYGROUND
   ============================================= */

#apiEndpointsMenu {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
}

#apiEndpointsMenu .item {
  color: var(--text-muted) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: all 0.2s ease !important;
}

#apiEndpointsMenu .item:hover,
#apiEndpointsMenu .item.active {
  background: rgba(0, 194, 212, 0.1) !important;
  color: var(--primary-color) !important;
  border-left: 3px solid var(--primary-color) !important;
}

#apiEndpointsMenu .item.header {
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  font-size: 0.85em !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: transparent !important;
  cursor: default !important;
}

#apiTestJson,
#apiCurlPreview {
  background: #0d1117 !important;
  color: #c9d1d9 !important;
  font-family: 'Fira Code', 'Courier New', monospace !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#apiResponse {
  background: rgba(0, 230, 118, 0.06) !important;
  border: 1px solid rgba(0, 230, 118, 0.2) !important;
  color: var(--success-green) !important;
}

#apiResponseContent {
  color: #c9d1d9 !important;
}

#apiModelSchema {
  background: rgba(0, 0, 0, 0.3) !important;
  color: #c9d1d9 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

/* Tabular menu inside playground */
.ui.top.attached.tabular.menu {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ui.top.attached.tabular.menu .item {
  color: var(--text-muted) !important;
  border: none !important;
}

.ui.top.attached.tabular.menu .active.item {
  background: var(--surface-3) !important;
  color: var(--primary-color) !important;
  border-bottom: 2px solid var(--primary-color) !important;
}

.ui.attached.tab.segment {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* =============================================
   INSTANCES TABLE
   ============================================= */

#loading {
  border-radius: 14px;
}

/* =============================================
   GROUPS STYLES
   ============================================= */

.group-card {
  transition: all 0.3s ease !important;
  max-height: 180px !important;
}

.group-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 194, 212, 0.18) !important;
}

.group-card .content {
  padding: 1em !important;
}

.group-card .header {
  font-size: 1.1em !important;
  margin-bottom: 0.3em !important;
  font-weight: 600 !important;
  color: var(--text-color) !important;
}

.group-card .description {
  font-size: 0.85em !important;
  color: var(--text-muted) !important;
  margin-bottom: 0.4em !important;
  line-height: 1.3 !important;
}

.group-photo {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.group-photo-placeholder {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--accent-purple), var(--primary-color)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: white !important;
  font-size: 1.2em !important;
}

.admin-badge {
  background: #f2711c !important;
  color: white !important;
  font-size: 0.7em !important;
  padding: 0.2em 0.4em !important;
  border-radius: 3px !important;
  margin-left: 0.5em !important;
}

.super-admin-badge {
  background: #db2828 !important;
  color: white !important;
  font-size: 0.7em !important;
  padding: 0.2em 0.4em !important;
  border-radius: 3px !important;
  margin-left: 0.5em !important;
}

.group-stats {
  display: flex !important;
  gap: 0.8em !important;
  margin-top: 0.4em !important;
  flex-wrap: wrap !important;
}

.group-stat {
  display: flex !important;
  align-items: center !important;
  gap: 0.2em !important;
  font-size: 0.8em !important;
  color: var(--text-muted) !important;
}

.group-actions {
  display: flex !important;
  gap: 0.3em !important;
  margin-top: 0.8em !important;
}

.group-action-btn {
  flex: 1 !important;
  font-size: 0.7em !important;
  padding: 0.4em 0.6em !important;
}

.groups-search-container {
  margin-bottom: 1em !important;
}

/* =============================================
   CATCHAT SPA DASHBOARD RULES
   ============================================= */

/* Sidebar */
.sidebar-item {
  display: flex !important;
  align-items: center;
  padding: 12px 20px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sidebar-item:hover {
  background: rgba(255, 152, 0, 0.05);
  color: var(--text-color);
}

.sidebar-item.active {
  background: rgba(255, 152, 0, 0.1);
  color: var(--primary-color) !important;
  border-left-color: var(--primary-color);
}

.sidebar-item i.icon {
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -3px 10px 8px 18px;
  padding: 4px 0 5px 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.16);
}

.sidebar-subitem {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 9px;
  text-align: left;
  transition: background 0.18s ease, color 0.18s ease;
}

.sidebar-subitem:hover,
.sidebar-subitem.active {
  background: rgba(0, 194, 212, 0.1);
  color: #28d7c8;
}

.sidebar-subitem.disabled {
  cursor: default;
  opacity: 0.55;
}

.sidebar-subitem.disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

.sidebar-subitem i.icon {
  flex: 0 0 16px;
  margin: 0 !important;
  width: 16px;
  text-align: center;
}

.sidebar-subitem span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-subitem .sidebar-subitem-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: rgba(245, 245, 245, 0.72);
  font-size: 0.68rem;
  line-height: 1.2;
  text-align: center;
}

.sidebar-subitem.active .sidebar-subitem-count {
  background: rgba(40, 215, 200, 0.18);
  color: #b8fff8;
}

.sidebar-subsection-label {
  margin: 9px 8px 4px;
  color: rgba(148, 163, 184, 0.72);
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
}

.sidebar-inbox-heading {
  margin-top: 2px;
}

.sidebar-channel-label {
  margin: 10px 9px 4px;
  color: #778395;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.sidebar-channel-item {
  position: relative;
}

.sidebar-channel-avatar {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 50%;
  object-fit: cover;
}

.sidebar-channel-status {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  margin-left: auto;
  border-radius: 50%;
  background: #667085;
}

.sidebar-channel-status.connected {
  background: #35c86f;
}

.sidebar-channel-status.disconnected {
  background: #e16a6a;
}

#sidebar {
  width: 222px !important;
  background: #11161e !important;
  border: 0 !important;
  border-right: 1px solid #28303b !important;
  box-shadow: none !important;
}

#sidebar .sidebar-header {
  min-height: 56px;
  padding: 11px 15px !important;
  border-bottom-color: #28303b !important;
}

#sidebar .sidebar-brand-logo {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
}

#sidebar .sidebar-menu {
  padding: 7px 0 !important;
}

#sidebar .sidebar-item {
  min-height: 38px;
  margin: 1px 8px;
  padding: 8px 11px;
  border-left: 0;
  border-radius: 6px;
  font-size: 0.87rem;
}

#sidebar .sidebar-item.active {
  background: #173039;
  border-left-color: transparent;
  color: #4dd2cb !important;
}

#sidebar .sidebar-item i.icon {
  width: 17px;
  margin-right: 9px;
}

#sidebar .sidebar-submenu {
  gap: 1px;
  margin: 0 8px 8px 15px;
  padding: 2px 0 3px 8px;
}

#sidebar .sidebar-subitem {
  min-height: 31px;
  padding: 5px 7px;
  border-radius: 5px;
  font-size: 0.76rem;
  font-weight: 500;
}

#sidebar .sidebar-subitem:hover,
#sidebar .sidebar-subitem.active {
  background: #182731;
  color: #58d4cd;
}

#sidebar .sidebar-subitem-count {
  min-width: 20px;
  padding: 1px 5px;
  background: #252d38;
  font-size: 0.64rem;
}

/* Dashboard Views */
.dashboard-view {
  background: var(--surface-color);
  color: var(--text-color);
}

.dashboard-view.hidden {
  display: none !important;
}

.sidebar-footer {
  min-width: 0;
  padding: 10px;
  border-top: 1px solid var(--card-border);
  position: relative;
  z-index: 1200;
  overflow: visible;
}

.sidebar-privacy-toggle {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sidebar-privacy-toggle i {
  width: 18px;
  margin: 0 !important;
  color: inherit;
  text-align: center;
}

.sidebar-privacy-toggle:hover {
  border-color: rgba(20, 184, 166, 0.38);
  background: rgba(20, 184, 166, 0.08);
  color: #ccfbf1;
}

.sidebar-privacy-toggle.active {
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(20, 184, 166, 0.14);
  color: #99f6e4;
}

#app-wrapper.privacy-mode .chat-item:not(.active) > div:first-child > img,
#app-wrapper.privacy-mode .chat-item:not(.active) .name,
#app-wrapper.privacy-mode .chat-item:not(.active) .preview {
  filter: blur(6px);
  opacity: 0.52;
  user-select: none;
  transition: filter 0.16s ease, opacity 0.16s ease;
}

#app-wrapper.privacy-mode .chat-item:not(.active) > div:first-child > img {
  filter: blur(7px);
}

#app-wrapper.privacy-mode .chat-item.active > div:first-child > img,
#app-wrapper.privacy-mode .chat-item.active .name,
#app-wrapper.privacy-mode .chat-item.active .preview {
  filter: none;
  opacity: 1;
}

.sidebar-user-menu {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 8px !important;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  position: relative;
}

.sidebar-user-menu > .menu {
  top: auto !important;
  bottom: calc(100% + 7px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-height: min(240px, calc(100vh - 90px));
  overflow-y: auto;
  margin: 0 !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 6px !important;
  background: #171c24 !important;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.32) !important;
}

.sidebar-user-menu > .menu > .item {
  color: var(--text-color) !important;
}

.sidebar-user-menu > .menu > .item:hover {
  background: rgba(20, 184, 166, 0.12) !important;
  color: #ccfbf1 !important;
}

.sidebar-user-menu > .dropdown.icon {
  margin: 0 0 0 auto !important;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.sidebar-user-summary {
  min-width: 0;
  display: flex !important;
  flex: 1;
  align-items: center;
  gap: 9px;
}

.sidebar-user-summary #currentUserAvatar {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
  object-fit: cover;
}

.sidebar-user-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.sidebar-user-copy strong,
.sidebar-user-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-copy strong {
  color: var(--text-color);
  font-size: 0.84rem;
  font-weight: 700;
}

.sidebar-user-copy span {
  color: var(--text-muted);
  font-size: 0.7rem;
}

/* Operational Dashboard */
.operational-dashboard {
  height: 100%;
  overflow-y: auto;
  padding: 22px;
  background: #151820;
}

.dashboard-page-header,
.dashboard-panel-heading,
.dashboard-chart-legend,
.dashboard-row-main,
.dashboard-row-metrics,
.dashboard-bar-label {
  display: flex;
  align-items: center;
}

.dashboard-page-header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.dashboard-page-header h2 {
  margin: 2px 0 4px;
  color: var(--text-color);
  font-size: 1.4rem;
}

.dashboard-page-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.dashboard-eyebrow,
.dashboard-panel-heading span {
  color: #2dd4bf;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-refresh-button {
  width: 38px;
  height: 38px;
  color: var(--text-muted) !important;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-kpi-card {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: #1a1e27;
}

.dashboard-kpi-card span,
.dashboard-kpi-card small,
.dashboard-kpi-card strong {
  display: block;
}

.dashboard-kpi-card span {
  max-width: calc(100% - 34px);
  color: var(--text-muted);
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
}

.dashboard-kpi-card strong {
  margin-top: 16px;
  color: var(--text-color);
  font-size: 1.85rem;
  line-height: 1;
}

.dashboard-kpi-card small {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.dashboard-kpi-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(148, 163, 184, 0.08);
}

.dashboard-kpi-icon i {
  margin: 0 !important;
}

.kpi-teal .dashboard-kpi-icon { color: #2dd4bf; }
.kpi-orange .dashboard-kpi-icon { color: #fbbf24; }
.kpi-blue .dashboard-kpi-icon { color: #60a5fa; }
.kpi-green .dashboard-kpi-icon { color: #4ade80; }
.kpi-violet .dashboard-kpi-icon { color: #a78bfa; }
.kpi-red .dashboard-kpi-icon { color: #fb7185; }
.kpi-cyan .dashboard-kpi-icon { color: #22d3ee; }
.kpi-pink .dashboard-kpi-icon { color: #f472b6; }

.dashboard-layout {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.dashboard-layout-primary {
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.75fr);
}

.dashboard-layout-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-layout-triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: #1a1e27;
}

.dashboard-panel-heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.dashboard-panel-heading h3 {
  margin: 3px 0 0;
  color: var(--text-color);
  font-size: 0.98rem;
}

.dashboard-chart-legend {
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.legend-dot,
.dashboard-status-dot {
  display: inline-block;
  border-radius: 50%;
}

.legend-dot {
  width: 7px;
  height: 7px;
  margin-right: 4px;
}

.legend-dot.received,
.dashboard-volume-bars .received {
  background: #14b8a6;
}

.legend-dot.sent,
.dashboard-volume-bars .sent {
  background: #60a5fa;
}

.dashboard-volume-chart {
  height: 194px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
  align-items: end;
  padding-top: 8px;
}

.dashboard-volume-column {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 18px minmax(0, 1fr) 18px;
  gap: 5px;
  text-align: center;
}

.dashboard-volume-column strong,
.dashboard-volume-column span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-volume-column strong {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.dashboard-volume-column span {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.dashboard-volume-bars {
  min-height: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.dashboard-volume-bars i {
  width: min(14px, 36%);
  min-height: 0;
  border-radius: 4px 4px 0 0;
}

.dashboard-queue-list,
.dashboard-data-list,
.dashboard-bar-list {
  display: grid;
  gap: 8px;
}

.dashboard-queue-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.022);
}

.dashboard-queue-item i {
  margin: 0 !important;
  text-align: center;
}

.dashboard-queue-item span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.dashboard-queue-item strong {
  color: var(--text-color);
}

.tone-orange i { color: #fbbf24; }
.tone-red i { color: #fb7185; }
.tone-violet i { color: #a78bfa; }
.tone-blue i { color: #60a5fa; }

.dashboard-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.11);
}

.dashboard-data-row:last-child {
  border-bottom: 0;
}

.dashboard-row-main {
  min-width: 0;
  gap: 9px;
}

.dashboard-row-main > div {
  min-width: 0;
}

.dashboard-row-main strong,
.dashboard-row-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-row-main strong {
  color: var(--text-color);
  font-size: 0.82rem;
}

.dashboard-row-main span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.69rem;
}

.dashboard-row-icon {
  width: 30px;
  flex: 0 0 30px;
  margin: 0 !important;
  color: #2dd4bf;
  font-size: 1.25rem !important;
  text-align: center;
}

.dashboard-status-dot {
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background: #64748b;
}

.dashboard-status-dot.connected { background: #22c55e; }
.dashboard-status-dot.connecting { background: #f59e0b; }

.dashboard-agent-avatar {
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.16);
  color: #bfdbfe !important;
  font-weight: 800;
}

.dashboard-row-metrics {
  flex: 0 0 auto;
  gap: 12px;
}

.dashboard-row-metrics span {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-align: right;
}

.dashboard-row-metrics b {
  display: block;
  color: var(--text-color);
  font-size: 0.8rem;
}

.dashboard-bar-row {
  min-width: 0;
}

.dashboard-bar-label {
  justify-content: space-between;
  gap: 8px;
  color: var(--text-color);
  font-size: 0.76rem;
}

.dashboard-bar-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-bar-track {
  height: 5px;
  overflow: hidden;
  margin: 6px 0 4px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.13);
}

.dashboard-bar-track i {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.dashboard-bar-row small {
  color: var(--text-muted);
  font-size: 0.66rem;
}

.dashboard-tags-panel {
  margin-top: 14px;
}

.dashboard-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dashboard-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-muted);
  font-size: 0.74rem;
}

.dashboard-tag-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dashboard-tag-pill b {
  color: var(--text-color);
}

.dashboard-empty-state,
.dashboard-load-error {
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 0.76rem;
  text-align: center;
}

.dashboard-load-error {
  margin-top: 14px;
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

@media (max-width: 1180px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-layout-primary,
  .dashboard-layout-triple {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .operational-dashboard {
    padding: 14px;
  }

  .dashboard-layout-split {
    grid-template-columns: 1fr;
  }

  .dashboard-data-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-row-metrics {
    width: 100%;
    justify-content: space-between;
  }
}

/* Chat Layout */
.conversation-list-panel {
  width: 340px !important;
  background: #141920 !important;
  border: 0 !important;
  border-right: 1px solid #29313d !important;
  box-shadow: none !important;
}

.conversation-list-toolbar {
  padding: 10px 11px 9px;
  border-bottom: 1px solid #29313d;
}

.conversation-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.conversation-list-panel .ui.input input {
  min-height: 34px;
  background: var(--surface-2) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-color) !important;
  border-radius: 5px !important;
  font-size: 0.82rem;
}

.conversation-filter-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.conversation-filter-actions:not(.has-active-filters) {
  display: flex;
}

.conversation-filter-actions #btnToggleFilters,
.conversation-filter-actions #btnClearFilters {
  min-height: 32px;
  width: 34px;
  margin: 0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  color: var(--text-color) !important;
}

.conversation-filter-actions #btnClearFilters:hover {
  border-color: rgba(239, 68, 68, 0.52) !important;
  color: #fca5a5 !important;
}

.conversation-quick-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #29313d;
  border-radius: 5px;
}

.conversation-quick-filter {
  min-width: 0;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-right: 1px solid #29313d;
  border-radius: 0;
  background: #171d25;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.conversation-quick-filter:last-child {
  border-right: 0;
}

.conversation-quick-filter i {
  margin: 0 !important;
  font-size: 0.9rem;
}

.conversation-quick-filter span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-quick-filter:hover,
.conversation-quick-filter.active {
  border-color: #29313d;
  background: #1b343a;
  color: #5bd7cf;
}

.chat-compose-form.composer-readonly {
  opacity: 0.68;
}

.chat-compose-form.composer-readonly textarea {
  cursor: not-allowed;
}

.chat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 9px 11px;
  border-bottom: 1px solid #252c36;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}

.chat-item:hover {
  background: #181f28;
}

.chat-item.active {
  background: #192832;
  border-left: 2px solid #31c6bd;
  padding-left: 9px;
}

.conversation-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.conversation-item-main > .avatar.image {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;
  object-fit: cover;
}

.chat-item .content {
  min-width: 0;
  margin-left: 0;
  flex: 1;
  overflow: hidden;
}

.chat-item .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 3px;
}

.chat-item .name {
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item .header time {
  flex: 0 0 auto;
  color: #778293;
  font-size: 0.65rem;
  font-weight: 500;
}

.chat-item .time {
  font-size: 0.8em;
  color: var(--text-muted);
}

.chat-item .preview {
  min-width: 0;
  flex: 1;
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-inbox-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.conversation-channel {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  color: #788596;
  font-size: 0.64rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-channel i.icon {
  margin: 0 !important;
}

.conversation-channel-instagram i.icon {
  color: #d06191;
}

.conversation-channel-whatsapp i.icon {
  color: #3ecb79;
}

.instagram-window-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid rgba(52, 211, 153, 0.34);
  border-radius: 4px;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.09);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.instagram-window-timer i.icon {
  margin: 0 !important;
}

.instagram-window-timer.warning {
  border-color: rgba(251, 146, 60, 0.42);
  color: #fdba74;
  background: rgba(249, 115, 22, 0.1);
}

.instagram-window-timer.expired {
  border-color: rgba(248, 113, 113, 0.38);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.09);
}

.instagram-window-timer.compact {
  margin-left: auto;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  font-size: 0.59rem;
}

.active-chat-instagram-window {
  margin-top: 4px;
}

.active-chat-instagram-window .instagram-window-timer::before {
  content: 'Janela Direct';
  color: var(--text-muted);
}

.instagram-window-empty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.instagram-window-empty i.icon {
  margin: 0 !important;
}

.conversation-preview-line {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
}

.conversation-kind {
  flex: 0 0 auto;
  padding: 1px 4px;
  border: 1px solid #374151;
  border-radius: 3px;
  color: #98a2b3;
  font-size: 0.58rem;
}

.conversation-item-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
}

.conversation-peek-button {
  opacity: 0;
  transition: opacity 0.16s;
}

.chat-item:hover .conversation-peek-button,
.chat-item.active .conversation-peek-button {
  opacity: 1;
}

.conversation-priority-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.conversation-priority-dot.priority-low {
  background: #3b82f6;
}

.conversation-priority-dot.priority-medium {
  background: #f59e0b;
}

.conversation-priority-dot.priority-high {
  background: #ef4444;
}

.settings-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.settings-section-heading h3 {
  margin: 0 0 3px;
}

.settings-section-heading span,
.workspace-setting-row span {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.workspace-preferences-form {
  max-width: 720px;
}

.workspace-setting-row {
  min-height: 74px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--card-border);
}

.workspace-setting-row > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-sound-controls {
  min-width: 238px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-sound-controls select {
  min-width: 190px;
  flex: 1;
}

.workspace-sound-controls .notification-sound-preview {
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin: 0 !important;
}

.workspace-custom-sound {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}

.workspace-custom-sound span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}

.voice-call-panel {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 12000;
  width: min(420px, calc(100vw - 28px));
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(45, 212, 191, 0.42);
  border-radius: 8px;
  background: #11151d;
  color: var(--text-color);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
  transform: translateX(-50%);
}

.voice-call-panel.hidden {
  display: none !important;
}

.voice-call-identity,
.voice-call-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.voice-call-identity {
  min-width: 0;
}

.voice-call-identity img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  object-fit: cover;
}

.voice-call-identity div {
  min-width: 0;
}

.voice-call-identity strong,
.voice-call-identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-call-identity span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.voice-call-actions .button {
  margin: 0 !important;
}

#btnStartVoiceCall.disabled {
  cursor: not-allowed;
  opacity: 0.42 !important;
}

.conversation-peek-button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.72;
}

.conversation-peek-button:hover,
.conversation-peek-button:focus {
  border-color: rgba(20, 184, 166, 0.55);
  color: #2dd4bf;
  opacity: 1;
}

.conversation-peek-button i {
  margin: 0 !important;
}

#activeChatAvatar,
#activeChatName,
#activeChatPhone {
  cursor: pointer;
}

.contacts-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.contacts-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.contacts-page-actions .button {
  margin: 0 !important;
}

.contacts-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(20, 24, 32, 0.92);
  backdrop-filter: blur(10px);
}

.contacts-search-box {
  min-width: 220px;
}

.contacts-search-box.ui.input > input#contactsSearchInput {
  background: #111827 !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #2dd4bf;
}

.contacts-search-box.ui.input > input#contactsSearchInput::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1;
}

.contacts-search-box.ui.input > input#contactsSearchInput:focus {
  border-color: #2dd4bf !important;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.14) !important;
}

.contacts-search-box.ui.icon.input > i.icon {
  color: #94a3b8 !important;
  opacity: 1;
}

.contacts-search-box.ui.input > input#contactsSearchInput:-webkit-autofill,
.contacts-search-box.ui.input > input#contactsSearchInput:-webkit-autofill:hover,
.contacts-search-box.ui.input > input#contactsSearchInput:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #111827 inset !important;
  -webkit-text-fill-color: #f8fafc !important;
}

.contacts-page-size-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: #151a23;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.contacts-page-size-control select {
  min-width: 78px;
}

.contacts-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 2px 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.contacts-pagination-actions {
  display: inline-flex;
  gap: 8px;
}

.contacts-pagination-actions .button.disabled {
  opacity: 0.42 !important;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .contacts-page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .contacts-page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .contacts-toolbar {
    grid-template-columns: 1fr;
  }
}

.chat-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.status-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.contact-panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.contact-panel-topbar strong {
  display: block;
  color: var(--text-color);
  font-size: 1rem;
}

.contact-panel-topbar span {
  display: block;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.conversation-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.conversation-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.conversation-detail-item i {
  color: var(--primary-color);
  margin-top: 2px;
}

.conversation-detail-item span,
.right-action-item small {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.conversation-detail-item strong {
  display: block;
  color: var(--text-color);
  font-size: 0.88rem;
  line-height: 1.25;
  word-break: break-word;
}

.right-action-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.group-participants-section {
  margin-top: 2px;
}

.group-participants-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.group-participant-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.group-participant-row img,
.group-participant-avatar-fallback {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.group-participant-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #263142;
  color: #e5eefc;
  font-size: 0.76rem;
  font-weight: 800;
}

.group-participant-main {
  min-width: 0;
}

.group-participant-main strong,
.group-participant-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-participant-main strong {
  color: var(--text-color);
  font-size: 0.86rem;
}

.group-participant-main span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.group-participant-direct-button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #151a23;
  color: #38bdf8;
  cursor: pointer;
}

.group-participant-direct-button:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background: #1b2635;
}

.group-participants-empty {
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.84rem;
  text-align: center;
}

.group-participants-manual {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(20, 184, 166, 0.28);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.04);
  color: var(--text-muted);
  font-size: 0.84rem;
}

.group-participants-manual button,
.group-participants-refresh {
  min-height: 34px;
  border: 1px solid rgba(20, 184, 166, 0.35);
  border-radius: 8px;
  background: #182332;
  color: #5eead4;
  cursor: pointer;
  font-weight: 700;
}

.group-participants-manual button:hover,
.group-participants-refresh:hover {
  border-color: rgba(20, 184, 166, 0.62);
  background: #1b2a39;
}

.group-participants-refresh {
  margin-top: 2px;
}

.right-runner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.right-runner-select {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #151a23;
  color: var(--text-color);
  padding: 0 9px;
  outline: none;
}

.right-runner-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.14);
}

.right-runner-play {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 184, 166, 0.35);
  border-radius: 8px;
  background: var(--gradient-cta);
  color: #fff;
  cursor: pointer;
}

.right-runner-play:disabled,
.right-runner-select:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.right-runner-play i {
  margin: 0 !important;
}

.right-routing-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.right-routing-block label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.chat-actions .contact-panel-toggle.active {
  background: rgba(20, 184, 166, 0.18) !important;
  color: #5eead4 !important;
  border-color: rgba(94, 234, 212, 0.32) !important;
}

.conversation-context-menu {
  position: fixed;
  z-index: 9999;
  min-width: 260px;
  max-width: 320px;
  overflow: visible;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: #111722;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.conversation-context-menu .context-title {
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.conversation-context-menu button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.conversation-context-menu button small {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.conversation-context-menu .context-submenu {
  position: relative;
}

.conversation-context-menu .context-submenu-trigger i {
  margin: 0 !important;
  color: var(--text-muted);
}

.conversation-context-menu .context-submenu-panel {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  z-index: 10000;
  display: none;
  min-width: 240px;
  max-height: 56vh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: #111722;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.conversation-context-menu.open-left .context-submenu-panel {
  left: auto;
  right: calc(100% + 8px);
}

.conversation-context-menu .context-submenu:hover > .context-submenu-panel,
.conversation-context-menu .context-submenu:focus-within > .context-submenu-panel {
  display: block;
}

.conversation-context-menu .context-subsection + .context-subsection {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.conversation-context-menu .context-subtitle {
  padding: 5px 8px;
  color: #5eead4;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.conversation-context-menu button:hover {
  background: rgba(20, 184, 166, 0.14);
  color: #5eead4;
}

.conversation-context-menu .context-separator {
  height: 1px;
  margin: 6px 0;
  background: rgba(148, 163, 184, 0.16);
}

.conversation-context-menu .context-empty {
  display: block;
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.right-action-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-color);
  padding: 9px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.right-action-item:hover {
  background: rgba(255, 152, 0, 0.08);
  border-color: rgba(255, 152, 0, 0.28);
}

.right-action-item span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-color);
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.right-action-empty {
  color: var(--text-muted);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  font-size: 0.82rem;
}

.chat-header {
  position: relative;
  z-index: 80;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: #101216 !important;
  box-shadow: none !important;
}

.chat-header .chat-actions {
  position: relative;
  z-index: 90;
}

.chat-header .ui.dropdown .menu {
  z-index: 5000 !important;
}

.chat-header #activeChatAvatar {
  width: 42px;
  height: 42px;
  object-fit: cover;
}

.chat-header .chat-actions .ui.button {
  min-height: 36px;
}

#btnResolveChat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px !important;
}

#chatMessages {
  background: #0d0f12;
}

.chat-messages-shell {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  background: #0d0f12;
}

.chat-messages-shell #chatMessages {
  flex: 1;
  min-height: 0;
}

.unread-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0 2px;
}

.unread-divider span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f8df8, #1f75e8);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(47, 141, 248, 0.26);
}

.chat-scroll-latest {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 12;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 50%;
  background: #1d2330;
  color: #dbeafe;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.chat-scroll-latest:hover {
  transform: translateY(-2px);
  border-color: rgba(47, 141, 248, 0.6);
  background: #243047;
}

.chat-scroll-latest i {
  margin: 0 !important;
}

.chat-scroll-latest.hidden {
  display: none !important;
}

.message-row {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

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

.message-row.note {
  justify-content: center;
}

.message-contact-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  object-fit: cover;
}

.contact-info-panel {
  background: #101216 !important;
  box-shadow: none !important;
}

.contact-panel-profile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 4px 0 10px;
}

.contact-panel-profile #infoAvatar {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px;
  object-fit: cover;
}

.contact-panel-profile h3 {
  margin: 0 0 4px !important;
  color: var(--text-color);
  font-size: 1.05rem;
}

.contact-panel-profile #infoPhone {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.contact-info-panel .ui.horizontal.divider {
  margin: 18px 0 12px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
  text-align: left;
}

.chat-input-area {
  padding: 12px 14px !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
  background: #121419 !important;
  box-shadow: none !important;
}

.chat-compose-tabs.ui.tabular.menu {
  display: inline-flex;
  min-height: 34px;
  margin: 0 0 8px !important;
  padding: 3px;
  border: 0 !important;
  border-radius: 18px;
  background: #20232b;
}

.chat-compose-tabs.ui.tabular.menu .item {
  min-height: 28px;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: var(--text-muted) !important;
  font-size: 0.82rem;
}

.chat-compose-tabs.ui.tabular.menu .item.active {
  background: #121419 !important;
  color: var(--text-color) !important;
}
.instagram-public-comment-form { display: grid; gap: 9px; }
.instagram-public-comment-target { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #344151; border-radius: 5px; color: #8f9cad; background: #141a22; font-size: 12px; }
.instagram-public-comment-target.ready { border-color: #267d7e; color: #c7eff0; }
.instagram-public-comment-target span { display: grid; gap: 2px; min-width: 0; }
.instagram-public-comment-target strong { color: #48d4d3; }
.instagram-public-comment-target-copy { flex: 1; overflow: hidden; }
.instagram-public-comment-target-actions { display: flex !important; grid-auto-flow: column; align-items: center; gap: 6px !important; margin-left: auto; flex: none; }
.instagram-public-comment-target-actions button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #2e6e73; border-radius: 6px; padding: 5px 8px; background: #173039; color: #78e2df; cursor: pointer; font: inherit; }
.instagram-public-comment-target-actions button:hover { border-color: #48d4d3; background: #1c3c44; }
.instagram-public-comment-target-actions button:disabled { opacity: .45; cursor: not-allowed; }
.instagram-public-comment-target-actions button.remove { width: 30px; padding: 5px; border-color: #4d3940; background: #291d24; color: #f2909a; }
.instagram-public-comment-target-actions button i { margin: 0 !important; }
.instagram-public-comment-compose { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: stretch; }
.instagram-public-comment-compose textarea { resize: none !important; background: #171e28 !important; color: #edf3f8 !important; border: 1px solid #344151 !important; }

.chat-compose-form {
  border: 1px solid rgba(148, 163, 184, 0.17);
  border-radius: 8px;
  background: #15171d;
  overflow: visible;
}

.attachment-draft-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(20, 184, 166, 0.055);
}

.attachment-draft-thumb {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: #1d2027;
  color: #5eead4;
}

.attachment-draft-thumb img,
.attachment-draft-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-draft-thumb i {
  margin: 0 !important;
  font-size: 1.2rem;
}

.attachment-draft-info {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.attachment-draft-info strong {
  overflow: hidden;
  color: var(--text-color);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-draft-info span {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.attachment-draft-audio {
  width: min(250px, 32vw);
  height: 34px;
}

.attachment-draft-remove {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  border: 0;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  cursor: pointer;
}

.attachment-draft-remove i {
  margin: 0 !important;
}

.chat-compose-field {
  position: relative;
  margin: 0 !important;
}

.chat-compose-field textarea {
  min-height: 72px !important;
  resize: none !important;
  border: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-compose-toolbar,
.chat-compose-tools,
.chat-compose-submit {
  display: flex;
  align-items: center;
}

.chat-compose-toolbar {
  min-height: 46px;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.chat-compose-tools,
.chat-compose-submit {
  gap: 7px;
}

.composer-icon-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: #1d2027;
  color: var(--text-muted);
  cursor: pointer;
}

.composer-icon-button:hover {
  color: var(--text-color);
  border-color: rgba(20, 184, 166, 0.42);
}

.composer-icon-button i {
  margin: 0 !important;
}

.composer-icon-button.recording {
  border-color: rgba(239, 68, 68, 0.64);
  background: rgba(127, 29, 29, 0.42);
  color: #fca5a5;
}

.audio-recording-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fca5a5;
  font-size: 0.82rem;
  font-weight: 700;
}

.audio-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: recordingPulse 1.2s ease-in-out infinite;
}

@keyframes recordingPulse {
  50% {
    opacity: 0.35;
  }
}

.signature-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  user-select: none;
}

.signature-toggle input {
  accent-color: var(--primary-color);
}

.chat-send-button {
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 0 12px !important;
}

.conversation-peek-modal.ui.modal {
  overflow: hidden;
  background: #101216 !important;
}

.conversation-peek-modal.ui.modal > .header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #15171d !important;
}

.conversation-peek-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conversation-peek-title > i {
  color: #2dd4bf;
}

.conversation-peek-title strong,
.conversation-peek-title span {
  display: block;
}

.conversation-peek-title span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.conversation-peek-close {
  margin: 0 !important;
}

.conversation-peek-modal .content {
  padding: 0 !important;
  background: #0d0f12 !important;
}

.conversation-peek-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(20, 184, 166, 0.18);
  background: rgba(20, 184, 166, 0.08);
  color: #99f6e4;
  font-size: 0.78rem;
}

.peek-chat-messages {
  height: min(58vh, 520px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 14px;
}

.peek-message-row {
  display: flex;
}

.peek-message-row.out {
  justify-content: flex-end;
}

.peek-message-row.note {
  justify-content: center;
}

.peek-message-bubble {
  max-width: 78%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: #24272c;
  color: var(--text-color);
  font-size: 0.84rem;
  line-height: 1.35;
}

.peek-message-bubble.out {
  border-color: rgba(245, 158, 11, 0.16);
  background: #29261f;
}

.peek-message-bubble.note {
  max-width: 90%;
  border-color: rgba(242, 113, 28, 0.28);
  background: rgba(242, 113, 28, 0.12);
}

.peek-note-label,
.peek-sender-name {
  display: block;
  margin-bottom: 3px;
  color: #fbbf24;
  font-size: 0.74rem;
}

.peek-message-time {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.68rem;
  text-align: right;
}

.peek-media-image,
.peek-media-video {
  max-width: 240px;
  max-height: 220px;
  border-radius: 6px;
  object-fit: contain;
}

.peek-sticker-image {
  width: 124px;
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
}

.peek-audio-player {
  width: min(280px, 58vw);
  height: 36px;
}

.peek-document-link {
  color: #5eead4;
}

.peek-media-caption {
  margin-top: 6px;
}

/* Chat Bubbles */
.message-bubble {
  max-width: min(75%, 680px);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 0;
  position: relative;
  font-size: 0.95em;
  line-height: 1.4;
  word-wrap: break-word;
}

.message-bubble.out {
  align-self: flex-end;
  background: #29261f;
  color: var(--text-color);
  border: 1px solid rgba(245, 158, 11, 0.14);
  box-shadow: none;
}

.message-bubble.in {
  align-self: flex-start;
  background: #24272c;
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.message-bubble.note {
  align-self: center;
  background: rgba(242, 113, 28, 0.15);
  border: 1px solid rgba(242, 113, 28, 0.3);
  color: #f2711c;
  border-radius: 8px;
  font-style: italic;
  font-size: 0.85em;
  max-width: 90%;
}

.chat-interactive-preview {
  min-width: 220px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-interactive-heading {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  color: #d1a34d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.chat-interactive-heading .icon {
  margin: 0 !important;
}

.chat-interactive-options {
  display: grid;
  gap: 5px;
}

.chat-interactive-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-color);
  font-size: 0.82rem;
  line-height: 1.2;
}

.chat-interactive-option .icon {
  width: 18px;
  margin: 0 !important;
  color: #d1a34d;
  text-align: center;
}

.chat-interactive-option small {
  color: var(--text-muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.chat-interactive-option.is-link {
  color: #67e8f9;
  text-decoration: none;
}

.chat-interactive-option.is-link:hover {
  border-color: rgba(103, 232, 249, 0.48);
  background: rgba(103, 232, 249, 0.08);
  color: #a5f3fc;
}

.chat-interactive-option.is-link .icon {
  color: #67e8f9;
}

.chat-interactive-option.is-choice,
.chat-interactive-option.is-link {
  grid-template-columns: 18px minmax(0, 1fr);
}

.chat-instagram-template-preview {
  min-width: min(270px, 72vw);
}

.chat-instagram-template-cards {
  display: flex;
  gap: 8px;
  max-width: min(660px, 72vw);
  overflow-x: auto;
  padding: 2px 1px 6px;
  scroll-snap-type: x proximity;
}

.chat-instagram-template-card {
  flex: 0 0 258px;
  overflow: hidden;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  scroll-snap-align: start;
}

.chat-instagram-template-image {
  display: block;
  width: 100%;
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.72);
}

.chat-instagram-template-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chat-instagram-template-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px 7px;
}

.chat-instagram-template-copy strong { font-size: 0.9rem; }
.chat-instagram-template-copy span { color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; }
.chat-instagram-template-card .chat-interactive-options { padding: 0 8px 8px; }

.message-meta {
  font-size: 0.75em;
  opacity: 0.7;
  text-align: right;
  margin-top: 4px;
}

.message-sender-name {
  font-size: 0.8em;
  font-weight: 600;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.8);
}

.instagram-message-context {
  width: min(320px, 68vw);
}

.instagram-context-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: #5eead4;
  font-size: 0.78rem;
  font-weight: 700;
}

.instagram-context-heading .instagram.icon {
  margin-right: 6px;
  color: #f472b6;
}

.instagram-context-link {
  color: #9ca3af;
}

.instagram-context-link:hover {
  color: #ffffff;
}

.instagram-context-message {
  margin-bottom: 9px;
  color: var(--text-color);
}

.instagram-context-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: #111318;
  cursor: pointer;
}

.instagram-message-context.post .instagram-context-media {
  aspect-ratio: 1 / 1;
}

.instagram-context-media img,
.instagram-context-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.instagram-context-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 1.6rem;
  background: rgba(0, 0, 0, 0.24);
}

.instagram-context-title {
  margin-top: 7px;
  overflow: hidden;
  color: #b8c0cc;
  font-size: 0.76rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.internal-target-bar,
.internal-composer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.internal-target-select {
  min-height: 36px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #151a23;
  color: var(--text-color);
  padding: 0 10px;
}

.internal-composer {
  align-items: flex-end;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: #151a23;
}

.internal-composer textarea {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  resize: vertical;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-color);
}

.internal-icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #202736;
  color: var(--text-color);
  cursor: pointer;
}

.internal-icon-button.primary {
  background: var(--gradient-cta);
  border-color: transparent;
}

.internal-attachment-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.08);
}

.internal-attachment-preview button {
  border: 0;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
}

.internal-message-bubble .internal-message-target {
  display: inline-block;
  margin-bottom: 6px;
  color: #5eead4;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.internal-message-actions {
  margin-left: 8px;
}

.internal-message-actions button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
}

.internal-mention {
  color: #22c55e;
  font-weight: 700;
}

.internal-media-image,
.internal-media-video {
  display: block;
  max-width: 280px;
  max-height: 260px;
  margin-bottom: 8px;
  border-radius: 8px;
  object-fit: contain;
}

.internal-media-audio {
  display: block;
  width: 260px;
  margin-bottom: 8px;
}

.internal-media-document {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #5eead4;
}

.agent-department-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
}

.agent-department-row select {
  min-width: 220px;
}

.message-sender-name.group-sender-name {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: #80d8ff;
  cursor: pointer;
  text-align: left;
}

.message-sender-name.group-sender-name:hover {
  color: #b9f2ff;
  text-decoration: underline;
}

.message-mention-contact {
  display: inline;
  border: 0;
  padding: 0 2px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.message-mention-contact:hover {
  background: rgba(34, 197, 94, 0.24);
  color: #86efac;
  text-decoration: underline;
}

.message-mention-contact.mention-all {
  cursor: default;
}

.group-participant-action-menu {
  position: fixed;
  z-index: 4000;
  min-width: 210px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #171b23;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.group-participant-action-menu strong,
.group-participant-action-menu span {
  display: block;
}

.group-participant-action-menu strong {
  color: #fff;
  font-size: 0.9rem;
}

.group-participant-action-menu span {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 2px 0 8px;
}

.group-participant-action-menu button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: #1f8eed;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.mention-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 150;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #171b23;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
}

.mention-suggestions.hidden {
  display: none !important;
}

.canned-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 170;
  max-height: 286px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: #171b23;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}

.canned-suggestions.hidden {
  display: none !important;
}

.canned-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.canned-suggestion-item {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  background: transparent;
  color: #f8fafc;
  cursor: pointer;
  text-align: left;
}

.canned-suggestion-item:hover,
.canned-suggestion-item.active {
  background: rgba(20, 184, 166, 0.16);
}

.canned-suggestion-item.active {
  box-shadow: inset 3px 0 #2dd4bf;
}

.canned-suggestion-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(45, 212, 191, 0.12);
  color: #5eead4;
}

.canned-suggestion-icon i {
  margin: 0 !important;
}

.canned-suggestion-main {
  min-width: 0;
}

.canned-suggestion-main strong,
.canned-suggestion-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canned-suggestion-main strong {
  font-size: 0.88rem;
}

.canned-suggestion-main span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.canned-suggestion-type {
  padding: 3px 6px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.mention-suggestion-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 7px;
  padding: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.mention-suggestion-item:hover,
.mention-suggestion-item.active {
  background: rgba(20, 184, 166, 0.16);
}

.mention-suggestion-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #263244;
}

.mention-suggestion-main {
  min-width: 0;
  flex: 1;
}

.mention-suggestion-main strong,
.mention-suggestion-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-suggestion-main strong {
  font-size: 0.88rem;
}

.mention-suggestion-main span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.quoted-message-preview,
.reply-preview {
  display: flex;
  align-items: stretch;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.24);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.quoted-message-preview {
  cursor: pointer;
}

.quote-line,
.reply-preview-line {
  width: 3px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: var(--primary-color);
}

.quote-text,
.reply-preview-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
}

.quote-text span,
.reply-preview-body span {
  color: rgba(248, 250, 252, 0.76);
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-preview {
  position: relative;
  margin: 8px 0 10px;
  background: rgba(20, 184, 166, 0.1);
}

.reply-preview.edit-mode {
  background: rgba(251, 146, 60, 0.12);
}

.reply-preview.edit-mode .reply-preview-line {
  background: #fb923c;
}

.reply-preview-close,
.msg-icon-action {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.reply-preview-close {
  margin-left: auto;
  color: var(--text-muted);
}

.msg-icon-action {
  margin-right: 6px;
  font-size: 0.85em;
}

.chat-image-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.chat-image-preview {
  max-height: 280px;
  cursor: pointer;
  object-fit: contain;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.image-download-action {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(15, 23, 42, 0.9) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.large-screen-only {
  display: none !important;
}

@media (min-width: 1024px) {
  .large-screen-only {
    display: inline-flex !important;
  }
}

.chat-audio-player {
  max-width: 100%;
  border-radius: 8px;
}

.pending-media-download {
  min-width: 180px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.38);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.stored-media-placeholder {
  min-width: 180px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--text-muted);
  font-size: 0.78rem;
}

.stored-media-load-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(45, 212, 191, 0.5);
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.2);
  color: #5eead4;
  cursor: pointer;
}

.stored-media-load-button i {
  margin: 0 !important;
}

.stored-media-placeholder.loading .stored-media-load-button,
.stored-media-load-button:disabled {
  cursor: wait;
  opacity: 0.75;
}

.peek-stored-media-placeholder {
  min-width: 150px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.4);
  color: var(--text-muted);
  font-size: 0.75rem;
}

.peek-stored-media-load-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(45, 212, 191, 0.5);
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.2);
  color: #5eead4;
  cursor: pointer;
}

.peek-stored-media-load-button i {
  margin: 0 !important;
}

.stored-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.stored-video-play i {
  margin: 0 !important;
  color: #fff;
  font-size: 3em;
}

.pending-media-download-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(45, 212, 191, 0.5);
  border-radius: 50%;
  background: rgba(13, 148, 136, 0.2);
  color: #5eead4;
  cursor: pointer;
}

.pending-media-download-button:hover,
.pending-media-download-button:focus {
  border-color: #2dd4bf;
  background: rgba(13, 148, 136, 0.34);
  color: #fff;
}

.pending-media-download-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.pending-media-download-button i {
  margin: 0 !important;
}

.chat-sticker-preview {
  max-height: 120px;
  object-fit: contain;
}

.chat-sticker-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}

.chat-sticker-wrap.can-save .chat-sticker-preview {
  cursor: pointer;
}

.chat-sticker-save-action {
  display: none;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(20, 184, 166, 0.45);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 7px 9px;
  cursor: pointer;
}

.chat-sticker-wrap.show-save .chat-sticker-save-action,
.chat-sticker-save-action.saved {
  display: inline-flex;
}

.chat-sticker-save-action:hover {
  border-color: rgba(20, 184, 166, 0.8);
  background: rgba(13, 148, 136, 0.22);
}

.chat-sticker-save-action.saved {
  border-color: rgba(34, 197, 94, 0.6);
  color: #bbf7d0;
  cursor: default;
}

.saved-sticker-picker {
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 8px;
  background: rgba(10, 14, 20, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.saved-sticker-picker.hidden {
  display: none !important;
}

.saved-sticker-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: #e2e8f0;
}

.saved-sticker-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.7);
  color: #cbd5e1;
  cursor: pointer;
}

.saved-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 8px;
  max-height: 170px;
  overflow-y: auto;
}

.saved-sticker-item {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
}

.saved-sticker-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.75);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  width: 100%;
  height: 100%;
}

.saved-sticker-option:hover {
  border-color: rgba(20, 184, 166, 0.72);
  background: rgba(20, 184, 166, 0.12);
  transform: translateY(-1px);
}

.saved-sticker-option img {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}

.saved-sticker-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(248, 113, 113, 0.42);
  border-radius: 6px;
  background: rgba(34, 12, 18, 0.92);
  color: #fca5a5;
  cursor: pointer;
  opacity: 0.82;
}

.saved-sticker-delete:hover,
.saved-sticker-delete:focus-visible {
  border-color: #ef4444;
  background: #7f1d1d;
  color: #fff;
  opacity: 1;
}

.saved-sticker-empty {
  padding: 12px 8px;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.9rem;
}

.wa-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #93c5fd;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.wa-card-label i {
  margin: 0 !important;
}

.wa-contact-card,
.wa-poll-card,
.wa-poll-update {
  width: min(340px, 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(31, 36, 48, 0.86);
  color: var(--text-color);
  padding: 12px;
}

.wa-contact-card.compact,
.wa-poll-card.compact,
.wa-poll-update.compact {
  width: 100%;
  padding: 10px;
}

.wa-contact-list {
  display: grid;
  gap: 8px;
}

.wa-contact-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.46);
}

.wa-contact-avatar {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #2563eb);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
}

.wa-contact-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.wa-contact-main strong,
.wa-poll-title {
  color: #f8fafc;
  font-weight: 800;
  word-break: break-word;
}

.wa-contact-main span,
.wa-poll-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
  word-break: break-word;
}

.wa-contact-copy {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
  cursor: pointer;
}

.wa-contact-copy:hover {
  border-color: rgba(20, 184, 166, 0.58);
  color: #99f6e4;
}

.wa-poll-title {
  margin-bottom: 12px;
  font-size: 0.98rem;
}

.wa-poll-options {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.wa-poll-option {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.42);
}

.wa-poll-radio {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid #22c55e;
  border-radius: 50%;
  background: transparent;
}

.wa-poll-update {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bfdbfe;
  font-weight: 700;
}

.media-caption {
  margin-top: 8px;
  font-size: 0.95em;
  line-height: 1.4;
  word-break: break-word;
}

.message-highlight {
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.api-console-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  padding: 18px;
}

.api-console-shell {
  display: grid;
  grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.api-console-sidebar,
.api-console-detail {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.82);
}

.api-console-sidebar {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 130px);
  overflow: auto;
}

.api-instance-floating {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 152, 0, 0.16);
  background: rgba(255, 152, 0, 0.05);
}

.api-instance-floating label,
.api-menu-heading {
  display: block;
  margin-bottom: 8px;
  color: var(--primary-color);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.api-instance-select,
.api-method-select,
.api-url-row input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255, 152, 0, 0.18);
  border-radius: 8px;
  background: #111;
  color: var(--text-color);
  padding: 0 10px;
  outline: none;
}

.api-instance-select:focus,
.api-method-select:focus,
.api-url-row input:focus,
.api-editor:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.12);
}

.api-instance-hint {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.api-library-meta {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 152, 0, 0.12);
  color: var(--text-muted);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.api-library-meta strong {
  color: var(--text-color);
}

.api-library-meta small {
  color: var(--primary-color);
}

.api-menu-heading {
  padding: 14px 14px 2px;
  margin-bottom: 0;
}

.api-console-menu {
  padding: 8px 0 12px;
}

.api-category-block {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.api-console-group-title,
.api-console-endpoint,
.api-body-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.api-console-group-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  color: var(--text-color);
  font-weight: 700;
  text-align: left;
}

.api-console-group-title small {
  color: var(--text-muted);
}

.api-category-block.active .api-console-group-title {
  color: var(--primary-color);
}

.api-console-submenu {
  padding: 0 0 8px;
}

.api-console-endpoint {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 14px 8px 18px;
  border-left: 3px solid transparent;
  color: var(--text-muted);
  text-align: left;
}

.api-console-endpoint span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-console-endpoint small {
  color: #ffb74d;
  font-size: 0.68rem;
  font-weight: 800;
}

.api-console-endpoint:hover,
.api-console-endpoint.active {
  background: rgba(255, 152, 0, 0.1);
  color: var(--text-color);
  border-left-color: var(--primary-color);
}

.api-console-detail {
  min-height: 520px;
  padding: 16px;
}

.api-console-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.api-console-kicker {
  color: var(--primary-color);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.api-console-card-head h4 {
  margin: 4px 0 6px;
  color: var(--text-color);
  font-size: 1.25rem;
}

.api-console-card-head p {
  max-width: 760px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.api-method {
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--gradient-cta);
  color: #111;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 5px 8px;
}

.api-url-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.api-url-row input {
  font-family: Consolas, Monaco, monospace;
  font-size: 0.86rem;
}

.api-path-params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0 0 12px 126px;
}

.api-path-param-field {
  display: grid;
  gap: 5px;
}

.api-path-param-field span,
.api-upload-panel label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.api-path-param-field input,
.api-upload-panel input[type="file"] {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 152, 0, 0.18);
  border-radius: 8px;
  background: #111;
  color: var(--text-color);
  padding: 7px 10px;
  outline: none;
}

.api-path-param-field input:focus,
.api-upload-panel input[type="file"]:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.12);
}

.api-path-param-field input[readonly] {
  color: var(--text-muted);
  cursor: not-allowed;
}

.api-auth-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-bottom: 14px;
}

.api-workbench-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 152, 0, 0.22);
  margin-bottom: 0;
}

.api-tabs {
  display: flex;
  gap: 0;
}

.api-test-phone-field {
  display: grid;
  gap: 5px;
  min-width: 250px;
  padding-bottom: 7px;
}

.api-test-phone-field label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.api-test-phone-field input {
  min-height: 34px;
  border: 1px solid rgba(255, 152, 0, 0.18);
  border-radius: 8px;
  background: #111;
  color: var(--text-color);
  padding: 0 10px;
  outline: none;
}

.api-test-phone-field input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.12);
}

.api-body-tab {
  min-height: 42px;
  padding: 0 22px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 800;
}

.api-body-tab.active {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(255, 152, 0, 0.08);
}

.api-editor-panel {
  margin-bottom: 14px;
}

.api-upload-panel {
  min-height: 170px;
  display: grid;
  align-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 152, 0, 0.18);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #0d1117;
  padding: 24px;
}

.api-upload-panel small {
  color: var(--text-muted);
}

.api-upload-panel code {
  color: var(--primary-color);
}

.api-editor {
  width: 100%;
  min-height: 280px;
  max-height: 460px;
  overflow: auto;
  margin: 0;
  border: 1px solid rgba(255, 152, 0, 0.18);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #0d1117;
  color: #e5edf5;
  font-family: Consolas, Monaco, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
  resize: vertical;
  padding: 14px;
}

.api-curl-pre {
  white-space: pre-wrap;
  word-break: break-word;
}

.api-response-example,
.api-result-panel {
  border: 1px solid rgba(255, 152, 0, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  padding: 12px;
  margin-bottom: 14px;
}

.api-response-example strong,
.api-result-panel strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color);
}

.api-response-example pre,
.api-result-panel pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  color: #dbeafe;
  white-space: pre-wrap;
  word-break: break-word;
}

.api-result-panel.success {
  border-color: rgba(129, 199, 132, 0.45);
}

.api-result-panel.error {
  border-color: rgba(239, 83, 80, 0.55);
}

.api-result-panel.warning {
  border-color: rgba(255, 183, 77, 0.55);
}

.api-notes {
  margin: 0 0 14px;
  padding-left: 18px;
  color: var(--text-muted);
}

.api-console-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.api-empty-state {
  color: var(--text-muted);
  padding: 14px;
}

.visual-builder-modal.ui.modal {
  width: min(980px, 96vw) !important;
}

.visual-builder-modal.ui.modal>.content {
  max-height: 78vh !important;
}

.visual-builder {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.builder-palette {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.34);
}

.builder-palette-item {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-color);
  padding: 0 10px;
  cursor: grab;
  text-align: left;
  font-weight: 700;
}

.builder-palette-item:hover {
  border-color: rgba(20, 184, 166, 0.42);
  background: rgba(20, 184, 166, 0.1);
}

.builder-palette-item i {
  color: var(--primary-color);
}

.builder-canvas {
  min-height: 360px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.22);
}

.builder-canvas.builder-empty::before,
.builder-canvas:empty::before {
  content: attr(data-empty);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  color: var(--text-muted);
  font-size: 0.92rem;
  text-align: center;
}

.builder-block {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background: rgba(23, 26, 33, 0.96);
  overflow: hidden;
}

.builder-block.dragging {
  opacity: 0.55;
}

.builder-block.drop-before {
  box-shadow: 0 -3px 0 var(--primary-color);
}

.builder-block.drop-after {
  box-shadow: 0 3px 0 var(--primary-color);
}

.builder-block-head {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.46);
}

.builder-drag-handle {
  color: var(--text-muted);
  cursor: grab;
}

.builder-index {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.16);
  color: var(--primary-color);
  font-size: 0.74rem;
  font-weight: 900;
}

.builder-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-color);
  font-weight: 800;
}

.builder-remove-block {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.builder-remove-block:hover {
  color: #ef4444;
}

.builder-block-body {
  padding: 12px;
}

.builder-block-body .field {
  margin-bottom: 10px;
}

.builder-block-body .field:last-child {
  margin-bottom: 0;
}

.builder-file-hint {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.3;
  word-break: break-word;
}

.builder-block-body label {
  display: block;
  color: var(--text-muted) !important;
  font-size: 0.76rem;
  font-weight: 800;
  margin-bottom: 5px;
}

.builder-field {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #0f141d;
  color: var(--text-color);
  padding: 8px 10px;
  outline: none;
}

.builder-media-file,
#cannedMediaFile {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #0f141d;
  color: var(--text-color);
  padding: 8px 10px;
}

textarea.builder-field {
  resize: vertical;
  min-height: 78px;
}

.builder-field:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12);
}

.compact-field {
  max-width: 240px;
}

@media (max-width: 920px) {
  .api-console-shell {
    grid-template-columns: 1fr;
  }

  .api-console-sidebar {
    position: static;
    max-height: none;
  }
}

@media (max-width: 620px) {
  .api-console-card-head,
  .api-auth-strip,
  .api-workbench-head,
  .api-console-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .api-url-row {
    grid-template-columns: 1fr;
  }

  .api-path-params {
    margin-left: 0;
    grid-template-columns: 1fr;
  }

  .api-body-tab {
    flex: 1;
    padding: 0 10px;
  }

  .api-test-phone-field {
    min-width: 0;
  }

  .visual-builder {
    grid-template-columns: 1fr;
  }

  .builder-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-compose-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .chat-compose-submit {
    width: 100%;
    justify-content: space-between;
  }

  .contact-info-panel {
    width: min(320px, 88vw) !important;
  }
}

/* Chat Input Area */
.chat-input-area .ui.form textarea {
  background: var(--surface-2) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--card-border) !important;
}

.chat-input-area .ui.form textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.1) !important;
}

/* Custom Scrollbar for Chat & Lists */
#chatMessages::-webkit-scrollbar,
#conversation-list::-webkit-scrollbar,
.sidebar-menu::-webkit-scrollbar {
  width: 6px;
}

#chatMessages::-webkit-scrollbar-track,
#conversation-list::-webkit-scrollbar-track,
.sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}

#chatMessages::-webkit-scrollbar-thumb,
#conversation-list::-webkit-scrollbar-thumb,
.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 152, 0, 0.2);
  border-radius: 3px;
}

/* Kanban */
.kanban-board {
  min-height: 100%;
}

.kanban-column {
  min-width: 320px;
  max-width: 320px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
}

.kanban-header {
  padding: 15px;
  font-weight: 600;
  border-bottom: 2px solid;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
}

.kanban-cards {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-card {
  background: var(--surface-3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.kanban-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
}

.kanban-card .header {
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text-color);
}

.kanban-card .meta {
  font-size: 0.8em;
  color: var(--text-muted);
}


.read-more-link {
  color: var(--primary-color) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.read-more-link:hover {
  text-decoration: underline !important;
}

.group-preview-photo {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-right: 1em !important;
}

.disappearing-timer-indicator {
  color: var(--primary-color) !important;
  font-weight: bold !important;
}

.invite-link-container {
  background: var(--surface-2) !important;
  padding: 1em !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.participant-actions {
  display: flex !important;
  gap: 0.3em !important;
}

.participant-action-btn {
  padding: 0.3em 0.6em !important;
  font-size: 0.7em !important;
}

/* Group list items */
.group-list-item {
  padding: 1rem 0;
  transition: background-color 0.2s ease;
  border-radius: 8px;
  margin: 0.4rem 0;
}

.group-list-item:hover {
  background-color: var(--surface-2) !important;
}

.group-list-item .header {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text-color) !important;
}

.group-list-item .meta {
  color: var(--text-muted);
  font-size: 0.9em;
  margin-top: 0.5rem !important;
  line-height: 1.6 !important;
}

.group-list-item .meta span {
  margin-right: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
}

.group-list-item .description {
  margin: 0.5rem 0;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Group badges */
.group-list-item .ui.mini.label.purple {
  background-color: #8e44ad !important;
  color: white !important;
}

.group-list-item .ui.mini.label.blue {
  background-color: var(--primary-color) !important;
  color: #000 !important;
}

.group-list-item .ui.mini.label.green {
  background-color: var(--success-green) !important;
  color: #000 !important;
}

.group-list-item .ui.mini.grey.label {
  background-color: #4a5568 !important;
  color: var(--text-color) !important;
  margin: 0.2rem 0.3rem 0.2rem 0 !important;
}

.group-list-item .ui.mini.red.label,
.group-list-item .ui.mini.orange.label {
  font-weight: bold !important;
  margin-left: 0.5rem !important;
}

/* Group icons */
.group-list-item .building.icon.purple {
  color: #8e44ad !important;
}

.group-list-item .users.icon.blue {
  color: var(--primary-color) !important;
}

.group-list-item .users.icon.green {
  color: var(--success-green) !important;
}

.group-list-item .meta .sitemap.icon {
  color: #8e44ad !important;
}

/* Group action buttons */
.group-list-item .ui.small.buttons .button {
  border: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  margin-right: 0.4rem !important;
}

.group-list-item .ui.small.buttons .button.primary {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
  color: #000 !important;
}

.group-list-item .ui.small.buttons .button.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 194, 212, 0.4) !important;
}

.group-list-item .ui.small.buttons .button.secondary {
  background-color: var(--surface-3) !important;
  color: var(--text-color) !important;
}

.group-list-item .ui.small.buttons .button.secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#refreshGroups.ui.button {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
  color: #000 !important;
}

#refreshGroups.ui.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 194, 212, 0.35) !important;
}

/* =============================================
   GROUPS SECTIONS
   ============================================= */

#groupsMainContainer .main-header {
  margin-bottom: 2em !important;
}

#groupsMainContainer .main-header .ui.header {
  color: white !important;
}

#groupsMainContainer .main-header .sub.header {
  color: rgba(255, 255, 255, 0.75) !important;
}

#groupsMainContainer .ui.segment {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 1rem;
}

#groupsLoading {
  min-height: 200px;
}

#noGroupsMessage {
  margin-top: 2rem;
  text-align: center;
}

/* =============================================
   PROXY / S3 / HMAC CONFIG
   ============================================= */

#proxyUrlField {
  display: none;
}

#proxyUrlField.show {
  display: block;
}

#deleteS3Config {
  display: none;
}

/* =============================================
   PARTICIPANT ITEMS
   ============================================= */

.participant-item {
  padding: 0.75rem 0 !important;
}

.participant-item .content .header {
  font-size: 1rem !important;
  color: var(--text-color) !important;
}

.participant-item .right.floated.content {
  float: none !important;
  margin-top: 0.5rem !important;
}

/* =============================================
   MODALS - GROUP MANAGEMENT
   ============================================= */

.ui.modal#modalGroupDetails,
.ui.modal#modalEditGroupInfo,
.ui.modal#modalGroupSettings,
.ui.modal#modalGroupInviteLink,
.ui.modal#modalManageParticipants {
  max-width: 90vw !important;
  width: auto !important;
}

.ui.modal#modalManageParticipants {
  max-width: 95vw !important;
}

.ui.modal#modalGroupDetails .content,
.ui.modal#modalEditGroupInfo .content,
.ui.modal#modalGroupSettings .content,
.ui.modal#modalGroupInviteLink .content,
.ui.modal#modalManageParticipants .content {
  max-height: 70vh !important;
  overflow-y: auto !important;
}

.ui.modal#modalGroupDetails .actions h5.ui.header {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  color: var(--primary-color) !important;
}

.ui.modal#modalGroupSettings .ui.dividing.header {
  color: var(--primary-color) !important;
  border-bottom-color: rgba(0, 194, 212, 0.2) !important;
}

#currentGroupPhotoContainer {
  min-height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#currentGroupPhotoContainer img {
  max-width: 80px !important;
  max-height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.ui.modal#modalManageParticipants .participant-item {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.ui.modal#modalManageParticipants .participant-item:last-child {
  border-bottom: none !important;
}

.ui.modal#modalManageParticipants .participant-item .content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.ui.modal#modalManageParticipants .participant-item .participant-info {
  flex: 1 !important;
}

.ui.modal#modalManageParticipants .participant-item .participant-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0.5rem !important;
  margin-left: 1rem !important;
}

.ui.modal#modalManageParticipants .participant-item .participant-labels {
  display: flex !important;
  gap: 0.3rem !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

/* =============================================
   ANIMATIONS
   ============================================= */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ui.cards>.card {
  animation: fadeIn 0.35s ease both;
}

.history-load-earlier {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 2px 0 8px;
}

.history-load-earlier button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  background: #171b23;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.76rem;
}

.history-load-earlier button:hover {
  border-color: rgba(20, 184, 166, 0.44);
  color: #99f6e4;
}

.history-load-earlier button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.history-load-earlier i {
  margin: 0 !important;
}

/* =============================================
   SCROLLBAR GLOBAL
   ============================================= */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 194, 212, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 194, 212, 0.55);
}

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */

.ui.toast-container .toast-box {
  background: var(--surface-2) !important;
  color: var(--text-color) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  .group-actions {
    flex-direction: column !important;
  }

  .group-action-btn {
    width: 100% !important;
  }

  .group-stats {
    flex-direction: column !important;
    gap: 0.5em !important;
  }

  .group-list-item .four.wide.column {
    width: 100% !important;
    text-align: left !important;
    margin-top: 1rem;
  }

  .group-list-item .eleven.wide.column {
    width: 100% !important;
  }

  .group-list-item .one.wide.column {
    width: auto !important;
    margin-right: 1rem;
  }

  .ui.modal#modalGroupDetails .actions .ui.stackable.grid .column {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  .ui.modal#modalManageParticipants .participant-item .content {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .ui.modal#modalManageParticipants .participant-item .participant-actions {
    margin-left: 0 !important;
    margin-top: 0.5rem !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .ui.modal#modalManageParticipants .participant-item .participant-labels {
    justify-content: flex-start !important;
    margin-bottom: 0.5rem !important;
  }
}

.message-reactions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.message-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 2px 8px;
  font-size: 0.88em;
  cursor: pointer;
  line-height: 1.35;
}

.message-reaction-pill:hover {
  background: rgba(20,184,166,0.18);
  border-color: rgba(20,184,166,0.45);
}

.message-reaction-count {
  font-size: 0.75em;
  opacity: 0.8;
}

.instagram-connection-health {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 5px;
  font-size: 0.72rem;
  font-weight: 700;
}

.instagram-connection-health.ok { color: #4ade80; }
.instagram-connection-health.warning { color: #fbbf24; }
.instagram-connection-health i { margin: 0 !important; }

.instagram-connection-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.instagram-template-workspace {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(420px, 1fr) minmax(280px, 330px);
  gap: 18px;
  align-items: start;
}

.instagram-template-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 620px;
  overflow-y: auto;
}

.instagram-template-list-item {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  background: #181d27;
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
}

.instagram-template-list-item:hover,
.instagram-template-list-item.active {
  border-color: rgba(45, 212, 191, 0.62);
  background: rgba(13, 148, 136, 0.14);
}

.instagram-template-list-item span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.instagram-template-list-item strong,
.instagram-template-list-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instagram-template-list-item small { color: var(--text-muted); }
.instagram-template-list-item i { margin: 0 !important; }

.instagram-template-editor {
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid rgba(148, 163, 184, 0.16);
}

.instagram-template-live-preview {
  position: sticky;
  top: 14px;
  min-width: 0;
  padding-left: 18px;
  border-left: 1px solid rgba(148, 163, 184, 0.16);
}

.instagram-template-preview-heading,
.instagram-template-preview-user,
.instagram-template-preview-composer {
  display: flex;
  align-items: center;
}

.instagram-template-preview-heading {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.instagram-template-preview-heading > span:first-child,
.instagram-template-preview-user > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.instagram-template-preview-heading small,
.instagram-template-preview-user small,
.instagram-template-preview-note { color: var(--text-muted); }
.instagram-template-preview-heading small { font-size: 0.71rem; }

.instagram-template-preview-format {
  flex: 0 0 auto;
  max-width: 132px;
  overflow: hidden;
  padding: 4px 7px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: 999px;
  color: #5eead4;
  background: rgba(13, 148, 136, 0.1);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instagram-template-preview-device {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: #080b10;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.instagram-template-preview-user {
  min-height: 56px;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  background: #10141c;
}

.instagram-template-preview-user > .icon:last-child { margin: 0 0 0 auto !important; color: #d1d5db; }
.instagram-template-preview-user strong { overflow: hidden; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.instagram-template-preview-user small { font-size: 0.65rem; }
.instagram-template-preview-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #f9ce34, #ee2a7b 52%, #6228d7);
  color: #fff;
}
.instagram-template-preview-avatar .icon { margin: 0 !important; }

.instagram-template-preview-conversation {
  min-height: 390px;
  max-height: min(560px, 62vh);
  overflow-y: auto;
  padding: 14px 10px 16px;
  background: radial-gradient(circle at 50% 8%, rgba(99, 102, 241, 0.07), transparent 42%), #080b10;
}

.instagram-template-preview-date {
  margin-bottom: 18px;
  color: #6b7280;
  font-size: 0.62rem;
  text-align: center;
}

.instagram-template-preview-body { display: flex; min-height: 170px; flex-direction: column; align-items: flex-end; justify-content: flex-end; }
.instagram-template-preview-message {
  max-width: 88%;
  padding: 9px 11px;
  border-radius: 16px 16px 4px 16px;
  background: #26334c;
  color: #f8fafc;
  font-size: 0.79rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.instagram-template-preview-message.is-heart { padding: 6px 8px; background: transparent; font-size: 2rem; }
.instagram-template-preview-placeholder { color: #718096; font-style: italic; }
.instagram-template-preview-media {
  width: 88%;
  overflow: hidden;
  border-radius: 15px 15px 4px 15px;
  background: #171d28;
}
.instagram-template-preview-media img,
.instagram-template-preview-media video { width: 100%; max-height: 260px; display: block; object-fit: cover; }
.instagram-template-preview-media audio { width: calc(100% - 16px); margin: 10px 8px; }
.instagram-template-preview-caption { padding: 8px 10px 10px; color: #f8fafc; font-size: 0.77rem; line-height: 1.35; }

.instagram-template-preview-actions,
.instagram-template-preview-quick-replies { display: grid; gap: 5px; width: 88%; margin-top: 6px; }
.instagram-template-preview-action,
.instagram-template-preview-quick-reply {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  background: rgba(38, 51, 76, 0.86);
  color: #a5b4fc;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
}
.instagram-template-preview-action .icon { margin: 0 !important; }
.instagram-template-preview-quick-replies { display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.instagram-template-preview-quick-reply { min-height: 28px; border-radius: 999px; background: transparent; }

.instagram-template-preview-carousel { width: 100%; display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.instagram-template-preview-card {
  flex: 0 0 calc(88% - 8px);
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 13px;
  background: #171d28;
  scroll-snap-align: end;
}
.instagram-template-preview-card-image { width: 100%; aspect-ratio: 1.91 / 1; display: grid; place-items: center; overflow: hidden; background: #202735; color: #64748b; }
.instagram-template-preview-card-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.instagram-template-preview-card-copy { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; }
.instagram-template-preview-card-copy strong { font-size: 0.78rem; }
.instagram-template-preview-card-copy span { color: #9ca3af; font-size: 0.69rem; line-height: 1.3; }
.instagram-template-preview-card .instagram-template-preview-actions { width: auto; margin: 0; padding: 0 8px 8px; }

.instagram-template-preview-composer {
  min-height: 48px;
  gap: 8px;
  margin: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: #9ca3af;
  font-size: 0.7rem;
}
.instagram-template-preview-composer span { flex: 1; }
.instagram-template-preview-composer .icon { margin: 0 !important; }
.instagram-template-preview-note { margin: 8px 2px 0; font-size: 0.67rem; line-height: 1.35; }
.instagram-template-preview-note .icon { margin-right: 4px !important; }

.instagram-template-fields.hidden,
#instagramTemplateTextFields.hidden { display: none !important; }

.instagram-template-active-field .checkbox { margin-top: 8px; }

.instagram-template-media-row,
.instagram-template-section-heading,
.instagram-template-editor-actions,
.instagram-template-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.instagram-template-media-row input { flex: 1; min-width: 0; }
.instagram-template-section-heading,
.instagram-template-card-head { justify-content: space-between; }
.instagram-template-section-heading { margin: 16px 0 8px; }
.instagram-template-section-heading > span,
.instagram-template-card-head > span,
.instagram-template-card-actions-head > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.instagram-template-section-heading small,
.instagram-template-card-head small,
.instagram-template-card-actions-head small { color: var(--text-muted); font-size: 0.72rem; }

.instagram-template-button-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(100px, 0.45fr) minmax(160px, 1fr) 38px;
  gap: 8px;
  margin-bottom: 8px;
}

.instagram-template-button-row select,
.instagram-template-button-row input {
  min-width: 0;
}

.instagram-template-card-row {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
}

.instagram-template-card-row:last-child { margin-bottom: 0; }
.instagram-template-card-actions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.13);
}
.instagram-template-card-buttons { display: grid; gap: 7px; }
.instagram-template-card-button-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(180px, 1fr) 38px;
  gap: 8px;
}
.instagram-template-card-button-row input { min-width: 0; }
.instagram-template-editor-actions { justify-content: flex-end; margin-top: 18px; }

.instagram-comments-diagnostic {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 7px;
  background: rgba(120, 53, 15, 0.18);
  color: #fde68a;
  font-size: 0.78rem;
}

.instagram-comments-diagnostic i { margin: 1px 0 0 !important; }

@media (max-width: 1350px) {
  .instagram-template-workspace { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); }
  .instagram-template-live-preview { position: static; grid-column: 2; max-width: 390px; }
}

@media (max-width: 980px) {
  .instagram-template-workspace { grid-template-columns: 1fr; }
  .instagram-template-editor { padding-left: 0; border-left: 0; border-top: 1px solid rgba(148, 163, 184, 0.16); padding-top: 18px; }
  .instagram-template-live-preview { grid-column: auto; max-width: 390px; padding: 18px 0 0; border-top: 1px solid rgba(148, 163, 184, 0.16); border-left: 0; }
  .instagram-template-button-row,
  .instagram-template-card-button-row { grid-template-columns: 1fr; }
}