/* chat.css — tokens, shell e primitivos compartilhados */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --blue-light: #b7c9d5;
  --blue: #7a9eb8;
  --red: #c6a7a7;
  --gray: #9ea3a8;
  --purple: #ad9bbe;
  --cyan: #77afae;
  --green: #4a7470;
  --navy: #495f73;
  --background: #2c2f34;
  --sand: #d2c6b7;
  --app-bg: #0063a3;
  --list-bg: var(--app-bg);
  --chat-bg: #fbfcfd;
  --chat-bg-pattern: radial-gradient(#e6ebf0 0.8px, transparent 0.8px) 0 0 / 18px 18px,
    var(--chat-bg);
  --surface: #ffffff;
  --input-bg: var(--surface);
  --text: #0f1a2a;
  --text-muted: #44566c;
  --text-soft: #5a6d84;
  --icon: #4f6278;
  --border: #e4eaf1;
  --bubble-in: #ffffff;
  --bubble-out: #217cbb;
  --bubble-out-text: #ffffff;
  --accent: #217cbb;
  --accent-hover: #1c6ca3;
  --accent-text: #ffffff;
  --accent-hover-text: #ffffff;
  --online: #54bd89;
  --danger: #b26161;
  --shadow-float: 0 16px 35px #1839571f;
  --shadow-card: 0 12px 40px #193b5a0b;
  --list-w: 420px;
  --radius: 20px;
  --radius-default: 12px;
  --radius-full: 999px;
  --curve: 20px;
  --panel-gap: 16px;
  --page-panel-max: 1500px;
  --app-max-w: 1500px;
  --shell-bg: #0063a3;
  --menu-hover-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --menu-hover-fg: var(--accent);
  --surface-deep: var(--surface);
}

html[data-theme-mode="dark"] {
  --danger: #f07178;
  --surface-deep: color-mix(in srgb, #000 32%, var(--app-bg));
}

/* Cards / páginas internas: tom mais fundo nos darks */
html[data-theme-mode="dark"] .page-panel__body,
html[data-theme-mode="dark"] .page-panel__list--skeleton,
html[data-theme-mode="dark"] .contacts-card,
html[data-theme-mode="dark"] .contacts-page .contact-row,
html[data-theme-mode="dark"] .tickets-table,
html[data-theme-mode="dark"] .tickets-row,
html[data-theme-mode="dark"] .agenda-day,
html[data-theme-mode="dark"] .agenda-list__day,
html[data-theme-mode="dark"] .page-loading__day,
html[data-theme-mode="dark"] .chat-config-card,
html[data-theme-mode="dark"] .perfil-sons__card,
html[data-theme-mode="dark"] .perfil-sons__mute-row,
html[data-theme-mode="dark"] .equipe-table,
html[data-theme-mode="dark"] .equipe-table__head,
html[data-theme-mode="dark"] .dept-table,
html[data-theme-mode="dark"] .dept-table__head,
html[data-theme-mode="dark"] .dept-row,
html[data-theme-mode="dark"] .quick-reply-table,
html[data-theme-mode="dark"] .quick-reply-table__head,
html[data-theme-mode="dark"] .quick-reply-row {
  background: var(--surface-deep);
}

html[data-theme-mode="dark"] .contacts-card-header,
html[data-theme-mode="dark"] .tickets-row--head {
  background: color-mix(in srgb, var(--icon) 8%, var(--surface-deep));
}

html[data-theme-mode="dark"] .contacts-page .contact-row:hover,
html[data-theme-mode="dark"] .tickets-row--clickable:hover {
  background: var(--menu-hover-bg);
}

html[data-theme-mode="dark"] .agenda-day--can-add:hover,
html[data-theme-mode="dark"] .agenda-day--can-add:focus-within {
  background-color: color-mix(in srgb, var(--accent) 3%, var(--surface-deep));
}

html[data-theme-mode="dark"] .agenda-day.agenda-day--today,
html[data-theme-mode="dark"] .agenda-list__day.is-today {
  background-color: color-mix(in srgb, var(--accent) 14%, var(--surface-deep));
}

/* Toggle switch compartilhado (composer, equipe, notificações) */
.composer-signature-switch,
.equipe-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.composer-signature-switch input,
.equipe-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.composer-signature-switch__track,
.equipe-switch__track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--icon) 10%, var(--surface));
  border: 1.5px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.composer-signature-switch__track::after,
.equipe-switch__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--icon);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%);
  transition: transform 0.15s ease, background 0.15s ease, left 0.15s ease;
}

html[data-theme-mode="dark"] .composer-signature-switch__track,
html[data-theme-mode="dark"] .equipe-switch__track {
  background: transparent;
  border-color: var(--border);
}

html[data-theme-mode="dark"] .composer-signature-switch__track::after,
html[data-theme-mode="dark"] .equipe-switch__track::after {
  background: var(--text-soft);
  box-shadow: none;
}

.composer-signature-switch input:checked + .composer-signature-switch__track,
.equipe-switch input:checked + .equipe-switch__track {
  background: var(--accent);
  border-color: var(--accent);
}

.composer-signature-switch input:checked + .composer-signature-switch__track::after,
.equipe-switch input:checked + .equipe-switch__track::after {
  left: calc(100% - 3px - 16px);
  transform: translateY(-50%);
  background: var(--accent-text, #fff);
}

html[data-theme-mode="dark"] .composer-signature-switch input:checked + .composer-signature-switch__track::after,
html[data-theme-mode="dark"] .equipe-switch input:checked + .equipe-switch__track::after {
  background: var(--accent-text);
}

html,
body,
#root {
  height: 100%;
}

body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#root {
  display: flex;
  justify-content: center;
  width: 100%;
}

button {
  font: inherit;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
}

a,
[role="button"],
[role="link"] {
  color: var(--text);
  text-decoration: none;
}

input {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ========== App shell ========== */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  overflow: hidden;
  padding:
    calc(20px + env(safe-area-inset-top, 0px))
    calc(20px + env(safe-area-inset-right, 0px))
    calc(20px + env(safe-area-inset-bottom, 0px))
    calc(20px + env(safe-area-inset-left, 0px));
  background:
    radial-gradient(circle at 90% -10%, color-mix(in srgb, var(--accent) 14%, transparent) 0, transparent 30%),
    var(--app-bg);
}

/* ========== Main workspace ========== */
.workspace {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  gap: 16px;
  padding: 0;
  z-index: 2;
  max-width: var(--app-max-w);
  width: 100%;
  margin: 0 auto;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-default);
  display: grid;
  place-items: center;
  color: var(--icon);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: 0.18s ease;
}

.icon-btn:hover {
  color: var(--icon);
  background: var(--menu-hover-bg);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* Campo de busca padronizado (top-nav / páginas / busca na conversa) */
.chat-list__search,
.page-panel__search,
.chat-msg-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  height: 37px;
  background-color: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-default);
  color: var(--icon);
  box-sizing: border-box;
  box-shadow: none;
  transition: border-radius 0.2s ease;
}

.page-panel__search,
.chat-msg-search {
  height: 42px;
  padding: 0 13px;
  box-shadow: 0 5px 18px #18395c08;
}

html[data-template="rounded"] .chat-list__search,
html[data-template="rounded"] .page-panel__search,
html[data-template="rounded"] .chat-msg-search {
  border-radius: var(--radius-full);
}

.chat-list__search input,
.page-panel__search-input,
.chat-msg-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}

.chat-list__search input::placeholder,
.page-panel__search-input::placeholder,
.chat-msg-search__input::placeholder {
  color: var(--text-soft);
}

.chat-list__search .icon,
.page-panel__search .icon,
.chat-msg-search .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}



@media (max-width: 800px) {
  .app {
    padding:
      calc(10px + env(safe-area-inset-top, 0px))
      calc(10px + env(safe-area-inset-right, 0px))
      calc(10px + env(safe-area-inset-bottom, 0px))
      calc(10px + env(safe-area-inset-left, 0px));
  }

  .workspace {
    padding: 0;
    gap: 0;
  }
}