/* Vanta derived components. PRD section 17.6, using only existing
   tokens. Not part of the design system file. */

/* Shell em tela cheia e slots */
.app--full{height:100svh;min-height:520px;border:0}
.side-slot{display:flex;flex-direction:column;flex:1;min-height:0}
.main-slot{display:flex;flex-direction:column;flex:1;min-height:0}
.main-slot[hidden]{display:none}

/* Palco da Chamada: .call-stage, .call-grid, .call-tile, .call-bar, .call-end */
.call-stage{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--bg-panel)}
.call-stage[hidden]{display:none}
.call-grid{display:grid;flex:1;min-height:0;overflow-y:auto;gap:8px;padding:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--side)),1fr));align-content:center}
.call-grid.is-focus{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.call-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.call-strip .call-tile{width:var(--side);flex:none}
.call-tile{position:relative;display:grid;place-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--bg-player);border:1px solid var(--line);color:var(--paper);--mid:var(--inv-60);--line:var(--inv-16);--hover:var(--inv-10);--block:var(--paper);--on-block:var(--ink);--fo:2px;--st-ring:var(--bg-player)}
.call-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.call-tile.is-screen video{object-fit:contain}
.call-tile.is-speaking::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--coral);z-index:2}
.call-label{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px;background:var(--ink);color:var(--paper);z-index:2}
.call-tool{position:absolute;top:4px;right:4px;display:flex;gap:4px;z-index:2}
.call-bar{display:flex;flex:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:8px 16px;border-top:1px solid var(--line)}
.call-end{background:var(--danger);border-color:var(--danger);color:var(--ink)}

/* The stage, before entering and while connecting: the people already in the
   call, the notices of the call and the bar with "Entrar na chamada". */
.call-stage>.notice{margin:12px 12px 0}
.call-bar[hidden],.call-tool[hidden],.call-bar .btn[hidden],.me .rb[hidden],.call-grid>.empty[hidden]{display:none}
.call-grid>.empty{grid-column:1/-1;justify-self:center}
/* The menu of a tile sits on the dark tile or on the video: ink and paper,
   like .call-label, in both themes. */
.call-tool .rb{background:var(--ink);color:var(--paper);border-color:var(--inv-16)}
.call-tile .av--80{z-index:1}
.call-tile.has-video .av--80{display:none}
.call-tile video[hidden]{display:none}
.call-label .i{flex:none}
.call-label span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Shared screens (RF-CAL-14, RF-CAL-15): the tile waits for the first frame
   with the icon, the focus mode gives the watched screen the area of the
   stage and the strip the rest, and the full screen fills the display. */
.call-tool .rb[hidden],.call-label span[hidden]{display:none}
.call-wait{display:grid;place-items:center;color:var(--mid)}
.call-tile.has-video .call-wait{display:none}
.call-grid.is-focus{align-content:stretch}
.call-grid.is-focus>.call-tile{aspect-ratio:auto;min-height:0;height:100%}
.call-tile:fullscreen{aspect-ratio:auto;width:100%;height:100%;border:0}
.call-tile:fullscreen video{object-fit:contain}

/* The stage of a conversation call (section 15.5) shares the main slot with
   the messages, above them, and "Entrar na chamada" sits in a .notice. */
.call-stage--conversation{flex:none;height:min(56svh,520px);border-bottom:1px solid var(--line)}
.call-notice{align-items:center;margin:12px 16px 0;flex:none}
.call-notice[hidden]{display:none}
.call-notice .btn{margin-left:auto}
.chat-call{margin-left:auto}
.chat-call+.chat-call,.chat-call~.chat-toggle{margin-left:0}

/* S23, the ring of a conversation call. */
.ring-b{align-items:center;text-align:center;padding-top:24px}
.ring-t{font:700 15px/1.2 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--text-strong)}
.ring-k{display:flex;align-items:center;gap:6px}
.ring .help[hidden],.ring .err[hidden],.ring .btn[hidden]{display:none}

/* Who is in each voice channel (RF-CAL-03): the .vp under the .ch. */
.vp[hidden]{display:none}
.vp-n{flex:1}
.vp-s{display:flex;gap:4px;color:var(--mid)}

/* Medidor de microfone: .mic-meter */
.mic-meter{--n:24}
.mic-meter.is-hot>i.on{background:var(--danger);border-color:var(--danger)}
.settings-body .err[hidden],.settings-body .call-tile[hidden],.settings-body .btn[hidden]{display:none}
.settings-body .call-tile{max-width:var(--side)}

/* Seletor de cor do Cargo: .color-field e .contrast-preview */
.color-field{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center}
.color-field input[type=color]{width:34px;height:34px;padding:2px;border:1px solid var(--line);cursor:pointer;transition:border-color var(--t-hover)}
.color-field input[type=color]:hover{border-color:var(--text-strong)}
.contrast-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line)}
.contrast-preview>[data-theme]{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;background:var(--bg-panel);color:var(--text-body)}
@media(max-width:619.98px){.contrast-preview{grid-template-columns:minmax(0,1fr)}}

/* Composer de várias linhas: .c-box--multi */
.c-box--multi{height:auto;min-height:48px;padding:6px 8px;align-items:flex-end}
.c-box--multi:has(textarea:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
.c-box--multi textarea{flex:1;min-width:0;max-height:calc(6*1.6em);padding:4px;font-size:14px;line-height:1.6;color:var(--text-strong);resize:none;outline:0}
.c-box--multi textarea::placeholder{color:var(--mid);opacity:1}

/* Indicador de digitação: .typing */
.typing{min-height:18px;padding:0 16px}
@media(max-width:619.98px){.typing{padding:0 8px}}

/* Autenticação: .auth e .auth-card */
.auth{display:grid;place-items:center;min-height:100svh;padding:16px;background:var(--bg-app)}
.auth-card{width:min(460px,calc(100vw - 16px));border:1px solid var(--line);background:var(--bg-raised)}

/* Avatar e tile com imagem */
.av img.art{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.tile img{display:block;width:100%;height:100%;object-fit:cover}

/* Linhas de lista com ações: .friend-row e .reorder-row */
.friend-row,.reorder-row{display:flex;align-items:center;gap:8px;min-height:var(--row-mem);padding:4px 12px;border-bottom:1px solid var(--line);transition:background var(--t-hover),padding-left var(--t-hover)}
.friend-row:hover,.reorder-row:hover{background:var(--hover)}
.friend-row>div:first-of-type,.reorder-row>div:first-of-type{flex:1;min-width:0}
.i--flip{transform:rotate(180deg)}

/* Página de configurações: .settings-page */
.settings-page{flex:1;min-height:0;overflow-y:auto;padding:26px 16px;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.settings-body{display:flex;flex-direction:column;gap:18px;max-width:640px}
.settings-body--wide{max-width:none}

/* Required by the PRD text but absent from section 17.6. */

/* Right panel as a drawer below 1180px (RF-UIX-01, step 2).
   Base: the .side drawer and .scrim rules of the design system. */
@media(max-width:1179.98px){
.app.is-aside .mem{display:block;position:absolute;top:var(--tb);right:0;bottom:0;width:var(--mem);max-width:calc(100% - var(--rail));z-index:20;border-left:1px solid var(--line);animation:overlay-in var(--t-overlay) var(--ease-reveal)}
.app.is-aside .scrim{display:block;position:absolute;inset:var(--tb) 0 0 var(--rail);z-index:10;background:var(--scrim);animation:fade-in var(--t-overlay) var(--ease-reveal)}
}

/* Error code of S25: Display 50, and Display 26 below 620px. */
.auth-code{display:block;font-size:50px;line-height:.96}
@media(max-width:619.98px){.auth-code{font-size:26px;line-height:1}}

/* Painel do usuário: o bloco de avatar e nome abre o menu da conta.
   Base: .me-top, com a largura e o alinhamento de um botão de menu. */
button.me-top{width:100%;text-align:left}

/* Reconectando: the dot of .live stands still (RF-RTM-02, step 2). */
.live.is-down .dot{animation:none}

/* Status menu of the user panel: the .st dot beside the label, in the flow
   of the .menu-i instead of on the corner of an avatar. Relative, not static:
   the bar of .st--dnd is an absolute ::after that must stay inside the dot. */
.menu-i .st{position:relative;right:auto;bottom:auto;flex:none;--st-ring:var(--bg-raised)}

/* Group name in the header of a conversation: a button that keeps the look
   of .chat-t and opens the rename form (RF-CNV-06). */
.chat-rename{display:block;max-width:100%;overflow:hidden;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:nowrap;text-overflow:ellipsis}
.chat-rename:hover{color:var(--coral)}
.pop-form{display:flex;flex-direction:column;gap:12px;width:min(280px,calc(100vw - 16px));padding:12px}

/* Participants of a group. Outside .chat-a, which is hidden below 620px and
   would leave a phone without "Adicionar" and "Sair do grupo". */
.chat-toggle{flex:none;margin-left:auto}

/* Skeleton on top of the list while older messages load (RF-MSG-04). */
.msgs-loading{padding:16px}

/* Message under edit: the composer box inside the message. */
.msg-edit{display:flex;flex-direction:column;gap:4px;margin:4px 0}

/* Participants of a group (S05): the row carries its own action. */
.mem-row{display:flex;align-items:center;gap:4px}
.mem-row .mem-r{flex:1;min-width:0}
.mem-actions{flex-wrap:wrap;margin-bottom:12px;padding:0 4px}

/* Friends of the group modals (S06). */
.opt-group{display:flex;flex-direction:column;gap:8px;min-width:0;padding:0;border:0}
.opt-group legend{padding:0;margin-bottom:8px}
.opt-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding:4px 4px 4px 2px;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}
.opt-list li[hidden]{display:none}

/* Composer closed by a block or by a deleted account (S05). */
.c-send:disabled,.c-send:disabled:hover{background:var(--block);color:var(--on-block);opacity:.5;cursor:not-allowed}
.c-box--multi:has(textarea:disabled){border-color:var(--line)}
.c-box--multi textarea:disabled{cursor:not-allowed}

/* Active item of the server settings: aria-current="page" (S14). */
.ch[aria-current=page]{background:var(--block);color:var(--on-block);padding-left:10px}
.ch[aria-current=page]::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--coral)}

/* Server menu: its longest item stays on one line. A disabled item is
   explained below it (RF-SRV-10). */
.menu--wide{width:260px}
.notice[hidden]{display:none}

/* Member panel of a server (RF-SRV-14): the tag stays beside the name. */
.mem-r .tag{flex:none}
.tag:has(.i){gap:4px}
.tag .i-12{width:10px;height:10px}

/* Tables of the server settings (S17 to S19). */
.tbl{width:100%}
.tbl th a{color:inherit}
.tbl th a:hover{color:var(--text-strong)}
.tbl th[aria-sort=ascending] a::after{content:' ↑'}
.tbl th[aria-sort=descending] a::after{content:' ↓'}
.tbl-person{flex-wrap:nowrap;white-space:nowrap}
.tbl code{white-space:nowrap}
@media(max-width:619.98px){.tbl-person .mi{display:none}}
.tbl-actions{justify-content:flex-end;flex-wrap:nowrap}
.invite-form{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:12px}
@media(max-width:619.98px){.invite-form{grid-template-columns:minmax(0,1fr)}}

/* Administrator switch of a row (S20): its name is the aria-label on phones. */
.friend-row .sw{flex:none}
@media(max-width:619.98px){.admin-label{display:none}}

/* Channel header (S07): search lives in .chat-a, which hides below 620px;
   the members toggle stays after it, at the end of the header. */
.chat-a+.chat-toggle{margin-left:0}

/* Image attachment (RF-MSG-10): a real image inside .att. The width and
   height attributes keep the space before it loads.
   Base: .att of the design system, made for an svg. */
.att a{display:block}
.att img{display:block;max-width:100%;max-height:320px;width:auto;height:auto;background:var(--ink)}

/* Preview above the composer, with the .bar of the upload.
   Base: .c-reply, the other strip that sits on top of .c-box. */
.composer{position:relative}
.c-att{display:flex;align-items:flex-end;gap:8px;padding:6px 8px;border:1px solid var(--line);border-bottom:0}
.c-att[hidden]{display:none}
.c-att .att{margin-top:0;max-width:200px}
.c-att .att img{max-height:120px}
.c-att .bar{flex:1;align-self:center}
.c-att .bar[hidden]{display:none}

/* Mention suggestions of the composer (RF-MSG-09). Base: .pop-list. */
.c-ment{position:absolute;left:16px;bottom:calc(100% - 4px);z-index:30;max-height:288px;overflow-y:auto}
.c-ment[hidden]{display:none}
.c-ment .pop-i[aria-selected=true]{background:var(--hover);padding-left:var(--shift)}
@media(max-width:619.98px){.c-ment{left:8px}}

/* Roles (S16). The color of a role reaches the page only through CSSOM:
   data-var-role becomes --role (css-vars.js) and data-name-color becomes
   the color of a name (name-colors.js). The swatch never stands alone: the
   name of the role is always beside it.
   Base: .tag and .chip of the design system, and the .contrast-preview
   columns of section 17.6. */
.role-sw{display:inline-block;width:10px;height:10px;flex:none;background:var(--role,var(--text-strong));box-shadow:inset 0 0 0 1px var(--line)}
.tag .role-sw{width:8px;height:8px;margin-right:6px}
.role-meta{display:block}
.role-title{font-size:17px;line-height:1.2}
.role-tags{flex-wrap:wrap;gap:4px}
.role-chips{display:flex;flex-direction:column;gap:8px}
.role-chips ul{gap:4px}
.contrast-status{display:flex;flex-direction:column;gap:8px}
.contrast-status .mi{color:var(--text-body)}
.role-members{display:flex;flex-direction:column}
.role-members .opt{flex:1;min-width:0}
.role-members .opt>span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Inbox and notifications (S21, RF-NTF-03). Base: .pop-list, .pop-h, .pop-i
   and .pop-e of the design system, and .tile .badge for the counter on the
   corner of i-inbox. An unread item has its title in .pop-i b; a read one
   keeps the title in the body color, and "Não lida" lives in .vh. */
.tb .ib .badge{position:absolute;right:-4px;top:-2px}
.notif-list{display:flex;flex-direction:column}
.notif{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.notif:last-child{border-bottom:0}
.notif .pop-i{flex:1;min-width:0;border-bottom:0}
.notif .btn{flex:none;margin-right:12px}
a.pop-i:hover{background:var(--hover);padding-left:16px}
.pop-t{display:block;color:var(--text-body)}
.pop-m{display:flex;align-items:center;gap:6px;margin-top:2px}
.pop-f{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--line)}
.pop-list .notif-list{max-height:min(420px,calc(100svh - 160px));overflow-y:auto}
.notif-acts{flex-wrap:nowrap}
.notif-box{box-shadow:none}
.notif-box .pop-h{flex-wrap:wrap;row-gap:8px}
.notif-box .pop-h .mi{white-space:nowrap}
/* Below 620px "Marcar como lida" goes under the text it marks. */
@media(max-width:619.98px){
.notif-box .notif{flex-wrap:wrap;gap:0}
.notif-box .notif .pop-i{flex-basis:100%}
.notif-box .notif .btn{margin:-4px 12px 10px}
}

/* Activities of the Home (S04, RF-DSH-02). Base: .mem, .mem-g, .pop-i and
   the type of .side-t for the title of the panel. */
.act-h{padding:4px 4px 12px;font:700 14px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--text-strong)}
.act-list .pop-i{padding-left:4px;padding-right:4px}
.act-list a.pop-i:hover{padding-left:var(--shift)}

/* Mute and members side by side at the end of a conversation header. */
.chat-toggle+.chat-toggle{margin-left:0}