/* ─── E-mails: Compositor, NV, Mobile e misc ─── */

/* ─── Não vinculados ─── */
.embox-nv-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.embox-nv-item:hover { background: var(--surface-raised); }
.embox-nv-item.active { background: var(--surface-raised); border-left: 3px solid var(--accent); }
.embox-nv-assunto { font-size: .84rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.embox-nv-dest { font-size: .78rem; color: var(--text-muted); margin-bottom: 3px; }
.embox-nv-sub { display: flex; gap: 8px; font-size: .74rem; color: var(--text-muted); }

/* Painel de vincular */
.embox-vincular-panel {
  padding: 18px 22px;
}
.embox-vincular-panel h4 {
  margin: 0 0 6px;
  font-size: .9rem;
  font-weight: 600;
}
.embox-vincular-panel p {
  margin: 0 0 14px;
  font-size: .82rem;
  color: var(--text-muted);
}
.embox-vincular-search {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0 6px 0 0;
  overflow: hidden;
}
.embox-vincular-search input {
  flex: 1;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: .85rem;
  outline: none;
}
.embox-vincular-search button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  padding: 4px 6px;
  border-radius: var(--radius);
  transition: color .1s;
}
.embox-vincular-search button:hover { color: var(--accent); }
.embox-vincular-resultados { display: flex; flex-direction: column; gap: 4px; }
.embox-vincular-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .83rem;
}
.embox-vincular-row span { color: var(--text-muted); font-size: .78rem; }

/* ─── Agendados ─── */
#emailsFilaWrap {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* ─── Toolbar de formatação ─── */
.embox-toolbar {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-raised);
  flex-wrap: wrap;
  flex: none;
  row-gap: 2px;
}
.embox-tb-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 3px;
  flex: none;
}
.embox-tb-btn {
  background: none;
  border: none;
  border-radius: 4px;
  padding: 3px 5px;
  cursor: pointer;
  color: var(--text);
  font-size: .82rem;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  transition: background .1s;
  flex: none;
  line-height: 1;
}
.embox-tb-btn:hover { background: var(--border); }
.embox-tb-btn.active { background: rgba(59,130,246,.15); color: var(--accent, #3b82f6); }
.embox-tb-btn svg { width: 13px; height: 13px; pointer-events: none; }
.embox-tb-sel {
  font-size: .74rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  padding: 2px 4px;
  height: 26px;
  cursor: pointer;
  flex: none;
}
.embox-tb-sel--fam { max-width: 90px; }
.embox-tb-sel--sz  { max-width: 80px; }

/* Botão de cor com barra embaixo */
.embox-tb-clr {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.embox-tb-clr input[type="color"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
.embox-tb-clr-bar {
  position: absolute;
  bottom: 2px;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 1px;
  pointer-events: none;
}
.embox-tb-clr span { pointer-events: none; padding-bottom: 4px; }

/* Textarea conectada ao toolbar */
.embox-toolbar + .embox-composer-textarea {
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ─── Composer (reply) ─── */
.embox-composer {
  border-top: 2px solid var(--border);
  background: var(--surface);
  padding: 0 22px 14px;
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 180px;
}
.embox-composer-resize-handle {
  height: 6px;
  cursor: ns-resize;
  margin: 0 -22px 10px;
  background: transparent;
  position: relative;
}
.embox-composer-resize-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 3px;
  border-radius: 99px;
  background: var(--border);
}
.embox-composer-resize-handle:hover::after { background: var(--accent); }
.embox-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.embox-composer-titulo {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
}
.embox-composer-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  flex: none;
}
.embox-composer-fields input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: .83rem;
}
.embox-composer-para-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.embox-composer-para-row input { flex: 1; }
.embox-cc-toggle {
  flex: none;
  padding: 5px 10px;
  font-size: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.embox-cc-toggle:hover { color: var(--text); background: var(--surface); }
.embox-composer-ccbcc {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.embox-composer-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 400px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: .83rem;
  line-height: 1.6;
  box-sizing: border-box;
  font-family: inherit;
  margin-bottom: 0;
  flex: none;
  overflow-y: auto;
  outline: none;
}
.embox-composer-textarea:empty:before {
  content: attr(data-placeholder);
  color: var(--text-muted, #888);
  pointer-events: none;
}
/* Enter = div (espaçamento uniforme, padrão Gmail); Shift+Enter = <br> */
.embox-composer-textarea p   { margin: 0; }
.embox-composer-textarea div { margin: 0; min-height: 1.4em; }
.embox-composer-textarea br  { display: block; }
.embox-composer-textarea strong { font-weight: 700; }
.embox-composer-textarea em    { font-style: italic; }
.embox-composer-textarea ul, .embox-composer-textarea ol { margin: 0 0 10px; padding-left: 22px; }
.embox-composer-textarea li    { margin-bottom: 2px; }
.embox-composer-citacao {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.embox-composer-citacao-label {
  font-size: .75rem;
  color: var(--text-muted);
  padding: 6px 0 4px;
  line-height: 1.5;
}
.embox-composer-citacao-iframe {
  width: 100%;
  min-height: 60px;
  border: none;
  display: block;
}
/* ações agora ficam na toolbar — estilos inline */
.embox-btn-anexar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  height: 28px;
  padding: 4px 8px;
}
.embox-btn-anexar svg { width: 14px; height: 14px; }

.embox-anexos-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.embox-anexo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--text);
  background: var(--surface-raised);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.embox-anexo-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  display: inline-flex;
  align-items: center;
  flex: none;
}
.embox-anexo-chip button:hover { color: #ef4444; }
.embox-anexo-chip button svg { width: 11px; height: 11px; }

/* ─── Mobile ─── */
@media (max-width: 700px) {
  .embox-body { position: relative; }

  .embox-list {
    border-right: none;
    position: absolute;
    inset: 0;
    background: var(--bg);
    z-index: 1;
    transition: transform .25s;
  }
  .embox-list.embox-list--hidden {
    transform: translateX(-100%);
    pointer-events: none;
  }

  .embox-content {
    position: absolute;
    inset: 0;
    background: var(--bg);
    z-index: 2;
    transform: translateX(100%);
    transition: transform .25s;
  }
  .embox-content.embox-content--visible {
    transform: translateX(0);
  }

  .embox-msg-voltar {
    display: flex;
  }
}
@media (min-width: 701px) {
  .embox-msg-voltar { display: none !important; }
}
.embox-msg-voltar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.embox-msg-voltar:hover { color: var(--text); }
.embox-msg-voltar svg { width: 14px; height: 14px; }

/* ─── NV badges ─── */
.embox-item--nv {
  border-left: 3px solid var(--text-muted);
  opacity: .92;
}
.embox-nv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  color: var(--text-muted);
  background: var(--bg-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-style: italic;
}
.embox-nv-badge svg { width: 10px; height: 10px; }

/* ─── Botão perigo ─── */
.btn-danger {
  background: #dc3545;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: filter .15s;
}
.btn-danger:hover { filter: brightness(.88); }

/* ─── Atalho de teclado ─── */
kbd {
  display: inline-block;
  padding: 0 4px;
  font-size: .65rem;
  background: rgba(0,0,0,.08);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: monospace;
  color: var(--text-muted);
  line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
  kbd { background: rgba(255,255,255,.08); }
}
:root[data-theme="dark"] kbd { background: rgba(255,255,255,.08); }
:root[data-theme="light"] kbd { background: rgba(0,0,0,.08); }

/* ─── Filtro de negócio (removido — estilos agora em emails.css) ─── */

/* ─── Não lido ─── */
.embox-item.nao-lido .embox-item-empresa { font-weight: 700; color: var(--text); }
.embox-item.nao-lido .embox-item-assunto { font-weight: 600; color: var(--text); }

.embox-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  flex: none;
  margin-right: 4px;
  align-self: center;
}

/* Respondido */
.embox-replied {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  margin-right: 3px;
}
.embox-replied svg { width: 11px; height: 11px; }

/* Clipe de anexo */
.embox-clip {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  margin-left: auto;
}
.embox-clip svg { width: 12px; height: 12px; }

/* Countdown de envio */
.embox-send-countdown {
  font-size: .82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.embox-send-countdown strong { color: var(--text); }

/* ver emails.css para sync-btn, sidebar, composer, chips, autocomplete, FAB e toast */