.login-status {
  min-height: 1.5rem;
  margin: 0.75rem 0 0;
  color: #334155;
  line-height: 1.5;
}

.login-status[data-state="error"] {
  color: #b42318;
}

.live-chat-status {
  display: block;
  margin: 0.75rem 0 0;
  color: #526173;
  font-size: 0.8rem;
}

.live-chat-status[data-state="error"] {
  color: #b42318;
}

.live-chat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.live-chat-badge::before {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #16845b;
  content: "";
}

#businessApp .live-session {
  border-color: #e2e8f0;
}

#businessApp .live-session button {
  display: block !important;
  color: #475569;
  cursor: pointer;
  font: inherit;
}

/* Administration is hidden until the session proves owner or admin, so the
   default state of the page is the closed one. */
body:not(.can-manage) [data-admin-only] {
  display: none !important;
}

/* O contrario: so para quem nao administra (Preferencias no Inicio, porque
   para quem administra ela fica em Administracao). */
body.can-manage [data-member-only] {
  display: none !important;
}

/* Pessoas e permissoes: dados reais da API Krewia. */
.people-status {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.people-status[data-state="error"] {
  color: #b42318;
}

/* A change that is on screen but not yet published to the company. */
.people-status[data-state="warn"] {
  color: #b45309;
}

/* The last column holds invitation actions, so it needs more room than the
   30px placeholder the mock table used. */
.people-table.live-people > header,
.people-table.live-people > article {
  grid-template-columns: 1.8fr .8fr 1.05fr 1.2fr 1.1fr 150px;
  gap: 10px;
}

.people-table .role-select {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: inherit;
  font: inherit;
  padding: 6px 7px;
  width: max-content;
}

.people-table .role-fixed {
  color: var(--muted);
}

.people-table .access-button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 9px;
  text-align: left;
  width: max-content;
  max-width: 100%;
}

.people-table .access-button:hover {
  border-color: #93c5fd;
}

/* Times: real rows, so the layout has to hold a member list and an action. */
#teamAdminList > article {
  grid-template-columns: 40px minmax(0, 1fr) auto auto !important;
  gap: 12px;
  align-items: center;
}

#teamAdminList small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8rem;
}

#teamAdminList em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.team-remove {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  color: #475569;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  padding: 6px 9px;
}

html[data-theme="dark"] .team-remove {
  color: #d9e5fb;
  border-color: #34435d;
}

#teamStatus {
  margin: 0 0 12px;
}

.access-choices {
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.access-choices legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The dialog shell stacks a label above its field; a checkbox belongs beside
   its text, so the direction has to be overridden too. */
.access-choices label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}

.access-choices label:last-of-type {
  margin-bottom: 0 !important;
}

.access-choices input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: #0066ff;
}

.access-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.people-table article > em[data-state="expired"],
.people-table article > em[data-state="canceled"],
.people-table article > em[data-state="rejected"] {
  color: #8a5a00;
  background: #fdf2dc;
}

.people-table article > em[data-state="pending"] {
  color: #1c4f9c;
  background: #e5eefc;
}

.people-table .invitation-actions {
  display: flex;
  gap: 6px;
}

.people-table .invitation-actions button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  padding: 6px 8px;
}

.people-table .invitation-row .avatar {
  background: #eef1f5;
  color: #64748b;
}

/* The dark theme restyles generic inputs and cards, but these controls and the
   invitation badges are new, so they need their own dark values. */
html[data-theme="dark"] .people-table .invitation-actions button {
  background: #111c2f;
  border-color: #34435d;
  color: #d9e5fb;
}

html[data-theme="dark"] .people-table .invitation-row .avatar {
  background: #1b2a43;
  color: #9babc3;
}

html[data-theme="dark"] .people-table article > em[data-state="expired"],
html[data-theme="dark"] .people-table article > em[data-state="canceled"],
html[data-theme="dark"] .people-table article > em[data-state="rejected"] {
  background: #3a2c10;
  color: #f2ce85;
}

html[data-theme="dark"] .people-table article > em[data-state="pending"] {
  background: #14243f;
  color: #a8c7f5;
}

/* Administração Krewia reads across every company, so it belongs to whoever
   operates the product, never to a customer. Same rule as [data-admin-only]:
   this hides it, the API is what protects it. */
body:not(.can-administer-platform) [data-platform-only] {
  display: none !important;
}

.platform-warning {
  display: block;
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
  background: #fffbeb;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 20px;
  max-width: 1000px;
}

.platform-warning b {
  display: block;
  color: #92400e;
  margin-bottom: 4px;
}

.platform-warning p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #92400e;
}

html[data-theme="dark"] .platform-warning {
  background: #2a2010 !important;
  border-color: #6b4a12 !important;
  border-left-color: #d97706 !important;
}

html[data-theme="dark"] .platform-warning b,
html[data-theme="dark"] .platform-warning p {
  color: #f3c76b !important;
}

.platform-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  max-width: 1000px;
  margin: 0 0 30px;
}

.platform-tile {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card, #f8fafc);
}

.platform-tile small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.platform-tile b {
  font-size: 20px;
  font-weight: 600;
}

.platform-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.platform-block {
  margin: 0 0 34px;
  max-width: 1000px;
}

.platform-block > header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.platform-block > header p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 700px;
}

.platform-table > header,
.platform-table > div {
  display: grid;
  grid-template-columns: 1.8fr 0.8fr 1.4fr 0.9fr 1fr 1.5fr;
  gap: 12px;
  padding: 11px 14px;
  align-items: center;
}

.platform-table > header {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.platform-table > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

.routing-group {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.routing-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.routing-group > header h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.routing-group > header button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
}

/* One column per capability. The grid is mostly empty and stays that way; the
   empty cells are drawn on purpose, so a hole is visible before someone falls
   into it. */
.routing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
  gap: 10px;
}

.routing-cell {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}

.routing-cell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.routing-cell > header b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.routing-cell > header button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 4px 9px;
}

.routing-empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.routing-empty[data-state="error"] {
  color: #b42318;
}

/* Five columns leave each cell narrow, and a model name is long
   ("openrouter/deepseek/deepseek-v4.1-flash"). The name keeps the first line
   and the controls wrap under it, instead of squeezing the field to nothing. */
.routing-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.routing-order {
  color: var(--muted);
  font-size: 12px;
  min-width: 28px;
}

/* The first model is the one that answers; the rest only exist for the moment
   it fails. Saying so here is what stops an image model being parked in second
   place as if it were an alternative. */
.routing-order.routing-primary {
  color: #0066ff;
  font-weight: 600;
}

.routing-row input {
  flex: 1 1 120px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  background: none;
  color: inherit;
}

.routing-row button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 6px 9px;
}

.routing-row button:disabled {
  opacity: 0.4;
  cursor: default;
}

.routing-row .routing-on {
  border-color: #0066ff;
  color: #0066ff;
}

@media (max-width: 760px) {
  .platform-table > header {
    display: none;
  }

  .platform-table > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .platform-table > div span::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }

  /* No grid on a phone: the cells stack, one capability under the other. */
  .routing-grid {
    grid-template-columns: 1fr;
  }

  .routing-row input {
    flex-basis: 100%;
  }
}

/* Saving what the chat produced, switched off for the whole company in
   Preferências. Display control: the content is already on the person's
   screen, so this is a policy signal, not a lock. */
body.no-chat-download [data-download] {
  display: none !important;
}

/* The send arrow becomes a stop while an answer is coming. Krewia blue, not
   red: nothing went wrong, the thing is simply working and can be stopped. */
.composer button.send.is-stopping {
  background: var(--accent, #0066ff);
  border-color: var(--accent, #0066ff);
  color: #fff;
  border-radius: 50%;
  line-height: 1;
}

.composer button.send.is-stopping:hover {
  background: #0052cc;
  border-color: #0052cc;
}

.message-retry {
  display: inline-block;
  margin-top: 10px;
  border: 1px solid var(--accent, #0066ff);
  border-radius: 8px;
  background: none;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
}

.message-retry:hover {
  background: var(--soft, #eff6ff);
}

.md-image figcaption {
  margin-top: 8px;
}

.md-image figcaption button {
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
}

.md-image figcaption button:hover {
  background: var(--soft, #eff6ff);
  border-color: var(--accent, #0066ff);
}

html[data-theme="dark"] .md-image figcaption button {
  background: var(--dark-surface, #101c30) !important;
  border-color: #2c4a7c !important;
  color: #6fa7ff !important;
}

/* What the gateway said when a call failed. Only reaches owner and admin, and
   folded away so a failed answer does not open with a wall of provider JSON. */
.gateway-detail {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
}

.gateway-detail summary {
  cursor: pointer;
  color: var(--muted);
}

.gateway-detail p {
  margin: 8px 0 4px;
  color: var(--muted);
}

.gateway-detail pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  color: var(--muted);
  max-height: 160px;
  overflow: auto;
}

/* A page the model wrote, rendered in its own frame. It is the only model
   output that becomes markup, and it is walled off in markdown.js: opaque
   origin, no network. */
.md-html {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.md-html iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  background: #fff;
}

/* The frame's height cannot be measured from here -- an opaque origin does not
   report it -- so the page scrolls inside a fixed box and this opens it up. */
.md-html.is-tall iframe {
  height: 80vh;
}

.md-html figcaption {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--card, #f8fafc);
}

/* Krewia blue, with one clear hierarchy: baixar is the action, the other two
   only change how you are looking at it. */
.md-html figcaption button {
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  transition: background 0.15s, border-color 0.15s;
}

.md-html figcaption button:hover {
  background: var(--soft, #eff6ff);
  border-color: var(--accent, #0066ff);
}

.md-html figcaption button:first-child {
  border-color: var(--accent, #0066ff);
  background: var(--accent, #0066ff);
  color: #fff;
}

.md-html figcaption button:first-child:hover {
  background: #0052cc;
  border-color: #0052cc;
}

.md-html figcaption button:focus-visible {
  outline: 2px solid var(--accent, #0066ff);
  outline-offset: 2px;
}

.md-html pre {
  margin: 0;
  border-top: 1px solid var(--line);
  max-height: 420px;
  overflow: auto;
}

.md-html-truncated {
  align-self: center;
  font-size: 12px;
  color: #b45309;
}

html[data-theme="dark"] .md-html figcaption {
  background: var(--dark-raised, #14233a) !important;
}

html[data-theme="dark"] .md-html figcaption button {
  background: var(--dark-surface, #101c30) !important;
  border-color: #2c4a7c !important;
  color: #6fa7ff !important;
}

html[data-theme="dark"] .md-html figcaption button:first-child {
  background: #0b6cff !important;
  border-color: #0b6cff !important;
  color: #fff !important;
}

/* A generated image in an answer. The frame holds its place while the bytes
   are fetched, so the message does not jump when it arrives. */
.md-image {
  margin: 12px 0;
  max-width: 420px;
}

.md-image img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 80px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card, #f8fafc);
}

.md-image[data-state="error"]::after {
  content: "Não foi possível carregar esta imagem.";
  display: block;
  font-size: 13px;
  color: #b42318;
  margin-top: 6px;
}

/* Parts of the mock that describe something the product does not have yet.
   Kept in the DOM because other scripts anchor to them, but never shown.
   [hidden] alone is not enough: several carry a display rule that outranks it. */
[data-pending-feature] {
  display: none !important;
}

/* The picker styles its entries with display:grid, which outranks the browser's
   own rule for [hidden]. Without this a model class the person is not allowed
   to use stayed visible in the menu, and so did the agents section. */
#bChoiceMenu [hidden] {
  display: none !important;
}

#bChoiceMenu .agent-picker-heading[hidden] {
  display: none !important;
}

/* Sharing a conversation. */
.chat-share-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: #475569;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  padding: 6px 11px;
  margin-left: 12px;
}

.chat-share-button:hover {
  border-color: #93c5fd;
  color: #0066ff;
}

html[data-theme="dark"] .chat-share-button {
  border-color: #34435d;
  color: #d9e5fb;
}

.share-scope {
  margin-top: 8px !important;
  color: #1c4f9c !important;
}

html[data-theme="dark"] .share-scope {
  color: #a8c7f5 !important;
}

.share-list h3 {
  margin: 20px 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}

.share-row button {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  padding: 5px 9px;
}

#shareUrl {
  font-size: 0.82rem !important;
}

/* The page a shared link opens: a read-only copy of the conversation with one
   way forward. */
.shared-page {
  min-height: 100dvh;
  padding: 40px 16px 60px;
  background: #f6f8fb;
  overflow: auto;
}

html[data-theme="dark"] .shared-page {
  background: #08101f;
}

.shared-chat-panel {
  width: min(780px, 100%);
  margin: 0 auto;
}

.shared-brand {
  display: block;
  width: max-content;
  margin-bottom: 26px;
}

.shared-chat-panel .login-eyebrow {
  display: block;
}

.shared-brand img {
  width: 148px;
  height: 42px;
  object-fit: contain;
}

.shared-chat-panel h1 {
  margin: 12px 0 8px;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
}

.shared-messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 26px 0;
}

.shared-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.shared-actions .primary {
  border: 0;
  border-radius: 9px;
  background: #0066ff;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 12px 20px;
}

.shared-actions a {
  color: #0066ff;
  font-size: 0.88rem;
}

/* These dialogs live inside the app, so they follow the app's dialog shell
   (.favorite-dialog) instead of the login screen's styles. Only what that
   shell does not cover is defined here. */
.krewia-dialog {
  max-height: 90dvh;
  overflow: auto;
}

.krewia-dialog .dialog-intro {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.krewia-dialog .dialog-status {
  min-height: 1.3rem;
  margin: 14px 0 0;
  color: #334155;
  font-size: 0.85rem;
  line-height: 1.5;
}

.krewia-dialog .dialog-status[data-state="error"] {
  color: #b42318;
}

html[data-theme="dark"] .krewia-dialog .dialog-status {
  color: #c4d1e5;
}

html[data-theme="dark"] .krewia-dialog .dialog-status[data-state="error"] {
  color: #ff9a8e;
}

.krewia-dialog footer {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* Formatted answers: tables, lists, code and emphasis inside the bubble. */
.md-body > *:first-child { margin-top: 0; }
.md-body > *:last-child { margin-bottom: 0; }

/* A long URL or an unbroken token would otherwise run past the bubble. */
.md-body,
.corp-messages article > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.md-body pre,
.md-body code {
  overflow-wrap: normal;
}

/* Sem botoes embaixo de uma resposta que ainda nao chegou. */
article.ai-msg[data-pending] .message-actions {
  display: none;
}

/* Fica na tela ate a resposta chegar inteira (10/10/2026), entao precisa ser
   visto: os pontos sobem e descem, um depois do outro. */
.md-typing {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  height: 18px;
  padding: 3px 0;
}

.md-typing i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6f9be0;
  animation: md-typing-pulse 1.1s ease-in-out infinite;
}

.md-typing i:nth-child(2) { animation-delay: 0.18s; }
.md-typing i:nth-child(3) { animation-delay: 0.36s; }

@keyframes md-typing-pulse {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .md-typing i { animation: none; opacity: 0.6; }
}

/* Line charts, for a series over time. */
.md-line-chart {
  margin-top: 6px;
  /* Text inside the SVG scales with it, so on a narrow bubble the chart keeps a
     legible size and scrolls rather than shrinking until the labels vanish. */
  overflow-x: auto;
}

/* Height follows the viewBox ratio. A fixed height with a full-width SVG is
   what flattened the charts: the two axes scaled by different factors. */
.md-line-chart svg {
  display: block;
  width: 100%;
  min-width: 460px;
  height: auto;
}

.md-line-chart .md-grid {
  stroke: #e2e8f0;
  stroke-width: 1;
}

/* In viewBox units, so it scales with the chart. Sized to stay readable across
   the range of bubble widths. */
.md-line-chart .md-axis {
  fill: #7d8b95;
  font-size: 12px;
}

.md-line-chart .md-area {
  fill: rgba(0, 102, 255, 0.10);
  stroke: none;
}

.md-line-chart .md-line {
  fill: none;
  stroke: #0066ff;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.md-line-chart .md-dot {
  fill: #fff;
  stroke: #0066ff;
  stroke-width: 2;
}

.md-line-chart .md-column {
  fill: #0066ff;
}

.md-column-value {
  font-weight: 600;
}

/* Composition as a share of the whole. Segments are separated by a surface gap
   so adjacent colours never touch, which is what makes the palette readable for
   colourblind viewers. */
.md-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: 0.78rem;
}

.md-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.md-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.md-stacked {
  display: grid;
  gap: 10px;
}

.md-stacked > div {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: #475569;
}

.md-stacked-track {
  display: flex;
  gap: 2px;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
}

.md-stacked-track i {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

html[data-theme="dark"] .md-stacked > div { color: #c4d1e5; }

html[data-theme="dark"] .md-line-chart .md-grid { stroke: #24324a; }
html[data-theme="dark"] .md-line-chart .md-axis { fill: #9babc3; }
html[data-theme="dark"] .md-line-chart .md-dot { fill: #111c2f; }

.md-body p { margin: 0 0 10px; line-height: 1.65; }
.md-body h3, .md-body h4, .md-body h5, .md-body h6 {
  margin: 16px 0 8px;
  font-size: 0.98rem;
  line-height: 1.35;
}

.md-body ul, .md-body ol { margin: 0 0 10px; padding-left: 20px; }
.md-body li { margin: 3px 0; line-height: 1.6; }

.md-body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #eef2f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

.md-body pre {
  margin: 0 0 10px;
  padding: 12px 14px;
  overflow-x: auto;
  border-radius: 10px;
  background: #0f172a;
  color: #e7efff;
}

.md-body pre code { padding: 0; background: none; color: inherit; font-size: 0.82rem; }

.md-table { margin: 0 0 10px; overflow-x: auto; }

.md-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.md-body th, .md-body td {
  padding: 7px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.md-body th { background: #f5f8fc; font-weight: 600; }

/* Answers reuse the product's designed table and chart, so a real reply looks
   like the mock the design was approved on. */
.md-body .mock-table {
  /* The designed table forces 520px, which makes a two-column answer scroll
     for no reason. */
  min-width: 0;
}

.md-body .mock-table th,
.md-body .mock-table td {
  white-space: normal;
  /* O .md-body deixa quebrar em qualquer letra (para link comprido nao vazar
     do balao), e na tabela isso espremia a coluna ate "Nord / L / este"
     (02/10/2026). Aqui so quebra entre palavras: a tabela que nao couber
     rola para o lado no .md-table. */
  overflow-wrap: normal;
  word-break: normal;
}

/* Coluna de texto corrido nao fica com uma palavra por linha: abaixo disto,
   a tabela rola em vez de apertar. */
/* A coluna da grade do chat nao tinha largura: crescia ate caber a tabela
   inteira, e no celular o balao e a caixa de mensagem saiam da tela em vez de
   a tabela rolar dentro do balao. */
.corp-chat { grid-template-columns: minmax(0, 1fr); }

.md-body .mock-table td { min-width: 9em; }
/* A primeira coluna e a dos rotulos (regiao, item, mes): numa linha so, senao
   "Centro-Oeste" ainda quebrava no hifen. */
.md-body .mock-table td:first-child { min-width: 0; white-space: nowrap; }

/* The designed table hardcodes a dark slate on its cells and the dark theme
   never overrode it, because in the mock this table only ever appeared on a
   light bubble. */
html[data-theme="dark"] .md-body .mock-table td {
  color: #d9e5fb;
}

html[data-theme="dark"] .md-body .mock-table th,
html[data-theme="dark"] .md-body .mock-table td {
  border-bottom-color: #24324a;
}

/* A tabela da maquete tira a linha de baixo da ultima linha, porque ficava
   dentro de uma caixa que ja fechava. Na resposta nao ha caixa: sem a linha,
   a tabela parecia nao terminar antes do texto seguinte (02/10/2026). */
.md-body .mock-table tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .md-body .mock-table tbody tr:last-child td {
  border-bottom-color: #24324a;
}

.md-chart {
  margin: 0 0 12px;
}

.md-chart figcaption {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
}

.md-body .mock-chart {
  min-width: 0;
}

.md-chart-pending {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 760px) {
  .md-body .mock-chart > div {
    grid-template-columns: 84px minmax(60px, 1fr) 44px;
    font-size: 11px;
  }
}

.md-body a { color: #0066ff; }

html[data-theme="dark"] .md-body code { background: #1b2a43; }
html[data-theme="dark"] .md-body th { background: #16233a; }
html[data-theme="dark"] .md-body th,
html[data-theme="dark"] .md-body td { border-color: #24324a; }
html[data-theme="dark"] .md-body a { color: #7fb4ff; }

/* The answer is the message. The user's own bubble already hides its avatar;
   the assistant's "AI" mark and header line go the same way. */
.corp-messages article.ai-msg > .avatar {
  display: none;
}

/* Composer: attach on the left, model on the right, both scaled to the text
   instead of chunky buttons, so one line of input stays short and the
   conversation keeps the height. */
#businessComposer.corp-composer {
  margin-bottom: 10px;
  padding: 8px 10px;
}

/* .b-main is fixed at calc(100dvh - 54px), reserving room for the prototype
   switcher bar. That bar is hidden in the live product, so the reservation left
   54px of dead space under the composer. Letting the grid row size it keeps the
   main column correct whether or not the bar is ever shown again. */
@media (min-width: 801px) {
  #businessApp > .b-main {
    height: auto;
    align-self: stretch;
  }
}

/* One row: attach, the field itself, then the model. Aligned to the end so the
   controls stay put while the field grows line by line. */
#businessComposer > footer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 0;
}

/* Moving the field into the row took it out of `.composer > textarea`, so its
   base styling has to be restated here. */
#businessComposer > footer > textarea {
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
  min-height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  overflow-y: auto;
  resize: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 26px;
}

#businessComposer .composer-pickers {
  gap: 5px;
}

/* The attach button carries the primary colour the send arrow used to have. */
#businessComposer .chat-attach-button {
  background: #0066ff !important;
  border-color: #0066ff !important;
  color: #fff !important;
  font-size: 1.25rem !important;
}

#businessComposer .chat-attach-button:hover {
  background: #0056d8 !important;
  border-color: #0056d8 !important;
}

#businessComposer .composer-pickers > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  height: 2em;
  padding: 0 9px;
  font-size: 0.82rem;
  line-height: 1;
}

#businessComposer .chat-attach-button {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
}

/* The menu belongs under the control that opens it, which now sits on the
   right. The mock pinned it to the left, where the selector used to be. */
/* Desktop only. Below 800px the mock switches .picker to position:fixed, where
   `bottom: calc(100% + ...)` resolves against the viewport and throws the menu
   off the top of the screen — which is why it never appeared on a phone. */
@media (min-width: 801px) {
  #bChoiceMenu.business-choice-menu {
    left: auto !important;
    /* The mock pinned this to the left with !important, so undoing it needs
       the same weight. */
    right: 10px !important;
    bottom: calc(100% + 6px);
    width: min(330px, calc(100vw - 32px));
  }
}

/* On a phone it becomes a sheet anchored to the bottom edge, so it no longer
   depends on the composer's height to stay on screen. */
@media (max-width: 800px) {
  #bChoiceMenu.business-choice-menu {
    /* The mock and its polish layer fight over these with !important, landing
       on a shrink-to-fit box. Pinned here so the sheet is predictable. */
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    bottom: 10px;
    max-height: min(70dvh, 520px);
  }
}

#businessComposer .composer-pickers .mini-logo,
#businessComposer .composer-pickers .choice-agent-icon {
  width: auto;
  height: auto;
  font-size: 0.7rem;
  line-height: 1;
}

/* Enter sends on a physical keyboard, so the arrow is redundant there. Touch
   keyboards insert a newline instead, so it stays on narrow screens. */
#businessComposer .send {
  display: none;
}

/* Stopping has no keyboard equivalent, so this one appears everywhere while an
   answer is arriving -- including the wide layout, where the arrow is hidden.
   The stop was built onto the arrow and was therefore invisible on a desktop. */
#businessComposer .send.is-stopping {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  /* Fixed pixels, not 2em: the square glyph is small, and sizing the target
     off the font shrank the whole button to twenty pixels. */
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 10px;
}

@media (max-width: 800px) {
  #businessComposer .send {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    padding: 0;
  }
}

/* Reveal control on every password field. The mock already had a
   .password-input shell, but it was sized for a text button. */
.password-input {
  position: relative;
}

.password-input > input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 46px !important;
}

.password-reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: #64748b;
  cursor: pointer;
}

.password-reveal:hover {
  background: #f1f5f9;
  color: #0f172a;
}

html[data-theme="dark"] .password-reveal {
  color: #9babc3;
}

html[data-theme="dark"] .password-reveal:hover {
  background: #1b2a43;
  color: #e7efff;
}

/* Visão da empresa reads as a record until Editar is pressed, and the actions
   sit at the end, after the figures, instead of above them. */
.company-profile-form input[readonly],
.company-profile-form textarea[readonly] {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  cursor: default;
}

.company-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.company-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 10px 16px;
}

.company-actions .primary {
  border-color: #0066ff;
  background: #0066ff;
  color: #fff;
}

.company-actions[hidden] {
  display: none;
}

/* What the company chose not to show. Set by visibility-admin.js on the menu
   entry, on the view itself and on every card that jumps to it. !important for
   the same reason as [data-pending-feature]: several of these carry their own
   display rule. */
[data-hidden-by-company] {
  display: none !important;
}

/* Before the company's answer arrives, the toggleable parts stay out of the
   first paint, so a section the company turned off never flashes on screen.
   Cleared as soon as the configuration is known — and skipped entirely when a
   cached answer already told us what to draw. */
body[data-visibility="pending"] [data-visibility-node] {
  display: none !important;
}

.visibility-group {
  margin: 0 0 26px;
  max-width: 1000px;
}

/* A band in the Krewia palette, so a group reads as a group and the eye finds
   where one ends and the next begins. The left edge carries the brand gradient;
   the fill is the same soft blue the rest of the app uses for a highlighted row. */
.visibility-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 12px;
  padding: 12px 16px 12px 18px;
  border-radius: 12px;
  background: var(--soft, #eff6ff);
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, var(--accent, #0066ff), var(--krewia-cyan, #22c6f7)) 1 / 0 0 0 4px / 0;
}

.visibility-group > header h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #0066ff);
  margin: 0 0 3px;
}

.visibility-group > header p {
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
  max-width: 620px;
}

/* The default switch track is the same pale grey as the band, so it would melt
   into it. On the band the track goes white and the pressed state carries the
   soft blue instead. */
.visibility-bulk {
  flex: none;
  background: #fff;
  border: 1px solid #dbeafe;
}

.visibility-bulk button[aria-pressed="true"] {
  background: var(--soft, #eff6ff);
  box-shadow: none;
}

.visibility-block .layout-row h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0f172a);
  margin: 0 0 4px;
}

html[data-theme="dark"] .visibility-group > header {
  background: var(--dark-raised, #14233a) !important;
}

html[data-theme="dark"] .visibility-group > header h3 {
  color: #6fa7ff !important;
}

html[data-theme="dark"] .visibility-group > header p {
  color: #9babc3 !important;
}

html[data-theme="dark"] .visibility-bulk {
  background: var(--dark-shell, #0a1425) !important;
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .visibility-bulk button[aria-pressed="true"] {
  background: var(--dark-hover, #172945) !important;
}

@media (max-width: 760px) {
  .visibility-group > header {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Meu espaço: the category label was a pill the width of its own word, which
   made it read as a tag stuck on the card rather than the card's own heading.
   The colour moves to the header, so the label is as wide as the thing it
   names, and the action on the right rides the same band. */
.personal-space-page .space-card > header {
  padding: 13px 18px;
  border-bottom: 0;
}

.personal-space-page .space-card > header h2 {
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: 14px;
}

/* Minhas tarefas carries a subtitle beside its heading, which was grey on
   white and became grey on blue the moment the band moved here. */
.personal-space-page .space-card > header,
.personal-space-page .space-card > header * {
  color: #fff;
}

.personal-space-page .space-card > header small,
.personal-space-page .space-card > header p {
  opacity: 0.85;
}

.personal-space-page .space-tasks > header {
  background: linear-gradient(135deg, #0066ff, #2456db);
}

.personal-space-page .space-recent > header {
  background: linear-gradient(135deg, #069bd2, #22c6f7);
}

.personal-space-page .space-favorites > header {
  background: linear-gradient(135deg, #6654e8, #8b5cf6);
}

.personal-space-page .space-documents > header {
  background: linear-gradient(135deg, #075fe8, #5968ec);
}

/* A deeper shade of the Recentes cyan: same family, because it is the same
   list seen further back. */
.personal-space-page .space-history > header {
  background: linear-gradient(135deg, #056a8f, #0e9bc4);
}

/* The action was grey on white; on the band it has to be white too. */
.personal-space-page .space-card > header button {
  color: #fff !important;
  opacity: 0.9;
  border-radius: 7px;
  padding: 5px 9px;
}

.personal-space-page .space-card > header button:hover {
  background: #ffffff26;
  opacity: 1;
}

/* The dark theme paints every .space-card>header the same slate with
   !important, which would wipe the bands out. */
html[data-theme="dark"] .personal-space-page .space-tasks > header {
  background: linear-gradient(135deg, #0b52c4, #1d3f9e) !important;
}

html[data-theme="dark"] .personal-space-page .space-recent > header {
  background: linear-gradient(135deg, #0a76a1, #178fb4) !important;
}

html[data-theme="dark"] .personal-space-page .space-favorites > header {
  background: linear-gradient(135deg, #5040b4, #6b46c1) !important;
}

html[data-theme="dark"] .personal-space-page .space-documents > header {
  background: linear-gradient(135deg, #0a49b0, #4351b8) !important;
}

html[data-theme="dark"] .personal-space-page .space-history > header {
  background: linear-gradient(135deg, #064c67, #0b7292) !important;
}

html[data-theme="dark"] .personal-space-page .space-card > header h2 {
  color: #fff !important;
}

/* Two columns that end together, instead of one long one and a short one:
   Favoritos takes the first row on the right, and Histórico runs from the
   Recentes row down to where Meus documentos finishes. */
.personal-space-page .space-favorites {
  grid-column: 2;
  grid-row: 1;
}

.personal-space-page .space-history {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: flex;
  flex-direction: column;
  /* The grid aligns cards to the top, so this one has to ask to be stretched
     -- that is what makes it end where Meus documentos ends. */
  align-self: stretch;
}

.personal-space-page .space-history .history-list {
  border: 0;
  border-radius: 0;
  max-width: none;
  /* flex:1 with min-height:0 on the list, never on the card: putting it on the
     card let the whole thing collapse to the height of its header.
     The cap matters as much: a grid item spanning two rows still pushes their
     height, so without it a long history stretched the row and the column
     overshot Meus documentos by a screen and a half. Approximate on purpose --
     the left column's height depends on its own content, so pairing them to
     the pixel would mean measuring at runtime for a cosmetic gain. */
  flex: 1;
  min-height: 0;
  max-height: 58vh;
  overflow: auto;
}

.personal-space-page .space-history .people-status {
  margin: 0;
  padding: 10px 18px 0;
  font-size: 12px;
}

.personal-space-page .space-history .history-row {
  padding-right: 6px;
}

@media (max-width: 980px) {
  .personal-space-page .space-favorites,
  .personal-space-page .space-history {
    grid-column: auto;
    grid-row: auto;
  }

  .personal-space-page .space-history {
    align-self: auto;
  }

  .personal-space-page .space-history .history-list {
    flex: none;
    max-height: 420px;
  }
}

/* Consumo e orçamento: the headline numbers asked for "Manrope", a font this
   product never loads, so every figure fell back to whatever the system had
   and read as a different typeface from the rest of the page. And the cards
   carried no Krewia colour at all -- four white rectangles. */
/* The label becomes a band across the card, the same language as Meu espaço:
   a category name belongs to the whole card, not to its own word. */
.kpi-grid article {
  overflow: hidden;
  padding: 0;
}

.kpi-grid article > span {
  display: block;
  padding: 11px 18px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.kpi-grid article:nth-child(1) > span {
  background: linear-gradient(135deg, #0066ff, #2456db);
}

.kpi-grid article:nth-child(2) > span {
  background: linear-gradient(135deg, #069bd2, #22c6f7);
}

.kpi-grid article:nth-child(3) > span {
  background: linear-gradient(135deg, #6654e8, #8b5cf6);
}

.kpi-grid article:nth-child(4) > span {
  background: linear-gradient(135deg, #075fe8, #5968ec);
}

.kpi-grid strong {
  /* Asked for Manrope, which this product never loads, so every figure fell
     back to whatever the system had and read as a different typeface. */
  font: 700 1.75rem/1.15 inherit;
  font-family: inherit;
  letter-spacing: -0.02em;
  display: block;
  margin: 0;
  padding: 16px 18px 4px;
}

.kpi-grid small {
  display: block;
  padding: 0 18px 16px;
  font-size: 12px;
  line-height: 1.5;
}

/* The cost is the number anyone opens this screen for. */
.kpi-grid article:last-child strong {
  color: var(--accent, #0066ff);
}

html[data-theme="dark"] .kpi-grid article:last-child strong {
  color: #6fa7ff !important;
}

/* The tables get the same treatment, so the screen reads as one family. */
.usage-table > header {
  background: linear-gradient(135deg, #0f2d63, #1d4ed8);
  color: #fff !important;
  font-weight: 600;
  border-bottom: 0;
}

.usage-table > header > span {
  color: #fff;
}

html[data-theme="dark"] .usage-table > header {
  background: linear-gradient(135deg, #0a2350, #1a3f9e) !important;
}

.usage-heading {
  color: var(--accent, #0066ff);
}

html[data-theme="dark"] .usage-heading {
  color: #6fa7ff !important;
}

/* The charts come from the chat's renderer, so they arrive as .md-chart and
   need a card around them rather than styling of their own. */
/* Three and three, not six in a row: the first band is the timeline, the
   second is the snapshot that the month filter governs. auto-fit put all six
   on one line on a wide screen and the split stopped being readable. */
.usage-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

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

@media (max-width: 760px) {
  .usage-charts {
    grid-template-columns: 1fr;
  }
}

/* The filter sits between the two bands, because it governs the one below. */
.usage-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.usage-filter label {
  color: var(--muted);
  font-size: 13px;
}

.usage-filter select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
}

.usage-filter small {
  color: var(--muted);
  font-size: 12px;
}

html[data-theme="dark"] .usage-filter select {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #e8efff !important;
}

.usage-chart {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px;
  min-width: 0;
}

.usage-chart .md-chart {
  margin: 0;
}

/* The bar chart was sized for a chat bubble: min-width 500px and a 100px label
   column. In a 352px card it ran straight out the side. Here it fits the card
   and the labels take what is left. */
.usage-chart .mock-chart {
  min-width: 0;
  margin-top: 14px;
}

.usage-chart .mock-chart > div {
  grid-template-columns: minmax(0, 88px) minmax(40px, 1fr) auto;
  gap: 8px;
  font-size: 11px;
}

.usage-chart .mock-chart > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-chart .mock-chart strong {
  font-size: 11px;
  white-space: nowrap;
}

/* The stacked chart and the line chart carry their own minimums for the same
   reason. */
.usage-chart .md-stacked,
.usage-chart svg {
  min-width: 0;
  max-width: 100%;
}

.usage-chart > small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

html[data-theme="dark"] .usage-chart {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
}

/* Per person, opened under the row: the total says how much, this says on
   what. */
.usage-expand {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0 8px 0 0;
  transition: transform 0.15s;
  display: inline-block;
}

.usage-expand.is-open {
  transform: rotate(90deg);
  color: var(--accent, #0066ff);
}

.usage-breakdown {
  border-bottom: 1px solid var(--line);
  background: var(--soft, #eff6ff);
  padding: 4px 18px 10px;
}

.usage-breakdown[hidden] {
  display: none;
}

.usage-breakdown-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.8fr 0.8fr 1fr 1fr;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid #dbeafe;
}

.usage-breakdown-row:last-child {
  border-bottom: 0;
}

.usage-breakdown-row.is-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

html[data-theme="dark"] .usage-breakdown {
  background: var(--dark-raised, #14233a) !important;
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .usage-breakdown-row {
  border-color: var(--dark-line, #283852) !important;
}

@media (max-width: 860px) {
  .usage-breakdown-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .usage-breakdown-row.is-head {
    display: none;
  }

  .usage-breakdown-row span::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }
}

/* Sharing picks people, not a link. Chips accumulate in the field as they are
   chosen, which is the shape everyone already knows from an address line. */
.share-picker {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  position: relative;
  background: #fff;
}

.share-picker:focus-within {
  border-color: var(--accent, #0066ff);
}

.share-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.share-chips:not(:empty) {
  margin-bottom: 5px;
}

.share-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: var(--soft, #eff6ff);
  color: var(--accent, #0066ff);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 6px 4px 11px;
}

.share-chip button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0 3px;
}

.share-picker > input {
  width: 100%;
  border: 0 !important;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 6px 7px;
  min-height: 0 !important;
}

.share-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  max-height: 232px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 40px #0f172a1f;
}

.share-options[hidden] {
  display: none;
}

.share-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 9px 12px;
}

.share-option:hover {
  background: var(--soft, #eff6ff);
}

.share-option small {
  color: var(--muted);
  font-size: 12px;
}

.share-option em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: #b45309;
  white-space: nowrap;
}

/* Sending again is allowed: the conversation has moved on since. */
.share-warning {
  color: #b45309;
}

.share-warning[hidden] {
  display: none;
}

/* Received from a colleague, not started here. */
.sidebar-chat-link.is-shared > span:first-child {
  color: var(--accent, #0066ff);
}

html[data-theme="dark"] .share-picker,
html[data-theme="dark"] .share-options {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .share-chip {
  background: var(--dark-raised, #14233a) !important;
  color: #6fa7ff !important;
}

html[data-theme="dark"] .share-option:hover {
  background: var(--dark-hover, #172945) !important;
}

html[data-theme="dark"] .sidebar-chat-link.is-shared > span:first-child {
  color: #6fa7ff !important;
}

/* ---- Agentes: Administração Krewia ---- */

.agent-admin {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .agent-admin {
    grid-template-columns: 1fr;
  }
}

.agent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.agent-item,
.agent-new {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 11px 13px;
}

.agent-new {
  color: var(--accent, #0066ff);
  font-weight: 500;
  border-style: dashed;
}

.agent-item.is-current {
  border-color: var(--accent, #0066ff);
  background: var(--soft, #eff6ff);
}

.agent-item small {
  color: var(--muted);
  font-size: 12px;
}

.agent-form,
.agent-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
  margin-bottom: 12px;
}

.agent-form h3,
.agent-panel h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #0066ff);
  margin: 18px 0 10px;
}

.agent-form h3:first-child {
  margin-top: 0;
}

.agent-field {
  display: block;
  margin-bottom: 12px;
}

.agent-field > span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}

.agent-field input,
.agent-field textarea,
.agent-field select,
.agent-panel textarea,
.agent-panel select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
}

.agent-field textarea,
.agent-panel textarea {
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.55;
}

.agent-field > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.agent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 10px;
}

.agent-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.agent-check input {
  margin-top: 2px;
  accent-color: #0066ff;
}

.agent-try-bar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.agent-try-bar button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 9px 15px;
}

.agent-try-bar button.primary {
  border-color: var(--accent, #0066ff);
  background: var(--accent, #0066ff);
  color: #fff;
}

.agent-answer {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft, #eff6ff);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
}

.agent-answer[hidden] {
  display: none;
}

.agent-model-used {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

/* ---- Agentes: o que a empresa vê ---- */

.agent-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px;
  max-width: 1200px;
}

@media (max-width: 760px) {
  .agent-cards {
    grid-template-columns: 1fr;
  }
}

.agent-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px 22px;
}

.agent-card.is-owned {
  border-color: #bfdbfe;
}

.agent-card > header {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 14px;
}

.agent-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(145deg, #0066ff, #22c6f7);
  color: #fff;
  font-size: 19px;
}

.agent-card h2 {
  font-size: 18px;
  margin: 0 0 4px;
}

.agent-card > header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.agent-card > header em {
  margin-left: auto;
  flex: none;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #0066ff);
  background: var(--soft, #eff6ff);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.agent-card > header em.agent-state-on {
  color: #0f7a4f;
  background: #e6f6ee;
}

.agent-pitch {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
}

.agent-audience {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 14px;
}

.agent-highlights {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 7px;
}

.agent-highlights li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.55;
}

.agent-highlights li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent, #0066ff);
  font-weight: 700;
}

.agent-try {
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.agent-try h3 {
  font-size: 14px;
  margin: 0 0 3px;
}

.agent-trials {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}

.agent-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.agent-examples button {
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 6px 11px;
  text-align: left;
}

.agent-examples button:disabled {
  opacity: 0.5;
  cursor: default;
}

.agent-try textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  resize: vertical;
}

.agent-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.agent-card-foot button {
  border: 1px solid var(--accent, #0066ff);
  border-radius: 9px;
  background: var(--accent, #0066ff);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;
}

.agent-card-foot small {
  color: var(--muted);
  font-size: 12px;
}

html[data-theme="dark"] .agent-item,
html[data-theme="dark"] .agent-new,
html[data-theme="dark"] .agent-form,
html[data-theme="dark"] .agent-panel,
html[data-theme="dark"] .agent-card,
html[data-theme="dark"] .agent-examples button {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .agent-item.is-current,
html[data-theme="dark"] .agent-answer {
  background: var(--dark-raised, #14233a) !important;
}

html[data-theme="dark"] .agent-form h3,
html[data-theme="dark"] .agent-panel h3,
html[data-theme="dark"] .agent-card > header em,
html[data-theme="dark"] .agent-examples button,
html[data-theme="dark"] .agent-highlights li::before {
  color: #6fa7ff !important;
}

/* Clientes: cada empresa abre e conta a propria historia. */
.platform-table > div.is-openable {
  cursor: pointer;
}

.platform-table > div.is-openable:hover {
  background: var(--soft, #eff6ff);
}

#clientDetail > header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

#clientDetail > header h2 {
  font-size: 20px;
  margin: 0 0 4px;
}

#clientDetail > header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.client-close {
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
}

.client-section {
  margin-top: 22px;
  max-width: 1000px;
}

.client-section h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #0066ff);
  margin: 0 0 10px;
}

.client-agent,
.client-line {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 7px;
  font-size: 14px;
}

.client-agent > span:first-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--soft, #eff6ff);
  color: var(--accent, #0066ff);
}

.client-agent > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.client-agent small,
.client-line b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.client-agent button {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
}

.client-agent button.client-agent-on {
  border-color: #bbf0d4;
  background: #e6f6ee;
  color: #0f7a4f;
}

.client-line b {
  margin-left: auto;
  white-space: nowrap;
}

.agent-pending {
  color: #b45309 !important;
}

html[data-theme="dark"] .client-agent,
html[data-theme="dark"] .client-line {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .client-section h3 {
  color: #6fa7ff !important;
}

/* Recentes keeps the last few; the whole thing is one click below them. */
.sidebar-see-all {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
  padding: 8px 10px 6px;
}

.sidebar-see-all:hover {
  text-decoration: underline;
}

.history-list {
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  max-width: 900px;
  background: #fff;
}

.history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 4px 8px 4px 0;
}

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

.history-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
}

.history-open:hover {
  background: var(--soft, #eff6ff);
}

.history-open b {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-open small {
  color: var(--muted);
  font-size: 12px;
}

.history-star {
  flex: none;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 8px;
  border-radius: 8px;
}

.history-star.is-on {
  color: #d97706;
}

.history-star:hover {
  background: var(--soft, #eff6ff);
}

html[data-theme="dark"] .history-list {
  background: var(--dark-surface, #101c30) !important;
}

/* Sidebar switch for someone who belongs to more than one company. */
.org-switcher {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.org-switcher label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.org-switcher select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  padding: 8px;
}

.login-alt {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 0;
  background: none;
  color: #0066ff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

#inviteAccept #invitePasswordForm label,
#inviteAccept #inviteSignInForm label {
  display: block;
  margin-bottom: 9px;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
}

#inviteAccept #invitePasswordForm input,
#inviteAccept #inviteSignInForm input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dfe5ec;
  border-radius: 9px;
  min-height: 48px;
  padding: 12px 14px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
}

#inviteAccept .login-demo-note a {
  color: #0066ff;
}

/* Consumo e orcamento: totais reais por modelo e por pessoa. */
.usage-heading {
  margin: 26px 0 10px;
  font-size: 1.05rem;
}

.usage-table > header,
.usage-table > article {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #e9edef;
}

.usage-table > header {
  font-size: 0.72rem;
  color: #82909a;
  letter-spacing: 0.04em;
}

.usage-model-table > header,
.usage-model-table > article {
  grid-template-columns: .8fr 1fr 1.5fr .7fr .95fr 1.25fr;
}

.usage-user-table > header,
.usage-user-table > article {
  grid-template-columns: 2fr .8fr .8fr .8fr 1.25fr;
}

.usage-table > article > span:first-child {
  font-weight: 600;
}

/* A cost is a fraction of a cent, so it prints with eight decimals and wraps
   onto two lines in a normal column. Kept on one line, in a tabular face so
   the values line up down the column. */
.usage-table > header > span:last-child,
.usage-table > article > span:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#usageCost {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  word-break: normal;
}

.usage-empty {
  margin: 0;
  padding: 16px;
  color: var(--muted);
}

.usage-note {
  margin: 22px 0 0;
  max-width: 70ch;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

html[data-theme="dark"] .usage-table > header,
html[data-theme="dark"] .usage-table > article {
  border-bottom-color: #24324a;
}

@media (max-width: 760px) {
  /* Each row becomes a stacked card. Without the header, every value needs its
     column name beside it or the numbers mean nothing. */
  .usage-table > header {
    display: none;
  }

  .usage-table > article {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 14px 15px;
  }

  .usage-table > article > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
  }

  .usage-table > article > span[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
  }

  /* The first cell names the row, so it reads as a heading, not a field. */
  .usage-table > article > span:first-child {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
  }

  .usage-table > article > span:first-child::before {
    content: none;
  }

  .kpi-grid {
    gap: 8px;
  }

  /* The mock table hid every cell but the person on narrow screens. Status and
     the invitation actions have to survive, or a manager cannot act on a
     phone. */
  .people-table.live-people > article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .people-table.live-people > article > em,
  .people-table.live-people > article > .invitation-actions {
    display: flex;
  }

  .people-table.live-people > article > .role-select {
    grid-column: 1 / -1;
  }
}

/* ---- Agentes da propria empresa ---- */

.own-agents {
  margin-top: 34px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.own-agents > header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  max-width: 1200px;
}

.own-agents h2 {
  margin: 0 0 4px;
  font-size: 17px;
}

.own-agents > header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.own-agents > header button {
  margin-left: auto;
  flex: none;
  border: 1px solid var(--accent, #0066ff);
  border-radius: 9px;
  background: var(--accent, #0066ff);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;
}

.own-agents > header button[hidden] {
  display: none;
}

.agent-card.is-own {
  border-color: var(--soft-line, #cfe0ff);
}

/* O cartao da empresa tem dois botoes com pesos diferentes: usar e a acao,
   editar e o caminho de volta ao texto. */
.agent-card.is-own .agent-card-foot button:not(.primary) {
  background: #fff;
  color: var(--accent, #0066ff);
}

.agent-delete {
  margin-left: auto;
  border: 1px solid #f0c8c2;
  border-radius: 9px;
  background: #fff;
  color: #b42318;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;
}

html[data-theme="dark"] .agent-card.is-own .agent-card-foot button:not(.primary),
html[data-theme="dark"] .agent-delete {
  background: transparent !important;
}

/* Nome que o LiteLLM nao conhece. Nao impede salvar -- pode ser um modelo que
   ainda vai ser cadastrado la -- mas para de ser invisivel ate alguem esperar
   por uma resposta que nunca vem. */
.routing-row.routing-unknown input {
  border-color: #f0c8c2;
  background: #fff6f5;
  color: #b42318;
}

.routing-row.routing-unknown .routing-order {
  color: #b42318;
}

html[data-theme="dark"] .routing-row.routing-unknown input {
  background: transparent !important;
  border-color: #7a3b34 !important;
  color: #ff9b8f !important;
}

/* ---- Agentes: faixa por grupo ----
   A mesma faixa de Visibilidade: borda esquerda com o gradiente da marca e
   fundo no azul suave. Aqui ela responde a pergunta que o cartao sozinho nao
   respondia -- de quem e este agente, da Krewia ou de casa. */

.agent-band {
  margin: 0 0 30px;
  max-width: 1200px;
}

.agent-band > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 12px 16px 12px 18px;
  border-radius: 12px;
  background: var(--soft, #eff6ff);
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, var(--accent, #0066ff), var(--krewia-cyan, #22c6f7)) 1 / 0 0 0 4px / 0;
}

.agent-band > header h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #0066ff);
  margin: 0 0 3px;
}

.agent-band > header p {
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
  max-width: 660px;
}

.own-agents {
  border-top: 0;
  padding-top: 0;
}

html[data-theme="dark"] .agent-band > header {
  background: var(--dark-raised, #14233a) !important;
}

html[data-theme="dark"] .agent-band > header h2 {
  color: #6fa7ff !important;
}

/* ---- O editor toma a tela ----
   Escrever um agente e escrever a instrucao que responde por toda a empresa.
   Com o catalogo rolando atras, da para salvar no agente errado. */

.agents-live-page #ownAgentEditor {
  display: none;
}

.agents-live-page.is-editing > .page-head,
.agents-live-page.is-editing > #agentsCatalogStatus,
.agents-live-page.is-editing > .agent-band {
  display: none;
}

.agents-live-page.is-editing #ownAgentEditor {
  display: block;
}

.agent-editor-head {
  margin: 0 0 22px;
  max-width: 820px;
}

.agent-editor-head small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent, #0066ff);
  margin-bottom: 6px;
}

.agent-editor-head h1 {
  margin: 0 0 6px;
}

.agent-editor-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
}

.agent-back {
  margin: 0 0 16px;
}

.agent-back {
  flex: none;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
}

.agent-revoke {
  border: 1px solid #f0c8c2;
  border-radius: 9px;
  background: #fff;
  color: #b42318;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;
}

html[data-theme="dark"] .agent-back,
html[data-theme="dark"] .agent-revoke {
  background: transparent !important;
}

/* ---- Administracao Krewia no menu ----
   Ultima e em cor de aviso. Esta area nao e da empresa: e a operacao da
   Krewia olhando todas as empresas de uma vez, e vai sair daqui para uma
   aplicacao propria. Azul a faria parecer parte do produto do cliente. */

.b-sidebar .nav-section.nav-platform {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px dashed #e2e8f0;
}

.b-sidebar .nav-section.nav-platform > summary {
  background: linear-gradient(100deg, #fff4e0, #ffe9cc);
  border-radius: 10px;
  color: #b45309;
}

.b-sidebar .nav-section.nav-platform > summary::before {
  background: linear-gradient(180deg, #f59e0b, #ea580c) !important;
  width: 4px !important;
  height: 20px !important;
}

.b-sidebar .nav-section.nav-platform .nav-section-title {
  color: #b45309;
}

.b-sidebar .nav-section.nav-platform .group-chevron {
  color: #d97706;
}

.b-sidebar .nav-section.nav-platform .nav-section-content button[data-bview] {
  color: #92400e;
}

.b-sidebar .nav-section.nav-platform .nav-section-content button.active {
  background: #fff1dc !important;
  color: #b45309 !important;
}

html[data-theme="dark"] .b-sidebar .nav-section.nav-platform > summary {
  background: #3a2a12 !important;
  color: #fbbf24 !important;
}

html[data-theme="dark"] .b-sidebar .nav-section.nav-platform .nav-section-title,
html[data-theme="dark"] .b-sidebar .nav-section.nav-platform .nav-section-content button[data-bview] {
  color: #fbbf24 !important;
}

/* ---- Administracao Krewia: a lista de agentes tem dois donos ---- */

.agent-list-heading {
  margin: 18px 0 8px;
  padding: 0 4px;
}

.agent-list-heading b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent, #0066ff);
}

.agent-list-heading small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.agent-list-company {
  margin: 12px 0 6px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

/* O agente de empresa nao e da Krewia, e a lista diz isso antes de abrir. */
.agent-item.is-foreign {
  border-left: 3px solid #cbd5e1;
}

.agent-readonly-head h3 {
  margin: 0 0 6px;
}

.agent-source {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #334155;
  max-height: 420px;
  overflow: auto;
}

/* A ficha de um agente, dentro do cliente. */
.client-agent-open {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font: inherit;
}

.client-agent-open em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #0066ff);
}

html[data-theme="dark"] .agent-source,
html[data-theme="dark"] .client-agent-open {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #cbd5e1 !important;
}

/* ---- Suporte, agora com resposta de verdade ---- */

.support-message .md-body {
  font-size: 14px;
  line-height: 1.8;
  color: #334155;
  margin-top: 7px;
}

.support-message .md-body > *:first-child {
  margin-top: 0;
}

.support-message .md-body > *:last-child {
  margin-bottom: 0;
}

.support-status {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ---- Chamados ---- */

/* Ler um chamado e uma tela, nao um bloco embaixo da fila: a conversa inteira
   no meio de graficos nao se le. */
#platform-tickets #ticketDetail {
  display: none;
}

#platform-tickets.is-reading #ticketDetail {
  display: block;
}

#platform-tickets.is-reading > .page-head,
#platform-tickets.is-reading .ticket-filter,
#platform-tickets.is-reading #ticketTiles,
#platform-tickets.is-reading #ticketList,
#platform-tickets.is-reading #ticketCharts {
  display: none;
}

.ticket-filter {
  margin: 0 0 18px;
}

.ticket-list {
  max-width: 1000px;
  margin: 0 0 30px;
}

.ticket-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: 13px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  font: inherit;
}

.ticket-row.is-done {
  opacity: 0.72;
}

.ticket-row em {
  flex: none;
  width: 130px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #0066ff);
}

.ticket-row > div {
  flex: 1;
  min-width: 0;
}

.ticket-row b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-row small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.ticket-open,
.ticket-done {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 10px;
}

.ticket-open {
  color: #b45309;
  background: #fff4e0;
}

.ticket-done {
  color: #0f7a4f;
  background: #e6f6ee;
}

.ticket-transcript {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  max-height: 460px;
  overflow: auto;
  background: #f8fafc;
}

.ticket-turn {
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 10px;
}

.ticket-turn.from-user {
  background: #e8f1ff;
}

.ticket-turn b {
  font-size: 12px;
  color: var(--accent, #0066ff);
}

.ticket-turn .md-body {
  font-size: 13.5px;
  line-height: 1.75;
  color: #334155;
  margin-top: 6px;
}

.ticket-resolution {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.ticket-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  max-width: 1200px;
}

/* ---- O formulario de chamado, na lateral do Suporte ---- */

.support-ticket-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #dbe6f5;
}

.support-ticket-form h3 {
  margin: 0 0 14px;
  font-size: 15px;
}

.support-ticket-form label {
  display: block;
  margin-bottom: 12px;
}

.support-ticket-form label span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.support-ticket-form input,
.support-ticket-form select,
.support-ticket-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #dbe6f5;
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: #0f172a;
}

.support-ticket-form textarea {
  resize: vertical;
}

.support-ticket-form .platform-note {
  font-size: 12px;
  line-height: 1.6;
}

.support-ticket-form .company-actions {
  margin-top: 12px;
}

#supportRequests small.ticket-open,
#supportRequests small.ticket-done {
  display: inline-block;
  margin-top: 6px;
}

html[data-theme="dark"] .ticket-row,
html[data-theme="dark"] .ticket-transcript,
html[data-theme="dark"] .ticket-turn {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
}

/* O botao de recomecar mora no cabecalho da conversa, encostado a direita. */
.support-new {
  margin-left: auto;
  flex: none;
  border: 1px solid #dbe6f5;
  border-radius: 9px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 8px 12px;
}

.support-new[hidden] {
  display: none;
}

html[data-theme="dark"] .support-new {
  background: transparent !important;
  border-color: var(--dark-line, #283852) !important;
}

/* A tela do suporte antes de a conversa comecar. Ela existe para que a
   conversa tenha um comeco: sem isso, cada visita herdava a anterior. */
.support-start {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 2px 10px;
}

.support-start[hidden] {
  display: none;
}

.support-start h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  color: #0f172a;
}

.support-start p {
  margin: 0;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.75;
  color: #64748b;
}

.support-start button {
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #0066ff);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  padding: 12px 22px;
}

#supportMessages[hidden],
#supportForm[hidden] {
  display: none;
}

/* ---- Kanban ----
   Referencia declarada: Trello. Coluna com fundo proprio, cartao branco
   flutuando dentro dela, e a cor do topo dizendo em que etapa voce esta. */

.board-toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.board-tabs {
  margin-left: auto;
}

.kanban-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  align-items: start;
  max-width: 1400px;
}

.kanban-column {
  border: 0;
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
  /* collaboration.css, do mock, poe 13px aqui e a faixa nao chegava na borda. */
  padding: 0;
}

/* A mesma faixa dos cartões de Meu espaço: degradê de ponta a ponta, título
   branco. Antes era uma etiqueta clara em caixa alta, e o Kanban parecia
   outro produto ao lado de Meu espaço. */
.kanban-column > header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 13px 18px;
  margin: 0;
  color: #fff;
  background: linear-gradient(135deg, #0066ff, #2456db);
}

.kanban-column > header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.kanban-column > header > span {
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  color: #fff;
  background: #ffffff2e;
}

.kanban-column > header > button {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: #ffffff26;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.kanban-column > header > button:hover {
  background: #ffffff40;
}

/* Uma cor por etapa, das famílias que Meu espaço já usa: o azul de Minhas
   tarefas para o que espera, o ciano de Recentes para o que anda, e verde
   para o que acabou. */
.kanban-column[data-stage="fazendo"] > header {
  background: linear-gradient(135deg, #069bd2, #22c6f7);
}

.kanban-column[data-stage="concluida"] > header {
  background: linear-gradient(135deg, #0f8a5f, #16a34a);
}

.kanban-column.drag-target {
  background: #e2ebff;
  outline: 2px dashed var(--accent, #0066ff);
  outline-offset: -4px;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
}

.kanban-card {
  border: 1px solid #e6ecf5;
  border-radius: 11px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  cursor: grab;
}

/* Onde o cartao arrastado vai cair: uma linha azul acima ou abaixo. */
.kanban-card.drop-antes {
  box-shadow: 0 -3px 0 0 var(--accent, #0066ff);
}

.kanban-card.drop-depois {
  box-shadow: 0 3px 0 0 var(--accent, #0066ff);
}

/* Filtro do quadro de time. Ligado, fica azul como a aba escolhida. */
.board-filter {
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
}

.board-filter:hover {
  background: #eaf2ff;
}

.board-filter[aria-pressed="true"] {
  border-color: var(--accent, #0066ff);
  background: #eaf2ff;
  color: #0056d8;
}

/* So no quadro de time; ali ele toma o lugar das abas na direita. */
#kanban .board-filter {
  display: none;
}

#kanban.is-team-board .board-filter {
  display: inline-block;
  margin-left: auto;
}

#kanban.is-team-board .board-tabs {
  margin-left: 0;
}

.kanban-card:active {
  cursor: grabbing;
}

.task-open {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.task-open h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #0f172a;
}

.task-open p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.card-marks span {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 7px;
}

.kanban-card > footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: #64748b;
}

.kanban-card > footer time {
  margin-left: auto;
  border-radius: 6px;
  padding: 3px 7px;
}

/* Responsavel e prazo sao etiquetas, lado a lado. O responsavel e sempre
   azul; o prazo so ganha cor quando quer dizer alguma coisa. */
.task-owner,
.kanban-card > footer time {
  border-radius: 6px;
  padding: 3px 7px;
  font-weight: 600;
}

.task-owner {
  color: #0056d8;
  background: #eaf2ff;
}

.task-owner.is-empty {
  color: #64748b;
  background: #f1f5f9;
  font-weight: 500;
}

.kanban-card > footer time {
  color: #475569;
  background: #f1f5f9;
  font-weight: 500;
}

/* Prazo chegando e prazo vencido: a unica cor da tela que quer dizer algo. */
.kanban-card > footer time.is-soon,
.space-task-row time.is-soon {
  color: #92400e;
  background: #fef3c7;
  font-weight: 600;
}

.kanban-card > footer time.is-late,
.space-task-row time.is-late {
  color: #b42318;
  background: #fee4e2;
  font-weight: 600;
}

.column-empty {
  margin: 4px 0;
  padding: 14px 4px;
  text-align: center;
  font-size: 12.5px;
  color: #94a3b8;
}

.column-more {
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 9px;
}

.task-move {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* Arrastar nao existe no celular, e esta tela precisa funcionar la. */
.task-move button {
  flex: 1;
  border: 1px solid #e6ecf5;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 5px 0;
}

.task-move button:disabled {
  color: #cbd5e1;
  cursor: default;
}

/* ---- a tarefa aberta toma a tela ---- */

#kanban #taskDetail {
  display: none;
}

#kanban.is-reading #taskDetail {
  display: block;
}

#kanban.is-reading > .page-head,
#kanban.is-reading .board-toolbar,
#kanban.is-reading .kanban-columns,
#kanban.is-reading .done-list,
#kanban.is-reading .people-status {
  display: none;
}

/* O historico e uma aba inteira, nao um bloco embaixo do quadro: com muita
   tarefa concluida a rolagem ficava impossivel. */
#kanban .done-list {
  display: none;
  max-width: 900px;
}

#kanban.is-history .done-list {
  display: block;
}

#kanban.is-history .kanban-columns,
#kanban.is-history #newTask {
  display: none;
}

.task-editor,
.chat-task-form {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 22px 24px;
  margin: 0 0 18px;
  max-width: 760px;
}

.chat-task-form {
  margin: 14px 0 4px;
  max-width: 620px;
}

.task-editor h3,
.chat-task-form h3 {
  margin: 0 0 16px;
  font-size: 16px;
}

.task-editor label,
.chat-task-form label {
  display: block;
  margin-bottom: 13px;
}

.task-editor label > span,
.chat-task-form label > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.task-editor input,
.task-editor select,
.task-editor textarea,
.chat-task-form input,
.chat-task-form select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: #0f172a;
}

.task-editor textarea {
  resize: vertical;
}

.task-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.task-attachment {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f8fafc;
  padding: 14px 16px;
  margin: 0 0 14px;
  max-height: 340px;
  overflow: auto;
}

/* Uma pagina HTML ja tem a propria moldura, com Ampliar e Baixar. Dentro de
   uma caixa de 340px que rolava, o deck ficava espremido e os botoes dele
   sumiam la embaixo. */
.task-attachment.has-page {
  max-height: none;
  overflow: visible;
}

.comment .task-attachment {
  margin: 8px 0 0;
}

.task-attachment > b {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--accent, #0066ff);
}

.task-attachment .md-body {
  font-size: 13.5px;
  line-height: 1.75;
  color: #334155;
}

/* ---- comentarios ---- */

.task-comments {
  max-width: 760px;
}

.task-comments h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.comment {
  border-left: 3px solid var(--soft-line, #dbeafe);
  padding: 2px 0 2px 14px;
  margin-bottom: 14px;
}

.comment b {
  font-size: 13px;
  color: #0f172a;
}

.comment time {
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.comment p {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #334155;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 16px;
}

.comment-form textarea {
  flex: 1;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.comment-form button {
  flex: none;
  border: 0;
  border-radius: 9px;
  background: var(--accent, #0066ff);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 11px 18px;
}

/* ---- o historico ---- */

.done-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  padding: 12px 16px;
  margin-bottom: 8px;
}

.done-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.done-open b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  text-decoration: line-through;
  text-decoration-color: #cbd5e1;
}

.done-open small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.done-row > button:last-child {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
}

/* ---- Kanban no modo noturno ----
   Antes so o fundo mudava: a faixa clara das colunas ficava com texto azul
   sobre azul-claro, o titulo do cartao escuro sobre fundo escuro, e cada
   etiqueta continuava com as cores do dia. Aqui vai tudo, na paleta do resto
   do produto (--dark-*) e com os degradês escurecidos do Meu espaco. */
html[data-theme="dark"] .kanban-column {
  background: var(--dark-shell, #0a1425) !important;
  border: 1px solid var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .kanban-column > header {
  background: linear-gradient(135deg, #0b52c4, #1d3f9e) !important;
  border: 0 !important;
}

html[data-theme="dark"] .kanban-column[data-stage="fazendo"] > header {
  background: linear-gradient(135deg, #0a76a1, #178fb4) !important;
}

html[data-theme="dark"] .kanban-column[data-stage="concluida"] > header {
  background: linear-gradient(135deg, #0b6446, #11803d) !important;
}

html[data-theme="dark"] .kanban-column > header h2,
html[data-theme="dark"] .kanban-column > header > span,
html[data-theme="dark"] .kanban-column > header > button {
  color: #fff !important;
}

html[data-theme="dark"] .kanban-column.drag-target {
  background: var(--dark-hover, #172945) !important;
}

html[data-theme="dark"] .kanban-card,
html[data-theme="dark"] .task-editor,
html[data-theme="dark"] .chat-task-form,
html[data-theme="dark"] .done-row {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .board-filter {
  background: var(--dark-raised, #14233a) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #c7d5ed !important;
}

html[data-theme="dark"] .board-filter[aria-pressed="true"] {
  background: #16325f !important;
  border-color: #3b82f6 !important;
  color: #9cc3ff !important;
}

html[data-theme="dark"] .kanban-card.drop-antes {
  box-shadow: 0 -3px 0 0 #3b82f6 !important;
}

html[data-theme="dark"] .kanban-card.drop-depois {
  box-shadow: 0 3px 0 0 #3b82f6 !important;
}

html[data-theme="dark"] .kanban-card:hover {
  border-color: #3a5176 !important;
}

html[data-theme="dark"] .task-open h3,
html[data-theme="dark"] .done-open b,
html[data-theme="dark"] .comment b,
html[data-theme="dark"] .chat-task-preview > b,
html[data-theme="dark"] .task-comments h3,
html[data-theme="dark"] .task-editor h3,
html[data-theme="dark"] .chat-task-form h3 {
  color: #edf3ff !important;
}

html[data-theme="dark"] .task-open p,
html[data-theme="dark"] .done-open small,
html[data-theme="dark"] .kanban-card > footer,
html[data-theme="dark"] .column-empty,
html[data-theme="dark"] .comment time,
html[data-theme="dark"] .chat-task-preview > p {
  color: #9babc3 !important;
}

html[data-theme="dark"] .card-marks span,
html[data-theme="dark"] .task-owner.is-empty,
html[data-theme="dark"] .kanban-card > footer time,
html[data-theme="dark"] .chat-task-marks span {
  background: var(--dark-raised, #14233a) !important;
  color: #b4c3da !important;
}

html[data-theme="dark"] .task-owner:not(.is-empty),
html[data-theme="dark"] .chat-task-marks .task-owner:not(.is-empty) {
  background: #16325f !important;
  color: #9cc3ff !important;
}

html[data-theme="dark"] .kanban-card > footer time.is-soon,
html[data-theme="dark"] .space-task-row time.is-soon,
html[data-theme="dark"] .chat-task-marks .is-soon {
  background: #3d2c0a !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] .kanban-card > footer time.is-late,
html[data-theme="dark"] .space-task-row time.is-late,
html[data-theme="dark"] .chat-task-marks .is-late {
  background: #45161a !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .chat-task-marks .task-owner:not(.is-empty) {
  color: #0056d8;
  background: #eaf2ff;
  font-weight: 600;
}

.chat-task-marks .is-stage {
  background: #0b52c4 !important;
  color: #fff !important;
}

html[data-theme="dark"] .chat-task-marks .stage-fazendo {
  background: #0a76a1 !important;
}

html[data-theme="dark"] .task-move button,
html[data-theme="dark"] .column-more,
html[data-theme="dark"] .done-row > button:last-child {
  background: var(--dark-raised, #14233a) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #8ab6ff !important;
}

html[data-theme="dark"] .task-move button:hover:not(:disabled),
html[data-theme="dark"] .column-more:hover {
  background: var(--dark-hover, #172945) !important;
}

html[data-theme="dark"] .task-move button:disabled {
  color: #3a4a63 !important;
}

html[data-theme="dark"] .task-editor label > span,
html[data-theme="dark"] .chat-task-form label > span {
  color: #b4c3da !important;
}

html[data-theme="dark"] .task-editor input,
html[data-theme="dark"] .task-editor select,
html[data-theme="dark"] .task-editor textarea,
html[data-theme="dark"] .chat-task-form input,
html[data-theme="dark"] .chat-task-form select,
html[data-theme="dark"] .chat-task-form textarea,
html[data-theme="dark"] .comment-form textarea {
  background: var(--dark-shell, #0a1425) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #edf3ff !important;
  color-scheme: dark;
}

html[data-theme="dark"] .task-attachment,
html[data-theme="dark"] .chat-task-preview {
  background: var(--dark-shell, #0a1425) !important;
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .chat-task-preview {
  border-left-color: #3b82f6 !important;
}

html[data-theme="dark"] .task-attachment > b {
  color: #8ab6ff !important;
}

html[data-theme="dark"] .task-attachment .md-body,
html[data-theme="dark"] .comment p {
  color: #cdd8ea !important;
}

html[data-theme="dark"] .comment {
  border-left-color: #2b4677 !important;
}

html[data-theme="dark"] .comment-actions button {
  background: var(--dark-raised, #14233a) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #8ab6ff !important;
}

html[data-theme="dark"] .comment-actions button:hover {
  background: var(--dark-hover, #172945) !important;
}

html[data-theme="dark"] .comment-actions .comment-remove {
  color: #fca5a5 !important;
  border-color: #5b2227 !important;
}

html[data-theme="dark"] .comment-actions .comment-remove:hover {
  background: #45161a !important;
}

html[data-theme="dark"] .done-open b {
  text-decoration-color: #4b5d7a !important;
}

/* ---- O sino ----
   No alto do menu, junto da marca: e o unico canto que existe em toda tela,
   e a gaveta do celular abre por ali tambem. */

.b-sidebar > header {
  position: relative;
}

/* O mesmo botão do modo noturno, ao lado dele: borda, fundo e cor do texto. */
.sidebar-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.sidebar-bell:hover {
  background: #eaf2ff;
  color: #0066ff;
}

.bell-glyph {
  display: block;
  transform-origin: 50% 10%;
}

html[data-theme="dark"] .sidebar-bell {
  background: var(--dark-raised, #14233a) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #c7d5ed !important;
}

html[data-theme="dark"] .sidebar-bell:hover {
  background: var(--dark-hover, #172945) !important;
  color: #7db0ff !important;
}

.sidebar-bell[hidden] {
  display: none;
}

.sidebar-bell.has-news .bell-glyph {
  animation: bell-nudge 1.4s ease-in-out 2;
}

@keyframes bell-nudge {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-bell.has-news .bell-glyph { animation: none; }
}

.bell-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
}

.bell-count[hidden] {
  display: none;
}

.bell-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 8px;
  right: 8px;
  z-index: 40;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.bell-panel[hidden] {
  display: none;
}

.bell-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.bell-panel > header b {
  font-size: 13px;
}

.bell-panel > header button {
  border: 0;
  background: none;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  padding: 0;
}

.bell-list {
  max-height: 420px;
  overflow: auto;
}

.bell-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  background: none;
  cursor: pointer;
  font: inherit;
  padding: 12px 14px;
}

.bell-item:hover {
  background: #f8fafc;
}

/* O nao lido nao muda de cor de fundo: muda de peso e ganha um ponto. Fundo
   colorido em lista longa vira listra de zebra e cansa. */
.bell-item.is-new b::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent, #0066ff);
}

.bell-item b {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  line-height: 1.45;
}

.bell-item.is-new b {
  font-weight: 700;
  color: #0f172a;
}

.bell-item p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bell-item small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
}

.bell-empty {
  margin: 0;
  padding: 26px 14px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
}

/* O sino nunca passa da altura da janela (13/10/2026): a agenda, as tarefas
   e os avisos rolam dentro dele, e o historico inteiro fica na tela Avisos. */
.bell-panel {
  max-height: calc(100vh - 84px);
  overflow: auto;
}

.bell-footer {
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  text-align: center;
}

.bell-footer[hidden] {
  display: none;
}

.bell-footer button {
  border: 0;
  background: none;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0;
}

/* Inicio > Avisos: o historico do sino. */
.notifications-page {
  padding: 32px clamp(20px, 3.5vw, 54px) 48px;
  overflow: auto;
}

.notifications-page.active {
  display: block;
}

.notifications-page .page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.notifications-read-all,
.notifications-more,
.notifications-filter button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
}

.notifications-filter {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.notifications-filter button.is-active {
  border-color: var(--accent, #0066ff);
  background: var(--accent, #0066ff);
  color: #fff;
}

.notifications-page .notifications-list {
  max-width: 760px;
  max-height: none;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.notifications-page .bell-item:last-child {
  border-bottom: 0;
}

.notifications-more {
  display: block;
  margin: 16px 0 0;
}

.notifications-more[hidden] {
  display: none;
}

html[data-theme="dark"] .notifications-page .notifications-list,
html[data-theme="dark"] .notifications-read-all,
html[data-theme="dark"] .notifications-more,
html[data-theme="dark"] .notifications-filter button:not(.is-active) {
  background: var(--dark-surface, #101c30);
  border-color: var(--dark-line, #283852);
  color: #cbd5e1;
}

html[data-theme="dark"] .notifications-page .bell-item {
  border-bottom-color: var(--dark-line, #283852);
}

html[data-theme="dark"] .notifications-page .bell-item b {
  color: #cbd5e1;
}

html[data-theme="dark"] .notifications-page .bell-item.is-new b {
  color: #f8fafc;
}

html[data-theme="dark"] .notifications-page .bell-item p {
  color: #94a3b8;
}

html[data-theme="dark"] .notifications-page .bell-item:hover {
  background: rgba(148, 163, 184, 0.08);
}

/* ---- comentario: editar e apagar ---- */

.comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.comment-actions button {
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #0056d8;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
}

.comment-actions button:hover {
  background: #eaf2ff;
  border-color: #bcd3f7;
}

.comment-actions .comment-remove {
  color: #b42318;
  border-color: #f5c2bd;
}

.comment-actions .comment-remove:hover {
  background: #fee4e2;
  border-color: #f1a39b;
}

.comment-edit {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 6px;
  flex-wrap: wrap;
}

.comment-edit textarea {
  flex: 1;
  min-width: 220px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  font-size: 13.5px;
  resize: vertical;
}

.comment-edit button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 8px 13px;
}

.comment-edit button.primary {
  border-color: var(--accent, #0066ff);
  background: var(--accent, #0066ff);
  color: #fff;
}

/* ---- o chat escolhendo entre criar e comentar ---- */

.chat-task-mode {
  margin: 0 0 14px;
}

.chat-task-existing[hidden] {
  display: none;
}

/* Quadro pessoal: a tarefa e da pessoa do quadro, nao ha responsavel. */
.chat-task-form.is-personal .chat-task-assignee {
  display: none;
}

/* Comentando, o que so serve para criar tarefa sai da frente. */
.chat-task-form.is-comment > label:not(.agent-check),
.chat-task-form.is-comment > .task-row {
  display: none;
}

/* O estilo dos campos do formulario (bloco, largura toda) pegava o checkbox
   tambem, e ele ficava sozinho numa linha acima do texto. */
.chat-task-form .agent-check {
  display: flex;
  align-items: center;
  gap: 9px;
}

.chat-task-form .agent-check input {
  display: inline-block;
  width: auto;
  margin: 0;
  flex: none;
}

.chat-task-form .agent-check > span {
  display: inline;
  margin: 0;
  font-weight: 500;
}

/* O cartao que vai receber o comentario, antes de mandar. */
.chat-task-preview:empty {
  display: none;
}

.chat-task-preview {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent, #0066ff);
  border-radius: 11px;
  background: #f8fafc;
  padding: 12px 14px;
  margin: -4px 0 14px;
}

.chat-task-preview > b {
  display: block;
  font-size: 14px;
  color: #0f172a;
}

.chat-task-preview > p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-task-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.chat-task-marks span {
  font-size: 11.5px;
  border-radius: 6px;
  padding: 3px 7px;
  color: #475569;
  background: #eef2f7;
}

.chat-task-marks .is-stage {
  color: #fff;
  background: #0066ff;
  font-weight: 600;
}

.chat-task-marks .stage-fazendo {
  background: #0891b2;
}

.chat-task-marks .is-late {
  color: #b42318;
  background: #fee4e2;
  font-weight: 600;
}

.chat-task-marks .is-soon {
  color: #92400e;
  background: #fef3c7;
  font-weight: 600;
}

.chat-task-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: #0f172a;
  resize: vertical;
}

html[data-theme="dark"] .bell-panel,
html[data-theme="dark"] .comment-edit textarea,
html[data-theme="dark"] .comment-edit button {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
}

/* ---- Documentos ----
   Meus documentos e Documentos da colaboracao sao a mesma tela, montada por
   documents-live.js no lugar do mock. */

.docs-live {
  padding: 32px clamp(20px, 3.5vw, 54px);
  overflow: auto;
}

.docs-live .workspace-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.docs-live .workspace-head h1 {
  margin: 5px 0 8px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -1px;
  color: #0f172a;
}

.docs-live .workspace-head small {
  color: #0066ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.docs-live .workspace-head p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.65;
}

.docs-live .workspace-actions {
  display: flex;
  gap: 10px;
}

.docs-live .workspace-actions button {
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
}

.docs-live .workspace-actions button.primary {
  border-color: var(--accent, #0066ff);
  background: var(--accent, #0066ff);
  color: #fff;
}

.docs-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 13px;
  color: #94a3b8;
}

.docs-trail button {
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  padding: 4px 6px;
}

.docs-trail button[aria-current="page"] {
  color: #0f172a;
  font-weight: 600;
  cursor: default;
}

/* Formulario de nova pasta: so aparece quando pedido. Classe na pagina, nao
   [hidden], pela armadilha de sempre com display. */
.docs-folder-form {
  display: none;
  gap: 8px;
  max-width: 560px;
  margin: 0 0 12px;
}

.docs-live.is-naming .docs-folder-form {
  display: flex;
}

.docs-folder-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #dbe4f0);
  border-radius: 9px;
  font: inherit;
  font-size: 14px;
}

.docs-folder-form button {
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 9px 14px;
}

.docs-folder-form button.primary {
  border-color: var(--accent, #0066ff);
  background: var(--accent, #0066ff);
  color: #fff;
}

.docs-drop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 980px;
  min-height: 140px;
  border-radius: 14px;
  outline: 2px dashed transparent;
  outline-offset: 6px;
  transition: outline-color 0.15s;
}

.docs-live.is-dropping .docs-drop {
  outline-color: var(--accent, #0066ff);
  background: #f5f9ff;
}

.docs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e6ecf5;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}

.docs-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
}

.docs-open > span:last-child {
  min-width: 0;
}

.docs-open b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-open small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #64748b;
}

.docs-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eaf2ff;
  color: #0066ff;
  font-size: 18px;
}

.docs-icon.is-file {
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.docs-action,
.docs-remove {
  flex: none;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #0056d8;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
}

.docs-remove {
  color: #b42318;
  border-color: #f5c2bd;
}

.docs-action:hover {
  background: #eaf2ff;
}

.docs-remove:hover {
  background: #fee4e2;
}

.docs-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 34px 20px;
  text-align: center;
  color: #64748b;
}

.docs-empty b {
  display: block;
  color: #0f172a;
  font-size: 15px;
  margin-bottom: 6px;
}

.docs-empty p {
  margin: 0;
  font-size: 13px;
}

.docs-status[data-state="warn"] {
  color: #92400e;
}

.docs-status[data-state="ok"] {
  color: #0f7a4f;
}

@media (max-width: 640px) {
  .docs-live .workspace-actions {
    width: 100%;
  }

  .docs-live .workspace-actions button {
    flex: 1;
  }

  .docs-row .docs-action {
    display: none;
  }
}

html[data-theme="dark"] .docs-live .workspace-head h1,
html[data-theme="dark"] .docs-open b,
html[data-theme="dark"] .docs-empty b,
html[data-theme="dark"] .docs-trail button[aria-current="page"] {
  color: #edf3ff !important;
}

html[data-theme="dark"] .docs-live .workspace-head p,
html[data-theme="dark"] .docs-open small,
html[data-theme="dark"] .docs-empty {
  color: #9babc3 !important;
}

html[data-theme="dark"] .docs-row,
html[data-theme="dark"] .docs-live .workspace-actions button:not(.primary),
html[data-theme="dark"] .docs-folder-form button:not(.primary),
html[data-theme="dark"] .docs-action {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #c7d5ed !important;
}

html[data-theme="dark"] .docs-action {
  color: #8ab6ff !important;
}

html[data-theme="dark"] .docs-remove {
  background: var(--dark-surface, #101c30) !important;
  border-color: #5b2227 !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .docs-folder-form input {
  background: var(--dark-shell, #0a1425) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #edf3ff !important;
}

html[data-theme="dark"] .docs-icon {
  background: #16325f !important;
  color: #9cc3ff !important;
}

html[data-theme="dark"] .docs-icon.is-file {
  background: var(--dark-raised, #14233a) !important;
  color: #b4c3da !important;
}

html[data-theme="dark"] .docs-empty {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .docs-live.is-dropping .docs-drop {
  background: #0d1b33 !important;
}

/* ---- Documento anexado no chat ---- */

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 0 6px;
}

.message-attachments span {
  font-size: 12px;
  font-weight: 600;
  color: #0056d8;
  background: #eaf2ff;
  border-radius: 8px;
  padding: 4px 9px;
}

.chat-attachment-preview[data-state="error"] small {
  color: #b42318;
}

.chat-attachment-preview[data-state="busy"] small {
  color: #64748b;
}

.chat-document-empty {
  margin: 0;
  padding: 22px 10px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
}

html[data-theme="dark"] .message-attachments span {
  background: #16325f !important;
  color: #9cc3ff !important;
}

html[data-theme="dark"] .chat-attachment-preview[data-state="error"] small {
  color: #fca5a5 !important;
}

html[data-theme="dark"] .chat-document-empty {
  color: #9babc3 !important;
}

/* Tipo do arquivo no cartao "Meus documentos" do Meu espaco. */
.space-file-glyph {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #f1f5f9;
  color: #475569;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

html[data-theme="dark"] .space-file-glyph {
  background: var(--dark-raised, #14233a) !important;
  color: #b4c3da !important;
}

/* ---- Documentos: somente leitura e o visor ---- */

.docs-readonly-note {
  display: none;
  margin: 0 0 12px;
  font-size: 13px;
  color: #64748b;
}

.docs-live.is-readonly .docs-readonly-note {
  display: block;
}

.docs-live.is-readonly .workspace-actions,
.docs-live.is-readonly .docs-folder-form {
  display: none !important;
}

.docs-viewer {
  display: none;
  max-width: 980px;
}

.docs-live.is-viewing .docs-viewer {
  display: block;
}

.docs-live.is-viewing .docs-drop,
.docs-live.is-viewing .docs-folder-form,
.docs-live.is-viewing .docs-readonly-note {
  display: none !important;
}

.docs-viewer > header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.docs-viewer > header b {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-viewer-body {
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  background: #fff;
  padding: 22px 26px;
  color: #334155;
  font-size: 14px;
  line-height: 1.75;
}

.docs-viewer-body .md-html {
  margin: 0;
}

.docs-plain {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
}

.docs-table {
  overflow: auto;
  max-height: 70vh;
}

.docs-table table {
  border-collapse: collapse;
  font-size: 13px;
}

.docs-table th,
.docs-table td {
  border: 1px solid #e6ecf5;
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}

.docs-table th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  font-weight: 700;
}

html[data-theme="dark"] .docs-viewer > header b {
  color: #edf3ff !important;
}

html[data-theme="dark"] .docs-viewer-body {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #cdd8ea !important;
}

html[data-theme="dark"] .docs-table th,
html[data-theme="dark"] .docs-table td {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .docs-table th {
  background: var(--dark-raised, #14233a) !important;
  color: #edf3ff !important;
}

html[data-theme="dark"] .docs-readonly-note {
  color: #9babc3 !important;
}

/* ---- Salvar resposta do chat em documentos ---- */

.save-doc-dialog {
  width: min(520px, calc(100vw - 28px));
}

.save-doc-dialog .mode-switch {
  margin: 0 0 14px;
}

.save-doc-trail {
  margin: 0 0 8px;
}

.save-doc-folders {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  margin: 0 0 16px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 11px;
  padding: 6px;
}

.save-doc-folders button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 12px;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 9px 10px;
  color: #0f172a;
}

.save-doc-folders button:hover {
  background: #eaf2ff;
}

.save-doc-folders button span {
  color: #0066ff;
}

.save-doc-folders button b {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-doc-folders button i {
  font-style: normal;
  color: #94a3b8;
}

.save-doc-folders p {
  margin: 0;
  padding: 10px;
  font-size: 13px;
  color: #64748b;
}

.save-doc-name {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.save-doc-name input {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
}

.save-doc-name em {
  font-style: normal;
  font-size: 14px;
  color: #64748b;
}

html[data-theme="dark"] .save-doc-folders {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .save-doc-folders button {
  color: #edf3ff !important;
}

html[data-theme="dark"] .save-doc-folders button:hover {
  background: var(--dark-hover, #172945) !important;
}

html[data-theme="dark"] .save-doc-folders p,
html[data-theme="dark"] .save-doc-name em {
  color: #9babc3 !important;
}

/* Mesmo jeito do "Criar tarefa" ao lado. */
.message-save-doc-action {
  border: 0;
  background: none;
  color: #64748b;
  font: 500 12px Inter, sans-serif;
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
}

.message-save-doc-action:hover {
  background: #eaf2ff;
  color: #0066ff;
}

html[data-theme="dark"] .message-save-doc-action {
  color: #9babc3 !important;
}

html[data-theme="dark"] .message-save-doc-action:hover {
  background: var(--dark-hover, #172945) !important;
  color: #8ab6ff !important;
}

/* ---- Leitura de PDF, Word e Excel: avisos e estado ---- */

/* Os limites da leitura, acima do texto: amarelo de aviso, nao de erro. */
.docs-notes {
  border: 1px solid #fde68a;
  border-radius: 10px;
  background: #fffbeb;
  padding: 10px 14px;
  margin: 0 0 16px;
}

.docs-notes p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #92400e;
}

.docs-notes p + p {
  margin-top: 6px;
}

.docs-waiting {
  margin: 0 0 14px;
  color: #64748b;
}

.docs-reading {
  font-style: normal;
  font-weight: 600;
  border-radius: 6px;
  padding: 1px 6px;
}

.docs-reading.is-reading {
  color: #0056d8;
  background: #eaf2ff;
}

.docs-reading.is-warn {
  color: #92400e;
  background: #fef3c7;
}

.docs-reading.is-error {
  color: #b42318;
  background: #fee4e2;
}

.chat-attachment-preview[data-state="warn"] small {
  color: #92400e;
}

.chat-document-list button.is-refused {
  opacity: 0.55;
  cursor: not-allowed;
}

html[data-theme="dark"] .docs-notes {
  background: #2a2008 !important;
  border-color: #5c4712 !important;
}

html[data-theme="dark"] .docs-notes p {
  color: #fcd34d !important;
}

html[data-theme="dark"] .docs-waiting {
  color: #9babc3 !important;
}

html[data-theme="dark"] .docs-reading.is-reading {
  background: #16325f !important;
  color: #9cc3ff !important;
}

html[data-theme="dark"] .docs-reading.is-warn {
  background: #3d2c0a !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] .docs-reading.is-error {
  background: #45161a !important;
  color: #fca5a5 !important;
}

html[data-theme="dark"] .chat-attachment-preview[data-state="warn"] small {
  color: #fcd34d !important;
}

/* ---- Modo noturno: Administração Krewia, Pessoas, Suporte e Meu perfil ----
   Achados por uma auditoria automática de contraste (fundo claro, ou texto
   abaixo de 4,5:1) em cada tela no escuro, inclusive nos estados que só
   aparecem depois de um clique. O pior era o cartão de números: branco, com o
   número em quase branco (contraste 1,1). */

/* Os números de Clientes, do detalhe do cliente e de Chamados. */
html[data-theme="dark"] .platform-tile {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .platform-tile small {
  color: #9babc3 !important;
}

html[data-theme="dark"] .platform-tile b {
  color: #edf3ff !important;
}

/* Selos de situação do chamado: na fila da Krewia e na lista da pessoa. */
html[data-theme="dark"] .ticket-open,
html[data-theme="dark"] #supportRequests small.ticket-open {
  background: #3d2c0a !important;
  color: #fcd34d !important;
}

html[data-theme="dark"] .ticket-done,
html[data-theme="dark"] #supportRequests small.ticket-done {
  background: #0d3325 !important;
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .ticket-row em,
html[data-theme="dark"] #supportRequests b {
  color: #8ab6ff !important;
}

html[data-theme="dark"] #supportRequests article {
  background: var(--dark-surface, #101c30) !important;
  border: 1px solid var(--dark-line, #283852);
}

html[data-theme="dark"] #supportRequests p {
  color: #cdd8ea !important;
}

/* Rótulos dos gráficos (Por empresa, Situação da fila) -- vale também para
   os gráficos das respostas do chat, que usam o mesmo desenho. */
html[data-theme="dark"] .md-chart .mock-chart span,
html[data-theme="dark"] .md-chart text {
  color: #b4c3da !important;
  fill: #b4c3da !important;
}

/* Modelos: a ordem ("usa", "2º") e o "Ativo". */
html[data-theme="dark"] .routing-order {
  color: #9babc3 !important;
}

html[data-theme="dark"] .routing-order.routing-primary {
  color: #8ab6ff !important;
}

html[data-theme="dark"] .routing-row .routing-on {
  color: #9cc3ff !important;
  border-color: #3b82f6 !important;
}

/* Agentes: "Novo agente" e o nome da empresa acima de cada grupo. */
html[data-theme="dark"] .agent-new {
  color: #8ab6ff !important;
}

html[data-theme="dark"] .agent-list-company {
  color: #b4c3da !important;
}

/* Detalhe do cliente: ícone do agente, botão de ligar e "Ver tudo". */
html[data-theme="dark"] .client-agent > span:first-child {
  background: var(--dark-raised, #14233a) !important;
  color: #9cc3ff !important;
}

html[data-theme="dark"] .client-agent button.client-agent-on {
  background: #16325f !important;
  border-color: #3b82f6 !important;
  color: #9cc3ff !important;
}

html[data-theme="dark"] .client-agent em {
  color: #8ab6ff !important;
}

/* Pessoas e permissões: o selo "Você" / "Ativo". */
html[data-theme="dark"] .people-table article > em {
  background: #0d3325 !important;
  color: #6ee7b7 !important;
}

/* Meu perfil › Acesso e ajuda: as três opções eram cinza-escuro no escuro. */
html[data-theme="dark"] .profile-options button {
  color: #dbe5f5 !important;
}

html[data-theme="dark"] .profile-options button:hover {
  background: var(--dark-hover, #172945) !important;
}

html[data-theme="dark"] .profile-options button span {
  color: #8ab6ff !important;
}

/* "← Voltar" das telas internas (chamado, agente, tarefa). */
html[data-theme="dark"] .agent-back {
  color: #8ab6ff !important;
}

/* O que o chat leu, embaixo da pergunta: discreto quando deu certo, em
   destaque quando algo não foi lido. */
.message-docs-read {
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px dashed #e2e8f0;
}

.message-docs-read p {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #64748b;
}

.message-docs-read p.is-warn {
  color: #92400e;
}

.message-docs-read p.is-error {
  color: #b42318;
  font-weight: 600;
}

html[data-theme="dark"] .message-docs-read {
  border-bottom-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .message-docs-read p {
  color: #9babc3 !important;
}

html[data-theme="dark"] .message-docs-read p.is-warn {
  color: #fcd34d !important;
}

html[data-theme="dark"] .message-docs-read p.is-error {
  color: #fca5a5 !important;
}

/* Segundo clique de Apagar: vermelho cheio, para nao passar por um botao
   comum. Volta ao normal sozinho depois de alguns segundos. */
.docs-remove.is-confirming,
html[data-theme="dark"] .docs-remove.is-confirming {
  background: #b42318 !important;
  border-color: #b42318 !important;
  color: #fff !important;
}

.docs-remove-aviso {
  color: #b42318;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 8px;
  align-self: center;
}

html[data-theme="dark"] .docs-remove-aviso {
  color: #fca5a5;
}

/* No celular nao cabe ao lado do nome: o botao "Apagar de vez" ja diz. */
@media (max-width: 720px) {
  .docs-remove-aviso {
    display: none;
  }
}

/* Administracao Krewia > cliente > Chave do modelo. */
.people-status[data-state="ok"] {
  color: #067647;
}

.client-key-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 10px;
}

.client-key-form label {
  display: grid;
  align-content: start;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.client-key-form input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 400;
  background: var(--panel, #fff);
  color: inherit;
}

.client-key-form small {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
}

.client-key-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.client-key-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent, #0066ff);
  border-color: var(--accent, #0066ff);
  color: #fff;
}

.client-key-actions .client-key-regenerate {
  background: transparent;
  color: #b42318;
  border-color: #f5c2bd;
}

.client-key-actions .client-key-regenerate.is-confirming {
  background: #b42318;
  border-color: #b42318;
  color: #fff;
}

@media (max-width: 760px) {
  .client-key-form {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .people-status[data-state="ok"] {
  color: #6ee7b7 !important;
}

html[data-theme="dark"] .client-key-form input {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #e5edf8 !important;
}

html[data-theme="dark"] .client-key-actions .client-key-regenerate:not(.is-confirming) {
  border-color: #5b2227 !important;
  color: #fca5a5 !important;
}

/* Documentos > arquivos vinculados do Google Drive. */
.docs-icon.is-file.is-google {
  background: #e8f0fe;
  color: #1a73e8;
  box-shadow: inset 3px 0 0 #34a853;
}

a.docs-action.docs-google-open {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}

.docs-google-account {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.docs-google-account button {
  border: 0;
  background: none;
  padding: 0;
  color: #b42318;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.docs-live .workspace-actions .docs-google-button.is-confirming {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}

@media (max-width: 760px) {
  .docs-row a.docs-action.docs-google-open {
    display: inline-flex;
  }
}

html[data-theme="dark"] .docs-icon.is-file.is-google {
  background: #13284a !important;
  color: #8ab4f8 !important;
}

html[data-theme="dark"] .docs-google-account button {
  color: #fca5a5 !important;
}

html[data-theme="dark"] .docs-live .workspace-actions .docs-google-button.is-confirming {
  background: #b45309 !important;
  border-color: #b45309 !important;
  color: #fff !important;
}

/* Janela de escolher arquivos do Google (Picker).
   Os elementos do Google levam a classe "picker" -- o mesmo nome do menu de
   modelos do chat, cujas regras antigas (.picker: 380px, overflow, bottom,
   ".picker div" flex...) deformavam a janela: em tela grande ela ficava com
   2px de largura e so o fundo opaco aparecia, travando a tela. Aqui as regras
   do menu sao desfeitas para as pecas do Google, e a janela fica no centro.
   Nao mexer em "display": e por ele que o Google esconde a janela ao fechar. */
.picker.picker-dialog-bg,
.picker.picker-dialog,
.picker-dialog .picker,
.picker-dialog .picker-frame {
  bottom: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.picker.picker-dialog-bg {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  background: #fff !important;
  border: 0 !important;
  z-index: 10000 !important;
}

.picker.picker-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: max-content !important;
  height: auto !important;
  max-width: calc(100vw - 16px) !important;
  background: #fff !important;
  border: 1px solid #c4c7c5 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
  z-index: 10001 !important;
}

.picker-dialog .picker,
.picker-dialog .picker-frame {
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  z-index: auto !important;
}

/* O titulo de fora e escondido pelo Google; ".picker div" o fazia aparecer
   duplicado sobre o titulo de dentro. */
.picker-dialog > .picker-dialog-title {
  display: none !important;
}

/* O modo escuro do menu pintava a janela do Google de escuro. */
html[data-theme="dark"] .picker.picker-dialog,
html[data-theme="dark"] .picker.picker-dialog-bg {
  background: #fff !important;
}

/* Selo de origem no canto do icone: Google Drive ou Krewia. */
.docs-icon {
  position: relative;
}

.docs-icon .docs-source {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 17px;
  height: 17px;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #dbe4f0;
  object-fit: contain;
}

.docs-icon.is-google {
  background: #e8f0fe;
  color: #1a73e8;
}

.chat-document-picker button > span {
  position: relative;
}

.chat-document-picker .chat-doc-drive {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #dbe4f0;
}

.chat-attachment-menu [data-attachment-source="google"] > span img {
  display: block;
}

html[data-theme="dark"] .docs-icon .docs-source,
html[data-theme="dark"] .chat-document-picker .chat-doc-drive {
  background: #0f1b2e;
  box-shadow: 0 0 0 1px #283852;
}

html[data-theme="dark"] .docs-icon.is-google {
  background: #13284a !important;
  color: #8ab4f8 !important;
}

.docs-empty .docs-empty-google {
  margin-top: 12px;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  background: var(--accent, #0066ff);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Documentos > trazendo do Google: barra de progresso no topo. */
.docs-progress {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid #c7dafc;
  border-radius: 10px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 0.85rem;
  font-weight: 600;
}

.docs-progress i {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 99px;
  background: #d6e4ff;
  overflow: hidden;
}

.docs-progress b {
  display: block;
  height: 100%;
  width: 3%;
  border-radius: 99px;
  background: #1a73e8;
  transition: width 0.3s ease;
}

.docs-progress.is-indeterminate b {
  width: 35% !important;
  animation: docs-progress-vai 1.2s ease-in-out infinite;
}

@keyframes docs-progress-vai {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* Visualizador de planilha: abas no topo, uma por vez. */
.docs-sheet-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

.docs-sheet-tabs button {
  flex: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  padding: 8px 14px;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.docs-sheet-tabs button.active {
  border-color: var(--line);
  background: var(--panel, #fff);
  color: #0f7b3d;
  box-shadow: inset 0 3px 0 #1e8e3e;
}

html[data-theme="dark"] .docs-progress {
  background: #10223f !important;
  border-color: #1e3a66 !important;
  color: #8ab4f8 !important;
}

html[data-theme="dark"] .docs-progress i {
  background: #1e3a66 !important;
}

html[data-theme="dark"] .docs-sheet-tabs {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .docs-sheet-tabs button {
  color: #9babc3 !important;
}

html[data-theme="dark"] .docs-sheet-tabs button.active {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #6ee7a8 !important;
}

/* Linha sendo apagada ou desvinculada: esmaecida ate sumir. */
.docs-row.is-removing {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Clipe do chat > seletor: navegar por pastas. */
.chat-document-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 11px 10px;
  font-size: 12px;
  color: #94a3b8;
}

.chat-document-trail button {
  border: 0;
  background: none;
  padding: 2px 4px;
  color: #0066ff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
}

.chat-document-trail button[aria-current="page"] {
  color: #0f172a;
  cursor: default;
}

.chat-document-list > button.chat-document-whole {
  display: block;
  box-sizing: border-box;
  width: calc(100% - 22px);
  margin: 0 11px 10px;
  padding: 10px 12px;
  border: 1px dashed #93b8f5;
  border-radius: 11px;
  background: #f5f9ff;
  color: #0056d8;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.chat-document-list > button.chat-document-whole:hover {
  background: #eaf2ff;
}

.chat-document-folder {
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
}

.chat-document-folder:hover {
  background: #f3f7ff;
}

.chat-document-folder > button.is-folder {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.chat-document-folder > button.is-folder > span:first-child {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eff6ff;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.chat-document-folder > button.is-folder > span:last-child {
  display: flex;
  flex-direction: column;
}

.chat-document-folder-attach {
  flex: none;
  margin-right: 8px;
  padding: 7px 11px;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #0056d8;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

html[data-theme="dark"] .chat-document-trail button[aria-current="page"] {
  color: #edf3ff !important;
}

html[data-theme="dark"] .chat-document-trail button {
  color: #8ab6ff !important;
}

html[data-theme="dark"] .chat-document-whole {
  background: #10223f !important;
  border-color: #2b4c80 !important;
  color: #8ab6ff !important;
}

html[data-theme="dark"] .chat-document-folder:hover {
  background: var(--dark-hover, #16243a) !important;
}

html[data-theme="dark"] .chat-document-folder > button.is-folder {
  color: #edf3ff !important;
}

html[data-theme="dark"] .chat-document-folder > button.is-folder > span:first-child {
  background: #13284a !important;
}

html[data-theme="dark"] .chat-document-folder-attach {
  background: var(--dark-surface, #101c30) !important;
  border-color: var(--dark-line, #283852) !important;
  color: #8ab6ff !important;
}

/* Sino > agenda do Google: reunioes do dia. */
.bell-agenda {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 8px;
  max-height: 260px;
  overflow: auto;
}

.bell-agenda[hidden] {
  display: none;
}

.bell-agenda h4 {
  margin: 0 0 6px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a73e8;
}

.bell-agenda-hint {
  margin: 2px 0 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.bell-meeting {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #f1f5f9;
}

.bell-meeting:first-child {
  border-top: 0;
}

.bell-meeting time {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

.bell-meeting span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bell-meeting b {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bell-meeting small {
  font-size: 11px;
  color: var(--muted);
}

.bell-meeting a {
  font-size: 11.5px;
  font-weight: 700;
  color: #1a73e8;
  text-decoration: none;
  white-space: nowrap;
}

.bell-meeting.is-soon {
  margin: 0 -8px;
  padding: 7px 8px;
  border-radius: 9px;
  background: #fff7e6;
}

.bell-meeting.is-soon time,
.bell-meeting.is-soon small {
  color: #b45309;
}

.bell-meeting.is-past {
  opacity: 0.55;
}

html[data-theme="dark"] .bell-agenda {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .bell-meeting {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .bell-meeting time,
html[data-theme="dark"] .bell-meeting b {
  color: #edf3ff !important;
}

html[data-theme="dark"] .bell-meeting.is-soon {
  background: #3a2a0a !important;
}

html[data-theme="dark"] .bell-meeting.is-soon time,
html[data-theme="dark"] .bell-meeting.is-soon small {
  color: #fbbf24 !important;
}

html[data-theme="dark"] .bell-meeting a,
html[data-theme="dark"] .bell-agenda h4 {
  color: #8ab4f8 !important;
}

/* O cabecalho da barra lateral (onde o sino mora) centraliza e empilha os
   div de dentro; a agenda do sino desfaz isso. */
.b-sidebar .bell-panel .bell-agenda {
  text-align: left;
}

.b-sidebar .bell-panel .bell-meeting {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  row-gap: 3px !important;
  align-items: center !important;
  justify-items: start;
  text-align: left;
}

.b-sidebar .bell-panel .bell-meeting > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0;
}

.b-sidebar .bell-panel .bell-meeting > a {
  grid-column: 2;
  justify-self: start;
}

.b-sidebar .bell-panel .bell-meeting > time {
  align-self: start;
  padding-top: 1px;
}

.b-sidebar .bell-panel .bell-meeting b {
  color: #0f172a;
  font-weight: 600;
  max-width: 100%;
}

.b-sidebar .bell-panel .bell-agenda-list {
  display: block !important;
}

/* Sino > tarefas para hoje. */
.bell-tasks {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px 6px;
  max-height: 240px;
  overflow: auto;
  text-align: left;
}

.bell-tasks[hidden] {
  display: none;
}

.bell-tasks h4 {
  margin: 0 0 4px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0066ff;
}

.b-sidebar .bell-panel .bell-tasks-list {
  display: block !important;
}

.b-sidebar .bell-panel .bell-task {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px;
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-top: 1px solid #f1f5f9;
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.b-sidebar .bell-panel .bell-task:first-child {
  border-top: 0;
}

.bell-task b {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
}

.bell-task span {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.4;
}

.bell-task small {
  font-size: 11px;
  color: #0f7b3d;
}

.bell-task.is-late small {
  color: #b42318;
  font-weight: 600;
}

.bell-task:hover b {
  color: #0066ff;
}

html[data-theme="dark"] .bell-tasks {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .bell-tasks h4 {
  color: #8ab6ff !important;
}

html[data-theme="dark"] .bell-task {
  border-color: var(--dark-line, #283852) !important;
}

html[data-theme="dark"] .bell-task b {
  color: #edf3ff !important;
}

html[data-theme="dark"] .bell-task span {
  color: #aebdd3 !important;
}

html[data-theme="dark"] .bell-task small {
  color: #6ee7a8 !important;
}

html[data-theme="dark"] .bell-task.is-late small {
  color: #fca5a5 !important;
}

.b-sidebar .bell-panel .bell-task b {
  color: #0f172a;
}

html[data-theme="dark"] .b-sidebar .bell-panel .bell-task b {
  color: #edf3ff !important;
}

/* Ajuda > Central de ajuda. Mesmas faixas em degrade dos cartoes do Meu
   espaco (pedido do proprietario em 29/09/2026). */
.help-page {
  padding: 32px clamp(20px, 3.5vw, 54px) 48px;
  overflow: auto;
}

.help-page.active {
  display: block;
}

.help-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 0 22px;
  padding: 12px 16px;
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 102, 255, 0.06);
}

.help-search span {
  color: #0066ff;
  font-size: 18px;
}

.help-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: inherit;
}

.help-none {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.help-start {
  margin: 0 0 26px;
}

.help-start h2 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0066ff;
  margin: 0 0 12px;
}

.help-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.help-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: #f5f8ff;
}

.help-step > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0066ff, #2456db);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.help-step b {
  font-size: 15px;
  color: #0f172a;
}

.help-step p {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.help-step button {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  color: #0066ff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.help-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.help-topic {
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
}

.help-topic > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  color: #fff;
}

.help-topic > header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.help-topic > header small {
  font-size: 12px;
  color: #fff;
  opacity: 0.85;
}

.help-topic.is-chat > header { background: linear-gradient(135deg, #0066ff, #2456db); }
.help-topic.is-docs > header { background: linear-gradient(135deg, #075fe8, #5968ec); }
.help-topic.is-google > header { background: linear-gradient(135deg, #069bd2, #22c6f7); }
.help-topic.is-tasks > header { background: linear-gradient(135deg, #056a8f, #0e9bc4); }
.help-topic.is-agents > header { background: linear-gradient(135deg, #6654e8, #8b5cf6); }
.help-topic.is-bell > header { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.help-topic.is-privacy > header { background: linear-gradient(135deg, #1e3a8a, #3b5bdb); }
.help-topic.is-projects > header { background: linear-gradient(135deg, #2456db, #6654e8); }
.help-topic.is-crm > header { background: linear-gradient(135deg, #0b7a8c, #14a3b8); }

.help-question {
  border-top: 1px solid #edf2f9;
}

.help-question:first-of-type {
  border-top: 0;
}

.help-question summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  list-style: none;
}

.help-question summary::-webkit-details-marker {
  display: none;
}

.help-question summary::after {
  content: '›';
  flex: none;
  color: #0066ff;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.help-question[open] summary::after {
  transform: rotate(90deg);
}

.help-question p {
  margin: 0;
  padding: 0 18px 15px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #475569;
}

.help-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eaf2ff, #f3efff);
}

.help-contact b {
  font-size: 15px;
  color: #0f172a;
}

.help-contact p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #475569;
}

.help-contact button {
  flex: none;
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  background: #0066ff;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .help-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .help-topics { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .help-steps { grid-template-columns: 1fr; }
  .help-contact { flex-direction: column; align-items: flex-start; }
}

html[data-theme="dark"] .help-search {
  background: #111c2f !important;
  border-color: #24324a !important;
  box-shadow: none;
}

html[data-theme="dark"] .help-step,
html[data-theme="dark"] .help-topic {
  background: #111c2f !important;
}

html[data-theme="dark"] .help-step b,
html[data-theme="dark"] .help-question summary,
html[data-theme="dark"] .help-contact b {
  color: #e7efff !important;
}

html[data-theme="dark"] .help-step p,
html[data-theme="dark"] .help-question p,
html[data-theme="dark"] .help-contact p {
  color: #aebdd3 !important;
}

html[data-theme="dark"] .help-question {
  border-color: #24324a !important;
}

html[data-theme="dark"] .help-contact {
  background: linear-gradient(135deg, #10223f, #1d1840) !important;
}

html[data-theme="dark"] .help-start h2,
html[data-theme="dark"] .help-step button {
  color: #8ab6ff !important;
}

html[data-theme="dark"] .help-topic > header h2,
html[data-theme="dark"] .help-topic > header small {
  color: #fff !important;
}

/* Pessoas > Convidar > Previa do e-mail. */
.invite-preview-button {
  border: 1px solid #c7dafc;
  border-radius: 9px;
  background: #f5f9ff;
  color: #0056d8;
  font: inherit;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
}

.email-preview-dialog {
  width: min(720px, calc(100vw - 24px));
  height: min(860px, calc(100dvh - 24px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.3);
}

.email-preview-dialog[open] {
  display: flex;
  flex-direction: column;
}

.email-preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.email-preview-dialog > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.email-preview-dialog > header div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.email-preview-dialog > header small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0f7b3d;
}

.email-preview-dialog > header b {
  font-size: 15px;
  color: #0f172a;
}

.email-preview-dialog > header span {
  font-size: 12px;
  color: #64748b;
  overflow-wrap: anywhere;
}

.email-preview-dialog > header button {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #eff6ff;
  color: #0066ff;
  font-size: 20px;
  cursor: pointer;
}

.email-preview-dialog iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #eef3fb;
}

.email-preview-dialog pre {
  flex: 1;
  margin: 0;
  padding: 18px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 13px;
  background: #f8fafc;
  color: #0f172a;
}

.email-preview-dialog > footer {
  order: 3;
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}

.email-preview-dialog > footer button {
  border: 0;
  border-radius: 8px;
  padding: 7px 12px;
  background: #f1f5f9;
  color: #475569;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.email-preview-dialog > footer button.active {
  background: #e7f0ff;
  color: #0066ff;
}

.email-preview-dialog > pre {
  order: 2;
}

html[data-theme="dark"] .email-preview-dialog > header,
html[data-theme="dark"] .email-preview-dialog > footer {
  background: #0d1728 !important;
  border-color: #24324a !important;
}

html[data-theme="dark"] .email-preview-dialog > header b {
  color: #e7efff !important;
}

html[data-theme="dark"] .invite-preview-button {
  background: #10223f !important;
  border-color: #2b4c80 !important;
  color: #8ab6ff !important;
}

/* Administração Krewia > E-mails: textos à esquerda, prévia à direita. */
#platform-emails .email-tpl-tabs { margin: 4px 0 16px; }
.email-tpl {
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.email-tpl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}
.email-tpl-state { margin: 0; font-size: 12.5px; color: #64748b; }
.email-tpl-state[data-state="pending"] { color: #b45309; font-weight: 600; }
.email-tpl-fields { display: flex; flex-direction: column; gap: 10px; }
.email-tpl-fields label { display: flex; flex-direction: column; gap: 4px; }
.email-tpl-fields label span,
.email-tpl-items legend { font-size: 12px; font-weight: 700; color: #334155; }
.email-tpl-form input,
.email-tpl-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  color: #0f172a;
  background: #fff;
  resize: vertical;
}
.email-tpl-form input:focus,
.email-tpl-form textarea:focus { outline: 2px solid #9cc2ff; border-color: #0066ff; }
.email-tpl-items { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.email-tpl-item-list { display: flex; flex-direction: column; gap: 6px; }
.email-tpl-item { display: grid; grid-template-columns: 130px 1fr 28px; gap: 6px; }
.email-tpl-item button {
  border: 0; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 16px; cursor: pointer;
}
.email-tpl-add {
  align-self: flex-start;
  border: 1px dashed #9cc2ff; border-radius: 8px; background: #f5f9ff; color: #0056d8;
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer;
}
.email-tpl-marks { font-size: 12.5px; color: #475569; }
.email-tpl-marks > div { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.email-tpl-marks span { display: flex; align-items: center; gap: 8px; }
.email-tpl-marks button {
  border: 1px solid #c7dafc; border-radius: 999px; background: #eef4ff; color: #0056d8;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 2px 9px; cursor: pointer;
}
.email-tpl-marks small { color: #64748b; }
.email-tpl-actions { display: flex; gap: 8px; }
.email-tpl-save {
  border: 0; border-radius: 9px; background: #0066ff; color: #fff;
  font: inherit; font-weight: 700; padding: 9px 18px; cursor: pointer;
}
.email-tpl-reset {
  border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #334155;
  font: inherit; font-weight: 600; padding: 9px 14px; cursor: pointer;
}
.email-tpl-save:disabled, .email-tpl-reset:disabled { opacity: 0.5; cursor: default; }
.email-tpl-preview {
  position: sticky; top: 12px;
  display: flex; flex-direction: column;
  height: min(820px, calc(100dvh - 120px));
  border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; background: #fff;
}
.email-tpl-preview header { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.email-tpl-preview header small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: #0f7b3d; }
.email-tpl-preview header b { font-size: 14px; color: #0f172a; }
.email-tpl-preview iframe { flex: 1; width: 100%; border: 0; background: #eef3fb; }
@media (max-width: 980px) {
  .email-tpl { grid-template-columns: 1fr; }
  .email-tpl-preview { position: static; height: 720px; }
}
html[data-theme="dark"] .email-tpl-form,
html[data-theme="dark"] .email-tpl-preview,
html[data-theme="dark"] .email-tpl-preview header {
  background: #0d1728 !important; border-color: #24324a !important;
}
html[data-theme="dark"] .email-tpl-form input,
html[data-theme="dark"] .email-tpl-form textarea,
html[data-theme="dark"] .email-tpl-reset {
  background: #0a1322 !important; border-color: #2b3b57 !important; color: #e7efff !important;
}
html[data-theme="dark"] .email-tpl-fields label span,
html[data-theme="dark"] .email-tpl-items legend,
html[data-theme="dark"] .email-tpl-preview header b { color: #dbe6ff !important; }

/* Foto de perfil (profile-photo.js): a foto entra no lugar das iniciais. */
.avatar.has-photo {
  background-color: #e2e8f0 !important;
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}

.profile-photo.has-photo { object-fit: cover; }

.profile-photo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.profile-photo-actions button {
  border: 1px solid #c7dafc;
  border-radius: 8px;
  background: #fff;
  color: #0056d8;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 11px;
  cursor: pointer;
}

.profile-photo-actions .profile-photo-remove {
  border-color: #e2e8f0;
  color: #64748b;
}

.profile-photo-actions button:disabled { opacity: 0.6; cursor: default; }

.profile-photo-status {
  flex-basis: 100%;
  min-height: 1em;
  font-size: 12px;
  color: #64748b;
}

.profile-photo-status[data-state="error"] { color: #b91c1c; }
.profile-photo-status[data-state="success"] { color: #0f7b3d; }

html[data-theme="dark"] .profile-photo-actions button {
  background: #0d1728 !important;
  border-color: #2b4c80 !important;
  color: #8ab6ff !important;
}

/* Administração > Segurança (security-live.js). */
.security-page { overflow: auto; }
.security-page .sec-card {
  max-width: 980px;
  margin: 0 0 18px;
  padding: 22px 24px;
  border-radius: 16px;
  background: #f8fafc;
}
.security-page .sec-card > h2 { margin: 0 0 14px; font-size: 18px; color: #0f172a; }
.security-page h3 { margin: 18px 0 8px; font-size: 14px; color: #334155; }
.security-page h3:first-child { margin-top: 0; }
.sec-facts { margin: 0; padding-left: 18px; color: #475569; font-size: 14px; line-height: 1.7; }
.sec-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: #64748b; }
.sec-empty { margin: 0; font-size: 13px; color: #64748b; }
.sec-list { display: flex; flex-direction: column; gap: 8px; }
.sec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
}
.sec-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sec-who b { font-size: 14px; color: #0f172a; }
.sec-who b small { font-weight: 400; color: #64748b; }
.sec-who > small { font-size: 12.5px; color: #64748b; }
.sec-devices { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: #64748b; }
.sec-devices em { color: #0f7b3d; font-style: normal; font-weight: 600; }
.sec-danger, .sec-primary, .sec-more {
  flex: none;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 13px;
  cursor: pointer;
}
.sec-danger { border: 1px solid #fecaca; background: #fff; color: #b91c1c; }
.sec-danger.is-armed, .sec-primary.is-armed { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.sec-primary { border: 0; background: #0066ff; color: #fff; }
.sec-more { border: 1px solid #c7dafc; background: #f5f9ff; color: #0056d8; margin-top: 10px; }
.sec-danger:disabled, .sec-primary:disabled { opacity: 0.6; cursor: default; }
.sec-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: #0f172a; }
.sec-meter small { color: #64748b; }
.sec-meter-bar { flex-basis: 100%; height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.sec-meter-bar span { display: block; height: 100%; min-width: 2px; border-radius: 999px; background: linear-gradient(90deg, #0066ff, #6654e8, #22c6f7); }
.sec-parts { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; color: #475569; }
.sec-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #e2e8f0; }
.sec-parts b { color: #0f172a; font-weight: 600; }
.sec-retention { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sec-retention label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: #334155; }
.sec-retention select, .sec-filters select, .sec-filters input {
  border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; background: #fff; color: #0f172a;
}
.sec-preview { margin: 0; font-size: 13px; color: #b45309; }
.sec-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sec-filters label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; }
.sec-log { list-style: none; margin: 0; padding: 0; }
.sec-log li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #e2e8f0; font-size: 13.5px; color: #1e293b; }
.sec-log time { color: #64748b; font-size: 12.5px; }
.sec-log li.sec-empty { display: block; color: #64748b; }
@media (max-width: 700px) {
  .sec-row { flex-direction: column; }
  .sec-log li { grid-template-columns: 1fr; gap: 2px; }
}
html[data-theme="dark"] .security-page .sec-card { background: #0d1728 !important; }
html[data-theme="dark"] .sec-row { background: #0a1322 !important; }
html[data-theme="dark"] .security-page .sec-card > h2,
html[data-theme="dark"] .sec-who b,
html[data-theme="dark"] .sec-meter,
html[data-theme="dark"] .sec-parts b,
html[data-theme="dark"] .sec-log li { color: #e7efff !important; }
html[data-theme="dark"] .security-page h3 { color: #c7d5f0 !important; }
html[data-theme="dark"] .sec-log li, html[data-theme="dark"] .sec-parts li { border-color: #24324a !important; }
html[data-theme="dark"] .sec-retention select, html[data-theme="dark"] .sec-filters select, html[data-theme="dark"] .sec-filters input,
html[data-theme="dark"] .sec-danger { background: #0a1322 !important; color: #e7efff !important; border-color: #2b3b57 !important; }

/* Pessoas > Remover da empresa. */
.member-remove { color: #b91c1c !important; }
.member-leave-dialog {
  width: min(560px, calc(100vw - 24px));
  border: 0;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.3);
  color: #0f172a;
}
.member-leave-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.member-leave-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.member-leave-dialog h2 { margin: 0; font-size: 18px; }
.member-leave-dialog .leave-close { border: 0; background: #eff6ff; color: #0066ff; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.member-leave-dialog fieldset { border: 0; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.member-leave-dialog legend { font-weight: 700; font-size: 13px; color: #334155; margin-bottom: 6px; }
.member-leave-dialog label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: #334155; }
.member-leave-dialog select { border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 13px; }
.member-leave-dialog small { color: #64748b; font-size: 12px; }
.member-leave-dialog .leave-also { margin: 16px 0 0; padding: 12px 12px 12px 30px; background: #f8fafc; border-radius: 12px; font-size: 12.5px; color: #475569; line-height: 1.6; }
.member-leave-dialog .leave-status { min-height: 1em; font-size: 13px; color: #b91c1c; }
.member-leave-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.member-leave-dialog footer button { border-radius: 9px; font: inherit; font-weight: 600; font-size: 14px; padding: 9px 14px; cursor: pointer; }
.member-leave-dialog .leave-cancel { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.member-leave-dialog .leave-confirm { border: 0; background: #b91c1c; color: #fff; }
.member-leave-dialog .leave-confirm:disabled { opacity: 0.6; }
html[data-theme="dark"] .member-leave-dialog { background: #0d1728 !important; color: #e7efff !important; }
html[data-theme="dark"] .member-leave-dialog label, html[data-theme="dark"] .member-leave-dialog legend { color: #c7d5f0 !important; }
html[data-theme="dark"] .member-leave-dialog .leave-also { background: #0a1322 !important; color: #c7d5f0 !important; }

/* Histórico: apagar conversa. */
.history-delete {
  flex: none;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 9px;
  cursor: pointer;
}
.history-row:hover .history-delete, .history-delete:focus-visible { color: #b91c1c; border-color: #fecaca; }
.history-delete.is-armed { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }

/* Meu perfil > Seus dados. */
.profile-data .data-status { margin: 8px 0 0; font-size: 12.5px; color: #64748b; min-height: 1em; }
.profile-data .data-status[data-state="error"] { color: #b91c1c; }
.profile-data .data-status[data-state="success"] { color: #0f7b3d; }
.profile-data .data-delete { color: #b91c1c !important; }
.profile-data .data-delete span { color: #b91c1c !important; }
.account-delete-confirm { display: flex !important; flex-direction: column; align-items: stretch !important; margin-top: 14px; }
.account-delete-confirm input { border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 14px; }
.profile-layout > .profile-data { grid-column: 2; }
@media (max-width: 760px) { .profile-layout > .profile-data { grid-column: auto; } }
.sec-text { margin: 0; font-size: 14px; line-height: 1.7; color: #475569; }

/* Planilha no visualizador (documents-live.js, planilhaLarga): largura do
   conteudo, rolagem lateral, cabecalho fixo, texto sem encolher. */
.docs-sheet .md-table {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
}
.docs-sheet table,
.docs-sheet table.mock-table {
  /* Vence o min-width: 0 das tabelas de resposta (.md-body .mock-table). */
  width: max-content !important;
  min-width: 100% !important;
  font-size: 14px !important;
}
.docs-sheet th,
.docs-sheet td {
  white-space: nowrap !important;
}
.docs-sheet th.is-long,
.docs-sheet td.is-long {
  white-space: normal !important;
  /* Celula de tabela ignora max-width; largura fixa e o que segura. */
  width: 24rem;
  min-width: 24rem;
}
.docs-sheet thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Preferências: seções recolhíveis (preferences-collapse.js). */
.preferences-page .pref-block { max-width: 1600px; }
.pref-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pref-toggle i {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  color: #0066ff;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.pref-block.is-collapsed .pref-toggle i { transform: rotate(0deg); }
.pref-block.is-collapsed { margin-bottom: 14px !important; padding-bottom: 14px; border-bottom: 1px solid #e2e8f0; }
.pref-block.is-collapsed > :not(header) { display: none !important; }
.pref-block.is-collapsed > header p { margin-bottom: 0 !important; }

/* Ações embaixo da resposta: botões de verdade, com as cores da Krewia.
   Avaliação da primeira testadora: o "Copiar" estava pequeno e fora de forma. */
#b-chat .message-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
#b-chat .message-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px !important;
  border: 1px solid #c7dafc !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #0056d8 !important;
  font: 600 13px Inter, system-ui, sans-serif !important;
  line-height: 1 !important;
  cursor: pointer;
}
#b-chat .message-actions .message-copy-action {
  border-color: transparent !important;
  background: #0066ff !important;
  color: #fff !important;
}
#b-chat .message-actions .message-copy-action .ki { width: 16px; height: 16px; }
#b-chat .message-actions .message-copy-action:hover { background: #0056d8 !important; }
#b-chat .message-actions .message-copy-action.copied { background: #0f7b3d !important; }
#b-chat .message-actions button:not(.message-copy-action):hover { background: #eef4ff !important; }
html[data-theme="dark"] #b-chat .message-actions button:not(.message-copy-action) {
  background: #0d1728 !important;
  border-color: #2b4c80 !important;
  color: #8ab6ff !important;
}

/* Menu no topo em notebook: os itens se sobrepunham abaixo de ~1280 px. */
@media (max-width: 1279px) {
  html[data-nav="topo"] body #businessApp .b-sidebar .nav-section > summary {
    padding: 8px 6px !important;
    font-size: 11.5px !important;
    letter-spacing: 0 !important;
  }
  html[data-nav="topo"] body #businessApp .b-sidebar .nav-section,
  html[data-nav="topo"] body #businessApp .b-sidebar .nav-section-title { flex-shrink: 0 !important; letter-spacing: 0 !important; }
  html[data-nav="topo"] body #businessApp .b-sidebar .nav-section > summary .group-chevron { display: none !important; }
  html[data-nav="topo"] body #businessApp .b-sidebar > nav { gap: 2px !important; }
  /* So aparece para o operador da plataforma; e o item mais largo. */
  html[data-nav="topo"] body #businessApp .b-sidebar .nav-section.nav-platform > summary,
  html[data-nav="topo"] body #businessApp .b-sidebar .nav-section.nav-platform .nav-section-title { font-size: 10.5px !important; padding: 6px 7px !important; }
  html[data-nav="topo"] body #businessApp .b-sidebar footer.live-session { gap: 6px !important; flex-shrink: 0; }
  html[data-nav="topo"] body #businessApp .b-sidebar footer.live-session > div { display: none !important; }
  html[data-nav="topo"] body #businessApp .b-sidebar .company-logo { width: 96px !important; }
}

/* Kanban: etiquetas (kanban-live.js). */
.task-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  padding: 3px 9px;
  font: 600 11.5px Inter, system-ui, sans-serif;
  line-height: 1.3;
  --c: #0066ff;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: color-mix(in srgb, var(--c) 80%, #000);
}
.task-label.cor-azul { --c: #0066ff; }
.task-label.cor-roxo { --c: #6654e8; }
.task-label.cor-ciano { --c: #0891b2; }
.task-label.cor-verde { --c: #15803d; }
.task-label.cor-amarelo { --c: #ca8a04; }
.task-label.cor-laranja { --c: #ea580c; }
.task-label.cor-vermelho { --c: #dc2626; }
.task-label.cor-cinza { --c: #475569; }
.task-label button { border: 0; background: none; color: inherit; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; }
.task-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.task-label-options { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-label-options .task-label { cursor: pointer; opacity: 0.55; }
.task-label-options .task-label.is-on { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--c); }
.task-label-new, .task-label-create button:not(.task-label-color) {
  border: 1px dashed #9cc2ff; border-radius: 999px; background: #f5f9ff; color: #0056d8;
  font: 600 12px Inter, system-ui, sans-serif; padding: 4px 10px; cursor: pointer;
}
.task-label-create { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-label-create input { border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; width: 170px; }
.task-label-create button.primary { border-style: solid; background: #0066ff; color: #fff; }
.task-label-colors { display: flex; gap: 5px; }
.task-label-color {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; padding: 0; cursor: pointer;
  background: var(--c); box-shadow: 0 0 0 1px #cbd5e1;
}
.task-label-color.is-on { box-shadow: 0 0 0 2px var(--c); }
.task-label-color.cor-azul { --c: #0066ff; } .task-label-color.cor-roxo { --c: #6654e8; }
.task-label-color.cor-ciano { --c: #0891b2; } .task-label-color.cor-verde { --c: #15803d; }
.task-label-color.cor-amarelo { --c: #ca8a04; } .task-label-color.cor-laranja { --c: #ea580c; }
.task-label-color.cor-vermelho { --c: #dc2626; } .task-label-color.cor-cinza { --c: #475569; }
.board-label-filter { border: 1px solid #cbd5e1; border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; background: #fff; color: #0f172a; }
html[data-theme="dark"] .task-label { background: color-mix(in srgb, var(--c) 28%, #0d1728); color: color-mix(in srgb, var(--c) 45%, #fff); }
html[data-theme="dark"] .board-label-filter, html[data-theme="dark"] .task-label-create input { background: #0a1322; color: #e7efff; border-color: #2b3b57; }

/* Responsável com busca (buscaDePessoas). */
.person-picker { position: relative; }
.person-picker input { width: 100%; box-sizing: border-box; }
.person-picker-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 240px; overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}
.person-picker-list li { padding: 8px 10px; border-radius: 7px; font-size: 14px; color: #0f172a; cursor: pointer; }
.person-picker-list li:hover, .person-picker-list li.is-active { background: #eaf2ff; color: #0056d8; }
.person-picker-list li.is-current { font-weight: 600; }
.person-picker-list li.is-empty { color: #64748b; cursor: default; background: none; }
html[data-theme="dark"] .person-picker-list { background: #0d1728; border-color: #24324a; }
html[data-theme="dark"] .person-picker-list li { color: #e7efff; }
html[data-theme="dark"] .person-picker-list li:hover, html[data-theme="dark"] .person-picker-list li.is-active { background: #10223f; color: #8ab6ff; }

/* Conversar sobre a tarefa. */
.task-chat { border: 1px solid #c7dafc !important; background: #f5f9ff !important; color: #0056d8 !important; font-weight: 600 !important; }
.chat-task-context {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: min(760px, 100%);
  margin: 0 auto 8px; padding: 6px 8px 6px 12px; border-radius: 999px;
  background: #eaf2ff; color: #0056d8; font-size: 13px; font-weight: 600;
}
.chat-task-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-task-context button { border: 0; background: #fff; color: #0056d8; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
html[data-theme="dark"] .chat-task-context { background: #10223f; color: #8ab6ff; }
/* O select por baixo da busca de pessoa: o estilo dos formularios forca
   display e venceria o atributo hidden. */
.person-picker ~ select[hidden], select[hidden] { display: none !important; }

/* Visualizador: arquivo do Google (documents-live.js). */
.docs-google-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eef6ff;
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.55;
}
html[data-theme="dark"] .docs-google-note { background: #10223f; color: #c7d5f0; }

/* Onboarding guiado (onboarding.js). */
.tour-welcome {
  width: min(460px, calc(100vw - 32px));
  border: 0;
  border-radius: 18px;
  padding: 28px 28px 20px;
  text-align: center;
  color: #0f172a;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.3);
}
.tour-welcome::backdrop { background: rgba(15, 23, 42, 0.45); }
.tour-welcome-mark { width: 52px; height: 52px; }
.tour-welcome h2 { margin: 12px 0 8px; font-size: 21px; }
.tour-welcome p { margin: 0 0 10px; color: #475569; font-size: 14.5px; line-height: 1.6; }
.tour-welcome ul { text-align: left; margin: 0 auto 18px; padding-left: 20px; color: #334155; font-size: 14px; line-height: 1.8; max-width: 340px; }
.tour-welcome footer { display: flex; justify-content: center; gap: 10px; }
.tour-welcome footer button, .tour-card footer button {
  border-radius: 10px; font: inherit; font-weight: 600; font-size: 14px; padding: 10px 16px; cursor: pointer;
  border: 1px solid #cbd5e1; background: #fff; color: #334155;
}
.tour-welcome footer button.primary, .tour-card footer button.primary { border-color: #0066ff; background: #0066ff; color: #fff; }
.tour-welcome small { display: block; margin-top: 12px; color: #94a3b8; font-size: 12px; }
.tour-veil { position: fixed; inset: 0; z-index: 9000; }
.tour-veil.is-centered { background: rgba(15, 23, 42, 0.55); }
.tour-hole {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55), 0 0 0 3px #22c6f7;
  transition: all 0.2s ease;
  pointer-events: none;
}
.tour-card {
  position: fixed;
  padding: 18px 18px 14px;
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
}
.tour-count { color: #0066ff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tour-card h3 { margin: 4px 0 6px; font-size: 17px; }
.tour-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: #475569; }
.tour-card footer { display: flex; align-items: center; gap: 8px; }
.tour-card footer span { flex: 1; }
.tour-card footer button { padding: 8px 13px; font-size: 13px; }
.tour-card .tour-skip { border: 0; background: none; color: #64748b; padding-left: 0; }
.help-start-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.help-tour { border: 1px solid #c7dafc; border-radius: 10px; background: #f5f9ff; color: #0056d8; font: inherit; font-weight: 600; font-size: 13px; padding: 8px 13px; cursor: pointer; }
html[data-theme="dark"] .tour-welcome, html[data-theme="dark"] .tour-card { background: #0d1728; color: #e7efff; }
html[data-theme="dark"] .tour-welcome p, html[data-theme="dark"] .tour-card p, html[data-theme="dark"] .tour-welcome ul { color: #c7d5f0; }

/* Áudio no chat (chat-audio.js): tudo dentro da caixa. Gravando, ondas azuis
   de ponta a ponta no lugar do texto; nada de vermelho (pedido do
   proprietário em 01/10/2026). */
#businessComposer .chat-mic-button {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #475569;
  cursor: pointer;
}
#businessComposer .chat-mic-button:hover { background: #eef4ff; color: #0066ff; }
#businessComposer .chat-mic-button.is-recording {
  background: #0066ff;
  color: #fff;
  animation: krewia-mic 1.4s ease-in-out infinite;
}
#businessComposer .chat-mic-button:disabled { opacity: 0.5; cursor: progress; }
@keyframes krewia-mic { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.4); } 50% { box-shadow: 0 0 0 7px rgba(0, 102, 255, 0); } }
#businessComposer .chat-audio-wave {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 34px;
  align-self: center;
}
#businessComposer .chat-audio-note {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  padding: 0 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #475569;
}
#businessComposer .chat-audio-note[data-tone="erro"] { color: #334155; font-weight: 500; }
#businessComposer .chat-audio-wave[hidden],
#businessComposer .chat-audio-note[hidden],
#businessComposer #businessPrompt[hidden] { display: none !important; }
#businessComposer #businessPrompt:disabled { background: transparent; color: #64748b; }
html[data-theme="dark"] #businessComposer .chat-mic-button { color: #c7d5f0; }
html[data-theme="dark"] #businessComposer .chat-audio-note { color: #c7d5f0; }
/* A etiqueta "Sobre a tarefa" usa display: flex, que venceria o hidden e
   deixava uma pilula vazia acima da caixa do chat. */
.chat-task-context[hidden] { display: none !important; }

/* Tela inicial do chat (chat-home.js): saudação, atalhos e "Continuar". */
#b-chat > main .chat-home-title { margin-bottom: 6px; }
#b-chat > main .chat-home-sub { margin: 0 0 22px; color: #64748b; }
.chat-home-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}
.chat-home-shortcuts button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid #dbe5f5;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: 500 13.5px Inter, system-ui, sans-serif;
  cursor: pointer;
}
.chat-home-shortcuts button:hover { border-color: #9cc2ff; background: #f5f9ff; color: #0056d8; }
.chat-home-shortcuts svg { width: 16px; height: 16px; fill: none; stroke: #0066ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-home-shortcuts button[hidden] { display: none; }
.chat-home-recent { width: min(440px, 100%); margin: 30px auto 0; text-align: left; }
.chat-home-recent h2 { margin: 0 0 6px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.chat-home-recent ul { list-style: none; margin: 0; padding: 0; }
.chat-home-recent button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #334155;
  font: 14px Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.chat-home-recent button:hover { background: #f1f5fb; color: #0056d8; }
.chat-home-recent button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-home-recent button small { flex: none; color: #94a3b8; font-size: 12px; }
.chat-home-recent[hidden] { display: none; }
html[data-theme="dark"] .chat-home-shortcuts button { background: #0d1728; border-color: #24324a; color: #c7d5f0; }
html[data-theme="dark"] .chat-home-recent button { color: #c7d5f0; }
html[data-theme="dark"] .chat-home-recent button:hover { background: #10223f; color: #8ab6ff; }
@media (max-width: 760px) {
  .chat-home-shortcuts button { padding: 7px 12px; font-size: 13px; }
  .chat-home-recent { margin-top: 20px; }
}

/* Favoritar no cabeçalho do chat: só a estrela, grande, com a dica ao passar
   o mouse (sidebar.js, data-tip). */
#b-chat > header .chat-favorite-button {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border: 1px solid #dbe5f5 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #64748b !important;
  font-size: 21px !important;
  line-height: 1 !important;
  cursor: pointer;
}
#b-chat > header .chat-favorite-button:hover:not(:disabled) { border-color: #9cc2ff !important; color: #0066ff !important; background: #f5f9ff !important; }
#b-chat > header .chat-favorite-button.active { color: #0066ff !important; border-color: #9cc2ff !important; background: #eef4ff !important; }
#b-chat > header .chat-favorite-button:disabled { opacity: 0.45; cursor: default; }
#b-chat > header .chat-favorite-button::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: max-content;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font: 500 12.5px Inter, system-ui, sans-serif;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
#b-chat > header .chat-favorite-button:hover::after,
#b-chat > header .chat-favorite-button:focus-visible::after { opacity: 1; }
html[data-theme="dark"] #b-chat > header .chat-favorite-button { background: #0d1728 !important; border-color: #24324a !important; color: #c7d5f0 !important; }
html[data-theme="dark"] #b-chat > header .chat-favorite-button.active { color: #8ab6ff !important; }

/* Pesquisa na web (02/10/2026): uma escolha do seletor, separada dos niveis
   por uma linha, antes dos agentes. O [hidden] precisa vencer o display:grid
   do .picker. */
#bChoiceMenu .web-search-option[hidden] { display: none !important; }
#bChoiceMenu .web-search-option { border-top: 1px solid var(--line, #e2e8f0); border-radius: 0 0 9px 9px; margin-top: 4px; }
#bChoiceMenu .m-web { background: #2563eb; font-size: .85rem; }

/* Resposta com pesquisa na web (02/10/2026): carrossel de fontes, citacoes,
   lista "Fontes" e perguntas relacionadas. Montado por web-sources.js. */
.web-carousel { position: relative; margin: 0 0 12px; max-width: 100%; }
.web-carousel-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 2px;
}
.web-carousel-track::-webkit-scrollbar { display: none; }
.web-card {
  flex: 0 0 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 10px 12px;
  background: var(--surface, #fff); color: inherit; text-decoration: none; min-height: 92px;
  transition: border-color .15s, box-shadow .15s;
}
.web-card-more { flex-basis: 140px; justify-content: center; align-items: center; text-align: center; cursor: pointer; font: inherit; }
.web-card-more b { color: #2563eb; }
.web-card:hover { border-color: #93b4f5; box-shadow: 0 4px 14px rgba(37, 99, 235, .12); }
.web-card.has-image { padding-top: 0; overflow: hidden; }
.web-card-image { display: block; margin: 0 -12px; height: 96px; background: #eef2f7; }
.web-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.web-card-site { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; min-width: 0; }
.web-card-site > span:not(.web-src-icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-card-site em {
  margin-left: auto; font-style: normal; font-size: 10px; font-weight: 700; color: #2563eb;
  background: #eaf1fe; border-radius: 999px; padding: 1px 6px;
}
.web-card b {
  font-size: 13px; line-height: 1.35; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.web-card small { font-size: 11px; color: #94a3b8; margin-top: auto; }
.web-src-icon {
  flex: 0 0 16px; width: 16px; height: 16px; border-radius: 4px; background: #e2e8f0; color: #475569;
  font-size: 9px; font-weight: 700; display: inline-grid; place-items: center; overflow: hidden;
}
.web-src-icon img { width: 16px; height: 16px; display: block; }
.web-carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--line, #e2e8f0); background: var(--surface, #fff);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .15); font-size: 18px; line-height: 1; cursor: pointer; color: #334155;
}
.web-carousel-nav.prev { left: -10px; }
.web-carousel-nav.next { right: -10px; }
.web-carousel-nav[hidden] { display: none !important; }
a.web-cite {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; margin: 0 1px;
  border-radius: 999px; background: #eaf1fe; color: #2563eb !important; font-size: 10px; font-weight: 700;
  text-decoration: none !important; vertical-align: super; line-height: 1;
}
a.web-cite:hover { background: #2563eb; color: #fff !important; }
.web-sources { margin-top: 12px; border-top: 1px solid var(--line, #e2e8f0); padding-top: 8px; }
.web-sources summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #475569; }
.web-sources ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; font-size: 13px; }
.web-sources li a { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.web-sources li a:hover .web-sources-title { text-decoration: underline; color: #2563eb; }
.web-sources-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-sources li small { color: #94a3b8; flex-shrink: 0; }
.web-related { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.web-related-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #64748b; }
.web-related-btn {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; text-align: left;
  border: 1px solid #c7d7fb; background: #f5f8ff; color: #1e3a8a; border-radius: 10px;
  padding: 8px 12px; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s;
}
.web-related-btn i { font-style: normal; color: #2563eb; }
.web-related-btn:hover { background: #eaf1fe; border-color: #2563eb; }
html[data-theme="dark"] .web-card, html[data-theme="dark"] .web-carousel-nav { background: #111c22; }
html[data-theme="dark"] .web-related-btn { background: #13233f; border-color: #26437a; color: #c9dafc; }
html[data-theme="dark"] .web-cite, html[data-theme="dark"] .web-card-site em { background: #1b2f55; }
@media (max-width: 800px) {
  .web-card { flex-basis: 70%; }
  .web-carousel-nav { display: none !important; }
}

/* Projetos (03/10/2026): lista, tela do projeto, grupo no menu e etiqueta no
   chat. Montado por projects-live.js. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.project-card {
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
  padding: 18px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.project-card:hover { border-color: #b9d2ff; background: #f8fbff; }
.project-card-icon { color: #0066ff; display: inline-flex; }
.project-card-icon .ki { width: 26px; height: 26px; }
.project-card b { font-size: 15px; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.project-card small { font-size: 12px; color: #64748b; }

.project-back {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: #0066ff; font: inherit; letter-spacing: inherit;
}
.project-form {
  display: grid;
  gap: 8px;
  max-width: 820px;
  margin-bottom: 28px;
}
.project-form label { font-size: 14px; font-weight: 600; color: #334155; margin-top: 8px; }
.project-form input,
.project-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #dfe6f0;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
}
.project-form textarea { resize: vertical; min-height: 160px; }
.project-hint { margin: 0; font-size: 13px; line-height: 1.6; color: #64748b; max-width: 820px; }
.project-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.project-form-foot small { font-size: 12px; color: #64748b; }
.project-form-foot small[data-state="error"] { color: #b91c1c; }

.project-conversations { max-width: 820px; margin-bottom: 28px; box-sizing: border-box; }
.project-conversations > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.project-conversations h2 { font-size: 17px; font-weight: 600; margin: 0; }
.project-conversations > header button,
.project-add button:not(.primary),
.project-danger button {
  border: 1px solid #dfe6f0; background: #fff; color: #334155;
  border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.project-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.project-add[hidden] { display: none; }
.project-add select {
  flex: 1; min-width: 200px; padding: 9px 10px; border: 1px solid #dfe6f0; border-radius: 9px;
  background: #fff; color: #0f172a; font: inherit; font-size: 14px;
}
.project-chat-list { margin-top: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px; overflow: hidden; }
.project-chat-list > .project-hint { padding: 14px; }
.project-danger { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 820px; }
.project-danger small { font-size: 12px; color: #64748b; }
.project-danger button.is-armed { border-color: #dc2626; color: #b91c1c; }

/* Projeto no menu lateral: abre e fecha, com as conversas dentro. As acoes
   (＋ e engrenagem) aparecem ao passar o mouse; no toque ficam sempre. */
.sidebar-project-chats { display: none; padding-left: 14px; }
.sidebar-project.is-open > .sidebar-project-chats { display: block; }
.sidebar-project-icon { display: inline-flex; color: #64748b; }
.sidebar-group .sidebar-project-icon .ki { width: 16px !important; height: 16px !important; flex: none; }
.sidebar-project.is-open > .sidebar-project-row .sidebar-project-icon { color: #0066ff; }
.sidebar-group .sidebar-row-action {
  flex: 0 0 26px; width: 26px; min-height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 7px; background: transparent; color: #64748b;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.sidebar-group .sidebar-row-action .ki { width: 15px; height: 15px; }
.sidebar-group .sidebar-row-action:hover,
.sidebar-group .sidebar-row-action:focus-visible { background: #eaf2ff; color: #0066ff; }
@media (hover: hover) and (min-width: 801px) {
  .sidebar-project-row .sidebar-row-action { opacity: 0; }
  .sidebar-project-row:hover .sidebar-row-action,
  .sidebar-project-row:focus-within .sidebar-row-action { opacity: 1; }
}
.sidebar-project-chats .sidebar-see-all { padding-left: 12px; }
html[data-theme="dark"] .sidebar-group .sidebar-row-action { color: #9babc3; }
html[data-theme="dark"] .sidebar-group .sidebar-row-action:hover { background: #10223f; color: #8ab6ff; }

/* Na tela do projeto, as conversas ficam numa faixa com a cor da etiqueta da
   Krewia: separa o que e configuracao do que sao as conversas. */
.project-conversations {
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: #eaf2ff;
  border: 1px solid #cfe0ff;
}
.project-conversations h2 { color: #0056d8; }
.project-conversations .project-hint { color: #3b5b8f; }
.project-conversations .project-chat-list { background: #fff; border-color: #cfe0ff; }
html[data-theme="dark"] .project-conversations { background: #10223f; border-color: #24406e; }
html[data-theme="dark"] .project-conversations h2 { color: #8ab6ff; }
html[data-theme="dark"] .project-conversations .project-hint { color: #b6c8e6; }
html[data-theme="dark"] .project-conversations .project-chat-list { background: #0d1728; border-color: #24406e; }

/* O botao flutuante de novo chat nao aparece nas telas de Projetos: ali ele
   pareceria "nova conversa neste projeto". */
html[data-fab] #businessApp:has(#projects.active, #project.active) .krewia-fab { display: none; }

/* Os botoes de retrair e fixar o menu so aparecem quando o estilo manda
   (style-gallery.css); fora disso ficam escondidos. */
#businessApp .b-sidebar .sidebar-nav-toggle { display: none !important; }
#businessApp .b-sidebar .sidebar-nav-toggle .ki { width: 18px; height: 18px; }

/* A etiqueta do projeto usa o desenho da etiqueta da tarefa; o nome e um
   botao que abre o projeto. */
.chat-project-context .chat-project-open {
  width: auto; height: auto; border-radius: 0; background: none; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-project-context .chat-project-open:hover { text-decoration: underline; }

html[data-theme="dark"] .project-card,
html[data-theme="dark"] .project-form input,
html[data-theme="dark"] .project-form textarea,
html[data-theme="dark"] .project-add select,
html[data-theme="dark"] .project-conversations > header button,
html[data-theme="dark"] .project-add button:not(.primary),
html[data-theme="dark"] .project-danger button {
  background: #0d1728; border-color: #24324a; color: #d9e5fb;
}
html[data-theme="dark"] .project-card:hover { background: #10223f; border-color: #2f4a78; }
html[data-theme="dark"] .project-card b { color: #edf3ff; }
html[data-theme="dark"] .project-form label { color: #c7d5f0; }


/* Meu espaco (04/10/2026): seis blocos em duas colunas, lado a lado e com a
   mesma altura em cada linha: Tarefas | Favoritos, Recentes | Historico,
   Meus documentos | Meus projetos. A ordem e por "order", e nao por linha
   fixa: bloco que a empresa ocultou sai e os outros se ajeitam. */
.personal-space-page .space-projects > header { background: linear-gradient(135deg, #0b7a75, #14a89f); }
html[data-theme="dark"] .personal-space-page .space-projects > header { background: linear-gradient(135deg, #0a5e5a, #0f837c) !important; }
.space-project-list { display: grid; }
#my-space .space-tasks { order: 1; }
#my-space .space-favorites { order: 2; }
#my-space .space-recent { order: 3; }
#my-space .space-history { order: 4; }
#my-space .space-documents { order: 5; }
#my-space .space-projects { order: 6; }
@media (min-width: 981px) {
  #my-space .space-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  #my-space .space-grid > .space-card { grid-column: auto; grid-row: auto; align-self: stretch; }
  /* O historico nao dita a altura da linha: fica do tamanho do vizinho
     (Recentes) e rola por dentro. */
  #my-space .space-history { height: 0; min-height: 100%; }
  #my-space .space-history .history-list { flex: 1; min-height: 0; max-height: none; overflow: auto; }
}

/* Cabecalho do chat (04/10/2026): titulo maior e em negrito, que da para
   renomear, e tres icones iguais a direita -- compartilhar, novo chat e
   favoritar -- com a dica ao passar o mouse (data-tip), como a estrela. */
#b-chat > header .chat-title { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
#b-chat > header h2 {
  font-size: 16px; font-weight: 700; margin: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#b-chat > header h2[hidden] { display: none; }
#b-chat > header .chat-title:has(.chat-rename-button:not(.hidden)) h2 { cursor: text; border-radius: 6px; }
#b-chat > header .chat-title:has(.chat-rename-button:not(.hidden)) h2:hover { background: #f1f5f9; box-shadow: 0 0 0 4px #f1f5f9; }
#b-chat > header .chat-title-input {
  flex: 1; min-width: 0; max-width: 560px; padding: 6px 9px;
  border: 1px solid #9cc2ff; border-radius: 8px; background: #fff; color: #0f172a;
  font: 700 16px Inter, system-ui, sans-serif; outline: 0; box-shadow: 0 0 0 3px #e3eeff;
}
#b-chat > header .chat-title-input[hidden] { display: none; }
#b-chat > header .chat-rename-button {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: #94a3b8; cursor: pointer; opacity: 0;
}
#b-chat > header .chat-rename-button .ki { width: 15px; height: 15px; }
#b-chat > header .chat-title:hover .chat-rename-button,
#b-chat > header .chat-rename-button:focus-visible { opacity: 1; }
#b-chat > header .chat-rename-button:hover { background: #eaf2ff; color: #0066ff; }
@media (hover: none) { #b-chat > header .chat-rename-button { opacity: 1; } }
/* Dois .hidden de proposito: precisa vencer o display dos icones, definido mais abaixo. */
#b-chat > header .hidden.hidden { display: none !important; }

#b-chat > header :is(.chat-share-button, .chat-new-button) {
  position: relative; flex: none;
  display: inline-grid !important; place-items: center;
  width: 38px !important; height: 38px !important; padding: 0 !important;
  border: 1px solid #dbe5f5 !important; border-radius: 10px !important;
  background: #fff !important; color: #64748b !important; cursor: pointer;
}
#b-chat > header :is(.chat-share-button, .chat-new-button) .ki { width: 19px; height: 19px; }
#b-chat > header :is(.chat-share-button, .chat-new-button):hover { border-color: #9cc2ff !important; color: #0066ff !important; background: #f5f9ff !important; }
/* Os tres ficam juntos a direita: o primeiro visivel empurra o grupo. */
#b-chat > header .chat-share-button { margin-left: auto; }
#b-chat > header .chat-new-button { margin-left: auto; }
#b-chat > header .chat-share-button:not(.hidden) + .chat-new-button { margin-left: 8px; }
#b-chat > header .chat-favorite-button { margin-left: 8px !important; }
#b-chat > header :is(.chat-share-button, .chat-new-button, .chat-rename-button)::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: max-content; max-width: 240px; padding: 6px 10px; border-radius: 8px;
  background: #0f172a; color: #fff; font: 500 12.5px Inter, system-ui, sans-serif;
  white-space: normal; text-align: left; opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
#b-chat > header .chat-rename-button::after { right: auto; left: 0; }
#b-chat > header :is(.chat-share-button, .chat-new-button, .chat-rename-button):hover::after,
#b-chat > header :is(.chat-share-button, .chat-new-button, .chat-rename-button):focus-visible::after { opacity: 1; }
html[data-theme="dark"] #b-chat > header :is(.chat-share-button, .chat-new-button) { background: #0d1728 !important; border-color: #24324a !important; color: #c7d5f0 !important; }
html[data-theme="dark"] #b-chat > header .chat-title-input { background: #0d1728; color: #edf3ff; border-color: #2f4a78; box-shadow: 0 0 0 3px #10223f; }
html[data-theme="dark"] #b-chat > header .chat-title:has(.chat-rename-button:not(.hidden)) h2:hover { background: #16233a; box-shadow: 0 0 0 4px #16233a; }
/* No celular a regra antiga escondia o texto do botao de favoritar -- que hoje
   e a propria estrela -- e sobrava um quadrado vazio. */
#b-chat > header .chat-favorite-button span { display: inline !important; }

/* Menu "..." da conversa (04/10/2026): flutuante, com icone e nome em cada
   opcao. Montado por live-api.js (abrirMenuDaConversa). */
.conversation-menu {
  position: fixed; z-index: 300; min-width: 230px; max-width: 290px; max-height: min(70vh, 420px); overflow: auto;
  padding: 6px; border: 1px solid #dbe5f5; border-radius: 12px; background: #fff;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18);
}
.conversation-menu[hidden] { display: none; }
.conversation-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: transparent; color: #1e293b;
  font: 500 13.5px Inter, system-ui, sans-serif; text-align: left; cursor: pointer;
}
.conversation-menu button:hover, .conversation-menu button:focus-visible { background: #f1f6ff; outline: 0; }
.conversation-menu-icon { flex: none; display: inline-grid; place-items: center; width: 18px; color: #64748b; font-size: 17px; line-height: 1; }
.conversation-menu-icon .ki { width: 16px; height: 16px; }
.conversation-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-menu-arrow { flex: none; color: #94a3b8; font-size: 15px; }
.conversation-menu .conversation-menu-back { color: #64748b; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid #eef2f8; border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.conversation-menu .is-current { color: #0056d8; }
.conversation-menu .is-current .conversation-menu-icon, .conversation-menu .is-current .conversation-menu-arrow { color: #0066ff; }
.conversation-menu .is-danger { color: #b91c1c; margin-top: 4px; border-top: 1px solid #eef2f8; border-radius: 0 0 8px 8px; padding-top: 11px; }
.conversation-menu .is-danger .conversation-menu-icon { color: #b91c1c; }
.conversation-menu .is-danger:hover, .conversation-menu .is-danger.is-armed { background: #fef2f2; }
.conversation-menu-empty { margin: 4px 10px 6px; font-size: 12.5px; color: #64748b; }
.sidebar-group .organize-chat.chat-more { font-size: 18px; line-height: 1; letter-spacing: 0; border-radius: 7px; }
.sidebar-group .organize-chat.chat-more[aria-expanded="true"] { background: #eaf2ff; color: #0066ff; }
.sidebar-chat-row .chat-row-rename {
  flex: 1; min-width: 0; margin: 3px 4px 3px 0; padding: 6px 8px; border: 1px solid #9cc2ff; border-radius: 7px;
  background: #fff; color: #0f172a; font: 500 13px Inter, system-ui, sans-serif; outline: 0; box-shadow: 0 0 0 3px #e3eeff;
}
.sidebar-group .sidebar-chat-link[hidden] { display: none !important; }
html[data-theme="dark"] .conversation-menu { background: #0d1728; border-color: #24324a; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .conversation-menu button { color: #d9e5fb; }
html[data-theme="dark"] .conversation-menu button:hover, html[data-theme="dark"] .conversation-menu button:focus-visible { background: #16233a; }
html[data-theme="dark"] .conversation-menu .conversation-menu-back, html[data-theme="dark"] .conversation-menu .is-danger { border-color: #24324a; }
html[data-theme="dark"] .conversation-menu .is-danger { color: #fca5a5; }
html[data-theme="dark"] .conversation-menu .is-danger .conversation-menu-icon { color: #fca5a5; }
html[data-theme="dark"] .conversation-menu .is-danger:hover, html[data-theme="dark"] .conversation-menu .is-danger.is-armed { background: #3a1820; }
html[data-theme="dark"] .sidebar-chat-row .chat-row-rename { background: #0d1728; color: #edf3ff; border-color: #2f4a78; box-shadow: 0 0 0 3px #10223f; }

/* Saudacao do chat com a marca (04/10/2026): o K a esquerda, da altura da
   saudacao ate "O que vamos resolver hoje?". O bloco e centralizado como um
   todo; a marca ocupa a faixa reservada a esquerda, de cima a baixo. A
   largura da faixa limita a marca se a saudacao quebrar em duas linhas. */
.chat-home-head {
  display: inline-block; position: relative; max-width: 100%; box-sizing: border-box;
  margin: 20px 0 22px; padding-left: 72px; text-align: left;
}
.chat-home-words { min-width: 0; }
#b-chat > main .chat-home-head .chat-home-title { margin: 0 0 6px; }
#b-chat > main .chat-home-head .chat-home-sub { margin: 0; }
.chat-home-mark {
  position: absolute; left: 0; top: 0; bottom: 0; width: 58px;
  background: url(krewia-mark.svg) left center / contain no-repeat;
}
html[data-style="aurora"] .chat-home-mark { background-image: url(krewia-mark-aurora.svg); }
html[data-style="contraste"] .chat-home-mark { background-image: url(krewia-mark-contraste.svg); }
html[data-style="floresta"] .chat-home-mark { background-image: url(krewia-mark-floresta.svg); }
html[data-style="grafite"] .chat-home-mark { background-image: url(krewia-mark-grafite.svg); }
html[data-style="ipe"] .chat-home-mark { background-image: url(krewia-mark-ipe.svg); }
html[data-style="oceano"] .chat-home-mark { background-image: url(krewia-mark-oceano.svg); }

/* Titulo comprido de conversa no menu lateral: cortava com "...", que se
   confundia com o "..." do menu da conversa logo ao lado. Agora o titulo
   so se desfaz na ponta, sem reticencias (proprietario, 04/10/2026). */
.b-sidebar .sidebar-chat-link .chat-row-title {
  /* Ocupa a linha inteira: assim a ponta que se desfaz e a da linha, e um
     titulo curto nao perde as ultimas letras. */
  flex: 1 1 auto;
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}

/* Biblioteca (04/10/2026): busca, filtros, abas por tipo e cartoes com
   miniatura. Montada por library-live.js. */
.library-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.library-search { position: relative; flex: 1 1 280px; max-width: 460px; }
.library-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: #94a3b8; pointer-events: none; }
.library-search-icon .ki { width: 17px; height: 17px; }
.library-search input {
  box-sizing: border-box; width: 100%; padding: 11px 12px 11px 38px; border: 1px solid #dfe6f0; border-radius: 10px;
  background: #fff; color: #0f172a; font: inherit; font-size: 14px;
}
.library-filter { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #64748b; }
.library-filter select {
  min-width: 170px; padding: 10px 11px; border: 1px solid #dfe6f0; border-radius: 10px;
  background: #fff; color: #0f172a; font: inherit; font-size: 14px; font-weight: 400;
}
.library-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line, #e2e8f0); }
.library-tabs button {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: #64748b;
  font: 500 14px Inter, system-ui, sans-serif; cursor: pointer;
}
.library-tabs button em { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: #eef2f8; color: #64748b; }
.library-tabs button:hover { color: #0f172a; }
.library-tabs button[aria-selected="true"] { color: #0066ff; border-bottom-color: #0066ff; font-weight: 600; }
.library-tabs button[aria-selected="true"] em { background: #eaf2ff; color: #0056d8; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.library-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px;
  border: 1px solid var(--line, #e2e8f0); border-radius: 14px; background: #fff;
}
.library-thumb {
  display: grid; place-items: center; height: 138px; margin-bottom: 4px; padding: 0; overflow: hidden;
  border: 0; border-radius: 10px; background: #f3f6fb; color: #94a3b8; cursor: pointer;
}
.library-thumb .ki { width: 46px; height: 46px; }
.library-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.library-thumb:hover { background: #eaf2ff; color: #0066ff; }
.library-card[data-type="planilhas"] .library-thumb { color: #15803d; background: #f0fdf4; }
.library-card[data-type="documentos"] .library-thumb { color: #2563eb; background: #eff6ff; }
.library-card[data-type="paginas"] .library-thumb { color: #7c3aed; background: #f5f3ff; }
.library-name { font-size: 14px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-meta, .library-source { font-size: 12px; color: #64748b; line-height: 1.5; }
.library-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.library-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #eef2f8; color: #475569; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-badge[data-origin="gerado"] { background: #eaf2ff; color: #0056d8; }
.library-badge[data-origin="google"] { background: #fef3c7; color: #92400e; }
.library-badge.is-project { background: #e6f6f4; color: #0b7a75; }
.library-link { border: 0; background: none; padding: 0; color: #0066ff; font: inherit; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-link:hover { text-decoration: underline; }
.library-card footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.library-card footer button, .library-more button, .library-viewer header button {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border: 1px solid #dfe6f0; border-radius: 8px;
  background: #fff; color: #334155; font: 500 12.5px Inter, system-ui, sans-serif; cursor: pointer;
}
.library-card footer button .ki { width: 14px; height: 14px; }
.library-card footer button:hover:not(:disabled), .library-more button:hover { border-color: #9cc2ff; color: #0066ff; background: #f5f9ff; }
.library-card footer button:disabled { opacity: 0.45; cursor: default; }
.library-more { display: flex; justify-content: center; margin: 20px 0 8px; }
.library-more button[hidden] { display: none; }
.library-viewer { width: min(960px, calc(100vw - 32px)); max-height: 90dvh; padding: 0; border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35); }
.library-viewer::backdrop { background: rgba(15, 23, 42, 0.6); }
.library-viewer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.library-viewer header b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.library-viewer header div { display: flex; gap: 8px; flex: none; }
.library-viewer-body { display: grid; place-items: center; padding: 16px; background: #f3f6fb; min-height: 200px; max-height: calc(90dvh - 62px); overflow: auto; color: #64748b; }
.library-viewer-body img { max-width: 100%; max-height: calc(90dvh - 100px); border-radius: 8px; }
html[data-theme="dark"] .library-search input, html[data-theme="dark"] .library-filter select,
html[data-theme="dark"] .library-card, html[data-theme="dark"] .library-card footer button,
html[data-theme="dark"] .library-more button, html[data-theme="dark"] .library-viewer header button {
  background: #0d1728; border-color: #24324a; color: #d9e5fb;
}
html[data-theme="dark"] .library-name { color: #edf3ff; }
html[data-theme="dark"] .library-thumb, html[data-theme="dark"] .library-card .library-thumb { background: #16233a; }
html[data-theme="dark"] .library-tabs button em, html[data-theme="dark"] .library-badge { background: #16233a; color: #c7d5f0; }
html[data-theme="dark"] .library-viewer { background: #0d1728; color: #edf3ff; }
html[data-theme="dark"] .library-viewer header { border-color: #24324a; }
html[data-theme="dark"] .library-viewer-body { background: #07101f; }
@media (max-width: 760px) {
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .library-thumb { height: 104px; }
  .library-filter { flex: 1 1 140px; }
  .library-filter select { min-width: 0; width: 100%; }
}

/* Biblioteca: abrir sem sair dela. Documento, planilha e PDF aparecem no
   visor de Meus documentos emprestado para dentro da janela; a pagina do
   chat, na mesma caixa fechada em que aparece na conversa. */
.library-viewer.is-document > header { display: none; }
.library-viewer.is-document .library-viewer-body, .library-viewer.is-page .library-viewer-body {
  display: block; place-items: initial; padding: 16px 18px 20px; background: #fff; color: inherit; text-align: left;
  max-height: 90dvh; min-height: 320px;
}
.library-viewer.is-page .library-viewer-body { max-height: calc(90dvh - 62px); }
.library-viewer .docs-viewer { display: block; }
html[data-theme="dark"] .library-viewer.is-document .library-viewer-body, html[data-theme="dark"] .library-viewer.is-page .library-viewer-body { background: #0d1728; }

/* Biblioteca: miniatura de pagina. A pagina e desenhada com 1200px de
   largura e encolhida para caber na caixa; o botao fica por cima,
   transparente, e e ele que recebe o clique. */
.library-thumb-box { position: relative; height: 138px; margin-bottom: 4px; border-radius: 10px; overflow: hidden; }
.library-thumb-box > .library-thumb { position: relative; z-index: 1; width: 100%; height: 100%; margin: 0; }
.library-frame { position: absolute; inset: 0; overflow: hidden; background: #fff; pointer-events: none; }
.library-frame iframe { display: block; border: 0; transform-origin: 0 0; background: #fff; pointer-events: none; }
.library-thumb-box.has-page > .library-thumb { background: transparent !important; }
.library-thumb-box.has-page > .library-thumb .ki { display: none; }
.library-thumb-box.has-page { box-shadow: inset 0 0 0 1px var(--line, #e2e8f0); }
.library-thumb-box.has-page > .library-thumb:hover { background: rgba(0, 102, 255, 0.08) !important; }
@media (max-width: 760px) { .library-thumb-box { height: 104px; } }

/* Biblioteca: previa por conteudo. Documento = as primeiras linhas, como
   uma folha; planilha = as primeiras linhas e colunas, como uma grade. Fica
   por baixo do botao, que continua recebendo o clique. */
.library-preview {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; text-align: left;
  padding: 10px 12px; background: #fff; color: #334155; font: 400 7.5px/1.45 Inter, system-ui, sans-serif;
}
.library-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(transparent, #fff); }
.library-preview p { margin: 0 0 2.5px; white-space: nowrap; overflow: hidden; }
.library-preview p.is-title { font-weight: 700; font-size: 8.5px; color: #0f172a; margin-top: 2px; }
.library-preview.is-grid { padding: 8px; }
.library-preview table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.library-preview th, .library-preview td { border: 1px solid #dbe5f0; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; font-size: 7px; text-align: left; }
.library-preview th { background: #ecfdf3; color: #166534; font-weight: 700; }
.library-thumb-box.has-preview > .library-thumb { background: transparent !important; }
.library-thumb-box.has-preview > .library-thumb .ki { display: none; }
.library-thumb-box.has-preview { box-shadow: inset 0 0 0 1px var(--line, #e2e8f0); }
.library-thumb-box.has-preview > .library-thumb:hover { background: rgba(0, 102, 255, 0.08) !important; }
html[data-theme="dark"] .library-preview { background: #f8fafc; }

/* Biblioteca: marca do cartao que representa varias versoes ou copias. */
.library-badge.is-copies { background: #f1f5f9; color: #334155; box-shadow: inset 0 0 0 1px #cbd5e1; cursor: help; }
html[data-theme="dark"] .library-badge.is-copies { background: #16233a; color: #c7d5f0; box-shadow: inset 0 0 0 1px #2f4a78; }

/* Caixa de mensagem no celular (pedido do proprietario em 10/10/2026): o texto
   ocupa uma linha inteira, acima dos botoes. Na mesma linha do seletor de
   modelo, do microfone e do enviar sobravam uns 120px para digitar, e a frase
   quebrava a cada duas palavras. No computador nada muda. */
@media (max-width: 760px) {
  #businessComposer > footer {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 6px;
  }

  #businessComposer #businessPrompt {
    order: -1;
    flex: 1 1 100%;
    width: 100%;
  }

  /* Anexar e o seletor a esquerda; microfone e enviar juntos a direita. */
  #businessComposer > footer > .composer-pickers {
    margin-right: auto;
  }

  #businessComposer > footer > .chat-mic-button,
  #businessComposer > footer > .send {
    margin-left: 0;
  }
}

/* Consumo e orcamento > Visao por credito (10/10/2026). As abas e as tabelas
   usam as mesmas pecas da visao por custo; aqui so as colunas proprias. */
.usage-tabs {
  margin: 4px 0 18px;
}

.credit-type-table > header,
.credit-type-table > article {
  grid-template-columns: 2fr 1.4fr .8fr .9fr;
}

.credit-user-table > header,
.credit-user-table > article {
  grid-template-columns: 2.4fr .9fr .9fr .9fr .8fr .9fr;
}

/* Saldo estourado: o numero fica vermelho, como um extrato no negativo. */
#creditLeft[data-state="over"] {
  color: #c62828;
}

html[data-theme="dark"] #creditLeft[data-state="over"] {
  color: #ff8a80 !important;
}

/* Visao por credito: graficos em pares, dois por linha, ocupando a largura da
   tela (pedido do proprietario em 10/10/2026). A visao por custo continua com
   tres por linha. */
#usageCreditView .usage-charts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#usageCreditView .usage-chart {
  padding: 22px 24px;
}

#usageCreditView .usage-chart .md-chart figcaption {
  font-size: 1rem;
  margin-bottom: 10px;
}

#usageCreditView .usage-chart .mock-chart > div {
  grid-template-columns: minmax(0, 130px) minmax(60px, 1fr) auto;
  gap: 12px;
  font-size: 13px;
  padding: 3px 0;
}

#usageCreditView .usage-chart > small {
  display: block;
  margin-top: 12px;
}

@media (max-width: 760px) {
  #usageCreditView .usage-charts {
    grid-template-columns: 1fr;
  }
}

/* O detalhe da pessoa tem cinco colunas, nao as seis da visao por custo. */
.credit-breakdown .usage-breakdown-row {
  grid-template-columns: 1.6fr 1.2fr .7fr .7fr 1fr;
}

/* O bloco de custo, encaixado no cliente aberto em Administracao Krewia. */
.usage-cost-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.usage-cost-head > button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  white-space: nowrap;
}

button.client-person {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

button.client-person:hover {
  background: rgba(0, 102, 255, 0.05);
}

.usage-table > article.is-focused {
  background: rgba(0, 102, 255, 0.08);
  transition: background 0.3s;
}

/* Conta individual (10/10/2026): uma pessoa so, sem empresa. O que e de
   empresa sai da tela; a API recusa o mesmo por conta propria. O menu de
   Colaboracao some pela lista de visibilidade que a API devolve. */
body.account-individual [data-bview="overview"],
body.account-individual [data-bview="people"],
body.account-individual [data-bview="connectors"],
body.account-individual #shareConversation,
body.account-individual .visibility-block,
body.account-individual [data-company-only] {
  display: none !important;
}

/* Administracao Krewia > Nova conta individual. */
.individual-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.individual-form label {
  display: grid;
  gap: 5px;
  flex: 1 1 220px;
  font-size: 13px;
  color: var(--muted);
}

.individual-form input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  background: none;
  color: inherit;
}

/* Conta individual: o menu tem so Inicio e Ajuda (pedido do proprietario em
   10/10/2026). Saem as secoes Colaboracao, Automacao e IA e Administracao; os
   creditos entram no Inicio, com o nome "Consumo". */
body:not(.account-individual) [data-individual-only] {
  display: none !important;
}

body.account-individual .b-sidebar .nav-section[data-admin-only],
body.account-individual .b-sidebar .nav-section:has([data-bview="channels"]),
body.account-individual .b-sidebar .nav-section:has([data-bview="company-agents"]),
body.account-individual [data-bview="security"],
body.account-individual [data-bview="company-agents"],
body.account-individual [data-home="agente"] {
  display: none !important;
}

/* "Nao lembro a senha atual", dentro da janela de senha. */
.krewia-dialog .dialog-link {
  justify-self: start;
  border: 0;
  background: none;
  padding: 0;
  color: #0066ff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
}

.krewia-dialog .dialog-link[hidden] {
  display: none;
}

/* Colaboradores (10/10/2026): as habilidades no cartao e no cadastro. */
.collab-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 2px;
}

.collab-skill {
  border: 1px solid #c9dcff;
  border-radius: 999px;
  background: #eef4ff;
  color: #0b4fc4;
  font-size: 12px;
  padding: 3px 10px;
}

.collab-skill.is-off {
  border-color: var(--line);
  background: none;
  color: var(--muted);
  text-decoration: line-through;
}

.collab-skill.is-none {
  border-style: dashed;
  border-color: var(--line);
  background: none;
  color: var(--muted);
}

html[data-theme="dark"] .collab-skill {
  border-color: #2b4a85;
  background: #12203a;
  color: #9cc0ff;
}

.collab-skill-picker {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px 12px;
}

.collab-skill-picker legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
}

.collab-skill-picker #collabSkillList {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

/* O rosto do colaborador de IA (10/10/2026): no cartao, no seletor do chat e
   no cadastro. Quem nao tem rosto continua com o icone. */
.agent-card-icon.has-avatar,
.agent-bg.has-avatar,
.collab-face-now.has-avatar {
  background-color: #e2e8f0;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.collab-face {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.collab-face-now {
  display: grid;
  place-items: center;
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(145deg, #0066ff, #22c6f7);
  color: #fff;
  font-size: 34px;
}

.collab-face-side {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.collab-face-title {
  font-size: 13px;
  font-weight: 600;
}

.collab-face-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collab-face-preset {
  width: 46px;
  height: 46px;
  border: 2px solid transparent;
  border-radius: 50%;
  background-color: #e2e8f0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
}

.collab-face-preset:hover {
  border-color: #9cc0ff;
}

.collab-face-preset[aria-pressed="true"] {
  border-color: #0066ff;
  box-shadow: 0 0 0 2px #cfe0ff;
}

.collab-face-actions,
.collab-face-ai,
.collab-persona-ideas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collab-face-ai[hidden],
.collab-face-actions > [hidden] {
  display: none;
}

.collab-face-ai > input {
  flex: 1 1 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  background: none;
  color: inherit;
}

.collab-face-actions > button,
.collab-persona-idea {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
}

.collab-face-actions > button:hover,
.collab-persona-idea:hover {
  border-color: #0066ff;
  color: #0066ff;
}

.collab-persona-ideas {
  margin-bottom: 6px;
}

/* A lista de habilidades fica por cima do que vem embaixo no cadastro. */
#collabSkillPicker .share-options {
  z-index: 20;
}

@media (max-width: 600px) {
  .collab-face {
    flex-direction: column;
  }
}

/* A persona e texto corrido, nao instrucao tecnica: fonte da tela. */
.agent-form textarea[data-key="persona"] {
  font-family: inherit;
}

/* Tarefa feita por colaborador de IA (10/10/2026): quem faz e em que pe esta. */
.task-ia {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 10px;
  font-size: 12.5px;
}

.task-ia-face {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #0066ff, #22c6f7);
  color: #fff;
  font-size: 11px;
}

.task-ia-face.has-avatar {
  background-color: #e2e8f0;
  background-size: cover;
  background-position: center;
}

.task-ia-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-ia-state {
  margin-left: auto;
  border-radius: 999px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  white-space: nowrap;
}

.task-ia-state.is-queued { background: #eef2f7; color: #475569; }
.task-ia-state.is-working { background: #e0edff; color: #0b4fc4; }
.task-ia-state.is-review { background: #fff1d6; color: #9a5b00; }
.task-ia-state.is-failed { background: #fde8e8; color: #b42318; }

.board-filter[hidden] {
  display: none;
}

.task-ia-picker {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.task-ia-review[hidden] {
  display: none;
}

.task-ia-hint {
  color: var(--muted);
}

.task-review {
  display: grid;
  gap: 8px;
  border: 1px solid #f3d089;
  border-radius: 12px;
  background: #fffaf0;
  padding: 12px 14px;
}

.task-review p {
  margin: 0;
  font-weight: 600;
}

.task-review textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}

.task-review textarea[hidden] {
  display: none;
}

.task-ia-failed {
  border-radius: 10px;
  background: #fde8e8;
  color: #b42318;
  padding: 9px 12px;
  margin: 0;
}

.comment.is-ia > .task-ia-face {
  float: left;
  margin-right: 8px;
}

.comment-delivery {
  clear: both;
  border-left: 3px solid #cfe0ff;
  padding-left: 12px;
  margin-top: 8px;
}

html[data-theme="dark"] .task-review {
  border-color: #6b5320;
  background: #2a2210;
}

html[data-theme="dark"] .task-ia-state.is-queued { background: #1e293b; color: #cbd5e1; }
html[data-theme="dark"] .task-ia-state.is-working { background: #12203a; color: #9cc0ff; }
html[data-theme="dark"] .task-ia-state.is-review { background: #3a2c0d; color: #f5c96b; }

/* O filtro de colaboradores de IA vale em qualquer quadro, nao so no de time. */
#kanban .board-filter.board-filter-ia:not([hidden]) {
  display: inline-flex;
}

/* Quatro etapas desde a coluna Revisar: as quatro numa linha so; em tela
   estreita o quadro rola para o lado em vez de quebrar a ultima para baixo. */
#kanban .kanban-columns {
  grid-template-columns: repeat(4, minmax(210px, 1fr));
}

@media (max-width: 1250px) {
  #kanban .kanban-columns {
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    overflow-x: auto;
    padding-bottom: 12px;
  }
}

@media (max-width: 700px) {
  #kanban .kanban-columns {
    grid-template-columns: repeat(4, minmax(250px, 82vw));
  }
}

/* Galeria de rostos prontos, em abas (10/10/2026). */
.collab-face-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.collab-face-tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
}

.collab-face-tab[aria-selected="true"] {
  border-color: #0066ff;
  background: #0066ff;
  color: #fff;
}

.collab-face .collab-face-presets {
  max-height: 172px;
  overflow-y: auto;
  padding: 4px;
}

/* Cadastro do colaborador de IA: ajustes pedidos pelo proprietario em
   10/10/2026, depois de usar a tela. */

/* Titulos dos campos com destaque. */
#ownAgentEditor .agent-field > span,
#ownAgentEditor .collab-face-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

html[data-theme="dark"] #ownAgentEditor .agent-field > span,
html[data-theme="dark"] #ownAgentEditor .collab-face-title {
  color: #f1f5f9;
}

/* Abas da galeria e "Enviar foto / Sem rosto" na mesma linha. */
.collab-face-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.collab-face-bar .collab-face-actions {
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

/* A sugestao de persona em uso, em azul. */
.collab-persona-idea[aria-pressed="true"],
.collab-persona-idea[aria-pressed="true"]:hover {
  border-color: #0066ff;
  background: #0066ff;
  color: #fff;
}

/* A caixa de marcar herdava a largura dos campos de texto e empurrava a frase
   para a linha de baixo. */
#ownAgentEditor .agent-check input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
}

#ownAgentEditor .agent-check > span {
  flex: 1;
  min-width: 0;
}

/* Botoes do rodape no tamanho dos demais botoes da tela. */
#ownAgentEditor .company-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

#ownAgentEditor .company-actions button,
#ownAgentEditor .company-actions .agent-delete {
  flex: none;
  width: auto;
  min-height: 0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.3;
  padding: 7px 13px;
}

/* O botao flutuante de novo chat fica no canto de baixo: o rodape do cadastro
   termina antes dele, para nada ficar por baixo. */
html[data-fab] #ownAgentEditor {
  padding-bottom: 96px;
}

html[data-fab] #ownAgentEditor .company-actions {
  padding-right: 84px;
}

@media (max-width: 700px) {
  .collab-face-bar .collab-face-actions {
    padding-left: 0;
    border-left: 0;
  }
}

/* Persona pronta: o texto aparece, mas nao se edita. */
.agent-form textarea[data-key="persona"][readonly] {
  background: #f8fafc;
  color: var(--muted);
  cursor: default;
  resize: none;
}

html[data-theme="dark"] .agent-form textarea[data-key="persona"][readonly] {
  background: #111827;
}

/* Perfil do colaborador de IA, so de leitura (10/10/2026). */
.agent-card.is-own > header.is-link {
  cursor: pointer;
}

.agent-card.is-own > header.is-link:hover h2 {
  color: #0066ff;
}

.collab-profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0 0 20px;
}

.collab-profile-head small {
  color: #0066ff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.collab-profile-head h1 {
  margin: 2px 0;
}

.collab-profile-head p {
  margin: 0;
  color: var(--muted);
}

.collab-profile-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.collab-profile-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
}

.collab-profile-actions .primary {
  border-color: #0066ff;
  background: #0066ff;
  color: #fff;
}

.collab-profile-block + .collab-profile-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.agent-form.collab-profile h3 {
  margin: 0 0 8px;
}

.collab-profile-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.collab-profile small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.collab-profile-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: 14px;
}

.collab-profile-facts dt {
  color: var(--muted);
}

.collab-profile-facts dd {
  margin: 0;
  font-weight: 600;
}

html[data-fab] #ownAgentEditor .collab-profile-actions {
  margin-right: 0;
}

/* Rotinas dos colaboradores de IA (10/10/2026). */
.routine-list {
  display: grid;
  gap: 8px;
}

.routine-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.routine-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}

.routine-item.is-paused,
.routine-item.is-done {
  opacity: 0.7;
}

.routine-text {
  display: grid;
  gap: 2px;
  flex: 1 1 320px;
  min-width: 0;
  font-size: 13px;
}

.routine-text b {
  font-size: 14px;
}

.routine-text span {
  color: var(--muted);
}

.routine-text .routine-warn {
  color: #b42318;
}

.routine-next {
  display: grid;
  gap: 1px;
  min-width: 130px;
  font-size: 13px;
}

.routine-next small {
  color: var(--muted);
  font-size: 11.5px;
}

.routine-item-actions,
.routine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.routine-item-actions button,
.routine-actions button,
.routine-foot > button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 11px;
}

.routine-actions .primary,
.routine-foot > button.primary {
  border-color: #0066ff;
  background: #0066ff;
  color: #fff;
}

.routine-item-actions .routine-remove {
  color: #b42318;
}

.routine-foot {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 12px;
}

.routine-zone {
  color: var(--muted);
  font-size: 12px;
}

.routine-form {
  justify-self: stretch;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.routine-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.routine-form .agent-field > span {
  font-weight: 700;
}

.routine-form .agent-field[hidden] {
  display: none;
}

.routine-form textarea {
  font-family: inherit;
  font-size: 14px;
}

.routine-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.routine-day {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 12px;
}

.routine-day[aria-pressed="true"] {
  border-color: #0066ff;
  background: #0066ff;
  color: #fff;
}

.routine-form .routine-check input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
}

.routine-form .agent-field .routine-check {
  margin: 6px 0 0;
}

.task-ia-routine {
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.pref-timezone {
  max-width: 420px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  padding: 9px 11px;
}

.pref-timezone-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

@media (max-width: 700px) {
  .routine-row {
    grid-template-columns: 1fr;
  }
}

/* Instrucoes e conhecimento formatados no perfil. Os titulos de dentro do
   texto nao herdam o estilo dos titulos de secao do perfil. */
.collab-profile-md {
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.agent-form.collab-profile .collab-profile-md h1,
.agent-form.collab-profile .collab-profile-md h2,
.agent-form.collab-profile .collab-profile-md h3,
.agent-form.collab-profile .collab-profile-md h4 {
  margin: 14px 0 6px;
  color: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.agent-form.collab-profile .collab-profile-md h1 { font-size: 17px; }
.agent-form.collab-profile .collab-profile-md h2 { font-size: 16px; }

.collab-profile-md > :first-child {
  margin-top: 0;
}

.collab-profile .collab-profile-md small {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
}

/* Kanban: o filtro de colaboradores de IA virou uma lista (todas, so IA, ou um
   colaborador). Aparece sempre que a empresa tem colaborador. */
#kanban select.board-filter-ia {
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  max-width: 230px;
  cursor: pointer;
}

#kanban select.board-filter-ia:not([hidden]) {
  display: inline-block;
}

#kanban select.board-filter-ia.is-on {
  border-color: #0066ff;
  color: #0066ff;
  font-weight: 600;
}

.agent-check[hidden] {
  display: none;
}

/* Tarefa aberta: as etapas do colaborador de IA ("Como ele fez"). */
#kanban .task-ia-steps {
  margin: 4px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 10px;
  font-size: 13px;
}

#kanban .task-ia-steps summary {
  cursor: pointer;
  font-weight: 600;
}

#kanban .task-ia-steps ol {
  margin: 10px 0 2px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

#kanban .task-ia-steps small {
  opacity: .7;
}

/* Consumo: o quadro por colaborador de IA so aparece quando algum trabalhou. */
#creditCollabHeading[hidden],
#creditCollabTable[hidden],
#creditCollabNote[hidden] {
  display: none;
}

/* Kanban: o colaborador de IA perguntou e espera a resposta. */
.task-ia-state.is-asking { background: #fff1d6; color: #8a5300; }
html[data-theme="dark"] .task-ia-state.is-asking { background: #3a2a0c; color: #ffd27a; }

/* Cadastro do colaborador de IA: as pastas que ele pode ler. */
#collabFolderPicker select {
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  width: 100%;
  max-width: 460px;
}

#collabFolderPicker .share-chips:empty {
  display: none;
}

/* Tarefa: o andamento numa linha do tempo so. Atividade (o que alguem fez)
   e uma linha discreta entre os comentarios; as acoes ficam no fim. */
#kanban .comment.is-activity {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 3px 0 3px 14px;
  border: 0;
  border-left: 2px solid #d5dbe5;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 13px;
  color: #64748b;
}

#kanban .comment.is-activity p {
  margin: 0;
  flex: 1;
}

#kanban .comment.is-activity time {
  font-size: 12px;
  white-space: nowrap;
}

#kanban .comment-next {
  margin: 14px 0 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff6e0;
  border: 1px solid #f2d59a;
  color: #6b4500;
  font-weight: 600;
  font-size: 14px;
}

#kanban .comment-next[hidden] {
  display: none;
}

#kanban .comment-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#kanban .comment-buttons small {
  flex-basis: 100%;
  color: #b42318;
}

#kanban .comment-buttons small:empty {
  display: none;
}

html[data-theme="dark"] #kanban .comment.is-activity {
  border-left-color: #334155;
  color: #94a3b8;
}

html[data-theme="dark"] #kanban .comment-next {
  background: #3a2a0c;
  border-color: #6b4e14;
  color: #ffd27a;
}

/* Andamento: so a acao principal vai cheia; as outras ficam contornadas. */
#kanban .comment-form .comment-buttons button:not(.primary) {
  background: #fff;
  color: #0f172a;
  border: 1px solid #d5dbe5;
}

html[data-theme="dark"] #kanban .comment-form .comment-buttons button:not(.primary) {
  background: transparent;
  color: #e2e8f0;
  border-color: #334155;
}

/* Andamento: o campo ocupa a largura toda e os botoes ficam numa linha so,
   embaixo dele, a direita, com a acao principal por ultimo (12/10/2026: ao
   lado do campo eles se empilhavam). */
#kanban .comment-form {
  flex-direction: column;
  align-items: stretch;
}

#kanban .comment-form textarea {
  flex: none;
  width: 100%;
  min-height: 78px;
}

#kanban .comment-buttons {
  justify-content: flex-end;
}

#kanban .comment-buttons button.primary {
  order: 2;
}

#kanban .comment-buttons small {
  order: 3;
  text-align: right;
}

/* Andamento: o resumo recolhivel de tudo o que o colaborador de IA fez. */
#kanban .comment-summary {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 10px;
  font-size: 13px;
}

#kanban .comment-summary[hidden] {
  display: none;
}

#kanban .comment-summary summary {
  cursor: pointer;
  font-weight: 600;
}

#kanban .comment-summary ol {
  margin: 10px 0 2px;
  padding-left: 22px;
  display: grid;
  gap: 6px;
}

#kanban .comment-summary li > span {
  margin-right: 10px;
}

#kanban .comment-summary time {
  font-size: 12px;
  opacity: .65;
  white-space: nowrap;
}

/* Cadastro do colaborador de IA: onde ele salva as entregas. */
#collabDeliveryPicker select {
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  width: 100%;
  max-width: 460px;
}

/* Perfil do colaborador de IA: a memoria. */
.collab-memory ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.collab-memory li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 10px;
  font-size: 14px;
}

.collab-memory li.is-empty {
  display: block;
  color: #64748b;
  font-size: 13px;
}

.collab-memory li small {
  grid-column: 1;
  color: #64748b;
  font-size: 12px;
}

.collab-memory li button {
  grid-column: 2;
  grid-row: 1 / span 2;
  font: inherit;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid #d5dbe5;
  border-radius: 8px;
  background: #fff;
  color: #b42318;
  cursor: pointer;
}

.collab-memory-form {
  display: flex;
  gap: 8px;
}

.collab-memory-form input {
  flex: 1;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line, #d5dbe5);
  border-radius: 10px;
}

.collab-memory-form button {
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--accent, #0066ff);
  color: #fff;
  cursor: pointer;
}

html[data-theme="dark"] .collab-memory li button {
  background: transparent;
  border-color: #334155;
  color: #fca5a5;
}

/* Chat: a lista do @ (colaboradores de IA e o time de IA). */
#businessComposer {
  position: relative;
}

.mention-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  display: grid;
  gap: 2px;
}

.mention-box[hidden] {
  display: none;
}

.mention-title {
  padding: 4px 8px 6px;
  color: #64748b;
  font-size: 12px;
}

.mention-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mention-option[aria-selected="true"],
.mention-option:hover {
  background: #eef4ff;
}

.mention-face {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #e8eefc;
  font-size: 15px;
}

.mention-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mention-option b {
  display: block;
  font-size: 14px;
}

.mention-option small {
  display: block;
  color: #64748b;
  font-size: 12px;
}

html[data-theme="dark"] .mention-box {
  background: #0f172a;
  border-color: #334155;
}

html[data-theme="dark"] .mention-option[aria-selected="true"],
html[data-theme="dark"] .mention-option:hover {
  background: #1e293b;
}

/* Tarefa: material anexado para o colaborador de IA. */
#kanban .task-material {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
}

#kanban .task-material .share-chips:empty {
  display: none;
}

#kanban .task-material-search {
  display: flex;
  gap: 8px;
}

#kanban .task-material-search select,
#kanban .task-material-search input {
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line, #d5dbe5);
  border-radius: 10px;
}

#kanban .task-material-search input {
  flex: 1;
  min-width: 0;
}

#kanban .task-material-results {
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 10px;
  max-height: 240px;
  overflow-y: auto;
  color: #64748b;
}

#kanban .task-material-results[hidden] {
  display: none;
}

#kanban .task-material-option {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#kanban .task-material-option:hover {
  background: #eef4ff;
}

#kanban .task-material-option b {
  color: #0f172a;
  font-weight: 600;
}

#kanban .task-material small {
  color: #64748b;
}

html[data-theme="dark"] #kanban .task-material-option b {
  color: #e2e8f0;
}

html[data-theme="dark"] #kanban .task-material-option:hover {
  background: #1e293b;
}

/* O campo de busca ocupa a linha; a escolha do lugar fica do tamanho do texto
   (o formulario da tarefa estica todo select para a largura inteira). */
#kanban .task-ia-picker .task-material-search select {
  flex: 0 0 auto;
  width: auto;
  max-width: 250px;
}

#kanban .task-ia-picker .task-material-search input {
  flex: 1 1 0;
  width: auto;
}

/* Colaboradores de IA: resultados (o que entregaram e quanto tempo pouparam). */
.collab-results {
  display: grid;
  gap: 16px;
}

.collab-results-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.collab-results-bar button,
.collab-results-cost button,
.collab-results-bar input,
.collab-results-cost input {
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border: 1px solid var(--line, #d5dbe5);
  border-radius: 9px;
  background: #fff;
  color: inherit;
}

.collab-results-bar button {
  cursor: pointer;
}

.collab-results-bar button[aria-pressed="true"] {
  border-color: #0066ff;
  color: #0066ff;
  font-weight: 600;
}

.collab-results-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.collab-results-tiles article {
  padding: 14px 16px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 14px;
  display: grid;
  gap: 2px;
}

.collab-results-tiles span {
  font-size: 12px;
  color: #64748b;
}

.collab-results-tiles strong {
  font-size: 26px;
  line-height: 1.2;
}

.collab-results-tiles small,
.collab-results-note {
  font-size: 12px;
  color: #64748b;
}

.collab-results table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.collab-results th,
.collab-results td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line, #e9edf3);
  vertical-align: middle;
}

.collab-results th {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}

.collab-results td.num,
.collab-results th.num {
  text-align: right;
  white-space: nowrap;
}

.collab-results-scroll {
  overflow-x: auto;
}

.collab-results td button.link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: #0b4fc4;
  cursor: pointer;
  text-align: left;
}

.collab-results td input.minutes {
  width: 70px;
  font: inherit;
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--line, #d5dbe5);
  border-radius: 7px;
  text-align: right;
}

.collab-results-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.collab-results-cost input {
  width: 110px;
}

.collab-results h3 {
  margin: 4px 0 0;
  font-size: 14px;
}

html[data-theme="dark"] .collab-results-bar button,
html[data-theme="dark"] .collab-results-bar input,
html[data-theme="dark"] .collab-results-cost input,
html[data-theme="dark"] .collab-results td input.minutes {
  background: transparent;
  border-color: #334155;
}

/* Colaboradores de IA: as faixas que separam a pagina, no mesmo desenho do
   "Contexto para a IA" da Visao da empresa (pedido do proprietario em
   12/10/2026: as de antes eram claras demais e nao separavam). */
.agents-live-page .agent-band > header,
html[data-theme="dark"] .agents-live-page .agent-band > header {
  position: relative;
  overflow: hidden;
  padding: 18px 22px;
  border: 0;
  border-image: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #062d78, #0066ff 58%, #6b5cf6);
  color: #fff;
}

.agents-live-page .agent-band > header::after {
  content: '';
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  right: -60px;
  top: -90px;
  background: #22c6f744;
  pointer-events: none;
}

.agents-live-page .agent-band > header h2,
html[data-theme="dark"] .agents-live-page .agent-band > header h2 {
  font-size: 14px;
  letter-spacing: .1em;
  color: #fff !important;
  margin: 0 0 5px;
}

.agents-live-page .agent-band > header h2::before {
  content: '✦ ';
  color: #a8e8ff;
}

.agents-live-page .agent-band > header p,
html[data-theme="dark"] .agents-live-page .agent-band > header p {
  color: #dbeafe;
  font-size: 13.5px;
  max-width: 760px;
}

.agents-live-page .agent-band > header button.primary {
  position: relative;
  z-index: 1;
  background: #fff !important;
  color: #0b4fc4 !important;
  border: 0;
  font-weight: 600;
}

.agents-live-page .agent-band {
  margin-bottom: 38px;
}

/* Loja Krewia: o titulo da pagina ja diz o que e; a faixa nao se repete. */
#krewia-store .agent-band > header {
  display: none;
}

/* O botao dentro da faixa azul: claro, para aparecer. Pelo id, porque o
   botao principal da pagina tem regra propria mais forte. */
#agents-live .agent-band > header #newOwnAgent,
html[data-theme="dark"] #agents-live .agent-band > header #newOwnAgent {
  background: #fff !important;
  background-image: none !important;
  color: #0b4fc4 !important;
  border: 0 !important;
  font-weight: 600;
}

/* Cartao do Kanban: o colega para quem o trabalho segue. */
.task-ia-next {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: #eef4ff;
  color: #0b4fc4;
  font-size: 11.5px;
  white-space: nowrap;
}

.task-ia-next .task-ia-face {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

.task-ia-next b {
  font-weight: 600;
}

html[data-theme="dark"] .task-ia-next {
  background: #12203a;
  color: #9cc0ff;
}

/* As etiquetas do colaborador no cartao quebram de linha em vez de vazar. */
#kanban .kanban-card .task-ia {
  flex-wrap: wrap;
  row-gap: 5px;
}

/* A lista do @ aberta embaixo do campo (titulo e descricao da tarefa). */
.mention-box.is-below {
  bottom: auto;
  top: calc(100% + 6px);
}

/* Conectores: o que existe de verdade (HubSpot) */
.connector-grid article > button {
  border: 1px solid var(--accent, #0066ff);
  border-radius: 9px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;
  white-space: nowrap;
}
.connector-grid article > button.primary { background: var(--accent, #0066ff); color: #fff; }
.connector-grid article > button:disabled { opacity: .6; cursor: default; }
.connector-options {
  display: grid;
  gap: 12px;
  justify-items: start;
  max-width: 760px;
  margin-top: 28px;
}
.connector-options h2 { margin: 0; font-size: 1.05rem; }
.connector-options .platform-note { margin: 0; }
/* Conectores (15/10/2026): as configuracoes dentro do cartao conectado, e as
   janelas (canais do Slack, sugerir integracao). */
.connector-grid .connector-settings {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #e6e8ec);
}
.connector-grid .connector-setting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
}
.connector-grid .connector-setting input { margin: 0; flex: none; }
.connector-grid .connector-warning { color: #b45309; }
.connector-grid .connector-help,
.connector-grid .connector-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--accent, #0066ff);
  cursor: pointer;
}
.connector-grid .connector-help { color: #64748b; }
.connector-grid .connector-help:hover,
.connector-grid .connector-link:hover { text-decoration: underline; }
html[data-theme="dark"] .connector-grid .connector-help { color: #94a3b8; }
.connector-dialog .connector-dialog-body { display: grid; gap: 10px; }
.connector-dialog .connector-dialog-body label:not(.slack-channel) { display: grid; gap: 6px; font-size: 14px; }
.connector-dialog .connector-dialog-body input,
.connector-dialog .connector-dialog-body textarea { font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line, #dfe6f0); }
.connector-dialog footer { display: flex; justify-content: flex-end; gap: 8px; }
.connector-dialog .slack-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line, #e6e8ec);
  font-size: 14px;
}
.connector-dialog .slack-channel span { overflow-wrap: anywhere; }
/* As janelas da Krewia poem rotulo em bloco e campo com largura cheia: aqui nao. */
.connector-dialog .connector-dialog-body .slack-channel { display: flex !important; flex-direction: row !important; align-items: center; text-align: left; margin: 0; }
.connector-dialog .connector-dialog-body .slack-channel select { width: auto !important; margin: 0 !important; flex: none; }
.connector-dialog .slack-channel select { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; max-width: 220px; }
.connector-options > button {
  border: 1px solid var(--accent, #0066ff);
  border-radius: 9px;
  background: #fff;
  color: var(--accent, #0066ff);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 9px 16px;
}

/* ===== Ajustes de tela pedidos pelo proprietario em 13/10/2026 ===== */

/* Colaboradores de IA > Resultados: "Trabalhos do periodo" rola por dentro,
   com o cabecalho parado, em vez de esticar a pagina. */
.collab-results-scroll.is-long {
  max-height: 440px;
  overflow: auto;
  border: 1px solid var(--line, #e9edf3);
  border-radius: 12px;
}

.collab-results-scroll.is-long thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}

html[data-theme="dark"] .collab-results-scroll.is-long thead th {
  background: #0d182a;
}

/* Sino: o painel tinha a largura do menu, e a agenda ficava espremida, com
   o titulo cortado e rolagem para o lado. Agora ele sai do menu, com largura
   propria, e o texto da reuniao quebra linha. */
.b-sidebar .bell-panel {
  /* Fixo na janela: o menu corta (overflow) o que passa da borda dele. */
  position: fixed;
  top: 72px;
  left: 12px;
  right: auto;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 88px);
  z-index: 60;
}

.b-sidebar .bell-panel .bell-agenda-list {
  overflow: visible;
}

.bell-meeting {
  min-width: 0;
}

.bell-meeting span,
.bell-meeting b,
.bell-meeting small {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Meu perfil: as faixas coloridas de Colaboradores de IA nos titulos dos
   cartoes, e as acoes como botoes de verdade. */
.profile-page .profile-summary {
  background: linear-gradient(180deg, #0066ff 0, #6b5cf6 96px, #f5f8ff 96px);
}

.profile-page .profile-role {
  background: #0066ff;
  color: #fff;
  font-weight: 600;
}

.profile-page :is(.profile-form, .profile-options, .profile-data) {
  overflow: hidden;
}

.profile-page :is(.profile-form, .profile-options, .profile-data) > h2 {
  margin: -26px -26px 22px;
  padding: 15px 26px;
  background: linear-gradient(135deg, #062d78, #0066ff 58%, #6b5cf6);
  color: #fff !important;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.profile-page :is(.profile-form, .profile-options, .profile-data) > h2::before {
  content: '✦ ';
  color: #a8e8ff;
}

.profile-page .profile-options > h2 {
  background: linear-gradient(135deg, #5143cd, #8b5cf6);
}

.profile-page .profile-data > h2 {
  background: linear-gradient(135deg, #056a8f, #0e9bc4);
}

.profile-page .profile-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-page .profile-options > h2 {
  flex: 0 0 calc(100% + 52px);
}

.profile-page :is(.profile-options, .profile-data) button {
  width: auto;
  min-height: 0;
  justify-content: center;
  gap: 8px;
  border: 1px solid #c7d7f5 !important;
  border-radius: 10px;
  background: #fff;
  color: #0b4fc4;
  font-weight: 600;
  padding: 11px 16px;
  cursor: pointer;
}

.profile-page :is(.profile-options, .profile-data) button:hover {
  background: #eaf2ff;
  border-color: #0066ff !important;
}

.profile-page .profile-options #profileLogout,
.profile-page .profile-data .data-delete {
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

.profile-page .profile-options #profileLogout:hover,
.profile-page .profile-data .data-delete:hover {
  background: #fef2f2;
}

html[data-theme="dark"] .profile-page .profile-summary {
  background: linear-gradient(180deg, #0b4fc4 0, #5143cd 96px, #0d182a 96px) !important;
}

html[data-theme="dark"] .profile-page :is(.profile-options, .profile-data) button {
  background: #111c2f !important;
  border-color: #2b4c80 !important;
  color: #8ab6ff !important;
}

/* Visao da empresa: a caixa de texto aparece como caixa. Antes, na leitura,
   ficava sem borda nem fundo, e na edicao a borda quase sumia no cinza. */
.company-profile-form label {
  font-weight: 600;
  color: #334155 !important;
}

.company-profile-form input,
.company-profile-form textarea {
  border: 1px solid #b8c6da !important;
  background: #fff !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.company-profile-form input:focus,
.company-profile-form textarea:focus {
  outline: none;
  border-color: #0066ff !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .15);
}

.company-profile-form input[readonly],
.company-profile-form textarea[readonly] {
  padding-left: 13px;
  border: 1px solid #e2e8f0 !important;
  background: #f1f5f9 !important;
  box-shadow: none;
  color: #0f172a;
}

html[data-theme="dark"] .company-profile-form label {
  color: #c7d5f0 !important;
}

html[data-theme="dark"] .company-profile-form input,
html[data-theme="dark"] .company-profile-form textarea {
  border-color: #3d5478 !important;
  background: #0a1322 !important;
}

html[data-theme="dark"] .company-profile-form input[readonly],
html[data-theme="dark"] .company-profile-form textarea[readonly] {
  border-color: #24324a !important;
  background: #111c2f !important;
}

/* Conectores: o icone da empresa no lugar da sigla. */
.connector-grid article > i.has-logo,
.connector-grid .connector-head > i.has-logo {
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.connector-grid article > i.has-logo img,
.connector-grid .connector-head > i.has-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.connector-grid article p {
  font-size: 13px;
  line-height: 1.5;
}

/* Conectores (15/10/2026): os cartoes com a mesma altura, e o primeiro
   explicando as integracoes. No celular, uma coluna e a altura de cada um. */
@media (min-width: 761px) {
  #connectors .connector-grid { grid-auto-rows: 1fr; }
}
/* No estilo dos cartoes de destaque da Krewia (Loja): degrade azul forte,
   texto branco e botao branco (pedido do proprietario). Vale nos dois temas. */
.connector-grid article.connector-intro,
html[data-theme="dark"] .connector-grid article.connector-intro {
  background: linear-gradient(145deg, #005cf0, #5143cd) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 24px #0066ff22;
  color: #fff;
}
.connector-grid article.connector-intro b,
html[data-theme="dark"] .connector-grid article.connector-intro b { color: #fff !important; }
.connector-grid article.connector-intro p,
html[data-theme="dark"] .connector-grid article.connector-intro p { color: #e0edff !important; }
.connector-grid article.connector-intro small,
html[data-theme="dark"] .connector-grid article.connector-intro small { color: #c7dcff !important; }
.connector-grid article.connector-intro i.has-logo { background: #fff; box-shadow: none; }
.connector-grid article.connector-intro > button,
html[data-theme="dark"] .connector-grid article.connector-intro > button {
  background: #fff !important;
  color: #0056d8 !important;
  border-color: #fff !important;
  font-weight: 600;
}
.connector-grid article.connector-intro > button:hover { background: #eaf4ff !important; }

/* Seguranca: faixas coloridas nos cartoes e etiquetas (a tela estava toda
   sem cor). */
.security-page .sec-card {
  overflow: hidden;
}

.security-page .sec-card > h2 {
  margin: -22px -24px 18px;
  padding: 15px 24px;
  background: linear-gradient(135deg, #062d78, #0066ff 58%, #6b5cf6);
  color: #fff !important;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.security-page .sec-card > h2::before {
  content: '✦ ';
  color: #a8e8ff;
}

.security-page #secIntegracoes > h2 { background: linear-gradient(135deg, #056a8f, #0e9bc4); }
.security-page #secDados > h2 { background: linear-gradient(135deg, #5143cd, #8b5cf6); }
.security-page #secRegistro > h2 { background: linear-gradient(135deg, #1e3a8a, #3b5bdb); }

.sec-tag {
  display: inline-block;
  margin-right: 4px;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.6;
  background: #e7f0ff;
  color: #0b4fc4;
  white-space: nowrap;
}

.sec-tag.is-owner { background: #0066ff; color: #fff; }
.sec-tag.is-admin { background: #ede9fe; color: #5b21b6; }
.sec-tag.is-member { background: #e2e8f0; color: #334155; }
.sec-tag.is-here { background: #dcfce7; color: #166534; }
.sec-tag.is-pessoas { background: #ede9fe; color: #5b21b6; }
.sec-tag.is-integracao { background: #cffafe; color: #0e7490; }
.sec-tag.is-acesso { background: #e7f0ff; color: #0b4fc4; }
.sec-tag.is-apagar { background: #fee2e2; color: #b91c1c; }
.sec-tag.is-dados { background: #fef3c7; color: #92400e; }
.sec-tag.is-config { background: #e2e8f0; color: #334155; }

html[data-theme="dark"] .sec-tag:not(.is-owner) {
  background: #1b2a43;
  color: #c7d5f0;
}

/* Kanban > Historico: os rostos de quem participou, um sobre o outro. */
.done-faces {
  display: flex;
  flex: none;
  align-items: center;
  padding-left: 6px;
}

.done-faces .done-face {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #dbe7ff;
  color: #0b4fc4;
  font-size: 10.5px;
  font-weight: 700;
  box-sizing: border-box;
  cursor: default;
}

.done-faces .task-ia-face.done-face {
  background-color: #0066ff;
  background-image: linear-gradient(145deg, #0066ff, #22c6f7);
  color: #fff;
  font-size: 12px;
}

/* Com rosto: a foto cobre o circulo (o "background" acima zerava o tamanho,
   e so um canto da foto aparecia). */
.done-faces .task-ia-face.done-face.has-avatar {
  background-color: #e2e8f0;
  background-size: cover;
  background-position: center;
}

html[data-theme="dark"] .done-faces .done-face {
  border-color: #111c2f;
}

/* Loja Krewia compacta (13/10/2026): titulo, preco e descricao a vista, o
   resto em "Ver detalhes". Tres por linha em tela larga. */
#krewia-store .agent-cards {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: stretch;
}

/* Contratada ou nao, o cartao tem o mesmo tamanho: subtitulo e descricao com
   altura fixa e o rodape sempre no pe. */
#krewia-store .agent-card {
  display: flex;
  flex-direction: column;
}

#krewia-store .agent-card > header p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;
}

#krewia-store .agent-pitch.is-short {
  min-height: 4.5em;
}

#krewia-store .agent-card-foot {
  margin-top: auto;
  min-height: 62px;
}

#krewia-store .agent-card-foot .agent-cancel {
  margin-left: 0;
}

#krewia-store .agent-card-foot small {
  flex-basis: 100%;
}

.agent-pitch.is-short {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.agent-more {
  margin: 0 0 14px;
}

.agent-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--accent, #0066ff);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}

.agent-more > summary::-webkit-details-marker {
  display: none;
}

.agent-more > summary::after {
  content: '›';
  transition: transform .15s;
}

.agent-more[open] > summary::after {
  transform: rotate(90deg);
}

.agent-more[open] > summary {
  margin-bottom: 12px;
}

.agent-card-foot .agent-cancel {
  margin-left: auto;
  border-color: #fecaca;
  background: #fff;
  color: #b91c1c;
}

html[data-theme="dark"] .agent-card-foot .agent-cancel {
  background: transparent;
  border-color: #7f1d1d;
  color: #fca5a5;
}

/* Prova da habilidade no cartao da Loja (14/10/2026): placar sem x com,
   medido em teste real, e uma linha de cada lado. */
.agent-proof {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #c7f0dc;
  border-radius: 10px;
  background: #f1fbf6;
}

.agent-proof-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.agent-proof-top strong {
  font-size: 12px;
  color: #0f7a4f;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.agent-proof-score {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.agent-proof-score b.is-sem {
  color: #b91c1c;
}

.agent-proof-score b.is-com {
  color: #0f7a4f;
  font-size: 14px;
}

.agent-proof-line {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agent-proof-line span {
  font-weight: 700;
}

.agent-proof-line.is-sem span {
  color: #b91c1c;
}

.agent-proof-line.is-com span {
  color: #0f7a4f;
}

.agent-proof-detail {
  margin: 0 0 14px;
}

.agent-proof-detail h3 {
  font-size: 13px;
  margin: 0 0 6px;
}

.agent-proof-question {
  font-style: italic;
  margin: 0 0 8px;
  font-size: 13px;
}

.agent-proof-detail blockquote {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-left: 3px solid #fca5a5;
  background: #fef2f2;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
}

.agent-proof-detail blockquote.is-com {
  border-left-color: #6ee7b7;
  background: #ecfdf5;
}

.agent-proof-detail blockquote p {
  margin: 4px 0 0;
  white-space: pre-line;
}

.agent-proof-detail small {
  color: var(--muted);
  font-size: 11.5px;
}

html[data-theme="dark"] .agent-proof {
  background: rgba(16, 185, 129, .08);
  border-color: rgba(16, 185, 129, .3);
}

html[data-theme="dark"] .agent-proof-top strong,
html[data-theme="dark"] .agent-proof-line.is-com span,
html[data-theme="dark"] .agent-proof-score b.is-com {
  color: #6ee7b7;
}

html[data-theme="dark"] .agent-proof-line.is-sem span,
html[data-theme="dark"] .agent-proof-score b.is-sem {
  color: #fca5a5;
}

html[data-theme="dark"] .agent-proof-detail blockquote {
  background: rgba(239, 68, 68, .08);
}

html[data-theme="dark"] .agent-proof-detail blockquote.is-com {
  background: rgba(16, 185, 129, .08);
}

/* Loja: "Por que uma habilidade?" (14/10/2026). O placar vem das provas. */
.store-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  max-width: 1200px;
  margin: 0 0 22px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft, #f5f8ff);
}

.store-why h2 {
  margin: 0 0 6px;
  font-size: 17px;
}

.store-why p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 70ch;
}

.store-why-how {
  color: var(--muted);
  font-size: 12.5px !important;
}

.store-why-score {
  display: flex;
  gap: 18px;
}

.store-why-score > div {
  display: grid;
  justify-items: center;
  min-width: 110px;
  text-align: center;
}

.store-why-score b {
  font-size: 34px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.store-why-score span {
  font-size: 12px;
  color: var(--muted);
}

.store-why-score .is-sem b {
  color: #b91c1c;
}

.store-why-score .is-com b {
  color: #0f7a4f;
}

html[data-theme="dark"] .store-why {
  background: rgba(255, 255, 255, .03);
}

html[data-theme="dark"] .store-why-score .is-sem b {
  color: #fca5a5;
}

html[data-theme="dark"] .store-why-score .is-com b {
  color: #6ee7b7;
}

@media (max-width: 760px) {
  .store-why {
    grid-template-columns: 1fr;
  }
}

/* Relatorio do teste dentro do "Por que uma habilidade?", recolhido. */
.store-why-more {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.store-why-more > summary {
  cursor: pointer;
  color: var(--accent, #0066ff);
  font-size: 13px;
  font-weight: 600;
}

.store-why-report {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.store-why-table {
  grid-column: 1 / -1;
  overflow-x: auto;
}

.store-why-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.store-why-table th,
.store-why-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.store-why-table th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.store-why-table td.is-sem {
  color: #b91c1c;
  font-variant-numeric: tabular-nums;
}

.store-why-table td.is-com {
  color: #0f7a4f;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.store-why-report .agent-proof-detail {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel, #fff);
}

html[data-theme="dark"] .store-why-table td.is-sem {
  color: #fca5a5;
}

html[data-theme="dark"] .store-why-table td.is-com {
  color: #6ee7b7;
}

html[data-theme="dark"] .store-why-report .agent-proof-detail {
  background: rgba(255, 255, 255, .03);
}

/* Administracao Krewia > Habilidades: avaliacao, blocos, casos, prova e
   rollout (fluxo de criacao e validacao, 14/10/2026). */
.skill-score {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--panel, #fff);
}

.skill-score-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.skill-score-top > div {
  display: grid;
  flex: 1;
  min-width: 180px;
}

.skill-score-top small {
  color: var(--muted);
}

.skill-score-n {
  font-size: 30px;
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.skill-score-n.is-good { color: #0f7a4f; }
.skill-score-n.is-mid { color: #8a5a00; }
.skill-score-n.is-low { color: #b42318; }

.skill-score-top button,
.skill-cases > button,
.skill-case-remove {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.skill-score-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.skill-score-list li {
  display: grid;
  gap: 2px;
  padding-left: 12px;
  border-left: 3px solid #6ee7b7;
  font-size: 13px;
}

.skill-score-list li.is-part { border-left-color: #f3c46b; }
.skill-score-list li.is-no { border-left-color: #fca5a5; }
.skill-score-list li span { color: var(--muted); }
.skill-score-list li em { font-style: normal; color: var(--ink, inherit); }

.skill-suggestions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.skill-suggestion {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.skill-suggestion p {
  margin: 4px 0 0;
  white-space: pre-line;
}

.skill-blocks {
  display: grid;
  gap: 10px;
}

.skill-block {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.skill-block-data {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin: 4px 0 0 26px;
}

.skill-block-params {
  margin: 8px 0 0 26px;
  display: grid;
  gap: 6px;
}

.skill-cases {
  display: grid;
  gap: 10px;
}

.skill-case {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}

.skill-case-remove {
  justify-self: start;
  color: #b42318;
}

.skill-proof-last {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 8px 0 12px;
  font-size: 13px;
}

.skill-proof-last small {
  flex-basis: 100%;
  color: var(--muted);
}

.skill-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.skill-chip.is-pronta { background: #e9f7f0; color: #0f7a4f; }
.skill-chip.is-quase { background: #fdf4e3; color: #8a5a00; }
.skill-chip.is-nao_pronta { background: #fcefee; color: #b42318; }

.skill-proof-progress {
  margin-top: 10px;
  font-size: 13px;
}

.skill-proof-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.skill-proof-verdict small {
  color: var(--muted);
}

.skill-proof-table-box {
  overflow-x: auto;
}

.skill-proof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.skill-proof-table th,
.skill-proof-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.skill-rollout-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.skill-rollout-bar button {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 14px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.skill-rollout-bar button.is-current {
  border-color: var(--accent, #0066ff);
  color: var(--accent, #0066ff);
  font-weight: 700;
}

.skill-rollout-bar button:disabled:not(.is-current) {
  opacity: .5;
  cursor: not-allowed;
}

html[data-theme="dark"] .skill-score { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .skill-chip.is-pronta { background: rgba(95, 212, 160, .12); color: #5fd4a0; }
html[data-theme="dark"] .skill-chip.is-quase { background: rgba(243, 196, 107, .12); color: #f3c46b; }
html[data-theme="dark"] .skill-chip.is-nao_pronta { background: rgba(255, 143, 143, .12); color: #ff8f8f; }

/* Conectores (15/10/2026): icone ao lado do nome; texto, situacao e
   configuracoes embaixo; o botao no pe do cartao, alinhado nos cartoes da
   mesma linha. */
#connectors .connector-grid article {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
#connectors .connector-grid .connector-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
#connectors .connector-grid .connector-head > i {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eef2f3;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  flex: none;
}
#connectors .connector-grid .connector-head b { font-size: 16px; }
#connectors .connector-grid .connector-body p { margin: 0 0 6px; }
#connectors .connector-grid .connector-body small { display: block; }
#connectors .connector-grid article > button {
  align-self: flex-start;
  margin-top: auto;
  grid-column: auto;
}