/* Bis no celular: mesma paleta do painel do Bis (claro/escuro), pensada para o polegar. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #151515; --panel: #1C1C1E; --surface: #242426; --surface-hover: #2C2C2F;
  --border: #343438; --border-strong: #45454b;
  --text-primary: #F2F2F2; --text-secondary: #A6A6AB; --text-muted: #74747C;
  --accent: #6C63FF; --accent-hover: #7d75ff; --accent-text: #a29dff; --accent-soft: rgba(108, 99, 255, .14); --on-accent: #fff;
  --success: #36C978; --warning: #E7A93A; --warning-soft: rgba(231, 169, 58, .13); --error: #E35D6A;
  --code-bg: #111113; --code-text: #e6c487;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F5F6; --panel: #FFFFFF; --surface: #F7F7F8; --surface-hover: #EEEEF0;
  --border: #DEDEE2; --border-strong: #c9c9cf;
  --text-primary: #202124; --text-secondary: #65656D; --text-muted: #96969D;
  --accent: #6257E5; --accent-hover: #5248d6; --accent-text: #5248d6; --accent-soft: rgba(98, 87, 229, .09); --on-accent: #fff;
  --success: #1F9D5C; --warning: #B7791F; --warning-soft: rgba(183, 121, 31, .11); --error: #C8414F;
  --code-bg: #F0F0F3; --code-text: #8a4b08;
}
:root {
  --r-card: 10px; --r-btn: 8px; --r-input: 12px;
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text-primary); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
main { height: 100vh; height: 100dvh; max-width: 760px; margin: auto; display: flex; flex-direction: column; position: relative; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

header { flex: none; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  background: var(--panel); border-bottom: 1px solid var(--border); position: relative; }
.logo { width: 36px; height: 36px; flex: none; border-radius: 9px; }
.titulo { flex: 1; min-width: 0; }
h1 { font-size: 16px; line-height: 1.25; margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.sub { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

button, input, textarea { font: inherit; }
button { cursor: pointer; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-btn);
  min-height: 44px; padding: 8px 14px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button:disabled { opacity: .5; cursor: default; }
@media (hover: hover) { button:hover:not(:disabled) { background: var(--surface-hover); } }
button:active:not(:disabled) { transform: scale(.97); }
.primaria { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .primaria:hover:not(:disabled) { background: var(--accent-hover); } }
.icone { width: 44px; padding: 0; display: grid; place-items: center; background: transparent; border-color: transparent; }
.icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#menu svg { fill: currentColor; stroke: none; }
.largo { width: 100%; margin-top: 16px; }
.link { background: none; border: 0; color: var(--accent-text); padding: 12px 0 0; min-height: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.menu { position: absolute; right: 10px; top: calc(100% - 4px); z-index: 10; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--r-card); padding: 6px; display: flex; flex-direction: column; min-width: 200px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.menu button { text-align: left; background: none; border: 0; }
.menu .item-menu { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; color: var(--text-primary);
  text-decoration: none; border-radius: var(--r-btn); }

.tela { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.centro { justify-content: center; padding: 16px; overflow-y: auto; }
.cartao { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px; }
.centro .cartao { width: 100%; max-width: 420px; margin: auto; }
.ajuda { color: var(--text-secondary); margin: 0 0 16px; font-size: 14px; }
label { display: block; font-size: 13px; color: var(--text-secondary); margin: 12px 0 6px; }
input { width: 100%; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--r-btn); padding: 12px; font-size: 16px; }

.faixa { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; font-size: 13px;
  color: var(--text-secondary); border-bottom: 1px solid var(--border); background: var(--panel); }
.lista { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.pc { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 14px; border-radius: var(--r-card); background: var(--panel); }
.pc .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); flex: none; }
.pc.online .ponto { background: var(--success); }
.pc .info { flex: 1; min-width: 0; }
.pc .nome { font-weight: 600; display: block; }
.pc .det { font-size: 13px; color: var(--text-secondary); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selo { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); flex: none; }
.vazio { margin: auto; text-align: center; padding: 24px; max-width: 360px; color: var(--text-secondary); }
.vazio img { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 12px; }
.vazio h2 { color: var(--text-primary); }

.estado { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.estado.on:before { background: var(--success); }
.aviso { flex: none; margin: 8px 12px 0; padding: 10px 12px; border-radius: var(--r-btn); background: var(--warning-soft); color: var(--warning); font-size: 13px; }

#mensagens { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 4px; overscroll-behavior: contain; }
.msg { margin: 0 0 18px; overflow-wrap: anywhere; }
.msg.user { margin-left: 15%; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); }
.msg.fila { opacity: .65; border-style: dashed; }
.quem { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; margin-bottom: 3px; color: var(--text-secondary); }
.msg.assistant .quem { color: var(--accent-text); }
.quem time { font-weight: 400; color: var(--text-muted); }
.corpo p { margin: 0 0 8px; } .corpo p:last-child { margin-bottom: 0; }
.corpo code { font-family: var(--mono); font-size: 13px; background: var(--code-bg); color: var(--code-text); padding: 1px 4px; border-radius: 4px; }
.corpo ul { margin: 4px 0 8px; padding-left: 20px; }
.card { border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: 12px; margin: 8px 0; background: var(--panel); }
.card strong { display: block; margin-bottom: 4px; }
.card .nota { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.card .acoes { margin-top: 10px; }
.card.resolvido .acoes { display: none; }

#atividade { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px; color: var(--text-secondary); font-size: 14px; }
#atividade strong { display: block; color: var(--text-primary); font-size: 13px; }
.flutua { width: 40px; height: 40px; animation: flutua 2s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .flutua { animation: none; } }

.permissao { flex: none; margin: 8px 12px 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.permissao p { margin: 6px 0 0; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acoes button { flex: 1; min-width: 88px; }

#compor { flex: none; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); }
.caixa { display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--border-strong); border-radius: var(--r-input); background: var(--panel); padding: 5px; }
.caixa:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { min-width: 0; flex: 1; resize: none; max-height: 160px; min-height: 44px; padding: 10px 8px; border: 0; outline: none; background: transparent;
  color: var(--text-primary); font-size: 16px; line-height: 1.4; }
textarea::placeholder { color: var(--text-muted); }
#enviar { border-radius: 10px; background: var(--accent); }
#aviso { position: absolute; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); margin: 0; padding: 10px 12px; border-radius: var(--r-btn);
  background: var(--panel); border: 1px solid var(--error); color: var(--error); font-size: 13px; z-index: 20; }
#aviso:empty { display: none; }
#aviso.ok { border-color: var(--success); color: var(--text-primary); }

/* fotos escolhidas antes de mandar */
.fotos { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 8px; }
.foto { position: relative; flex: none; width: 64px; height: 64px; border-radius: var(--r-btn); overflow: hidden; border: 1px solid var(--border-strong); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto button { position: absolute; top: 2px; right: 2px; min-height: 0; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .65); border: 0; color: #fff; font-size: 14px; line-height: 24px; }
#anexar { color: var(--text-secondary); }

/* foto da tela do computador */
.pilula { min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 13px; flex: none; }
.miniatura { display: block; width: 100%; margin-top: 10px; padding: 0; overflow: hidden; border-radius: var(--r-btn); border: 1px solid var(--border-strong);
  background: var(--surface); position: relative; min-height: 80px; }
.miniatura img { display: block; width: 100%; max-height: 220px; object-fit: contain; background: #000; }
.miniatura span { position: absolute; right: 6px; bottom: 6px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; }
.fotos { display: grid; gap: 6px; margin-top: 8px; }
.fotos.varias { grid-template-columns: 1fr 1fr; }
.foto-msg { display: block; width: 100%; padding: 0; overflow: hidden; border-radius: var(--r-btn); border: 1px solid var(--border-strong);
  background: var(--surface); min-height: 80px; }
.foto-msg img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: #000; }
.fotos.varias .foto-msg img { height: 130px; object-fit: cover; }
.foto-msg.sumiu { min-height: 0; padding: 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
.visor { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; }
.visor-topo { flex: none; display: flex; align-items: center; justify-content: space-between; padding: max(8px, env(safe-area-inset-top)) 8px 8px 16px;
  color: #ddd; font-size: 13px; }
.visor-topo .icone { color: #fff; }
.visor-area { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; touch-action: pan-x pan-y pinch-zoom; }
.visor-area img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-area.zoom { display: block; }
.visor-area.zoom img { max-width: none; max-height: none; width: 250%; }
.visor-dica { flex: none; margin: 0; padding: 8px 16px max(10px, env(safe-area-inset-bottom)); color: #999; font-size: 12px; text-align: center; }