/* Orbi 1.3 · chat da 1.3: mensagens agrupadas, separadores de dia, novas mensagens, ações por toque longo */
/* Cores só pelos tokens --o-* (valem no tema claro e no escuro). Seletores com #app #messages vencem os ajustes antigos do Orbi.html. */

#messages{--ochat-av:36px}

/* ---------- Ritmo da lista: grupo compacto, espaço maior entre grupos ---------- */
#app #messages .msg{padding-top:3px;padding-bottom:2px;margin-top:14px}
#app #messages .msg.grouped{margin-top:0;padding-top:1px}
#app #messages .msg:first-child{margin-top:0}
#app #messages :is(.msg-day,.msg-new)+.msg{margin-top:2px}
#app #messages .reactions:empty{display:none}
#app #messages .msg.mentioned{padding-left:9px;margin-left:-11px;border-radius:2px}

/* ---------- Mensagem agrupada: sem avatar, nome e hora; a hora aparece onde ficaria o avatar ---------- */
.msg-gutter{flex:0 0 var(--ochat-av);width:var(--ochat-av);display:flex;justify-content:center;align-items:flex-start;padding-top:6px}
.msg-gtime{font-size:10px;line-height:1.2;color:var(--o-muted);white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .12s}
#messages .msg:hover .msg-gtime,#messages .msg:focus-within .msg-gtime,#messages .msg.is-picked .msg-gtime{opacity:1}
.msg-edited-inline{font-size:10px;color:var(--o-muted);margin-left:6px;text-decoration:underline dotted;text-underline-offset:2px}
.msg-edited-inline:hover,.msg-edited-inline:focus-visible{color:var(--o-text-strong)}
#app.orbi-text-page #messages .msg.grouped .msg-text{border-radius:13px}
#app.orbi-text-page #messages .msg.grouped>.msg-gutter{padding-top:11px}

/* ---------- Separador de dia ---------- */
.msg-day,.msg-new{display:flex;align-items:center;gap:12px;margin:18px 0 8px;font-size:11px;font-weight:650;line-height:1;user-select:none}
.msg-day::before,.msg-day::after,.msg-new::before,.msg-new::after{content:"";flex:1;height:1px;min-width:12px}
.msg-day::before,.msg-day::after{background:var(--o-line-strong)}
.msg-day>span{padding:5px 12px;border:1px solid var(--o-line);border-radius:999px;background:var(--o-surface-2);color:var(--o-muted);white-space:nowrap}
#messages>.msg-day:first-child,#messages>.pinned-strip+.msg-day{margin-top:2px}

/* ---------- Novas mensagens ---------- */
.msg-new{color:var(--o-brand-text);transition:opacity .35s ease}
.msg-new::before,.msg-new::after{background:color-mix(in srgb,var(--o-brand) 70%,transparent)}
.msg-new>span{padding:5px 12px;border-radius:999px;background:var(--o-brand-soft);border:1px solid color-mix(in srgb,var(--o-brand) 55%,transparent);white-space:nowrap}
.msg-new.is-leaving{opacity:0}
.msg-day+.msg-new{margin-top:6px}

/* ---------- Ações no computador: barra flutuante ao passar o mouse ou focar (não ocupa espaço na lista) ---------- */
#app.orbi-layout.orbi-text-page #messages .msg-actions{position:absolute;top:-14px;right:14px;left:auto;margin:0;padding:3px;gap:2px;height:auto;min-height:0;flex-wrap:nowrap;align-items:center;justify-content:flex-end;max-width:calc(100% - 28px);border:1px solid var(--o-line-strong);border-radius:10px;background:var(--o-surface-2);box-shadow:var(--orbi-shadow);opacity:0;pointer-events:none;z-index:3}
#app.orbi-layout.orbi-text-page #messages .msg:hover .msg-actions,#app.orbi-layout.orbi-text-page #messages .msg:focus-within .msg-actions{opacity:1;pointer-events:auto}
#app.orbi-layout.orbi-text-page #messages .msg-actions button{opacity:1;pointer-events:auto;font-size:11px;min-height:26px;padding:3px 8px;border-radius:7px;color:var(--o-muted)}
#app.orbi-layout.orbi-text-page #messages .msg-actions button:hover,#app.orbi-layout.orbi-text-page #messages .msg-actions button:focus-visible{background:var(--o-hover);color:var(--o-text-strong)}
#app.orbi-layout.orbi-text-page #messages .msg-actions button[data-react]{display:grid;place-items:center;width:28px;height:26px;min-height:26px;padding:0;border:0;border-radius:7px;background:none}
#app.orbi-layout.orbi-text-page #messages .msg-actions button[data-react]:hover,#app.orbi-layout.orbi-text-page #messages .msg-actions button[data-react]:focus-visible{background:var(--o-hover)}
#app #messages .msg-actions button:focus-visible{outline:2px solid var(--o-brand);outline-offset:1px}

/* ---------- Botão "Ações": só no celular; fica fora da vista até receber o foco do teclado ---------- */
.msg-more{display:none}

@media (max-width:760px),(pointer:coarse){
  /* a linha Responder / Reagir / Editar / Excluir some; as ações abrem pela folha de ações */
  #app #messages .msg-actions{display:none!important}
  #messages .msg-more{display:block;position:absolute;top:0;right:6px;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;opacity:0;z-index:3}
  #messages .msg-more:focus,#messages .msg-more:focus-visible{width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;opacity:1;padding:7px 14px;border-radius:999px;background:var(--o-surface-3);color:var(--o-text-strong);border:1px solid var(--o-brand);font-size:12px;font-weight:650;box-shadow:var(--orbi-shadow);outline:2px solid var(--o-brand);outline-offset:2px}
  #app #messages .msg{-webkit-touch-callout:none}
  #app.orbi-text-page #messages{--ochat-av:30px}
  #app #messages .msg-gtime{font-size:9px}
  #app #messages .msg.grouped>.msg-gutter{padding-top:10px}
}
@media (pointer:coarse){
  #app #messages .msg{-webkit-user-select:none;user-select:none}
}
@media (hover:hover) and (pointer:fine) and (max-width:760px){
  #messages .msg:hover .msg-more{width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;opacity:1;padding:4px 10px;border-radius:999px;background:var(--o-surface-3);color:var(--o-muted);border:1px solid var(--o-line-strong);font-size:11px}
}
#app #messages .msg.is-pressing,#app #messages .msg.is-picked{background:var(--o-brand-soft)}

/* ---------- Folha de ações ---------- */
.ochat-sheet-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.ochat-sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.55);-webkit-tap-highlight-color:transparent}
html[data-theme=light] .ochat-sheet-back{background:rgba(30,20,5,.4)}
.ochat-sheet{position:relative;width:min(520px,100%);max-height:min(82dvh,600px);overflow:auto;overscroll-behavior:contain;background:var(--o-surface-2);color:var(--o-text);border:1px solid var(--o-line-strong);border-bottom:0;border-radius:20px 20px 0 0;padding:8px 12px calc(12px + env(safe-area-inset-bottom));box-shadow:var(--o-shadow);animation:ochat-up .2s ease-out;outline:0}
@keyframes ochat-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.ochat-sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--o-line-strong);margin:2px auto 10px}
.ochat-sheet-head{padding:2px 6px 10px;border-bottom:1px solid var(--o-line);margin-bottom:6px}
.ochat-sheet-head b{display:block;font-size:14px;color:var(--o-text-strong);overflow-wrap:anywhere}
.ochat-sheet-head small{display:block;margin-top:2px;font-size:11px;color:var(--o-muted)}
.ochat-sheet-head p{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--o-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.ochat-sheet-list{display:grid;gap:2px}
.ochat-sheet-btn{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:0 14px;border-radius:12px;font-size:15px;font-weight:600;text-align:left;color:var(--o-text-strong)}
.ochat-sheet-btn .ico{color:var(--o-muted)}
@media (hover:hover){.ochat-sheet-btn:hover{background:var(--o-hover)}}
.ochat-sheet-btn:focus-visible{background:var(--o-hover)}
.ochat-sheet-btn:focus-visible{outline:2px solid var(--o-brand);outline-offset:-2px}
.ochat-sheet-btn.danger,.ochat-sheet-btn.danger .ico{color:var(--o-danger)}
.ochat-sheet-btn.cancel{justify-content:center;margin-top:8px;background:var(--o-surface-3);color:var(--o-text-strong)}

@media (prefers-reduced-motion:reduce){
  .ochat-sheet{animation:none}
  .msg-new,.msg-gtime{transition:none}
}