/* Tokens e fontes vindos de /shared/tokens.css (linkado no antes deste arquivo): --f-display/--f-mono = Plus Jakarta Sans/JetBrains Mono do design system. */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--f-display), system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--txt); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ===== Header ===== */ .track-header { background: radial-gradient(120% 90% at 100% 0%, rgba(13,175,186,0.28) 0%, transparent 55%), linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 45%, var(--p) 78%, var(--teal) 130%); color: white; text-align: center; padding: 30px 20px 96px; position: relative; overflow: hidden; isolation: isolate; } .track-header::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center; pointer-events: none; z-index: 0; } .track-header-mark { position: absolute; right: -6%; top: 50%; transform: translateY(-46%) scale(2.1); width: 220px; height: 176px; opacity: 0.16; pointer-events: none; z-index: 0; } .track-header-glow { position: absolute; width: 340px; height: 340px; left: -120px; bottom: -220px; background: radial-gradient(circle, rgba(179,138,255,0.35) 0%, transparent 68%); filter: blur(4px); pointer-events: none; z-index: 0; } .track-header-logo { position: relative; height: 30px; margin-bottom: 20px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); } .track-header h1 { font-family: var(--f-display); font-size: 30px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.4px; position: relative; } .track-header p { font-size: 14px; opacity: 0.78; position: relative; max-width: 420px; margin: 0 auto; } /* ===== Main ===== */ .track-main { max-width: 820px; margin: -64px auto 0; padding: 0 16px 48px; position: relative; z-index: 1; } .hidden { display: none !important; } /* ===== Section titles (eyebrow) ===== */ .section-title { font-family: var(--f-display); font-size: 15px; font-weight: 700; color: var(--txt); letter-spacing: -0.1px; text-transform: uppercase; letter-spacing: 0.6px; display: flex; align-items: center; gap: 8px; } .section-title::before { content: '\00bb'; color: var(--p); font-family: var(--f-display); font-weight: 700; } /* ===== Form card ===== */ .track-form { background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--sh-md); margin-bottom: 20px; border: 1px solid var(--bdr); } .form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .form-field { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 11px; font-weight: 600; color: var(--txt-2); text-transform: uppercase; letter-spacing: 0.6px; } .form-field input { padding: 10px 14px; border: 1.5px solid var(--bdr); border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; color: var(--txt); background: #fafbfc; transition: border-color 0.2s, box-shadow 0.2s; } .form-field input:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(83,0,191,0.12); background: #fff; } .btn-consultar { padding: 10px 24px; background: var(--brand-grad); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; height: 42px; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 2px 10px rgba(83,0,191,0.32); } .btn-consultar:hover { opacity: 0.9; transform: translateY(-1px); } .btn-consultar:active { transform: translateY(0); } .btn-consultar:disabled { background: var(--t3); box-shadow: none; cursor: not-allowed; transform: none; } .form-error { margin-top: 12px; padding: 10px 14px; background: #fef2f2; color: #991b1b; border-radius: 8px; font-size: 13px; border-left: 3px solid var(--err); } /* ===== Chamado Card ===== */ .chamado-card { background: var(--surface); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--sh-md); margin-bottom: 16px; border: 1px solid var(--bdr); border-top: 3px solid transparent; border-image: var(--brand-grad) 1; } .card-title { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 12px; } .card-title h2 { font-family: var(--f-display); font-size: 18px; font-weight: 700; color: var(--p); letter-spacing: -0.2px; } .card-details { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--txt-2); } .card-details span { display: flex; align-items: center; gap: 4px; } /* ===== Badges ===== */ .badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; font-weight: 600; display: inline-block; letter-spacing: 0.2px; white-space: nowrap; } .status-aguardando { background: #fef9c3; color: #854d0e; } .status-iniciado { background: #dbeafe; color: #1e40af; } .status-pausado { background: #ede9fe; color: #5b21b6; } .status-finalizado { background: #dcfce7; color: #14532d; } .prio-baixa { background: #f1f5f9; color: #475569; } .prio-media { background: #fef9c3; color: #854d0e; } .prio-alta { background: #fee2e2; color: #991b1b; } .prio-urgente { background: var(--err); color: #fff; } /* ===== Status Timeline ===== */ .status-timeline { background: var(--surface); border-radius: var(--radius); padding: 26px 24px 22px; box-shadow: var(--sh-md); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--bdr); } .tl-step { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; position: relative; } .tl-dot { width: 34px; height: 34px; border-radius: 50% 50% 50% 12px; background: #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--t3); z-index: 1; transition: background 0.3s, box-shadow 0.3s, transform 0.3s; } .tl-step.reached .tl-dot { background: var(--brand-fill); color: white; } .tl-step.current .tl-dot { background: var(--brand-fill); color: white; transform: rotate(0deg) scale(1.08); box-shadow: 0 0 0 6px rgba(83,0,191,0.16); animation: tl-pulse 2.2s ease-in-out infinite; } @keyframes tl-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(83,0,191,0.16); } 50% { box-shadow: 0 0 0 10px rgba(83,0,191,0.06); } } .tl-step.finalizado .tl-dot { background: linear-gradient(135deg, var(--ok-on), var(--ok-text)); color: white; border-radius: 50%; } .tl-label { font-size: 11px; font-weight: 600; color: var(--t3); text-align: center; transition: color 0.3s; } .tl-step.reached .tl-label, .tl-step.current .tl-label { color: var(--p); } .tl-step.finalizado .tl-label { color: var(--ok-text); } .tl-line { height: 3px; flex: 1; background: #e2e8f0; margin: 0 -4px; margin-bottom: 24px; border-radius: 2px; transition: background 0.3s; position: relative; overflow: visible; } .tl-line.filled { background: var(--brand-grad); } .tl-line.filled::after { content: '\00bb'; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--p); line-height: 1; } /* ===== Messages ===== */ .track-messages { background: var(--surface); border-radius: var(--radius); box-shadow: var(--sh-md); padding: 20px; min-height: 200px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; border: 1px solid var(--bdr); scroll-behavior: smooth; } .track-messages::-webkit-scrollbar { width: 6px; } .track-messages::-webkit-scrollbar-track { background: transparent; } .track-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .msg { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; word-wrap: break-word; } .msg .msg-time { font-size: 10px; opacity: 0.75; margin-top: 4px; } .msg .email-badge { font-size: 10px; color: var(--warn-on); margin-bottom: 3px; font-weight: 600; } .msg.cliente { align-self: flex-end; background: var(--brand-fill); color: white; border-bottom-right-radius: 4px; box-shadow: 0 2px 8px rgba(83,0,191,0.25); } .msg.atendente { align-self: flex-start; background: #f1f5f9; color: var(--txt); border-bottom-left-radius: 4px; } .msg.sistema { align-self: center; background: #fef9c3; color: #854d0e; font-size: 11px; padding: 5px 14px; border-radius: 20px; max-width: 90%; text-align: center; } .msg-mode-switch { align-self: stretch; display: flex; align-items: center; gap: 8px; color: var(--t3); font-size: 11px; margin: 2px 0; } .msg-mode-switch::before, .msg-mode-switch::after { content: ''; flex: 1; height: 1px; background: var(--bdr); } .msg-mode-switch .msg-time { white-space: nowrap; font-size: 10px; color: #cbd5e1; } /* ===== Cartão de conexão remota ===== */ .msg-remoto { align-self: flex-start; max-width: 88%; background: #fff; border: 1.5px solid var(--p); border-radius: 14px; padding: 13px 15px; box-shadow: 0 3px 14px rgba(83, 0, 191, 0.14); } .msg-remoto-top { font-weight: 700; font-size: 14px; color: var(--p); margin-bottom: 4px; } .msg-remoto-txt { font-size: 13.5px; line-height: 1.45; color: var(--txt); } .msg-remoto-btn { display: inline-block; margin-top: 10px; padding: 8px 16px; border-radius: 9px; background: linear-gradient(135deg, var(--p), var(--p-dark)); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; } .msg-remoto-btn:hover { filter: brightness(1.08); } .msg-remoto-prazo { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--p); } /* O cartão não é .msg, então não herda `.msg .msg-time` — repete o tamanho aqui. */ .msg-remoto .msg-time { display: block; margin-top: 6px; font-size: 10px; opacity: 0.75; } /* Expirado: o link continua valendo — a página explica o que houve e o que fazer. */ .msg-remoto.expirado { border-color: var(--bdr); opacity: 0.75; } .msg-remoto.expirado .msg-remoto-btn { background: var(--t3); } .msg-remoto.expirado .msg-remoto-prazo { color: var(--err, #dc2626); } .msg.email_entrada { align-self: flex-end; background: #eef2ff; color: var(--txt); border-left: 3px solid var(--warn); border-bottom-right-radius: 4px; } .msg.email_saida { align-self: flex-start; background: #f1f5f9; color: var(--txt); border-left: 3px solid var(--warn); border-bottom-left-radius: 4px; } /* ===== Input area ===== */ .track-input { display: flex; gap: 10px; } .track-input input { flex: 1; padding: 12px 18px; border: 1.5px solid var(--bdr); border-radius: 24px; font-size: 14px; font-family: inherit; outline: none; color: var(--txt); background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; } .track-input input:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(83,0,191,0.12); } .track-input button { padding: 12px 24px; background: var(--brand-fill); color: white; border: none; border-radius: 24px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 2px 8px rgba(83,0,191,0.3); } .track-input button:hover { opacity: 0.9; transform: translateY(-1px); } .track-input button:active { transform: translateY(0); } .track-input.disabled input, .track-input.disabled button { opacity: 0.4; pointer-events: none; } /* ===== Typing indicator ===== */ .track-typing { padding: 4px 0 2px; font-size: 12px; color: var(--txt-2); font-style: italic; min-height: 20px; } /* Falha de envio: o texto volta para a caixa e o motivo aparece aqui. */ .track-erro { display: flex; align-items: center; gap: 8px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; color: #b91c1c; font-size: 12.5px; font-weight: 500; padding: 9px 13px; margin-bottom: 8px; } .track-erro::before { content: '⚠'; font-size: 14px; } /* ===== CSAT ===== */ .csat-box { background: var(--surface); border-radius: var(--radius); padding: 28px 24px; margin-top: 16px; text-align: center; box-shadow: var(--sh-md); border: 1px solid var(--bdr); position: relative; overflow: hidden; } .csat-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--p), var(--teal), var(--ok)); } .csat-title { font-family: var(--f-display); font-size: 17px; font-weight: 700; color: var(--txt); margin-bottom: 6px; letter-spacing: -0.2px; } .csat-subtitle { font-size: 13px; color: var(--txt-2); margin-bottom: 20px; } .csat-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; } .star { background: none; border: none; font-size: 40px; color: #e2e8f0; cursor: pointer; padding: 0 2px; transition: color 0.15s, transform 0.15s; line-height: 1; } .star:hover, .star.active { color: var(--warn); } .star:hover { transform: scale(1.2); } .csat-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--t3); margin-bottom: 16px; padding: 0 4px; } .csat-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--bdr); border-radius: 8px; font-family: inherit; font-size: 13px; resize: vertical; margin-bottom: 14px; color: var(--txt); background: #fafbfc; transition: border-color 0.2s, box-shadow 0.2s; } .csat-textarea:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px rgba(83,0,191,0.12); background: #fff; } .csat-submit { padding: 10px 32px; background: var(--brand-fill); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 2px 8px rgba(83,0,191,0.3); } .csat-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .csat-submit:not(:disabled):hover { opacity: 0.9; transform: translateY(-1px); } .csat-thanks { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--ok-text); } .csat-already { margin-top: 16px; font-size: 14px; font-weight: 500; color: var(--txt-2); } /* ===== Auth (login por código) ===== */ .auth-card { background: var(--surface); border-radius: var(--radius); padding: 34px 30px; box-shadow: var(--sh-lg); border: 1px solid var(--bdr); max-width: 440px; margin: 0 auto; } .auth-title { font-family: var(--f-display); font-size: 20px; font-weight: 700; color: var(--txt); letter-spacing: -0.3px; margin-bottom: 6px; } .auth-sub { font-size: 13px; color: var(--txt-2); line-height: 1.6; margin-bottom: 22px; } .auth-card .form-field { margin-bottom: 16px; } .turnstile-container { margin-bottom: 16px; display: flex; justify-content: center; } .turnstile-container:empty { margin-bottom: 0; } .btn-primary { padding: 12px 24px; background: var(--brand-fill); color: white; border: none; border-radius: var(--sim-radius-btn, 8px); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.2s, transform 0.1s; box-shadow: 0 2px 10px rgba(83,0,191,0.32); } .btn-primary:hover { opacity: 0.92; transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { background: var(--t3); box-shadow: none; cursor: not-allowed; transform: none; } .btn-block { width: 100%; } .code-input { text-align: center; letter-spacing: 14px; font-family: var(--f-display); font-size: 24px !important; font-weight: 700; padding-left: 14px; } .auth-actions { display: flex; justify-content: space-between; margin-top: 16px; gap: 12px; } .link-btn { background: none; border: none; color: var(--p); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; } .link-btn:hover { text-decoration: underline; } .link-btn:disabled { color: var(--txt-2); cursor: default; text-decoration: none; } /* ===== Portal (lista + barra) ===== */ .portal-bar { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--bdr); border-radius: var(--radius); padding: 12px 18px; box-shadow: var(--sh-sm); margin-bottom: 16px; } .portal-user { font-size: 13px; color: var(--txt-2); } .portal-user strong { color: var(--txt); } .list-title { margin-bottom: 16px; } .tickets-list { display: flex; flex-direction: column; gap: 10px; } .ticket-row { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--bdr); border-left: 3px solid var(--bdr); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--sh-sm); cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, transform 0.1s, border-color 0.2s; } .ticket-row:hover { box-shadow: var(--sh-md); transform: translateY(-1px); border-color: var(--p); border-left-color: var(--p); } .ticket-row-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .ticket-prot { font-family: var(--f-mono); font-size: 15px; font-weight: 700; color: var(--p); letter-spacing: 0; } .ticket-row-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--txt-2); } .ticket-nota { color: var(--warn-on); font-weight: 600; } .tickets-empty, .tickets-loading { text-align: center; color: var(--txt-2); font-size: 14px; padding: 40px 16px; } .back-btn { display: inline-block; } /* ===== Barra do detalhe (voltar + controles de atualização) ===== */ .detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .detail-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Pulso de "ao vivo": sinaliza que a conversa está sendo atualizada sozinha, para o cliente não ficar na dúvida se precisa recarregar a página. */ .live-ind { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok-text); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok-on); box-shadow: 0 0 0 0 rgba(19,173,91,0.5); animation: live-pulse 2s ease-out infinite; } .live-ind.is-retry { color: var(--warn-on); } .live-ind.is-retry .live-dot { background: var(--warn-on); box-shadow: 0 0 0 0 rgba(255,102,0,0.5); } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 70% { box-shadow: 0 0 0 7px transparent; opacity: 0.7; } 100% { box-shadow: 0 0 0 0 transparent; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } .btn-refresh { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--bdr); border-radius: 999px; padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--txt-2); cursor: pointer; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; } .btn-refresh:hover { border-color: var(--p); color: var(--p); box-shadow: var(--sh-sm); } .btn-refresh:disabled { opacity: 0.55; cursor: default; } .btn-refresh.is-loading .refresh-ico { animation: refresh-spin 0.8s linear infinite; } .refresh-ico { display: inline-block; font-size: 14px; line-height: 1; } @keyframes refresh-spin { to { transform: rotate(360deg); } } /* Interruptor de atualização automática — a preferência fica no navegador do cliente. */ .auto-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .auto-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { position: relative; width: 38px; height: 21px; border-radius: 999px; background: #cbd5e1; transition: background 0.2s; flex-shrink: 0; } .switch-thumb { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: transform 0.2s; } .auto-switch input:checked + .switch-track { background: var(--p); } .auto-switch input:checked + .switch-track .switch-thumb { transform: translateX(17px); } .auto-switch input:focus-visible + .switch-track { outline: 2px solid var(--p); outline-offset: 2px; } .switch-label { font-size: 12px; font-weight: 600; color: var(--txt-2); } @media (max-width: 560px) { .detail-bar { align-items: flex-start; } .detail-tools { width: 100%; justify-content: space-between; gap: 8px; } .switch-label { display: none; } } /* ===== Modal (sessão expirada) ===== */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(21, 6, 41, 0.55); backdrop-filter: blur(3px); animation: modal-fade 0.18s ease-out; } .modal-overlay.hidden { display: none; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--sh-lg); padding: 32px 28px 26px; max-width: 420px; width: 100%; text-align: center; animation: modal-rise 0.22s cubic-bezier(0.2, 0.8, 0.3, 1); } @keyframes modal-rise { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal-overlay, .modal-card { animation: none; } } .modal-ico { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--p-light); display: flex; align-items: center; justify-content: center; font-size: 26px; } .modal-title { font-family: var(--f-display); font-size: 21px; font-weight: 700; color: var(--txt); margin-bottom: 10px; letter-spacing: -0.3px; } .modal-text { font-size: 14px; line-height: 1.6; color: var(--txt-2); margin-bottom: 22px; } /* ===== Histórico de mudanças (na timeline de mensagens) ===== */ .msg-history { align-self: center; display: flex; align-items: center; gap: 10px; background: var(--p-light); color: var(--p-dark); font-size: 11px; font-weight: 500; padding: 6px 14px; border-radius: 20px; max-width: 92%; } .msg-history .msg-time { font-size: 10px; opacity: 0.7; white-space: nowrap; } /* ===== Responsive ===== */ @media (max-width: 600px) { .track-header { padding: 24px 16px 84px; } .track-header h1 { font-size: 22px; } .track-header-mark { opacity: 0.1; } .track-main { margin-top: -52px; } .status-timeline { flex-wrap: wrap; gap: 8px; padding: 18px 16px; } .tl-line { display: none; } .msg { max-width: 88%; } .track-main { padding: 0 12px 40px; } .auth-card { padding: 26px 20px; } } @media (prefers-reduced-motion: reduce) { .tl-step.current .tl-dot { animation: none; } }