/* ── Layout ── */
  #app { display: flex; flex-direction: column; height: 100vh; }

  /* ── Header (identidade Missy) ── */
  #header {
    display: flex; align-items: center; gap: 14px;
    background:
      radial-gradient(ellipse at 0% 50%, rgba(108,112,247,.18) 0%, transparent 55%),
      radial-gradient(ellipse at 100% 0%, rgba(25,217,255,.10) 0%, transparent 60%),
      linear-gradient(135deg,#0a0e27 0%,#101635 50%,#0f1530 100%);
    color: #fff;
    padding: env(safe-area-inset-top) var(--brand-padding) 0;
    min-height: var(--header-height); flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    border-bottom: 1px solid rgba(108,112,247,.18);
    position: relative;
  }
  /* Marca */
  .brand { display: flex; align-items: center; gap: 11px; }
  .brand-icon {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg,#6C70F7 0%,#3B96FF 55%,#19D9FF 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow:
      0 4px 14px rgba(108,112,247,.45),
      inset 0 1px 0 rgba(255,255,255,.18);
    position: relative;
  }
  .brand-icon svg { width: 22px; height: 22px; }
  .brand-text { display: flex; flex-direction: column; line-height: 1; }
  .brand-name {
    font-family: 'Sora', sans-serif; font-weight: 800;
    font-size: 1.45rem; color: #fff; letter-spacing: -.5px;
  }
  .brand-tag {
    font-family: 'Sora', sans-serif; font-weight: 500;
    font-size: .68rem; color: #8b93d4; margin-top: 2px;
    letter-spacing: .3px;
  }
  #tenant-label {
    background: rgba(108,112,247,.12);
    border: 1px solid rgba(108,112,247,.28);
    color: #c7cbf5; border-radius: 8px;
    padding: 6px 13px; font-size: .78rem; font-weight: 500;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Sora', sans-serif;
  }
  #tenant-label::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.8);
    animation: pulse-dot 2s ease-in-out infinite;
  }
  @keyframes pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(.85); }
  }
  #header .spacer { flex: 1; }
  #header-stats {
    font-size: .78rem; color: #c7cbf5; font-weight: 500;
    background: rgba(108,112,247,.10);
    border: 1px solid rgba(108,112,247,.22);
    border-radius: 8px; padding: 6px 13px;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Sora', sans-serif;
  }
  #header-stats strong { color: #fff; font-weight: 700; }

  /* Avatar+nome do usuário logado (via c_auth) no header */
  #header-user {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Sora', sans-serif;
    background: rgba(108,112,247,.12);
    border: 1px solid rgba(108,112,247,.28);
    color: #e2e8f0; border-radius: 8px;
    padding: 4px 10px 4px 4px; font-size: .78rem;
  }
  #header-user .user-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg,#6C70F7,#3B96FF);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .7rem;
  }
  #header-user .user-name { font-weight: 600; }
  #header-user .user-badge {
    font-size: .58rem; padding: 1px 6px; border-radius: 4px;
    background: rgba(74,222,128,.18); color: #86efac;
    text-transform: uppercase; letter-spacing: .5px;
  }

  /* ── Body (list + detail) ── */
  #body { display: flex; flex: 1; overflow: hidden; min-height: 0; }

  /* ── Sidebar (attendance list) ── */
  #sidebar {
    width: 360px; min-width: 300px; max-width: 420px;
    background: #f4f6fa; border-right: 1px solid var(--border);
    flex-shrink: 0;
    /* Grid: tabs (auto) + filtros (auto) + lista (1fr esticada) + paginação (auto).
       Mais previsível que flexbox quando o conteúdo da lista é maior que o viewport. */
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }


  /* ── Detail panel ── */
  #detail {
    flex: 1; overflow-y: auto; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 10px;
  }

  /* Split em 2 colunas: conversa Missy (esq) | feedbacks (dir).
     Altura FIXA por viewport — thread/timeline scrollam por dentro, compose
     ancorados no fundo na MESMA linha Y. */
  .detail-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    height: calc(100vh - 170px);   /* mais espaço vertical (era 240) */
    min-height: 560px;
  }
  .detail-col {
    display: flex; flex-direction: column; gap: 10px;   /* gap menor entre os 2 cards */
    min-width: 0; min-height: 0; height: 100%;
  }
  /* Coluna esquerda — bot card preenche toda a coluna */
  #detail-col-bot { height: 100%; }
  #detail-col-bot #bot-card    { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  #detail-col-bot #bot-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  /* Thread fixa: preenche o espaço restante (entre header do card e o bot-reply) e scrolla por dentro */
  #detail-col-bot .bot-thread {
    flex: 1; min-height: 0; max-height: none; overflow-y: auto;
  }
  /* Slot vazio não deve criar gap (só ocupa espaço quando o card é teleportado p/ modal) */
  #bot-card-slot:empty { display: none; }

  /* Coluna direita: feedback timeline cresce p/ alinhar com o bot-card */
  .detail-col.feedback-col { min-height: 0; }
  .detail-col.feedback-col > .card.feedback-card {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  .detail-col.feedback-col > .card.feedback-card > .timeline {
    flex: 1; min-height: 0; overflow-y: auto;
  }
  .detail-col.feedback-col > .card.feedback-card > .timeline::-webkit-scrollbar { width: 4px; }
  .detail-col.feedback-col > .card.feedback-card > .timeline::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }
  @media (max-width: 1023px) {
    .detail-split { grid-template-columns: 1fr; }
  }
  #detail::-webkit-scrollbar { width: 4px; }
  #detail::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

  #detail-placeholder {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    color: var(--muted);
  }
  #detail-placeholder svg { opacity: .25; }
  #detail-placeholder p { font-size: .9rem; }


  /* ── Responsive ── */
  /* Tablet portrait (768-1023px): sidebar compacta + detalhe lado a lado */
  @media (min-width: 768px) and (max-width: 1023px) {
    #sidebar {
      width: var(--sidebar-width-tablet);
      min-width: var(--sidebar-width-tablet);
      max-width: var(--sidebar-width-tablet);
    }
  }

  /* Mobile (<768px): drill-down sidebar↔detalhe + header compacto */
  @media (max-width: 767px) {
    /* Header: tagline some, nome reduzido, stats e tenant ocultos, Inbox só ícone+badge */
    #header { gap: 8px; }
    .brand { gap: 8px; }
    .brand-tag { display: none; }
    .brand-name { font-size: 1.2rem; }
    #tenant-label { display: none; }
    #header-stats { display: none; }
    /* #header-user é mantido (avatar 26px + nome cabe no header compacto) */
    /* Inbox: oculta label "Inbox", mantém SVG e #inbox-badge */
    #btn-inbox > span:not(#inbox-badge) { display: none; }
    #btn-inbox { padding: 0 10px; }

    /* Drill-down (JS-driven via _mobileMode → showDetailMobile / backToList) */
    #sidebar { width: 100%; max-width: 100%; }
    #detail { display: none; }
    #detail.detail-visible { display: flex; }
    #sidebar.sidebar-hidden { display: none; }

    /* Botão "← Voltar" no header do detalhe (atendimento + ocorrência) */
    .btn-back-mobile { display: inline-flex !important; }

    /* Tabs Conversa/Histórico no detail */
    .mobile-detail-tabs { display: flex !important; }
    .tab-hidden { display: none !important; }

    /* Touch targets — mínimo 44×44px só em alvos primários */
    #sidebar input,
    #sidebar select { min-height: var(--touch-min); }
    #btn-toggle-filters { min-height: var(--touch-min); }
    .sidebar-tab { min-height: 48px; }
    .att-item { min-height: 64px; }
    .mobile-detail-tabs .mdt-btn { min-height: var(--touch-min); }
    .btn-back-mobile { width: var(--touch-min); height: var(--touch-min); }
    #btn-inbox { min-height: var(--touch-min); }

    /* Detail header: layout vertical, avatar grande some, ações no topo */
    .detail-header-slim {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      padding: 10px 12px;
    }
    .detail-header-slim .dhs-avatar { display: none; }
    .detail-header-slim .dhs-actions {
      order: -1;                  /* ações no topo da coluna */
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }
    .detail-header-slim .dhs-actions .btn,
    .detail-header-slim .dhs-actions .btn-icon-slim {
      padding: 6px 10px;
      font-size: .78rem;
      min-height: 36px;          /* compacto, não 44 */
    }
    .detail-header-slim .dhs-actions .btn-wa {
      width: 36px; height: 36px; padding: 0;
    }
    .detail-header-slim .dhs-meta { flex-wrap: wrap; gap: 6px 12px; font-size: .76rem; }
    .detail-header-slim .dhs-name-row { flex-wrap: wrap; gap: 6px; }

    /* Bot card title row: wrap + botões compactos */
    #bot-card .bot-title-row { flex-wrap: wrap; gap: 6px; }
    #bot-card .bot-title-row .btn,
    #bot-card .bot-title-row #bot-imoveis-btn,
    #bot-card .bot-title-row #bot-action-btn .btn {
      padding: 5px 10px !important;
      font-size: .72rem !important;
      min-height: 32px;
    }

    /* Detail panel padding mais compacto em mobile */
    #detail { padding: 10px; gap: 8px; }
    .detail-split { gap: 8px; }

    /* Drawer inferior de filtros */
    #filters-extra.is-mobile-drawer {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #fff;
      border-radius: 16px 16px 0 0;
      padding: 16px 18px;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      max-height: 70vh;
      overflow-y: auto;
      z-index: 1000;
      transform: translateY(100%);
      transition: transform .25s ease-out;
      box-shadow: 0 -10px 30px rgba(0,0,0,.25);
    }
    #filters-extra.is-mobile-drawer.open { transform: translateY(0); }
    #filters-extra.is-mobile-drawer .drawer-header { display: flex; }
  }

  /* Overlay + header do drawer de filtros — escondidos por padrão (só ativados em mobile via JS) */
  .filters-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(10,14,39,.55);
    z-index: 990;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
  }
  .filters-drawer-overlay.open { opacity: 1; pointer-events: auto; }
  .drawer-header {
    display: none;
    align-items: center; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
  }
  .drawer-header strong { font-size: 1rem; color: #111827; font-weight: 700; }
  .drawer-close {
    width: 36px; height: 36px;
    border: 1.5px solid #e5e7eb; border-radius: 8px;
    background: #fff; color: #374151;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
  }
  .drawer-close:hover { background: #f3f4f6; color: #6C70F7; }

  /* Tabs Conversa/Histórico no detail — escondidas por padrão (só em mobile) */
  .mobile-detail-tabs {
    display: none;
    gap: 6px;
    padding: 6px;
    background: #f3f4f6;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
  }
  .mobile-detail-tabs .mdt-btn {
    flex: 1;
    padding: 9px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    font-family: 'Sora', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
  }
  .mobile-detail-tabs .mdt-btn:hover { color: #374151; }
  .mobile-detail-tabs .mdt-btn.active {
    background: linear-gradient(135deg, #6C70F7 0%, #3B96FF 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(108,112,247,.35);
  }

  /* Botão "← Voltar" — escondido por padrão (só aparece em mobile) */
  .btn-back-mobile {
    display: none;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1.5px solid #e5e7eb; border-radius: 8px;
    background: #fff; color: #374151;
    font-size: 1.2rem; font-weight: 700; line-height: 1;
    cursor: pointer; flex-shrink: 0;
    transition: background .12s, border-color .12s, transform .12s;
  }
  .btn-back-mobile:hover {
    background: #f3f4f6; border-color: #6C70F7; color: #6C70F7;
    transform: translateX(-2px);
  }