/* [1.5.911] Coluna lateral do projeto (conversa com a equipa, Oliver do videoclipe, equipa do projeto), prefixos pjs-side-, pjs-chat-. Dono: tarefa B2. Desenho do protótipo do titular (spec §18, §6.7, §6.8). Usa as primitivas vx- (vip-expressive.css) sem as redefinir; cores só pelos tokens; texto colorido em -ink. */ /* ── Coluna ── */ #rmbz-vip .pjs-side{ display:flex; flex-direction:column; gap:20px; min-width:0; } #rmbz-vip .pjs-side h3{ margin:0; padding:0; border:0; background:none; color:var(--text); text-transform:none; letter-spacing:normal; } #rmbz-vip .pjs-side button{ margin:0; font-family:inherit; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; } #rmbz-vip .pjs-side button:disabled{ cursor:default; } /* ═════════════ L1 · Conversa com a equipa (spec §18.1) ═════════════ */ #rmbz-vip .pjs-chat{ position:relative; height:560px; min-width:0; border-radius:32px; background:var(--surface); color:var(--text); overflow:hidden; display:flex; flex-direction:column; font-family:'Geist',system-ui,sans-serif; } /* Cabeçalho */ #rmbz-vip .pjs-chat-head{ flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:16px 18px 12px; min-width:0; } #rmbz-vip .pjs-chat-av-txt{ font:800 10px/1 'Geist',system-ui,sans-serif; color:var(--on-brand); } #rmbz-vip .pjs-chat-presence{ position:absolute; right:0; bottom:0; width:12px; height:12px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 2.5px var(--surface); transition:background-color calc(300ms*var(--k)) var(--ease-effect); } #rmbz-vip .pjs-chat.is-online .pjs-chat-presence{ background:var(--success); } #rmbz-vip .pjs-chat-heading{ flex:1 1 170px; min-width:0; display:flex; flex-direction:column; gap:1px; } #rmbz-vip .pjs-chat-title{ display:flex; align-items:center; gap:5px; font:800 17px/1.15 'Bricolage Grotesque',system-ui,sans-serif; letter-spacing:-.2px; } #rmbz-vip .pjs-chat-title .ms{ flex:none; font-size:17px; color:var(--info); } #rmbz-vip .pjs-chat-sub{ font:400 12px/1.35 'Geist',system-ui,sans-serif; color:var(--text2); } #rmbz-vip .pjs-chat-unread{ flex:none; margin-left:auto; min-width:22px; height:22px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:100px; background:var(--danger); color:#FFFFFF; font:700 11px/1 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-state{ flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 10px; border-radius:100px; background:var(--elev); color:var(--text2); font:700 11px/1 'Geist',system-ui,sans-serif; white-space:nowrap; } #rmbz-vip .pjs-chat-unread:not([hidden]) + .pjs-chat-state{ margin-left:0; } #rmbz-vip .pjs-chat-state-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--muted); transition:background-color calc(300ms*var(--k)) var(--ease-effect); } /* O22: «Ligado» com o ponto Success a pulsar; «Offline» com o ponto neutro parado. */ #rmbz-vip .pjs-chat.is-online .pjs-chat-state-dot{ background:var(--success); animation:vx-live calc(1s*var(--k)) ease-in-out infinite; } #rmbz-vip .is-offscreen .pjs-chat-state-dot, #rmbz-vip .is-offscreen .pjs-chat-rec-dot{ animation-play-state:paused; } /* Lista */ #rmbz-vip .pjs-chat-list{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 16px 12px; display:flex; flex-direction:column; gap:2px; scrollbar-width:none; } #rmbz-vip .pjs-chat-list::-webkit-scrollbar{ width:0; height:0; } #rmbz-vip .pjs-chat-list:focus-visible{ outline-offset:-2px; border-radius:24px; } #rmbz-vip .pjs-chat-empty{ margin:auto; display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 12px; color:var(--text2); font:400 13px/1.45 'Geist',system-ui,sans-serif; text-align:center; } #rmbz-vip .pjs-chat-empty .ms{ font-size:30px; color:var(--muted); } /* Cada mensagem; agrupamento M3 Expressive (is-cont-prev / is-cont-next) */ #rmbz-vip .pjs-chat-item{ display:flex; flex-direction:column; min-width:0; flex:none; } #rmbz-vip .pjs-chat-item.is-artist{ align-items:flex-end; transform-origin:bottom right; } #rmbz-vip .pjs-chat-item.is-team{ align-items:flex-start; transform-origin:bottom left; } #rmbz-vip .pjs-chat-item.is-day, #rmbz-vip .pjs-chat-item.is-event{ align-items:center; margin-top:10px; } #rmbz-vip .pjs-chat-item.is-artist:not(.is-cont-prev), #rmbz-vip .pjs-chat-item.is-team:not(.is-cont-prev){ margin-top:10px; } #rmbz-vip .pjs-chat-list > .pjs-chat-item:first-child{ margin-top:0; } #rmbz-vip .pjs-chat-item.is-fresh{ animation:vx-msg calc(350ms*var(--k)) var(--spring) both; } #rmbz-vip .pjs-chat-item.is-sending .pjs-chat-bubble{ opacity:.6; } #rmbz-vip .pjs-chat-day{ margin:2px 0 6px; padding:6px 12px; border-radius:100px; background:var(--highest); color:var(--text2); font:600 11.5px/1.2 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-name{ margin:0 0 4px 46px; color:var(--text2); font:600 11.5px/1.2 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-item.is-cont-prev .pjs-chat-name{ display:none; } #rmbz-vip .pjs-chat-line{ display:flex; gap:8px; align-items:flex-end; max-width:88%; min-width:0; } #rmbz-vip .pjs-chat-av{ transition:opacity calc(200ms*var(--k)) var(--ease-effect); } #rmbz-vip .pjs-chat-item.is-cont-next .pjs-chat-av{ opacity:0; } #rmbz-vip .pjs-chat-bubble{ min-width:0; padding:11px 15px; border-radius:20px; font:400 14px/1.42 'Geist',system-ui,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; transition:opacity calc(200ms*var(--k)) var(--ease-effect); } #rmbz-vip .pjs-chat-item.is-team .pjs-chat-bubble{ background:var(--highest); color:var(--text); } #rmbz-vip .pjs-chat-item.is-artist .pjs-chat-bubble{ max-width:80%; background:var(--brand); color:var(--on-brand); font-weight:500; } #rmbz-vip .pjs-chat-item.is-team.is-cont-prev .pjs-chat-bubble{ border-top-left-radius:6px; } #rmbz-vip .pjs-chat-item.is-team.is-cont-next .pjs-chat-bubble{ border-bottom-left-radius:6px; } #rmbz-vip .pjs-chat-item.is-artist.is-cont-prev .pjs-chat-bubble{ border-top-right-radius:6px; } #rmbz-vip .pjs-chat-item.is-artist.is-cont-next .pjs-chat-bubble{ border-bottom-right-radius:6px; } #rmbz-vip .pjs-chat-bubble.is-removed{ font-style:italic; opacity:.75; } #rmbz-vip .pjs-chat-text{ display:block; } #rmbz-vip .pjs-chat-atts{ display:flex; flex-direction:column; gap:8px; white-space:normal; } #rmbz-vip .pjs-chat-text + .pjs-chat-atts{ margin-top:8px; } #rmbz-vip .pjs-chat-edited{ display:block; margin-top:4px; font-size:11px; font-style:italic; opacity:.8; white-space:normal; } /* Hora e recibo: só no último balão do grupo. Texto em --text2 (o --muted do protótipo fica abaixo de 4,5:1 no claro). */ #rmbz-vip .pjs-chat-meta{ display:flex; align-items:center; gap:4px; color:var(--text2); font:500 11px/1.2 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-item.is-artist .pjs-chat-meta{ margin:4px 4px 6px 0; } #rmbz-vip .pjs-chat-item.is-team .pjs-chat-meta{ margin:4px 0 6px 46px; } #rmbz-vip .pjs-chat-item.is-cont-next .pjs-chat-meta{ display:none; } #rmbz-vip .pjs-chat-time:empty{ display:none; } #rmbz-vip .pjs-chat-receipt{ display:inline-flex; align-items:center; gap:2px; } #rmbz-vip .pjs-chat-receipt .ms{ font-size:15px; } #rmbz-vip .pjs-chat-receipt.is-read{ color:var(--info-ink); } /* Apagar até 2 minutos */ #rmbz-vip .pjs-chat-del{ position:relative; display:inline-flex; align-items:center; gap:4px; min-height:30px; margin-top:4px; padding:0 10px 0 8px; border:0; border-radius:100px; background:var(--elev); color:var(--text2); font:600 11.5px/1 'Geist',system-ui,sans-serif; cursor:pointer; transition:background-color calc(200ms*var(--k)) var(--ease-effect), color calc(200ms*var(--k)) var(--ease-effect); } #rmbz-vip .pjs-chat-del::before{ content:''; position:absolute; inset:-7px -2px; } #rmbz-vip .pjs-chat-del .ms{ font-size:16px; } #rmbz-vip .pjs-chat-del:hover{ background:var(--danger-soft); color:var(--danger-ink); } #rmbz-vip .pjs-chat-del:disabled{ opacity:.5; cursor:wait; } /* Eventos do sistema: chip centrado com ícone e cor */ #rmbz-vip .pjs-chat-event{ display:flex; align-items:center; gap:10px; max-width:92%; padding:8px 14px 8px 8px; border-radius:18px; background:var(--elev); } #rmbz-vip .pjs-chat-event-ico{ flex:none; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--tone-soft,var(--info-soft)); color:var(--tone-ink,var(--info-ink)); } #rmbz-vip .pjs-chat-event-ico .ms{ font-size:18px; } #rmbz-vip .pjs-chat-event-copy{ min-width:0; display:flex; flex-direction:column; gap:1px; } #rmbz-vip .pjs-chat-event-title{ color:var(--text); font:700 12.5px/1.3 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-event-detail{ color:var(--text2); font:400 11.5px/1.4 'Geist',system-ui,sans-serif; overflow-wrap:anywhere; } /* Anexos: imagem (abre o visualizador do painel), ficheiro, áudio */ #rmbz-vip .pjs-chat-image{ position:relative; display:block; width:min(240px,100%); padding:0; border:0; border-radius:14px; overflow:hidden; background:var(--elev); color:var(--text2); cursor:zoom-in; text-align:left; text-decoration:none; } #rmbz-vip .pjs-chat-image img{ display:block; width:100%; height:auto; min-height:90px; max-height:220px; object-fit:cover; } #rmbz-vip .pjs-chat-image-zoom{ position:absolute; right:8px; top:8px; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,0,0,.55); color:#FFFFFF; font-size:18px; } #rmbz-vip .pjs-chat-image-cap{ display:flex; align-items:center; gap:6px; min-width:0; padding:8px 10px; color:var(--text2); font:500 11.5px/1.3 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-image-cap .ms{ flex:none; font-size:16px; color:var(--brand-ink); } #rmbz-vip .pjs-chat-image-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #rmbz-vip .pjs-chat-image.is-broken{ cursor:pointer; } #rmbz-vip .pjs-chat-image-broken{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:90px; padding:14px; font:500 12px/1.3 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-image-broken .ms{ font-size:28px; color:var(--muted); } #rmbz-vip .pjs-chat-file{ display:flex; align-items:center; gap:8px; max-width:100%; min-height:44px; padding:8px 12px; border-radius:14px; background:var(--surface); color:var(--text); font:600 12.5px/1.3 'Geist',system-ui,sans-serif; text-decoration:none; } #rmbz-vip .pjs-chat-file > .ms:first-child{ flex:none; font-size:20px; color:var(--brand-ink); } #rmbz-vip .pjs-chat-file > .ms:last-child{ flex:none; font-size:16px; opacity:.75; } #rmbz-vip .pjs-chat-item.is-artist .pjs-chat-file{ background:rgba(32,26,0,.10); color:var(--on-brand); } #rmbz-vip .pjs-chat-item.is-artist .pjs-chat-file > .ms:first-child{ color:var(--on-brand); } #rmbz-vip .pjs-chat-file-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #rmbz-vip .pjs-chat-audio{ display:flex; align-items:center; gap:10px; width:min(260px,100%); min-width:0; } #rmbz-vip .pjs-chat-audio-btn{ flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--brand); color:var(--on-brand); cursor:pointer; transition:transform calc(150ms*var(--k)) var(--spring-fast); } #rmbz-vip .pjs-chat-audio-btn .ms{ font-size:24px; } #rmbz-vip .pjs-chat-audio-btn:active{ transform:scale(.94); } #rmbz-vip .pjs-chat-item.is-artist .pjs-chat-audio-btn{ background:var(--on-brand); color:var(--brand); } #rmbz-vip .pjs-chat-audio-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; } #rmbz-vip .pjs-chat-audio-bar{ display:block; width:100%; height:22px; margin:0; padding:0; background:transparent; accent-color:var(--brand-ink); cursor:pointer; } #rmbz-vip .pjs-chat-item.is-artist .pjs-chat-audio-bar{ accent-color:var(--on-brand); } #rmbz-vip .pjs-chat-audio-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; font:500 11.5px/1.2 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-audio-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #rmbz-vip .pjs-chat-audio-time{ flex:none; font:700 11.5px/1.2 'JetBrains Mono',ui-monospace,monospace; } #rmbz-vip .pjs-chat-audio.is-error .pjs-chat-audio-btn{ opacity:.55; } /* «A escrever» (team_typing): bolacha a rodar a 6 s + três pontos */ #rmbz-vip .pjs-chat-typing{ flex:none; display:flex; gap:8px; align-items:flex-end; margin-top:10px; transform-origin:bottom left; animation:vx-msg calc(350ms*var(--k)) var(--spring) both; } #rmbz-vip .pjs-chat-typing-bubble{ display:flex; align-items:center; padding:15px 16px; border-radius:20px 20px 20px 6px; background:var(--highest); } /* Compositor */ #rmbz-vip .pjs-chat-compose{ flex:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:8px 12px 14px; } #rmbz-vip .pjs-chat-suggest{ display:flex; gap:8px; margin:-4px 0; padding:4px 0; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x pan-y; } #rmbz-vip .pjs-chat-suggest::-webkit-scrollbar{ width:0; height:0; } /* §6C Setas nas sugestões: só aparecem do lado que tem mais (escala 0,6 → 1, spring-fast); margem de 48 px a esbater. */ #rmbz-vip .pjs-chat-sugwrap{ position:relative; min-width:0; } #rmbz-vip .pjs-chat-sugfade{ position:absolute; top:0; bottom:0; width:48px; z-index:1; pointer-events:none; opacity:0; transition:opacity calc(200ms*var(--k,1)) var(--ease-effect,ease); } #rmbz-vip .pjs-chat-sugfade.is-l{ left:0; background:linear-gradient(90deg,var(--surface) 30%,transparent); } #rmbz-vip .pjs-chat-sugfade.is-r{ right:0; background:linear-gradient(270deg,var(--surface) 30%,transparent); } #rmbz-vip .pjs-chat-sugarrow{ -webkit-appearance:none; appearance:none; position:absolute; top:calc(50% - 18px); z-index:2; width:36px; height:36px; margin:0; padding:0; border:0; border-radius:50%; background:var(--surface); color:var(--text); box-shadow:0 2px 6px rgba(29,28,24,.10),0 8px 18px -6px rgba(29,28,24,.28); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transform:scale(.6); transition:opacity calc(200ms*var(--k,1)) var(--ease-effect,ease), transform calc(350ms*var(--k,1)) var(--spring-fast,ease); } #rmbz-vip .pjs-chat-sugarrow.is-l{ left:0; } #rmbz-vip .pjs-chat-sugarrow.is-r{ right:0; } #rmbz-vip .pjs-chat-sugarrow .ms{ font-size:22px; line-height:1; } #rmbz-vip .pjs-chat-sugarrow:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; } #rmbz-vip .pjs-chat-sugwrap.is-more-l .pjs-chat-sugfade.is-l, #rmbz-vip .pjs-chat-sugwrap.is-more-r .pjs-chat-sugfade.is-r{ opacity:1; } #rmbz-vip .pjs-chat-sugwrap.is-more-l .pjs-chat-sugarrow.is-l, #rmbz-vip .pjs-chat-sugwrap.is-more-r .pjs-chat-sugarrow.is-r{ opacity:1; pointer-events:auto; transform:scale(1); } #rmbz-vip .pjs-chat-sugwrap .pjs-chat-sugarrow:active{ transform:scale(.9); } #rmbz-vip[data-theme="oled"] .pjs-chat-sugarrow{ box-shadow:0 0 0 1px var(--border),0 8px 18px -6px rgba(0,0,0,.6); } #rmbz-vip .pjs-chat-chip{ position:relative; flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px 0 10px; border:0; border-radius:12px; background:var(--tone-soft); color:var(--tone-ink); font:600 12.5px/1 'Geist',system-ui,sans-serif; white-space:nowrap; cursor:pointer; transition:transform calc(150ms*var(--k)) var(--spring-fast); } #rmbz-vip .pjs-chat-chip::before{ content:''; position:absolute; inset:-4px 0; } #rmbz-vip .pjs-chat-chip .ms{ font-size:18px; } #rmbz-vip .pjs-chat-chip:active{ transform:scale(.95); } #rmbz-vip .pjs-chat-chip:last-child{ scroll-snap-align:end; } @media (prefers-reduced-motion:reduce){ #rmbz-vip .pjs-chat-suggest{ scroll-behavior:auto; } } #rmbz-vip .pjs-chat-chip:disabled{ opacity:.5; } #rmbz-vip .pjs-chat.is-locked .pjs-chat-suggest, #rmbz-vip .pjs-chat.is-recording .pjs-chat-suggest, #rmbz-vip .pjs-chat.is-locked .pjs-chat-sugwrap, #rmbz-vip .pjs-chat.is-recording .pjs-chat-sugwrap{ display:none; } #rmbz-vip .pjs-chat-upload{ display:flex; align-items:center; gap:10px; min-width:0; padding:6px 6px 6px 12px; border-radius:18px; background:var(--elev); } #rmbz-vip .pjs-chat-upload-icon{ flex:none; font-size:22px; color:var(--brand-ink); } #rmbz-vip .pjs-chat-upload-copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } #rmbz-vip .pjs-chat-upload-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font:600 13px/1.25 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-upload-meta{ color:var(--text2); font:400 11.5px/1.3 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-upload.is-uploading .pjs-chat-upload-icon{ animation:vx-live calc(1s*var(--k)) ease-in-out infinite; } #rmbz-vip .pjs-chat-upload-remove{ flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--text2); cursor:pointer; } #rmbz-vip .pjs-chat-upload-remove:disabled{ opacity:.45; } #rmbz-vip .pjs-chat-row{ display:flex; gap:8px; align-items:center; min-width:0; } #rmbz-vip .pjs-chat-add{ flex:none; width:48px; height:48px; padding:0; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--highest); color:var(--text); cursor:pointer; } #rmbz-vip .pjs-chat-add .ms{ font-size:24px; } #rmbz-vip .pjs-chat-field{ flex:1 1 auto; min-width:0; height:52px; display:flex; align-items:center; gap:2px; padding:0 6px 0 18px; border-radius:100px; background:var(--highest); transition:box-shadow calc(200ms*var(--k)) var(--ease-effect); } #rmbz-vip .pjs-chat-field:focus-within{ box-shadow:0 0 0 2px var(--brand); } #rmbz-vip .pjs-chat-field .pjs-chat-input{ flex:1 1 auto; min-width:0; width:auto; height:100%; margin:0; padding:0; border:0; border-radius:0; outline:0; background:transparent; box-shadow:none; color:var(--text); font:400 14.5px/1.2 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-field .pjs-chat-input:focus, #rmbz-vip .pjs-chat-field .pjs-chat-input:focus-visible{ outline:0; box-shadow:none; } #rmbz-vip .pjs-chat-field .pjs-chat-input::placeholder{ color:var(--text2); opacity:1; } #rmbz-vip .pjs-chat-field .pjs-chat-input:disabled{ cursor:not-allowed; } #rmbz-vip .pjs-chat-img{ position:relative; flex:none; width:40px; height:40px; padding:0; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--text2); cursor:pointer; } #rmbz-vip .pjs-chat-img::before{ content:''; position:absolute; inset:-2px; } #rmbz-vip .pjs-chat-img .ms{ font-size:22px; } #rmbz-vip .pjs-chat-add:disabled, #rmbz-vip .pjs-chat-img:disabled{ opacity:.45; } /* Botão de enviar: círculo (mic ou send desativado) → quadrado Brand com send a −20° (spec §6.8) */ #rmbz-vip .pjs-chat-send{ flex:none; width:52px; height:52px; padding:0; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--highest); color:var(--text); cursor:pointer; transition:border-radius calc(350ms*var(--k)) var(--spring-fast), background-color calc(200ms*var(--k)) var(--ease-effect), color calc(200ms*var(--k)) var(--ease-effect), opacity calc(200ms*var(--k)) var(--ease-effect); } #rmbz-vip .pjs-chat-send .ms{ font-size:24px; transition:transform calc(350ms*var(--k)) var(--spring-fast); } #rmbz-vip .pjs-chat-send.is-ready{ border-radius:16px; background:var(--brand); color:var(--on-brand); } #rmbz-vip .pjs-chat-send.is-ready .ms{ transform:rotate(-20deg); } #rmbz-vip .pjs-chat-send:disabled{ color:var(--muted); } #rmbz-vip .pjs-chat-send.is-ready:disabled{ color:var(--on-brand); opacity:.7; } /* Gravação da nota de voz (O21): a barra toma o lugar do campo */ #rmbz-vip .pjs-chat-rec{ flex:1 1 auto; min-width:0; height:52px; display:flex; align-items:center; gap:10px; padding:0 18px 0 4px; border-radius:100px; background:var(--danger-soft); color:var(--danger-ink); font:600 13px/1 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-rec-cancel{ flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--danger-ink); cursor:pointer; } #rmbz-vip .pjs-chat-rec-cancel .ms{ font-size:22px; } #rmbz-vip .pjs-chat-rec-dot{ flex:none; width:10px; height:10px; border-radius:50%; background:var(--danger); animation:vx-live calc(1s*var(--k)) ease-in-out infinite; } #rmbz-vip .pjs-chat-rec-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #rmbz-vip .pjs-chat-rec-time{ flex:none; margin-left:auto; font:700 13px/1 'JetBrains Mono',ui-monospace,monospace; } #rmbz-vip .pjs-chat.is-recording .pjs-chat-add, #rmbz-vip .pjs-chat.is-recording .pjs-chat-field{ display:none; } #rmbz-vip .pjs-chat-feedback{ display:none; padding:0 6px; color:var(--text2); font:500 12px/1.4 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-chat-feedback.is-shown{ display:block; } #rmbz-vip .pjs-chat-feedback.is-error{ color:var(--danger-ink); } /* ═════════════ L2 · Oliver do videoclipe (spec §18.2) ═════════════ */ #rmbz-vip .pjs-side-oliver{ position:relative; overflow:hidden; display:flex; align-items:center; flex-wrap:wrap; gap:14px; padding:20px; border-radius:32px; background:var(--info-soft); color:var(--text); } #rmbz-vip .pjs-side-oliver-copy{ position:relative; flex:1 1 180px; min-width:0; display:flex; flex-direction:column; gap:2px; } #rmbz-vip .pjs-side-oliver-title{ font:800 18px/1.15 'Bricolage Grotesque',system-ui,sans-serif; } #rmbz-vip .pjs-side-oliver-text{ color:var(--text2); font:400 12.5px/1.45 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-side-oliver-btn{ position:relative; display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 16px 0 12px; border:0; border-radius:100px; background:var(--info); color:#FFFFFF; font:700 13px/1 'Geist',system-ui,sans-serif; white-space:nowrap; cursor:pointer; transition:transform calc(150ms*var(--k)) var(--spring-fast); } #rmbz-vip .pjs-side-oliver-btn .ms{ font-size:19px; } #rmbz-vip .pjs-side-oliver-btn:active{ transform:scale(.96); } /* ═════════════ L3 · Equipa do projeto (spec §18.3) ═════════════ */ #rmbz-vip .pjs-side-team{ display:flex; flex-direction:column; gap:14px; padding:20px; border-radius:32px; background:var(--surface); color:var(--text); } #rmbz-vip .pjs-side-team-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; } #rmbz-vip .pjs-side-sq{ flex:none; width:44px; height:44px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand-ink); } #rmbz-vip .pjs-side-sq .ms{ font-size:23px; } #rmbz-vip .pjs-side-team-copy{ flex:1 1 150px; min-width:0; display:flex; flex-direction:column; gap:1px; } #rmbz-vip .pjs-side-team-title{ font:800 18px/1.1 'Bricolage Grotesque',system-ui,sans-serif; } #rmbz-vip .pjs-side-team-sub{ color:var(--text2); font:400 12px/1.35 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-side-team-count{ flex:none; margin-left:auto; display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 11px 0 8px; border-radius:100px; background:var(--brand-soft); color:var(--brand-ink); font:700 12px/1 'Geist',system-ui,sans-serif; white-space:nowrap; } #rmbz-vip .pjs-side-team-count .ms{ font-size:16px; } #rmbz-vip .pjs-side-team-list{ display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none; } #rmbz-vip .pjs-side-member{ display:flex; align-items:center; gap:12px; margin:0; padding:12px; border-radius:22px; background:var(--elev); min-width:0; } #rmbz-vip .pjs-side-member-ini{ font:800 15px/1 'Bricolage Grotesque',system-ui,sans-serif; } #rmbz-vip .pjs-side-member-copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; } #rmbz-vip .pjs-side-member-name{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font:700 14px/1.25 'Geist',system-ui,sans-serif; overflow-wrap:anywhere; } #rmbz-vip .pjs-side-origin{ display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 8px 0 6px; border-radius:100px; background:var(--info-soft); color:var(--info-ink); font:700 11px/1 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-side-origin .ms{ font-size:14px; } #rmbz-vip .pjs-side-roles{ display:flex; flex-wrap:wrap; gap:5px; } #rmbz-vip .pjs-side-role{ display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:0 9px 0 7px; border-radius:100px; background:var(--surface); color:var(--text); font:600 11.5px/1.2 'Geist',system-ui,sans-serif; } #rmbz-vip .pjs-side-role .ms{ flex:none; font-size:15px; color:var(--brand-ink); } /* ── Telemóvel: 16 px no campo (o iOS não aproxima a página ao escrever) ── */ @media (max-width:900px){ #rmbz-vip .pjs-chat-field .pjs-chat-input{ font-size:16px; } } @media (max-width:380px){ #rmbz-vip .pjs-chat-head{ padding:14px 14px 10px; gap:10px; } #rmbz-vip .pjs-chat-list{ padding:4px 12px 12px; } #rmbz-vip .pjs-chat-compose{ padding:8px 10px 12px; } #rmbz-vip .pjs-chat-field{ padding-left:14px; } } /* [1.5.915] Avatar da equipa nos balões (handoff do site, «Atualização»): a bolacha roda 12 s e as letras respiram; só se vê no último balão do grupo; numa mensagem nova entra com escala 0,6 → 1 (spring-fast). Escondido, não roda. */ @keyframes pjs-av-in{ 0%{ opacity:0; transform:scale(.6); } 100%{ opacity:1; transform:none; } } #rmbz-vip .pjs-chat-av--msg > :not(:first-child){ animation:vx-breathe calc(2.4s*var(--k)) ease-in-out infinite; } #rmbz-vip .pjs-chat-item.is-cont-next .pjs-chat-av--msg > *{ animation:none; } #rmbz-vip .pjs-chat-item.is-fresh .pjs-chat-av--msg{ animation:pjs-av-in calc(400ms*var(--k)) var(--spring-fast) backwards; }