/* ============================================
   CHAT TELEMETRIA — Estilos Customizados
   ============================================ */

:root {
  --ct-primary: #003b66;
  --ct-accent: #00a950;
  --ct-bubble-motorista: #e0f2e9;
  --ct-bubble-sistema:   #f8f9fa;
  --ct-bubble-operador:  #fff3cd;
  --ct-bubble-erro:      #f8d7da;
  --ct-bubble-sucesso:   #d1e7dd;
  --ct-navbar-h: 56px;
}

.bg-primary   { background-color: var(--ct-primary) !important; }
.btn-primary  { background-color: var(--ct-primary) !important; border-color: var(--ct-primary) !important; }
.btn-primary:hover { background-color: #002d4f !important; border-color: #002d4f !important; }
.btn-outline-primary { color: var(--ct-primary) !important; border-color: var(--ct-primary) !important; }
.btn-outline-primary:hover { background-color: var(--ct-primary) !important; color: #fff !important; }
.text-primary { color: var(--ct-primary) !important; }
.badge.bg-primary { background-color: var(--ct-primary) !important; }
.progress-bar.bg-primary { background-color: var(--ct-accent) !important; }

.hero-section {
  background: linear-gradient(135deg, var(--ct-accent) 0%, #007a3d 50%, var(--ct-primary) 100%);
  min-height: 35vh;
}

.feature-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Motorista Chat ── */
.inicio-wrapper {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--ct-navbar-h));
  padding: 1rem 0;
}

.chat-wrapper {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--ct-navbar-h));
  overflow: hidden; background: #f9fafb; position: relative;
}

.chat-header-fixed {
  flex-shrink: 0; background: #fff;
  padding: .75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); z-index: 10;
}

.chat-body-scroll {
  flex: 1; overflow-y: auto; padding: .75rem; scroll-behavior: smooth;
}

.chat-input-fixed {
  flex-shrink: 0; background: #fff;
  padding: .5rem .75rem;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -1px 3px rgba(0,0,0,.05); z-index: 10;
}

.sessao-concluida-overlay {
  display: flex; position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.95);
  align-items: center; justify-content: center; z-index: 20;
}

@media (min-width: 768px) {
  .hero-section { min-height: 45vh; }
  .chat-wrapper { height: calc(100vh - 130px); max-height: 720px; border-radius: .75rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
  .chat-header-fixed { border-radius: .75rem .75rem 0 0; }
  .chat-input-fixed { border-radius: 0 0 .75rem .75rem; padding: .75rem 1rem; }
  .chat-body-scroll { padding: 1rem; }
}

/* ── Operador ── */
.chat-card-operador { border-radius: .75rem; overflow: hidden; }

.chat-messages-op {
  height: 340px; overflow-y: auto; padding: 1rem;
  background: #f9fafb; scroll-behavior: smooth;
}

/* ── Bolhas ── */
.msg-bubble {
  max-width: 85%; padding: .6rem .9rem;
  border-radius: 1rem; margin-bottom: .5rem;
  word-break: break-word; font-size: .93rem;
  position: relative; animation: msgPulse .3s ease-out;
}
.msg-bubble .msg-time { font-size: .7rem; opacity: .6; display: block; margin-top: .2rem; }
.msg-bubble .msg-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; opacity: .75; margin-bottom: .15rem; }

.msg-sistema  { background: var(--ct-bubble-sistema);  color: #333;    margin-right: auto; border-bottom-left-radius: .25rem; }
.msg-motorista{ background: var(--ct-bubble-motorista); color: #003b66; margin-left: auto;  border-bottom-right-radius: .25rem; text-align: right; }
.msg-operador { background: var(--ct-bubble-operador);  color: #856404; margin-right: auto; border-bottom-left-radius: .25rem; }
.msg-erro     { background: var(--ct-bubble-erro);      color: #842029; margin-right: auto; border-bottom-left-radius: .25rem; }
.msg-sucesso  { background: var(--ct-bubble-sucesso);   color: #0f5132; margin-left: auto;  border-bottom-right-radius: .25rem; text-align: right; }

/* ── Typing ── */
.typing-indicator { border-top: 1px solid #eee; background: #fefefe; flex-shrink: 0; }
.typing-dots { display: flex; gap: 4px; }
.typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: #999; animation: typingBounce .8s infinite; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* ── Sessões ── */
.sessoes-list { max-height: 500px; overflow-y: auto; }
.sessao-item { cursor: pointer; transition: background .15s; border-left: 3px solid transparent; }
.sessao-item:hover { background: #f1f5fd; }
.sessao-item.active { background: #e0f2e9; border-left-color: var(--ct-accent); }

/* ── Respostas ── */
.respostas-list { max-height: 480px; overflow-y: auto; }
.resposta-item { padding: .75rem 1rem; border-bottom: 1px solid #f0f0f0; }
.resposta-item:last-child { border-bottom: none; }
.resposta-item:hover { background: #fafafa; }
.resposta-item .resposta-label { font-size: .75rem; color: #888; font-weight: 600; }
.resposta-item .resposta-valor { font-size: .95rem; word-break: break-word; }
.resposta-item .resposta-acoes { opacity: 0; transition: opacity .2s; }
.resposta-item:hover .resposta-acoes { opacity: 1; }

/* ── Badges ── */
.badge-ativa     { background-color: #198754 !important; }
.badge-pausada   { background-color: #ffc107 !important; color: #333 !important; }
.badge-concluida { background-color: var(--ct-accent) !important; }
.badge-cancelada { background-color: #dc3545 !important; }

/* ── Scrollbar ── */
.chat-body-scroll::-webkit-scrollbar,.chat-messages-op::-webkit-scrollbar,.sessoes-list::-webkit-scrollbar,.respostas-list::-webkit-scrollbar { width: 6px; }
.chat-body-scroll::-webkit-scrollbar-thumb,.chat-messages-op::-webkit-scrollbar-thumb,.sessoes-list::-webkit-scrollbar-thumb,.respostas-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

@keyframes msgPulse { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

/* ── Operador Mobile ── */
@media (max-width: 767.98px) {
  .op-layout:not(.op-chat-active) .col-chat { display: none !important; }
  .op-layout:not(.op-chat-active) .col-historico { display: none !important; }
  .op-layout.op-chat-active .col-sessoes { display: none !important; }
  .op-layout.op-chat-active .col-chat { display: block !important; }
  .op-layout.op-chat-active .col-historico { display: block !important; }
  .op-layout:not(.op-chat-active) #panelVazio { display: none !important; }
  .chat-messages-op { height: 50vh; }
  .sessoes-list { max-height: 60vh; }
  .respostas-list { max-height: 40vh; }
  body:has(.chat-wrapper:not(.d-none)) footer { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .chat-messages-op { height: 300px; }
  .sessoes-list { max-height: 400px; }
}

/* ── Select options ── */
.select-options { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.btn-opcao-select {
  display: block; width: 100%; text-align: left; padding: .65rem 1rem;
  border: 1.5px solid #dee2e6; border-radius: .75rem; background: #fff;
  color: #333; font-size: .93rem; cursor: pointer; transition: all .2s ease;
  pointer-events: auto; -webkit-tap-highlight-color: rgba(0,0,0,.1);
}
.btn-opcao-select:hover { border-color: var(--ct-accent); background: #e0f2e9; color: #007a3d; }
.btn-opcao-select:active { transform: scale(.98); }