:root {
  --bg: #22252E; --side: #1C1E26; --band: #3D404B; --line: #30333D; --line2: #3A3D48;
  --text: #E4E4E7; --muted: #8B8E98; --dim: #7C7F89; --accent: #F29A38;
  --green: #5FBF7A; --blue: #6EA8FE; --red: #F08C8C;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 'JetBrains Mono', ui-monospace, Menlo, monospace; }
button { font: inherit; color: inherit; cursor: pointer; }
.accent { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#app { display: flex; flex-wrap: wrap; min-height: 100vh; }

#sidebar { flex: 1 1 250px; max-width: 300px; min-width: 230px; background: var(--side); border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 18px; height: 100vh; overflow-y: auto; }
.brand { display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding: 0 6px; }
.sec-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; padding: 0 6px 6px; }
.sec-acoes { display: flex; gap: 4px; }
.plus { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line2); background: #262934; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; min-height: 60px; position: relative; }
.row:hover { background: #262934; }
.row.active { background: var(--band); }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-name { font-weight: 700; }
.row-prev { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-prev.busy { color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.star { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: var(--side); border: 2px solid var(--side); font-size: 9px; display: flex; align-items: center; justify-content: center; }
.group-av { width: 44px; height: 44px; border-radius: 12px; background: #2B2E38; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 1px; padding: 1px; box-sizing: border-box; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.group-av .mini { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.group-av .mini svg { width: 20px; height: 20px; }
.group-av .mais { font-size: 10px; color: var(--muted); font-weight: 600; }
#others summary, #arquivados summary { color: var(--muted); font-size: 12px; padding: 0 6px; cursor: pointer; }
.other { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px; font-size: 12px; color: var(--muted); }

#chat { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
#chat-head { padding: 14px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#chat-head h1 { margin: 0; min-width: 0; font-size: 14px; font-weight: 500; color: #A3A6B0; }
#banner:empty { display: none; }
#banner { padding: 10px 24px; background: #2B2E38; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
#messages { flex: 1; overflow-y: auto; padding: 20px 0; display: flex; flex-direction: column; gap: 14px; }
.m { display: flex; gap: 14px; padding: 0 24px; white-space: pre-wrap; word-break: break-word; }
.m.human { background: var(--band); padding: 16px 24px; }
.m .who { font-weight: 700; }
.m.sys { color: var(--dim); font-size: 13px; }
.m .av { margin-top: 4px; }
.mention { color: var(--accent); }
.foot { padding: 0 24px 0 54px; color: var(--dim); font-size: 12px; }
.entregas { padding: 0 24px 0 54px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--dim); }
.ent.falhou, .ent.sem_resposta { color: var(--red); }
.ent.entregue { color: var(--green); }
.link { background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; font-size: 12px; }
#working:empty { display: none; }
#working { padding: 6px 24px; display: flex; flex-direction: column; gap: 6px; }
.working-row { display: flex; align-items: center; gap: 12px; color: #9A9DA7; }
#composer-wrap { padding: 0 24px 16px; position: relative; }
#composer { display: flex; gap: 12px; align-items: flex-end; border-top: 1px solid #4A4D58; border-bottom: 1px solid #4A4D58; padding: 6px 0; }
#input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #ECECEF; font: inherit; line-height: 1.5; resize: none; overflow-y: hidden; padding: 8px 0; }
.mic { width: 40px; height: 40px; padding: 0; flex-shrink: 0; border: 0; border-radius: 6px; background: transparent; color: #A3A6B0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mic:hover { color: #E6E6E6; }
.mic.gravando { color: #E5484D; }
.mic.gravando svg { animation: pulsa 1.1s ease-in-out infinite; }
.mic.transcrevendo { color: var(--accent); cursor: progress; }
.mic.transcrevendo svg { animation: pulsa .7s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .35; } }
.send { min-height: 40px; padding: 0 14px; border-radius: 6px; border: 0; background: var(--accent); color: var(--side); font-weight: 700; }
.hint { margin-top: 6px; font-size: 12px; color: var(--dim); }
.hint.erro { color: var(--red); }
#mention-box { position: absolute; bottom: 76px; left: 24px; width: 260px; background: #2B2E38; border: 1px solid var(--line2); border-radius: 6px; padding: 4px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 4px; width: 100%; border: 0; background: transparent; text-align: left; }
.opt.sel { background: var(--band); }

#details { flex: 1 1 250px; max-width: 300px; background: var(--side); border-left: 1px solid var(--line); padding: 18px; display: flex; flex-direction: column; gap: 18px; height: 100vh; overflow-y: auto; }
#details[hidden] { display: none; }
.det-head { display: flex; align-items: center; justify-content: space-between; }
.x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.x:hover { background: #2B2E38; color: #E6E6E6; }
.pill { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 18px 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: #282B34; color: #E6E6E6; font: inherit; font-size: 14px; cursor: pointer; }
.pill:hover, .pill[aria-expanded="true"] { background: #2F323C; }
.pill .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack { position: relative; width: 44px; height: 40px; flex-shrink: 0; }
.stack > * { position: absolute; }
.stack .ini { top: 0; left: 12px; width: 20px; height: 20px; border-radius: 50%; background: #3A3D48; color: #A3A6B0; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.stack .av:nth-child(2) { left: 0; bottom: 0; }
.stack .av:nth-child(3) { right: 0; bottom: 0; }
.stack .av svg, .stack .av canvas { width: 26px !important; height: 26px !important; }
.av canvas.av3d { display: block; }
.stack .av:nth-child(2) { z-index: 1; }
#details h2 { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.member { display: flex; align-items: center; gap: 10px; }
.member .name { flex: 1; }
.member .st { font-size: 12px; color: var(--muted); }
.kv { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding-top: 14px; border-top: 1px solid var(--line); }
.ghost { background: transparent; border: 1px solid var(--line2); border-radius: 6px; padding: 4px 10px; min-height: 32px; color: #C4C6CE; }
.small { font-size: 12px; min-height: 28px; }
.primary { background: var(--accent); border: 0; border-radius: 6px; padding: 6px 16px; min-height: 40px; color: var(--side); font-weight: 700; }
.primary:disabled { background: #3A3D48; color: var(--muted); cursor: default; }

dialog { background: #262934; color: var(--text); border: 1px solid var(--line2); border-radius: 14px; padding: 0; width: min(480px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog form { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
dialog h2 { margin: 0 0 6px; font-size: 16px; }
dialog label, dialog legend { font-size: 12px; color: var(--muted); }
dialog input, dialog textarea { background: var(--side); color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; font: inherit; }
dialog fieldset { border: 1px solid var(--line2); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.preview { display: flex; justify-content: center; padding: 8px 0; }
.shape-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.shape-grid button { height: 50px; border-radius: 10px; border: 2px solid transparent; background: transparent; display: flex; align-items: center; justify-content: center; }
.shape-grid button[aria-checked="true"] { border-color: #9A9A9A; }
.color-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.color-row button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; padding: 3px; background: transparent; }
.color-row button[aria-checked="true"] { border-color: #DADADA; }
.color-row span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.erro { color: var(--red); font-size: 13px; margin: 0; }

.av { display: inline-flex; perspective: 240px; flex-shrink: 0; }
.av svg { overflow: visible; transform-style: preserve-3d; }
.av .eyes { transform-box: fill-box; transform-origin: center; will-change: transform; }
.off svg { filter: saturate(.35) brightness(.8); }
.off .eyes { transform: scaleY(.25); }
.av .eyes rect { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .av svg, .av .eyes, .av .eyes rect { animation: none !important; } }
#btn-voltar { display: none; }
@media (max-width: 760px) {
  /* Celular: uma tela por vez (lista ou conversa), perfil por cima, como um app de mensagens. */
  #app { flex-wrap: nowrap; min-height: 100dvh; }
  #sidebar, #chat { max-width: none; min-width: 0; flex: 1 1 100%; height: 100dvh; }
  #sidebar { padding-top: max(16px, env(safe-area-inset-top)); border-right: 0; }
  body.com-chat #sidebar { display: none; }
  body:not(.com-chat) #chat, body:not(.com-chat) #details { display: none; }
  #chat-head { padding: max(10px, env(safe-area-inset-top)) 12px 10px; justify-content: flex-start; }
  #btn-voltar { display: inline-flex; font-size: 22px; line-height: 1; padding: 2px 10px; }
  #composer-wrap { padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
  #details { position: fixed; inset: 0; max-width: none; z-index: 20; height: 100dvh; padding-top: max(18px, env(safe-area-inset-top)); }
  .m { padding: 0 12px; }
  #input { font-size: 16px; } /* evita o zoom automático do iPhone ao tocar no campo */
}

/* Barra de rolagem no tom do app */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3A3D48; border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #4E5260; }
::-webkit-scrollbar-corner { background: transparent; }
#composer > .accent { align-self: flex-start; padding-top: 8px; line-height: 1.5; }
.perigo { color: #E5484D; margin-right: auto; }
/* perfil do bot e rotinas */
.perfil { display: flex; flex-direction: column; gap: 18px; }
.perfil-topo { display: flex; gap: 14px; align-items: center; }
.perfil-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.perfil-nome { font-size: 18px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.perfil-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: #2B2E38; color: #A9ACB6; font-size: 11px; }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag:not([class*="st-"]) i { display: none; }
.tag.st-livre { background: #233328; color: var(--green); }
.tag.st-trabalhando { background: #3A2E1F; color: var(--accent); }
.tag.st-parado { color: var(--muted); }
.perfil-papel { border: 1px dashed var(--line2); border-radius: 10px; background: none; color: #A9ACB6; font: inherit; font-size: 12px; line-height: 1.5; text-align: left; padding: 10px 12px; cursor: pointer; }
.perfil-papel:hover { color: var(--text); border-color: #4E5260; }
.perfil-uso:empty { display: none; }
.perfil-uso .medidor { grid-template-columns: auto 1fr; justify-items: start; justify-self: stretch; column-gap: 14px; row-gap: 2px; }
.perfil-uso .medidor svg { grid-column: 1; grid-row: 1 / 3; }
.perfil-uso .medidor::before { content: 'USO DA SEMANA'; grid-column: 2; align-self: end; font-size: 11px; color: #A9ACB6; letter-spacing: .06em; }
.perfil-uso .medidor .zera { grid-column: 2; align-self: start; font-size: 12px; color: var(--text); }
.perfil-uso .medidor .zera.alerta { color: #FF5F5F; }
.perfil-sec { display: flex; flex-direction: column; gap: 8px; }
.cfg { background: #262934; border: 1px solid var(--line); border-radius: 12px; }
.cfg-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 12px; min-height: 44px; font-size: 12px; color: #A9ACB6; }
.cfg-linha + .cfg-linha { border-top: 1px solid var(--line); }
.cfg-linha select { background: transparent; color: var(--text); border: 0; font: inherit; font-size: 13px; text-align: right; min-width: 0; max-width: 68%; text-overflow: ellipsis; cursor: pointer; }
.cfg-esf { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
.esf { display: grid; gap: 2px; background: var(--side); border-radius: 8px; padding: 2px; }
.esf button { min-height: 32px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #A9ACB6; font: inherit; font-size: 10.5px; letter-spacing: -.02em; cursor: pointer; }
.esf button:hover { color: var(--text); }
.esf button.on { background: var(--accent); color: var(--side); font-weight: 700; }
.perfil-fim { margin-top: auto; display: flex; }
.perfil-fim .ghost { flex: 1; min-height: 40px; border-color: #5A3434; margin-right: 0; }
.rotinas { background: #262934; border: 1px solid var(--line); border-radius: 12px; }
.rotina { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.rotina + .rotina { border-top: 1px solid var(--line); }
.rot-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 0; }
.rot-nome { font-size: 13px; }
.rot-quando { font-size: 11px; color: var(--muted); }
.vazio { font-size: 12px; color: var(--muted); padding: 0 6px; }
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #4A4D58; transition: background .15s; pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #F2F2F2; transition: transform .15s; }
.switch input:checked + span { background: #3B6FD9; }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
#dlg-bot select, #dlg-rot select, #dlg-rot input[type=number], #dlg-rot input[type=time] { background: #1C1E26; color: var(--text); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 8px; font: inherit; }
#dlg-rot .linha { display: flex; gap: 12px; }
#dlg-rot [hidden], #dlg-bot [hidden] { display: none; }
.perfil-acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.perfil-acoes .ghost { min-height: 40px; padding: 0 6px; font-size: 13px; }
.ghost:disabled { opacity: .45; cursor: default; }
.perfil-av { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 16px; }
.perfil-av:hover { filter: brightness(1.15); }

.medidor { display: grid; justify-items: center; gap: 4px; justify-self: center; }
.medidor svg { display: block; }
.medidor .zera { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.medidor .zera.alerta { color: #FF5F5F; }
.anel-trilho { fill: none; stroke: #343843; }
.anel-cheio { fill: none; stroke: #FFD23F; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.anel-num { font: 700 17px 'JetBrains Mono', ui-monospace, Menlo, monospace; fill: var(--text); }
.anel-sub { font: 400 9px 'JetBrains Mono', ui-monospace, Menlo, monospace; fill: var(--muted); letter-spacing: .06em; }
#bot-uso { display: flex; justify-content: flex-start; }
#bot-uso .medidor { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .anel-cheio { transition: none; } }
#head-uso { display: flex; flex-shrink: 0; margin-left: auto; }
#head-uso:empty { display: none; }
.head-uso-num { font: 700 9px 'JetBrains Mono', ui-monospace, Menlo, monospace; fill: var(--text); }
#head-uso.alerta .anel-trilho { stroke: #FF5F5F; }

/* tags do grupo */
.tags { background: #262934; border: 1px solid var(--line); border-radius: 12px; }
.tag-linha { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; padding: 10px 12px; cursor: pointer; }
.tag-linha + .tag-linha { border-top: 1px solid var(--line); }
.tag-linha:hover .tag-nome { color: var(--accent); }
.tag-nome { font-size: 13px; }
.tag-quem { font-size: 11px; color: var(--muted); }
.tag-ico { width: 18px; height: 18px; border-radius: 5px; background: #2B2E38; color: var(--accent); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.m.human .dim { color: var(--muted); }
.arq { color: var(--blue); text-decoration: underline; }