/* Compatibility fallbacks for browsers without newer viewport and spacing functions. */
.app{height:100vh}
.composer{padding-bottom:10px}
@supports (height:100dvh){.app{height:100dvh;height:var(--app-vh,100dvh)}}
@supports (padding-bottom:env(safe-area-inset-bottom)){.composer{padding-bottom:max(10px,env(safe-area-inset-bottom))}}
@media(max-width:700px){.app{display:block!important}.sidebar,.users{height:100vh}.composer{padding-bottom:7px}}

dialog.modal:not([open]){display:none}


/* --- Enhanced Room Rows & Dark Mode Active States --- */
.district-room-row{border-color:#c7ddec}
/* Nick registado nao ve publicidade. O temporario ve tudo como sempre. */
html.sem-publicidade #chatReminder,
html.sem-publicidade #ad-banner-top,
html.sem-publicidade #ad-banner-toggle,
html.sem-publicidade #ad-corner,
html.sem-publicidade #ad-inter-bar,
html.sem-publicidade #publicityModal{display:none!important}
/* Banner no fim da lista de nicks. Fica fora do `#userList`, que e'
   reescrito a cada renderizacao da lista. */
/* quem rola e o painel, para o banner ficar depois do ultimo nick e nao
   colado ao fundo. O id a' frente e' para ganhar a's regras .users e
   .user-list, que sao de classe. */
#usersPanel{overflow-y:auto;overflow-x:hidden}
#usersPanel #userList{overflow:visible;flex:0 0 auto}
#usersPanel .users-head{position:sticky;top:0;z-index:2;background:#fff}
html.dark #usersPanel .users-head{background:#221b2e}
.ad-nicklist{flex:0 0 auto;padding:4px 8px 12px;background:transparent;box-sizing:border-box}
/* Linha arco-iris a separar o ultimo nick do anuncio. Mesmo gradiente da
   borda dos modais e da barra do intersticial. */
.ad-nicklist::before{content:'';display:block;height:3px;border-radius:999px;margin:6px 0 11px;background:linear-gradient(90deg,#ff5f6d,#ffc371,#ffe94f,#47e08a,#3aa7ff,#a36bff)}
html.dark .ad-nicklist{background:transparent}
.ad-nicklist-fit{width:100%;overflow:hidden;display:flex;justify-content:center}
.ad-nicklist-box{width:300px;height:250px;flex:0 0 auto;transform-origin:top center}
/* Nick registado nao ve publicidade — inclusive esta. */
html.sem-publicidade .ad-nicklist{display:none!important}
/* Quem paga o nick nao ve' o pedido de donativo nem o convite para
   anunciar. O `#sidebar` a' frente e' preciso para ganhar a'
   `#sidebar .action-icon-btn{display:grid!important}`, que vem depois. */
html.sem-publicidade #donationButton,
html.sem-publicidade #adsButton,
html.sem-publicidade #sidebar #donationButton,
html.sem-publicidade #sidebar #adsButton{display:none!important}
/* Sem isto o botao aparecia sempre: o display:flex do .action-icon-btn
   ganha ao display:none que o navegador da' ao [hidden]. */
.action-icon-btn[hidden]{display:none!important}
/* O rotulo cai em ecras estreitos; fica so' o desenho. */
.grupo-topo-btn{display:inline-flex;align-items:center;gap:7px;width:auto;padding:0 12px;font-weight:700;font-size:12.5px}
.grupo-topo-btn[hidden]{display:none!important}
.grupo-topo-btn svg{width:17px;height:17px;flex:0 0 auto}
@media(max-width:760px){.grupo-topo-btn span{display:none}.grupo-topo-btn{padding:0 9px}}
/* Os dois botoes por cima do mosaico proprio: cortar a camara e o micro. */
/* Numa chamada de grupo os controlos vivem no mosaico. Os do cabecalho sao
   os da Sala da Equipa e ficavam a dizer a mesma coisa duas vezes. Esconde-se
   por CSS porque o proprio motor volta a mostra-los a cada sincronizacao. */
/* Numa chamada de grupo os mosaicos ficam em grelha, nao em tira. As
   colunas nascem sozinhas conforme a largura; passando da altura maxima,
   rola na vertical em vez de empurrar a conversa para fora do ecra. */
html.grupo-em-camara .team-cam-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,200px));
  justify-content:center;
  gap:8px;
  overflow-x:hidden;
  overflow-y:auto;
  max-height:min(46vh,330px);
  max-height:min(46dvh,330px);
  align-content:start;
}
html.grupo-em-camara .team-cam-grid::-webkit-scrollbar{width:6px;height:6px}
/* O flex:0 0 132px da tira nao serve numa grelha. */
html.grupo-em-camara .team-cam-tile{flex:none;width:100%}
@media(max-width:900px){
  html.grupo-em-camara .team-cam-grid{grid-template-columns:repeat(auto-fit,minmax(130px,180px));max-height:min(40vh,260px);max-height:min(40dvh,260px)}
}
@media(max-width:520px){
  html.grupo-em-camara .team-cam-grid{grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:6px;max-height:34vh;max-height:34dvh}
  html.grupo-em-camara .grupo-cam-b{width:24px;height:24px}
  html.grupo-em-camara .grupo-cam-b svg{width:13px;height:13px}
}
html.grupo-em-camara #teamCamMuteButton,
html.grupo-em-camara #teamCamVideoButton{display:none!important}
.grupo-cam-botoes{position:absolute;top:6px;right:6px;display:flex;gap:5px;z-index:3}
.grupo-cam-b{width:28px;height:28px;padding:0;border:0;border-radius:8px;background:rgba(12,8,18,.62);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.grupo-cam-b:hover{background:rgba(12,8,18,.88)}
.grupo-cam-b svg{width:15px;height:15px;display:block}
.grupo-cam-b.cortado{background:#d9495d}
/* Com a camara cortada continua a ver-se o mosaico, mas apagado. */
.team-cam-tile.grupo-cam-sem-video video{opacity:.12}
.grupo-room-row{border-color:#cfe3d2}
.grupo-room-row.active{background:#eef8f0;border-color:#4f9d69;color:#2b6b45}
.grupo-ico{width:16px;height:16px;flex:0 0 auto;color:#4f9d69}
.grupo-conta{margin-left:auto;min-width:20px;height:19px;padding:0 6px;border-radius:99px;background:#eef1f5;color:#6b7280;font-size:11px;font-weight:800;display:grid;place-items:center}
.grupo-room-row .conv-close{margin-left:6px;flex:0 0 auto}
/* A moldura e o cabecalho vem do .modal.header-modal da casa. */
.grupo-voltar{margin-bottom:12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:700;padding:7px 12px;cursor:pointer}
.grupo-voltar:hover{background:#faf7fd}
.grupo-bloco{padding:12px;margin-bottom:11px;border:1px solid var(--line);border-radius:12px}
.grupo-linha-lista{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grupo-nome{display:block;font-size:14px}
.grupo-rot{display:block;margin:0 0 6px;font-size:11.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.grupo-bloco input[type=text],.grupo-bloco input:not([type]){width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:10px 11px;font:inherit;font-size:13px;background:var(--surface);color:var(--ink)}
.grupo-escolha{display:flex;flex-wrap:wrap;gap:7px;max-height:170px;overflow:auto;padding:2px}
.grupo-pessoa{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;cursor:pointer}
.grupo-pessoa:has(input:checked){background:#efe7f8;border-color:var(--purple);color:var(--purple);font-weight:700}
.grupo-btn{border:0;border-radius:9px;padding:9px 14px;background:var(--purple);color:#fff;font-weight:800;font-size:12.5px;cursor:pointer}
.grupo-btn-largo{width:100%;margin-top:11px}
.grupo-membros{display:flex;flex-wrap:wrap;gap:6px}
.grupo-membro{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:99px;background:#f2eef7;font-size:12px;color:#4a4155}
.grupo-membro i{font-style:normal;color:var(--muted);font-size:11px}
.grupo-tirar{border:0;background:transparent;color:#b63b4b;font-size:14px;line-height:1;cursor:pointer;padding:0 2px}
.grupo-apagar{width:100%;border:1px solid #f0c7cd;border-radius:10px;background:#fff5f6;color:#b63b4b;font-weight:700;font-size:12.5px;padding:10px;cursor:pointer}
.grupo-nota{margin:8px 0 0;color:var(--muted);font-size:11.5px;line-height:1.5}
html.dark .grupo-membro{background:#2a2238;color:#d9d2e4}
html.dark .grupo-pessoa:has(input:checked){background:#3a2c50;color:#d9c2f5}
html.dark .grupo-apagar{background:#3a2029;border-color:#6b3540;color:#f0a8b2}
.thematic-room-row{border-color:#d8c3ea}
.team-room-row,.world-room-row{border-color:#d8c7e6}.world-room-row .room-icon{display:none}.room-abbr{display:none}
.room-row.active, .thematic-room-row.active, .district-room-row.active, .team-room-row.active{background:#f6effb;color:var(--purple);border-color:#a855f7}

html.dark .room-row {
  background: var(--surface, #211c2c) !important;
  color: var(--ink, #ece6f3) !important;
  border: 1px solid var(--line, #382e46) !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
html.dark .room-row:hover:not(.active):not([aria-current="true"]) {
  background: #2a2238 !important;
  border-color: #553e70 !important;
  color: #fff !important;
}
html.dark .room-row.active,
html.dark .room-row[aria-current="true"],
html.dark .thematic-room-row.active,
html.dark .district-room-row.active,
html.dark .team-room-row.active {
  background: linear-gradient(135deg, #3c2657, #4b2d70) !important;
  color: #ffffff !important;
  border-color: #a855f7 !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.32) !important;
}
html.dark .room-row.active .room-label,
html.dark .thematic-room-row.active .room-label,
html.dark .district-room-row.active .room-label,
html.dark .team-room-row.active .room-label {
  color: #ffffff !important;
  font-weight: 750 !important;
}
html.dark .room-row.active .online-dot,
html.dark .thematic-room-row.active .online-dot,
html.dark .district-room-row.active .online-dot,
html.dark .team-room-row.active .online-dot {
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e88 !important;
}
html.dark .cam-room-pill {
  background: #231b2e !important;
  color: #d6b8f6 !important;
  border: 1px solid #4a3861 !important;
  box-shadow: none !important;
}
html.dark .cam-room-pill:hover {
  background: #312442 !important;
  color: #ffffff !important;
  border-color: #6d4b8f !important;
}
html.dark .cam-room-pill.active,
html.dark .cam-room-pill[aria-current="true"] {
  background: linear-gradient(135deg, #3c2657, #4b2d70) !important;
  color: #ffffff !important;
  border-color: #a855f7 !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.32) !important;
}
html.dark .conv-close {
  color: #a99bbd !important;
}
html.dark .conv-close:hover {
  color: #ffffff !important;
}


/* Selected rooms in modal (Zones & Thematics) */
.district-picker .room-row {
  border: 1px solid var(--line, #e8e0f0);
  background: var(--surface, #fff);
  color: var(--ink);
  transition: all 0.15s ease;
}
.district-picker .room-row.selected,
.district-picker .room-row.active {
  border: 2px solid var(--purple, #7048a6) !important;
  background: transparent !important;
  color: var(--ink) !important;
}

html.dark .district-picker .room-row {
  background: #211c2c !important;
  border-color: #382e46 !important;
  color: #ece6f3 !important;
}
html.dark .district-picker .room-row:hover:not(.selected) {
  background: #2a2238 !important;
  border-color: #553e70 !important;
}
html.dark .district-picker .room-row.selected,
html.dark .district-picker .room-row.active {
  border: 2px solid #ffffff !important;
  background: #211c2c !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25) !important;
}
html.dark .district-picker .room-row.selected .room-label,
html.dark .district-picker .room-row.active .room-label {
  color: #ffffff !important;
  font-weight: 750 !important;
}

/* Modal tabs in dark mode */
html.dark .rooms-modal-tabs {
  background: #271f33 !important;
  border-color: #3d2f50 !important;
}
html.dark .rooms-tab-btn {
  color: #a99bbd !important;
  background: transparent !important;
}
html.dark .rooms-tab-btn.active {
  background: #3c2d52 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Dark mode */
html.dark{--bg:#15111c;--surface:#211c2c;--ink:#ece6f3;--muted:#a99bbd;--line:#382e46;--shadow:0 18px 55px #00000060}
html.dark dialog{background:var(--surface);color:var(--ink)}
html.dark .field,html.dark .soft-button,html.dark .chat-head,html.dark .icon-button,html.dark .users,html.dark .user-row,html.dark .login-card,html.dark .composer,html.dark .composer-area,html.dark .action-icon-btn,html.dark .header-modal,html.dark .contact-modal,html.dark .info-modal,html.dark .media-sheet,html.dark .top-room-button,html.dark .country-select-btn,html.dark .country-dropdown,html.dark .emoji-picker,html.dark .legal-accordion-item,html.dark .sidebar-actions,html.dark .room-row,html.dark .nick-lock-btn{background:var(--surface);color:var(--ink);border-color:var(--line)}
html.dark .poll-card-option.voted{background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff}
html.dark .poll-results-nicks span{background:var(--surface);color:var(--purple)}
html.dark .sidebar,html.dark .panel{background:var(--surface)}
html.dark #ad-banner-top{background:var(--surface)!important;border-color:var(--line)!important;color:var(--ink)}
html.dark .icon-button,html.dark .action-icon-btn,html.dark .top-room-button,html.dark .nick-lock-btn{background:#332c43}
html.dark .message:not(.mine) .bubble{background:#322b42;color:var(--ink);border-color:var(--line)}
html.dark .user-row.active-private{background:#3a2f4a;color:#d8b8f5}
html.dark .user-row:hover,html.dark .conv-row:hover,html.dark .nav-button:hover,html.dark .nav-button.active,html.dark .action-icon-btn:hover,html.dark .legal-accordion-item[open] summary,html.dark .top-room-button.active,html.dark .room-row:hover,html.dark .room-row.active{background:#2a2335;border-color:var(--line)}
html.dark .me-card{background:linear-gradient(135deg,#2a2335,#33222c)}
html.dark .login-shell{background:radial-gradient(circle at 15% 20%,#2a1f38,transparent 30%),radial-gradient(circle at 88% 75%,#34202b,transparent 27%),var(--bg)}
html.dark .chat{background:linear-gradient(180deg,#18131f,var(--bg))}
html.dark .system{background:#2c2438;color:#cdb8e6}
html.dark .quote-bubble{background:#2c2438}
html.dark .mine .quote-bubble{background:#ffffff22}
html.dark .notice{background:#3a2330;color:#ff9fb2}
html.dark .users-summary{background:linear-gradient(135deg,#211c2c,#2a2030);border-color:var(--line)}
html.dark #ad-banner-toggle{background:#2a2335;border-color:var(--line);color:var(--ink)}
html.dark .gmedia-audio{background:linear-gradient(135deg,#2a2335,#211c2c)}
html.dark .field{background:#3a3150}
html.dark .field:focus{box-shadow:0 0 0 3px #7048a630}
html.dark .modal::backdrop{background:#000000c0}
html.dark .media-opt{background:#241f30;border-color:var(--line);color:#cdb8e6}
html.dark .media-opt:hover{background:#2d2638;border-color:var(--purple);color:#fff}
html.dark .media-opt svg{stroke:currentColor}
html.dark .btn-secondary{background:#241f30;color:#cbb6ea}
html.dark .btn-danger{background:#3a1f22;color:#ff8a8a}
html.dark .info-gold:hover{background:#3a3320}
html.dark{scrollbar-color:#4a3f5c transparent;scrollbar-width:thin}
html.dark ::-webkit-scrollbar{width:10px;height:10px}
html.dark ::-webkit-scrollbar-track{background:transparent}
html.dark ::-webkit-scrollbar-thumb{background:#4a3f5c;border-radius:99px;border:2px solid transparent;background-clip:content-box}
html.dark ::-webkit-scrollbar-thumb:hover{background:#5c4f72;background-clip:content-box}
html.dark ::-webkit-scrollbar-corner{background:transparent}
html.dark .message:not(.mine) .bubble-head b{color:#c9aef0}
html.dark .message:not(.mine) .bubble p .mention{color:#c9aef0}
html.dark .message:not(.mine) .bubble-head time{color:#9b8fae}
.theme-icon-sun{display:none}
.theme-icon-moon{display:inline-flex}
html.dark .theme-icon-moon{display:none}
html.dark .theme-icon-sun{display:inline-flex}
.vc-intro-box{background:#f7f3fb;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13px;color:var(--muted);line-height:1.5}
.vc-intro-box b{color:var(--ink)}
.vc-peer-name{font-weight:850;color:var(--purple)}
.vc-countdown{font-size:28px;font-weight:900;text-align:center;margin:14px 0;color:var(--ink);font-variant-numeric:tabular-nums}
.vc-countdown.vc-urgent{color:var(--danger)}
.vc-status-text{text-align:center;color:var(--muted);font-size:13px;margin-bottom:4px}
.vc-warning{font-size:12px;color:#a83247;background:#fff0f2;border-radius:10px;padding:9px 11px;margin-top:6px}
.vc-floating{position:fixed;right:18px;bottom:18px;width:320px;background:#1c1030;border:1px solid #ffffff20;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px #3c0a5455;z-index:60;display:flex;flex-direction:column;transition:width .2s,height .2s}
.vc-floating.vc-minimized{width:170px}
.vc-floating.vc-minimized .vc-floating-head{cursor:pointer;padding:7px 8px;position:relative;min-height:40px}
.vc-floating.vc-minimized #vcFloatingPeerName,.vc-floating.vc-minimized #vcCallCountdown,.vc-floating.vc-minimized #vcMuteBtn,.vc-floating.vc-minimized #vcFlipBtn{display:none!important}
.vc-floating.vc-minimized .vc-floating-controls{margin-left:auto;gap:6px}
.vc-floating.vc-minimized #vcMinimizeBtn{display:grid!important;background:#fff;color:var(--purple);box-shadow:0 8px 22px #00000035}
.vc-floating.vc-minimized #vcEndBtn{display:grid!important}
.vc-floating.vc-minimized .vc-video-wrap{cursor:pointer}
.vc-floating-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:linear-gradient(135deg,var(--purple),var(--purple2));color:#fff;font-size:12px;font-weight:800;cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}
.vc-floating-head .vc-countdown{font-size:13px;margin:0;color:#fff}
.vc-floating-controls{display:flex;gap:4px}
.vc-floating-btn{width:28px;height:28px;border:0;border-radius:8px;background:#ffffff25;color:#fff;display:grid;place-items:center;padding:0}
.vc-floating-btn:hover{background:#ffffff40}
.vc-floating-btn.vc-end{background:var(--danger)}
.vc-floating-btn.vc-end:hover{background:#c23a4c}
.vc-floating-btn.vc-muted{background:var(--danger)}
.vc-floating-btn.vc-sound-required{background:#fff;color:var(--purple);box-shadow:0 0 0 3px #ffffff30}
.vc-floating-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.vc-floating-btn .vc-mic-off{display:none}
.vc-floating-btn.vc-muted .vc-mic-on{display:none}
.vc-floating-btn.vc-muted .vc-mic-off{display:block}
.vc-video-wrap{position:relative;background:#000;aspect-ratio:4/3}
.vc-minimized .vc-video-wrap{aspect-ratio:16/10}
.vc-video-remote{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.vc-video-local{position:absolute;right:8px;bottom:8px;width:78px;height:104px;border-radius:10px;object-fit:cover;border:2px solid var(--purple2);background:#111}
.vc-minimized .vc-video-local{width:46px;height:62px;right:6px;bottom:6px}
.vc-floating-notice{position:absolute;left:8px;top:8px;right:8px;background:#000000aa;color:#fff;font-size:11px;padding:6px 8px;border-radius:8px}
.vc-floating.vc-dragging{transition:none;user-select:none}
.notif-section-sublabel{font-size:12px;font-weight:700;color:var(--muted);margin:2px 0 8px}
.cfg-tabs{display:none!important}.cfg-tab{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);font-weight:800;font-size:13.5px;text-align:left;cursor:pointer}.cfg-tab:after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:.15s;opacity:.6;flex:0 0 auto}.cfg-tab:hover{color:var(--purple)}.cfg-tab.active{color:var(--purple);background:#f8f3fb;border-radius:13px 13px 0 0}.cfg-tab.active:after{transform:rotate(225deg)}.cfg-tab-panel{display:none}.cfg-tab-panel.active{display:block;border:1px solid var(--line);border-top:0;border-radius:0 0 13px 13px;padding:6px 14px 14px}html.dark .cfg-tab{background:var(--surface)}html.dark .cfg-tab.active{background:#2a2335}#adsForm label{display:block;margin-bottom:12px}#adsForm label>span{display:block;font-weight:800;font-size:12.5px;margin-bottom:6px;color:var(--ink)}#adsForm textarea.field{resize:vertical;min-height:96px;font:inherit}.ads-captcha{margin:4px 0 12px;display:flex;justify-content:center}.ads-captcha:empty{display:none}.soon-modal .modal-content{padding-top:22px;padding-bottom:26px}.soon-text{margin:0;text-align:center;font-size:15.5px;font-weight:800;color:var(--muted)}.soon-support{margin:14px 0 0;text-align:center;font-size:13.5px;line-height:1.65;color:var(--muted);white-space:pre-line}
.sound-silent-btn{width:44px;height:44px;padding:0;font-size:17px;display:grid;place-items:center;margin:8px auto 0}
.notif-icon-toggle{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);display:grid;place-items:center;padding:0;flex:0 0 auto}
.notif-icon-toggle:hover{border-color:var(--purple);color:var(--purple)}
.notif-icon-toggle svg{width:17px;height:17px}
.notif-icon-toggle .vc-sound-off{display:none}
.notif-icon-toggle.vc-muted .vc-sound-on{display:none}
.notif-icon-toggle.vc-muted .vc-sound-off{display:block}
.notif-icon-toggle.vc-muted{border-color:var(--purple);color:var(--purple)}
.online-dot.away{background:#eab308!important}
.online-dot.bot{background:#e35062!important}
@media (max-width:640px){.vc-floating{right:10px;left:10px;bottom:10px;width:auto}.vc-floating.vc-minimized{width:160px;left:auto}.vc-floating.vc-minimized .vc-floating-head{min-height:42px}}