:root {
  --support-navy: #0f2a43;
  --support-navy-2: #123956;
  --support-cyan: #10b8c7;
  --support-cyan-dark: #0891a3;
  --support-bg: #f5f8fb;
  --support-surface: #ffffff;
  --support-line: #dbe7ef;
  --support-muted: #64748b;
  --support-text: #122033;
  --support-success: #16a34a;
  --support-danger: #dc2626;
  --support-radius: 8px;
  --support-shadow: 0 10px 28px rgba(15, 42, 67, 0.08);
}

html {
  background: var(--support-bg);
}

body.support-modern {
  background:
    linear-gradient(180deg, rgba(16, 184, 199, 0.08), transparent 320px),
    var(--support-bg) !important;
  color: var(--support-text);
  letter-spacing: 0;
}

.support-modern .lucide {
  display: block;
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
  flex: 0 0 auto;
}

.support-modern .support-icon-label,
.support-modern button,
.support-modern a {
  align-items: center;
}

.support-modern button.inline-flex,
.support-modern a.inline-flex {
  align-items: center;
}

.support-modern .support-shell {
  max-width: 1440px;
}

.support-modern .support-topbar {
  border-radius: var(--support-radius) !important;
  border-color: rgba(16, 184, 199, 0.18) !important;
  background:
    linear-gradient(135deg, rgba(15, 42, 67, 0.98), rgba(18, 57, 86, 0.96)),
    var(--support-navy) !important;
  box-shadow: var(--support-shadow) !important;
}

.support-modern .support-card,
.support-modern main > section,
.support-modern #tickets-panel > section,
.support-modern #logs-panel > section,
.support-modern #systems-panel > section,
.support-modern #support-chat-panel {
  border-radius: var(--support-radius) !important;
  border-color: var(--support-line) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--support-shadow) !important;
}

.support-modern #ticket-fullscreen-content article,
.support-modern [data-ticket-modal],
.support-modern .fixed .bg-white {
  border-radius: var(--support-radius) !important;
}

.support-modern button,
.support-modern input,
.support-modern select,
.support-modern textarea {
  border-radius: var(--support-radius) !important;
}

.support-modern input,
.support-modern select,
.support-modern textarea {
  border-color: #cbd8e3 !important;
  color: var(--support-text);
}

.support-modern input:focus,
.support-modern select:focus,
.support-modern textarea:focus {
  border-color: var(--support-cyan) !important;
  box-shadow: 0 0 0 3px rgba(16, 184, 199, 0.16) !important;
  outline: none !important;
}

.support-modern .btn-primary,
.support-modern button.bg-indigo-600,
.support-modern button.bg-emerald-600,
.support-modern button.bg-black,
.support-modern #refresh-btn,
.support-modern #logs-apply-filters-btn,
.support-modern #support-chat-refresh,
.support-modern #systems-new-btn,
.support-modern #btn-send-all {
  border-color: transparent !important;
  background: var(--support-cyan) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(16, 184, 199, 0.2);
}

.support-modern .btn-primary:hover,
.support-modern button.bg-indigo-600:hover,
.support-modern button.bg-emerald-600:hover,
.support-modern button.bg-black:hover,
.support-modern #refresh-btn:hover,
.support-modern #logs-apply-filters-btn:hover,
.support-modern #support-chat-refresh:hover,
.support-modern #systems-new-btn:hover,
.support-modern #btn-send-all:hover {
  background: var(--support-cyan-dark) !important;
}

.support-modern .btn-secondary,
.support-modern button.bg-indigo-50,
.support-modern button.bg-slate-50,
.support-modern button.bg-white,
.support-modern button.border {
  border-color: var(--support-line) !important;
  background: #ffffff !important;
  color: var(--support-navy) !important;
}

.support-modern .btn-danger {
  background: var(--support-danger) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.support-modern .support-tabs {
  border-color: var(--support-line) !important;
  background: #ffffff !important;
}

.support-modern .support-tab,
.support-modern #tab-tickets,
.support-modern #tab-logs,
.support-modern #tab-support-chat,
.support-modern #tab-systems {
  display: inline-flex;
  gap: 0.45rem;
  min-height: 2.45rem;
  white-space: nowrap;
}

.support-modern .support-tab-active {
  background: var(--support-navy) !important;
  color: #fff !important;
  border-color: var(--support-navy) !important;
}

.support-modern #selected-company-header:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  background: var(--support-navy) !important;
}

.support-modern .status-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

.support-modern #support-chat-online,
.support-modern #support-chat-offline {
  display: inline-flex;
  gap: 0.35rem;
}

.support-modern .status-dot.online {
  background: var(--support-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.support-modern .status-dot.offline {
  background: #94a3b8;
}

.support-modern .websocket-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px !important;
  border: 1px solid var(--support-line);
  background: #fff;
  padding: 0.35rem 0.65rem;
  font-size: 0.8125rem;
  color: var(--support-muted);
}

.support-modern .websocket-status.connected {
  border-color: rgba(22, 163, 74, 0.22);
  background: #f0fdf4;
  color: #166534;
}

.support-modern .websocket-status.disconnected {
  border-color: rgba(220, 38, 38, 0.18);
  background: #f8fafc;
  color: #64748b;
}

.support-modern .support-ticket-card {
  border-color: var(--support-line) !important;
  background: #ffffff !important;
  box-shadow: var(--support-shadow) !important;
}

.support-modern .support-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px !important;
}

.support-modern .support-chat-list button[data-conversation] {
  border-color: var(--support-line) !important;
  background: transparent;
  transition: background .18s ease, box-shadow .18s ease;
}

.support-modern .support-chat-list button[data-conversation]:hover,
.support-modern .support-chat-list button[data-conversation].is-active {
  background: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--support-cyan);
}

.support-modern .support-chat-mobile-back {
  display: none !important;
}

.support-modern #support-chat-messages {
  background:
    radial-gradient(circle at 16px 16px, rgba(15, 42, 67, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    #eef4f8;
}

.support-modern .message-bubble {
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(15, 42, 67, 0.08) !important;
}

.support-modern .message-bubble.support {
  background: #d9fbf9 !important;
  color: #073b3f !important;
}

.support-modern .message-bubble.client {
  background: #ffffff !important;
  color: var(--support-text) !important;
}

.support-modern .support-chat-skeleton {
  display: grid;
  gap: .8rem;
}

.support-modern .support-chat-skeleton-day,
.support-modern .support-chat-skeleton-row span {
  position: relative;
  overflow: hidden;
  background: #dfeaf1;
}

.support-modern .support-chat-skeleton-day::after,
.support-modern .support-chat-skeleton-row span::after {
  position: absolute;
  inset: 0;
  content: "";
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .68), transparent);
  animation: support-skeleton-shimmer 1.2s infinite;
}

.support-modern .support-chat-skeleton-day {
  justify-self: center;
  width: 9rem;
  height: 1.7rem;
  border-radius: 999px;
}

.support-modern .support-chat-skeleton-row {
  display: flex;
}

.support-modern .support-chat-skeleton-row.support {
  justify-content: flex-end;
}

.support-modern .support-chat-skeleton-row span {
  display: block;
  width: min(72%, 28rem);
  height: 4.4rem;
  border-radius: 14px;
}

.support-modern .support-chat-skeleton-row.short span {
  width: min(54%, 20rem);
  height: 3.2rem;
}

@keyframes support-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.support-modern table {
  border-collapse: separate;
  border-spacing: 0;
}

.support-modern thead {
  background: #eef7fa !important;
  color: var(--support-navy) !important;
}

.support-modern tbody tr:hover {
  background: #f8fbfd;
}

.support-modern .support-form-band {
  background: #f8fbfd !important;
  border-color: var(--support-line) !important;
}

@media (max-width: 768px) {
  .support-modern main {
    padding: 1rem !important;
  }

  .support-modern .support-topbar {
    padding: 1rem !important;
  }

  .support-modern input,
  .support-modern select,
  .support-modern textarea {
    font-size: 16px !important;
  }

  .support-modern .support-tabs > div,
  .support-modern #support-chat-panel .flex.flex-wrap {
    width: 100%;
  }

  .support-modern #tab-tickets,
  .support-modern #tab-logs,
  .support-modern #tab-support-chat,
  .support-modern #tab-systems {
    flex: 1 1 calc(50% - .5rem);
    justify-content: center;
  }

  .support-modern #support-chat-layout {
    display: block;
    height: auto !important;
    min-height: 0 !important;
  }

  .support-modern #support-chat-sidebar {
    height: calc(100dvh - 300px);
    min-height: 360px;
    overflow: hidden;
  }

  .support-modern #support-chat-thread {
    display: none;
  }

  .support-modern #support-chat-conversations {
    background: #f8fbfd;
  }

  .support-modern .support-chat-list button[data-conversation] {
    min-height: 106px;
    padding: .9rem 1rem !important;
    background: #ffffff !important;
  }

  .support-modern .support-chat-list button[data-conversation].is-active {
    box-shadow: none;
  }

  .support-modern #support-chat-panel > .border-b .flex.flex-wrap {
    display: grid;
    grid-template-columns: 1fr 92px;
    gap: .6rem;
  }

  .support-modern #support-chat-panel > .border-b .flex.flex-wrap > div:first-child,
  .support-modern #support-chat-filter-system,
  .support-modern #support-chat-search,
  .support-modern #support-chat-bulk,
  .support-modern #support-chat-refresh {
    grid-column: 1 / -1;
  }

  .support-modern #support-chat-filter-system,
  .support-modern #support-chat-filter-unread,
  .support-modern #support-chat-search,
  .support-modern #support-chat-bulk,
  .support-modern #support-chat-refresh {
    width: 100% !important;
  }

  .support-modern #support-chat-bulk,
  .support-modern #support-chat-refresh {
    justify-content: center;
  }

  .support-modern.support-chat-mobile-open {
    overflow: hidden;
  }

  .support-modern.support-chat-mobile-open #support-chat-thread {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    height: 100dvh;
    width: 100vw;
    background: #eef4f8;
  }

  .support-modern.support-chat-mobile-open #support-chat-selected-header {
    flex: 0 0 auto;
    border-color: rgba(15, 42, 67, .08) !important;
    background: #f8fbfd;
    padding: calc(env(safe-area-inset-top) + .7rem) .85rem .75rem !important;
    box-shadow: 0 8px 22px rgba(15, 42, 67, .08);
  }

  .support-modern.support-chat-mobile-open .support-chat-mobile-back {
    display: grid !important;
  }

  .support-modern.support-chat-mobile-open .support-chat-header-content {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .55rem !important;
  }

  .support-modern.support-chat-mobile-open .support-chat-header-content > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .support-modern.support-chat-mobile-open .support-chat-header-content > div:first-child .mt-1 {
    display: flex !important;
    min-width: 0;
    gap: .45rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .support-modern.support-chat-mobile-open .support-chat-header-content > div:first-child .mt-1 span {
    display: none;
  }

  .support-modern.support-chat-mobile-open .support-chat-header-content > div:first-child .mt-1 span:nth-last-child(-n+2) {
    display: inline-flex;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .support-modern.support-chat-mobile-open .support-chat-header-content > .flex.gap-2 {
    flex: 0 0 auto;
    gap: .4rem;
  }

  .support-modern.support-chat-mobile-open .support-chat-header-content > .flex.gap-2 button {
    align-items: center;
    height: 2.35rem;
    width: 2.35rem;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
  }

  .support-modern.support-chat-mobile-open .support-chat-header-content > .flex.gap-2 button .lucide {
    color: #334155;
  }

  .support-modern.support-chat-mobile-open #support-chat-messages {
    padding: .85rem .75rem 1rem !important;
  }

  .support-modern.support-chat-mobile-open .message-bubble {
    max-width: 86% !important;
    border-radius: 14px !important;
  }

  .support-modern.support-chat-mobile-open .message-bubble.support {
    background: #d9fdd3 !important;
    color: #123524 !important;
  }

  .support-modern.support-chat-mobile-open .message-bubble.client {
    background: #ffffff !important;
  }

  .support-modern.support-chat-mobile-open #support-chat-form {
    flex: 0 0 auto;
    padding: .6rem .65rem calc(env(safe-area-inset-bottom) + .65rem) !important;
    background: #f8fbfd !important;
  }

  .support-modern.support-chat-mobile-open #support-chat-form .grid {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 46px;
    gap: .45rem;
    min-height: 0;
  }

  .support-modern.support-chat-mobile-open #support-chat-input {
    height: 44px;
    border-radius: 999px !important;
    background: #ffffff;
  }

  .support-modern.support-chat-mobile-open #support-chat-form label,
  .support-modern.support-chat-mobile-open #support-chat-form button[type="submit"] {
    height: 44px;
    border-radius: 999px !important;
  }

  .support-modern #support-chat-search {
    width: 100% !important;
  }
}