/* ── Filters ── */
  #filters {
    padding: 12px 14px 8px;
    border-bottom: 1px solid #ece6f5;
    display: flex; flex-direction: column; gap: 8px;
    background: linear-gradient(180deg,#ffffff 0%,#fafbff 100%);
    position: relative;
  }
  .filter-row { display: flex; gap: 8px; }
  .filter-row.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .search-wrap { position: relative; flex: 1; }
  .search-wrap::before {
    content: "🔍"; position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%); font-size: .9rem; opacity: .55;
    pointer-events: none;
  }
  /* Tabs do sidebar (Atendimentos / Ocorrências) */
  .sidebar-tab {
    flex: 1; padding: 12px 8px; background: none; border: none; cursor: pointer;
    font-size: .9rem; font-weight: 600; color: #64748b;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
  }
  .sidebar-tab:hover { background: rgba(108,112,247,.06); color: #6c70f7; }
  .sidebar-tab.active {
    color: #6c70f7;
    border-bottom-color: #6c70f7;
    background: #fff;
  }
  #f-busca {
    width: 100%; border: 1.5px solid #e5e7eb; border-radius: 9px;
    padding: 9px 30px 9px 34px; font-size: .85rem; outline: none;
    background: #fff; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
  }
  #f-busca:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,.12);
  }
  #f-busca.has-value {
    border-color: #f59e0b;       /* amarelo: deixa claro que filtro está ativo */
    background: #fffbeb;
  }
  #f-busca-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: #cbd5e1; color: #fff; cursor: pointer; font-size: 12px;
    line-height: 20px; padding: 0; display: none;
  }
  #f-busca-clear.show { display: block; }
  #f-busca-clear:hover { background: #94a3b8; }
  .filter-row select {
    flex: 1; border: 1.5px solid #e5e7eb; border-radius: 9px;
    padding: 8px 28px 8px 11px; font-size: .8rem; outline: none;
    background: #fff;
    color: var(--text); cursor: pointer; font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%236b7280' stroke-width='1.6'%3e%3cpath d='M2 3.5L5 6.5L8 3.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .15s, box-shadow .15s;
  }
  .filter-row select:hover { border-color: #c4b5fd; }
  .filter-row select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,.12);
  }
  /* "Modificado" — destaca quando tem valor selecionado */
  .filter-row select.has-value {
    border-color: #8b5cf6; background-color: #f5f3ff;
    color: #6d28d9; font-weight: 600;
  }
  /* Linha do rodapé com chip de filtros ativos + botão limpar */
  .filter-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 0; min-height: 0;
  }
  .filter-actions .chip-count {
    font-size: .72rem; color: #6d28d9; font-weight: 600;
    background: #f5f3ff; border: 1px solid #ddd6fe;
    border-radius: 999px; padding: 2px 9px;
    display: none;
  }
  .filter-actions .chip-count.show { display: inline-flex; align-items: center; gap: 4px; }
  .filter-actions .btn-clear {
    font-size: .72rem; color: #6b7280; background: none; border: none;
    cursor: pointer; padding: 2px 6px; display: none;
    text-decoration: underline; text-underline-offset: 2px;
  }
  .filter-actions .btn-clear.show { display: inline; }
  .filter-actions .btn-clear:hover { color: #dc2626; }

  /* ── Attendance list ── */
  /* Estratégia bullet-proof — usa altura calculada do viewport.
     Cálculo: 100vh - header (~64) - tabs (~48) - filtros básicos (~62) - margem extra.
     Quando filtros-extra abre, o grid `auto` da linha de filtros cresce e o `1fr` da
     lista já se ajusta — mas o max-height continua de teto pra evitar overflow. */
  #att-list {
    min-height: 0;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 6px 10px 16px;
    display: flex; flex-direction: column; gap: 7px;
    background: #faf9fc;
  }
  #att-list::-webkit-scrollbar { width: 8px; }
  #att-list::-webkit-scrollbar-track { background: #f1f5f9; }
  #att-list::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 4px; }
  #att-list::-webkit-scrollbar-thumb:hover { background: #8b5cf6; }
  #att-list { scrollbar-width: thin; scrollbar-color: #c4b5fd #f1f5f9; }

  /* Card minimalista com avatar + 2 linhas */
  .att-item {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ece6f5;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    display: flex; flex-direction: row; align-items: center; gap: 11px;
    position: relative;
  }
  .att-item:hover {
    border-color: #c4b5fd;
    box-shadow: 0 4px 10px rgba(124,58,237,.08);
  }
  .att-item.active {
    border-color: #8b5cf6;
    background: #faf5ff;
    box-shadow: 0 4px 12px rgba(139,92,246,.15);
  }
  .att-item.has-unread {
    border-left: 3px solid #25d366;
    background: #fafff9;
  }
  .att-item.has-unread:hover { background: #f0fdf4; }
  .att-item.has-unread.active {
    background: #faf5ff;
    border-left: 3px solid #8b5cf6;
  }
  .att-item.has-unread .att-name { font-weight: 700; color: #111827; }

  .att-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; color: #6d28d9;
    flex-shrink: 0; position: relative;
  }
  .att-item.has-unread .att-avatar {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #15803d;
  }
  .att-channel {
    position: absolute; bottom: -2px; right: -2px;
    width: 16px; height: 16px;
    background: var(--wa); color: #fff;
    border-radius: 50%; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
  }
  .att-channel svg { width: 9px; height: 9px; display: block; }

  .att-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
  }
  .att-row-top {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
  }
  .att-time {
    font-size: .68rem; color: #9ca3af; font-weight: 500;
    white-space: nowrap; flex-shrink: 0;
  }

  .att-unread-dot {
    position: absolute; top: 12px; right: 12px;
    min-width: 8px; height: 8px; padding: 0;
    background: var(--red);
    border-radius: 99px; font-size: 0;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(220,38,38,.4);
  }

  /* Botão de tag (canto sup direito do card) — fica visível no hover ou se tagged */
  .att-tag-btn {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(255,255,255,.85); border: 1px solid #e5e7eb;
    color: #9ca3af; cursor: pointer; font-size: .85rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all .15s; z-index: 2;
  }
  .att-item:hover .att-tag-btn { opacity: 1; }
  .att-item.has-tag .att-tag-btn { opacity: 1; }
  .att-tag-btn:hover { background: #fff; color: #6d28d9; border-color: #c4b5fd; transform: scale(1.08); }
  .att-item.has-unread .att-tag-btn { right: 26px; }  /* afasta da bolinha vermelha */

  /* Chip de tag (rótulo dentro do card) */
  .tag-chip {
    display: inline-block;
    font-size: .58rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .5px; padding: 2px 7px; border-radius: 4px;
    margin-left: 4px;
  }
  .tag-chip.tag-IMPORTANTE { background: #fee2e2; color: #b91c1c; }
  .tag-chip.tag-ATENCAO    { background: #ffedd5; color: #c2410c; }
  .tag-chip.tag-CUIDADO    { background: #ede9fe; color: #6d28d9; }
  .tag-chip.tag-FAVORITO   { background: #fef3c7; color: #92400e; }

  /* Borda esquerda colorida para cards taggeados (sutil) */
  .att-item.tag-bg-IMPORTANTE { border-left: 3px solid #dc2626; }
  .att-item.tag-bg-ATENCAO    { border-left: 3px solid #ea580c; }
  .att-item.tag-bg-CUIDADO    { border-left: 3px solid #7c3aed; }
  .att-item.tag-bg-FAVORITO   { border-left: 3px solid #d97706; }

  /* Popover de tags */
  .tag-popover {
    position: fixed; z-index: 9999;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    padding: 6px; min-width: 180px;
    display: flex; flex-direction: column; gap: 2px;
    animation: fadeIn .12s ease-out;
  }
  @keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
  .tag-popover .tag-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 7px; cursor: pointer;
    font-size: .82rem; color: #374151; user-select: none;
    border: none; background: transparent; text-align: left; width: 100%;
  }
  .tag-popover .tag-opt:hover { background: #f5f3ff; }
  .tag-popover .tag-opt.selected { background: #ede9fe; font-weight: 600; color: #6d28d9; }
  .tag-popover .tag-opt .tag-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  }
  .tag-popover .tag-opt[data-tag=IMPORTANTE] .tag-dot { background: #dc2626; }
  .tag-popover .tag-opt[data-tag=ATENCAO]    .tag-dot { background: #ea580c; }
  .tag-popover .tag-opt[data-tag=CUIDADO]    .tag-dot { background: #7c3aed; }
  .tag-popover .tag-opt[data-tag=FAVORITO]   .tag-dot { background: #d97706; }
  .tag-popover .tag-opt[data-tag=""]         .tag-dot { background: #e5e7eb; border: 1px dashed #9ca3af; }
  .tag-popover hr {
    border: none; border-top: 1px solid #f3f4f6; margin: 2px 0;
  }

  .att-name {
    font-weight: 600; font-size: .87rem; color: #1f2937;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
  }
  .att-mini-badge {
    display: inline-flex; align-items: center;
    padding: 1px 7px; border-radius: 99px;
    font-size: .64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
    flex-shrink: 0;
  }
  .att-mini-badge.temp-H { background: #fee2e2; color: #b91c1c; }
  .att-mini-badge.temp-W { background: #fef3c7; color: #b45309; }
  .att-mini-badge.temp-C { background: #dbeafe; color: #1d4ed8; }
  .att-mini-badge.sector { background: #ede9fe; color: #6d28d9; }

  .att-sub {
    font-size: .73rem; color: #6b7280;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden;
  }
  .att-sub .att-attendant { overflow: hidden; text-overflow: ellipsis; }
  .att-last { display: none; }
  .att-dot-active { display: none; }
  .att-preview { display: none; }
  .att-preview-text { display: none; }

  .badge {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 99px; font-size: .675rem; font-weight: 600; padding: 1px 7px;
  }
  .badge-A { background: #dcfce7; color: #16a34a; }
  .badge-F { background: #e5e7eb; color: #6b7280; }
  .badge-L { background: #fee2e2; color: #dc2626; }
  .badge-H { background: #fee2e2; color: var(--hot); }
  .badge-W { background: #fef3c7; color: var(--warm); }
  .badge-C { background: #dbeafe; color: var(--cold); }
  .badge-V { background: #ede9fe; color: #7c3aed; }
  .badge-L2 { background: #fce7f3; color: #db2777; }

  /* ── Pagination ── */
  #pagination {
    padding: 8px 12px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px; justify-content: center;
  }
  .pg-btn {
    border: 1px solid var(--border); background: #fff; border-radius: 6px;
    padding: 4px 10px; cursor: pointer; font-size: .8rem; color: var(--text);
    transition: background .15s;
  }
  .pg-btn:hover:not(:disabled) { background: #f3f4f6; }
  .pg-btn:disabled { opacity: .4; cursor: default; }
  #pg-info { font-size: .8rem; color: var(--muted); }


  .card {
    background: var(--detail-bg); border-radius: var(--radius);
    box-shadow: var(--shadow); border: 1px solid var(--border);
    padding: 16px 18px;
  }
  .card-title {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); margin-bottom: 12px;
  }

  /* Header compacto/slim — uma linha só com avatar, nome, badges, telefone, atendente e botões */
  .detail-header-slim {
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow); border: 1px solid var(--border);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 12px;
  }
  .dhs-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #6d28d9; font-weight: 700; font-size: .82rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .dhs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .dhs-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .dhs-name { font-size: 1rem; font-weight: 700; color: #111827; }
  .dhs-meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: .78rem; color: #4b5563;
  }
  .dhs-meta span { white-space: nowrap; }
  .dhs-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
  .btn-icon-slim {
    background: #f3f4f6; border: 1px solid var(--border);
    border-radius: 7px; padding: 6px 10px;
    font-size: .85rem; cursor: pointer; color: var(--text);
    transition: background .15s;
  }
  .btn-icon-slim:hover { background: #e5e7eb; }
  .detail-info-expanded .kv-grid { gap: 8px; }
  .detail-info-expanded .kv label { font-size: .65rem; }
  .detail-info-expanded .kv span { font-size: .82rem; }

  .detail-header {
    display: flex; align-items: flex-start; gap: 14px;
  }
  .detail-avatar {
    width: 48px; height: 48px; border-radius: 50%; background: #dbeafe;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 700; color: var(--accent); flex-shrink: 0;
  }
  .detail-info { flex: 1; }
  .detail-name { font-size: 1.1rem; font-weight: 700; }
  .detail-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
  .detail-actions { display: flex; gap: 8px; align-items: center; }

  .btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: none; border-radius: 7px; padding: 7px 14px;
    font-size: .825rem; font-weight: 600; cursor: pointer; transition: background .15s;
  }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-primary:hover { background: var(--accent-h); }
  .btn-wa { background: var(--wa); color: #fff; border-radius: 50%; width: 36px; height: 36px; padding: 0; justify-content: center; }
  .btn-wa:hover { background: #128c7e; }
  .btn-ghost { background: #f3f4f6; color: var(--text); }
  .btn-ghost:hover { background: #e5e7eb; }

  .kv-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }
  .kv { display: flex; flex-direction: column; gap: 2px; }
  .kv label { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .kv span { font-size: .875rem; font-weight: 500; }

  /* ── Timeline (vertical com trilho) ── */
  .timeline {
    display: flex; flex-direction: column; gap: 0;
    position: relative;
    padding: 4px 0 8px 0;
  }
  /* Trilho vertical contínuo */
  .timeline::before {
    content: ""; position: absolute;
    left: 26px; top: 8px; bottom: 8px;
    width: 2px; background: linear-gradient(180deg,#e0e7ff 0%,#ede9fe 50%,#fce7f3 100%);
    border-radius: 2px;
  }
  /* Divisor de mês: pill no trilho */
  .tl-month {
    position: relative; z-index: 2;
    align-self: flex-start;
    margin: 8px 0 8px -2px;
    padding: 4px 13px;
    background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
    color: #fff;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(99,102,241,.25);
    /* alinha ao trilho */
    margin-left: 6px;
  }
  .tl-month:first-child { margin-top: 0; }

  .tl-item {
    display: flex; gap: 12px; padding: 9px 0;
    position: relative;
    align-items: flex-start;
  }
  /* Data à esquerda (dia + mês curto) */
  .tl-date {
    flex-shrink: 0;
    width: 54px;
    display: flex; flex-direction: column; align-items: center;
    padding-top: 2px;
    z-index: 1;
  }
  .tl-date-day {
    font-size: 1.15rem; font-weight: 800;
    color: #1f2937; line-height: 1;
  }
  .tl-date-mon {
    font-size: .62rem; color: var(--muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px; margin-top: 1px;
  }
  /* Dot conectado ao trilho — substitui o avatar antigo */
  .tl-dot {
    position: relative;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
    flex-shrink: 0;
    margin-top: 6px;
    z-index: 2;
    box-shadow: 0 0 0 3px #fff, 0 2px 4px rgba(0,0,0,.08);
  }
  .tl-dot.manager { border-color: #db2777; }
  .tl-dot.system  { border-color: #6b7280; }

  /* Cartão do conteúdo */
  .tl-card {
    flex: 1;
    background: #fff;
    border: 1px solid #ece6f5;
    border-radius: 10px;
    padding: 9px 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
  }
  .tl-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 3px 8px rgba(124,58,237,.08);
  }
  .tl-card.manager { border-left: 3px solid #db2777; }
  .tl-card.system  { border-left: 3px solid #6b7280; background: #fafafa; }

  .tl-card-hdr {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 4px;
  }
  .tl-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: #e0e7ff; color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .66rem; font-weight: 700; flex-shrink: 0;
  }
  .tl-avatar.manager { background: #fce7f3; color: #db2777; }
  .tl-avatar.system  { background: #e5e7eb; color: #4b5563; }
  .tl-author {
    font-size: .76rem; font-weight: 600; color: #374151;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tl-badge {
    font-size: .58rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; padding: 1px 6px; border-radius: 4px;
    background: #fce7f3; color: #db2777;
  }
  .tl-badge.system { background: #e5e7eb; color: #4b5563; }
  .tl-time {
    margin-left: auto; font-size: .68rem; color: var(--muted);
    white-space: nowrap;
  }
  .tl-text {
    font-size: .82rem; line-height: 1.5; color: #1f2937;
    word-wrap: break-word; white-space: pre-wrap;
  }

  /* ── Add feedback (footer compose pareado com o bot-reply) ── */
  /* Mesma altura EXATA do bot-reply, ancorado no fundo. */
  .detail-col.feedback-col > .card.feedback-add {
    flex-shrink: 0;
    margin-top: 0;
    padding: 12px;
    height: 140px;          /* idêntico ao .bot-reply */
    display: flex; flex-direction: column;
  }
  .detail-col.feedback-col > .card.feedback-add .card-title { display: none; }

  #feedback-form { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
  #feedback-form textarea {
    flex: 1; border: 1px solid var(--border); border-radius: 7px; padding: 9px 12px;
    font-size: .845rem; resize: none; min-height: 44px; max-height: 140px;
    outline: none; font-family: inherit; color: var(--text); background: #f9fafb;
    transition: border .15s;
  }
  #feedback-form textarea:focus { border-color: var(--accent); background: #fff; }
  #feedback-form .form-row { display: flex; gap: 8px; align-items: stretch; }
  #feedback-form input {
    flex: 1; border: 1px solid var(--border); border-radius: 7px;
    padding: 7px 10px; font-size: .825rem; outline: none; background: #f9fafb;
    min-width: 0;
  }
  #feedback-form input:focus { border-color: var(--accent); background: #fff; }
  #feedback-form .btn-primary { padding: 0 18px; }

  /* ── WA messages ── */
  .wa-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 10px; border-radius: 8px; font-size: .8rem;
    max-width: 85%; margin-bottom: 6px;
  }
  .wa-item.sent { background: #dcfce7; align-self: flex-end; }
  .wa-item.recv { background: #f3f4f6; align-self: flex-start; }
  .wa-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; padding: 4px 2px; }
  .wa-list::-webkit-scrollbar { width: 3px; }
  .wa-list::-webkit-scrollbar-thumb { background: #d1d5db; }
  .wa-meta { font-size: .68rem; color: var(--muted); text-align: right; }

  /* ── Missy Bot — Conversa ── */
  .bot-card { border-left: 4px solid #25d366; }
  .bot-title-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .bot-title-row .card-title { margin-bottom: 0; }
  .bot-status-pill {
    font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px;
    text-transform: uppercase; letter-spacing: .03em;
  }
  .bot-status-pill.open    { background: #dcfce7; color: #16a34a; }
  .bot-status-pill.closed  { background: #e5e7eb; color: #6b7280; }
  .bot-status-pill.none    { background: #fef3c7; color: #92400e; }

  .bot-thread {
    background: #ece5dd; border-radius: 8px; padding: 12px;
    min-height: 280px; max-height: 480px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px;
  }
  .bot-thread::-webkit-scrollbar { width: 4px; }
  .bot-thread::-webkit-scrollbar-thumb { background: #c4b8a8; border-radius: 2px; }

  .bot-msg {
    max-width: 78%; padding: 7px 11px 6px; border-radius: 10px;
    font-size: .85rem; line-height: 1.4; position: relative;
    box-shadow: 0 1px 0.5px rgba(0,0,0,.13);
    word-wrap: break-word;
  }
  .bot-msg.out { background: #dcf8c6; align-self: flex-end; border-top-right-radius: 2px; }
  .bot-msg.in  { background: #ffffff; align-self: flex-start; border-top-left-radius: 2px; }
  .bot-msg.template { background: #e7f3ff; }
  .bot-msg .bot-msg-text { white-space: pre-wrap; }
  .bot-msg .bot-msg-meta {
    font-size: .72rem; color: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: flex-end;
    gap: 3px; margin-top: 3px; white-space: nowrap;
  }
  .bot-msg .bot-msg-ticks { font-weight: 700; }
  .bot-msg .bot-msg-ticks.read { color: #34b7f1; }
  .bot-msg .bot-msg-ticks.failed { color: var(--red); }
  .bot-msg-tplname {
    font-size: .65rem; color: #1e40af; font-weight: 700;
    margin-bottom: 3px; text-transform: uppercase; letter-spacing: .03em;
  }

  /* Cartão de imóvel embutido na mensagem */
  .prop-card {
    margin-top: 6px;
    background: #fff;
    border: 1px solid #ffd9b3;
    border-left: 3px solid #ff8c1a;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .78rem;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  .prop-card .prop-title {
    font-weight: 700; color: #1f2937;
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 3px;
  }
  .prop-card .prop-title .prop-icon { font-size: .9rem; }
  .prop-card .prop-price {
    color: #ff6f00; font-weight: 700; font-size: .82rem;
    margin: 2px 0;
  }
  .prop-card .prop-specs {
    color: #555; font-size: .74rem;
    margin: 2px 0 6px;
  }
  .prop-card .prop-link {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fff7ee; color: #d96b00;
    border: 1px solid #ffd9b3; border-radius: 6px;
    padding: 4px 9px; font-size: .72rem; font-weight: 600;
    text-decoration: none;
  }
  .prop-card .prop-link:hover { background: #ffe9d1; }

  .bot-empty {
    text-align: center; padding: 28px 16px; color: var(--muted);
    font-size: .85rem; background: #f9fafb; border-radius: 8px;
    border: 1px dashed var(--border);
  }
  .bot-empty .bot-empty-hint { font-size: .75rem; margin-top: 4px; opacity: .7; }

  /* ── Missy Bot — Reply box (footer fixo pareado com Adicionar feedback) ── */
  /* O .bot-reply-card é o card visual (sibling do bot-card na coluna).
     `min-height: 140px` mantém o piso visual alinhado com .feedback-add
     (coluna direita) na maioria dos casos; cresce naturalmente quando a
     aba Template tem preview grande (o .bot-card encolhe via flex:1 pra
     compensar — "a parte de cima diminui"). */
  #detail-col-bot > .bot-reply-card {
    flex-shrink: 0;
    padding: 12px;
    min-height: 140px;       /* piso — alinha com .feedback-add */
    display: flex; flex-direction: column;
  }
  #detail-col-bot > .bot-reply-card:empty { display: none; }  /* esconde até o conteúdo entrar */

  /* Quando renderizado dentro do card, o wrapper interno some — só o conteúdo importa */
  .bot-reply-card .bot-reply {
    margin-top: 0; flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: 8px;
  }
  .bot-mode-toggle {
    display: inline-flex; gap: 0; border: 1px solid var(--border);
    border-radius: 7px; overflow: hidden; margin-bottom: 8px;
  }
  .bot-mode-toggle button {
    border: none; background: #fff; padding: 5px 12px;
    font-size: .78rem; cursor: pointer; color: var(--muted);
    transition: background .15s;
  }
  .bot-mode-toggle button.active { background: var(--accent); color: #fff; font-weight: 600; }
  .bot-mode-toggle button:hover:not(.active) { background: #f3f4f6; }

  .bot-reply-row {
    display: flex; gap: 8px; align-items: stretch;
  }
  .bot-reply-row textarea {
    flex: 1; border: 1px solid var(--border); border-radius: 7px;
    padding: 9px 12px; font-size: .85rem; resize: none;
    min-height: 44px; outline: none;
    font-family: inherit; color: var(--text); background: #f9fafb;
    transition: border .15s;
  }
  .bot-reply-row textarea:focus { border-color: var(--accent); background: #fff; }
  .bot-reply-row textarea:disabled { background: #f3f4f6; color: var(--muted); cursor: not-allowed; }

  /* Botão "Enviar" do card de resposta — usado em 3 contextos:
     .bot-reply-row (mensagem livre), .bot-tpl-bar (modelos e templates). */
  .btn-send {
    background: var(--wa); color: #fff; border: none; border-radius: 7px;
    padding: 8px 16px; font-weight: 600; font-size: .825rem; cursor: pointer;
    transition: background .15s; display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  .btn-send:hover:not(:disabled) { background: #128c7e; }
  .btn-send:disabled { background: #9ca3af; cursor: not-allowed; }

  .bot-tpl-bar {
    display: flex; flex-direction: column; gap: 8px;
  }
  .bot-tpl-bar select {
    border: 1px solid var(--border); border-radius: 7px;
    padding: 7px 10px; font-size: .825rem; outline: none; background: #f9fafb;
  }
  .bot-tpl-bar select:focus { border-color: var(--accent); background: #fff; }
  /* Row preview + botão Enviar: align-self:center centraliza o botão no
     meio vertical do preview (que pode ter de 32 a 100px). O .bot-reply-card
     pai cresce conforme conteúdo (min-height: 140px) — sem corte de tabs. */
  .bot-tpl-row {
    display: flex; gap: 8px; align-items: center;
  }
  .bot-tpl-row .bot-tpl-preview { flex: 1 1 auto; min-width: 0; }
  .bot-tpl-row .btn-send { flex: 0 0 auto; align-self: center; }
  .bot-tpl-preview {
    background: #e7f3ff; border-left: 3px solid #2563eb;
    padding: 7px 10px; border-radius: 6px; font-size: .8rem;
    color: #1e3a8a; white-space: pre-wrap; min-height: 32px;
    max-height: 100px; overflow-y: auto;        /* ~4 linhas com scroll */
    line-height: 1.35;
  }

  .bot-error {
    background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b;
    border-radius: 6px; padding: 6px 10px; font-size: .78rem; margin-top: 8px;
  }
  .bot-warning {
    background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
    border-radius: 6px; padding: 6px 10px; font-size: .78rem; margin-top: 8px;
  }

  /* ── Loading / empty ── */
  .spinner {
    width: 28px; height: 28px; border: 3px solid #e5e7eb;
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin .7s linear infinite; margin: 32px auto;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .empty { text-align: center; padding: 32px 16px; color: var(--muted); font-size: .875rem; }

  /* ── Scrollbar sidebar ── */
  #att-list { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }

  /* ── Bot Popup Modal ── */
  .bot-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
  }
  .bot-modal-overlay.open { display: flex; }
  .bot-modal {
    background: var(--detail-bg);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,.4);
    width: min(900px, 96vw);
    height: min(740px, 92vh);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .bot-modal-hdr {
    background: #075e54;
    color: #fff;
    padding: 11px 16px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
  }
  .bot-modal-hdr-icon {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.15); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .bot-modal-hdr-info { flex: 1; min-width: 0; }
  .bot-modal-hdr-name { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bot-modal-hdr-sub { font-size: .72rem; opacity: .75; margin-top: 1px; }
  .bot-modal-hdr-actions { display: flex; gap: 6px; align-items: center; }
  .bot-modal-icon-btn {
    background: rgba(255,255,255,.12); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s;
  }
  .bot-modal-icon-btn:hover { background: rgba(255,255,255,.28); }
  .bot-modal-body {
    flex: 1; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--bg);
  }
  /* Dentro do modal: bot-card vira container full-height sem decoração de card */
  #bot-modal-body .bot-card {
    border: none; border-radius: 0; box-shadow: none;
    background: var(--detail-bg);
    flex: 1; display: flex; flex-direction: column;
    padding: 14px 18px; overflow-y: auto;
    margin: 0;
  }
  #bot-modal-body #bot-content {
    flex: 1; display: flex; flex-direction: column;
  }
  #bot-modal-body .bot-thread {
    flex: 1; max-height: none; min-height: 200px;
  }
  /* Esconde o botão "Expandir" dentro do modal (já expandido) */
  #bot-modal-body .btn-bot-expand { display: none; }

  /* ── Botão Config no header ── */
  #btn-config {
    background: rgba(108,112,247,.12);
    border: 1px solid rgba(108,112,247,.28);
    color: #e2e8f0; border-radius: 8px;
    width: 38px; height: 36px;
    font-size: 1.1rem; cursor: pointer;
    transition: transform .12s, background .15s;
  }
  #btn-config:hover { background: rgba(108,112,247,.25); transform: rotate(35deg); }

  /* ── Botão Inbox (caixa de entrada WhatsApp) ── */
  #btn-inbox {
    position: relative;
    background: rgba(37, 211, 102, .12);
    border: 1px solid rgba(37, 211, 102, .35);
    color: #e2e8f0; border-radius: 8px;
    height: 36px; padding: 0 12px;
    font-size: 0.92rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background .15s, transform .12s;
  }
  #btn-inbox svg { display: block; }
  #btn-inbox:hover { background: rgba(37, 211, 102, .22); transform: translateY(-1px); }
  #inbox-badge {
    display: none; min-width: 18px; padding: 0 5px; height: 18px;
    line-height: 18px; border-radius: 10px;
    background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
    text-align: center;
  }
  #inbox-badge.show { display: inline-block; }

  /* ── Modal de Caixa de Entrada (inbox) ── */
  #inbox-overlay {
    position: fixed; inset: 0; z-index: 9100;
    background: rgba(7, 11, 26, 0.78); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
  }
  #inbox-overlay.open { display: flex; }
  #inbox-modal {
    width: 95vw; max-width: 1280px;
    height: 88vh; max-height: 900px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    display: grid;
    grid-template-columns: 360px 1fr;
    grid-template-rows: auto 1fr;     /* header altura natural + conteúdo flex */
    overflow: hidden;
  }
  #inbox-modal .ib-header {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; background: #075e54; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  #inbox-modal .ib-header h3 { margin: 0; font-size: 1rem; flex: 1; }
  #inbox-modal .ib-header button {
    background: rgba(255,255,255,.12); border: none; color: #fff;
    border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 0.85rem;
  }
  #inbox-modal .ib-header button:hover { background: rgba(255,255,255,.22); }
  #inbox-list {
    background: #1e293b; border-right: 1px solid rgba(148,163,184,.15);
    overflow-y: auto; padding: 4px;
  }
  #inbox-list .ib-item {
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .12s;
    display: flex; align-items: flex-start; gap: 10px;
  }
  #inbox-list .ib-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; color: #6d28d9;
    flex-shrink: 0; position: relative;
  }
  #inbox-list .ib-item.unread .ib-avatar {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #15803d;
  }
  #inbox-list .ib-avatar-wa {
    position: absolute; bottom: -2px; right: -2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    border: 2px solid #1e293b;
  }
  #inbox-list .ib-body { flex: 1; min-width: 0; }
  #inbox-list .ib-item:hover { background: rgba(108,112,247,.12); }
  #inbox-list .ib-item.active {
    background: rgba(108,112,247,.22);
    border-left-color: #6c70f7;
  }
  #inbox-list .ib-item.unread { border-left-color: #25d366; }
  #inbox-list .ib-name {
    font-weight: 600; color: #e2e8f0; font-size: 0.92rem;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
  }
  #inbox-list .ib-name .ib-time { font-weight: 400; font-size: 0.75rem; color: #94a3b8; }
  #inbox-list .ib-preview {
    color: #94a3b8; font-size: 0.82rem; margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  }
  #inbox-list .ib-meta {
    margin-top: 4px; font-size: 0.72rem; color: #64748b;
    display: flex; gap: 8px; align-items: center;
  }
  #inbox-list .ib-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #25d366;
    display: inline-block;
  }
  #inbox-list .ib-empty {
    padding: 30px 14px; color: #94a3b8; text-align: center; font-size: 0.9rem;
  }
  #inbox-pane {
    background: #f1f5f9;        /* fundo claro, harmoniza com o bot-card */
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: 12px; gap: 10px;
  }
  #inbox-pane .ib-placeholder {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 0.95rem;
    background: transparent;
  }
  /* Aplica as mesmas regras de altura/flex que o bot-card teria em #detail-col-bot */
  #inbox-pane #bot-card    { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0; }
  #inbox-pane #bot-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  #inbox-pane .bot-thread {
    flex: 1; min-height: 0; max-height: none; overflow-y: auto;
  }
  /* Reply card colado abaixo, sem gap visual extra */
  #inbox-pane #bot-reply-card { flex: 0 0 auto; margin: 0; }

  /* ── Modal de Configuração (full-page overlay) ── */
  .cfg-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(10,14,39,.85); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
    font-family: 'Sora', system-ui, sans-serif;
  }
  .cfg-overlay.open { display: flex; }
  .cfg-modal {
    width: 100%; max-width: 980px;
    max-height: calc(100vh - 48px);
    background: #fff; border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .cfg-header {
    background: linear-gradient(135deg,#0f172a,#1e293b);
    color: #fff;
    padding: 16px 22px;
    display: flex; align-items: center; gap: 12px;
  }
  .cfg-header h2 {
    font-size: 1.1rem; font-weight: 700; flex: 1;
  }
  .cfg-header .cfg-close {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    color: #fff; border-radius: 8px; width: 32px; height: 32px;
    cursor: pointer; font-size: 1rem;
  }
  .cfg-tabs {
    display: flex; border-bottom: 1px solid #ece6f5;
    background: #fafbff;
  }
  .cfg-tabs button {
    flex: 1; padding: 12px 18px;
    background: none; border: none; border-bottom: 3px solid transparent;
    cursor: pointer; font-size: .88rem; font-weight: 600;
    color: #6b7280; font-family: inherit;
    transition: all .15s;
  }
  .cfg-tabs button.active {
    color: #6d28d9; border-bottom-color: #8b5cf6;
    background: #fff;
  }
  .cfg-tabs button:hover:not(.active) { background: #f5f3ff; }
  .cfg-body {
    flex: 1; overflow-y: auto; padding: 24px;
  }
  .cfg-section {
    margin-bottom: 22px;
  }
  .cfg-section h3 {
    font-size: .82rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #6d28d9;
    margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 1px solid #ece6f5;
  }
  .cfg-field {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 12px;
  }
  .cfg-field label {
    font-size: .76rem; font-weight: 600; color: #374151;
  }
  .cfg-field .cfg-hint {
    font-size: .7rem; color: #9ca3af; margin-top: 2px;
  }
  .cfg-field input[type=text],
  .cfg-field input[type=password],
  .cfg-field textarea,
  .cfg-field select {
    border: 1.5px solid #e5e7eb; border-radius: 8px;
    padding: 9px 12px; font-size: .85rem; outline: none;
    font-family: inherit; background: #fff; color: #1f2937;
    transition: border .15s, box-shadow .15s;
  }
  .cfg-field input:focus, .cfg-field textarea:focus, .cfg-field select:focus {
    border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.12);
  }
  .cfg-field textarea { resize: vertical; min-height: 60px; font-family: 'Consolas', monospace; font-size: .78rem; }
  .cfg-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 600px) { .cfg-row-2 { grid-template-columns: 1fr; } }

  .cfg-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: #f9fafb; border-radius: 8px;
    border: 1px solid #ece6f5;
  }
  .cfg-toggle input { width: 18px; height: 18px; cursor: pointer; }
  .cfg-toggle label { cursor: pointer; font-size: .85rem; font-weight: 500; flex: 1; }
  .cfg-toggle .cfg-toggle-hint { font-size: .7rem; color: #6b7280; }

  .cfg-footer {
    padding: 14px 22px;
    border-top: 1px solid #ece6f5;
    background: #fafbff;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px;
  }
  .cfg-footer .cfg-status {
    flex: 1; font-size: .78rem; color: #6b7280;
  }
  .cfg-footer .cfg-status.success { color: #16a34a; font-weight: 600; }
  .cfg-footer .cfg-status.error   { color: #dc2626; font-weight: 600; }
  /* Botões padrão do projeto — globais. Usados em modais (cfg-overlay,
     tpl-send-overlay), aba meta-templates e em qualquer outro contexto que
     precise dos dois botões "secundário (Cancelar/branco)" + "primário
     (gradient da marca)". Pra customizar dentro de um contexto, sobrescrever
     com seletor mais específico. */
  .btn-cancel, .btn-save {
    padding: 9px 18px; border-radius: 8px;
    font-size: .85rem; font-weight: 600; cursor: pointer;
    font-family: inherit; border: none;
  }
  .btn-cancel {
    background: #fff; color: #374151;
    border: 1px solid #d1d5db;
  }
  .btn-cancel:hover { background: #f9fafb; }
  .btn-save {
    background: linear-gradient(135deg,#6C70F7,#3B96FF); color: #fff;
  }
  .btn-save:hover { filter: brightness(1.05); }
  .btn-save:disabled { opacity: .5; cursor: not-allowed; }

  /* Tutorial steps */
  .tut-step {
    display: flex; gap: 14px; padding: 14px;
    margin-bottom: 10px;
    background: #fafbff; border: 1px solid #ece6f5;
    border-radius: 10px;
    transition: border-color .15s;
  }
  .tut-step:hover { border-color: #c4b5fd; }
  .tut-step .tut-num {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg,#6C70F7,#3B96FF);
    color: #fff; font-weight: 700; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
  }
  .tut-step .tut-body { flex: 1; }
  .tut-step .tut-title {
    font-size: .92rem; font-weight: 700; color: #1f2937;
    margin-bottom: 4px;
  }
  .tut-step .tut-desc {
    font-size: .82rem; color: #4b5563; line-height: 1.55;
  }
  .tut-step .tut-desc code {
    background: #ede9fe; color: #6d28d9;
    padding: 1px 6px; border-radius: 4px;
    font-size: .8em; font-family: 'Consolas', monospace;
  }
  .tut-step .tut-desc a { color: #6d28d9; font-weight: 600; }
  .tut-step .tut-meta {
    display: inline-block; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    background: #fef3c7; color: #92400e;
    padding: 2px 7px; border-radius: 4px; margin-top: 6px;
  }

/* ── Modal Histórico (extra inline) ── */
  /* Scrollbar visível no histórico do imóvel (Webkit + Firefox) */
  .occ-hist-scroll::-webkit-scrollbar { width: 8px; }
  .occ-hist-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
  .occ-hist-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
  .occ-hist-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
  .occ-hist-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }

  /* Layout das ocorrências: a coluna direita (histórico + imóvel + tags…)
     cresce conforme o conteúdo. O scroll geral é do #detail (já tem overflow-y).
     A coluna do bot fica sticky pra não sumir quando o usuário rola pra ver os
     cards de baixo do histórico do imóvel. */
  .detail-split.detail-split-occ {
    height: auto;
    min-height: 0;
    align-items: flex-start;
  }
  .detail-split.detail-split-occ .detail-col { height: auto; }
  .detail-split.detail-split-occ #detail-col-bot {
    position: sticky;
    top: 0;
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
  }
  #occ-fb-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; z-index: 9999; }
  #occ-fb-overlay.open { display: flex; }
  #occ-fb-modal { background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.3); width: 92%; max-width: 520px; padding: 18px 20px; }
  #occ-fb-modal h3 { font-size: 1.05rem; margin-bottom: 10px; color: #111827; }
  #occ-fb-modal textarea { width: 100%; min-height: 110px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: .92rem; resize: vertical; }
  #occ-fb-modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ── Modal Histórico Ocorrência (extra inline) ── */
  #occ-hist-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: none; align-items: center; justify-content: center; z-index: 9999; }
  #occ-hist-overlay.open { display: flex; }
  #occ-hist-modal { background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.3); width: 92%; max-width: 920px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
  #occ-hist-modal .h-header { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e7eb; }
  #occ-hist-modal .h-header h3 { font-size: 1.05rem; color: #111827; margin: 0; }
  #occ-hist-modal .h-body { padding: 16px 20px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  #occ-hist-modal .h-body > section { min-width: 0; }
  #occ-hist-modal .h-body > section h4 { font-size: .9rem; font-weight: 700; color: #475569; margin-bottom: 10px; }
  @media (max-width: 780px) { #occ-hist-modal .h-body { grid-template-columns: 1fr; } }