/* Soliker — interface de agentes.
   Base: noite azul-marinho da marca (derivada de #052233), superfícies frias, verde Soliker
   só onde há ação. A cor de cada agente aparece no avatar e nas mensagens enviadas. */

@font-face {
  font-family: "Figtree";
  src: url("/static/vendor/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("/static/vendor/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0a1118;
  --side: #0c141c;
  --s1: #111b24;
  --s2: #16222d;
  --s3: #1d2b38;
  --s4: #243443;
  --line: rgba(146, 176, 201, 0.1);
  --line-2: rgba(146, 176, 201, 0.17);
  --tx: #e6edf2;
  --tx-2: #a2b2bf;
  --tx-3: #6d7f8d;
  --green: #70c048;
  --lime: #79cd2d;
  --navy: #084078;
  --navy-deep: #052233;
  --danger: #ef6b6b;
  --warn: #f2c94c;
  --focus: #9be05a;
  --side-w: 288px;
  --panel-w: 320px;
  --col: 780px;
  --r-xs: 8px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --font: "Figtree", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}

/* Cores dos agentes: --tone é a cor, --on-tone o texto legível sobre ela. */
[data-tone="0"] { --tone: #FF6700; --on-tone: #fff; }
[data-tone="1"] { --tone: #000; --on-tone: #fff; }
[data-tone="2"] { --tone: #936439; --on-tone: #fff; }
[data-tone="3"] { --tone: #FF263C; --on-tone: #fff; }
[data-tone="4"] { --tone: #FF9800; --on-tone: #fff; }
[data-tone="5"] { --tone: #00C972; --on-tone: #fff; }
[data-tone="6"] { --tone: #00BCA6; --on-tone: #fff; }
[data-tone="7"] { --tone: #1084FE; --on-tone: #fff; }
[data-tone="8"] { --tone: #9159FE; --on-tone: #fff; }
[data-tone="9"] { --tone: #FF309B; --on-tone: #fff; }
[data-tone="10"] { --tone: #777777; --on-tone: #fff; }

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 400 15px/1.55 var(--font);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
a[href] {
  color: #8fd65a;
  text-underline-offset: 2px;
}
img {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection {
  background: rgba(121, 205, 45, 0.32);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #26384a transparent;
}
.i {
  width: 20px;
  height: 20px;
  flex: none;
}
.i.big {
  width: 34px;
  height: 34px;
  color: var(--tx-3);
}
.grow {
  flex: 1;
}
.mono {
  font-family: var(--mono);
  font-size: 12.5px;
}
.row-end {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.row-end.wrap {
  flex-wrap: wrap;
}
.row-center {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.item-text {
  display: grid;
  min-width: 0;
  flex: 1;
  text-align: left;
}
.item-text strong,
.item-text h3 {
  font-size: 14px;
  font-weight: 560;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-text small {
  color: var(--tx-3);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--tx-3);
  font-size: 12.5px;
  margin: 14px 0 0;
}
.hint .i {
  width: 15px;
  height: 15px;
  margin-top: calc((1lh - 15px) / 2);
}
.error-text {
  color: var(--danger);
  font-size: 13px;
  min-height: 1em;
  margin: 0;
}
.panel-empty {
  color: var(--tx-3);
  font-size: 13.5px;
  margin: 6px 0;
}

/* ---------- Botões ---------- */
.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--tx-2);
  flex: none;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover {
  background: var(--s2);
  color: var(--tx);
}
.icon-btn .i {
  width: 19px;
  height: 19px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--s3);
  color: var(--tx);
  font-weight: 550;
  font-size: 14px;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease-sharp);
}
.btn:hover {
  background: var(--s4);
}
.btn:active {
  transform: scale(0.96);
}
.btn .i {
  width: 17px;
  height: 17px;
}
.btn.sm {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
}
.btn.primary {
  background: var(--lime);
  color: #0b1720;
}
.btn.primary:hover {
  background: #8bdc3f;
}
.btn.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn.ghost:hover {
  background: var(--s2);
}
.btn.danger {
  color: #ff9a9a;
}
.btn.primary.danger,
.btn.danger:not(.ghost) {
  background: #5a1f22;
  color: #ffd9d9;
}
.btn.block {
  width: 100%;
  height: 42px;
}
.btn.on {
  background: rgba(112, 192, 72, 0.14);
  color: #a6e07a;
}
.link-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--tx-2);
  font-size: 12.5px;
  padding: 4px 0;
}
.link-btn:hover {
  color: var(--tx);
  text-decoration: underline;
}
.link-btn .i {
  width: 15px;
  height: 15px;
}
kbd {
  font: 600 11px/1 var(--font);
}

/* ---------- Campos ---------- */
.form {
  display: grid;
  gap: 14px;
}
.field {
  display: grid;
  gap: 6px;
}
.field > span {
  font-size: 13px;
  color: var(--tx-2);
  font-weight: 500;
}
.field small {
  color: var(--tx-3);
  font-size: 12px;
}
.field-row,
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
input:not([type="checkbox"]):not([type="file"]),
textarea {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
input:not([type="checkbox"]):not([type="file"]):focus,
textarea:focus {
  border-color: rgba(121, 205, 45, 0.6);
  background: var(--s2);
}
input::placeholder,
textarea::placeholder {
  color: var(--tx-3);
}
input[readonly] {
  color: var(--tx-2);
}
textarea {
  resize: vertical;
  line-height: 1.5;
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--tx-2);
}
.check input {
  margin-top: 3px;
  accent-color: var(--lime);
  width: 16px;
  height: 16px;
  flex: none;
}
.search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tx-3);
}
.search-input input {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.search-input.slim {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.search-input.slim:focus-within {
  box-shadow: inset 0 0 0 1px rgba(121, 205, 45, 0.55);
}
.search-input.slim .i {
  width: 17px;
  height: 17px;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--tx-2);
  cursor: pointer;
  position: relative;
}
.toggle input {
  position: absolute;
  opacity: 0;
  width: 34px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.toggle .track {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--s4);
  position: relative;
  transition: background 0.2s;
  flex: none;
}
.toggle .track::after {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 14px;
  border-radius: 50%;
  background: #cfd9e1;
  transition: transform 0.2s var(--ease);
}
.toggle input:checked + .track {
  background: var(--green);
}
.toggle input:checked + .track::after {
  transform: translateX(14px);
  background: #fff;
}
.toggle input:focus-visible + .track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Escolha personalizada (sem select nativo) ---------- */
soliker-choice,
soliker-suggestions {
  display: block;
  min-width: 0;
}
soliker-option {
  display: none;
}
.choice-trigger {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s;
}
.choice-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border: solid var(--tx-3);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translateY(-2px);
  flex: none;
}
.choice-trigger:hover,
.choice-trigger[aria-expanded="true"] {
  background: var(--s2);
}
.catalog-trigger {
  margin-top: 6px;
  color: var(--tx-2);
  font-size: 13px;
}
.choice-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 6px;
  max-height: 300px;
  overflow: auto;
  background: var(--s2);
  color: var(--tx);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: grid;
  gap: 1px;
  z-index: 90;
}
.choice-popover button {
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  font-size: 14px;
}
.choice-popover button:hover,
.choice-popover button:focus-visible {
  background: var(--s3);
  outline: none;
}
.choice-popover button[aria-selected="true"] {
  color: #a6e07a;
  font-weight: 600;
}

/* ---------- Avatares ---------- */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
}
.avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.avatar.photo {
  border-radius: 50%;
  overflow: hidden;
  background: var(--s3);
}
.avatar.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.xs {
  width: 22px;
  height: 22px;
}
.avatar.lg {
  width: 60px;
  height: 60px;
}
.avatar.xl {
  width: 84px;
  height: 84px;
}
.avatar.hero {
  width: 104px;
  height: 104px;
}
.avatar.blank {
  border-radius: 50%;
  background: var(--s2);
  color: var(--tx-2);
}
.avatar.blank .i {
  width: 17px;
  height: 17px;
}
.me-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #0d4f91, #052233);
  color: #d8ecff;
  font-size: 12px;
  font-weight: 650;
  flex: none;
  letter-spacing: 0.02em;
}

/* ---------- Estrutura de três áreas ---------- */
.shell {
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  overflow: hidden;
}
.shell.panel-open {
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--panel-w);
}
.side {
  background: var(--side);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.main {
  min-width: 0;
  min-height: 0;
  position: relative;
}
.panel {
  display: none;
  background: var(--side);
  border-left: 1px solid var(--line);
  min-height: 0;
  flex-direction: column;
}
.shell.panel-open .panel {
  display: flex;
}
.side-scrim {
  display: none;
}

/* Barra lateral */
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-8) var(--sp-6) var(--sp-4);
}
.brand {
  display: flex;
  border-radius: 6px;
}
.brand img {
  height: 27px;
  width: auto;
  display: block;
}
.side-tools {
  display: flex;
  gap: 2px;
}
.side-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-8) var(--sp-6);
}
.hero-agent {
  margin: var(--sp-4) auto var(--sp-8);
  width: 132px;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border-radius: 18px;
  display: grid;
  justify-items: center;
  gap: 8px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background 0.15s, box-shadow 0.15s;
}
.hero-agent .avatar {
  width: 80px;
  height: 80px;
}
.hero-agent .hero-text strong {
  font-size: 14.5px;
}
.hero-agent span:last-child {
  font-size: 13px;
  font-weight: 560;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-agent:hover {
  background: var(--s2);
}
.hero-agent.active {
  box-shadow: inset 0 0 0 1px rgba(121, 205, 45, 0.45);
  background: var(--s2);
}
.side-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-4) var(--sp-2) var(--sp-4);
  color: var(--tx-3);
  font-size: 12.5px;
  font-weight: 550;
}
.side-label .icon-btn {
  width: 28px;
  height: 28px;
}
.side-label .icon-btn .i {
  width: 17px;
  height: 17px;
}
.agent-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4);
  border-radius: 12px;
  transition: background var(--dur-fast) var(--ease-sharp), opacity var(--dur-fast) var(--ease-sharp);
  /* Segurar para arrastar no toque não pode abrir a seleção de texto nem o balão do sistema. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.agent-item:hover {
  background: var(--s1);
}
.agent-item.active {
  background: var(--s2);
}
.agent-item .item-text strong {
  font-size: 14.5px;
}
.side-empty {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border-radius: 12px;
  color: var(--tx-3);
  font-size: 13.5px;
}
.side-empty:hover {
  background: var(--s1);
  color: var(--tx-2);
}
.side-empty .i {
  width: 18px;
  height: 18px;
}
.side-foot {
  padding: var(--sp-4) var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.side-nav {
  display: grid;
  gap: 2px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 10px;
  color: var(--tx-2);
  font-size: 13.5px;
}
.nav-link .i {
  width: 18px;
  height: 18px;
}
.nav-link:hover {
  background: var(--s1);
  color: var(--tx);
}
.nav-link.active {
  background: var(--s2);
  color: var(--tx);
}
.me-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.me {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border-radius: 12px;
}
.me:hover,
.me[aria-expanded="true"] {
  background: var(--s1);
}
.me-name {
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Conversa ---------- */
.chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}
.chat-head {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 var(--sp-8);
  pointer-events: none;
  background: linear-gradient(var(--bg) 18%, rgba(10, 17, 24, 0.55) 55%, rgba(10, 17, 24, 0));
}
/* Blur progressivo no topo: forte rente à borda e some suavemente para baixo,
   para as mensagens "entrarem" por baixo do cabeçalho em conversas longas. */
.chat-head::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  mask-image: linear-gradient(#000 30%, rgba(0, 0, 0, 0.6) 60%, transparent);
}
.chat-head > * {
  pointer-events: auto;
}
#side-toggle {
  position: absolute;
  left: 12px;
  display: none;
}
.agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  background: rgba(22, 34, 45, 0.92);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 14.5px;
  font-weight: 560;
  max-width: 60%;
  backdrop-filter: blur(6px);
}
.agent-pill .avatar {
  width: 30px;
  height: 30px;
}
.agent-pill span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-pill:hover {
  background: var(--s3);
}
.chat-head-tools {
  position: absolute;
  right: 12px;
}
.scroller {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  overscroll-behavior: contain;
}
.thread {
  max-width: var(--col);
  margin: 0 auto;
  padding: 72px 24px 28px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.empty-agent {
  margin: auto;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding-bottom: 8vh;
  animation: rise 0.5s var(--ease) both;
}
.empty-agent h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.load-older {
  align-self: center;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--tx-2);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.load-older:hover {
  background: var(--s1);
}
.load-older .i {
  width: 16px;
  height: 16px;
}
.day-sep {
  text-align: center;
  color: var(--tx-3);
  font-size: 12.5px;
  margin: 18px 0 10px;
}
.msg {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  content-visibility: auto;
  contain-intrinsic-size: auto 90px;
  scroll-margin: 80px;
}
.msg.grouped {
  margin-top: var(--sp-2);
}
/* content-visibility recorta o que passa da caixa da mensagem: o pulo do avatar precisa escapar.
   Mensagens em streaming precisam manter layout vivo mesmo se o usuário rolou para cima. */
.msg:hover,
.msg.streaming {
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.msg-avatar {
  width: 32px;
  flex: none;
  padding-top: 2px;
}
.msg-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(640px, 88%);
  position: relative;
}
.msg.user {
  justify-content: flex-end;
}
.msg.user .msg-main {
  align-items: flex-end;
  max-width: min(560px, 82%);
}
/* Espaço reservado ao lado do balão para a coluna do horário e a barra de ações. */
.msg.assistant .msg-main {
  max-width: min(640px, calc(100% - 150px));
}
.msg.user .msg-main {
  max-width: min(560px, calc(100% - 150px));
}
/* Mensagem com tabela: o balão cresce na horizontal até a largura útil da coluna do chat. */
.msg.assistant .msg-main:has(.md-table) {
  max-width: calc(100% - 52px);
}
.msg.assistant .bubble:has(.md-table) {
  min-width: 0;
}
.bubble {
  padding: var(--sp-5) var(--sp-7);
  border-radius: var(--r-lg);
  background: var(--s1);
  position: relative;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.msg.user .bubble {
  background: var(--tone, var(--lime));
  color: var(--on-tone, #0b1720);
  border-bottom-right-radius: 6px;
}
/* A seleção verde padrão some no balão verde: aqui ela fica escura com texto claro. */
.msg.user .bubble ::selection {
  background: rgba(11, 23, 32, 0.82);
  color: #f2f7fa;
}
.msg.user.grouped .bubble {
  border-top-right-radius: 8px;
}
.msg.assistant .bubble {
  border-bottom-left-radius: 6px;
}
.msg.user .md a {
  color: inherit;
}
.msg.sending .bubble {
  opacity: 0.75;
}
.bubble-cancel-row {
  clear: both;
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dashed rgba(11, 23, 32, 0.2);
}
.bubble-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(11, 23, 32, 0.08);
  color: inherit;
  border: 1px solid rgba(11, 23, 32, 0.18);
  border-radius: var(--r-sm, 6px);
  padding: var(--sp-2) var(--sp-4);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.12s, transform 0.08s;
  min-height: 24px;
}
.bubble-cancel-btn:hover {
  background: rgba(11, 23, 32, 0.16);
}
.bubble-cancel-btn:active {
  transform: scale(0.97);
}
.bubble-cancel-btn .i {
  width: 12px;
  height: 12px;
}
.msg.user.cancelled .bubble {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.msg.user.cancelled .md {
  text-decoration: line-through;
}
.bubble-cancelled-tag {
  clear: both;
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-top: 4px;
}
.msg.flash .bubble,
.msg.balloon-flash .bubble,
.tmsg.flash .bubble,
.tmsg.balloon-flash .bubble,
.balloon-flash.bubble,
.flash.bubble {
  animation: balloonFlash 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
@keyframes balloonFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(121, 205, 45, 0.85);
  }
  20% {
    box-shadow: 0 0 0 4px rgba(121, 205, 45, 0.75), 0 0 16px rgba(121, 205, 45, 0.4);
  }
  45% {
    box-shadow: 0 0 0 3px rgba(121, 205, 45, 0.5), 0 0 8px rgba(121, 205, 45, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .msg.flash .bubble,
  .msg.balloon-flash .bubble,
  .tmsg.flash .bubble,
  .tmsg.balloon-flash .bubble {
    animation: none;
    box-shadow: 0 0 0 3px var(--lime);
  }
}
.balloon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-4);
  margin: 0 2px;
  border-radius: 6px;
  background: var(--s2);
  border: 1px solid var(--line-2);
  color: var(--lime);
  font-size: 0.92em;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  vertical-align: baseline;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.balloon-link:hover,
.balloon-link:focus-visible {
  background: var(--s3);
  border-color: var(--lime);
  color: var(--tx);
  text-decoration: none;
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.balloon-link::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.85;
}
.bubble.collapsed .md {
  max-height: 22em;
  overflow: hidden;
  mask-image: linear-gradient(#000 70%, transparent);
}
.expand {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Ações da mensagem: ao lado do balão, centralizadas na altura dele, só no hover.
   Ficam fora do fluxo para não abrir espaço entre as mensagens. */
.msg-actions {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.14s,
    visibility 0.14s;
  white-space: nowrap;
  z-index: 2;
}
.msg.assistant .msg-actions {
  left: calc(100% + 48px);
}
.msg.user .msg-actions {
  right: calc(100% + 48px);
  flex-direction: row-reverse;
}
.bubble.is-long .msg-actions {
  top: auto;
  bottom: 4px;
  transform: none;
}
.msg:hover .msg-actions,
.msg.actions-open .msg-actions,
.msg-actions:focus-within,
.msg-actions:has([aria-expanded="true"]) {
  opacity: 1;
  visibility: visible;
}
.msg-actions button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--tx-3);
}
.msg-actions button:hover,
.msg-actions button[aria-expanded="true"] {
  color: var(--tx);
  background: var(--s2);
}
.msg-actions .i {
  width: 17px;
  height: 17px;
}
/* Reações: chips pequenos colados na base do balão, como nos apps de mensagem. */
.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -10px 10px 0;
  position: relative;
  z-index: 1;
}
.reactions button {
  min-width: 30px;
  height: 24px;
  padding: 0 var(--sp-4);
  border-radius: 999px;
  background: var(--s2);
  border: 2px solid var(--bg);
  font-size: 13px;
  line-height: 1;
  transition: transform 0.12s var(--ease);
}
.reactions button:hover {
  transform: scale(1.08);
}
.reactions button:active {
  transform: scale(0.94);
}
/* Motion dos chips: o JS marca is-new (entrada) e is-leaving (saída); o reordenar é FLIP em JS
   (WAAPI id reaction-shift). Durações pelos tokens --dur-*, com fallback. */
.reactions button.is-new {
  animation: reaction-chip-in var(--dur-base, 200ms) var(--ease);
}
.reactions button.is-leaving {
  position: absolute;
  pointer-events: none;
  animation: reaction-out var(--dur-base, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes reaction-chip-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes reaction-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Reação da IA (tapback) na mensagem da pessoa: pílula pequena no canto do balão, com
   entrada suave (pop/escala curta). Vem da IA, então tem borda e sombra próprias. */
.ai-reaction {
  display: flex;
  gap: 2px;
  margin: -12px 14px 0 0;
  position: relative;
  z-index: 2;
}
.msg.user .ai-reaction {
  justify-content: flex-end;
}
.ai-reaction .ai-reaction-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--s1);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font);
}
/* Só a reação recém-chegada anima (a classe is-new é adicionada ao inserir no DOM). */
.ai-reaction.is-new .ai-reaction-emoji {
  animation: ai-reaction-in 0.28s var(--ease);
  transform-origin: bottom center;
}
.ai-reaction.is-leaving {
  animation: reaction-out var(--dur-base, 200ms) cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}
@keyframes ai-reaction-in {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(4px);
  }
  60% {
    opacity: 1;
    transform: scale(1.12) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.msg.notice {
  justify-content: center;
  margin: 14px 0 4px;
}
.msg.notice span {
  display: inline-flex;
  gap: var(--sp-4);
  align-items: center;
  color: var(--tx-3);
  font-size: 12.5px;
  max-width: 560px;
  text-align: center;
}
.msg.notice .i {
  width: 14px;
  height: 14px;
  color: var(--green);
}
/* Trecho citado dentro do balão, no topo, com a barrinha à esquerda (como nos apps de mensagem). */
.quote {
  display: block;
  width: 100%;
  margin: 2px 0 6px;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  border-left: 2px solid currentColor;
  color: inherit;
  opacity: 0.62;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  transition: opacity 0.15s;
}
.quote:hover {
  opacity: 0.85;
}
.quote span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 6px 0;
}
.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tx-3);
  animation: blink 1.2s infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes blink {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
.failed-send {
  align-self: flex-end;
  margin-top: 10px;
  max-width: min(560px, 90%);
  padding: 10px 12px;
  border-radius: var(--r);
  background: rgba(239, 107, 107, 0.08);
  box-shadow: inset 0 0 0 1px rgba(239, 107, 107, 0.25);
}
.failed-send p {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13.5px;
  color: #ffc4c4;
}
.failed-send .i {
  width: 17px;
  height: 17px;
  margin-top: 2px;
}
.excerpt-action {
  position: fixed;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 16px);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--s3);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}
.excerpt-action .i {
  width: 15px;
  height: 15px;
}

/* Markdown */
.md {
  font-size: 15px;
  line-height: 1.6;
}
.md > :first-child {
  margin-top: 0;
}
.md > :last-child {
  margin-bottom: 0;
}
.md p,
.md ul,
.md ol,
.md blockquote,
.md .md-table,
.md pre {
  margin: 0 0 0.7em;
}
.md h1,
.md h2,
.md h3,
.md h4 {
  margin: 1em 0 0.4em;
  line-height: 1.3;
  font-weight: 650;
}
.md h1 {
  font-size: 1.25em;
}
.md h2 {
  font-size: 1.15em;
}
.md h3,
.md h4 {
  font-size: 1.02em;
}
.md ul,
.md ol {
  padding-left: 1.3em;
}
.md li + li {
  margin-top: 0.2em;
}
.md li::marker {
  color: var(--tx-3);
}
.md strong {
  font-weight: 650;
}
.md hr {
  border: 0;
  border-top: 1px solid var(--line-2);
  margin: 1em 0;
}
.md blockquote {
  padding-left: 12px;
  border-left: 2px solid var(--line-2);
  color: var(--tx-2);
}
.md code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: rgba(146, 176, 201, 0.1);
  padding: 0.12em 0.38em;
  border-radius: 5px;
}
.md pre {
  background: #070c11;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  overflow-x: auto;
}
.md pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
}
.md .md-table {
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.md table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 14px;
}
.md th,
.md td {
  min-width: 84px;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  padding: var(--sp-4) var(--sp-6);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.md th {
  background: rgba(146, 176, 201, 0.06);
  font-weight: 600;
  color: var(--tx-2);
  font-size: 13px;
}
.md tr:last-child td {
  border-bottom: 0;
}
.md input[type="checkbox"] {
  accent-color: var(--lime);
}
.md img {
  border-radius: var(--r-sm);
}
.md-external-image {
  color: var(--tx-3);
  font-style: italic;
}
.msg.user .md code {
  background: rgba(0, 0, 0, 0.12);
}
/* Citação dentro do balão da pessoa: texto, marcadores e código herdam a cor do balão (contraste AA); só a barra lateral é suavizada. */
.msg.user .md blockquote {
  color: inherit;
  border-left-color: color-mix(in srgb, currentColor 45%, transparent);
}
.msg.user .md li::marker {
  color: inherit;
}

/* Componentes enviados pelo agente */
.rb {
  background: var(--s1);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-2);
  box-shadow: inset 0 0 0 1px var(--line);
  min-width: min(360px, 100%);
}
.rb-title {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin: 0 var(--sp-2) var(--sp-3);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.55;
}
.rb-title > .i {
  width: 18px;
  height: 18px;
  flex: none;
  line-height: 1;
  margin-top: calc((1.55em - 18px) / 2);
}
.rb-option,
.rb-check {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border-radius: 10px;
  text-align: left;
  color: var(--tx);
  transition: background 0.12s;
}
.rb-option:hover,
.rb-check:hover {
  background: var(--s2);
}
.rb-option kbd {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--tx-2);
  flex: none;
}
.rb.answered .rb-option {
  color: var(--tx-3);
}
.rb.answered .rb-option.selected,
.rb-option.selected {
  color: var(--tx);
  background: var(--s2);
}
.rb-option.selected kbd {
  background: var(--lime);
  color: #0b1720;
  box-shadow: none;
}
/* Cartão de escolha (estilo Grok): recolhe opções não-escolhidas e destaca a escolhida com selo laranja */
.rb.choice.answered .rb-option:not(.selected) {
  display: none !important;
}
.rb.choice.answered .rb-option {
  cursor: default;
}
.rb.choice.answered .rb-option:hover {
  background: transparent;
}
.rb.choice.answered .rb-option.selected,
.rb.choice .rb-option.selected {
  color: var(--tx);
  background: transparent;
}
.rb.choice .rb-option.selected kbd,
.rb.choice.answered .rb-option.selected kbd {
  background: #ea580c;
  color: #ffffff;
  box-shadow: none;
  font-weight: 600;
}
.rb-check .box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  display: grid;
  place-items: center;
  flex: none;
}
.rb-check .box .i {
  width: 14px;
  height: 14px;
  opacity: 0;
}
.rb-check.on .box {
  background: var(--lime);
  box-shadow: none;
  color: #0b1720;
}
.rb-check.on .box .i {
  opacity: 1;
}
.rb-check.on > span:last-child {
  text-decoration: line-through;
  color: var(--tx-3);
}
.rb.info .md {
  padding: 0 4px;
  font-size: 14px;
  color: var(--tx-2);
}
.rb.form {
  gap: 10px;
  padding: 14px;
}
.rb.form .field > span {
  font-size: 12.5px;
}

/* Arquivos nas mensagens */
.msg-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bubble > .msg-files {
  margin: 10px 0;
}
.bubble > .msg-files:first-child {
  margin-top: 0;
}
.bubble > .msg-files:last-child {
  margin-bottom: 0;
}
.msg.user .msg-files {
  justify-content: flex-end;
}
.msg-image {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  max-width: 280px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.msg-image img {
  display: block;
  max-height: 260px;
  object-fit: cover;
}
.file-card {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-width: 220px;
  max-width: 320px;
  padding: var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: 14px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--tx);
  text-decoration: none;
  transition: background 0.15s;
}
.file-card:hover {
  background: var(--s2);
}
.file-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.file-text strong {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-text small {
  font-size: 12px;
  color: var(--tx-3);
}
.file-card > .i {
  width: 17px;
  height: 17px;
  color: var(--tx-3);
}
.file-badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  flex: none;
  background: #1f2f3d;
  color: #b9c9d6;
}
.file-badge.k-pdf {
  background: #3a1d22;
  color: #ff9b9b;
}
.file-badge.k-sheet {
  background: #173322;
  color: #8fdc8f;
}
.file-badge.k-audio,
.file-badge.k-video {
  background: #29224a;
  color: #c1b4ff;
}
.file-badge.k-image {
  background: #3a2f12;
  color: #f2d27a;
}

/* Composer */
.dock {
  padding: 0 24px 18px;
  position: relative;
  z-index: 4;
}
.dock > * {
  max-width: var(--col);
  margin-inline: auto;
}
.composer {
  background: var(--s1);
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: var(--sp-3);
  transition: box-shadow 0.15s;
}
/* O foco contorna o composer inteiro (anexos, texto e botões), não só o campo de texto. */
.composer:focus-within {
  box-shadow: inset 0 0 0 1.5px rgba(121, 205, 45, 0.55), 0 0 0 3px rgba(121, 205, 45, 0.12), 0 10px 30px rgba(0, 0, 0, 0.3);
}
#prompt:focus,
#prompt:focus-visible {
  outline: none;
  box-shadow: none;
}
.composer-row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
}
.composer-row .icon-btn {
  width: 38px;
  height: 38px;
}
#prompt {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  resize: none;
  padding: var(--sp-4) var(--sp-2) !important;
  min-height: 38px;
  max-height: 220px;
  font-size: 15px;
  line-height: 22px;
  overflow-y: auto;
  field-sizing: content;
}
.send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tone, var(--lime));
  color: var(--on-tone, #0b1720);
  flex: none;
  transition: transform var(--dur-fast) var(--ease-sharp), opacity var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.send:hover:not(:disabled) {
  transform: scale(1.05);
}
.send:active:not(:disabled) {
  transform: scale(0.96);
}
.send .i {
  width: 19px;
  height: 19px;
  stroke-width: 2.2;
}
.send.stopping {
  background: var(--tx);
  color: var(--bg);
}
.send.stopping .i {
  fill: currentColor;
}
#record-audio.recording {
  color: #ff8d8d;
  background: rgba(239, 107, 107, 0.12);
}
.reply-preview {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 2px 2px 6px;
  padding: 7px 4px 7px 12px;
  border-radius: 14px;
  background: var(--s2);
  font-size: 13px;
  color: var(--tx-2);
}
.reply-preview > span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-preview > .i {
  width: 15px;
  height: 15px;
}
.reply-preview .icon-btn {
  width: 26px;
  height: 26px;
}
.tray {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tray:not(:empty) {
  padding: 2px 2px 6px;
}
.attachment-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 4px 5px 5px;
  border-radius: 14px;
  background: var(--s2);
  max-width: 280px;
  min-width: 0;
}
.attachment-chip .file-badge,
.chip-thumb {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  overflow: hidden;
  flex: none;
}
.chip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chip-text {
  display: grid;
  min-width: 0;
}
.chip-text strong {
  font-size: 13px;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-text small {
  font-size: 11.5px;
  color: var(--tx-3);
}
.attachment-chip.s-ready small {
  color: #9ad66a;
}
.attachment-chip.s-error small,
.attachment-chip.s-timeout small {
  color: #ff9b9b;
}
.attachment-chip .chip-retry-btn {
  font-size: 11px;
  color: #ff9b9b;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--s3, rgba(255, 255, 255, 0.08));
  cursor: pointer;
  white-space: nowrap;
  flex: none;
}
.attachment-chip .chip-retry-btn:hover {
  background: var(--s4, rgba(255, 255, 255, 0.15));
}
.attachment-chip .icon-btn {
  width: 26px;
  height: 26px;
}
.attachment-chip .icon-btn .i {
  width: 15px;
  height: 15px;
}
/* O item da bandeja abre o lightbox; o X de remover fica fora do botão. */
.chip-open {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border-radius: 10px;
  text-align: left;
  cursor: zoom-in;
}
.chip-open:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}
/* Lightbox de anexos: fundo escuro, imagem até 90vw x 85vh, documentos com a prévia do painel. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  background: rgba(2, 5, 8, 0.88);
  backdrop-filter: blur(4px);
  animation: fade 0.16s ease;
}
.lightbox.closing {
  animation: lb-out 0.14s ease forwards;
  pointer-events: none;
}
@keyframes lb-out {
  to {
    opacity: 0;
  }
}
.lb-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.lb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.lb-head .item-text {
  flex: 1;
  min-width: 0;
}
.lb-head strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-btn {
  flex: none;
  text-decoration: none;
}
.lb-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background: rgba(2, 5, 8, 0.55);
  color: #fff;
}
.lb-nav.prev {
  left: 14px;
}
.lb-nav.next {
  right: 14px;
}
.lb-nav.prev .i {
  transform: rotate(180deg);
}
.lb-nav:disabled {
  opacity: 0.25;
}
.lb-body {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0 16px 20px;
  overflow: auto;
}
.lb-media {
  display: grid;
  place-items: center;
  max-width: 100%;
  max-height: 100%;
}
.lb-img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 0.14s,
    transform 0.18s var(--ease);
}
.lb-img.loaded {
  opacity: 1;
  transform: none;
}
.lb-media video {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
}
.lb-media audio {
  width: min(520px, 86vw);
}
.lb-wait {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--tx-2);
}
.lb-doc {
  width: min(1000px, 92vw);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--s1);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: auto;
}
.lb-doc .pv-frame {
  flex: none;
  height: min(80vh, 900px);
}
.lb-doc .pv-table-wrap {
  margin-bottom: 12px;
}
@media (max-width: 560px) {
  .lb-btn span {
    display: none;
  }
  .lb-head {
    padding: 10px 12px;
  }
  .lb-body {
    padding: 0 8px 12px;
  }
  .lb-doc {
    width: 100%;
  }
}
.spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--s4);
  border-top-color: var(--lime);
  animation: spin 0.8s linear infinite;
  flex: none;
}
.spinner.lg {
  width: 28px;
  height: 28px;
  border-width: 2.5px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.rec-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 8px 12px;
  font-size: 13.5px;
  color: var(--tx-2);
}
.rec-banner > span:nth-child(2) {
  flex: 1;
}
.rec-banner b {
  font-variant-numeric: tabular-nums;
  color: var(--tx);
  font-weight: 600;
}
.rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b6b;
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
.pending-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: rgba(242, 201, 76, 0.08);
  box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.22);
  color: #f3dc94;
  font-size: 13.5px;
  text-align: left;
}
.pending-bar span {
  flex: 1;
  min-width: 0;
}
.pending-bar strong {
  font-weight: 650;
}
.pending-bar .i {
  width: 18px;
  height: 18px;
}
/* Pílula igual aos .btn do app: mesmo raio, fonte e fundo; borda sutil em vez de sombra pesada. */
.jump {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dock-height, 74px) + 12px);
  translate: -50% 0;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--s3);
  color: var(--tx);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s;
}
.jump[hidden] {
  display: none;
}
.jump:hover {
  background: var(--s4);
}
.jump:active {
  transform: translateY(1px);
}
.jump:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.jump-label {
  display: none;
}
.jump.has-new .jump-label-new,
.jump:not(.has-new) .jump-label-idle {
  display: inline;
}
.jump .i {
  width: 17px;
  height: 17px;
}
.drop-veil {
  position: absolute;
  inset: 10px;
  z-index: 20;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(10, 17, 24, 0.86);
  border: 1.5px dashed rgba(121, 205, 45, 0.6);
  color: var(--tx);
  pointer-events: none;
  /* display não anima: a entrada e a saída usam opacity/transform; visibility só
     sai ao fim da saída para não ficar capturando leitura/foco escondido. */
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition:
    opacity var(--dur-fast, 120ms) var(--ease-sharp, cubic-bezier(0.165, 0.84, 0.44, 1)),
    transform var(--dur-fast, 120ms) var(--ease-sharp, cubic-bezier(0.165, 0.84, 0.44, 1)),
    visibility 0s linear var(--dur-fast, 120ms);
}
.drop-veil div {
  display: grid;
  justify-items: center;
  gap: 10px;
  font-weight: 560;
}
.drop-veil .i {
  width: 30px;
  height: 30px;
  color: var(--lime);
}
.chat.dragging .drop-veil {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-fast, 120ms) var(--ease-sharp, cubic-bezier(0.165, 0.84, 0.44, 1)),
    transform var(--dur-fast, 120ms) var(--ease-sharp, cubic-bezier(0.165, 0.84, 0.44, 1)),
    visibility 0s;
}

/* ---------- Painel do agente ---------- */
.panel-head {
  display: flex;
  padding: 12px 12px 0;
  position: relative;
  z-index: 2;
  /* O pulo do avatar grande precisa de espaço em cima, dentro da área que rola. */
  margin-bottom: -14px;
}
.panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 36px 16px 24px;
}
.panel-identity {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  margin: 0 0 14px;
}
.panel-avatar {
  position: relative;
  border-radius: 50%;
  margin-bottom: 8px;
}
.edit-dot {
  position: absolute;
  right: -2px;
  bottom: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s3);
  box-shadow: 0 0 0 3px var(--side);
  color: var(--tx-2);
  opacity: 0;
  transition: opacity 0.15s;
}
.edit-dot .i {
  width: 14px;
  height: 14px;
}
.panel-avatar:hover .edit-dot,
.panel-avatar:focus-visible .edit-dot {
  opacity: 1;
}
.panel-identity h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 620;
}
.panel-name { font: inherit; color: inherit; cursor: text; overflow-wrap: anywhere; }
.panel-name:hover, .panel-name:focus-visible { text-decoration: underline; }
.panel-name-input { max-width: 100%; width: 220px; font: inherit; text-align: center; }
.status {
  margin: 0;
  font-size: 12.5px;
  color: var(--tx-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}
.status.busy::before {
  background: var(--warn);
  animation: pulse 1s infinite;
}
.segmented {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 4px 0 14px;
}
.segmented button {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--tx-3);
  font-weight: 550;
}
.segmented button:hover {
  color: var(--tx);
}
.segmented button[aria-selected="true"] {
  background: var(--s2);
  color: var(--tx);
}
.segmented.wide {
  margin: 0 0 16px;
}
.panel-body {
  min-height: 60px;
}
.panel-section {
  margin-top: 20px;
}
.panel-section h3 {
  margin: 0 0 8px 2px;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--tx-3);
}
.computer-tile {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 14px;
  border-radius: var(--r);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
}
.computer-tile:hover {
  background: var(--s2);
}
.computer-tile > span:first-child {
  flex: 1;
  display: grid;
  min-width: 0;
}
.computer-tile strong,
.computer-tile small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.computer-tile strong {
  font-size: 14px;
  font-weight: 560;
}
.computer-tile small {
  color: var(--tx-3);
  font-size: 12px;
}
.computer-thumb {
  width: 64px;
  height: 42px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #1b2a38, #0d1720);
  color: var(--tx-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pref-card {
  border-radius: var(--r);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 4px;
}
.pref-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13.5px;
  border-radius: 10px;
  text-align: left;
}
.pref-row > span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pref-row .i {
  width: 17px;
  height: 17px;
  color: var(--tx-3);
}
.pref-row.link:hover {
  background: var(--s2);
}
.pref-row soliker-choice .choice-trigger {
  background: transparent;
  box-shadow: none;
  padding: 4px 6px;
  min-height: 28px;
  color: var(--tx-2);
  font-size: 13px;
}
.approvals {
  display: grid;
  gap: 10px;
}
.approval {
  padding: 12px;
  border-radius: var(--r);
  background: rgba(242, 201, 76, 0.05);
  box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.2);
  display: grid;
  gap: 10px;
}
.approval header {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.approval header .i {
  width: 17px;
  height: 17px;
  color: var(--warn);
}
.approval .link-btn {
  justify-self: start;
}
.details {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12.5px;
}
.details dt {
  color: var(--tx-3);
}
.details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--tx-2);
  font-family: var(--font);
}
.details.big {
  font-size: 14px;
  gap: 10px 18px;
}
.activity {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.activity li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 4px;
}
.activity .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--tx-3);
  flex: none;
}
.activity .st-done .dot {
  background: var(--green);
}
.activity .st-error .dot,
.activity .st-rejected .dot {
  background: var(--danger);
}
.activity .st-running .dot {
  background: var(--warn);
}
.lib-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.lib-grid a {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--s1);
}
.lib-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Biblioteca: grade compacta no painel e janela "Ver tudo" */
.lib-grid-panel,
.lib-grid-all {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.lib-grid-all {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.lib-tile {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  text-align: left;
  color: var(--tx);
  border-radius: 12px;
}
.lib-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--s2);
  border: 1px solid var(--line);
}
.lib-tile:hover .lib-thumb,
.lib-tile:focus-visible .lib-thumb {
  border-color: var(--line-2);
  background: var(--s2);
}
.lib-thumb img,
.lib-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.lib-thumb .file-badge {
  width: 46px;
  height: 46px;
  font-size: 11px;
}
.lib-thumb.k-page .i {
  width: 28px;
  height: 28px;
  color: var(--tx-2);
}
.lib-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.lib-cap {
  display: grid;
  min-width: 0;
}
.lib-cap strong,
.lib-cap small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-cap strong {
  font-size: 11.5px;
  font-weight: 600;
}
.lib-cap small {
  font-size: 10.5px;
  color: var(--tx-3);
}
.lib-all {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
}
.lib-body {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-bottom: 16px;
}
.lib-tools {
  display: grid;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2px 0 6px;
  background: var(--s2);
}
.lib-search {
  position: relative;
  display: block;
  color: var(--tx-3);
}
.lib-search .i {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.lib-search input.lib-q[type="search"] {
  padding-left: 36px;
  font-size: 16px;
  background: var(--s2);
  color: var(--tx);
}
.lib-ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lib-ranges .chip {
  justify-content: center;
}
.lib-count {
  margin: 0;
  font-size: 12px;
  color: var(--tx-3);
}
.lib-day {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}
.lib-day h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--tx-2);
}
.skeleton-list {
  display: grid;
  gap: 8px;
}
.skeleton-list i {
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--s1), var(--s2), var(--s1));
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
.skeleton-list.wide {
  max-width: 900px;
  margin: 90px auto;
  padding: 0 24px;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ---------- Menus ---------- */
.menu {
  position: fixed;
  z-index: 80;
  min-width: 220px;
  max-width: 300px;
  padding: var(--sp-4);
  border-radius: var(--r);
  background: var(--s2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  animation: pop 0.14s var(--ease);
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 9px;
  font-size: 14px;
  text-align: left;
}
.menu-item span {
  flex: 1;
}
.menu-item small {
  color: var(--tx-3);
  font-size: 12px;
}
.menu-item .i {
  width: 18px;
  height: 18px;
  color: var(--tx-2);
}
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--s3);
  outline: none;
}
.menu-item.danger,
.menu-item.danger .i {
  color: #ff9b9b;
}
.menu-sep {
  height: 1px;
  background: var(--line-2);
  margin: 5px 4px;
}
.menu-header {
  display: grid;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 5px;
}
.menu-header strong {
  font-size: 14px;
  font-weight: 600;
}
.menu-header small {
  font-size: 12.5px;
  color: var(--tx-3);
}
.account-menu {
  min-width: 250px;
}

/* ---------- Modais ---------- */
body.modal-open {
  overflow: hidden !important;
}
body.modal-open .scroller {
  overscroll-behavior: contain;
}
.modal-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 24px;
  /* The dimmer isolates the dialog without recomputing a fullscreen blur
     for every frame of the live chat behind it (costly on software renderers). */
  background: rgba(3, 7, 10, 0.66);
}
.modal-layer.open {
  display: grid;
  animation: fade 0.16s ease;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.modal-card {
  width: 100%;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--s1);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: var(--shadow);
  animation: lift 0.2s var(--ease);
  overflow: hidden;
}
@keyframes lift {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
}
.modal-card.size-sm {
  max-width: 440px;
}
.modal-card.size-md {
  max-width: 560px;
}
.modal-card.size-lg {
  max-width: 820px;
}
.modal-card.size-xl {
  max-width: 1120px;
}
.modal-card.size-search {
  max-width: 640px;
  align-self: start;
  margin-top: 12vh;
  max-height: 70vh;
}
.modal-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-12) var(--sp-4);
}
.modal-head > div {
  flex: 1;
  min-width: 0;
}
.modal-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.005em;
}
.modal-head p {
  margin: 3px 0 0;
  color: var(--tx-3);
  font-size: 13px;
}
.modal-body {
  padding: var(--sp-6) var(--sp-12) var(--sp-12);
  overflow-y: auto;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding-top: var(--sp-8);
  margin-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
.confirm-layer {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  background: rgba(3, 7, 10, 0.55);
  padding: 20px;
}
.confirm-card {
  width: min(400px, 100%);
  background: var(--s2);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  animation: lift 0.16s var(--ease);
}
.confirm-card p {
  margin: 0 0 18px;
  font-size: 15px;
}

/* Criar / personalizar agente */
.agent-modal .modal-head {
  padding-bottom: 0;
}
.agent-form .tab-pane[data-pane="look"] {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.avatar-stage {
  height: 112px;
  display: grid;
  place-items: center;
}
.name-input {
  text-align: center;
  font-size: 15px !important;
  border-radius: 12px !important;
}
.avatar-editor {
  width: 100%;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.avatar-tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
}
.avatar-tabs button {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--tx-3);
  font-weight: 550;
}
.avatar-tabs button:hover {
  color: var(--tx);
}
.avatar-tabs button.active {
  background: var(--s2);
  color: var(--tx);
}
#avatar-options {
  padding: 14px;
}
.shape-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  justify-items: center;
}
.shape-opt {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  transition: background 0.12s, transform 0.12s;
}
.shape-opt svg {
  width: 42px;
  height: 42px;
}
.shape-opt:hover {
  background: var(--s2);
  transform: translateY(-1px);
}
.shape-opt.active {
  background: var(--s2);
  box-shadow: inset 0 0 0 1.5px var(--tx-3);
}
.color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  justify-items: center;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.color-opt {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  transition: transform 0.12s;
  cursor: pointer;
  touch-action: manipulation;
}
.color-opt:hover {
  transform: scale(1.12);
}
.color-opt.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--tone);
}
.gen-box {
  display: grid;
  gap: 10px;
}
.gen-box textarea {
  opacity: 0.55;
}
.gen-box .hint {
  margin: 0;
}
.drop-zone {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 14px;
  border-radius: 12px;
  border: 1.5px dashed var(--line-2);
  color: var(--tx-2);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.drop-zone > span:first-of-type {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.drop-zone.over {
  border-color: var(--lime);
  background: rgba(121, 205, 45, 0.05);
}
.drop-zone small {
  color: var(--tx-3);
  min-height: 1em;
}
.memory-list {
  display: grid;
  gap: 8px;
}
.memory {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 6px 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.memory p {
  margin: 0;
  font-size: 14px;
  white-space: pre-wrap;
}
.memory-body {
  flex: 1;
  min-width: 0;
}
.memory-author {
  display: block;
  margin-top: 4px;
  color: var(--tx-3);
  font-size: 12px;
}
.memory-tools {
  display: flex;
}
.memory-tools .icon-btn {
  width: 30px;
  height: 30px;
}
.memory-tools .icon-btn .i {
  width: 16px;
  height: 16px;
}
.memory-form {
  display: grid;
  gap: 8px;
}
.add-memory {
  justify-self: start;
}

/* Busca */
.search-box {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.search-input:not(.slim) {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}
.search-input:not(.slim) .i {
  width: 21px;
  height: 21px;
}
.search-results {
  overflow-y: auto;
  padding: 6px 10px 12px;
}
.result-group {
  margin: 12px 10px 4px;
  font-size: 12.5px;
  color: var(--tx-3);
  font-weight: 550;
}
.result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  text-align: left;
}
.result.active {
  background: var(--s2);
}
.result time {
  color: var(--tx-3);
  font-size: 12px;
}
.result-none {
  color: var(--tx-3);
  padding: 14px 10px 4px;
  margin: 0;
}

/* Aplicativos */
.apps-body {
  display: grid;
  gap: 14px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--tx-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.chip:hover {
  background: var(--s2);
}
.chip.active {
  background: var(--tx);
  color: var(--bg);
  box-shadow: none;
  font-weight: 600;
}
.chip .i {
  width: 15px;
  height: 15px;
}
.apps-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
.app-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  min-width: 0;
}
.app-row .item-text small {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.app-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
}
.app-icon .i {
  width: 21px;
  height: 21px;
}
.a-red {
  background: #3a1d22;
  color: #ff9b9b;
}
.a-blue {
  background: #142d4d;
  color: #8cc0ff;
}
.a-yellow {
  background: #3a3012;
  color: #f2d27a;
}
.a-violet {
  background: #29224a;
  color: #c1b4ff;
}
.a-green {
  background: #173322;
  color: #8fdc8f;
}
.app-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

/* Biblioteca / listas de escolha */
.pick-list {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}
.pick {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--tx);
  text-decoration: none;
  text-align: left;
  width: 100%;
}
.pick:hover {
  background: var(--s2);
}
.pick.static {
  cursor: default;
}
.pick .file-badge {
  width: 34px;
  height: 34px;
  font-size: 10px;
}
.pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pick-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  display: grid;
  place-items: center;
}
.pick-box .i {
  width: 14px;
  height: 14px;
  opacity: 0;
}
.pick input:checked ~ .pick-box {
  background: var(--lime);
  box-shadow: none;
  color: #0b1720;
}
.pick input:checked ~ .pick-box .i {
  opacity: 1;
}
.pick input:focus-visible ~ .pick-box {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.pick > .i {
  width: 16px;
  height: 16px;
  color: var(--tx-3);
}
.rule-list {
  display: grid;
  gap: 10px;
}
.rule {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.rule .details {
  margin-top: 8px;
}
.browse {
  display: grid;
  gap: 12px;
}
.browse-list {
  display: grid;
  gap: 2px;
}
.browse-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
}
.browse-item:hover {
  background: var(--s2);
}
.browse-item .item-text small {
  white-space: normal;
}
.browse-detail h3 {
  margin: 0 0 10px;
}
.pre {
  white-space: pre-wrap;
  font-size: 14px;
  color: var(--tx-2);
  max-height: 50vh;
  overflow: auto;
  background: var(--bg);
  border-radius: 12px;
  padding: 12px;
}
.more-btn {
  justify-self: center;
  margin-top: 8px;
}

/* ---------- Computador ---------- */
.computer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #04080c;
  display: grid;
  grid-template-rows: auto 1fr auto;
  animation: fade 0.2s ease;
}
.computer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}
.computer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.computer-title > span {
  display: grid;
  min-width: 0;
}
.computer-title strong {
  font-size: 14px;
  font-weight: 600;
}
.computer-title small {
  font-size: 12px;
  color: var(--tx-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.computer-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  color: var(--tx-2);
  font-size: 13px;
}
.tool:hover {
  background: var(--s2);
  color: var(--tx);
}
.tool .i {
  width: 18px;
  height: 18px;
}
.tool.icon-only {
  width: 34px;
  padding: 0;
  justify-content: center;
}
.bar-sep {
  width: 1px;
  height: 20px;
  background: var(--line-2);
  margin: 0 6px;
}
.computer-stage {
  display: grid;
  place-items: center;
  padding: 0 24px;
  min-height: 0;
}
.screen-wrap {
  position: relative;
  width: min(100%, calc((100dvh - 150px) * 1.6));
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #0d151d;
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, 0.6);
}
#browser-screen {
  width: 100%;
  height: 100%;
  display: block;
  cursor: default;
}
.computer.human #browser-screen {
  cursor: pointer;
}
.vnc-host {
  position: absolute;
  inset: 0;
  background: #0d151d;
}
.vnc-host[hidden] {
  display: none;
}
#browser-screen[hidden] {
  display: none;
}
.computer.human .screen-wrap {
  box-shadow: 0 0 0 2px var(--lime), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.screen-boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
  color: var(--tx-2);
  padding: 20px;
}
.screen-boot p {
  max-width: 340px;
  margin: 0;
  font-size: 14px;
}
.screen-boot .i {
  width: 28px;
  height: 28px;
  color: var(--warn);
}
.control-pill {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 5px 5px 5px 14px;
  border-radius: 999px;
  background: var(--s2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.control-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--tx-2);
}
.control-state .i {
  width: 17px;
  height: 17px;
}
.computer.human .control-state {
  color: var(--tx);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(121, 205, 45, 0.18);
}
#take-control {
  background: var(--tx);
  color: var(--bg);
}
.computer.human #take-control {
  background: var(--s4);
  color: var(--tx);
}
#take-control.nudge {
  animation: nudge 0.5s;
}
@keyframes nudge {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
.url-bar {
  position: absolute;
  left: 50%;
  top: 58px;
  translate: -50% 0;
  width: min(520px, 70vw);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 38px;
  border-radius: 999px;
  background: var(--s2);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow);
  color: var(--tx-3);
  z-index: 2;
}
.url-bar span {
  display: grid;
}
.url-bar .i {
  width: 16px;
  height: 16px;
}
.url-bar input {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 14px;
}

/* ---------- Páginas (CRM e administração) ---------- */
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.page-head {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12) var(--sp-5);
  flex-wrap: wrap;
}
.page-head #side-toggle {
  position: static;
}
.page-title {
  flex: 1;
  min-width: 220px;
}
.page-title h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.page-title p {
  margin: 2px 0 0;
  color: var(--tx-3);
  font-size: 13px;
}
.page-tools {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-scroll {
  flex: 1;
  overflow: auto;
  padding: var(--sp-4) var(--sp-12) 32px;
  min-height: 0;
}
.sync {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tx-3);
  flex: none;
}
.dot.on {
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(112, 192, 72, 0.18);
}
.dot.wait {
  background: var(--warn);
}
.dot.off {
  background: #6d7f8d;
}
.empty-page {
  max-width: 460px;
  margin: 12vh auto 0;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.empty-page.small {
  margin-top: 6vh;
}
.empty-page h2 {
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 620;
}
.empty-page p {
  margin: 0 0 8px;
  color: var(--tx-2);
}
.crm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 24px 8px;
}
.crm-bar-filters,
.crm-bar-extra {
  display: contents;
}
.crm-sheet-nav {
  display: none !important;
}
.crm-wa-top-bar,
.crm-edit-back-bar {
  display: none !important;
}
.lbl-short {
  display: none;
}
.lbl-full {
  display: inline;
}
.crm-bar soliker-choice {
  width: 196px;
}
.crm-bar .choice-trigger {
  border-radius: 999px;
  height: 36px;
  font-size: 13.5px;
}
.crm-bar .search-input.grow {
  min-width: 220px;
}
.tag-input {
  width: 150px;
}
.acc-name {
  font-size: 13.5px;
  font-weight: 600;
  padding: 0 6px;
}
.seg-mini {
  display: flex;
  padding: var(--sp-2);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.seg-mini button {
  width: 32px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--tx-3);
}
.seg-mini button.on {
  background: var(--s3);
  color: var(--tx);
}
.seg-mini .i {
  width: 17px;
  height: 17px;
}
.crm-demo-banner {
  margin: 0 24px 8px;
  padding: 6px 14px;
  border-radius: 10px;
  background: var(--s2);
  color: var(--tx-2);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
.crm-summary {
  margin: 0;
  padding: 0 24px 10px;
  color: var(--tx-3);
  font-size: 13px;
}
.crm-board-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 24px 20px;
}
.board {
  display: flex;
  gap: 12px;
  height: 100%;
  min-height: 420px;
}
.column {
  width: 276px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--side);
  box-shadow: inset 0 0 0 1px var(--line);
  min-height: 0;
  transition: box-shadow 0.15s, background 0.15s;
}
.column.dropover {
  box-shadow: inset 0 0 0 1.5px rgba(121, 205, 45, 0.6);
  background: #0f1a23;
}
.column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.count {
  min-width: 24px;
  height: 22px;
  padding: 0 var(--sp-4);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: var(--s2);
  color: var(--tx-2);
}
.column-body {
  flex: 1;
  overflow-y: auto;
  padding: 2px 8px 10px;
  display: grid;
  align-content: start;
  gap: 8px;
}
.contact {
  padding: var(--sp-6);
  border-radius: 13px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  display: grid;
  gap: var(--sp-4);
  transition: background 0.12s, transform 0.12s;
}
.contact:hover {
  background: var(--s2);
}
.contact:active {
  cursor: grabbing;
}
.contact header {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
}
.contact header strong {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-avatar {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #173322;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  user-select: none;
}
.contact-avatar.size-sm {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.contact-avatar.size-lg {
  width: 44px;
  height: 44px;
  font-size: 16px;
}
.contact-avatar .avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 2;
}
.contact-avatar .avatar-initials {
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.contact p {
  margin: 0;
  color: var(--tx-2);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contact footer {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--tx-3);
}
.badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--lime);
  color: #0b1720;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(146, 176, 201, 0.1);
  color: var(--tx-2);
}
.contact-list {
  display: grid;
  gap: 6px;
  max-width: 980px;
}
.contact.row {
  grid-template-columns: minmax(180px, 1.1fr) 2fr auto;
  align-items: center;
}
.contact.row::after {
  content: attr(data-stage-label);
  grid-column: 3;
  grid-row: 1;
  font-size: 12px;
  color: var(--tx-2);
  padding: var(--sp-2) var(--sp-5);
  border-radius: 999px;
  background: var(--s3);
}
.contact.row p {
  -webkit-line-clamp: 1;
}
.contact.row .tags,
.contact.row footer {
  display: none;
}
.modal-card.crm-contact-modal {
  max-height: 85vh;
  height: 85vh;
}
.crm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--line-2);
  flex: none;
}
.crm-head-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.crm-head-titles {
  min-width: 0;
  flex: 1;
}
.crm-head-titles h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-head-titles p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--tx-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-view {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 18px 22px 22px;
}
.wa-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.wa-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-msg-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  align-self: flex-start;
  max-width: 86%;
}
.wa-msg-row.mine {
  align-self: flex-end;
  justify-content: flex-end;
}
.wa-msg-row .contact-avatar {
  margin-bottom: 2px;
}
.wa-msg {
  max-width: 100%;
  padding: var(--sp-4) var(--sp-6);
  border-radius: 14px;
  border-top-left-radius: 5px;
  background: var(--s2);
  align-self: flex-start;
}
.wa-msg.mine {
  align-self: flex-end;
  background: #12301f;
  border-top-left-radius: 14px;
  border-top-right-radius: 5px;
}
.wa-msg strong {
  font-size: 12px;
  color: #9ad66a;
  font-weight: 600;
}
.wa-msg p {
  margin: 2px 0;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.wa-msg time {
  display: block;
  text-align: right;
  font-size: 11px;
  color: var(--tx-3);
}
.wa-col .wa-ai-btn {
  flex: none;
  margin-top: auto;
  width: 100%;
}
.crm-chat-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.crm-chat-edit .field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  min-width: 0;
}
.crm-chat-edit .field > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tx-2);
}
.crm-chat-edit input,
.crm-chat-edit textarea,
.crm-chat-edit soliker-choice {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.crm-chat-edit input {
  height: 38px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--s2);
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.crm-chat-edit textarea {
  min-height: 110px;
  height: auto;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--s2);
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--line-2);
  resize: vertical;
  line-height: 1.4;
  font-family: inherit;
  font-size: 13.5px;
}
.crm-chat-edit small {
  font-size: 11.5px;
  color: var(--tx-3);
  margin-top: 1px;
}
.crm-chat-edit .crm-save-btn {
  margin-top: auto;
  align-self: flex-start;
  min-height: 36px;
  padding: 0 18px;
}
.side-form {
  align-content: start;
}
.qr-body {
  display: grid;
  gap: 16px;
}
.qr-area {
  min-height: 300px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 18px;
}
.qr-area h3 {
  margin: 4px 0 0;
  font-size: 16px;
}
.qr-area p {
  margin: 0;
  color: var(--tx-2);
  font-size: 13.5px;
}
.qr {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.qr-ok,
.qr-wait {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(112, 192, 72, 0.14);
  color: var(--lime);
}
.qr-wait {
  background: var(--s2);
  color: var(--tx-2);
}
.qr-ok .i,
.qr-wait .i {
  width: 26px;
  height: 26px;
}
.grant-list {
  display: grid;
  gap: 2px;
}
.grant {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-radius: 12px;
}
.grant:hover {
  background: var(--s2);
}

/* Administração */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
}
.panel-card {
  border-radius: 18px;
  background: var(--side);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 18px 20px 20px;
  min-width: 0;
}
.panel-card.flat {
  background: var(--bg);
  margin-bottom: 12px;
}
.panel-card.span-2 {
  grid-column: 1 / -1;
}
.panel-card > header {
  margin-bottom: 14px;
}
.panel-card h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 620;
}
.panel-card h3 {
  margin: 0;
  font-size: 15px;
}
.panel-card > header p {
  margin: 4px 0 0;
  color: var(--tx-3);
  font-size: 13px;
}
.team {
  display: grid;
  gap: 2px;
}
.member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 12px;
}
.member:hover {
  background: var(--s1);
}
.member.inactive {
  opacity: 0.55;
}
.you {
  font-size: 12px;
  color: var(--tx-3);
}
.admin-links {
  display: grid;
  gap: 2px;
}
.table-wrap {
  overflow: auto;
  max-height: 420px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table th {
  text-align: left;
  font-weight: 550;
  color: var(--tx-3);
  font-size: 12.5px;
  padding: 6px 10px;
  position: sticky;
  top: 0;
  background: var(--side);
}
.table td {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  color: var(--tx-2);
  vertical-align: top;
}
.table td:first-child {
  white-space: nowrap;
}
.table td small {
  color: var(--tx-3);
}
.admin-content h3 {
  margin: 16px 0 8px;
  font-size: 14px;
}
.memory-text {
  background: var(--bg);
  padding: 10px;
  border-radius: 10px;
  white-space: pre-wrap;
  font-size: 14px;
}
.thread.readonly {
  padding: 8px 22px 22px;
  min-height: 0;
}

/* ---------- Login ---------- */
body.auth-mode {
  overflow-x: hidden;
  overflow-y: auto;
}
.auth {
  height: 100dvh;
  min-height: 560px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  padding: 32px 18px;
  position: relative;
  overflow: clip;
  isolation: isolate;
}
/* O símbolo oficial da Soliker, grande e quase apagado, cortado no canto. */
.auth-horizon {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  right: -9vmin;
  bottom: -14vmin;
  width: 62vmin;
  aspect-ratio: 260 / 284;
  background: url("/static/brand/soliker-simbolo.svg") no-repeat center / contain;
  opacity: 0.07;
}
.auth-card {
  width: min(400px, 100%);
  display: grid;
  gap: 16px;
  padding: 30px 28px 26px;
  border-radius: 22px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow);
  animation: rise 0.5s var(--ease) both;
}
.auth-logo {
  height: 36px;
  width: auto;
  margin-bottom: 8px;
}
.auth-card h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.auth-card > p {
  margin: -8px 0 4px;
  color: var(--tx-2);
  font-size: 14px;
}
.auth-card input {
  height: 42px;
}
.auth-foot {
  margin: 0;
  color: var(--tx-3);
  font-size: 12.5px;
}

/* ---------- Toast ---------- */
/* Pilha de avisos no canto inferior direito, longe do campo de mensagem.
   #toast é o contêiner (role=status). Cada aviso é um .toast-slot, cuja altura anima
   (a pilha cresce na entrada e recolhe na saída); o cartão .toast anima transform, opacity
   e box-shadow. Tempo e curva vêm dos tokens --dur-base e --ease-sharp, com fallback. */
.toast-stack {
  --toast-gap: 8px;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-slot {
  display: flow-root;
  transition: height var(--dur-base, 200ms) var(--ease-sharp, cubic-bezier(0.165, 0.84, 0.44, 1));
}
/* Só durante a saída: corta o cartão enquanto a altura recolhe. Na entrada a sombra fica inteira. */
.toast-slot.is-leaving {
  overflow: hidden;
}
.toast {
  margin-top: var(--toast-gap);
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--s3);
  color: var(--tx);
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    transform var(--dur-base, 200ms) var(--ease-sharp, cubic-bezier(0.165, 0.84, 0.44, 1)),
    opacity var(--dur-base, 200ms) var(--ease-sharp, cubic-bezier(0.165, 0.84, 0.44, 1)),
    box-shadow var(--dur-base, 200ms) var(--ease-sharp, cubic-bezier(0.165, 0.84, 0.44, 1));
}
.toast.show {
  opacity: 1;
  transform: none;
  box-shadow: var(--shadow);
}
.toast.show.has-action {
  pointer-events: auto;
}
.toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  box-shadow: none;
  pointer-events: none;
}
/* No celular o composer ocupa a largura toda: a pilha sobe para acima dele. */
@media (max-width: 600px) {
  .toast-stack {
    right: 12px;
    left: 12px;
    bottom: 92px;
    width: auto;
    max-width: none;
  }
}
.toast.error {
  background: #4a1d20;
  color: #ffdede;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1240px) {
  .shell.panel-open {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
  }
  .shell.panel-open .panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(var(--panel-w), 92vw);
    z-index: 30;
    box-shadow: var(--shadow);
    animation: slide-left var(--dur-drawer) var(--ease-drawer);
  }
}
@keyframes slide-left {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
@media (max-width: 900px) {
  :root {
    --side-w: 300px;
  }
  .shell,
  .shell.panel-open {
    grid-template-columns: minmax(0, 1fr);
  }
  .side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(var(--side-w), 86vw);
    z-index: 35;
    transform: translateX(-102%);
    transition: transform 0.24s var(--ease);
  }
  .shell.side-open .side {
    transform: none;
    box-shadow: var(--shadow);
  }
  .shell.side-open .side-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 34;
    background: rgba(3, 7, 10, 0.55);
  }
  #side-toggle {
    display: inline-grid;
  }
  .thread {
    padding: 66px 14px 20px;
  }
  .dock {
    padding: 0 10px 10px;
  }
  .msg-main,
  .msg.assistant .msg-main {
    max-width: 92%;
  }
  .msg.user .msg-main {
    max-width: 88%;
  }
  /* No toque não há hover lateral: as ações flutuam logo abaixo do balão tocado. */
  .msg .msg-actions,
  .bubble.is-long .msg-actions {
    top: calc(100% + 4px);
    bottom: auto;
    transform: none;
    padding: 2px;
    border-radius: 12px;
    background: var(--s2);
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow);
  }
  .msg.assistant .msg-actions {
    left: 0;
  }
  .msg.user .msg-actions {
    right: 0;
  }
  .msg:hover .msg-actions {
    opacity: 0;
    visibility: hidden;
  }
  /* content-visibility recorta o que passa da caixa da mensagem: a barra aberta precisa escapar. */
  .msg.actions-open,
  .msg:focus-within {
    content-visibility: visible;
  }
  .msg:has(.reactions) .msg-actions {
    top: calc(100% + 28px);
  }
  .msg:focus-within .msg-actions,
  .msg.actions-open .msg-actions,
  .msg-actions:has([aria-expanded="true"]) {
    opacity: 1;
    visibility: visible;
  }
  .page-head,
  .crm-bar,
  .crm-summary,
  .crm-board-wrap,
  .page-scroll {
    padding-left: var(--sp-8);
    padding-right: var(--sp-8);
  }
  /* Alinha o banner de demonstracao com as demais linhas do CRM no celular. */
  .crm-demo-banner {
    margin-left: 14px;
    margin-right: 14px;
  }
  .admin-grid,
  .contact-view,
  .apps-list,
  .field-row,
  .field-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .crm-bar soliker-choice {
    width: calc(50% - 4px);
  }
  .crm-bar .search-input.grow {
    flex-basis: 100%;
  }
  .seg-mini {
    height: auto;
    min-height: 44px;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    flex: none;
  }
  .seg-mini button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .tool span {
    display: none;
  }
  .tool {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .computer-stage {
    padding: 0 8px;
  }
  .modal-card.crm-contact-modal {
    max-height: 85vh;
    height: 85vh;
  }
  .contact-view {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .wa-col {
    flex: none;
    height: auto;
  }
  .wa-thread {
    height: min(44vh, 340px);
    max-height: 340px;
    flex: none;
  }
  .crm-chat-edit {
    overflow-y: visible;
    padding-right: 0;
    flex: none;
  }
}
@media (max-width: 560px) {
  /* Each stage scrolls within the board, never the document. */
  .crm-board-wrap {
    padding-left: 14px;
    padding-right: 14px;
    overflow-x: auto;
    overflow-y: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 14px;
  }
  .crm-board-wrap .board {
    display: flex;
    gap: 12px;
    height: 100%;
    width: max-content;
    min-height: 0;
  }
  .crm-board-wrap .column {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    min-width: calc(100vw - 28px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex: none;
  }

  /* CRM Filtros & Barra Mobile */
  .crm-bar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    padding: 6px 14px 10px;
    width: 100%;
    box-sizing: border-box;
  }
  .crm-bar > soliker-choice {
    width: 100%;
    min-width: 0;
  }
  .crm-bar > .acc-name {
    padding: 2px 0;
    font-size: 14px;
  }
  .crm-bar > .search-input.grow {
    width: 100%;
    min-width: 0;
    flex: none;
  }
  .crm-bar .search-input input {
    height: 44px;
    min-height: 44px;
    font-size: 16px;
  }
  .crm-bar .choice-trigger {
    height: 44px;
    min-height: 44px;
    line-height: 44px;
    padding: 0 30px 0 14px;
    font-size: 13.5px;
  }
  .crm-bar-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .crm-bar-filters soliker-choice {
    width: 100% !important;
    min-width: 0;
  }
  .crm-bar-extra {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
  }
  .crm-bar-extra .tag-input {
    flex: 1 1 100%;
    width: 100% !important;
    min-width: 0;
  }
  .crm-bar-extra .tag-input input {
    height: 44px;
    min-height: 44px;
    font-size: 16px;
  }
  .crm-bar-extra .toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin-right: auto;
  }
  .crm-bar-extra .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .seg-mini {
    height: auto;
    min-height: 44px;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    flex: none;
  }
  .seg-mini button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .crm-bar-extra .btn {
    min-height: 44px;
    padding: 0 14px;
  }

  /* Cabeçalho CRM Mobile & Alvos de Toque */
  .crm .page-head {
    min-height: 52px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .crm .page-head #side-toggle {
    min-width: 44px;
    min-height: 44px;
  }
  .wa-tool-btn {
    min-height: 44px;
    padding: 0 12px;
  }
  .wa-triage-btn .lbl-full {
    display: none;
  }
  .wa-triage-btn .lbl-short {
    display: inline;
  }

  /* Modal de Contato CRM / Conversa WhatsApp */
  .modal-card.crm-contact-modal {
    max-height: 85vh;
    max-height: 85dvh;
    height: 85vh;
    height: 85dvh;
    border-radius: 20px 20px 0 0;
  }
  .modal-card.crm-contact-modal:has(.sheet-chat),
  .modal-card.crm-contact-modal:has(.sheet-edit) {
    max-height: 100dvh;
    height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .crm-card-head .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .crm-card-head {
    padding: 14px 14px 12px;
  }
  .crm-sheet-nav {
    display: flex !important;
    background: var(--s1);
    border-bottom: 1px solid var(--line-2);
    padding: 0 10px;
    gap: 6px;
    flex: none;
  }
  .crm-sheet-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    height: 44px;
    padding: 0 16px;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--tx-2);
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    cursor: pointer;
  }
  .crm-sheet-tab.active {
    color: var(--tx);
    border-bottom-color: var(--lime);
  }
  .contact-view {
    padding: 12px 14px 20px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .contact-view.sheet-chat,
  .contact-view.sheet-edit {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 14px 14px;
    overflow: hidden;
  }
  .contact-view.sheet-chat .wa-col {
    display: flex !important;
    height: 100%;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 10px;
  }
  .contact-view.sheet-chat #chat-edit {
    display: none !important;
  }
  .contact-view.sheet-edit #chat-edit {
    display: flex !important;
    height: 100%;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .contact-view.sheet-edit .wa-col {
    display: none !important;
  }
  .crm-wa-top-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: none;
  }
  .crm-stage-tag {
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--s2);
    color: var(--tx-2);
  }
  .crm-open-edit-btn {
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .crm-edit-back-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-2);
    flex: none;
  }
  .crm-back-chat-btn {
    min-height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
  }
  .crm-edit-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tx-2);
  }
  .contact-view:not(.sheet-chat):not(.sheet-edit) .wa-col {
    flex: none;
  }
  .contact-view:not(.sheet-chat):not(.sheet-edit) .wa-thread {
    height: 250px;
    max-height: 250px;
  }
  .contact-view.sheet-chat .wa-thread {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wa-col .wa-ai-btn {
    min-height: 44px;
    flex: none;
    margin-top: auto;
  }
  .crm-chat-edit {
    width: 100%;
  }
  .crm-chat-edit .crm-save-btn {
    min-height: 44px;
    width: 100%;
    align-self: stretch;
    margin-top: 10px;
  }
  .crm-chat-edit input,
  .crm-chat-edit textarea,
  .crm-chat-edit soliker-choice {
    font-size: 16px;
  }
  .crm-chat-edit input {
    height: 44px;
    min-height: 44px;
  }
  .crm-chat-edit .choice-trigger {
    height: 44px;
    min-height: 44px;
  }

  /* Modais de Conexão WhatsApp & Acessos Mobile */
  .qr-body .row-center {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  .qr-body .row-center button {
    width: 100%;
    min-height: 44px;
  }
  #wa-new-form .row-end {
    flex-direction: column-reverse;
    gap: 10px;
    width: 100%;
  }
  #wa-new-form .row-end button {
    width: 100%;
    min-height: 44px;
  }
  .modal-layer {
    padding: 0;
    align-items: end;
  }
  .modal-card {
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
  }
  .modal-card.size-search {
    margin-top: 0;
    align-self: end;
  }
  .agent-pill {
    height: 42px;
    padding: 0 14px 0 6px;
    gap: 9px;
    max-width: 58%;
  }
  .agent-pill .avatar {
    width: 32px;
    height: 32px;
  }
  .shape-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .computer-title small {
    max-width: 36vw;
  }
  .contact.row {
    grid-template-columns: 1fr;
  }
  .contact.row::after {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Sem escala no press nem no hover de envio: só a cor/fundo muda. */
  .btn:active,
  .send:hover:not(:disabled),
  .send:active:not(:disabled) {
    transform: none;
  }
}

/* ---------- Links: favicon, cartão e prévia ao passar o mouse ---------- */
a.lk {
  display: inline;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 214, 90, 0.35);
  transition: border-color 0.15s;
}
/* Hover suave: o link clareia um pouco e o sublinhado fica cheio, sem trocar de cor de forma brusca. */
a.lk:hover {
  color: #a8e57a;
  border-bottom-color: currentColor;
}
.msg.user a.lk {
  border-bottom-color: color-mix(in srgb, currentColor 45%, transparent);
}
/* No balão verde, o link continua escuro no hover; só o fundo ganha um véu claro. */
.msg.user a.lk:hover {
  color: inherit;
  border-bottom-color: currentColor;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 4px;
}
.lk-ico {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
  border-radius: 4px;
  overflow: hidden;
  color: var(--tx-3);
}
.lk-ico .i {
  width: 13px;
  height: 13px;
}
.lk-ico img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}
.msg.user .lk-ico {
  color: inherit;
  opacity: 0.8;
}
.link-card {
  display: flex;
  gap: 10px;
  margin: 2px -6px 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  max-width: 460px;
}
.msg.assistant .link-card {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.link-card:hover {
  background: rgba(0, 0, 0, 0.26);
}
.lc-img {
  width: 84px;
  height: 84px;
  border-radius: 9px;
  overflow: hidden;
  flex: none;
  background: rgba(0, 0, 0, 0.2);
}
.lc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lc-text {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}
.lc-text strong {
  font-size: 13.5px;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lc-text small {
  font-size: 12.5px;
  opacity: 0.78;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lc-host {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  opacity: 0.7;
  margin-top: 2px;
}
.lc-host img,
.lc-host .i {
  width: 13px;
  height: 13px;
  border-radius: 3px;
}
.link-hover {
  position: fixed;
  z-index: 85;
  border-radius: 14px;
  background: var(--s2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s var(--ease), visibility 0s linear 0.15s;
  pointer-events: auto;
}
.link-hover.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.lh-img {
  aspect-ratio: 1.91 / 1;
  background: var(--bg);
}
.lh-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lh-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 0;
  font-size: 12.5px;
  color: var(--tx-3);
}
.lh-body {
  padding: 6px 14px 12px;
  display: grid;
  gap: 4px;
}
.lh-body strong {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.35;
}
.lh-desc {
  margin: 0;
  font-size: 13px;
  color: var(--tx-2);
  line-height: 1.5;
}
.lh-url {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--tx-3);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Arquivos clicáveis (abrem a prévia) ---------- */
.file-card {
  padding: 4px 4px 4px 4px;
  gap: 2px;
}
.file-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-3);
  border-radius: 10px;
  text-align: left;
  color: inherit;
}
.file-card .icon-btn {
  width: 32px;
  height: 32px;
}
.file-card .icon-btn .i {
  width: 17px;
  height: 17px;
}
button.msg-image {
  padding: 0;
  cursor: zoom-in;
}
.lib-grid button {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--s1);
  padding: 0;
}
.lib-grid button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rb.preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-width: min(320px, 100%);
}
.rb.preview-card:hover {
  background: var(--s2);
}
.rb.preview-card > .i {
  width: 18px;
  height: 18px;
  color: var(--tx-3);
}

/* ---------- Painel de prévia (direita), largura ajustável ---------- */
.preview-pane {
  display: none;
  position: relative;
  flex-direction: column;
  min-height: 0;
  background: var(--side);
  border-left: 1px solid var(--line);
}
.shell.preview-open {
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--preview-w, min(46vw, 760px));
}
.shell.preview-open .panel {
  display: none;
}
.shell.preview-open .preview-pane {
  display: flex;
  animation: slide-left var(--dur-base) var(--ease);
}
.shell.pv-resizing {
  cursor: col-resize;
  user-select: none;
}
.shell.pv-resizing iframe {
  pointer-events: none;
}
.pv-resize {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 3;
}
.pv-resize:hover,
.shell.pv-resizing .pv-resize {
  background: linear-gradient(90deg, transparent 3px, rgba(121, 205, 45, 0.5) 3px 5px, transparent 5px);
}
.pv-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.pv-head .file-badge {
  width: 34px;
  height: 34px;
  font-size: 10px;
}
.pv-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.pv-body > .skeleton-list {
  padding: 16px;
}
.pv-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px 0;
}
.pv-table-wrap {
  flex: 1;
  overflow: auto;
  margin: 10px 14px 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.pv-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 100%;
}
.pv-table th,
.pv-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.pv-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--s2);
  font-weight: 600;
  color: var(--tx);
}
.pv-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pv-table .rn {
  position: sticky;
  left: 0;
  background: var(--s1);
  color: var(--tx-3);
  text-align: right;
  font-size: 11.5px;
  min-width: 38px;
}
.pv-table thead .rn {
  z-index: 2;
  background: var(--s2);
}
.pv-table tbody tr:hover td {
  background: rgba(146, 176, 201, 0.05);
}
.pv-foot {
  margin: 0;
  padding: 8px 16px 12px;
  color: var(--tx-3);
  font-size: 12.5px;
}
.pv-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}
.pv-media {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px;
}
.pv-media img,
.pv-media video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-sm);
}
.pv-media audio {
  width: 100%;
}
.pv-doc {
  padding: 18px 22px 28px;
  max-width: 780px;
}
.pv-code {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tx-2);
  white-space: pre;
  tab-size: 2;
}
.pv-code.plain {
  font-family: var(--font);
  font-size: 14px;
  white-space: pre-wrap;
  color: var(--tx);
}
.pv-empty {
  margin: auto;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  color: var(--tx-2);
  padding: 24px;
}
@media (max-width: 1240px) {
  .shell.preview-open {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
  }
  .shell.preview-open .preview-pane {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(var(--preview-w, 640px), 94vw);
    z-index: 30;
    box-shadow: var(--shadow);
  }
}
@media (max-width: 900px) {
  .shell.preview-open {
    grid-template-columns: minmax(0, 1fr);
  }
  .shell.preview-open .preview-pane {
    width: 100vw;
  }
  .pv-resize {
    display: none;
  }
}

/* ---------- O que a IA está fazendo agora (texto com brilho) ---------- */
.agent-status {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 32px; /* mesma altura do avatar: o texto fica centrado nele */
  padding: 4px 2px 0; /* o avatar tem 2px de respiro em cima; 4px de cima com altura 32 centra o texto */
  font-size: 14px;
  line-height: 20px;
}
.msg.streaming .msg-main {
  gap: 6px;
}
.shimmer {
  background: linear-gradient(90deg, var(--tx-3) 0%, var(--tx-3) 35%, var(--tx) 50%, var(--tx-3) 65%, var(--tx-3) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-text 1.8s linear infinite;
}
@keyframes shimmer-text {
  from {
    background-position: 125% 0;
  }
  to {
    background-position: -125% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shimmer {
    animation: none;
    color: var(--tx-2);
    background: none;
  }
}

/* ---------- Rotinas ---------- */
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-section h3.row-between .icon-btn {
  width: 26px;
  height: 26px;
}
.panel-section h3.row-between .icon-btn .i {
  width: 16px;
  height: 16px;
}
.routine-list {
  display: grid;
  gap: 6px;
}
.routine {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--r);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.routine.off {
  opacity: 0.6;
}
.routine-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  text-align: left;
  border-radius: 10px;
}
.routine-main > .i {
  width: 17px;
  height: 17px;
  color: var(--tx-3);
}
.i.spin {
  animation: spin 1.2s linear infinite;
  color: var(--lime);
}
.modal-foot.spread {
  justify-content: space-between;
}
.row-start {
  display: flex;
  gap: 8px;
}
.segmented.left {
  justify-content: flex-start;
  margin: 0;
}
.day-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.day {
  position: relative;
}
.day input {
  position: absolute;
  opacity: 0;
}
.day span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--tx-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
}
.day input:checked + span {
  background: var(--lime);
  color: #0b1720;
  box-shadow: none;
  font-weight: 600;
}
.day input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Administração: níveis de modelo */
.tiers {
  display: grid;
  gap: 10px;
}
.tier-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.4fr) 150px;
  gap: 10px;
  align-items: center;
}
.tier-row .item-text small {
  white-space: normal;
}
@media (max-width: 900px) {
  .tier-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- Plano em etapas ---------- */
.rb.plan {
  gap: 2px;
  min-width: min(380px, 100%);
}
.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 4px 4px;
  font-weight: 600;
  font-size: 14px;
}
.plan-head small {
  color: var(--tx-3);
  font-weight: 500;
  font-size: 12px;
}
.rb.plan ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.rb.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-2);
  font-size: 14px;
  color: var(--tx-2);
}
.plan-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  margin-top: 1px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.plan-mark .i {
  width: 12px;
  height: 12px;
}
.plan-mark .spinner {
  width: 14px;
  height: 14px;
}
.rb.plan li.st-done {
  color: var(--tx-3);
}
.rb.plan li.st-done .plan-mark {
  background: var(--green);
  color: #0b1720;
  box-shadow: none;
}
.rb.plan li.st-in_progress {
  color: var(--tx);
  font-weight: 550;
}
.rb.plan li.st-in_progress .plan-mark {
  box-shadow: none;
}
.rb.plan li.st-failed {
  color: var(--tx);
}
.rb.plan li.st-failed .plan-mark {
  color: var(--danger);
  box-shadow: inset 0 0 0 1.5px var(--danger);
}
.rb.plan li.st-failed .plan-mark .i {
  width: 10px;
  height: 10px;
}
.rb.plan .plan-reason {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--warn);
}
.plan-live:empty {
  display: none;
}

/* ---------- Conversa entre agentes ---------- */
.thread-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  color: var(--tx-3);
  font-size: 12.5px;
}
.thread-link:hover {
  background: var(--s1);
  color: var(--tx);
}
.thread-link .i {
  width: 14px;
  height: 14px;
}
.role-field {
  width: 100%;
}
.role-field textarea {
  min-height: 74px;
}

/* ---------- Computador no estilo da referência: limpo, desktop em destaque ---------- */
.computer {
  background: #141619;
}
.computer-bar {
  position: relative;
  z-index: 2;
  padding: 8px 12px 6px;
}
.computer-title {
  opacity: 0.85;
}
.computer-title strong {
  font-size: 13px;
}
/* Navegar (Chrome, abas, voltar) só aparece quando você está no controle. */
.computer:not(.human) .tool:not([data-desktop="expand"]):not([data-desktop="close"]),
.computer:not(.human) .bar-sep {
  display: none;
}
/* Tela da VM (1280x800, 16:10) ocupa todo o espaço do palco: sem margem, sem raio, sem sombra
   e sem moldura. O palco é um container, então a caixa do vídeo é o maior 16:10 que cabe nele
   (min(largura, 1,6 x altura)) e o noVNC escala exatamente para essa caixa. */
.computer {
  background: #0d151d;
}
.computer-stage {
  padding: 0;
  container-type: size;
  background: #0d151d;
}
.screen-wrap {
  border-radius: 0;
  box-shadow: none;
  width: min(100cqw, 160cqh);
  height: auto;
  aspect-ratio: 16 / 10;
  background: #0d151d;
}
.computer.human .screen-wrap {
  box-shadow: none;
}
.vnc-host > div {
  background: #0d151d !important;
}
.vnc-host canvas {
  display: block;
  margin: 0 !important;
}
/* Telas largas: o controle fica no centro da barra do topo e o vídeo ganha a altura toda. */
@media (min-width: 700px) {
  .control-pill {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
  }
  .computer {
    grid-template-rows: auto 1fr;
  }
}
.screen-boot {
  background: #141619;
  gap: 16px;
}
.screen-boot p {
  font-size: 15px;
  margin: 0;
}
.screen-boot small {
  color: var(--tx-3);
  font-size: 12.5px;
}
.control-pill {
  margin: 12px 0 16px;
  padding: 4px 4px 4px 12px;
  background: #1f2328;
}
.control-state .i {
  width: 16px;
  height: 16px;
}
#take-control {
  background: #f2f4f6;
  color: #111;
  height: 30px;
  font-weight: 600;
}
.computer.human #take-control {
  background: #2c3239;
  color: var(--tx);
}

/* Status do computador */
.computer-status {
  display: flex;
  align-items: center;
  gap: 7px;
}
.computer-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tx-3);
  transition: background-color 0.3s;
}
.computer-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.computer-tile[data-state="starting"] .computer-dot {
  background: var(--warn);
  animation: computer-pulse 1.1s ease-in-out infinite;
}
.computer-tile[data-state="active"] .computer-dot {
  background: var(--green);
}
.computer-tile[data-state="in_use"] .computer-dot {
  background: var(--green);
  animation: computer-pulse 1.1s ease-in-out infinite;
}
.computer-tile[data-state="in_use"] .computer-label {
  color: var(--tx);
}
.computer-thumb {
  overflow: hidden;
}
.computer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.45) blur(1.5px) saturate(0.7);
  transition: filter 0.4s;
}
.computer-tile[data-state="active"] .computer-thumb img {
  filter: brightness(0.85);
}
.computer-tile[data-state="in_use"] .computer-thumb img,
.computer-tile[data-state="starting"] .computer-thumb img {
  filter: none;
}
.computer-tile[data-state="starting"] .computer-thumb img {
  filter: brightness(0.6) blur(1px);
}
@keyframes computer-pulse {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .computer-dot,
  .computer-thumb img {
    animation: none !important;
    transition: none;
  }
}

/* Menu dos agentes */
.hero-agent {
  position: relative;
  width: 126px;
}
.hero-agent .hero-text {
  display: grid;
  justify-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: visible;
}
.hero-agent .hero-text strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 620;
}
.hero-badge {
  font-style: normal;
  font-size: 11px;
  font-weight: 560;
  line-height: 1;
  padding: 3px 9px;
  border-radius: 99px;
  color: var(--green);
  background: rgba(112, 192, 72, 0.12);
  box-shadow: inset 0 0 0 1px rgba(112, 192, 72, 0.24);
}
.unread-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(112, 192, 72, 0.18);
}
.hero-agent .unread-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: none;
}
.item-marks {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
.item-marks:empty {
  display: none;
}
.agent-pin {
  display: inline-flex;
  color: var(--tx-3);
}
.agent-pin .i {
  width: 14px;
  height: 14px;
}
.agent-item.unread .item-text strong {
  font-weight: 700;
}
.agent-item.unread .item-text small {
  color: var(--tx-2);
}
.agent-item.is-hidden {
  opacity: 0.55;
}
.agent-item.drag-armed {
  background: var(--s2);
  box-shadow: inset 0 0 0 1.5px rgba(112, 192, 72, 0.6);
}
.agent-item.dragging {
  opacity: 0.4;
}
/* Cópia que segue o dedo ou o mouse durante o arraste; não recebe ponteiro (quem recebe é o grupo embaixo).
   Posição é o transform inline (translate); entrada e saída mexem só em opacity e scale, sem layout. */
.agent-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  margin: 0;
  pointer-events: none;
  background: var(--s2);
  box-shadow: var(--shadow);
  opacity: 0.95;
  will-change: transform;
  animation: agent-drag-in var(--dur-fast) var(--ease-sharp) backwards;
}
.agent-drag-ghost.is-leaving {
  animation: agent-drag-out var(--dur-fast) var(--ease-sharp) forwards;
}
@keyframes agent-drag-in {
  from { opacity: 0; scale: 0.96; }
  to { opacity: 0.95; scale: 1; }
}
@keyframes agent-drag-out {
  from { opacity: 0.95; scale: 1; }
  to { opacity: 0; scale: 0.98; }
}
.side-section {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 8px;
  color: var(--tx-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: default;
}
.side-section .i {
  width: 14px;
  height: 14px;
  flex: none;
}
.side-section span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-section[data-section-id]:hover,
.side-section[data-section-id]:focus-visible {
  background: var(--s1);
  color: var(--tx-2);
  outline: none;
}
.side-group {
  border-radius: 12px;
  transition: background var(--dur-fast) var(--ease-sharp), box-shadow var(--dur-fast) var(--ease-sharp);
}
.side-dragging .side-group {
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.side-group.drop-over {
  background: rgba(112, 192, 72, 0.09);
  box-shadow: inset 0 0 0 1.5px rgba(112, 192, 72, 0.6);
}
.side-drop-hint {
  margin: var(--sp-2) var(--sp-4) var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  color: var(--tx-3);
  font-size: 12.5px;
  text-align: center;
}
/* Grupos recolhíveis e filtro da barra lateral: só tokens já existentes (--sp-*, --s1, --tx-*). */
.side-filter {
  margin: 0 var(--sp-4) var(--sp-4);
}
.side-chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 6px;
  color: var(--tx-3);
}
.side-chev .i {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease;
}
.side-group:not(.is-collapsed) .side-chev .i {
  transform: rotate(90deg);
}
.side-chev:hover:not(:disabled),
.side-chev:focus-visible {
  background: var(--s1);
  color: var(--tx-2);
  outline: none;
}
.side-chev:disabled {
  opacity: 0.45;
  cursor: default;
}
.side-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.18s ease, visibility 0.18s;
}
.side-group.is-collapsed .side-group-body {
  grid-template-rows: 0fr;
  visibility: hidden;
}
.side-group-items {
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .side-chev .i,
  .side-group-body {
    transition: none;
  }
}
.side-hidden-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border-radius: 10px;
  color: var(--tx-3);
  font-size: 12.5px;
}
.side-hidden-toggle:hover {
  background: var(--s1);
  color: var(--tx-2);
}
.side-hidden-toggle .i {
  width: 16px;
  height: 16px;
}
.menu-sub-wrap {
  position: relative;
}
.menu .submenu {
  position: absolute;
  left: calc(100% - 2px);
  top: calc(-6px + var(--sub-shift, 0px));
  display: none;
  min-width: 200px;
}
.menu-sub-wrap.open > .submenu {
  display: block;
}
.menu-sub-wrap.flip > .submenu {
  left: auto;
  right: calc(100% - 2px);
}
.menu-item .sub-arrow {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--tx-3);
}
.menu-item.has-sub[aria-expanded="true"] {
  background: var(--s3);
}
.menu-item .menu-check {
  flex: none;
  margin-left: auto;
  color: var(--green);
}
.menu-item:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.menu .menu-item.danger,
.menu .menu-item.danger .i {
  color: #ff6b6b;
}
.toast.has-action {
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}
.toast-action {
  padding: 2px 8px;
  border-radius: 8px;
  color: var(--green);
  font-weight: 650;
}
.toast-action:hover {
  background: rgba(112, 192, 72, 0.14);
}
.copy-buffer {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}

/* Conectores: ícones oficiais das marcas (fundo transparente) e link que não separa do favicon */
.app-icon.brand {
  background: transparent;
  color: inherit;
  position: relative;
}
.app-icon.brand img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  user-select: none;
}
.app-icon.brand.duo img:first-child {
  width: 29px;
  height: 29px;
  position: absolute;
  left: 1px;
  top: 3px;
}
.app-icon.brand.duo img:last-child {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 0;
  bottom: 3px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
}
.soft-tag {
  display: inline-flex;
  gap: 5px;
  font-size: 12px;
  color: var(--tx-3);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.soft-tag > .i {
  width: 13px;
  height: 13px;
  margin-top: calc((1lh - 13px) / 2);
}
.lk-head {
  white-space: nowrap;
}

/* Blocos de código e rascunhos */
.md .md-codebox {
  margin: 0 0 0.7em;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: #070c11;
  overflow: hidden;
}
.md-codehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 3px 6px 3px 12px;
  background: rgba(146, 176, 201, 0.09);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--tx-2);
}
.md-codelang {
  font-weight: 560;
  letter-spacing: 0.01em;
}
.md-codeactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.md-codebtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tx-2);
  font: inherit;
  cursor: pointer;
}
.md-codebtn:hover,
.md-codebtn[aria-pressed="true"] {
  background: rgba(146, 176, 201, 0.14);
  color: var(--tx);
}
.md-codebtn:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}
.md-codebtn .i {
  width: 15px;
  height: 15px;
}
.md-codebtn.is-done {
  color: #6fd3a0;
}
.md-codebtn.is-failed {
  color: var(--danger);
}

/* ---------- Feedback de botões de ação (aud-feedback) ---------- *
 * Estados reusados do botão Copiar do markdown, agora no .btn comum:
 * is-done (sucesso) e is-failed (erro). Em carregamento, o botão fica sem toque e
 * mostra o .spinner já existente no lugar do ícone, sem inventar componente novo.
 * Escala de espaçamento 2px (4/6/8/10/12), alinhada aos valores já usados no app.
 */
.btn.is-done,
.btn.ghost.is-done {
  color: #6fd3a0;
  box-shadow: inset 0 0 0 1px rgba(111, 211, 160, 0.4);
}
.btn.is-failed,
.btn.ghost.is-failed {
  color: var(--danger);
  box-shadow: inset 0 0 0 1px rgba(239, 107, 107, 0.4);
}
.btn.primary.danger.is-failed,
.btn.danger.is-failed {
  background: #5a1f22;
}
.btn.loading {
  pointer-events: none;
}
.btn.loading .spinner {
  width: 15px;
  height: 15px;
}
.btn.sm.loading .spinner {
  width: 13px;
  height: 13px;
}
.md .md-codebox pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: pre;
}
.md .md-codebox.is-wrap pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.md .md-codebox.is-prose pre,
.md .md-codebox.is-prose pre code {
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Rascunho de e-mail */
.email-drafts {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 24px 24px;
  display: grid;
  gap: 14px;
  width: 100%;
}
.email-drafts:empty {
  display: none;
}
.email-draft {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  border-radius: var(--r-lg);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  animation: rise 0.35s var(--ease) both;
}
.email-draft[data-state="pending"] {
  box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.32);
}
.email-draft[data-state="done"] {
  box-shadow: inset 0 0 0 1px rgba(112, 192, 72, 0.34);
}
.email-draft[data-state="error"] {
  box-shadow: inset 0 0 0 1px rgba(239, 107, 107, 0.4);
}
.email-draft > header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
}
.email-draft > header .i {
  width: 18px;
  height: 18px;
  color: var(--tx-2);
}
.email-badge {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--s3);
  color: var(--tx-2);
}
.email-badge.wait {
  background: rgba(242, 201, 76, 0.12);
  color: #f3dc94;
}
.email-badge.ok {
  background: rgba(112, 192, 72, 0.14);
  color: #9be05a;
}
.email-badge.bad {
  background: rgba(239, 107, 107, 0.14);
  color: #ff9a9a;
}
.email-form {
  display: grid;
  gap: 8px;
}
.email-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.email-k {
  font-size: 12.5px;
  color: var(--tx-3);
  font-weight: 550;
}
.email-from {
  font-size: 14px;
  color: var(--tx);
}
.email-from small {
  color: var(--tx-3);
  font-size: 12px;
}
.email-form input:not([type="checkbox"]):not([type="file"]) {
  background: transparent;
  border-color: transparent;
  padding: 6px 8px;
  margin: -6px -8px;
  width: calc(100% + 16px);
  font-size: 14px;
}
.email-form input:not([type="checkbox"]):not([type="file"]):hover {
  background: var(--s2);
}
.email-form input:not([type="checkbox"]):not([type="file"]):focus {
  background: var(--s2);
  border-color: rgba(121, 205, 45, 0.6);
}
.email-body textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.55;
  font-size: 14.5px;
  background: var(--bg);
}
.email-body .sr-only,
.email-draft .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.email-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.email-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--s3);
  color: var(--tx-2);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.email-file .i {
  width: 14px;
  height: 14px;
  flex: none;
}
.email-note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--tx-3);
}
.email-note .i {
  width: 15px;
  height: 15px;
  color: var(--warn);
  flex: none;
}
.email-result {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #9be05a;
}
.email-result.bad {
  color: #ff9a9a;
}
.email-result .i {
  width: 18px;
  height: 18px;
  flex: none;
}
.email-sum {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  font-size: 13px;
}
.email-sum dt {
  color: var(--tx-3);
}
.email-sum dd {
  margin: 0;
  color: var(--tx-2);
  overflow-wrap: anywhere;
}
.email-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 180px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--tx-2);
  font-size: 13.5px;
  line-height: 1.5;
}
.email-draft .row-end {
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .email-drafts {
    padding: 0 12px 16px;
  }
  .email-row {
    grid-template-columns: 54px minmax(0, 1fr);
  }
  .email-draft .row-end .btn {
    flex: 1 1 auto;
  }
}
/* Com rascunhos de e-mail abertos, eles ficam logo abaixo da última mensagem. */
.scroller:has(.email-drafts > *) {
  display: flex;
  flex-direction: column;
}
.scroller:has(.email-drafts > *) > .thread {
  flex: 1 0 auto;
  min-height: 0;
}
.scroller:has(.email-drafts > *) > .email-drafts {
  flex: none;
}

/* Seletor de emoji */
/* Proporções tiradas da referência (vídeo do Grok, escala 1,5x): fileira rápida em pílula de 44 px,
   painel de 296 x 318 px com busca, grade de 8 colunas (células de 34 px), prévia no rodapé. */
.emoji-pop {
  --ec: 34px;
  position: fixed;
  z-index: 90;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font);
}
.emoji-pop[data-mode="quick"] .emoji-full,
.emoji-pop[data-mode="full"] .emoji-quick {
  display: none;
}
.emoji-quick,
.emoji-full {
  animation: emoji-in 0.16s var(--ease);
  transform-origin: top left;
}
@keyframes emoji-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
.emoji-quick {
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--s2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.emoji-q {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--tx-2);
  transition: background 0.12s;
}
.emoji-q:hover,
.emoji-q:focus-visible {
  background: var(--s3);
}
.emoji-q.emoji-more .i {
  width: 20px;
  height: 20px;
}
.emoji-q.emoji-more:hover,
.emoji-q.emoji-more:focus-visible {
  color: var(--tx);
}
.emoji-full {
  display: flex;
  flex-direction: column;
  width: 296px;
  height: 318px;
  border-radius: var(--r);
  background: var(--s2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.emoji-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--tx-3);
}
.emoji-search .i {
  width: 16px;
  height: 16px;
}
.emoji-pop .emoji-search input[type="text"],
.emoji-pop .emoji-search input[type="text"]:focus,
.emoji-pop .emoji-search input[type="text"]:focus-visible {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: none;
  color: var(--tx);
  font: 400 14px/1 var(--font);
}
.emoji-search input::placeholder {
  color: var(--tx-2);
  opacity: 0.85;
}
.emoji-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--s4) transparent;
}
.emoji-title {
  margin: 0;
  padding: 12px 2px 6px;
  color: var(--tx-3);
  font: 500 12px/16px var(--font);
}
.emoji-chunk:not(.ready) {
  height: calc(var(--rows) * var(--ec));
}
.emoji-row {
  display: grid;
  grid-template-columns: repeat(8, var(--ec));
  height: var(--ec);
}
.emoji-c {
  width: var(--ec);
  height: var(--ec);
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  font-size: 22px;
  line-height: 1;
  color: var(--tx);
  cursor: pointer;
}
.emoji-c.on {
  background: var(--s3);
}
.emoji-load {
  padding: 28px 12px;
  color: var(--tx-3);
  font: 400 13px/1.4 var(--font);
  text-align: center;
}
.emoji-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  font: 400 11.5px/1 var(--font);
  color: var(--tx-3);
}
.emoji-pv {
  flex: none;
  width: 20px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}
.emoji-pn {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--tx);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emoji-hint {
  flex: 0 100 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .emoji-quick,
  .emoji-full {
    animation: none;
  }
  .ai-reaction.is-new .ai-reaction-emoji {
    animation: none;
  }
  .reactions button:active {
    transform: none;
  }
}
@media (max-width: 600px) {
  .emoji-pop.is-sheet {
    --ec: calc((100vw - 24px) / 8);
    inset: auto 0 0 0;
    max-height: 70vh;
  }
  .emoji-pop.is-sheet .emoji-full {
    width: 100%;
    height: min(440px, 70vh);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
    transform-origin: bottom center;
    animation: emoji-sheet 0.2s var(--ease);
  }
  .emoji-pop.is-sheet .emoji-row {
    grid-template-columns: repeat(8, 1fr);
  }
  .emoji-pop.is-sheet .emoji-c {
    width: 100%;
    font-size: 26px;
  }
  .emoji-pop.is-sheet .emoji-search {
    height: 48px;
  }
  .emoji-pop.is-sheet .emoji-search input[type="text"] {
    font-size: 16px;
  }
  .emoji-pop.is-sheet .emoji-foot {
    height: 40px;
  }
}
@keyframes emoji-sheet {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

/* Conexão de aplicativos */
.oauth-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
}
.oauth-note.ok {
  background: rgba(112, 192, 72, 0.14);
  border: 1px solid rgba(112, 192, 72, 0.4);
  color: var(--green);
}
.oauth-note.err {
  background: rgba(239, 107, 107, 0.12);
  border: 1px solid rgba(239, 107, 107, 0.4);
  color: var(--danger);
}
.item-text small .spinner {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  display: inline-block;
}
.oauth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--tx);
}
.oauth-card {
  width: min(420px, 100%);
  text-align: center;
  padding: 32px 28px;
  border-radius: var(--r-lg);
  background: var(--s1);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
}
.oauth-logo {
  height: 28px;
  margin-bottom: 20px;
}
.oauth-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 700;
}
.oauth-icon.ok {
  background: rgba(112, 192, 72, 0.16);
  color: var(--green);
}
.oauth-icon.err {
  background: rgba(239, 107, 107, 0.14);
  color: var(--danger);
}
.oauth-card h1 {
  margin: 0 0 6px;
  font-size: 22px;
}
.oauth-card p {
  margin: 0;
  color: var(--tx-2);
}
.oauth-small {
  margin-top: 12px !important;
  font-size: 13px;
  color: var(--tx-3) !important;
}
.key-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--tx-2);
  font-size: 14px;
}
.key-steps strong {
  color: var(--tx);
}
.key-steps code {
  font-family: var(--mono);
  color: var(--tx);
}
.key-open {
  justify-self: start;
  text-decoration: none;
}
.key-paste {
  justify-self: start;
}
.key-paste.ready {
  border-color: var(--green);
  color: var(--green);
}

/* Menções */
.composer {
  position: relative;
}
.mention-pop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  max-height: min(340px, 52vh);
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: var(--s2);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 30;
}
.mention-pop[hidden] {
  display: none;
}
.mention-head {
  margin: 6px 8px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.mention-head:first-child {
  margin-top: 2px;
}
.mention-empty {
  margin: 10px 12px;
  font-size: 13.5px;
  color: var(--tx-3);
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.mention-item.active {
  background: var(--s4);
}
.mention-item .mi-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
}
.mention-item .mi-ico .avatar {
  width: 26px;
  height: 26px;
}
.mention-item .file-badge {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 8.5px;
}
.mention-item .mc-brand img {
  width: 22px;
  height: 22px;
}
.mention-item .mc-brand img + img {
  display: none;
}
.mention-item .mi-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mention-item small {
  flex: none;
  font-size: 12px;
  color: var(--tx-3);
}
.mention-item.is-off .mi-ico {
  opacity: 0.55;
}
.mention-item.is-off small {
  color: var(--warn);
}

/* Chip dentro do texto: mesmo desenho dos links com favicon, mas em pílula. */
.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 100%;
  margin: 0 var(--sp-1);
  padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-2);
  border: 0;
  border-radius: 999px;
  /* Centro do chip no meio da linha de texto; altura menor que a linha para não empurrá-la. */
  vertical-align: middle;
  position: relative;
  top: -0.08em;
  background: color-mix(in srgb, var(--lime) 10%, var(--s2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 22%, transparent);
  color: var(--tx);
  font: inherit;
  font-size: 0.92em;
  font-weight: 560;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.mention-chip:hover {
  background: color-mix(in srgb, var(--lime) 26%, var(--s3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 55%, transparent);
}
.mention-chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.mention-chip .avatar,
.mention-chip .avatar.xs {
  width: 18px;
  height: 18px;
  flex: none;
}
.mention-chip .mc-brand {
  display: inline-flex;
  flex: none;
}
.mention-chip .mc-brand img {
  width: 16px;
  height: 16px;
  display: block;
}
.mention-chip .mc-brand img + img {
  margin-left: -4px;
}
.mention-chip .mc-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--s4);
  font-size: 10px;
  font-weight: 700;
}
.mention-chip .file-badge {
  width: auto;
  height: 16px;
  min-width: 24px;
  padding: 0 4px;
  border-radius: 5px;
  font-size: 8.5px;
  line-height: 16px;
}
.mention-chip .mc-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Balão verde do usuário: vidro claro sobre o verde, texto escuro (como menção em app de mensagem). */
.msg.user .mention-chip {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 0 0 1px rgba(11, 23, 32, 0.1);
  color: var(--on-tone, #0b1720);
}
.msg.user .mention-chip:hover {
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(11, 23, 32, 0.2);
}
@media (max-width: 640px) {
  .mention-pop {
    max-height: 46vh;
  }
}

/* Respostas com vários trechos */
.excerpt-action kbd {
  padding: var(--sp-1) var(--sp-3);
  border-radius: 6px;
  background: var(--s2);
  color: var(--tx-2);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
}
.reply-preview {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 4px 4px 4px 12px;
}
.reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--sp-2) var(--sp-3) var(--sp-1) 0;
  font-size: 12px;
  color: var(--tx-2);
}
.reply-head b {
  font-weight: 600;
}
.reply-clear-all {
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--tx-2);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reply-clear-all:hover {
  color: var(--tx);
}
.reply-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.reply-open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: var(--sp-2) 0;
  color: inherit;
  text-align: left;
}
.reply-open > .i {
  flex: none;
  width: 15px;
  height: 15px;
}
.reply-open > span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-open:hover {
  color: var(--tx);
}
.reply-item .icon-btn {
  flex: none;
}
.quotes {
  margin: 2px 0 6px;
}
.quotes .quote {
  margin: 0 0 4px;
}
.quotes-more[hidden] {
  display: none;
}
.quotes-toggle {
  padding: 0 0 0 10px;
  color: inherit;
  font-size: 13px;
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.quotes-toggle:hover {
  opacity: 1;
}

/* Eventos e cartão de e-mail */
.msg.notice.event {
  margin: 10px 0 2px;
}
.msg.notice .event-line {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 7px;
  align-items: center;
  justify-content: center;
  margin: 0;
  max-width: 560px;
  color: var(--tx-3);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
}
.msg.notice .event-line .i,
.msg.notice.event .thread-link .i {
  width: 14px;
  height: 14px;
  color: var(--tx-3);
}
.event-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--tx-2);
  font-weight: 600;
}
.msg.notice .event-chip .i {
  width: 13px;
  height: 13px;
  color: var(--tx-3);
}
.ev-routine_deleted .event-chip {
  text-decoration: line-through;
  text-decoration-color: var(--tx-3);
}
.msg.notice.event .thread-link {
  max-width: 100%;
}
.msg.notice.event .thread-link .event-name {
  color: var(--tx-2);
  font-weight: 600;
}
.msg.notice.ev-email_sent {
  margin: 12px 0 4px;
}
.mail-card {
  width: min(100%, 560px);
  overflow: hidden;
  border-radius: var(--r);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  text-align: left;
}
.mail-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  color: var(--tx-2);
  font-size: 13px;
  text-align: left;
}
.mail-card-head:hover {
  background: var(--s2);
}
.mail-card-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.msg.notice .mail-card-head > .i,
.email-draft .mail-card-head > .i {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--tx-3);
}
.mail-card-line {
  display: flex;
  flex: 1;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.mail-card-line b {
  color: var(--tx);
  font-weight: 600;
}
.mail-card-line i {
  color: var(--tx-3);
  font-style: normal;
}
.msg.notice .mail-card span,
.email-draft .mail-card span {
  display: inline;
  max-width: none;
  color: var(--tx-3);
  font-size: inherit;
  text-align: left;
}
.msg.notice .mail-card .mail-card-to,
.email-draft .mail-card .mail-card-to {
  min-width: 0;
  overflow: hidden;
  color: var(--tx-2);
  text-overflow: ellipsis;
}
.msg.notice .mail-card .mail-chev,
.email-draft .mail-card .mail-chev {
  transition: transform 0.18s var(--ease);
}
.mail-card.open .mail-chev {
  transform: rotate(180deg);
}
.mail-card-body {
  padding: 2px 16px 14px;
  border-top: 1px solid var(--line);
}
.mail-card-body[hidden] {
  display: none;
}
.mail-card-body h4 {
  margin: 12px 0 8px;
  color: var(--tx);
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mail-card-body dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-7);
  margin: 0 0 10px;
  font-size: 12.5px;
}
.mail-card-body dt {
  color: var(--tx-3);
}
.mail-card-body dd {
  margin: 0;
  color: var(--tx-2);
  overflow-wrap: anywhere;
}
.mail-card-text {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--tx);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mail-card-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.mail-card-files em {
  display: inline-flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-5);
  border-radius: 999px;
  background: var(--s2);
  color: var(--tx-2);
  font-size: 12px;
  font-style: normal;
}
.mail-card-files .i {
  width: 13px;
  height: 13px;
}
.mail-card-meta {
  margin: 10px 0 0;
  color: var(--tx-3);
  font-size: 12px;
}
.email-draft[data-state="done"] {
  padding: 0;
  background: none;
  box-shadow: none;
  animation: none;
}
.email-draft[data-state="done"] .mail-card {
  margin: 0 auto;
}
.upcoming .routine .item-text small {
  white-space: normal;
}
@media (max-width: 640px) {
  .mail-card-body {
    padding: 2px 12px 12px;
  }
  .mail-card-body dl {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mail-card-body dd {
    margin-bottom: 4px;
  }
}
.msg.notice .mail-card .mail-card-line,
.email-draft .mail-card .mail-card-line {
  display: flex;
}

/* Zoom de imagem */
.pv-body.kind-image {
  overflow: hidden;
}
.pv-media.pv-zoom {
  display: flex;
  min-height: 0;
  padding: 0;
}
.lb-body:has(.lb-zoom) {
  display: flex;
  overflow: hidden;
}
.lb-zoom {
  flex: 1;
  align-self: stretch;
  display: flex;
  min-width: 0;
  min-height: 0;
}
.zm {
  position: relative;
  flex: 1;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-sm);
}
.zm:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}
.zm-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.zm.is-zoomed .zm-view {
  cursor: grab;
}
.zm.is-zoomed.is-grab .zm-view {
  cursor: grabbing;
}
.zm .zm-img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  border-radius: var(--r-sm);
  pointer-events: none;
  -webkit-user-drag: none;
  transform: translate3d(var(--zm-x, 0px), var(--zm-y, 0px), 0) scale(var(--zm-z, 1));
  transform-origin: 50% 50%;
  will-change: transform;
  transition:
    transform 0.18s var(--ease),
    opacity 0.14s;
}
.zm.is-live .zm-img {
  transition: opacity 0.14s;
}
.zm-bar {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(12, 20, 28, 0.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0.88;
  transition: opacity 0.15s;
}
.zm:hover .zm-bar,
.zm:focus-within .zm-bar {
  opacity: 1;
}
.zm-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.12s,
    opacity 0.12s;
}
.zm-btn:hover {
  background: var(--s4);
}
.zm-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
.zm-btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: default;
  background: transparent;
}
.zm-pct {
  min-width: 52px;
  padding: 0 6px;
}
.zm-sep {
  width: 1px;
  height: 16px;
  margin: 0 2px;
  background: var(--line-2);
}
.zm-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (pointer: coarse) {
  .zm-btn {
    min-width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zm .zm-img {
    transition: opacity 0.14s;
  }
}

/* Mobile layout contract: visual viewport, safe areas and 44px touch targets.
   Keep desktop geometry unchanged; image gestures belong to .zm-view. */
@media (max-width: 900px) {
  html {
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-bottom: 24px;
  }
  body { overscroll-behavior-y: none; }
  /* 16px prevents Safari's focus zoom, including fields inside dialogs. */
  :root input, :root input.name-input, :root textarea, :root select, :root [contenteditable]:not([contenteditable="false"]) {
    font-size: 16px !important;
    min-width: 0;
    max-width: 100%;
    scroll-margin-block: 24px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  select, .choice-trigger { min-height: 44px; }
  button, a.btn, .toggle, .day, .choice-popover [role="option"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .icon-btn, .composer-row .icon-btn, .send, .tool, .zm-btn,
  .msg-actions button, .attachment-chip .icon-btn, .reply-item .icon-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .shell {
    position: fixed;
    top: var(--mobile-top, 0px);
    left: 0;
    right: 0;
    height: var(--mobile-height, 100dvh);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .side, .shell.panel-open .panel, .shell.preview-open .preview-pane,
  .computer, .lightbox, .modal-layer, .confirm-layer {
    top: var(--mobile-top, 0px);
    bottom: auto;
    height: var(--mobile-height, 100dvh);
    max-height: var(--mobile-height, 100dvh);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .side { padding-left: env(safe-area-inset-left); }
  .shell.panel-open .panel, .shell.preview-open .preview-pane {
    width: min(440px, 100%);
    max-width: 100%;
    padding-right: env(safe-area-inset-right);
  }
  .shell.preview-open .preview-pane { width: 100%; }
  .chat-head {
    height: calc(64px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .chat-head #side-toggle { top: calc(10px + env(safe-area-inset-top)); }
  .thread { padding-top: calc(74px + env(safe-area-inset-top)); }
  .dock {
    flex-shrink: 0;
    padding: 0 8px max(8px, env(safe-area-inset-bottom));
  }
  .composer-row { gap: 2px; }
  #prompt {
    min-height: 44px;
    max-height: min(160px, 30dvh, calc(var(--mobile-height, 100dvh) * .3));
    line-height: 24px;
    padding: 10px 4px !important;
  }
  .msg-main, .msg.assistant .msg-main { max-width: calc(100% - 36px); }
  .msg.user .msg-main { max-width: 94%; }
  .msg.actions-open, .msg:focus-within { padding-bottom: 52px; }
  .msg .msg-actions { max-width: calc(100vw - 32px); }
  .md .md-table, .md .md-codebox { max-width: 100%; }
  .md table { min-width: 480px; }
  .md th, .md td { overflow-wrap: normal; word-break: normal; }
  .attachment-chip { max-width: 100%; min-width: 0; }
  .tray { max-height: min(180px, calc(var(--mobile-height, 100dvh) * .25)); overflow-y: auto; }
  .chip-open, .reply-open, .mention-chip { min-width: 0; }
  .mention-chip { min-height: 44px; white-space: normal; }
  .mention-chip .mc-name { overflow-wrap: anywhere; white-space: normal; }
  .mention-pop {
    max-height: min(340px, calc(var(--mobile-height, 100dvh) * .45));
    overscroll-behavior: contain;
  }
  .page-title { min-width: 0; overflow-wrap: anywhere; }
  .page-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .page-tools, .modal-foot, .row-start, .row-end { flex-wrap: wrap; }
  .page-scroll { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .panel-card, .field, .field-row > *, .field-grid > * { min-width: 0; }
  .panel-card.span-2 { grid-column: auto; }
  .app-row { flex-wrap: wrap; }
  .app-row .item-text { flex: 1; min-width: 120px; }
  .app-row .item-text small { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .app-actions { margin-left: auto; flex-wrap: wrap; }
  .modal-layer { padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  .modal-card, .modal-card.size-search {
    max-height: calc(var(--mobile-height, 100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    margin-top: 0;
  }
  .modal-head, .modal-foot { flex-shrink: 0; }
  .modal-head { padding: var(--sp-6) var(--sp-8) var(--sp-4); }
  .modal-body { min-height: 0; padding-inline: var(--sp-8); overscroll-behavior: contain; }
  .day span { height: 44px; }
  .toggle input { width: 100%; height: 100%; }
  .color-grid { grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 12px; padding-bottom: 12px; }
  .color-opt { width: 44px; height: 44px; }
  .menu, .choice-popover {
    max-width: calc(100vw - 24px);
    max-height: calc(var(--mobile-height, 100dvh) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .menu .submenu { position: static; margin: 4px 0 4px 12px; min-width: 0; box-shadow: none; }
  .emoji-pop { --ec: 44px; max-width: calc(100vw - 16px); }
  .emoji-quick { height: 54px; max-width: calc(100vw - 16px); overflow-x: auto; }
  .emoji-q { width: 44px; height: 44px; flex-shrink: 0; }
  .emoji-full { width: 332px; max-height: calc(var(--mobile-height, 100dvh) - 24px); }
  .emoji-row { grid-template-columns: repeat(7, var(--ec)); }
  .emoji-search { min-height: 48px; }
  .emoji-pop.is-sheet {
    --ec: max(44px, calc((100vw - 24px) / 7));
    top: auto;
    bottom: calc(100dvh - var(--mobile-height, 100dvh) - var(--mobile-top, 0px));
    max-width: 100%;
    max-height: calc(var(--mobile-height, 100dvh) * .7);
  }
  .emoji-pop.is-sheet .emoji-full { height: min(440px, calc(var(--mobile-height, 100dvh) * .7)); }
  .emoji-pop.is-sheet .emoji-row { grid-template-columns: repeat(7, 1fr); }
  .lb-stage { min-width: 0; min-height: 0; }
  .lb-head, .pv-head { gap: 4px; padding-inline: 8px; }
  .lb-head .item-text, .pv-head .item-text { min-width: 0; }
  .lb-btn span { display: none; }
  .lb-body { min-height: 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .zm-view { touch-action: none; }
  .zm-bar { max-width: calc(100% - 16px); opacity: 1; }
  .computer { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .computer-bar { flex-wrap: wrap; gap: 4px; }
  .computer-title { min-width: 0; flex: 1; }
  .computer-title > span { min-width: 0; }
  .computer-tools { flex-wrap: wrap; gap: 2px; }
  .computer.human .computer-tools { width: 100%; justify-content: flex-end; }
  .computer-tools .bar-sep { display: none; }
  .computer .control-pill {
    position: static;
    transform: none;
    justify-self: center;
    max-width: calc(100% - 16px);
    margin-block: 6px;
    flex-wrap: wrap;
  }
  .url-bar { min-width: 0; }
  .auth {
    height: auto;
    min-height: var(--mobile-height, 100dvh);
    padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .auth-card { padding: 24px; }
  .auth-foot { text-align: center; }
  .toast-stack {
    top: calc(var(--mobile-top, 0px) + env(safe-area-inset-top) + 72px);
    bottom: auto;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    max-height: calc(var(--mobile-height, 100dvh) * .3);
    overflow-y: auto;
    overflow-wrap: anywhere;
  }
  .toast-action { flex-shrink: 0; white-space: nowrap; }
}

@media (max-width: 560px) {
  .page-title { flex-basis: calc(100% - 64px); }
  .page-tools { width: 100%; }
  .modal-layer { padding-inline: 0; }
  .modal-card { border-bottom: 0; }
  .computer.human .computer-tools { justify-content: space-between; }
}

@media (hover: none) and (max-width: 900px) {
  .item-actions, .agent-item .item-actions, .conv-item .item-actions { opacity: 1; visibility: visible; }
  .panel-avatar .edit-dot { opacity: 1; }
}

/* Conversation chronology: each day owns its sticky pill. Only opacity changes
   while scrolling; timestamps and fading never change message geometry. */
.scroller { --day-sticky-top: 64px; overflow-anchor: none; }
.timeline-day { display: flow-root; min-width: 0; }
.timeline-day > .day-sep {
  position: sticky;
  top: var(--day-sticky-top);
  z-index: 4;
  display: flex;
  justify-content: center;
  margin: 16px 0 12px;
  height: 28px;
  pointer-events: none;
}
.day-sep time {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--s2) 94%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 550;
  backdrop-filter: blur(10px);
  transition: opacity .24s ease;
}
.day-sep.is-pinned time { opacity: 0; }
.timeline-scrolling .day-sep.is-pinned time { opacity: 1; }
.time-sep { margin: 22px 0 12px; text-align: center; font-size: 11px; color: var(--tx-3); opacity: .65; }
.timeline-day .msg { content-visibility: visible; contain-intrinsic-size: none; position: relative; margin-bottom: 14px; }
.message-time {
  position: absolute;
  bottom: 15px;
  color: var(--tx-3);
  font: 11px/14px var(--font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.72;
  pointer-events: none;
  transition: opacity .12s;
  user-select: none;
}
.msg.assistant .bubble > .message-time {
  left: calc(100% + 8px);
  right: auto;
}
.msg.user .bubble > .message-time {
  right: calc(100% + 8px);
  left: auto;
}
.bubble.is-long.collapsed > .message-time {
  bottom: 13px;
}
.msg:hover .message-time,
.msg:focus-within .message-time,
.msg.actions-open .message-time {
  opacity: 1;
}
.msg.notice > .message-time {
  top: auto;
  bottom: -12px;
  right: 12px;
  left: auto;
}
.msg.assistant > .msg-main > .message-time {
  left: calc(100% + 8px);
  right: auto;
  bottom: 4px;
}
.msg.user > .msg-main > .message-time {
  right: calc(100% + 8px);
  left: auto;
  bottom: 4px;
}
@media (max-width: 767px) {
  .bubble {
    display: block;
  }
  .bubble::after {
    content: "";
    display: table;
    clear: both;
  }
  .bubble .md {
    display: inline;
  }
  .bubble .md > p:last-child {
    display: inline;
  }
  .msg.user .bubble > .message-time,
  .msg.assistant .bubble > .message-time,
  .bubble > .message-time {
    position: relative;
    float: right;
    display: inline-flex;
    align-items: center;
    bottom: auto;
    left: auto;
    right: auto;
    top: auto;
    margin-left: 8px;
    margin-top: 4px;
    margin-bottom: -2px;
    font: 10.5px/14px var(--font);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    pointer-events: none;
  }
  .msg.user .bubble > .message-time {
    color: rgba(11, 23, 32, 0.65);
  }
  .msg.assistant .bubble > .message-time {
    color: var(--tx-3);
  }
}
.history-loading p { margin: 0; font-size: 13px; color: var(--tx-3); }
.chat .send, .chat .agent-pill { transition-duration: var(--dur-fast); }
/* Sem lista, transition-property seria "all" e a bolha animaria visibility: o balão escondido
   durante o voo do envio continuaria visível por 0,1 s. */
.chat .msg.user .bubble { transition-property: opacity, background-color, color, border-color, box-shadow; transition-duration: var(--dur-fast); }
@media (max-width: 900px) {
  .scroller { --day-sticky-top: calc(68px + env(safe-area-inset-top)); }
}
@media (hover: none) {
  .msg:hover .message-time { opacity: 0; }
  .msg.actions-open .message-time, .msg:focus-within .message-time { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .day-sep time, .message-time { transition: none; }
}

.source-citation {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin: 2px 3px 2px 0;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--s2) 70%, transparent);
  color: var(--tx-3);
  font: 11px/1.4 var(--font);
  text-align: left;
  vertical-align: middle;
}
.source-symbol { display: inline-flex; flex-shrink: 0; align-items: center; }
.source-symbol img, .source-symbol .i { width: 14px; height: 14px; }
.source-text { min-width: 0; overflow-wrap: anywhere; }
a.source-citation, button.source-citation { color: var(--tx-2); cursor: pointer; text-decoration: none; }
a.source-citation:hover, a.source-citation:focus-visible, button.source-citation:hover, button.source-citation:focus-visible { background: var(--s3); border-color: var(--line-2); color: var(--tx); }
a.source-citation.is-link:hover .source-text { text-decoration: underline; }

/* Connector suggestions inside assistant messages. */
.connectors-card { width: min(100%, 620px); padding: 18px; }
.connectors-card .connectors-reason { margin: 0 0 12px; color: var(--tx-2); line-height: 1.5; }
.connectors-card .connector-card-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-radius: 0; }
.connectors-card .connector-card-row + .connector-card-row { border-top: 1px solid var(--line); }
.connectors-card .item-text { min-width: 0; flex: 1; }
.connectors-card .item-text small { display: block; line-height: 1.5; }
.connectors-card .connector-state { display: inline-block; font-size: 12px; color: var(--tx-2); margin: 3px 0; }
.connectors-card .connector-state.on { color: var(--green); }
.connectors-card .app-actions { flex-shrink: 0; padding-top: 4px; }
@media (max-width: 540px) {
  .connectors-card { padding: 12px; }
  .connectors-card .connector-card-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
  .connectors-card .item-text h3 { white-space: normal; }
  .connectors-card .app-actions { grid-column: 2; margin-left: 0; padding-top: 0; }
}

/* Excluídos (barra lateral): recolhido, restaurável. */
.side-deleted-list {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}
.agent-item.is-deleted {
  cursor: default;
  opacity: 0.8;
}
.agent-item.is-deleted > .btn {
  flex: none;
  margin-left: auto;
}

/* Cartão de rotina na conversa: compacto, mesmo fundo dos cartões do chat. */
.routine-event {
  display: grid;
  gap: 4px;
  /* Mesma coluna do cartão de arquivo (220–320 px), para o chat ter uma só largura de cartão. */
  width: min(100%, 320px);
  min-width: min(100%, 220px);
}
.routine-event .routine-card {
  width: 100%;
}
.routine-event-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tx-3);
  font-size: 12px;
}
.routine-event-label .i {
  width: 14px;
  height: 14px;
}
.routine-card {
  width: min(100%, 560px);
  border-radius: var(--r);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}
.routine-card.off {
  opacity: 0.7;
}
.routine-card-main {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  color: var(--tx);
}
.routine-card-main:hover {
  background: var(--s2);
}
.routine-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.routine-card-head strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.routine-card-icon .i {
  width: 16px;
  height: 16px;
  color: var(--tx-3);
}
.routine-card-state {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--s2);
  color: var(--tx-2);
  font-size: 11.5px;
}
.routine-card.on .routine-card-state {
  color: var(--ok, #7fd1a6);
}
.routine-card-what {
  color: var(--tx-2);
  font-size: 13px;
  line-height: 1.4;
}
.routine-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--tx-3);
  font-size: 12px;
}
.memory-shared h4,
.memory-own-title {
  margin: 10px 0 6px;
  color: var(--tx-3);
  font-size: 12px;
  font-weight: 600;
}
.memory.readonly {
  opacity: 0.85;
}
/* Alinhamento à esquerda nos cartões de rotina e de arquivo (botões centralizam o texto por padrão). */
.routine-card-main,
.routine-card-main * {
  text-align: left;
}
.file-card,
.file-card .file-text,
.file-card .file-text * {
  text-align: left;
}
.routine-card-what,
.routine-card-meta {
  display: block;
  text-align: left;
}
.routine-card-meta > span {
  margin-right: 12px;
}
/* Descrição em até 2 linhas (o texto completo fica no title). */
.routine-card-what {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Dentro do aviso da conversa, os spans herdam o estilo centralizado de .msg.notice; o cartão volta ao texto à esquerda, como o cartão de e-mail. */
.msg.notice .routine-card span {
  display: inline;
  max-width: none;
  font-size: 13px;
  color: var(--tx-2);
  text-align: left;
}
.msg.notice .routine-card .routine-card-head {
  display: flex;
  align-items: center;
}
.msg.notice .routine-card .routine-card-icon {
  display: inline-flex;
  color: var(--tx-3);
}
.msg.notice .routine-card .routine-card-state {
  display: inline-flex;
  padding: 2px 8px;
  font-size: 11.5px;
  color: var(--tx-2);
}
.msg.notice .routine-card.on .routine-card-state {
  color: var(--ok, #7fd1a6);
}
.msg.notice .routine-card .routine-card-what {
  display: -webkit-box;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tx-2);
}
.msg.notice .routine-card .routine-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--tx-3);
}
.msg.notice .routine-card .routine-card-meta > span {
  display: inline;
  margin-right: 0;
  color: var(--tx-3);
}

/* ---------- Cartões de decisão e acompanhamento (static/cartoes.js) ---------- */
.vault-card .field,
.api-key-card .field {
  margin: 0;
}
.api-key-card .hint,
.vault-card .hint {
  margin: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
  color: var(--tx-3);
}
.api-key-card .hint .i,
.vault-card .hint .i {
  width: 14px;
  height: 14px;
  flex: none;
}
.api-key-card .api-key-note {
  display: block;
  color: var(--tx-3);
  font-size: 12.5px;
}
.api-key-card.done .rb-title .i {
  color: var(--green);
}
.btn.sm.danger {
  color: var(--danger);
}
.delegation-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--s2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
  max-width: var(--col);
}
.delegation-card > .i {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--tx-2);
}
.delegation-card .item-text {
  min-width: 0;
  flex: 1;
}
.delegation-card strong {
  font-weight: 600;
  color: var(--tx);
}
.delegation-card small {
  display: block;
  color: var(--tx-3);
  font-size: 12.5px;
}
.delegation-state {
  flex: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
  color: var(--tx-2);
  white-space: nowrap;
}
.delegation-state.run {
  color: var(--green);
}
.delegation-state.bad {
  color: var(--danger);
}
.delegation-card .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.wait-card .rb-title .i {
  color: var(--tx-2);
}
.wait-card .delegation-state {
  margin-top: 4px;
  display: inline-flex;
}
.takeover-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--r);
  background: rgba(242, 201, 76, 0.07);
  box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.3);
}
.takeover-card p {
  margin: 0;
  display: grid;
  gap: 2px;
  font-size: 14px;
  min-width: 0;
}
.takeover-card span {
  font-size: 13px;
  color: var(--tx-2);
}
.takeover-card.live {
  margin: 0 16px 10px;
}
.mcp-body {
  display: grid;
  gap: 18px;
}
.mcp-list {
  display: grid;
  gap: 10px;
}
.mcp-head {
  font-size: 13px;
  color: var(--tx-3);
}
.mcp-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r);
  background: var(--s2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mcp-item.on {
  box-shadow: inset 0 0 0 1px rgba(112, 192, 72, 0.3);
}
.mcp-item small {
  display: block;
  color: var(--tx-3);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.mcp-item .connector-state {
  color: var(--tx-2);
}
.mcp-item .connector-state.on {
  color: var(--green);
}
.mcp-err {
  color: var(--danger) !important;
}
.mcp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mcp-add {
  display: grid;
  gap: 12px;
  padding-top: 4px;
}
.mcp-add h3 {
  margin: 0;
  font-size: 15px;
}
.mcp-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mcp-transport .chip {
  color: var(--tx-2);
  background: var(--s2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mcp-transport .chip.active,
.mcp-transport .chip[aria-checked="true"] {
  color: var(--tx);
  background: var(--s4);
  box-shadow: inset 0 0 0 1px var(--focus);
}
@media (max-width: 480px) {
  .mcp-actions .btn {
    flex: 1 1 auto;
  }
  .takeover-card .btn {
    width: 100%;
  }
}

/* Computador no servidor (backend host): barra de abas e campo do teclado virtual */
.host-tabs {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 2;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.host-tabs[hidden] {
  display: none;
}
.host-tab {
  flex: 0 1 160px;
  min-width: 70px;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(13, 21, 29, 0.78);
  color: var(--tx-2);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px var(--line-2);
  cursor: pointer;
}
.host-tab.on {
  background: var(--s2);
  color: var(--tx);
}
.host-kbd {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
}

.chat-head-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.side-panel .side-form {
  display: flex;
  gap: 8px;
  padding: 8px 12px 12px;
}
.side-panel .side-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--s2);
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.pref-note {
  margin: 0 10px 6px;
  font-size: 12px;
  color: var(--tx-3);
}
@media (max-width: 700px) {
  .msg.assistant .msg-main:has(.md-table) { max-width: calc(100% - 36px); }
}

/* Troca rápida de agente (Alt segurado): static/atalhos.js */
.alt-switch {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 90;
  min-width: 240px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 48px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: alt-in 0.12s var(--ease);
}
.alt-switch ul {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.alt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 14px;
}
.alt-row.on {
  background: var(--s2);
}
.alt-row kbd {
  min-width: 22px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 6px;
  font: 600 12px/18px var(--font);
  color: var(--tx-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.alt-title,
.alt-hint {
  margin: 0;
  font-size: 12px;
  color: var(--tx-3);
}
@keyframes alt-in {
  from { opacity: 0; transform: translate(-50%, 4px); }
}
@media (prefers-reduced-motion: reduce) {
  .alt-switch { animation: none; }
}

/* ---------- Linha "Enviou mensagem para X" / "Mensagem de X" entre os balões ---------- */
.msg.notice.agent-line {
  justify-content: center;
  margin: 10px 0;
  position: relative;
}
.agent-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--tx-3);
  font-size: 12.5px;
}
.agent-line-btn:hover,
.agent-line.open .agent-line-btn {
  color: var(--tx-2);
}
.agent-line-name {
  color: var(--tx-2);
}
.agent-line-stack {
  display: inline-flex;
}
.agent-line-stack .avatar + .avatar {
  margin-left: -7px;
}
.agent-line-stack .avatar {
  box-shadow: 0 0 0 2px var(--bg);
  border-radius: 50%;
}
.agent-line-pop {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  min-width: 230px;
  padding: 6px;
  border-radius: 14px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 36px rgba(0, 0, 0, 0.4);
}
.agent-line-multi:hover .agent-line-pop,
.agent-line-multi.open .agent-line-pop,
.agent-line-multi:focus-within .agent-line-pop {
  display: grid;
}
.agent-line-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
  text-align: left;
}
.agent-line-row:hover {
  background: var(--s2);
}
.agent-at {
  color: var(--tone, var(--lime));
  font-weight: 600;
}

/* ---------- Conversa entre agentes, no lugar do chat principal ---------- */
.chat.thread-open .agent-pill {
  visibility: hidden;
}
.thread-pane {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.thread-pill {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 120px);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.thread-pill > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-swap {
  font-style: normal;
  color: var(--tx-3);
}
.thread-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 72px max(24px, calc((100% - var(--col)) / 2 + 24px)) 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tmsg {
  display: grid;
  gap: 4px;
  max-width: min(720px, calc(100% - 40px));
}
.tmsg > strong {
  color: var(--tone, var(--tx-2));
  font-size: 12.5px;
  padding-left: 40px;
}
.tmsg-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.tmsg-av {
  flex: none;
  width: 32px;
  display: grid;
  align-items: end;
}
.tmsg .bubble {
  position: relative;
  min-width: 0;
  background: var(--s1);
  border-bottom-left-radius: 6px;
}
.tmsg-reply {
  position: absolute;
  top: 6px;
  right: -34px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tx-3);
  opacity: 0;
}
.tmsg:hover .tmsg-reply,
.tmsg-reply:focus-visible {
  opacity: 1;
}
.tmsg-reply:hover {
  background: var(--s2);
  color: var(--tx);
}
.tmsg-reply .i {
  width: 15px;
  height: 15px;
}
.thread-foot {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
}
@media (hover: none), (max-width: 700px) {
  .tmsg-reply {
    opacity: 1;
    right: 6px;
    top: auto;
    bottom: 6px;
    width: 24px;
    height: 24px;
  }
  .tmsg .bubble {
    padding-bottom: 30px;
  }
  .thread-scroll {
    padding: 70px 12px 16px;
  }
  .tmsg {
    max-width: 100%;
  }
}

/* ---------- Navegador do servidor: abas como no Chrome, endereço, painel, tela cheia e janela flutuante ---------- */
.computer.host {
  --hb-strip: #0f1114;
  --hb-chrome: #23272c;
  background: var(--hb-chrome);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.computer.host .tool {
  display: inline-flex !important;
}
.hb-top {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 8px 0 8px;
  background: var(--hb-strip);
  min-width: 0;
}
.hb-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hb-tabs::-webkit-scrollbar {
  display: none;
}
.hb-tablist {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.hb-tab {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  height: 36px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 12px;
  border-radius: 10px 10px 0 0;
  color: var(--tx-2);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
}
.hb-tab:hover {
  background: rgba(255, 255, 255, 0.06);
}
.hb-tab.on {
  background: var(--hb-chrome);
  color: var(--tx);
}
.hb-tab.on::before,
.hb-tab.on::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at var(--cx) 0, transparent 9.5px, var(--hb-chrome) 10px);
}
.hb-tab.on::before {
  left: -10px;
  --cx: 0;
}
.hb-tab.on::after {
  right: -10px;
  --cx: 100%;
}
.hb-tab.asleep .hb-title,
.hb-tab.asleep .hb-fav {
  opacity: 0.55;
}
.hb-tab:focus-visible,
.hb-plus:focus-visible,
.hb-close:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
}
.hb-fav {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--s3, #2c3239);
  font-size: 10px;
  font-weight: 700;
  color: var(--tx-2);
  overflow: hidden;
}
.hb-fav img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}
.hb-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hb-owner {
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--tx-2);
  white-space: nowrap;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-tab.mine .hb-owner {
  background: rgba(121, 205, 45, 0.18);
  color: var(--lime);
}
.hb-close,
.hb-plus {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tx-2);
  cursor: pointer;
  padding: 0;
}
.hb-close:hover,
.hb-plus:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  color: var(--tx);
}
.hb-plus {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
}
.hb-plus:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.hb-close .i,
.hb-plus .i {
  width: 14px;
  height: 14px;
}
.hb-modes {
  flex: none;
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.hb-modes .tool[aria-pressed="true"] {
  background: var(--s2);
  color: var(--tx);
}
.computer.host.native-chrome .hb-tabs,
.computer.host.native-chrome .hb-bar {
  display: none !important;
}
.hb-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px 8px;
  background: var(--hb-chrome);
  min-width: 0;
}
.hb-address {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0 8px;
  padding: 0 14px;
  border-radius: 999px;
  background: #15181b;
  color: var(--tx-3);
}
.hb-address:focus-within {
  box-shadow: inset 0 0 0 2px var(--lime);
}
.hb-address span {
  display: grid;
}
.hb-address .i {
  width: 16px;
  height: 16px;
}
.hb-address input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 13.5px;
  color: var(--tx);
  outline: 0;
}
.hb-control {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 3px 3px 12px;
  border-radius: 999px;
  background: #1b1e22;
}
.hb-control .control-state {
  font-size: 13px;
  white-space: nowrap;
}
.computer.host #take-control {
  background: #f2f4f6;
  color: #111;
  height: 28px;
  font-weight: 600;
}
.computer.host.human.ia-tab #take-control {
  background: var(--lime);
  color: #0d1a05;
}
.computer.host #take-control[hidden],
.computer.host #host-kbd-btn[hidden] {
  display: none;
}
.computer.host .computer-stage {
  background: #0d151d;
}
.hb-note {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 0;
  max-width: calc(100% - 24px);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(20, 22, 25, 0.92);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--tx);
  font-size: 12.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 3;
}
.hb-note.on:not(:empty) {
  opacity: 1;
}
.hb-pip-head {
  display: none;
}
/* Painel lateral (padrão no computador): a conversa continua visível ao lado. */
/* Janela flutuante: só a tela, arrastável pela barrinha, para acompanhar enquanto conversa. */
.computer.host.mode-pip {
  inset: auto;
  width: 360px;
  height: auto;
  z-index: 80;
  grid-template-rows: auto auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-2), 0 22px 60px rgba(0, 0, 0, 0.55);
}
.computer.host.mode-pip .hb-top,
.computer.host.mode-pip .hb-bar {
  display: none;
}
.computer.host.mode-pip .hb-pip-head {
  display: flex;
  align-items: center;
  gap: 2px;
  order: -1;
  padding: 2px 4px 2px 12px;
  background: var(--hb-strip);
  font-size: 12.5px;
  color: var(--tx-2);
  cursor: grab;
  touch-action: none;
}
.computer.host.mode-pip .hb-pip-head span {
  flex: 1;
}
.computer.host.mode-pip .computer-stage {
  container-type: normal;
  aspect-ratio: 16 / 10;
}
.computer.host.mode-pip .screen-wrap {
  width: 100%;
}
.computer.host.mode-pip .hb-note {
  font-size: 11.5px;
}
/* Celular: sem janela flutuante; painel é uma folha embaixo, tela cheia ocupa tudo. */
@media (max-width: 700px) {
  .hb-pip-btn {
    display: none !important;
  }
  .computer.host .hb-tab {
    width: 150px;
  }
  .computer.host .hb-bar {
    flex-wrap: wrap;
    padding: 4px 8px 6px;
    row-gap: 6px;
  }
  .computer.host .hb-address {
    flex: 1 1 140px;
    margin: 0 4px;
  }
  .computer.host .hb-control {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .computer.host.mode-panel .hb-tab {
    width: 130px;
  }
  .computer.host .hb-owner {
    max-width: 52px;
  }
}
.hb-control:has(#take-control[hidden]) {
  padding-right: 14px;
}
.hb-tablist {
  flex: none;
}

/* Pedido da IA: ocupa o espaço livre embaixo da tela, pequeno e encostado no canto (nunca sobre a página). */
.computer.host .takeover-card.live {
  position: static;
  translate: none;
  margin: 6px 8px 8px;
  justify-self: start;
  width: auto;
  max-width: calc(100% - 16px);
  flex-wrap: nowrap;
  gap: 10px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background: rgba(242, 201, 76, 0.1);
  box-shadow: inset 0 0 0 1px rgba(242, 201, 76, 0.4);
}
.computer.host .takeover-card.live p {
  font-size: 12.5px;
  min-width: 0;
}
.computer.host .takeover-card.live p span {
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.computer.host .takeover-card.live .btn {
  flex: none;
}
/* Painel lateral: embutido no painel de detalhes do agente, no lugar do cartão do Computador. */
.computer-slot:empty {
  display: none;
}
.panel-section:has(.computer.host.mode-panel) .computer-tile,
.panel-section:has(.computer.host.mode-panel) > .takeover-card {
  display: none;
}
.shell.panel-open:has(.computer.host.mode-panel) {
  --panel-w: 440px;
}
.computer.host.mode-panel {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: auto;
  animation: none;
  grid-template-rows: auto auto auto auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.computer.host.mode-panel .computer-stage {
  container-type: normal;
  aspect-ratio: 16 / 10;
}
.computer.host.mode-panel .screen-wrap {
  width: 100%;
}
.computer.host.mode-panel .hb-tab {
  width: 150px;
}
.computer.host.mode-panel .hb-bar {
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 4px 8px 8px;
}
.computer.host.mode-panel .hb-address {
  flex: 1 1 120px;
  margin: 0 4px;
}
.computer.host.mode-panel .hb-control {
  flex: 1 1 100%;
  justify-content: space-between;
}
.computer.host.mode-panel .hb-modes .tool {
  width: 30px;
  height: 30px;
}
@media (max-width: 700px) {
  .shell.panel-open:has(.computer.host.mode-panel) {
    --panel-w: 100vw;
  }
  .computer.host .tool.icon-only {
    width: 38px;
    height: 38px;
  }
  .computer.host .tool .i {
    width: 17px;
    height: 17px;
  }
  .computer.host .hb-top {
    padding: 4px 4px 0 6px;
    gap: 4px;
  }
  .computer.host .hb-tab {
    height: 36px;
    width: 128px;
    gap: 6px;
    padding: 0 4px 0 9px;
    font-size: 12.5px;
  }
  .computer.host .hb-owner {
    font-size: 10px;
    padding: 2px 6px;
    max-width: 48px;
  }
  .computer.host .hb-close {
    width: 24px;
    height: 24px;
    position: relative;
  }
  .computer.host .hb-close::after,
  .computer.host .hb-plus::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .computer.host .hb-plus {
    position: relative;
    width: 30px;
    height: 30px;
    margin-bottom: 3px;
  }
  .computer.host .hb-modes {
    margin-bottom: 0;
  }
  .computer.host .hb-bar {
    padding: 2px 6px 6px;
    row-gap: 4px;
    gap: 0;
  }
  .computer.host .hb-address {
    height: 36px;
    margin: 0 4px;
    padding: 0 12px;
  }
  .computer.host .hb-address input {
    font-size: 14px;
  }
  .computer.host #take-control,
  .computer.host #host-kbd-btn {
    height: 34px;
    min-height: 0;
    min-width: 88px;
    font-size: 13.5px;
    padding: 0 14px;
    position: relative;
  }
  .computer.host #take-control::after,
  .computer.host #host-kbd-btn::after {
    content: "";
    position: absolute;
    inset: -5px -3px;
  }
  .computer.host .hb-control {
    padding: 3px 3px 3px 12px;
  }
  .computer.host .hb-control .control-state {
    font-size: 13px;
  }
  .computer.host .takeover-card.live {
    flex-wrap: nowrap;
    border-radius: 12px;
    justify-self: stretch;
    margin: 4px 6px 6px;
    padding: 5px 5px 5px 10px;
    gap: 8px;
  }
  .computer.host .takeover-card.live p {
    font-size: 12px;
  }
  .computer.host .takeover-card.live .btn {
    height: 32px;
    min-height: 0;
    padding: 0 12px;
    font-size: 13px;
    position: relative;
  }
  .computer.host .takeover-card.live .btn::after {
    content: "";
    position: absolute;
    inset: -6px -3px;
  }
  .computer.host.mode-panel .hb-modes .tool {
    width: 38px;
    height: 38px;
  }
}

/* Controles ficam fora da área da página, também nos modos embutido e flutuante. */
.computer.host .hb-control {
  justify-self: end;
  margin: 4px 8px 8px;
  gap: 6px;
  padding: 3px 3px 3px 10px;
}
.computer.host.mode-pip { grid-template-rows: auto auto auto auto; }
.computer.host.mode-pip .hb-control { margin: 4px 6px 6px; }
@media (max-width: 700px) {
  .computer.host .hb-control { flex: none; justify-content: initial; margin: 4px 6px 6px; }
  .computer.host .tool.icon-only, .computer.host.mode-panel .hb-modes .tool { width: 40px; height: 40px; }
  .computer.host .takeover-card.live { justify-self: start; width: auto; }
}

.computer.host:has(.takeover-card.live) .hb-control .control-state,
.computer.host:has(.takeover-card.live) .hb-control #take-control,
.computer.host:has(.takeover-card.live) .hb-control:has(#host-kbd-btn[hidden]) { display: none; }
@media (max-width: 700px) {
  .computer.host .hb-pip-btn { display: none !important; }
}

.computer.host .takeover-card.live p { flex: 1 1 auto; }
.computer.host .takeover-card.live .btn { width: auto; }

/* Barra de navegação discreta, sem competir com o conteúdo da página. */
.computer.host .hb-bar { border-color: rgba(255, 255, 255, .06); }
.computer.host .hb-address { background: rgba(255, 255, 255, .06); box-shadow: none; }
.computer.host .hb-bar .tool { color: #aeb4bb; }

/* Pedidos de ajuda ficam na tela do computador, não no painel de detalhes. */
.panel-section > .takeover-card { display: none; }

/* Ícone + texto: o ícone fica no centro da PRIMEIRA linha, também quando o texto quebra.
   Cada linha usa o próprio tamanho do ícone: margem = (altura da linha - ícone) / 2. */
.nav-link,
.menu-item,
.reply-open,
.routine-main,
.oauth-note,
.lh-head,
.chip,
.soft-tag,
.event-chip,
.control-state,
.mail-card-head {
  align-items: flex-start;
}
.nav-link > .i,
.menu-item > .i {
  margin-top: calc((1lh - 18px) / 2);
}
.reply-open > .i,
.chip > .i {
  margin-top: calc((1lh - 15px) / 2);
}
.routine-main > .i {
  margin-top: calc((1lh - 17px) / 2);
}
.oauth-note > .i,
.lh-head > .i,
.mail-card-head > .i {
  margin-top: calc((1lh - 20px) / 2);
}
.control-state > .i {
  margin-top: calc((1lh - 16px) / 2);
}
.hint > .i {
  margin-top: calc((1lh - 15px) / 2);
}
/* Ajuste óptico medido: a primeira linha do texto de 12,5px fica ~1,5px acima do centro da caixa. */
.api-key-card .hint > .i,
.vault-card .hint > .i {
  margin-top: calc((1lh - 14px) / 2 - 1.5px);
}
.lh-head > .lk-ico {
  margin-top: calc((1lh - 16px) / 2);
}

/* Aviso discreto de nova versão disponível */
.version-notice {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 98;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--s2);
  border: 1px solid var(--line-2);
  color: var(--tx);
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  font-size: 13.5px;
  animation: fade 0.16s ease;
}
.version-notice .btn {
  padding: 4px 10px;
  font-size: 12.5px;
}

/* ---------- Painel de tarefas em segundo plano e saídas do terminal ---------- */
.bg-tasks-modal .modal-card {
  max-width: 760px;
  width: 95vw;
}
.bg-tasks-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 16px 20px 24px;
}
.bg-tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.bg-tasks-sync-status {
  font-size: 12.5px;
  color: var(--tx-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bg-tasks-sync-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 2px rgba(121, 205, 45, 0.25);
}
.bg-tasks-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bg-tasks-section-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--tx);
  letter-spacing: -0.01em;
}
.bg-tasks-empty-box {
  padding: 24px 16px;
  text-align: center;
  border-radius: var(--r);
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.bg-tasks-empty-box .empty-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-2);
}
.bg-tasks-empty-box .empty-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--tx-3);
}
.bg-tasks-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bg-task-card {
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--s2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.15s;
}
.bg-task-card.running {
  box-shadow: inset 0 0 0 1px rgba(121, 205, 45, 0.35);
}
.bg-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bg-task-title-group {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}
.status-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(121, 205, 45, 0.2);
  flex-shrink: 0;
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.65; }
}
.bg-task-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bg-task-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bg-task-cmd {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow-x: auto;
}
.bg-task-cmd code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tx-2);
  white-space: pre-wrap;
  word-break: break-all;
}
.bg-task-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--tx-3);
  flex-wrap: wrap;
}
.bg-task-meta strong {
  color: var(--tx-2);
  font-weight: 600;
}
.bg-task-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--s3);
  color: var(--tx-2);
  font-size: 11.5px;
}
.bg-task-tag.watch code {
  font-family: var(--mono);
  color: var(--lime);
}
.bg-task-tag.watch.fired {
  background: rgba(121, 205, 45, 0.15);
  color: var(--lime);
}
.bg-tasks-muted-hint {
  font-size: 13px;
  color: var(--tx-3);
  margin: 4px 0;
}
.bg-tasks-recent-table-wrap {
  overflow-x: auto;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line);
}
.bg-tasks-recent-table {
  width: 100%;
  margin: 0;
}
.bg-tasks-recent-table .recent-time {
  font-size: 12px;
  color: var(--tx-3);
  white-space: nowrap;
}
.bg-tasks-recent-table .recent-snippet {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--tx-2);
}
.bg-tasks-recent-table .recent-size {
  font-size: 12px;
  color: var(--tx-3);
  white-space: nowrap;
}
.bg-tasks-recent-table .col-actions {
  text-align: right;
  white-space: nowrap;
}

/* Modal de Visualização da Saída */
.bg-output-modal .modal-card {
  max-width: 860px;
  width: 96vw;
}
.bg-output-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 24px;
}
.bg-output-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bg-output-filter-bar .search-input {
  flex: 1;
  min-width: 200px;
}
.bg-output-stats-bar {
  font-size: 12px;
  color: var(--tx-3);
  padding: 0 2px;
}
.bg-output-container {
  background: #070c12;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-2);
  max-height: 58vh;
  overflow: auto;
  padding: 14px;
}
.bg-output-code {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tx-2);
  white-space: pre;
  tab-size: 2;
  word-break: normal;
}

/* Mobile responsivo (390px e telas pequenas) */
@media (max-width: 560px) {
  .bg-tasks-body {
    padding: 12px 14px 20px;
    max-height: 82vh;
  }
  .bg-task-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .bg-task-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .bg-task-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .bg-task-title {
    white-space: normal;
    word-break: break-word;
  }
  .bg-output-filter-bar .search-input {
    min-width: 100%;
  }
  .bg-output-filter-bar button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------- Descrições de Ações em Andamento e Separador NOVAS ---------- */

/* Espaçamento entre múltiplos balões e itens intercalados da mesma mensagem */
.msg-main > .bubble + .bubble,
.msg-main > .bubble + .actions-summary-card,
.msg-main > .actions-summary-card + .bubble,
.msg-main > .bubble + .action-live-row,
.msg-main > .action-live-row + .bubble,
.msg-main > .bubble + .attachment-row,
.msg-main > .attachment-row + .bubble {
  margin-top: 6px;
}

/* Linha viva da ação em andamento (estilo Grok: acima do campo de mensagem, sem pílula/caixa) */
.live-activity {
  padding: 0 12px 6px;
}
.live-activity[hidden] {
  display: none !important;
}
.msg.streaming:not(:has(.bubble, .attachment-row, .msg-files, .plan, .devmode-round-bar)) {
  display: none;
}
.action-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  min-height: 28px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: 100%;
  color: var(--tx-2);
  font-size: 14px;
  margin: 0;
}
.live-activity .agent-status {
  min-height: 28px;
  padding: 0;
}
.action-live-row .action-pet,
.action-live-row .action-live-pet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  transform-origin: center center;
}
.action-live-row .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
}
.action-live-row .action-pet svg {
  width: 26px;
  height: 26px;
}
.action-live-row .action-pet img,
.action-live-row .action-pet .avatar-img,
.action-live-row .action-pet .avatar-initials {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.action-live-content {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.action-live-text,
.action-live-desc {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.action-live-row.is-stopped .action-live-text {
  color: var(--tx-3);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  animation: none !important;
}
/* Sem caixa de cronômetro no estilo Grok (mantém apenas o mascote e a frase fluida) */
.action-live-timer {
  display: none;
}

/* Resumo recolhido de ações concluídas (estilo Grok: discreto, sem caixa com borda nem checks) */
.actions-summary-card {
  margin: 2px 0 4px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: fit-content;
  font-size: 12.5px;
  color: var(--tx-3);
}
.actions-summary-card[open] {
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: min(560px, 100%);
}
.actions-summary-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 3px 6px 3px 2px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  outline: none;
  border-radius: 6px;
  color: var(--tx-3);
  transition: color 0.15s, background-color 0.15s;
}
.actions-summary-head:hover {
  color: var(--tx-2);
}
.actions-summary-head::-webkit-details-marker {
  display: none;
}
.actions-summary-head::marker {
  content: "";
  display: none;
}
.actions-summary-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--r-xs);
}
.actions-summary-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  flex: none;
}
.actions-summary-icon .i {
  width: 13px;
  height: 13px;
}
.actions-summary-title {
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.actions-summary-chevron {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.75;
  margin-left: 1px;
  transition: transform 0.2s var(--ease);
  flex: none;
}
.actions-summary-chevron .i {
  width: 12px;
  height: 12px;
}
.actions-summary-card[open] .actions-summary-chevron {
  transform: rotate(90deg);
}
.actions-summary-list {
  list-style: none;
  margin: 4px 0 4px 8px;
  padding: 2px 0 2px 12px;
  display: grid;
  gap: 5px;
  border-left: 1.5px solid var(--line-2);
}
.actions-summary-list li {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tx-2);
  word-break: break-word;
}
.actions-summary-desc {
  display: block;
  min-width: 0;
  color: var(--tx-2);
}

/* Separador "NOVAS" de mensagens não lidas */
.unread-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 14px;
  position: relative;
  width: 100%;
  opacity: 1;
  max-height: 40px;
  transition: opacity 0.5s ease, max-height 0.5s ease, margin 0.5s ease;
}
.unread-sep::before,
.unread-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--lime) 35%, var(--line-2));
}
.unread-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lime);
  background: color-mix(in srgb, var(--lime) 14%, var(--s1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 38%, transparent);
  user-select: none;
}
.unread-sep.fade-out {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 560px) {
  .live-activity {
    padding: 0 8px 6px;
  }
  .action-live-row {
    max-width: 100%;
    font-size: 13.5px;
  }
  .action-live-text,
  .action-live-desc {
    max-width: 100%;
    font-size: 13.5px;
  }
  .actions-summary-card[open] {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action-live-row {
    animation: none;
  }
  .action-live-row .action-pet,
  .action-live-row .action-live-pet,
  .action-live-row .avatar {
    animation: none;
  }
  .actions-summary-chevron {
    transition: none;
  }
  .unread-sep {
    transition: none;
  }
}

/* Barra de busca no chat (estilo flutuante limpo em pílula) */
.chat-search-bar {
  position: absolute;
  top: 60px;
  right: 16px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  max-width: calc(100% - 32px);
  padding: 0 6px 0 12px;
  border-radius: 999px;
  background: rgba(22, 34, 45, 0.94);
  border: 1px solid var(--line-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.15s, box-shadow 0.15s;
  animation: fade 0.14s var(--ease);
}
.chat-search-bar:focus-within {
  border-color: rgba(121, 205, 45, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(121, 205, 45, 0.2);
}
.chat-search-bar[hidden] {
  display: none !important;
}
.chat-search-icon {
  display: inline-flex;
  align-items: center;
  color: var(--tx-3);
  flex: none;
}
.chat-search-icon .i {
  width: 15px;
  height: 15px;
}
.chat-search-bar input.chat-search-input:not([type="checkbox"]):not([type="file"]),
.chat-search-bar input.chat-search-input:not([type="checkbox"]):not([type="file"]):focus,
.chat-search-bar input.chat-search-input:not([type="checkbox"]):not([type="file"]):focus-visible {
  width: 176px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
  color: var(--tx);
  font-size: 13.5px;
  line-height: 1.4;
}
.chat-search-bar input.chat-search-input::placeholder {
  color: var(--tx-3);
}
.chat-search-count {
  font-size: 12px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 4px 0 2px;
  text-align: right;
  flex: none;
}
.chat-search-count:empty {
  display: none;
}
.chat-search-count.is-empty {
  color: var(--tx-2);
}
.chat-search-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 4px;
  border-left: 1px solid var(--line);
  flex: none;
}
.chat-search-actions .chat-search-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--tx-2);
}
.chat-search-actions .chat-search-btn:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
}
.chat-search-actions .chat-search-btn:disabled {
  opacity: 0.35;
}
.chat-search-actions .chat-search-btn .i {
  width: 15px;
  height: 15px;
}

/* Marcação de termos encontrados */
mark.chat-search-match {
  background: rgba(250, 204, 21, 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.msg.user mark.chat-search-match {
  background: rgba(5, 34, 51, 0.22);
  color: inherit;
}
mark.chat-search-match.current,
.msg.user mark.chat-search-match.current {
  background: #facc15;
  color: #0a1118;
  font-weight: 600;
  box-shadow: 0 0 0 1.5px rgba(250, 204, 21, 0.9);
}
@media (max-width: 900px) {
  .chat-search-bar {
    top: calc(64px + env(safe-area-inset-top));
    right: 12px;
    width: min(360px, calc(100% - 24px));
    max-width: none;
    height: 46px;
    padding: 0 4px 0 14px;
  }
  .chat-search-bar input.chat-search-input:not([type="checkbox"]):not([type="file"]) {
    flex: 1;
    width: auto;
    min-width: 0;
    min-height: 44px;
  }
  .chat-search-actions .chat-search-btn {
    width: 38px;
    min-width: 38px !important;
    height: 44px;
    min-height: 44px !important;
  }
  .chat.search-open .thread {
    padding-top: calc(122px + env(safe-area-inset-top));
  }
  .chat.search-open .scroller {
    scroll-padding-top: calc(122px + env(safe-area-inset-top));
  }
}
@media (max-width: 640px) {
  .chat-search-bar {
    left: 10px;
    right: 10px;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-search-bar {
    animation: none;
    transition: none;
  }
}

/* Sand Motion: o motor anima a geometria, sem transformações CSS concorrentes. */
.sand-mascot { display: inline-flex; width: 100%; height: 100%; flex: none; }
.sand-mascot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shape-opt .sand-mascot { width: 44px; height: 44px; pointer-events: none; }



/* CRM containment retains an independently scrollable list and board. */
.page.crm { min-width: 0; }
@media (max-width: 900px) {
  .crm .page-head, .crm-bar, .crm-summary, .crm-demo-banner { flex-shrink: 0; }
  .crm .page-title { min-width: 0; }
  .crm .page-title p, .crm .acc-name { overflow-wrap: anywhere; }
}
@media (max-width: 560px) {
  .crm { overflow-y: auto; }
  .crm-board-wrap { flex: 1 0 260px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .crm-board-wrap:has(.contact-list) { overflow-y: auto; }
  .crm-board-wrap .board { height: 100%; }
  .crm .contact.row { grid-template-columns: minmax(0, 1fr); }
  .crm .contact.row::after { grid-column: 1; grid-row: auto; justify-self: start; }
  .crm .toggle, .grant { min-height: 44px; }
  .crm-contact-modal .wa-msg-row { min-width: 0; max-width: 100%; }
  .crm-contact-modal .wa-msg { min-width: 0; }
  .crm-contact-modal .link-btn { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  .crm-contact-modal .crm-head-titles h2 { white-space: normal; overflow-wrap: anywhere; }
  .crm-chat-edit > * { flex-shrink: 0; }
  .crm-edit-back-bar { flex-wrap: wrap; }
  .crm-stage-tag { overflow-wrap: anywhere; }
  .modal-card:has(.qr-body, .grant-list, #wa-new-form) .icon-btn,
  #wa-new-form input:not([type=checkbox]) { min-height: 44px; min-width: 44px; }
  .grant .item-text { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 900px) {
  .crm .page-tools .btn, .crm-bar .icon-btn, .crm-bar .choice-trigger,
  .crm-bar input:not([type=checkbox]), .crm .toggle,
  .crm-contact-modal .btn, .crm-contact-modal .icon-btn,
  .crm-contact-modal .choice-trigger, .crm-contact-modal input:not([type=hidden]),
  .crm-contact-modal .link-btn { min-height: 44px; }
  .crm-bar .icon-btn, .crm-contact-modal .icon-btn { min-width: 44px; }
  .crm-bar .choice-trigger { height: auto; line-height: 20px; white-space: normal; padding: 10px 30px 10px 14px; }
  .crm-bar .choice-trigger { position: relative; }
  .crm-bar .choice-trigger::after { position: absolute; right: 12px; top: 50%; transform: translateY(-65%) rotate(45deg); }
  /* Caixas de marcação dos formulários de conexão e acesso: linha inteira com alvo de 44px. */
  .modal-card .check { min-height: 44px; align-items: center; }
  .crm .page-title p, .crm .acc-name, .crm-contact-modal .crm-head-titles p { white-space: normal; overflow-wrap: anywhere; }
  .crm .contact header strong { white-space: normal; overflow-wrap: anywhere; }
}


/* Reference content only; sizing and scroll remain owned by the composer. */
#prompt[contenteditable] { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; color: inherit; }
#prompt[contenteditable]:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
#prompt .composer-reference { display: inline-flex; vertical-align: baseline; max-width: 100%; min-height: 0; height: 22px; padding: 0 5px; margin: 0 2px; white-space: nowrap; user-select: all; cursor: default; }
#prompt .composer-reference.is-url { width: 180px; }
#prompt .composer-reference .mc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-reference > img { width: 16px; height: 16px; object-fit: contain; flex: none; }
#prompt .composer-reference .i { width: 16px; height: 16px; flex: none; }
#prompt .composer-reference [hidden] { display: none; }



/* Avisos permitidos: centro da coluna, quebra natural e sem estilo em spans internos. */
.msg.notice.routine-notice,
.msg.notice.agent-line,
.msg.notice:has(> .thread-link) {
  justify-content: center;
  min-width: 0;
  margin: 16px 0;
}
.routine-notice-body,
.msg.notice > .thread-link,
.msg.notice .agent-line-btn {
  max-width: min(100%, 560px);
  min-width: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--s1);
  color: var(--tx-3);
  line-height: 1.5;
}
.msg.notice .routine-notice-body > span,
.msg.notice .thread-link > span,
.msg.notice .agent-line-btn > span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12.5px;
  text-align: center;
}
.msg.notice .routine-notice-body > .i,
.msg.notice .thread-link > .i {
  flex: 0 0 14px;
  color: var(--tx-3);
}
.msg.notice .agent-line-btn {
  flex-wrap: wrap;
}