@charset "UTF-8";
:root{--orange:#EB541F;--dark:#3B3B3D;--paper:#f5f6f5;--white:#fff;--muted:#6b7073;--border:#e2e5e3;--red:#a83327}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--dark);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
.topbar{min-height:68px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700}.brand-link{color:inherit;text-decoration:none}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:43px;height:35px;border-radius:7px;background:var(--orange);color:white}.environment{padding:6px 11px;border-radius:20px;background:#fff0e9;color:#a93a13;font-size:11px;font-weight:700;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:12px}.top-actions form,.actions form{margin:0}
.button{display:inline-flex;justify-content:center;align-items:center;border:1px solid transparent;border-radius:8px;padding:10px 15px;font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap}.primary{background:var(--orange);color:white}.secondary{background:white;color:var(--dark);border-color:#d8dcda}.danger{background:#fff0ef;color:var(--red);border-color:#f1d0cc}.small{padding:7px 10px;font-size:12px}
.admin-page{width:min(1120px,92%);margin:0 auto;padding:38px 0 56px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{color:var(--orange);font-size:11px;font-weight:800;letter-spacing:1.8px}h1{margin:6px 0;font-size:clamp(27px,4vw,36px);line-height:1.2}h2{margin:0;font-size:17px}.muted{color:var(--muted);font-size:14px}.page-heading p{margin:7px 0 0}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px}.summary-card{padding:20px;background:white;border:1px solid var(--border);border-radius:12px}.summary-card span{display:block;color:var(--muted);font-size:13px}.summary-card strong{display:block;margin-top:4px;font-size:30px}.table-card,.form-card{background:white;border:1px solid var(--border);border-radius:14px;box-shadow:0 7px 25px #1e231e09}.table-title{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--border)}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{padding:13px 18px;background:#fafbfa;color:#686d70;font-size:11px;text-transform:uppercase;letter-spacing:.5px}td{padding:15px 18px;border-top:1px solid #edf0ee;vertical-align:middle}td small{display:block;margin-top:3px;color:var(--muted);font-size:12px}.actions-heading{text-align:right}.actions{display:flex;justify-content:flex-end;align-items:center;gap:7px}.empty{text-align:center;color:var(--muted);padding:32px}
.team-pill,.state-pill{display:inline-block;border-radius:20px;padding:5px 9px;font-size:11px;font-weight:700;white-space:nowrap}.commercial-pill{background:#fff0e9;color:#ad3d16}.support-pill{background:#edf0f2;color:#41474b}.active{background:#eaf7ee;color:#267542}.inactive{background:#f0f1f1;color:#666}.alert{padding:12px 15px;margin:0 0 18px;border-radius:9px;font-size:13px}.success{background:#edf8ef;color:#28643a;border:1px solid #d4ebd9}.error{background:#fff0ef;color:#9f3028;border:1px solid #f1d0cc}.footnote{margin:14px 2px;color:var(--muted);font-size:11px}footer{padding:20px;border-top:1px solid var(--border);color:var(--muted);text-align:center;font-size:12px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);padding:34px;background:white;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 35px #1e231e0f}.login-brand{margin-bottom:30px}.login-card h1{font-size:29px}.login-card form{display:flex;flex-direction:column}.login-card label,.field label{margin:13px 0 6px;font-size:13px;font-weight:700}.login-card input,.field input,.field select{width:100%;min-height:43px;padding:10px 12px;border:1px solid #d6dbd8;border-radius:8px;background:white;color:var(--dark);font:inherit;font-size:14px}.login-card .button{margin-top:22px;min-height:44px}.full{width:100%}.hint{margin-top:18px;color:var(--muted);font-size:11px}
.form-page{width:min(760px,92%);margin:0 auto;padding:28px 0 48px}.back-link{display:inline-block;margin-bottom:16px;color:#555d60;text-decoration:none;font-size:13px}.form-card{padding:30px}.form-card h1{font-size:30px}.form-card>p{margin:8px 0 22px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 18px}.field{display:flex;flex-direction:column;min-width:0}.full-field{grid-column:1/-1}.help{margin-top:5px;color:var(--muted);font-size:11px}.checkbox-field{margin-top:16px;padding:12px;border-radius:8px;background:#f8f9f8}.checkbox-field label{display:flex;align-items:center;gap:8px;margin:0}.checkbox-field input{width:16px;min-height:auto;height:16px;accent-color:var(--orange)}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px;padding-top:20px;border-top:1px solid var(--border)}
@media(max-width:700px){.topbar{padding:0 4%}.admin-page{padding-top:25px}.page-heading{align-items:flex-start;flex-direction:column}.summary-grid{gap:8px}.summary-card{padding:13px}.summary-card span{font-size:11px}.summary-card strong{font-size:25px}.table-title{padding:16px}.table-wrap table{min-width:760px}.form-card{padding:22px 18px}.form-grid{grid-template-columns:1fr}.full-field{grid-column:auto}.form-actions .button{flex:1}.environment{font-size:10px}.login-card{padding:27px 22px}}

/* Etapa 3 — fila de conversas */
.top-nav{display:flex;align-items:center;gap:8px;margin-left:25px;margin-right:auto}.top-nav a{padding:8px 10px;border-radius:7px;color:#555d60;text-decoration:none;font-size:13px}.top-nav a.nav-active{background:#fff0e9;color:#ad3d16;font-weight:700}
.four-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.new-state{background:#fff0e9;color:#a83c15}.waiting-state{background:#eef2f8;color:#38567a}
textarea{width:100%;min-height:90px;padding:11px 12px;border:1px solid #d6dbd8;border-radius:8px;background:white;color:var(--dark);font:inherit;font-size:14px;resize:vertical}
.detail-page{width:min(1120px,92%);margin:0 auto;padding:28px 0 50px}.detail-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:12px 0 22px}.detail-heading h1{font-size:30px}.detail-heading p{margin:6px 0}.detail-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr);gap:18px;align-items:start}.conversation-meta{display:flex;gap:18px;flex-wrap:wrap;padding:13px 20px;background:#fafbfa;color:var(--muted);font-size:12px;border-bottom:1px solid var(--border)}.summary-box{margin:16px 18px 0;padding:13px 15px;background:#fff8f4;border:1px solid #f5dfd5;border-radius:9px;font-size:13px}.summary-box p{margin:6px 0 0;white-space:pre-wrap}.messages{padding:18px;display:flex;flex-direction:column;gap:12px;min-height:150px}.message-bubble{max-width:95%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:#fafbfa}.agent-message{align-self:flex-end;background:#fff4ee;border-color:#f3d8ca}.message-head{display:flex;justify-content:space-between;gap:15px;font-size:12px}.message-head time{color:var(--muted);font-size:10px;white-space:nowrap}.message-bubble p{margin:7px 0 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.message-form{padding:18px;border-top:1px solid var(--border)}.message-form label,.assignment-form label{display:block;margin:0 0 7px;font-size:12px;font-weight:700}.message-form textarea{min-height:90px}.message-form .form-actions{margin-top:10px;padding-top:0;border-top:0}.assignment-card{overflow:hidden}.assignment-form{padding:18px}.assignment-form select{width:100%;min-height:42px;margin-bottom:16px;padding:9px 10px;border:1px solid #d6dbd8;border-radius:8px;background:#fff;color:var(--dark);font:inherit;font-size:13px}.side-info{display:grid;gap:3px;padding:18px;border-top:1px solid var(--border);background:#fafbfa}.side-info span{margin-top:8px;color:var(--muted);font-size:11px}.side-info strong{font-size:13px;overflow-wrap:anywhere}
@media(max-width:900px){.four-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr}.top-nav{margin-left:10px}}
@media(max-width:700px){.topbar{flex-wrap:wrap;gap:10px;padding:12px 4%}.top-nav{order:3;width:100%;margin:0}.top-actions{margin-left:auto}.four-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-heading{align-items:flex-start;flex-direction:column}.detail-heading h1{font-size:25px}.message-bubble{max-width:100%}.conversation-meta{padding:12px;gap:8px}.messages{padding:12px}.message-form{padding:14px}}

/* Ações da fila compartilhada */
.row-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}.inline-form{display:inline-flex;margin:0}.row-actions .button{min-height:30px}

/* Etapa 6 — painel de disponibilidade da equipe de suporte */
.team-status-section{margin:0 0 22px;padding:20px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 7px 25px #1e231e09}.team-status-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.team-status-heading h2{font-size:17px}.team-status-heading p{margin:5px 0 0}.team-status-legend{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;white-space:nowrap}.team-status-legend .busy-dot{margin-left:8px}.agent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.agent-card{display:flex;align-items:center;gap:10px;min-width:0;padding:13px;border:1px solid var(--border);border-radius:10px;background:#fcfcfc}.agent-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 38px;height:38px;border-radius:50%;background:#edf0f2;color:var(--dark);font-weight:800}.agent-details{display:flex;flex-direction:column;gap:5px;min-width:0}.agent-details>strong{font-size:12px;overflow-wrap:anywhere}.agent-status{display:flex;align-items:center;gap:5px;font-size:11px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px}.free-dot{background:#2b9a55}.busy-dot{background:#e28a22}.status-free{color:#267542}.status-busy{color:#9a5a12}.agent-empty{grid-column:1/-1;padding:18px;text-align:center;color:var(--muted);font-size:13px}.routing-note{display:flex;flex-direction:column;gap:5px;padding:13px 15px;border-radius:9px;background:#fff8f4;border:1px solid #f5dfd5;font-size:13px}.routing-note span{color:var(--muted);font-size:12px}
@media(max-width:900px){.agent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.team-status-section{padding:15px}.team-status-heading{flex-direction:column}.agent-grid{grid-template-columns:1fr}.team-status-legend{white-space:normal}}


/* Etapa 7 — ambiente público de atendimento e mensagens cliente/equipe */
.heading-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.message-kind{display:inline-block;padding:2px 6px;border-radius:5px;background:#edf0f2;color:#555d60;font-size:9px;font-weight:700}
.internal-message{background:#fff8e8;border-color:#ead9a8}.internal-message .message-kind{background:#f8e8bd;color:#75561b}
.public-message-admin{background:#eef7ff;border-color:#d7e8f7}.public-message-admin .message-kind{background:#d9edff;color:#205b82}
.client-message{background:#f1f7f0;border-color:#dbe9d7}
.public-chat-body{min-height:100vh;background:#f4f6f5}.public-chat-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px max(4%,calc((100% - 960px)/2));background:#fff;border-bottom:1px solid var(--border)}.public-brand{display:flex;align-items:center;gap:9px}.public-brand>div{display:flex;flex-direction:column}.public-brand strong{font-size:13px;line-height:1.2}.public-brand small{color:var(--muted);font-size:10px}.public-chat-top .brand-mark{width:38px;height:32px;font-size:15px}.public-protocol{padding:7px 11px;border-radius:20px;background:#fff0e9;color:#a93a13;font-size:12px;font-weight:700;white-space:nowrap}
.public-start{width:min(590px,92%);margin:28px auto 45px}.public-welcome{text-align:center;padding:26px 18px 22px}.public-welcome-mark{display:grid;place-items:center;width:56px;height:46px;margin:0 auto 12px;border-radius:10px;background:var(--orange);color:#fff;font-size:19px;font-weight:800}.public-welcome h1{font-size:27px}.public-welcome p{margin:8px 0 0;color:#535b5e;font-size:14px}.public-form-card,.public-chat-card{overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 10px 30px #1e231e0b}.public-form-card{padding:27px}.public-form-card h2{margin-top:5px;font-size:22px}.public-form-card>p{margin:8px 0 17px}.public-form{display:flex;flex-direction:column;gap:14px}.public-form .field label{margin:0 0 6px}.public-form .field input{min-height:46px}.public-form .field textarea{min-height:105px}.public-form .field small{margin-top:5px;color:var(--muted);font-size:11px}.public-form .routing-note{margin:3px 0}.public-form .button{min-height:46px}.public-footnote{text-align:center;color:var(--muted);font-size:11px;margin-top:18px}
.public-chat-shell{width:min(820px,94%);margin:25px auto 45px}.public-chat-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 24px;border-bottom:1px solid var(--border)}.public-chat-heading h1{font-size:23px}.public-chat-heading p{margin:7px 0 0;color:var(--muted);font-size:13px}.public-client-summary{display:flex;justify-content:space-between;gap:12px;padding:11px 24px;background:#fafbfa;border-bottom:1px solid var(--border);font-size:12px}.public-client-summary span{color:var(--muted)}.public-messages{display:flex;flex-direction:column;gap:12px;min-height:230px;max-height:52vh;overflow-y:auto;padding:20px 24px;background:#fcfdfc}.public-message{max-width:85%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;overflow-wrap:anywhere}.public-message.from-client{align-self:flex-end;background:#fff1e9;border-color:#f3d6c8}.public-message.from-team{align-self:flex-start;background:#fff;border-color:#e1e5e2}.public-message-head{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px}.public-message-head time{color:var(--muted);font-size:10px;white-space:nowrap}.public-message p{margin:7px 0 0;font-size:13px;white-space:pre-wrap}.public-send-form{padding:18px 24px;border-top:1px solid var(--border)}.public-send-form label{display:block;margin-bottom:7px;font-size:12px;font-weight:700}.public-send-form textarea{min-height:78px;margin-bottom:10px}.public-chat-footer{padding:12px 24px;background:#fafbfa;border-top:1px solid var(--border);color:var(--muted);font-size:11px}.public-chat-closed{margin:18px 24px;padding:13px;border-radius:8px;background:#edf8ef;color:#28643a;font-size:13px}
@media(max-width:600px){.heading-actions{width:100%;flex-direction:column;align-items:stretch}.heading-actions .button{width:100%}.public-chat-top{padding:12px 4%}.public-start{margin-top:12px}.public-form-card{padding:21px 17px}.public-chat-shell{width:100%;margin:10px auto 25px}.public-chat-card{border-radius:0;border-left:0;border-right:0}.public-chat-heading{padding:18px}.public-client-summary{padding:10px 18px;flex-direction:column;gap:4px}.public-messages{padding:15px;max-height:55vh}.public-message{max-width:96%}.public-send-form{padding:15px}.public-chat-footer{padding:12px 15px}.public-protocol{font-size:10px;padding:6px 8px}}

/* Filtros e atualização da fila */
.queue-filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border);background:#fff}
.queue-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--muted);flex:1;min-width:150px}
.queue-filters input,.queue-filters select{width:100%;min-height:40px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:#fff;color:var(--text)}
#queueRows tr[hidden]{display:none!important}

/* Destaque para mensagens novas recebidas do cliente */
.state-pill.customer-replied-state{background:#fff0e6;color:#a63b0d;border:1px solid #f4c2a8;font-weight:800}


/* Anexos de mensagens: imagens compactadas e arquivos com acesso controlado */
.chat-attachment{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px;max-width:100%;overflow-wrap:anywhere}
.chat-attachment-image{display:block;max-width:min(100%,420px);max-height:360px;width:auto;height:auto;object-fit:contain;border:1px solid #d9dedb;border-radius:10px;background:#fff;cursor:zoom-in}
.chat-attachment a{color:#1d5d91;text-decoration:underline}
.chat-attachment small{color:#65716e;font-size:.78rem}
.attachment-form{border-top:1px solid #e1e5e3;padding-top:16px;margin-top:16px}
.attachment-form input[type=file],.attachment-form input[type=text]{display:block;width:100%;max-width:100%;margin:8px 0;padding:10px;border:1px solid #d5dcd8;border-radius:8px;background:#fff;box-sizing:border-box}
@media(max-width:600px){.chat-attachment-image{max-width:100%;max-height:280px}.attachment-form input[type=file]{font-size:.9rem}}

/* Controle para remover um arquivo selecionado antes do envio. */
.file-picker-row{display:flex;align-items:center;gap:8px;width:100%;max-width:100%;}
.attachment-form .file-picker-row input[type=file]{flex:1;min-width:0;width:100%;margin:8px 0;}
.clear-selected-file{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #f1c5bd;border-radius:8px;background:#fff4f1;color:#d92d20;font-size:22px;font-weight:700;line-height:1;cursor:pointer;}
.clear-selected-file[hidden]{display:none!important;}
.clear-selected-file:hover{background:#ffe4dd;}
@media(max-width:600px){.file-picker-row{gap:6px}.clear-selected-file{width:32px;height:32px}}

/* Dialogs amigáveis para confirmações e avisos de anexos */
.og1-modal::backdrop{background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}
.og1-modal{width:min(440px,calc(100% - 32px));border:1px solid #e2e8f0;border-radius:18px;padding:0;box-shadow:0 24px 70px rgba(15,23,42,.28);color:#263238}
.og1-modal-card{padding:24px}
.og1-modal-icon{width:44px;height:44px;border-radius:14px;background:#fff0e9;color:#eb541f;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;margin-bottom:14px}
.og1-modal h2{font-size:19px;margin:0 0 8px;color:#303437}
.og1-modal p{font-size:14px;line-height:1.55;color:#59636b;margin:0 0 22px;overflow-wrap:anywhere}
.og1-modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.og1-modal-actions button{min-width:100px;cursor:pointer}
.og1-modal-actions .og1-danger{background:#c9362b;color:white;border:1px solid #c9362b}
.og1-modal-actions .og1-danger:hover{background:#a92b22}


/* Controles de áudio do OG1Chat */
.audio-recorder{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:12px;border:1px solid #dfe3e6;border-radius:12px;background:#fafbfc}.audio-recorder-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.audio-record-time{font-variant-numeric:tabular-nums;font-weight:600;color:#3b3b3d}.audio-preview,.chat-audio-player{display:block;width:min(100%,360px);max-width:100%;margin:8px 0}.audio-recorder small{color:#667085;font-size:.82rem}


/* =========================================================
   OG1Chat - experiência do cliente alinhada ao atendimento
   ========================================================= */
@media (min-width: 701px) {
  .public-chat-shell {
    width: min(1120px, 96%);
    margin: 14px auto 18px;
  }
  .public-chat-card {
    height: calc(100dvh - 104px);
    min-height: 560px;
    display: flex;
    flex-direction: column;
  }
  .public-chat-heading {
    flex: 0 0 auto;
    padding: 16px 22px;
  }
  .public-client-summary {
    flex: 0 0 auto;
    padding: 9px 22px;
  }
  .public-messages {
    flex: 1 1 auto;
    min-height: 180px;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    padding: 18px 22px;
  }
  .public-send-form {
    flex: 0 0 auto;
    padding: 13px 22px;
    background: #fff;
  }
  .public-send-form textarea {
    display: block;
    width: 100%;
    min-height: 66px;
    max-height: 150px;
    resize: vertical;
    margin-bottom: 9px;
  }
  .public-send-form > .button {
    min-height: 42px;
    min-width: 150px;
  }
  .public-attachment-details {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    background: #fafbfa;
  }
  .public-attachment-details > summary {
    cursor: pointer;
    padding: 11px 22px;
    color: #3b3b3d;
    font-size: 12px;
    font-weight: 700;
    list-style-position: inside;
  }
  .public-attachment-details[open] .attachment-form {
    border-top: 1px solid var(--border);
    max-height: 30vh;
    overflow-y: auto;
  }
  .public-chat-closed {
    flex: 0 0 auto;
  }
  .public-chat-footer {
    flex: 0 0 auto;
  }
}
@media (max-width: 700px) {
  .public-chat-shell { width: 100%; margin: 8px auto 18px; }
  .public-chat-card { display: flex; flex-direction: column; min-height: calc(100dvh - 72px); }
  .public-messages {
    min-height: 38vh;
    max-height: 48vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .public-send-form { flex: 0 0 auto; }
  .public-attachment-details { border-top: 1px solid var(--border); background: #fafbfa; }
  .public-attachment-details > summary {
    cursor: pointer;
    padding: 12px 15px;
    font-size: 12px;
    font-weight: 700;
    list-style-position: inside;
  }
  .public-attachment-details[open] .attachment-form { border-top: 1px solid var(--border); }
}


/* =========================================================
   OG1Chat - portal do cliente em duas colunas
   Conversa à esquerda e anexos à direita
   ========================================================= */
.public-chat-shell {
  width: min(1240px, 96%);
  margin: 20px auto 32px;
}
.public-chat-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px #1e231e0b;
}
.public-chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(290px, .92fr);
  align-items: stretch;
  min-height: 620px;
}
.public-conversation-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
}
.public-conversation-panel .public-chat-heading {
  flex: 0 0 auto;
  padding: 13px 18px 12px;
}
.public-conversation-panel .public-chat-heading h1 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}
.public-conversation-panel .public-chat-heading p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.35;
}
.public-conversation-panel .public-client-summary {
  flex: 0 0 auto;
  padding: 10px 22px;
}
.public-conversation-panel .alert {
  margin: 12px 18px 0;
}
.public-conversation-panel .public-messages {
  flex: 1 1 auto;
  min-height: 280px;
  max-height: 54vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px;
}
.public-conversation-panel .public-send-form {
  flex: 0 0 auto;
  padding: 15px 20px 18px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.public-conversation-panel .public-send-form textarea {
  display: block;
  width: 100%;
  min-height: 82px;
  max-height: 180px;
  margin-bottom: 10px;
  resize: vertical;
}
.public-conversation-panel .public-send-form button {
  min-height: 42px;
}
.public-conversation-panel .public-chat-closed {
  flex: 0 0 auto;
  margin: 14px 20px 18px;
}
.public-attachment-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fafbfa;
}
.public-attachment-heading {
  padding: 20px 20px 15px;
  border-bottom: 1px solid var(--border);
}
.public-attachment-heading h2 {
  margin: 0;
  font-size: 17px;
}
.public-attachment-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.public-attachment-panel .attachment-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px 18px 22px;
  border-top: 0;
}
.public-attachment-panel .attachment-form label {
  margin: 0;
}
.public-attachment-panel .attachment-form input[type="text"],
.public-attachment-panel .attachment-form input[type="file"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.public-attachment-panel .attachment-form input[type="text"] {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d6dcd9;
  border-radius: 8px;
}
.public-attachment-panel .file-picker-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.public-attachment-panel .file-picker-row input[type="file"] {
  min-height: 42px;
  padding: 8px;
  background: #fff;
  border: 1px solid #d6dcd9;
  border-radius: 8px;
  font-size: 12px;
}
.public-attachment-panel .audio-recorder {
  padding: 12px;
  border: 1px solid #dfe4e1;
  border-radius: 10px;
  background: #fff;
}
.public-attachment-panel .audio-recorder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.public-attachment-panel .audio-recorder-actions .button {
  white-space: normal;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 12px;
}
.public-attachment-panel .audio-record-time {
  font-size: 12px;
  font-weight: 700;
}
.public-attachment-panel .audio-preview {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
}
.public-attachment-panel .audio-recorder small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}
.public-attachment-panel .attachment-form > button[type="submit"] {
  align-self: flex-start;
  min-height: 42px;
}
.public-chat-footer {
  padding: 12px 20px;
}
@media (max-width: 800px) {
  .public-chat-shell { width: min(680px, 96%); margin: 12px auto 24px; }
  .public-chat-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .public-conversation-panel { border-right: 0; }
  .public-conversation-panel .public-messages { min-height: 260px; max-height: 48vh; }
  .public-attachment-panel { border-top: 1px solid var(--border); }
  .public-attachment-panel .attachment-form { padding: 16px 18px 20px; }
}
@media (max-width: 600px) {
  .public-chat-shell { width: 100%; margin: 8px auto 20px; }
  .public-chat-card { border-radius: 0; border-left: 0; border-right: 0; }
  .public-conversation-panel .public-chat-heading { padding: 16px; }
  .public-conversation-panel .public-client-summary { padding: 9px 16px; }
  .public-conversation-panel .public-messages { min-height: 250px; max-height: 48vh; padding: 14px; }
  .public-conversation-panel .public-send-form { padding: 14px 16px 16px; }
  .public-conversation-panel .public-send-form button { width: 100%; }
  .public-attachment-heading { padding: 16px; }
  .public-attachment-panel .attachment-form { padding: 15px 16px 18px; }
  .public-attachment-panel .audio-recorder-actions .button { flex: 1 1 auto; }
}

/* Login do cliente usa as mesmas dimensões e componentes do login interno. */
.login-card .portal-description { color: var(--muted); font-size: 13px; line-height: 1.5; }
.login-card .portal-access-link { display: block; margin-top: 16px; text-align: center; font-size: 12px; }
.login-card .portal-access-link a { color: var(--muted); }


/* =========================================================
   Ajuste final de viewport — portal do cliente em 100%/100%
   ========================================================= */
@media (min-width: 801px) {
  html, body.public-chat-body {
    min-height: 100%;
    height: 100%;
  }
  body.public-chat-body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .public-chat-top {
    flex: 0 0 auto;
    min-height: 58px;
    box-sizing: border-box;
  }
  .public-chat-shell {
    width: min(1240px, calc(100% - 48px));
    height: calc(100dvh - 88px);
    min-height: 0;
    max-height: calc(100dvh - 88px);
    margin: 14px auto 16px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .public-chat-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .public-chat-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, .92fr);
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .public-conversation-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .public-conversation-panel .public-chat-heading,
  .public-conversation-panel .public-client-summary,
  .public-conversation-panel .public-send-form,
  .public-conversation-panel .public-chat-closed {
    flex: 0 0 auto;
  }
  .public-conversation-panel .public-messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .public-conversation-panel .public-send-form {
    padding: 12px 18px 14px;
  }
  .public-conversation-panel .public-send-form textarea {
    min-height: 64px;
    max-height: 112px;
  }
  .public-attachment-panel {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .public-attachment-panel .public-attachment-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fafbfa;
  }
  .public-attachment-panel .attachment-form {
    padding: 14px 16px 18px;
    gap: 10px;
  }
  .public-chat-footer {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 11px;
  }
}
@media (max-width: 800px) {
  body.public-chat-body {
    display: block;
    min-height: 100dvh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .public-chat-shell {
    height: auto;
    max-height: none;
    min-height: 0;
    margin: 10px auto 22px;
  }
  .public-chat-card {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .public-chat-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .public-conversation-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .public-conversation-panel .public-messages {
    flex: initial;
    min-height: 260px;
    max-height: 48vh;
    overflow-y: auto;
  }
  .public-attachment-panel {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .public-attachment-panel .public-attachment-heading {
    position: static;
  }
}


/* =========================================================
   Refinamento visual do atendimento do cliente
   Mais área útil para o histórico da conversa
   ========================================================= */
@media (min-width: 801px) {
  .public-chat-shell {
    width: min(1240px, calc(100% - 48px));
  }
  .public-chat-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .public-conversation-panel .public-chat-heading {
    padding: 12px 18px 11px;
    gap: 10px;
  }
  .public-conversation-panel .public-chat-heading h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
  }
  .public-conversation-panel .public-chat-heading p {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.35;
  }
  .public-conversation-panel .public-chat-heading .state-pill {
    font-size: 11px;
    padding: 5px 9px;
    white-space: nowrap;
  }
  .public-conversation-panel .public-client-summary {
    padding: 7px 18px;
    font-size: 12px;
    line-height: 1.25;
  }
  .public-conversation-panel .public-messages {
    gap: 9px;
    padding: 13px 16px;
  }
  .public-conversation-panel .public-message {
    max-width: 88%;
    padding: 9px 11px;
    border-radius: 10px;
  }
  .public-conversation-panel .public-message-head {
    gap: 10px;
    font-size: 11px;
    line-height: 1.25;
  }
  .public-conversation-panel .public-message p {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
  }
  .public-conversation-panel .public-send-form {
    padding: 10px 16px 12px;
  }
  .public-conversation-panel .public-send-form label {
    margin-bottom: 5px;
    font-size: 12px;
  }
  .public-conversation-panel .public-send-form textarea {
    min-height: 54px;
    max-height: 96px;
    padding: 9px 11px;
    font-size: 13px;
  }
  .public-conversation-panel .public-send-form button {
    min-height: 38px;
    padding: 8px 16px;
    font-size: 12px;
  }
  .public-attachment-heading {
    padding: 14px 16px 12px;
  }
  .public-attachment-heading h2 {
    font-size: 15px;
  }
  .public-attachment-heading p {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
  }
  .public-attachment-panel .attachment-form {
    padding: 12px 14px 16px;
    gap: 9px;
  }
  .public-attachment-panel .attachment-form label {
    font-size: 11px;
    line-height: 1.35;
  }
  .public-attachment-panel .attachment-form input[type="text"],
  .public-attachment-panel .file-picker-row input[type="file"] {
    min-height: 38px;
    font-size: 12px;
  }
  .public-attachment-panel .audio-recorder {
    padding: 10px;
  }
  .public-attachment-panel .audio-recorder-actions .button {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }
  .public-attachment-panel .audio-recorder small {
    font-size: 10px;
    line-height: 1.35;
  }
  .public-attachment-panel .attachment-form > button[type="submit"] {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 12px;
  }
  .public-chat-footer {
    padding: 7px 12px;
    font-size: 10px;
  }
}
@media (min-width: 801px) and (max-height: 760px) {
  .public-conversation-panel .public-chat-heading {
    padding-top: 9px;
    padding-bottom: 8px;
  }
  .public-conversation-panel .public-client-summary {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .public-conversation-panel .public-messages {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .public-conversation-panel .public-send-form {
    padding-top: 8px;
    padding-bottom: 9px;
  }
  .public-conversation-panel .public-send-form textarea {
    min-height: 48px;
  }
  .public-attachment-heading {
    padding-top: 10px;
    padding-bottom: 9px;
  }
  .public-attachment-panel .attachment-form {
    gap: 7px;
    padding-top: 9px;
  }
}
@media (max-width: 800px) {
  .public-conversation-panel .public-chat-heading {
    padding: 14px 16px;
  }
  .public-conversation-panel .public-chat-heading h1 {
    font-size: 20px;
  }
  .public-conversation-panel .public-chat-heading p {
    font-size: 12px;
  }
  .public-conversation-panel .public-client-summary {
    font-size: 12px;
  }
  .public-conversation-panel .public-message {
    padding: 10px 11px;
  }
  .public-conversation-panel .public-message p {
    font-size: 13px;
  }
  .public-conversation-panel .public-send-form textarea {
    min-height: 68px;
    font-size: 13px;
  }
}

/* Modo de acompanhamento do Comercial: histórico sem ações destrutivas. */
.conversation-readonly .chat-attachment form { display: none !important; }


/* Navegação do portal do cliente padronizada com a área interna */
.portal-topbar{gap:12px}
.portal-nav{margin-left:18px}
.portal-nav a{white-space:nowrap}
.portal-top-actions{gap:10px}
.portal-top-actions form{margin:0}
@media(max-width:700px){
  .portal-topbar{align-items:center;gap:9px;padding:10px 4%}
  .portal-topbar .brand{font-size:17px}
  .portal-topbar .top-nav.portal-nav{order:3;display:flex;align-items:center;gap:6px;width:100%;margin:0;padding-top:7px;border-top:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
  .portal-topbar .top-nav.portal-nav::-webkit-scrollbar{display:none}
  .portal-topbar .top-nav.portal-nav a{flex:0 0 auto;padding:9px 11px;font-size:12px}
  .portal-top-actions{margin-left:auto;gap:7px;flex-wrap:nowrap}
  .portal-top-actions .portal-user{max-width:45vw;overflow-wrap:anywhere;font-size:11px;line-height:1.3}
  .portal-top-actions .button{padding:7px 9px}
}
@media(max-width:380px){
  .portal-topbar .brand{font-size:15px;gap:7px}
  .portal-topbar .brand-mark{width:36px;height:32px}
  .portal-top-actions .portal-user{max-width:39vw;font-size:10px}
  .portal-topbar .top-nav.portal-nav a{padding:8px 9px;font-size:11px}
}

/* Portal do cliente: usar a rolagem normal da página, como na área de Suporte.
   Evita barras de rolagem internas no histórico e no painel de anexos. */
body.public-chat-body {
  display: block !important;
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.public-chat-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  margin-bottom: 24px;
}
.public-chat-card {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.public-chat-layout {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-items: start;
}
.public-conversation-panel {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.public-conversation-panel .public-messages {
  flex: 0 0 auto !important;
  min-height: 230px;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
}
.public-attachment-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto !important;
}
/* Portal do cliente: conversa em largura total e anexos abaixo, também no desktop.
   O layout segue a ordem já utilizada no celular, sem coluna lateral. */
.public-chat-shell { width: min(1180px, 96%); }
.public-chat-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.public-conversation-panel {
  width: 100% !important;
  min-width: 0 !important;
  border-right: 0 !important;
}
.public-attachment-panel {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-left: 0 !important;
}
.public-attachment-heading { padding: 18px 20px 12px; }
.public-attachment-panel .attachment-form { padding: 12px 20px 20px; }
@media (max-width: 800px) {
  .public-chat-shell { width: 96%; margin: 10px auto 22px; }
  .public-conversation-panel .public-messages { min-height: 180px; padding: 14px; }
}

/* Padronização da navegação administrativa */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  .top-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .top-actions { margin-left: auto; }
}
@media (max-width: 520px) {
  .top-nav a { white-space: nowrap; }
  .top-actions { flex-wrap: wrap; }
}

/* Cabeçalho administrativo: uma única linha com recolhimento automático em "Mais" */
.topbar{display:flex;flex-wrap:nowrap;gap:12px;min-width:0}
.topbar>.brand{flex:0 0 auto;white-space:nowrap}
.topbar>.top-nav{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;gap:5px;margin-left:12px;margin-right:4px}
.top-nav>a{flex:0 0 auto;white-space:nowrap;padding:8px 9px}
.top-nav .nav-more{display:none;position:relative;flex:0 0 auto}
.top-nav .nav-more[ data-open="true"]{display:block}
.top-nav .nav-more summary{list-style:none;cursor:pointer;padding:8px 11px;border-radius:7px;background:#f3f4f6;color:#444;font-size:13px;white-space:nowrap}
.top-nav .nav-more summary::-webkit-details-marker{display:none}
.top-nav .nav-more-menu{position:absolute;right:0;top:calc(100% + 7px);z-index:1000;min-width:190px;padding:6px;background:#fff;border:1px solid var(--border);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.13);display:flex;flex-direction:column;gap:2px}
.top-nav .nav-more-menu a{display:block;padding:9px 11px;border-radius:6px;white-space:nowrap}
.top-nav .nav-more-menu a:hover{background:#f5f6f7}
.topbar>.top-actions{flex:0 0 auto;white-space:nowrap}
@media(max-width:700px){.topbar{flex-wrap:nowrap;gap:7px;padding:10px 3%}.topbar>.top-nav{order:initial;width:auto;margin:0;flex:1 1 auto}.topbar>.top-actions{margin-left:0;flex-wrap:nowrap}.top-nav>a{font-size:12px;padding:7px 8px}.top-actions .environment{max-width:105px;overflow:hidden;text-overflow:ellipsis}}

/* Cabeçalho padronizado — aplicado a todas as páginas administrativas. */
.topbar{display:flex!important;flex-wrap:nowrap!important;align-items:center;justify-content:flex-start;gap:clamp(6px,1vw,14px);width:100%;min-width:0;min-height:68px;padding:8px clamp(12px,2.5vw,36px)!important;}
.topbar>.brand{flex:0 0 auto;white-space:nowrap;}
.topbar>.top-nav{display:flex;flex:1 1 0;align-items:center;justify-content:flex-start;gap:clamp(2px,.45vw,7px);min-width:0;width:auto;margin:0!important;padding:0;overflow:hidden;white-space:nowrap;}
.topbar>.top-nav>a{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:0;padding:8px clamp(5px,.65vw,10px);font-size:clamp(10px,.85vw,13px);line-height:1.2;white-space:nowrap;}
.topbar>.top-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:clamp(5px,.7vw,12px);min-width:0;margin:0!important;white-space:nowrap;}
.topbar>.top-actions form{flex:0 0 auto;margin:0;}
.topbar .environment{max-width:clamp(76px,11vw,180px);overflow:hidden;text-overflow:ellipsis;}
.topbar .nav-more{display:none;position:relative;flex:0 0 auto;align-items:center;}
.topbar .nav-more[style*="inline-flex"]{display:inline-flex!important;}
.topbar .nav-more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border-radius:7px;background:#f2f3f2;color:#414648;font-size:12px;font-weight:700;white-space:nowrap;}
.topbar .nav-more summary::-webkit-details-marker{display:none;}
.topbar .nav-more-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:1200;display:flex;flex-direction:column;gap:2px;min-width:205px;max-height:min(70vh,420px);overflow-y:auto;padding:6px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px #0002;}
.topbar .nav-more-menu a{display:block;padding:10px 12px;border-radius:7px;color:#555d60;text-decoration:none;font-size:13px;white-space:nowrap;}
.topbar .nav-more-menu a:hover,.topbar .nav-more-menu a.nav-active{background:#fff0e9;color:#ad3d16;font-weight:700;}
@media(max-width:760px){.topbar{gap:6px;padding:8px 10px!important;}.topbar>.brand{gap:5px;font-size:16px;}.topbar .brand-mark{width:37px;height:32px;}.topbar>.top-nav{gap:2px;}.topbar>.top-actions{gap:5px;}.topbar>.top-actions .button{padding:6px 8px;font-size:11px;}.topbar .environment{max-width:82px;padding:5px 7px;font-size:10px;}.topbar>.top-nav>a{padding:7px 5px;font-size:10px;}}
@media(max-width:430px){.topbar{gap:4px;padding:7px 7px!important;}.topbar>.brand{font-size:14px;}.topbar .brand-mark{width:32px;height:29px;}.topbar .environment{max-width:62px;}.topbar>.top-actions .button{padding:5px 6px;font-size:10px;}.topbar .nav-more summary{padding:7px 7px;font-size:11px;}}

/* Destaque consistente para a página atual, inclusive quando recolhida em Mais. */
.top-nav .nav-more summary.nav-active,.top-nav .nav-more-menu a.nav-active{background:#fff0e9;color:#ad3d16;font-weight:700;}

/* Correção do menu Mais: o conteúdo só aparece quando o details está aberto. */
.topbar .nav-more:not([open]) > .nav-more-menu{display:none!important;}
.topbar .nav-more[open] > .nav-more-menu{display:flex!important;}
.topbar .nav-more > summary{cursor:pointer;pointer-events:auto;user-select:none;}
.topbar .nav-more > summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}


/* Correcao v3: o dropdown Mais nao pode ser cortado pelo overflow da barra. */
.topbar > .top-nav {
  overflow: visible !important;
}
.topbar > .top-nav > .nav-more {
  position: relative;
  z-index: 1300;
}
.topbar > .top-nav > .nav-more[open] > .nav-more-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}