:root{
  --bg:#f0f2f5;--surface:#fff;--rail-bg:#f0f2f5;--rail-border:#e9edef;
  --sidebar-bg:#fff;--sidebar-top:#1a2b4a;--sidebar-hover:#f5f6f6;
  --sidebar-active:#f0f2f5;--sidebar-border:#e9edef;
  --chat-bg:#efeae2;--chat-top:#fff;
  --sent:#d9fdd3;--recv:#fff;
  --brand:#00c2e0;--brand-d:#0097b2;
  --t1:#111b21;--t2:#54656f;--t3:#8696a0;--border:#e9edef;
  --nav-active:#1a2b4a;--font:'Inter',system-ui,sans-serif;
}
html.dark{
  --bg:#0b141a;--surface:#1f2c34;--rail-bg:#111b21;--rail-border:#2a3942;
  --sidebar-bg:#111b21;--sidebar-top:#202c33;--sidebar-hover:#2a3942;
  --sidebar-active:#2a3942;--sidebar-border:#2a3942;
  --chat-bg:#0d1418;--chat-top:#202c33;
  --sent:#005c4b;--recv:#1f2c34;--brand:#00c2e0;
  --t1:#e9edef;--t2:#8696a0;--t3:#667781;--border:#2a3942;--nav-active:#00c2e0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:var(--font);color:var(--t1)}
body{background:var(--bg)}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea{font-family:inherit;outline:none;border:none}
img{display:block;object-fit:cover}
.screen{display:none;height:100vh}.screen.active{display:flex}

/* LOADING */
#loading{position:fixed;inset:0;z-index:999;background:#0d1f3c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
#loading img{height:48px}#loading p{color:rgba(255,255,255,.45);font-size:.875rem}#loading.hide{display:none}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(0,194,224,.2);border-top-color:var(--brand);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* LOGIN */
#screen-login,#screen-change-pass{align-items:stretch;justify-content:flex-start;background:#081227;overflow:hidden}
.login-card{background:#fff;border-radius:16px;padding:48px 44px;width:420px;box-shadow:0 24px 64px rgba(0,0,0,.35)}
.login-logo{text-align:center;margin-bottom:32px}.login-logo img{height:44px;margin:0 auto}
.login-title{font-size:1.2rem;font-weight:700;color:#1a2b4a;text-align:center;margin-bottom:4px}
.login-sub{font-size:.85rem;color:var(--t2);text-align:center;margin-bottom:28px}
.field{margin-bottom:16px}
/* Cinza claro: o fundo do login é escuro, e o #374151 anterior praticamente
   desaparecia contra ele. */
.field label{display:block;font-size:.82rem;font-weight:600;color:#cbd5e1;
  margin-bottom:6px;letter-spacing:.2px}
.field input{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid #e5e7eb;font-size:.95rem;transition:border-color .2s}
.field input:focus{border-color:var(--brand)}
.btn-primary{width:100%;padding:14px;border-radius:50px;background:var(--brand);color:#0d1f3c;font-weight:700;font-size:1rem;transition:.2s}
.btn-primary:hover{background:var(--brand-d);transform:translateY(-1px)}.btn-primary:disabled{opacity:.6;pointer-events:none}
.login-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;border-radius:8px;padding:10px 14px;font-size:.85rem;margin-top:14px;display:none}
.login-error.show{display:block}

/* COMPANY */
#screen-company{align-items:center;justify-content:center;background:linear-gradient(135deg,#0d1f3c 0%,#1a2b4a 60%,#0d2a50 100%)}
.co-card{background:#fff;border-radius:16px;padding:40px 36px;width:440px;box-shadow:0 24px 64px rgba(0,0,0,.35)}
.co-card h2{font-size:1.1rem;font-weight:700;color:#1a2b4a;margin-bottom:4px}
.co-card p{font-size:.85rem;color:var(--t2);margin-bottom:22px}
.co-list{display:flex;flex-direction:column;gap:10px}
.co-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;border:1.5px solid #e5e7eb;cursor:pointer;transition:.2s}
.co-item:hover{border-color:var(--brand);background:#f0fdff}
.co-av{width:44px;height:44px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#1a2b4a,var(--brand));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.co-name{font-weight:600;font-size:.95rem}.co-sector{font-size:.78rem;color:var(--t2)}

/* APP */
#screen-app{height:100vh;overflow:hidden}
.app-inner{display:flex;flex:1;min-height:0;width:100%}
#screen-app.active{flex-direction:column}
#screen-app > .ext-topo{width:100%;flex-shrink:0}

/* NAV RAIL */
.nav-rail{width:58px;background:var(--rail-bg);display:flex;flex-direction:column;align-items:center;padding:10px 0;border-right:1px solid var(--rail-border);flex-shrink:0}
.nav-logo{width:36px;height:36px;margin-bottom:14px;flex-shrink:0}.nav-logo img{width:100%;height:100%;border-radius:8px;object-fit:contain}
.nav-sep{height:1px;background:var(--border);width:36px;margin:4px 0}
.nav-items{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1}
.nav-item{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--t3);cursor:pointer;transition:.15s;position:relative;border:none;background:none}
.nav-item:hover{background:var(--sidebar-hover);color:var(--t2)}
.nav-item.active{color:var(--nav-active);background:rgba(26,43,74,.08)}
html.dark .nav-item.active{color:var(--brand);background:rgba(0,194,224,.1)}
.nav-item svg{width:23px;height:23px;stroke:currentColor;fill:none}
.nav-item span{display:none}
.nav-item .msr{display:inline-block;font-size:23px;line-height:1}
.nav-badge.people{background:#2b7fff;gap:1px;padding:0 4px 0 5px}
.nav-badge.people .msr{font-size:11px;line-height:1;display:inline-block}
.nav-badge{position:absolute;top:2px;right:2px;background:#25d366;color:#fff;border-radius:50px;font-size:.6rem;font-weight:800;min-width:16px;height:16px;padding:0 4px;display:none;align-items:center;justify-content:center;border:2px solid var(--rail-bg)}
.nav-badge.show{display:flex}
.nav-bottom{display:flex;flex-direction:column;align-items:center;gap:4px;padding-bottom:4px}
.dark-toggle{width:44px;height:44px;border-radius:12px;margin:2px 0;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:.15s;border:none;background:none;cursor:pointer}
.dark-toggle:hover{background:var(--sidebar-hover);color:var(--t2)}
.dark-toggle svg{width:20px;height:20px}
.nav-user-av span{font-size:.85rem}
#vc-bar-av span{font-size:.6rem}
#profile-av span{font-size:1.6rem}
.nav-user-av{width:38px;height:38px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--brand),#1a6b99);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;transition:.2s;flex-shrink:0}
.nav-user-av:hover{transform:scale(1.08);box-shadow:0 2px 10px rgba(0,0,0,.2)}
.nav-user-av img{width:100%;height:100%;border-radius:50%}

/* SIDEBAR */
/* O painel lateral cresceu de 340 para 400.
   Com 340, cada rótulo do painel de administração quebrava em três
   linhas e os botões dos canais escapavam pela borda direita. Sessenta
   pixels resolvem os dois, e cabem folgados numa tela de 1280. */
.side-col{width:400px;min-width:320px;max-width:34vw;flex-shrink:0;display:flex;flex-direction:column;min-height:0;
  background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border)}
.sidebar{width:100%;min-width:0;flex:1;min-height:0;background:var(--sidebar-bg);display:flex;flex-direction:column;
  border-right:none;position:relative}
.s-top{background:var(--sidebar-bg);padding:12px 16px 10px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:60px;border-bottom:1px solid var(--sidebar-border)}
.s-top-id{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.s-top-company{font-size:.7rem;font-weight:700;color:var(--brand-d);text-transform:uppercase;letter-spacing:.7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
html.dark .s-top-company{color:var(--brand)}
.s-top-title{font-size:1.3rem;font-weight:700;color:var(--t1);letter-spacing:-.3px;white-space:nowrap}
.s-acts{display:flex;gap:4px;align-items:center}
.icon-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.15s;background:none;border:none;cursor:pointer}
.icon-btn:hover{background:var(--sidebar-hover);color:var(--t1)}.icon-btn svg{width:20px;height:20px}
.s-search{padding:6px 12px 8px;background:var(--sidebar-bg);border-bottom:none;flex-shrink:0}
.search-wrap{background:var(--bg);border-radius:8px;display:flex;align-items:center;gap:10px;padding:8px 12px}
.search-wrap svg{width:16px;height:16px;color:var(--t3);flex-shrink:0}
.search-wrap input{background:transparent;color:var(--t1);font-size:.875rem;flex:1}
.search-wrap input::placeholder{color:var(--t3)}
.tabs{display:flex;gap:6px;background:var(--sidebar-bg);padding:4px 10px 10px;border-bottom:1px solid var(--sidebar-border);flex-shrink:0;overflow-x:auto}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:5px 12px;border-radius:50px;font-size:.78rem;font-weight:500;color:var(--t2);white-space:nowrap;border:1.5px solid var(--border);background:var(--sidebar-bg);transition:.15s;flex-shrink:0;cursor:pointer}
.tab:hover{background:var(--sidebar-hover)}.tab.active{background:#e7f8e8;border-color:#25d366;color:#1a6b3c;font-weight:600}
.chat-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--sidebar-bg)}
.chat-list::-webkit-scrollbar{width:4px}.chat-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ct-name-row{display:flex;align-items:baseline;gap:8px;min-width:0}
.ct-name-row .ct-name{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-sector{flex:0 1 auto;min-width:0;font-size:.75rem;color:var(--t3);font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-sector:empty{display:none}
.ch-item{display:flex;align-items:center;gap:13px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--sidebar-border);transition:background .1s}
.ch-item:hover{background:var(--sidebar-hover)}.ch-item.active{background:var(--sidebar-active)}
.ch-item.has-unread .ch-name{font-weight:600;color:var(--t1)}.ch-item.has-unread .ch-time{color:#25d366;font-weight:600}
.ch-av{position:relative}
.ch-av.online{overflow:visible}
.ch-av.online > img{border-radius:50%}
.ch-av.online::after{content:'';position:absolute;right:0;bottom:0;width:14px;height:14px;
  border-radius:50%;background:#25d366;border:2.5px solid var(--bg);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);z-index:2}
html.dark .ch-av.online::after{border-color:var(--sidebar)}
.ch-item.active .ch-av.online::after{border-color:var(--sidebar-hover)}
.ch-av{width:49px;height:49px;border-radius:50%;flex-shrink:0;overflow:hidden;background:#dfe5e7;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1rem}
.ch-av img{width:100%;height:100%;border-radius:50%}
.ch-meta{flex:1;min-width:0}
.ch-row1{display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.ch-name{font-size:.9375rem;font-weight:400;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* setor em linha propria: o nome fica inteiro e o setor tambem */
.ch-name{flex:1 1 auto;min-width:0}
.ch-sector{font-size:.7rem;color:var(--t3);font-style:italic;line-height:1.25;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-check{display:inline-flex;align-items:center;color:#8696a0;margin-right:4px;vertical-align:-1px}
.ch-check svg{width:15px;height:10px}
.ch-check.read{color:#53bdeb}
.ch-time{font-size:.72rem;color:var(--t3);flex-shrink:0}
.ch-prev{font-size:.8125rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.unread-badge{background:#25d366;color:#fff;border-radius:50px;font-size:.72rem;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.list-empty{padding:40px 16px;text-align:center;color:var(--t3);font-size:.875rem}

/* CHAT AREA */
.chat-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg);border-left:1px solid var(--border)}
.chat-empty img{height:72px;opacity:.15;filter:grayscale(1)}
.chat-empty h3{font-size:1.4rem;font-weight:300;color:var(--t2)}
.chat-empty p{font-size:.875rem;color:var(--t3);text-align:center}

/* Nas telas de configuração, a boas-vindas vira só o logotipo.
   Ela é um convite para escolher uma conversa — em Configurações não há
   conversa a escolher, e o texto compete com o que a pessoa está lendo. */
body[data-view="settings"] .chat-empty h3,
body[data-view="settings"] .chat-empty p{ display:none }
body[data-view="settings"] .chat-empty img{ height:52px; opacity:.08 }

/* Chat topbar */
.ct-bar{background:var(--chat-top);padding:8px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;min-height:56px;border-bottom:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.ct-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#dfe5e7;display:flex;align-items:center;justify-content:center;color:var(--t2);font-weight:600;font-size:.9rem;cursor:pointer}
.ct-av img{width:100%;height:100%;border-radius:50%}
.ct-info{flex:1}.ct-name{font-size:.9375rem;font-weight:500;color:var(--t1)}.ct-status{font-size:.76rem;color:#25d366;margin-top:1px}
.ct-acts{display:flex;align-items:center;gap:2px}
.ct-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.15s;cursor:pointer;border:none;background:none}
.ct-icon:hover{background:var(--sidebar-hover);color:var(--t1)}.ct-icon svg{width:21px;height:21px}
.ct-dropdown-wrap{position:relative}
.ct-dropdown{position:absolute;top:44px;right:0;background:var(--surface);border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,.2);min-width:220px;z-index:100;display:none;flex-direction:column;animation:ddIn .12s ease}
.ct-dropdown.open{display:flex}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd-item{display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;color:var(--t1);font-size:.875rem;transition:background .1s}
.dd-item:hover{background:var(--sidebar-hover)}.dd-item svg{width:18px;height:18px;color:var(--t2);flex-shrink:0}
.dd-sep{height:1px;background:var(--border);margin:4px 0}

/* Messages */
.msgs{flex:1;overflow-y:auto;padding:10px 7%;display:flex;flex-direction:column;gap:1px;background-color:var(--chat-bg)}
/* Fundo padrão do chat: padrão vetorial próprio, embutido como data-URI
   (sem arquivo extra, sem requisição, e nítido em qualquer densidade de tela) */
.msgs{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22rgba(11,20,26,0.055)%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M18%2026h34a6%206%200%20016%206v18a6%206%200%2001-6%206H32l-9%208v-8h-5a6%206%200%2001-6-6V32a6%206%200%20016-6z%22/%3E%3Ccircle%20cx=%22104%22%20cy=%2234%22%20r=%2211%22/%3E%3Cpath%20d=%22M96%2052a8%208%200%200116%200%22/%3E%3Cpath%20d=%22M150%2022l6%2012%2013%202-9%209%202%2013-12-6-12%206%202-13-9-9%2013-2z%22/%3E%3Crect%20x=%22196%22%20y=%2220%22%20width=%2230%22%20height=%2234%22%20rx=%224%22/%3E%3Cpath%20d=%22M203%2030h16M203%2038h16M203%2046h10%22/%3E%3Cpath%20d=%22M22%2096c0-7%206-13%2013-13s13%206%2013%2013-13%2020-13%2020-13-13-13-20z%22/%3E%3Ccircle%20cx=%2235%22%20cy=%2296%22%20r=%224%22/%3E%3Crect%20x=%2278%22%20y=%2286%22%20width=%2236%22%20height=%2226%22%20rx=%224%22/%3E%3Cpath%20d=%22M78%2092l18%2012%2018-12%22/%3E%3Cpath%20d=%22M146%2088h22a5%205%200%20015%205v14a5%205%200%2001-5%205h-6l-5%206-5-6h-6a5%205%200%2001-5-5V93a5%205%200%20015-5z%22/%3E%3Cpath%20d=%22M196%20110V88m0%200l-7%207m7-7l7%207%22/%3E%3Cpath%20d=%22M186%20118h20%22/%3E%3Ccircle%20cx=%2234%22%20cy=%22164%22%20r=%2213%22/%3E%3Cpath%20d=%22M34%20156v9l6%204%22/%3E%3Cpath%20d=%22M80%20176v-24l10%208%2010-14%2012%2030z%22/%3E%3Cpath%20d=%22M78%20178h46%22/%3E%3Cpath%20d=%22M150%20152h26v20h-9l-4%206-4-6h-9z%22/%3E%3Cpath%20d=%22M156%20160h14%22/%3E%3Cpath%20d=%22M198%20150a10%2010%200%2000-10%2010c0%207%2010%2016%2010%2016s10-9%2010-16a10%2010%200%2000-10-10z%22/%3E%3Crect%20x=%2220%22%20y=%22206%22%20width=%2234%22%20height=%2222%22%20rx=%224%22/%3E%3Cpath%20d=%22M28%20214h18M28%20220h12%22/%3E%3Cpath%20d=%22M96%20204l8%2016-8%2016-8-16z%22/%3E%3Cpath%20d=%22M148%20210h20a4%204%200%20014%204v12a4%204%200%2001-4%204h-20a4%204%200%2001-4-4v-12a4%204%200%20014-4z%22/%3E%3Cpath%20d=%22M152%20218h12%22/%3E%3Ccircle%20cx=%22200%22%20cy=%22218%22%20r=%2210%22/%3E%3Cpath%20d=%22M195%20218h10M200%20213v10%22/%3E%3Ccircle%20cx=%2262%22%20cy=%2260%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22130%22%20cy=%2270%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22182%22%20cy=%2266%22%20r=%222.4%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22130%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22132%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22222%22%20cy=%22130%22%20r=%222.4%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22196%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22192%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22222%22%20cy=%22196%22%20r=%222.4%22/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;background-size:240px 240px}
html.dark .msgs{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22rgba(255,255,255,0.045)%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M18%2026h34a6%206%200%20016%206v18a6%206%200%2001-6%206H32l-9%208v-8h-5a6%206%200%2001-6-6V32a6%206%200%20016-6z%22/%3E%3Ccircle%20cx=%22104%22%20cy=%2234%22%20r=%2211%22/%3E%3Cpath%20d=%22M96%2052a8%208%200%200116%200%22/%3E%3Cpath%20d=%22M150%2022l6%2012%2013%202-9%209%202%2013-12-6-12%206%202-13-9-9%2013-2z%22/%3E%3Crect%20x=%22196%22%20y=%2220%22%20width=%2230%22%20height=%2234%22%20rx=%224%22/%3E%3Cpath%20d=%22M203%2030h16M203%2038h16M203%2046h10%22/%3E%3Cpath%20d=%22M22%2096c0-7%206-13%2013-13s13%206%2013%2013-13%2020-13%2020-13-13-13-20z%22/%3E%3Ccircle%20cx=%2235%22%20cy=%2296%22%20r=%224%22/%3E%3Crect%20x=%2278%22%20y=%2286%22%20width=%2236%22%20height=%2226%22%20rx=%224%22/%3E%3Cpath%20d=%22M78%2092l18%2012%2018-12%22/%3E%3Cpath%20d=%22M146%2088h22a5%205%200%20015%205v14a5%205%200%2001-5%205h-6l-5%206-5-6h-6a5%205%200%2001-5-5V93a5%205%200%20015-5z%22/%3E%3Cpath%20d=%22M196%20110V88m0%200l-7%207m7-7l7%207%22/%3E%3Cpath%20d=%22M186%20118h20%22/%3E%3Ccircle%20cx=%2234%22%20cy=%22164%22%20r=%2213%22/%3E%3Cpath%20d=%22M34%20156v9l6%204%22/%3E%3Cpath%20d=%22M80%20176v-24l10%208%2010-14%2012%2030z%22/%3E%3Cpath%20d=%22M78%20178h46%22/%3E%3Cpath%20d=%22M150%20152h26v20h-9l-4%206-4-6h-9z%22/%3E%3Cpath%20d=%22M156%20160h14%22/%3E%3Cpath%20d=%22M198%20150a10%2010%200%2000-10%2010c0%207%2010%2016%2010%2016s10-9%2010-16a10%2010%200%2000-10-10z%22/%3E%3Crect%20x=%2220%22%20y=%22206%22%20width=%2234%22%20height=%2222%22%20rx=%224%22/%3E%3Cpath%20d=%22M28%20214h18M28%20220h12%22/%3E%3Cpath%20d=%22M96%20204l8%2016-8%2016-8-16z%22/%3E%3Cpath%20d=%22M148%20210h20a4%204%200%20014%204v12a4%204%200%2001-4%204h-20a4%204%200%2001-4-4v-12a4%204%200%20014-4z%22/%3E%3Cpath%20d=%22M152%20218h12%22/%3E%3Ccircle%20cx=%22200%22%20cy=%22218%22%20r=%2210%22/%3E%3Cpath%20d=%22M195%20218h10M200%20213v10%22/%3E%3Ccircle%20cx=%2262%22%20cy=%2260%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22130%22%20cy=%2270%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22182%22%20cy=%2266%22%20r=%222.4%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22130%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22132%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22222%22%20cy=%22130%22%20r=%222.4%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22196%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22192%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22222%22%20cy=%22196%22%20r=%222.4%22/%3E%3C/g%3E%3C/svg%3E")}
.msgs.custom-bg{background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:local}
/* Seleção de plano de fundo */
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px 2px 12px}
.bg-opt{aspect-ratio:3/4;border-radius:10px;border:2px solid transparent;cursor:pointer;overflow:hidden;
  position:relative;background-size:cover;background-position:center;transition:.15s}
.bg-opt:hover{transform:translateY(-2px)}
.bg-opt.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,194,224,.2)}
.bg-opt-lbl{position:absolute;left:0;right:0;bottom:0;font-size:.65rem;text-align:center;padding:3px 2px;
  background:rgba(0,0,0,.55);color:#fff}
.msgs::-webkit-scrollbar{width:5px}.msgs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.13);border-radius:3px}
.date-div{text-align:center;margin:8px 0}
.date-div span{background:rgba(255,255,255,.85);color:#54656f;font-size:.72rem;font-weight:500;padding:4px 10px;border-radius:6px;box-shadow:0 1px 1px rgba(0,0,0,.1)}
html.dark .date-div span{background:rgba(32,44,51,.9);color:var(--t2)}
.msg-w{display:flex;max-width:65%;margin-bottom:2px}.msg-w.sent{margin-left:auto}.msg-w.recv{margin-right:auto}
.bubble{padding:6px 9px 4px;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.13);word-break:break-word;max-width:100%;position:relative}
.sent .bubble{background:var(--sent);border-top-right-radius:0}.recv .bubble{background:var(--recv);border-top-left-radius:0}
:root{--msg-font:15px}
.m-link{color:var(--brand-d);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
html.dark .m-link{color:var(--brand)}
.msg-w.sent .m-link{color:#0b6b45}
html.dark .msg-w.sent .m-link{color:#25d366}
.m-link:hover{opacity:.8}
.m-text{font-size:var(--msg-font);line-height:1.45;color:var(--t1);padding-right:50px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.m-quote-txt,.m-author,.m-deleted{font-size:calc(var(--msg-font) - 1px)}
.m-quote-txt{white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mv-tr-txt{white-space:pre-wrap}
.vc-chat-txt{white-space:pre-wrap}
.m-time,.mv-time{font-size:calc(var(--msg-font) - 4px)}
/* Ajuste do tamanho da fonte */
.fs-preview{background:var(--chat-bg);border-radius:12px;padding:14px;margin-bottom:16px;
  display:flex;flex-direction:column;gap:6px}
.fs-bolha{align-self:flex-start;background:var(--recv);border-radius:8px;padding:7px 10px 5px;
  box-shadow:0 1px 1px rgba(0,0,0,.13);max-width:85%}
.fs-bolha.eu{align-self:flex-end;background:var(--sent)}
.fs-txt{font-size:var(--msg-font);line-height:1.45;color:var(--t1)}
.fs-hora{font-size:calc(var(--msg-font) - 4px);color:var(--t3);text-align:right}
.fs-escala{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.fs-escala input[type=range]{flex:1;accent-color:var(--brand)}
.fs-num{font-size:1.1rem;font-weight:700;color:var(--brand-d);min-width:52px;text-align:center}
html.dark .fs-num{color:var(--brand)}
.fs-aa{font-weight:700;color:var(--t3)}
.m-img{max-width:280px;border-radius:6px;margin-bottom:3px;cursor:zoom-in;transition:filter .15s}
.m-img:hover{filter:brightness(.94)}
/* Visualizador */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;z-index:4000;
  align-items:center;justify-content:center;flex-direction:column}
.lb.show{display:flex}
.lb-img{max-width:92vw;max-height:82vh;object-fit:contain;transition:transform .18s ease;cursor:grab;user-select:none}
.lb-img.dragging{cursor:grabbing;transition:none}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;
  padding:14px 18px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.lb-title{flex:1;color:#fff;font-size:.85rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-btn{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.12);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lb-btn:hover{background:rgba(255,255,255,.25)}
.lb-zoom{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.5);padding:6px 10px;border-radius:50px;backdrop-filter:blur(6px)}
.lb-zoom span{color:#fff;font-size:.8rem;min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.m-video{max-width:280px;border-radius:6px;display:block;margin-bottom:3px}
.m-audio audio{height:34px;max-width:240px;display:block;margin-bottom:2px}
.m-doc{display:flex;align-items:center;gap:12px;padding:4px 2px 6px;min-width:200px;max-width:280px}
.m-doc-icon{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:rgba(0,194,224,.12)}
.m-doc-info{flex:1;min-width:0}.m-doc-name{font-size:.85rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-doc-dl{color:var(--brand-d);text-decoration:none;font-size:.78rem;font-weight:600}.m-doc-dl:hover{text-decoration:underline}
.m-collab{display:flex;align-items:center;gap:12px;padding:6px 2px 8px;min-width:220px}
.m-collab-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--brand),#1a6b99);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem}
.m-collab-av img{width:100%;height:100%;border-radius:50%}
.m-collab-name{font-size:.9rem;font-weight:600;color:var(--t1)}.m-collab-sector{font-size:.75rem;color:var(--t2)}
.m-collab-btn{display:inline-block;margin-top:8px;padding:5px 14px;border-radius:50px;background:var(--brand);color:#0d1f3c;font-size:.78rem;font-weight:700;cursor:pointer;border:none;transition:.15s}
.m-collab-btn:hover{background:var(--brand-d);color:#fff}
.m-foot{display:inline-flex;align-items:center;gap:3px;float:right;margin-left:6px;margin-top:2px;margin-bottom:-1px}
.m-time{font-size:.68rem;color:#8696a0;white-space:nowrap}
.m-check{display:inline-flex;align-items:center;color:#8696a0;line-height:0}
.m-check svg{width:16px;height:11px}
.m-check.read{color:#53bdeb}

/* Input */
.input-area{background:var(--bg);padding:8px 14px 12px;display:block;flex-shrink:0}
/* Composer: cartao unico que agrupa o preview de resposta + a linha de digitacao */
.composer{background:var(--surface);border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);position:relative}
.composer-row{display:flex;align-items:flex-end;gap:6px;padding:5px 8px}
/* Preview da mensagem respondida (padrao WhatsApp) */
/* Edição de mensagem */
/* Menções */
/* Faixas do topo: versão nova e aviso de navegador */
.aviso-interno{position:fixed;top:16px;right:16px;z-index:4600;background:var(--surface);
  border-radius:14px;padding:12px 14px;display:flex;align-items:flex-start;gap:12px;
  max-width:340px;cursor:pointer;box-shadow:0 10px 34px rgba(0,0,0,.26);
  border-left:3px solid var(--brand);animation:aiEntra .22s ease-out}
@keyframes aiEntra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.aviso-interno .ai-txt{flex:1;min-width:0}
.aviso-interno b{display:block;font-size:.88rem;color:var(--t1);margin-bottom:2px}
.aviso-interno span{font-size:.8rem;color:var(--t2);line-height:1.4;display:block;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.aviso-interno .ai-x{background:none;border:none;color:var(--t3);cursor:pointer;font-size:.9rem;
  padding:0 2px;flex-shrink:0}
.faixa-versao{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:4500;
  background:var(--surface);border-radius:50px;padding:10px 12px 10px 18px;display:flex;
  align-items:center;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,.24);font-size:.86rem;
  color:var(--t1);max-width:min(94vw,660px);animation:faixaEntra .25s ease-out}
@keyframes faixaEntra{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
.faixa-versao .msr{font-size:20px;color:var(--brand-d);flex-shrink:0}
.faixa-versao button{background:var(--brand);border:none;border-radius:50px;padding:8px 16px;
  font-size:.82rem;font-weight:700;color:#0d1f3c;cursor:pointer;font-family:inherit;flex-shrink:0}
.faixa-versao button.depois{background:none;color:var(--t3);font-weight:600}
.faixa-versao.browser .msr{color:#f59e0b}
.menc-box{display:none;position:absolute;bottom:100%;left:12px;right:12px;max-width:340px;
  background:var(--surface);border-radius:12px;box-shadow:0 -6px 30px rgba(0,0,0,.22);
  padding:5px;z-index:60;margin-bottom:6px}
.menc-box.show{display:block}
.menc-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer}
.menc-item:hover,.menc-item.on{background:var(--sidebar-hover)}
.menc-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff}
.menc-txt b{display:block;font-size:.86rem;color:var(--t1);font-weight:600}
.menc-txt u{text-decoration:none;color:var(--brand-d);font-weight:800}
html.dark .menc-txt u{color:var(--brand)}
.menc-box{max-height:270px;overflow-y:auto}
.menc-txt span{font-size:.72rem;color:var(--t3)}
.menc-todos{width:30px;height:30px;border-radius:50%;background:#f59e0b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}
.menc-tag{color:var(--brand-d);font-weight:600}
html.dark .menc-tag{color:var(--brand)}
.menc-tag.eu{background:rgba(0,194,224,.18);border-radius:4px;padding:0 3px}
.menc-tag.todos{background:rgba(245,158,11,.2);color:#b45309}
html.dark .menc-tag.todos{color:#fbbf24}
.menc-tag.solta{color:var(--t2);font-weight:500}
.edit-bar{display:none;align-items:center;gap:10px;margin:8px 8px 0;padding:8px 12px;border-radius:10px;
  background:rgba(245,158,11,.12);border-left:4px solid #f59e0b}
.edit-bar.show{display:flex}
.edit-bar>.msr{font-size:18px;color:#b45309;flex-shrink:0}
.edit-txt{flex:1;min-width:0;font-size:.8rem;line-height:1.3}
.edit-txt b{display:block;color:var(--t1);font-size:.78rem}
.edit-txt span{color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.edit-x{background:none;border:none;color:var(--t3);cursor:pointer;display:flex;padding:2px}
.edit-x:hover{color:var(--t1)}
.edit-x .msr{font-size:18px}
/* Carta */
.carta{cursor:pointer;min-width:200px;max-width:280px}
.carta-selo{background:linear-gradient(150deg,#f6e7c9,#e9d3a6);border-radius:10px;padding:18px 16px;
  text-align:center;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);transition:transform .3s,opacity .3s}
.carta-icone{font-size:1.9rem;line-height:1}
.carta-quem{font-size:.82rem;font-weight:700;color:#7a5a22;margin-top:6px}
.carta-dica{font-size:.68rem;color:#9c7b3e;margin-top:2px}
.carta-corpo{display:none;font-size:var(--msg-font);line-height:1.45;color:var(--t1);
  white-space:pre-wrap;overflow-wrap:anywhere;padding:4px 2px}
.carta.aberta .carta-selo{display:none}
.carta.aberta .carta-corpo{display:block;animation:cartaAbre .34s ease-out}
.carta.aberta{cursor:default}
@keyframes cartaAbre{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.carta-voando{position:fixed;font-size:2rem;z-index:4000;pointer-events:none;
  transform:translate(-50%,-50%);transition:transform .9s cubic-bezier(.22,.8,.3,1),opacity .9s}
.input-area.modo-carta .composer{box-shadow:0 0 0 2px #e0a458 inset;border-radius:26px}
.bubble.de-integracao{border-left:3px solid var(--brand);background:var(--surface)}
.bubble.de-integracao::before{content:'🔌 integração';display:block;font-size:.62rem;
  font-weight:700;color:var(--brand-d);margin-bottom:3px;letter-spacing:.3px}
html.dark .bubble.de-integracao::before{color:var(--brand)}
.chat-area.arrastando::after,#active-chat.arrastando::after{content:'Solte para enviar';
  position:absolute;inset:12px;border:2px dashed var(--brand);border-radius:16px;
  background:rgba(0,194,224,.08);display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;color:var(--brand-d);z-index:40;pointer-events:none}
#active-chat{position:relative}
.m-edit{font-size:.62rem;color:#8696a0;font-style:italic;margin-right:4px}
.reply-prev{display:none;align-items:stretch;gap:0;margin:8px 8px 0;border-radius:10px;overflow:hidden;background:var(--bg);animation:replyIn .16s ease-out}
html.dark .reply-prev{background:rgba(255,255,255,.06)}
.reply-prev-bar{width:4px;flex-shrink:0;background:var(--brand)}
.reply-prev-body{flex:1;min-width:0;padding:8px 12px;cursor:pointer}
.reply-prev-from{font-size:.78rem;font-weight:700;color:var(--brand);margin-bottom:2px;line-height:1.3}
.reply-prev-text{font-size:.85rem;color:var(--t2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-prev-close{width:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--t2);cursor:pointer;transition:color .15s}
.reply-prev-close:hover{color:var(--t1)}
.reply-prev-close .msr{font-size:22px}
@keyframes replyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.reply-prev{animation:none}}
.attach-wrap{position:relative;flex-shrink:0}
.attach-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.15s;background:none;border:none;cursor:pointer}
.attach-btn:hover{background:rgba(0,0,0,.06)}.attach-btn svg{width:26px;height:26px}
.attach-menu{position:absolute;bottom:54px;left:0;background:var(--surface);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.18);padding:5px 0;min-width:236px;max-height:min(70vh,520px);overflow-y:auto;z-index:50;display:none;flex-direction:column;animation:menuIn .15s ease}
.attach-menu.open{display:flex}
@keyframes menuIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.am-item{display:flex;align-items:center;gap:11px;padding:7px 14px;cursor:pointer;transition:background .1s;font-size:.84rem;color:var(--t1);font-weight:500}
.am-item:hover{background:var(--sidebar-hover)}
.am-icon{width:29px;height:29px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem}.am-icon svg{width:15px;height:15px;color:#fff}
.am-carta{background:#e0a458}
.am-agenda{background:#1668F0}
.am-agmsg{background:#0EA47A}
/* Mensagens agendadas */
.ag-lista{max-height:190px;overflow-y:auto;margin-top:8px}
.ag-item{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-top:1px solid var(--border)}
.ag-quando{text-align:center;flex-shrink:0;min-width:44px}
.ag-quando b{display:block;font-size:.78rem;color:var(--t1)}
.ag-quando span{font-size:.7rem;color:var(--t3)}
.ag-corpo{flex:1;min-width:0}
.ag-dest{font-size:.78rem;color:var(--t2);font-weight:600}
.ag-txt{font-size:.79rem;color:var(--t3);overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.ag-prio{font-size:.62rem;font-weight:700;border-radius:50px;padding:1px 7px}
.ag-prio.importante{background:rgba(245,158,11,.16);color:#b45309}
.ag-prio.urgente{background:rgba(226,76,107,.16);color:#c8412f}
.ag-x{background:none;border:none;color:var(--t3);cursor:pointer;font-size:.78rem;padding:2px 4px}
.ag-x:hover{color:#e24c6b}
/* Tela das mensagens agendadas */
.agendadas-lista{max-height:min(52vh,420px);overflow-y:auto;padding:0 14px}
.agd-item{display:flex;gap:12px;padding:12px 8px;border-bottom:1px solid var(--border)}
.agd-item:last-child{border-bottom:none}
.agd-item.atrasada{background:rgba(245,158,11,.07);border-radius:10px}
.agd-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;background:var(--bg);color:var(--t3);
  font-weight:700;font-size:.78rem}
.agd-corpo{flex:1;min-width:0}
.agd-topo{display:flex;align-items:center;gap:7px}
.agd-topo b{font-size:.88rem;color:var(--t1)}
.agd-quando{display:flex;align-items:center;gap:4px;font-size:.76rem;color:var(--brand-d);
  font-weight:600;margin-top:1px}
.agd-quando .msr{font-size:14px;color:#b45309}
.agd-item.atrasada .agd-quando{color:#b45309}
html.dark .agd-quando{color:var(--brand)}
.agd-txt{font-size:.82rem;color:var(--t2);line-height:1.4;margin-top:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.agd-pe{font-size:.68rem;color:var(--t3);margin-top:4px}
.set-editar{background:none;border:none;color:var(--t3);cursor:pointer;padding:2px 4px;line-height:1}
.set-editar:hover{color:var(--brand-d)}
.set-editar .msr{font-size:17px}
.hr-simples{display:flex;flex-direction:column;gap:18px;max-width:520px;margin-bottom:6px}
.hr-bloco label{display:block;font-size:.79rem;font-weight:700;color:var(--t2);margin-bottom:8px}
.hr-op{font-weight:400;color:var(--t3);text-transform:none;letter-spacing:0}
.hr-dias{display:flex;gap:7px;flex-wrap:wrap}
.hr-dia-op{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border);
  border-radius:50px;padding:7px 14px;font-size:.84rem;color:var(--t2);cursor:pointer;
  user-select:none}
.hr-dia-op input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.hr-dia-op.on{border-color:var(--brand);background:rgba(0,194,224,.08);color:var(--t1);
  font-weight:600}
.hr-linha{display:flex;align-items:center;gap:10px}
.hr-linha span{font-size:.85rem;color:var(--t3)}
.hr-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hr-topo b{font-size:1rem;color:var(--t1)}
.hr-topo button{margin-left:auto}
.hr-tabela td{padding:6px 8px 6px 0}
.hr-dia{font-weight:600;color:var(--t1);width:46px;font-size:.84rem}
.hr-vazio .hr-dia{color:var(--t3);font-weight:400}
.hr-campo{width:74px;background:var(--bg);border:1.5px solid transparent;outline:none;
  border-radius:8px;padding:7px 9px;font-size:.86rem;color:var(--t1);font-family:inherit;
  text-align:center}
.hr-campo:focus{border-color:var(--brand);background:var(--surface)}
.set-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:11px}
.set-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.set-topo b{font-size:.95rem;color:var(--t1)}
.set-topo span:not(.set-estado){font-size:.78rem;color:var(--t3)}
.set-chaves{display:flex;flex-direction:column;gap:7px}
/* Dashboard */
.dash-pend{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.dash-alerta{display:flex;align-items:center;gap:12px;width:100%;border:none;
  border-radius:12px;padding:14px 16px;cursor:pointer;font-family:inherit;
  text-align:left;background:var(--bg);transition:transform .1s}
.dash-alerta:hover{transform:translateX(2px)}
.dash-alerta b{font-size:1.5rem;font-weight:800;line-height:1}
.dash-alerta > span:nth-child(3){flex:1;font-size:.88rem;color:var(--t2)}
.dash-alerta .msr{font-size:21px}
.dash-alerta .seta{font-size:19px;color:var(--t3)}
.dash-alerta.critico{background:rgba(226,76,107,.1)}
.dash-alerta.critico b,.dash-alerta.critico > .msr{color:#c8412f}
.dash-alerta.atencao{background:rgba(245,158,11,.12)}
.dash-alerta.atencao b,.dash-alerta.atencao > .msr{color:#b45309}
.dash-alerta.ok{background:rgba(0,194,224,.1)}
.dash-alerta.ok b,.dash-alerta.ok > .msr{color:#0086a0}
.dash-tudo-certo{display:flex;align-items:center;gap:13px;padding:16px 18px;
  border-radius:12px;background:rgba(37,211,102,.09);margin-bottom:6px}
.dash-tudo-certo .msr{font-size:26px;color:#0a8f4d}
.dash-tudo-certo b{display:block;font-size:.92rem;color:var(--t1)}
.dash-tudo-certo span span,.dash-tudo-certo div span{font-size:.82rem;color:var(--t2)}
.set-nota{font-size:.78rem;color:var(--t3);line-height:1.5;margin:4px 0 0 25px}
.set-chave{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--t2);cursor:pointer}
.set-chave input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.set-estado{margin-left:auto;font-size:.75rem;font-weight:700;border-radius:50px;padding:3px 11px;
  align-self:flex-start}
.set-estado.sim{background:rgba(37,211,102,.15);color:#0a8f4d}
.set-estado.nao{background:var(--bg);color:var(--t3)}
/* Horario de trabalho */
/* Faixa de fora do horario — mesma posicao da faixa do administrador */
.faixa-horario{background:linear-gradient(90deg,#334970,#22314d)!important;color:#dbe4f2!important;
  padding:6px 16px!important;font-size:.8rem}
.faixa-horario .msr{font-size:17px!important;color:#9db3d6!important}
.faixa-horario b{color:#fff;font-weight:600}
.aviso-destino{display:flex;align-items:center;gap:10px;padding:9px 16px;margin:0 12px 6px;
  border-radius:10px;background:rgba(245,158,11,.11);color:var(--t2);font-size:.8rem;line-height:1.4}
.aviso-destino .msr{font-size:17px;color:#b45309;flex-shrink:0}
/* Denúncia */
#badge-admin{background:#e24c6b}
#badge-admin.show{display:flex}
.den-box{width:min(94vw,860px)!important;max-width:860px!important}
/* Duas colunas: o texto de apoio nao empurra o formulario para baixo */
.priv-aviso{display:flex;gap:12px;padding:14px;border-radius:10px;
  background:rgba(245,158,11,.09);border-left:3px solid #f59e0b;margin-bottom:18px}
.priv-aviso .msr{font-size:21px;color:#b45309;flex-shrink:0}
.priv-aviso b{display:block;font-size:.85rem;color:var(--t1);margin-bottom:4px}
.priv-aviso div{font-size:.81rem;color:var(--t2);line-height:1.5}
.priv-aviso button{display:block;margin-top:7px;background:none;border:none;padding:0;
  color:var(--brand-d);font-weight:600;font-size:.8rem;cursor:pointer;font-family:inherit}
.pol-corpo{padding:16px 26px 22px;max-height:min(74vh,640px);overflow-y:auto}
.pol-lead{font-size:.9rem;color:var(--t1);font-weight:600;line-height:1.5;margin:0 0 16px}
.pol-corpo h4{font-size:.86rem;color:var(--t1);margin:18px 0 5px}
.pol-corpo h4:first-of-type{margin-top:0}
.pol-corpo p{font-size:.84rem;color:var(--t2);line-height:1.6;margin:0 0 8px}
.pol-corpo b{color:var(--t1)}
.pol-lista{margin:2px 0 10px 18px;padding:0}
.pol-lista li{font-size:.83rem;color:var(--t2);line-height:1.6;margin-bottom:2px}
.pol-nota{margin:18px 0 4px;padding:12px 14px;border-radius:10px;background:var(--bg);
  font-size:.78rem;color:var(--t3);line-height:1.5}
.den-corpo{display:flex;gap:22px;padding:16px 22px 20px;max-height:min(80vh,660px);overflow-y:auto}
.den-corpo > .den-intro{flex:0 0 300px;align-self:flex-start;margin-bottom:0}
.den-form{flex:1;min-width:0}
@media(max-width:760px){
  .den-corpo{flex-direction:column;gap:14px}
  .den-corpo > .den-intro{flex:none}
}
.den-intro{background:rgba(0,194,224,.07);border-left:3px solid var(--brand);border-radius:10px;
  padding:13px 15px;margin-bottom:16px}
.den-intro p{font-size:.83rem;color:var(--t2);line-height:1.55;margin:0 0 8px}
.den-intro p:last-child{margin-bottom:0}
.den-intro b{color:var(--t1)}
.den-obrigado{font-style:italic;color:var(--t3)!important}
.den-campo{margin-bottom:14px}
.den-campo label{display:block;font-size:.78rem;font-weight:700;color:var(--t2);
  margin-bottom:6px;letter-spacing:.2px}
.den-valor{font-size:.9rem;color:var(--t1);font-weight:600}
.den-campo textarea{width:100%;background:var(--bg);border:none;outline:none;border-radius:11px;
  padding:11px 13px;font-size:.88rem;color:var(--t1);font-family:inherit;resize:vertical}
.den-enviar{width:100%;margin-top:6px;padding:12px;border-radius:50px;background:var(--brand);
  color:#0d1f3c;font-weight:700;border:none;cursor:pointer;font-family:inherit;font-size:.9rem}
.den-trecho{background:var(--bg);border-left:3px solid var(--border);border-radius:8px;
  padding:10px 12px;font-size:.84rem;color:var(--t2);line-height:1.45;max-height:90px;overflow-y:auto}
.den-motivos{display:flex;flex-wrap:wrap;gap:7px}
.den-select{width:100%;background:var(--bg);border:none;outline:none;border-radius:11px;
  padding:11px 13px;font-size:.88rem;color:var(--t1);font-family:inherit;cursor:pointer}
.den-motivo{border:1.5px solid var(--border);background:none;border-radius:50px;padding:7px 13px;
  font-size:.79rem;color:var(--t2);cursor:pointer;font-family:inherit}
.den-motivo:hover{border-color:var(--brand)}
.den-motivo.on{border-color:#e24c6b;background:rgba(226,76,107,.1);color:var(--t1);font-weight:600}
.den-anon-op{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer}
.den-anon-op input{width:17px;height:17px;accent-color:var(--brand);margin-top:2px;flex-shrink:0}
.den-anon-op b{display:block;font-size:.85rem;color:var(--t1)}
.den-anon-op span span{font-size:.75rem;color:var(--t3);line-height:1.4;display:block;margin-top:2px}
.den-card{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:11px}
.den-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.den-motivo-tag{font-size:.7rem;font-weight:700;background:rgba(226,76,107,.14);color:#c8412f;
  border-radius:50px;padding:2px 10px}
.den-anon{font-size:.72rem;font-weight:600;color:var(--t2);background:var(--bg);
  border-radius:50px;padding:2px 9px}
.den-por{font-size:.75rem;color:var(--t3)}
.den-hora{margin-left:auto;font-size:.72rem;color:var(--t3)}
.den-linha{font-size:.8rem;color:var(--t2);margin-bottom:3px}
.den-linha b{color:var(--t1);font-weight:600}
.den-msg{background:var(--bg);border-radius:8px;padding:9px 11px;margin-top:7px;
  font-size:.83rem;color:var(--t1);line-height:1.45;white-space:pre-wrap}
.den-relato{margin-top:7px;font-size:.8rem;color:var(--t2);line-height:1.45}
/* Apuracao */
.den-clicavel{cursor:pointer;transition:border-color .12s}
.den-clicavel:hover{border-color:var(--brand)}
.den-acoes{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.den-btn{display:flex;align-items:center;gap:6px;border:none;border-radius:50px;
  padding:7px 14px;background:var(--brand);color:#0d1f3c;font-size:.79rem;font-weight:700;
  cursor:pointer;font-family:inherit}
.den-btn .msr{font-size:16px}
.den-btn.secundario{background:var(--bg);color:var(--t2)}
.den-btn.secundario:hover{background:var(--sidebar-hover);color:var(--t1)}
.den-sit{font-size:.68rem;font-weight:700;border-radius:50px;padding:2px 9px}
.sit-nova{background:var(--bg);color:var(--t3)}
.sit-aberto{background:rgba(245,158,11,.16);color:#b45309}
.sit-andamento{background:rgba(0,194,224,.16);color:#0097b2}
.sit-resolvido{background:rgba(37,211,102,.16);color:#0a8f4d}
.pc-voltar{display:flex;align-items:center;gap:7px;background:none;border:none;
  color:var(--brand-d);font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit;
  padding:0 0 14px}
.pc-voltar .msr{font-size:18px}
.apu-cols{display:flex;gap:22px}
.apu-esq{flex:1;min-width:0}
.apu-dir{flex:1;min-width:0}
.apu-hist{border-left:2px solid var(--border);padding:7px 0 7px 11px;margin-bottom:9px}
.apu-hist-topo{display:flex;align-items:baseline;gap:8px}
.apu-hist-topo b{font-size:.83rem;color:var(--t1)}
.apu-hist-topo span{font-size:.72rem;color:var(--t3);margin-left:auto}
.apu-hist-quem{font-size:.72rem;color:var(--t3)}
.apu-hist-obs{font-size:.8rem;color:var(--t2);line-height:1.45;margin-top:3px}
@media(max-width:760px){ .apu-cols{flex-direction:column;gap:0} }
/* ══ Painel de controle ══ */
.pc-modal .pc-box{background:var(--surface);border-radius:16px;width:min(96vw,1120px);
  height:min(88vh,760px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.pc-topo{display:flex;align-items:center;gap:11px;padding:14px 20px;border-bottom:1px solid var(--border)}
.pc-topo h3{font-size:1rem;color:var(--t1);margin:0}
.pc-topo .msr{font-size:22px;color:#8b5cf6}
.pc-empresa{font-size:.78rem;color:var(--t3);margin-left:auto;margin-right:8px}
.pc-corpo{flex:1;display:flex;min-height:0}
.pc-menu{width:224px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;
  padding:8px 0;background:var(--sidebar-bg)}
.pc-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 18px;border:none;
  background:none;cursor:pointer;font-size:.85rem;color:var(--t2);font-family:inherit;text-align:left}
.pc-item:hover{background:var(--sidebar-hover);color:var(--t1)}
.pc-item.on{background:rgba(139,92,246,.12);color:var(--t1);font-weight:600;
  box-shadow:inset 3px 0 0 #8b5cf6}
.pc-item .msr{font-size:19px;color:var(--t3)}
.pc-badge{margin-left:auto;background:#e24c6b;color:#fff;border-radius:50px;min-width:19px;
  height:19px;padding:0 6px;font-size:.68rem;font-weight:800;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.pc-item.on .msr{color:#8b5cf6}
.pc-area{flex:1;overflow-y:auto;padding:20px 24px}
.pc-cab{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.pc-cab h4{font-size:1.05rem;color:var(--t1);margin:0 0 3px}
.pc-cab span{font-size:.82rem;color:var(--t3);line-height:1.4}
.pc-acao{margin-left:auto;display:flex;align-items:center;gap:6px;border:none;border-radius:50px;
  padding:9px 16px;background:var(--brand);color:#0d1f3c;font-weight:700;font-size:.82rem;
  cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap}
.pc-acao .msr{font-size:17px}
.pc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pc-card{background:var(--bg);border-radius:12px;padding:15px 16px;display:flex;flex-direction:column;gap:2px}
.pc-num{font-size:1.7rem;font-weight:800;color:var(--t1);line-height:1.1}
.pc-rot{font-size:.8rem;color:var(--t2);font-weight:600}
.pc-nota{font-size:.72rem;color:var(--t3)}
.pc-card.rel{flex-direction:row;align-items:center;gap:11px;cursor:pointer;flex-wrap:wrap}
.pc-card.rel:hover{background:var(--sidebar-hover)}
.pc-card.rel .msr{font-size:21px;color:#8b5cf6}
.pc-card.rel b{font-size:.86rem;color:var(--t1);font-weight:600}
.pc-grafico{margin-top:14px;height:180px;border:1.5px dashed var(--border);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--t3)}
.pc-grafico .msr{font-size:32px}
.pc-grafico span:last-child{font-size:.82rem}
.pc-busca{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:10px;
  padding:9px 13px;margin-bottom:12px;max-width:340px}
.pc-busca .msr{font-size:17px;color:var(--t3)}
.pc-busca input{flex:1;background:none;border:none;outline:none;font-size:.85rem;
  color:var(--t1);font-family:inherit}
.pc-tabela{width:100%;border-collapse:collapse;font-size:.84rem}
.pc-tabela th{text-align:left;padding:9px 10px;color:var(--t3);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
.pc-tabela td{padding:11px 10px;border-bottom:1px solid var(--border);color:var(--t1)}
.pc-skel{display:block;height:10px;width:70%;border-radius:5px;background:var(--border)}
.pc-aviso{font-size:.76rem;color:var(--t3);margin-top:14px;line-height:1.5}
.risco-dim-lista{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border)}
.risco-dim-lista b{font-size:.86rem;color:var(--t1)}
.risco-dim-lista span{font-size:.78rem;color:var(--t3);margin-left:auto}
.ch-rasc{color:#e24c6b;font-weight:600}
.fo-acao{background:none;border:none;cursor:pointer;color:var(--t3);padding:2px 3px;
  line-height:1;opacity:0;transition:opacity .12s}
.fo-topic:hover .fo-acao{opacity:1}
.fo-acao:hover{color:var(--t1)}
.fo-acao.apagar:hover{color:#e24c6b}
.fo-acao .msr{font-size:16px}
.fo-novo{font-size:.62rem;font-weight:800;background:var(--brand);color:#0d1f3c;
  border-radius:50px;padding:2px 8px;margin-right:7px;letter-spacing:.3px;
  text-transform:uppercase}
/* Atalho no rodape do canal */
.vc-voltar{display:flex;align-items:center;gap:6px;background:none;border:none;padding:0;
  cursor:pointer;font-family:inherit;text-align:left;width:100%}
.vc-voltar .msr{font-size:14px;color:rgba(255,255,255,.4);transition:transform .12s}
.vc-voltar:hover .vc-connected-name{color:var(--brand)}
.vc-voltar:hover .msr{color:var(--brand);transform:translate(1px,-1px)}

/* Flutuante — canto direito, longe do campo de mensagem.
   Compacto por padrão; abre ao passar o mouse. */
/* No meio da altura, à direita: longe do campo de mensagem e fora do
   caminho da leitura. */
.vc-flut{position:fixed;right:20px;top:50%;margin-top:-21px;z-index:900;
  display:flex;align-items:center;gap:10px;
  background:rgba(19,43,74,.97);backdrop-filter:blur(8px);
  border:1px solid rgba(0,194,224,.35);border-radius:50px;padding:8px 9px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);cursor:pointer;
  opacity:0;transform:translateX(20px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,padding .18s ease}
.vc-flut.show{opacity:1;transform:none;pointer-events:auto}
.vc-flut:hover{border-color:var(--brand);padding-left:16px}

.vc-flut-pulso{width:9px;height:9px;border-radius:50%;background:#25d366;flex-shrink:0;
  animation:vcPulso 2s ease-in-out infinite;margin-left:5px}
@keyframes vcPulso{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){ .vc-flut-pulso{animation:none} }

/* O nome só aparece no hover: parado, o flutuante é um ponto discreto */
.vc-flut-info{display:flex;flex-direction:column;line-height:1.25;
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .2s ease,opacity .16s ease}
.vc-flut:hover .vc-flut-info{max-width:170px;opacity:1;margin-right:2px}
.vc-flut-info b{font-size:.82rem;color:#fff;font-weight:600}
.vc-flut-info span{font-size:.69rem;color:rgba(255,255,255,.5)}

.vc-flut-mic,.vc-flut-sair{width:34px;height:34px;border-radius:50%;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vc-flut-mic{background:rgba(255,255,255,.12);color:#fff}
.vc-flut-mic:hover{background:rgba(255,255,255,.22)}
.vc-flut-mic.mudo{background:rgba(226,76,107,.9)}
.vc-flut-mic .msr,.vc-flut-sair .msr{font-size:18px}
.vc-flut-sair{background:#e24c6b;color:#fff}
.vc-flut-sair:hover{background:#c8412f}

/* Enquanto arrasta, sem transição: ela faria o flutuante escorregar atrás
   do cursor em vez de acompanhá-lo. */
.vc-flut.arrastando{transition:none;cursor:grabbing;border-color:var(--brand)}

@media(max-width:560px){
  .vc-flut{right:12px}
  .vc-flut:hover .vc-flut-info{max-width:120px}
}
/* Modo "sala é o canal": o avatar vira presença visual, não fonte de som.
   A silhueta mais leve comunica isso sem precisar de legenda. */
.of-modo-auto .of-aviso-modo{display:flex}
.of-aviso-modo{display:none;align-items:center;gap:8px;font-size:.76rem;
  color:var(--t3);background:var(--bg);border-radius:50px;padding:5px 13px}
.of-aviso-modo .msr{font-size:15px;color:var(--brand-d)}
/* Aceite no primeiro acesso */
.aceite-modal{z-index:99998}

/* Enquanto não aceitar, o aplicativo fica embaçado e sem interação: a
   pessoa não deve ler conversa alheia antes de saber que as dela podem
   ser lidas. */
body.travado-aceite .screen,
body.travado-aceite .nav-rail,
body.travado-aceite .side-col{ filter:blur(7px); pointer-events:none;
  user-select:none }
body.travado-aceite .aceite-modal{ filter:none; pointer-events:auto }
.ace-corpo{padding:6px 26px 24px;max-height:min(80vh,660px);overflow-y:auto}
.ace-lead{font-size:.92rem;color:var(--t1);line-height:1.55;margin:0 0 20px}
.ace-item{display:flex;gap:13px;margin-bottom:16px}
.ace-item .msr{font-size:21px;color:var(--brand-d);flex-shrink:0;margin-top:2px}
.ace-item b{display:block;font-size:.88rem;color:var(--t1);margin-bottom:3px}
.ace-item div{font-size:.83rem;color:var(--t2);line-height:1.5}
.ace-docs{font-size:.83rem;color:var(--t2);background:var(--bg);border-radius:10px;
  padding:12px 14px;margin:20px 0 16px;line-height:1.6}
.ace-docs a{color:var(--brand-d);font-weight:600}
.ace-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-bottom:16px}
.ace-check input{width:19px;height:19px;accent-color:var(--brand);margin-top:1px;
  flex-shrink:0;cursor:pointer}
.ace-check span{font-size:.87rem;color:var(--t1);line-height:1.45}
#aceite-btn:disabled{opacity:.4;cursor:not-allowed}
.ace-nota{font-size:.76rem;color:var(--t3);line-height:1.5;margin:14px 0 0;text-align:center}
/* Conferir imagem antes de enviar */
.imgp-para{font-size:.82rem;color:var(--t3);margin-bottom:10px}
.imgp-para b{color:var(--t1);font-weight:600}
.imgp-foto{background:var(--bg);border-radius:12px;padding:10px;display:flex;
  align-items:center;justify-content:center;max-height:300px;overflow:hidden}
.imgp-foto img{max-width:100%;max-height:280px;border-radius:8px;display:block}
.imgp-info{font-size:.74rem;color:var(--t3);margin:8px 0 12px}
#img-prev-legenda{width:100%;background:var(--bg);border:none;outline:none;
  border-radius:11px;padding:11px 13px;font-size:.88rem;color:var(--t1);
  font-family:inherit}
.imgp-acoes{display:flex;gap:9px;margin-top:14px}
.imgp-cancelar,.imgp-enviar{flex:1;padding:11px;border-radius:50px;border:none;
  font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px}
.imgp-cancelar{background:var(--bg);color:var(--t2)}
.imgp-cancelar:hover{background:var(--sidebar-hover);color:var(--t1)}
.imgp-enviar{background:var(--brand);color:#0d1f3c}
.imgp-enviar .msr{font-size:17px}
/* Riscos psicossociais */
.risco-sit{margin-left:auto;font-size:.72rem;font-weight:700;border-radius:50px;padding:3px 11px}
.risco-sit.rasc{background:var(--bg);color:var(--t3)}
.risco-sit.aberta{background:rgba(0,194,224,.16);color:#0086a0}
.risco-sit.fech{background:rgba(37,211,102,.15);color:#0a8f4d}
.risco-linha{display:flex;align-items:center;gap:7px;font-size:.81rem;color:var(--t3);margin-bottom:4px}
.risco-linha .msr{font-size:16px}
.risco-dim{margin-bottom:13px}
.risco-dim-topo{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.risco-dim-topo b{font-size:.88rem;color:var(--t1)}
.risco-nota{font-size:.76rem;font-weight:700;border-radius:50px;padding:2px 10px;margin-left:auto}
.risco-nota.ok{background:rgba(37,211,102,.15);color:#0a8f4d}
.risco-nota.atencao{background:rgba(245,158,11,.18);color:#b45309}
.risco-nota.critico{background:rgba(226,76,107,.15);color:#c8412f}
.risco-ok{color:#0a8f4d}
.risco-atencao{color:#b45309}
.risco-critico{color:#c8412f}
.risco-barra{height:7px;border-radius:50px;background:var(--bg);overflow:hidden}
.risco-barra i{display:block;height:100%;border-radius:50px}
.risco-barra i.ok{background:#25d366}
.risco-barra i.atencao{background:#f59e0b}
.risco-barra i.critico{background:#e24c6b}
.risco-q{margin-bottom:20px}
.risco-q-txt{font-size:.9rem;color:var(--t1);line-height:1.45;margin-bottom:9px}
.risco-q-txt span{color:var(--t3);font-weight:600;margin-right:4px}
.risco-escala{display:flex;gap:8px}
.risco-escala label{flex:1;cursor:pointer}
.risco-escala input{position:absolute;opacity:0;pointer-events:none}
.risco-escala span{display:flex;align-items:center;justify-content:center;height:40px;
  border:1.5px solid var(--border);border-radius:10px;font-size:.88rem;color:var(--t2);
  transition:background .1s}
.risco-escala label:hover span{border-color:var(--brand)}
.risco-escala input:checked + span{background:var(--brand);border-color:var(--brand);
  color:#0d1f3c;font-weight:700}
.risco-legenda{display:flex;justify-content:space-between;font-size:.7rem;color:var(--t3);
  margin-top:4px}
/* Controle de acesso */
.tela-final{position:fixed;inset:0;z-index:99999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px}
.tf-caixa{max-width:420px;text-align:center}
.tf-caixa .msr{font-size:52px;color:var(--t3);margin-bottom:14px}
.tf-caixa h3{font-size:1.3rem;color:var(--t1);margin:0 0 10px}
.tf-caixa p{font-size:.92rem;color:var(--t2);line-height:1.6;margin:0 0 22px}
.tf-caixa button{border:none;border-radius:50px;padding:12px 28px;background:var(--brand);
  color:#0d1f3c;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit}
.acoes-linha{display:flex;gap:4px;justify-content:flex-end}
.acoes-linha button{background:none;border:none;cursor:pointer;padding:5px;border-radius:7px;
  color:var(--t3);line-height:1}
.acoes-linha button:hover{background:var(--bg);color:var(--t1)}
.acoes-linha button.bloquear:hover{color:#e24c6b}
.acoes-linha button.liberar{color:#0a8f4d}
.acoes-linha .msr{font-size:18px}
tr.bloqueado td{opacity:.55}
.dd-item svg{width:18px;height:18px;color:var(--t2);flex-shrink:0}
.dd-sep{height:1px;background:var(--border);margin:4px 0}

/* Messages */
.msgs{flex:1;overflow-y:auto;padding:10px 7%;display:flex;flex-direction:column;gap:1px;background-color:var(--chat-bg)}
/* Fundo padrão do chat: padrão vetorial próprio, embutido como data-URI
   (sem arquivo extra, sem requisição, e nítido em qualquer densidade de tela) */
.msgs{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22rgba(11,20,26,0.055)%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M18%2026h34a6%206%200%20016%206v18a6%206%200%2001-6%206H32l-9%208v-8h-5a6%206%200%2001-6-6V32a6%206%200%20016-6z%22/%3E%3Ccircle%20cx=%22104%22%20cy=%2234%22%20r=%2211%22/%3E%3Cpath%20d=%22M96%2052a8%208%200%200116%200%22/%3E%3Cpath%20d=%22M150%2022l6%2012%2013%202-9%209%202%2013-12-6-12%206%202-13-9-9%2013-2z%22/%3E%3Crect%20x=%22196%22%20y=%2220%22%20width=%2230%22%20height=%2234%22%20rx=%224%22/%3E%3Cpath%20d=%22M203%2030h16M203%2038h16M203%2046h10%22/%3E%3Cpath%20d=%22M22%2096c0-7%206-13%2013-13s13%206%2013%2013-13%2020-13%2020-13-13-13-20z%22/%3E%3Ccircle%20cx=%2235%22%20cy=%2296%22%20r=%224%22/%3E%3Crect%20x=%2278%22%20y=%2286%22%20width=%2236%22%20height=%2226%22%20rx=%224%22/%3E%3Cpath%20d=%22M78%2092l18%2012%2018-12%22/%3E%3Cpath%20d=%22M146%2088h22a5%205%200%20015%205v14a5%205%200%2001-5%205h-6l-5%206-5-6h-6a5%205%200%2001-5-5V93a5%205%200%20015-5z%22/%3E%3Cpath%20d=%22M196%20110V88m0%200l-7%207m7-7l7%207%22/%3E%3Cpath%20d=%22M186%20118h20%22/%3E%3Ccircle%20cx=%2234%22%20cy=%22164%22%20r=%2213%22/%3E%3Cpath%20d=%22M34%20156v9l6%204%22/%3E%3Cpath%20d=%22M80%20176v-24l10%208%2010-14%2012%2030z%22/%3E%3Cpath%20d=%22M78%20178h46%22/%3E%3Cpath%20d=%22M150%20152h26v20h-9l-4%206-4-6h-9z%22/%3E%3Cpath%20d=%22M156%20160h14%22/%3E%3Cpath%20d=%22M198%20150a10%2010%200%2000-10%2010c0%207%2010%2016%2010%2016s10-9%2010-16a10%2010%200%2000-10-10z%22/%3E%3Crect%20x=%2220%22%20y=%22206%22%20width=%2234%22%20height=%2222%22%20rx=%224%22/%3E%3Cpath%20d=%22M28%20214h18M28%20220h12%22/%3E%3Cpath%20d=%22M96%20204l8%2016-8%2016-8-16z%22/%3E%3Cpath%20d=%22M148%20210h20a4%204%200%20014%204v12a4%204%200%2001-4%204h-20a4%204%200%2001-4-4v-12a4%204%200%20014-4z%22/%3E%3Cpath%20d=%22M152%20218h12%22/%3E%3Ccircle%20cx=%22200%22%20cy=%22218%22%20r=%2210%22/%3E%3Cpath%20d=%22M195%20218h10M200%20213v10%22/%3E%3Ccircle%20cx=%2262%22%20cy=%2260%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22130%22%20cy=%2270%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22182%22%20cy=%2266%22%20r=%222.4%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22130%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22132%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22222%22%20cy=%22130%22%20r=%222.4%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22196%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22192%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22222%22%20cy=%22196%22%20r=%222.4%22/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;background-size:240px 240px}
html.dark .msgs{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%22240%22%20viewBox=%220%200%20240%20240%22%3E%3Cg%20fill=%22none%22%20stroke=%22rgba(255,255,255,0.045)%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M18%2026h34a6%206%200%20016%206v18a6%206%200%2001-6%206H32l-9%208v-8h-5a6%206%200%2001-6-6V32a6%206%200%20016-6z%22/%3E%3Ccircle%20cx=%22104%22%20cy=%2234%22%20r=%2211%22/%3E%3Cpath%20d=%22M96%2052a8%208%200%200116%200%22/%3E%3Cpath%20d=%22M150%2022l6%2012%2013%202-9%209%202%2013-12-6-12%206%202-13-9-9%2013-2z%22/%3E%3Crect%20x=%22196%22%20y=%2220%22%20width=%2230%22%20height=%2234%22%20rx=%224%22/%3E%3Cpath%20d=%22M203%2030h16M203%2038h16M203%2046h10%22/%3E%3Cpath%20d=%22M22%2096c0-7%206-13%2013-13s13%206%2013%2013-13%2020-13%2020-13-13-13-20z%22/%3E%3Ccircle%20cx=%2235%22%20cy=%2296%22%20r=%224%22/%3E%3Crect%20x=%2278%22%20y=%2286%22%20width=%2236%22%20height=%2226%22%20rx=%224%22/%3E%3Cpath%20d=%22M78%2092l18%2012%2018-12%22/%3E%3Cpath%20d=%22M146%2088h22a5%205%200%20015%205v14a5%205%200%2001-5%205h-6l-5%206-5-6h-6a5%205%200%2001-5-5V93a5%205%200%20015-5z%22/%3E%3Cpath%20d=%22M196%20110V88m0%200l-7%207m7-7l7%207%22/%3E%3Cpath%20d=%22M186%20118h20%22/%3E%3Ccircle%20cx=%2234%22%20cy=%22164%22%20r=%2213%22/%3E%3Cpath%20d=%22M34%20156v9l6%204%22/%3E%3Cpath%20d=%22M80%20176v-24l10%208%2010-14%2012%2030z%22/%3E%3Cpath%20d=%22M78%20178h46%22/%3E%3Cpath%20d=%22M150%20152h26v20h-9l-4%206-4-6h-9z%22/%3E%3Cpath%20d=%22M156%20160h14%22/%3E%3Cpath%20d=%22M198%20150a10%2010%200%2000-10%2010c0%207%2010%2016%2010%2016s10-9%2010-16a10%2010%200%2000-10-10z%22/%3E%3Crect%20x=%2220%22%20y=%22206%22%20width=%2234%22%20height=%2222%22%20rx=%224%22/%3E%3Cpath%20d=%22M28%20214h18M28%20220h12%22/%3E%3Cpath%20d=%22M96%20204l8%2016-8%2016-8-16z%22/%3E%3Cpath%20d=%22M148%20210h20a4%204%200%20014%204v12a4%204%200%2001-4%204h-20a4%204%200%2001-4-4v-12a4%204%200%20014-4z%22/%3E%3Cpath%20d=%22M152%20218h12%22/%3E%3Ccircle%20cx=%22200%22%20cy=%22218%22%20r=%2210%22/%3E%3Cpath%20d=%22M195%20218h10M200%20213v10%22/%3E%3Ccircle%20cx=%2262%22%20cy=%2260%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22130%22%20cy=%2270%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22182%22%20cy=%2266%22%20r=%222.4%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22130%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22132%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22222%22%20cy=%22130%22%20r=%222.4%22/%3E%3Ccircle%20cx=%2260%22%20cy=%22196%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22128%22%20cy=%22192%22%20r=%222.4%22/%3E%3Ccircle%20cx=%22222%22%20cy=%22196%22%20r=%222.4%22/%3E%3C/g%3E%3C/svg%3E")}
.msgs.custom-bg{background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:local}
/* Seleção de plano de fundo */
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px 2px 12px}
.bg-opt{aspect-ratio:3/4;border-radius:10px;border:2px solid transparent;cursor:pointer;overflow:hidden;
  position:relative;background-size:cover;background-position:center;transition:.15s}
.bg-opt:hover{transform:translateY(-2px)}
.bg-opt.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,194,224,.2)}
.bg-opt-lbl{position:absolute;left:0;right:0;bottom:0;font-size:.65rem;text-align:center;padding:3px 2px;
  background:rgba(0,0,0,.55);color:#fff}
.msgs::-webkit-scrollbar{width:5px}.msgs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.13);border-radius:3px}
.date-div{text-align:center;margin:8px 0}
.date-div span{background:rgba(255,255,255,.85);color:#54656f;font-size:.72rem;font-weight:500;padding:4px 10px;border-radius:6px;box-shadow:0 1px 1px rgba(0,0,0,.1)}
html.dark .date-div span{background:rgba(32,44,51,.9);color:var(--t2)}
.msg-w{display:flex;max-width:65%;margin-bottom:2px}.msg-w.sent{margin-left:auto}.msg-w.recv{margin-right:auto}
.bubble{padding:6px 9px 4px;border-radius:8px;box-shadow:0 1px 1px rgba(0,0,0,.13);word-break:break-word;max-width:100%;position:relative}
.sent .bubble{background:var(--sent);border-top-right-radius:0}.recv .bubble{background:var(--recv);border-top-left-radius:0}
:root{--msg-font:15px}
.m-link{color:var(--brand-d);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
html.dark .m-link{color:var(--brand)}
.msg-w.sent .m-link{color:#0b6b45}
html.dark .msg-w.sent .m-link{color:#25d366}
.m-link:hover{opacity:.8}
.m-text{font-size:var(--msg-font);line-height:1.45;color:var(--t1);padding-right:50px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.m-quote-txt,.m-author,.m-deleted{font-size:calc(var(--msg-font) - 1px)}
.m-quote-txt{white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mv-tr-txt{white-space:pre-wrap}
.vc-chat-txt{white-space:pre-wrap}
.m-time,.mv-time{font-size:calc(var(--msg-font) - 4px)}
/* Ajuste do tamanho da fonte */
.fs-preview{background:var(--chat-bg);border-radius:12px;padding:14px;margin-bottom:16px;
  display:flex;flex-direction:column;gap:6px}
.fs-bolha{align-self:flex-start;background:var(--recv);border-radius:8px;padding:7px 10px 5px;
  box-shadow:0 1px 1px rgba(0,0,0,.13);max-width:85%}
.fs-bolha.eu{align-self:flex-end;background:var(--sent)}
.fs-txt{font-size:var(--msg-font);line-height:1.45;color:var(--t1)}
.fs-hora{font-size:calc(var(--msg-font) - 4px);color:var(--t3);text-align:right}
.fs-escala{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.fs-escala input[type=range]{flex:1;accent-color:var(--brand)}
.fs-num{font-size:1.1rem;font-weight:700;color:var(--brand-d);min-width:52px;text-align:center}
html.dark .fs-num{color:var(--brand)}
.fs-aa{font-weight:700;color:var(--t3)}
.m-img{max-width:280px;border-radius:6px;margin-bottom:3px;cursor:zoom-in;transition:filter .15s}
.m-img:hover{filter:brightness(.94)}
/* Visualizador */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;z-index:4000;
  align-items:center;justify-content:center;flex-direction:column}
.lb.show{display:flex}
.lb-img{max-width:92vw;max-height:82vh;object-fit:contain;transition:transform .18s ease;cursor:grab;user-select:none}
.lb-img.dragging{cursor:grabbing;transition:none}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;
  padding:14px 18px;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.lb-title{flex:1;color:#fff;font-size:.85rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-btn{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.12);
  color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lb-btn:hover{background:rgba(255,255,255,.25)}
.lb-zoom{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.5);padding:6px 10px;border-radius:50px;backdrop-filter:blur(6px)}
.lb-zoom span{color:#fff;font-size:.8rem;min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.m-video{max-width:280px;border-radius:6px;display:block;margin-bottom:3px}
.m-audio audio{height:34px;max-width:240px;display:block;margin-bottom:2px}
.m-doc{display:flex;align-items:center;gap:12px;padding:4px 2px 6px;min-width:200px;max-width:280px}
.m-doc-icon{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:rgba(0,194,224,.12)}
.m-doc-info{flex:1;min-width:0}.m-doc-name{font-size:.85rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-doc-dl{color:var(--brand-d);text-decoration:none;font-size:.78rem;font-weight:600}.m-doc-dl:hover{text-decoration:underline}
.m-collab{display:flex;align-items:center;gap:12px;padding:6px 2px 8px;min-width:220px}
.m-collab-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--brand),#1a6b99);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem}
.m-collab-av img{width:100%;height:100%;border-radius:50%}
.m-collab-name{font-size:.9rem;font-weight:600;color:var(--t1)}.m-collab-sector{font-size:.75rem;color:var(--t2)}
.m-collab-btn{display:inline-block;margin-top:8px;padding:5px 14px;border-radius:50px;background:var(--brand);color:#0d1f3c;font-size:.78rem;font-weight:700;cursor:pointer;border:none;transition:.15s}
.m-collab-btn:hover{background:var(--brand-d);color:#fff}
.m-foot{display:inline-flex;align-items:center;gap:3px;float:right;margin-left:6px;margin-top:2px;margin-bottom:-1px}
.m-time{font-size:.68rem;color:#8696a0;white-space:nowrap}
.m-check{display:inline-flex;align-items:center;color:#8696a0;line-height:0}
.m-check svg{width:16px;height:11px}
.m-check.read{color:#53bdeb}

/* Input */
.input-area{background:var(--bg);padding:8px 14px 12px;display:block;flex-shrink:0}
/* Composer: cartao unico que agrupa o preview de resposta + a linha de digitacao */
.composer{background:var(--surface);border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);position:relative}
.composer-row{display:flex;align-items:flex-end;gap:6px;padding:5px 8px}
/* Preview da mensagem respondida (padrao WhatsApp) */
/* Edição de mensagem */
/* Menções */
/* Faixas do topo: versão nova e aviso de navegador */
.aviso-interno{position:fixed;top:16px;right:16px;z-index:4600;background:var(--surface);
  border-radius:14px;padding:12px 14px;display:flex;align-items:flex-start;gap:12px;
  max-width:340px;cursor:pointer;box-shadow:0 10px 34px rgba(0,0,0,.26);
  border-left:3px solid var(--brand);animation:aiEntra .22s ease-out}
@keyframes aiEntra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.aviso-interno .ai-txt{flex:1;min-width:0}
.aviso-interno b{display:block;font-size:.88rem;color:var(--t1);margin-bottom:2px}
.aviso-interno span{font-size:.8rem;color:var(--t2);line-height:1.4;display:block;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.aviso-interno .ai-x{background:none;border:none;color:var(--t3);cursor:pointer;font-size:.9rem;
  padding:0 2px;flex-shrink:0}
.faixa-versao{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:4500;
  background:var(--surface);border-radius:50px;padding:10px 12px 10px 18px;display:flex;
  align-items:center;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,.24);font-size:.86rem;
  color:var(--t1);max-width:min(94vw,660px);animation:faixaEntra .25s ease-out}
@keyframes faixaEntra{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
.faixa-versao .msr{font-size:20px;color:var(--brand-d);flex-shrink:0}
.faixa-versao button{background:var(--brand);border:none;border-radius:50px;padding:8px 16px;
  font-size:.82rem;font-weight:700;color:#0d1f3c;cursor:pointer;font-family:inherit;flex-shrink:0}
.faixa-versao button.depois{background:none;color:var(--t3);font-weight:600}
.faixa-versao.browser .msr{color:#f59e0b}
.menc-box{display:none;position:absolute;bottom:100%;left:12px;right:12px;max-width:340px;
  background:var(--surface);border-radius:12px;box-shadow:0 -6px 30px rgba(0,0,0,.22);
  padding:5px;z-index:60;margin-bottom:6px}
.menc-box.show{display:block}
.menc-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer}
.menc-item:hover,.menc-item.on{background:var(--sidebar-hover)}
.menc-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff}
.menc-txt b{display:block;font-size:.86rem;color:var(--t1);font-weight:600}
.menc-txt u{text-decoration:none;color:var(--brand-d);font-weight:800}
html.dark .menc-txt u{color:var(--brand)}
.menc-box{max-height:270px;overflow-y:auto}
.menc-txt span{font-size:.72rem;color:var(--t3)}
.menc-todos{width:30px;height:30px;border-radius:50%;background:#f59e0b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}
.menc-tag{color:var(--brand-d);font-weight:600}
html.dark .menc-tag{color:var(--brand)}
.menc-tag.eu{background:rgba(0,194,224,.18);border-radius:4px;padding:0 3px}
.menc-tag.todos{background:rgba(245,158,11,.2);color:#b45309}
html.dark .menc-tag.todos{color:#fbbf24}
.menc-tag.solta{color:var(--t2);font-weight:500}
.edit-bar{display:none;align-items:center;gap:10px;margin:8px 8px 0;padding:8px 12px;border-radius:10px;
  background:rgba(245,158,11,.12);border-left:4px solid #f59e0b}
.edit-bar.show{display:flex}
.edit-bar>.msr{font-size:18px;color:#b45309;flex-shrink:0}
.edit-txt{flex:1;min-width:0;font-size:.8rem;line-height:1.3}
.edit-txt b{display:block;color:var(--t1);font-size:.78rem}
.edit-txt span{color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.edit-x{background:none;border:none;color:var(--t3);cursor:pointer;display:flex;padding:2px}
.edit-x:hover{color:var(--t1)}
.edit-x .msr{font-size:18px}
/* Carta */
.carta{cursor:pointer;min-width:200px;max-width:280px}
.carta-selo{background:linear-gradient(150deg,#f6e7c9,#e9d3a6);border-radius:10px;padding:18px 16px;
  text-align:center;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);transition:transform .3s,opacity .3s}
.carta-icone{font-size:1.9rem;line-height:1}
.carta-quem{font-size:.82rem;font-weight:700;color:#7a5a22;margin-top:6px}
.carta-dica{font-size:.68rem;color:#9c7b3e;margin-top:2px}
.carta-corpo{display:none;font-size:var(--msg-font);line-height:1.45;color:var(--t1);
  white-space:pre-wrap;overflow-wrap:anywhere;padding:4px 2px}
.carta.aberta .carta-selo{display:none}
.carta.aberta .carta-corpo{display:block;animation:cartaAbre .34s ease-out}
.carta.aberta{cursor:default}
@keyframes cartaAbre{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.carta-voando{position:fixed;font-size:2rem;z-index:4000;pointer-events:none;
  transform:translate(-50%,-50%);transition:transform .9s cubic-bezier(.22,.8,.3,1),opacity .9s}
.input-area.modo-carta .composer{box-shadow:0 0 0 2px #e0a458 inset;border-radius:26px}
.bubble.de-integracao{border-left:3px solid var(--brand);background:var(--surface)}
.bubble.de-integracao::before{content:'🔌 integração';display:block;font-size:.62rem;
  font-weight:700;color:var(--brand-d);margin-bottom:3px;letter-spacing:.3px}
html.dark .bubble.de-integracao::before{color:var(--brand)}
.chat-area.arrastando::after,#active-chat.arrastando::after{content:'Solte para enviar';
  position:absolute;inset:12px;border:2px dashed var(--brand);border-radius:16px;
  background:rgba(0,194,224,.08);display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;color:var(--brand-d);z-index:40;pointer-events:none}
#active-chat{position:relative}
.m-edit{font-size:.62rem;color:#8696a0;font-style:italic;margin-right:4px}
.reply-prev{display:none;align-items:stretch;gap:0;margin:8px 8px 0;border-radius:10px;overflow:hidden;background:var(--bg);animation:replyIn .16s ease-out}
html.dark .reply-prev{background:rgba(255,255,255,.06)}
.reply-prev-bar{width:4px;flex-shrink:0;background:var(--brand)}
.reply-prev-body{flex:1;min-width:0;padding:8px 12px;cursor:pointer}
.reply-prev-from{font-size:.78rem;font-weight:700;color:var(--brand);margin-bottom:2px;line-height:1.3}
.reply-prev-text{font-size:.85rem;color:var(--t2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-prev-close{width:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--t2);cursor:pointer;transition:color .15s}
.reply-prev-close:hover{color:var(--t1)}
.reply-prev-close .msr{font-size:22px}
@keyframes replyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.reply-prev{animation:none}}
.attach-wrap{position:relative;flex-shrink:0}
.attach-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.15s;background:none;border:none;cursor:pointer}
.attach-btn:hover{background:rgba(0,0,0,.06)}.attach-btn svg{width:26px;height:26px}
.attach-menu{position:absolute;bottom:54px;left:0;background:var(--surface);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.18);padding:5px 0;min-width:236px;max-height:min(70vh,520px);overflow-y:auto;z-index:50;display:none;flex-direction:column;animation:menuIn .15s ease}
.attach-menu.open{display:flex}
@keyframes menuIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.am-item{display:flex;align-items:center;gap:11px;padding:7px 14px;cursor:pointer;transition:background .1s;font-size:.84rem;color:var(--t1);font-weight:500}
.am-item:hover{background:var(--sidebar-hover)}
.am-icon{width:29px;height:29px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.9rem}.am-icon svg{width:15px;height:15px;color:#fff}
.am-carta{background:#e0a458}
.am-agenda{background:#1668F0}
.am-agmsg{background:#0EA47A}
/* Mensagens agendadas */
.ag-lista{max-height:190px;overflow-y:auto;margin-top:8px}
.ag-item{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-top:1px solid var(--border)}
.ag-quando{text-align:center;flex-shrink:0;min-width:44px}
.ag-quando b{display:block;font-size:.78rem;color:var(--t1)}
.ag-quando span{font-size:.7rem;color:var(--t3)}
.ag-corpo{flex:1;min-width:0}
.ag-dest{font-size:.78rem;color:var(--t2);font-weight:600}
.ag-txt{font-size:.79rem;color:var(--t3);overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.ag-prio{font-size:.62rem;font-weight:700;border-radius:50px;padding:1px 7px}
.ag-prio.importante{background:rgba(245,158,11,.16);color:#b45309}
.ag-prio.urgente{background:rgba(226,76,107,.16);color:#c8412f}
.ag-x{background:none;border:none;color:var(--t3);cursor:pointer;font-size:.78rem;padding:2px 4px}
.ag-x:hover{color:#e24c6b}
/* Tela das mensagens agendadas */
.agendadas-lista{max-height:min(52vh,420px);overflow-y:auto;padding:0 14px}
.agd-item{display:flex;gap:12px;padding:12px 8px;border-bottom:1px solid var(--border)}
.agd-item:last-child{border-bottom:none}
.agd-item.atrasada{background:rgba(245,158,11,.07);border-radius:10px}
.agd-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;background:var(--bg);color:var(--t3);
  font-weight:700;font-size:.78rem}
.agd-corpo{flex:1;min-width:0}
.agd-topo{display:flex;align-items:center;gap:7px}
.agd-topo b{font-size:.88rem;color:var(--t1)}
.agd-quando{display:flex;align-items:center;gap:4px;font-size:.76rem;color:var(--brand-d);
  font-weight:600;margin-top:1px}
.agd-quando .msr{font-size:14px;color:#b45309}
.agd-item.atrasada .agd-quando{color:#b45309}
html.dark .agd-quando{color:var(--brand)}
.agd-txt{font-size:.82rem;color:var(--t2);line-height:1.4;margin-top:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.agd-pe{font-size:.68rem;color:var(--t3);margin-top:4px}
.set-editar{background:none;border:none;color:var(--t3);cursor:pointer;padding:2px 4px;line-height:1}
.set-editar:hover{color:var(--brand-d)}
.set-editar .msr{font-size:17px}
.hr-simples{display:flex;flex-direction:column;gap:18px;max-width:520px;margin-bottom:6px}
.hr-bloco label{display:block;font-size:.79rem;font-weight:700;color:var(--t2);margin-bottom:8px}
.hr-op{font-weight:400;color:var(--t3);text-transform:none;letter-spacing:0}
.hr-dias{display:flex;gap:7px;flex-wrap:wrap}
.hr-dia-op{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border);
  border-radius:50px;padding:7px 14px;font-size:.84rem;color:var(--t2);cursor:pointer;
  user-select:none}
.hr-dia-op input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.hr-dia-op.on{border-color:var(--brand);background:rgba(0,194,224,.08);color:var(--t1);
  font-weight:600}
.hr-linha{display:flex;align-items:center;gap:10px}
.hr-linha span{font-size:.85rem;color:var(--t3)}
.hr-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.hr-topo b{font-size:1rem;color:var(--t1)}
.hr-topo button{margin-left:auto}
.hr-tabela td{padding:6px 8px 6px 0}
.hr-dia{font-weight:600;color:var(--t1);width:46px;font-size:.84rem}
.hr-vazio .hr-dia{color:var(--t3);font-weight:400}
.hr-campo{width:74px;background:var(--bg);border:1.5px solid transparent;outline:none;
  border-radius:8px;padding:7px 9px;font-size:.86rem;color:var(--t1);font-family:inherit;
  text-align:center}
.hr-campo:focus{border-color:var(--brand);background:var(--surface)}
.set-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:11px}
.set-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.set-topo b{font-size:.95rem;color:var(--t1)}
.set-topo span:not(.set-estado){font-size:.78rem;color:var(--t3)}
.set-chaves{display:flex;flex-direction:column;gap:7px}
/* Dashboard */
.dash-pend{display:flex;flex-direction:column;gap:9px;margin-bottom:6px}
.dash-alerta{display:flex;align-items:center;gap:12px;width:100%;border:none;
  border-radius:12px;padding:14px 16px;cursor:pointer;font-family:inherit;
  text-align:left;background:var(--bg);transition:transform .1s}
.dash-alerta:hover{transform:translateX(2px)}
.dash-alerta b{font-size:1.5rem;font-weight:800;line-height:1}
.dash-alerta > span:nth-child(3){flex:1;font-size:.88rem;color:var(--t2)}
.dash-alerta .msr{font-size:21px}
.dash-alerta .seta{font-size:19px;color:var(--t3)}
.dash-alerta.critico{background:rgba(226,76,107,.1)}
.dash-alerta.critico b,.dash-alerta.critico > .msr{color:#c8412f}
.dash-alerta.atencao{background:rgba(245,158,11,.12)}
.dash-alerta.atencao b,.dash-alerta.atencao > .msr{color:#b45309}
.dash-alerta.ok{background:rgba(0,194,224,.1)}
.dash-alerta.ok b,.dash-alerta.ok > .msr{color:#0086a0}
.dash-tudo-certo{display:flex;align-items:center;gap:13px;padding:16px 18px;
  border-radius:12px;background:rgba(37,211,102,.09);margin-bottom:6px}
.dash-tudo-certo .msr{font-size:26px;color:#0a8f4d}
.dash-tudo-certo b{display:block;font-size:.92rem;color:var(--t1)}
.dash-tudo-certo span span,.dash-tudo-certo div span{font-size:.82rem;color:var(--t2)}
.set-nota{font-size:.78rem;color:var(--t3);line-height:1.5;margin:4px 0 0 25px}
.set-chave{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--t2);cursor:pointer}
.set-chave input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.set-estado{margin-left:auto;font-size:.75rem;font-weight:700;border-radius:50px;padding:3px 11px;
  align-self:flex-start}
.set-estado.sim{background:rgba(37,211,102,.15);color:#0a8f4d}
.set-estado.nao{background:var(--bg);color:var(--t3)}
/* Horario de trabalho */
/* Faixa de fora do horario — mesma posicao da faixa do administrador */
.faixa-horario{background:linear-gradient(90deg,#334970,#22314d)!important;color:#dbe4f2!important;
  padding:6px 16px!important;font-size:.8rem}
.faixa-horario .msr{font-size:17px!important;color:#9db3d6!important}
.faixa-horario b{color:#fff;font-weight:600}
.aviso-destino{display:flex;align-items:center;gap:10px;padding:9px 16px;margin:0 12px 6px;
  border-radius:10px;background:rgba(245,158,11,.11);color:var(--t2);font-size:.8rem;line-height:1.4}
.aviso-destino .msr{font-size:17px;color:#b45309;flex-shrink:0}
/* Denúncia */
#badge-admin{background:#e24c6b}
#badge-admin.show{display:flex}
.den-box{width:min(94vw,860px)!important;max-width:860px!important}
/* Duas colunas: o texto de apoio nao empurra o formulario para baixo */
.priv-aviso{display:flex;gap:12px;padding:14px;border-radius:10px;
  background:rgba(245,158,11,.09);border-left:3px solid #f59e0b;margin-bottom:18px}
.priv-aviso .msr{font-size:21px;color:#b45309;flex-shrink:0}
.priv-aviso b{display:block;font-size:.85rem;color:var(--t1);margin-bottom:4px}
.priv-aviso div{font-size:.81rem;color:var(--t2);line-height:1.5}
.priv-aviso button{display:block;margin-top:7px;background:none;border:none;padding:0;
  color:var(--brand-d);font-weight:600;font-size:.8rem;cursor:pointer;font-family:inherit}
.pol-corpo{padding:16px 26px 22px;max-height:min(74vh,640px);overflow-y:auto}
.pol-lead{font-size:.9rem;color:var(--t1);font-weight:600;line-height:1.5;margin:0 0 16px}
.pol-corpo h4{font-size:.86rem;color:var(--t1);margin:18px 0 5px}
.pol-corpo h4:first-of-type{margin-top:0}
.pol-corpo p{font-size:.84rem;color:var(--t2);line-height:1.6;margin:0 0 8px}
.pol-corpo b{color:var(--t1)}
.pol-lista{margin:2px 0 10px 18px;padding:0}
.pol-lista li{font-size:.83rem;color:var(--t2);line-height:1.6;margin-bottom:2px}
.pol-nota{margin:18px 0 4px;padding:12px 14px;border-radius:10px;background:var(--bg);
  font-size:.78rem;color:var(--t3);line-height:1.5}
.den-corpo{display:flex;gap:22px;padding:16px 22px 20px;max-height:min(80vh,660px);overflow-y:auto}
.den-corpo > .den-intro{flex:0 0 300px;align-self:flex-start;margin-bottom:0}
.den-form{flex:1;min-width:0}
@media(max-width:760px){
  .den-corpo{flex-direction:column;gap:14px}
  .den-corpo > .den-intro{flex:none}
}
.den-intro{background:rgba(0,194,224,.07);border-left:3px solid var(--brand);border-radius:10px;
  padding:13px 15px;margin-bottom:16px}
.den-intro p{font-size:.83rem;color:var(--t2);line-height:1.55;margin:0 0 8px}
.den-intro p:last-child{margin-bottom:0}
.den-intro b{color:var(--t1)}
.den-obrigado{font-style:italic;color:var(--t3)!important}
.den-campo{margin-bottom:14px}
.den-campo label{display:block;font-size:.78rem;font-weight:700;color:var(--t2);
  margin-bottom:6px;letter-spacing:.2px}
.den-valor{font-size:.9rem;color:var(--t1);font-weight:600}
.den-campo textarea{width:100%;background:var(--bg);border:none;outline:none;border-radius:11px;
  padding:11px 13px;font-size:.88rem;color:var(--t1);font-family:inherit;resize:vertical}
.den-enviar{width:100%;margin-top:6px;padding:12px;border-radius:50px;background:var(--brand);
  color:#0d1f3c;font-weight:700;border:none;cursor:pointer;font-family:inherit;font-size:.9rem}
.den-trecho{background:var(--bg);border-left:3px solid var(--border);border-radius:8px;
  padding:10px 12px;font-size:.84rem;color:var(--t2);line-height:1.45;max-height:90px;overflow-y:auto}
.den-motivos{display:flex;flex-wrap:wrap;gap:7px}
.den-select{width:100%;background:var(--bg);border:none;outline:none;border-radius:11px;
  padding:11px 13px;font-size:.88rem;color:var(--t1);font-family:inherit;cursor:pointer}
.den-motivo{border:1.5px solid var(--border);background:none;border-radius:50px;padding:7px 13px;
  font-size:.79rem;color:var(--t2);cursor:pointer;font-family:inherit}
.den-motivo:hover{border-color:var(--brand)}
.den-motivo.on{border-color:#e24c6b;background:rgba(226,76,107,.1);color:var(--t1);font-weight:600}
.den-anon-op{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer}
.den-anon-op input{width:17px;height:17px;accent-color:var(--brand);margin-top:2px;flex-shrink:0}
.den-anon-op b{display:block;font-size:.85rem;color:var(--t1)}
.den-anon-op span span{font-size:.75rem;color:var(--t3);line-height:1.4;display:block;margin-top:2px}
.den-card{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-bottom:11px}
.den-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.den-motivo-tag{font-size:.7rem;font-weight:700;background:rgba(226,76,107,.14);color:#c8412f;
  border-radius:50px;padding:2px 10px}
.den-anon{font-size:.72rem;font-weight:600;color:var(--t2);background:var(--bg);
  border-radius:50px;padding:2px 9px}
.den-por{font-size:.75rem;color:var(--t3)}
.den-hora{margin-left:auto;font-size:.72rem;color:var(--t3)}
.den-linha{font-size:.8rem;color:var(--t2);margin-bottom:3px}
.den-linha b{color:var(--t1);font-weight:600}
.den-msg{background:var(--bg);border-radius:8px;padding:9px 11px;margin-top:7px;
  font-size:.83rem;color:var(--t1);line-height:1.45;white-space:pre-wrap}
.den-relato{margin-top:7px;font-size:.8rem;color:var(--t2);line-height:1.45}
/* Apuracao */
.den-clicavel{cursor:pointer;transition:border-color .12s}
.den-clicavel:hover{border-color:var(--brand)}
.den-acoes{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.den-btn{display:flex;align-items:center;gap:6px;border:none;border-radius:50px;
  padding:7px 14px;background:var(--brand);color:#0d1f3c;font-size:.79rem;font-weight:700;
  cursor:pointer;font-family:inherit}
.den-btn .msr{font-size:16px}
.den-btn.secundario{background:var(--bg);color:var(--t2)}
.den-btn.secundario:hover{background:var(--sidebar-hover);color:var(--t1)}
.den-sit{font-size:.68rem;font-weight:700;border-radius:50px;padding:2px 9px}
.sit-nova{background:var(--bg);color:var(--t3)}
.sit-aberto{background:rgba(245,158,11,.16);color:#b45309}
.sit-andamento{background:rgba(0,194,224,.16);color:#0097b2}
.sit-resolvido{background:rgba(37,211,102,.16);color:#0a8f4d}
.pc-voltar{display:flex;align-items:center;gap:7px;background:none;border:none;
  color:var(--brand-d);font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit;
  padding:0 0 14px}
.pc-voltar .msr{font-size:18px}
.apu-cols{display:flex;gap:22px}
.apu-esq{flex:1;min-width:0}
.apu-dir{flex:1;min-width:0}
.apu-hist{border-left:2px solid var(--border);padding:7px 0 7px 11px;margin-bottom:9px}
.apu-hist-topo{display:flex;align-items:baseline;gap:8px}
.apu-hist-topo b{font-size:.83rem;color:var(--t1)}
.apu-hist-topo span{font-size:.72rem;color:var(--t3);margin-left:auto}
.apu-hist-quem{font-size:.72rem;color:var(--t3)}
.apu-hist-obs{font-size:.8rem;color:var(--t2);line-height:1.45;margin-top:3px}
@media(max-width:760px){ .apu-cols{flex-direction:column;gap:0} }
/* ══ Painel de controle ══ */
.pc-modal .pc-box{background:var(--surface);border-radius:16px;width:min(96vw,1120px);
  height:min(88vh,760px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.pc-topo{display:flex;align-items:center;gap:11px;padding:14px 20px;border-bottom:1px solid var(--border)}
.pc-topo h3{font-size:1rem;color:var(--t1);margin:0}
.pc-topo .msr{font-size:22px;color:#8b5cf6}
.pc-empresa{font-size:.78rem;color:var(--t3);margin-left:auto;margin-right:8px}
.pc-corpo{flex:1;display:flex;min-height:0}
.pc-menu{width:224px;flex-shrink:0;border-right:1px solid var(--border);overflow-y:auto;
  padding:8px 0;background:var(--sidebar-bg)}
.pc-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 18px;border:none;
  background:none;cursor:pointer;font-size:.85rem;color:var(--t2);font-family:inherit;text-align:left}
.pc-item:hover{background:var(--sidebar-hover);color:var(--t1)}
.pc-item.on{background:rgba(139,92,246,.12);color:var(--t1);font-weight:600;
  box-shadow:inset 3px 0 0 #8b5cf6}
.pc-item .msr{font-size:19px;color:var(--t3)}
.pc-badge{margin-left:auto;background:#e24c6b;color:#fff;border-radius:50px;min-width:19px;
  height:19px;padding:0 6px;font-size:.68rem;font-weight:800;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.pc-item.on .msr{color:#8b5cf6}
.pc-area{flex:1;overflow-y:auto;padding:20px 24px}
.pc-cab{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.pc-cab h4{font-size:1.05rem;color:var(--t1);margin:0 0 3px}
.pc-cab span{font-size:.82rem;color:var(--t3);line-height:1.4}
.pc-acao{margin-left:auto;display:flex;align-items:center;gap:6px;border:none;border-radius:50px;
  padding:9px 16px;background:var(--brand);color:#0d1f3c;font-weight:700;font-size:.82rem;
  cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap}
.pc-acao .msr{font-size:17px}
.pc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pc-card{background:var(--bg);border-radius:12px;padding:15px 16px;display:flex;flex-direction:column;gap:2px}
.pc-num{font-size:1.7rem;font-weight:800;color:var(--t1);line-height:1.1}
.pc-rot{font-size:.8rem;color:var(--t2);font-weight:600}
.pc-nota{font-size:.72rem;color:var(--t3)}
.pc-card.rel{flex-direction:row;align-items:center;gap:11px;cursor:pointer;flex-wrap:wrap}
.pc-card.rel:hover{background:var(--sidebar-hover)}
.pc-card.rel .msr{font-size:21px;color:#8b5cf6}
.pc-card.rel b{font-size:.86rem;color:var(--t1);font-weight:600}
.pc-grafico{margin-top:14px;height:180px;border:1.5px dashed var(--border);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--t3)}
.pc-grafico .msr{font-size:32px}
.pc-grafico span:last-child{font-size:.82rem}
.pc-busca{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:10px;
  padding:9px 13px;margin-bottom:12px;max-width:340px}
.pc-busca .msr{font-size:17px;color:var(--t3)}
.pc-busca input{flex:1;background:none;border:none;outline:none;font-size:.85rem;
  color:var(--t1);font-family:inherit}
.pc-tabela{width:100%;border-collapse:collapse;font-size:.84rem}
.pc-tabela th{text-align:left;padding:9px 10px;color:var(--t3);font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border)}
.pc-tabela td{padding:11px 10px;border-bottom:1px solid var(--border);color:var(--t1)}
.pc-skel{display:block;height:10px;width:70%;border-radius:5px;background:var(--border)}
.pc-aviso{font-size:.76rem;color:var(--t3);margin-top:14px;line-height:1.5}
.risco-dim-lista{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border)}
.risco-dim-lista b{font-size:.86rem;color:var(--t1)}
.risco-dim-lista span{font-size:.78rem;color:var(--t3);margin-left:auto}
.ch-rasc{color:#e24c6b;font-weight:600}
.fo-acao{background:none;border:none;cursor:pointer;color:var(--t3);padding:2px 3px;
  line-height:1;opacity:0;transition:opacity .12s}
.fo-topic:hover .fo-acao{opacity:1}
.fo-acao:hover{color:var(--t1)}
.fo-acao.apagar:hover{color:#e24c6b}
.fo-acao .msr{font-size:16px}
.fo-novo{font-size:.62rem;font-weight:800;background:var(--brand);color:#0d1f3c;
  border-radius:50px;padding:2px 8px;margin-right:7px;letter-spacing:.3px;
  text-transform:uppercase}
/* Atalho no rodape do canal */
.vc-voltar{display:flex;align-items:center;gap:6px;background:none;border:none;padding:0;
  cursor:pointer;font-family:inherit;text-align:left;width:100%}
.vc-voltar .msr{font-size:14px;color:rgba(255,255,255,.4);transition:transform .12s}
.vc-voltar:hover .vc-connected-name{color:var(--brand)}
.vc-voltar:hover .msr{color:var(--brand);transform:translate(1px,-1px)}

/* Flutuante — canto direito, longe do campo de mensagem.
   Compacto por padrão; abre ao passar o mouse. */
/* No meio da altura, à direita: longe do campo de mensagem e fora do
   caminho da leitura. */
.vc-flut{position:fixed;right:20px;top:50%;margin-top:-21px;z-index:900;
  display:flex;align-items:center;gap:10px;
  background:rgba(19,43,74,.97);backdrop-filter:blur(8px);
  border:1px solid rgba(0,194,224,.35);border-radius:50px;padding:8px 9px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);cursor:pointer;
  opacity:0;transform:translateX(20px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,padding .18s ease}
.vc-flut.show{opacity:1;transform:none;pointer-events:auto}
.vc-flut:hover{border-color:var(--brand);padding-left:16px}

.vc-flut-pulso{width:9px;height:9px;border-radius:50%;background:#25d366;flex-shrink:0;
  animation:vcPulso 2s ease-in-out infinite;margin-left:5px}
@keyframes vcPulso{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){ .vc-flut-pulso{animation:none} }

/* O nome só aparece no hover: parado, o flutuante é um ponto discreto */
.vc-flut-info{display:flex;flex-direction:column;line-height:1.25;
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .2s ease,opacity .16s ease}
.vc-flut:hover .vc-flut-info{max-width:170px;opacity:1;margin-right:2px}
.vc-flut-info b{font-size:.82rem;color:#fff;font-weight:600}
.vc-flut-info span{font-size:.69rem;color:rgba(255,255,255,.5)}

.vc-flut-mic,.vc-flut-sair{width:34px;height:34px;border-radius:50%;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vc-flut-mic{background:rgba(255,255,255,.12);color:#fff}
.vc-flut-mic:hover{background:rgba(255,255,255,.22)}
.vc-flut-mic.mudo{background:rgba(226,76,107,.9)}
.vc-flut-mic .msr,.vc-flut-sair .msr{font-size:18px}
.vc-flut-sair{background:#e24c6b;color:#fff}
.vc-flut-sair:hover{background:#c8412f}

/* Enquanto arrasta, sem transição: ela faria o flutuante escorregar atrás
   do cursor em vez de acompanhá-lo. */
.vc-flut.arrastando{transition:none;cursor:grabbing;border-color:var(--brand)}

@media(max-width:560px){
  .vc-flut{right:12px}
  .vc-flut:hover .vc-flut-info{max-width:120px}
}
/* Modo "sala é o canal": o avatar vira presença visual, não fonte de som.
   A silhueta mais leve comunica isso sem precisar de legenda. */
.of-modo-auto .of-aviso-modo{display:flex}
.of-aviso-modo{display:none;align-items:center;gap:8px;font-size:.76rem;
  color:var(--t3);background:var(--bg);border-radius:50px;padding:5px 13px}
.of-aviso-modo .msr{font-size:15px;color:var(--brand-d)}
/* Aceite no primeiro acesso */
.aceite-modal{z-index:99998}

/* Enquanto não aceitar, o aplicativo fica embaçado e sem interação: a
   pessoa não deve ler conversa alheia antes de saber que as dela podem
   ser lidas. */
body.travado-aceite .screen,
body.travado-aceite .nav-rail,
body.travado-aceite .side-col{ filter:blur(7px); pointer-events:none;
  user-select:none }
body.travado-aceite .aceite-modal{ filter:none; pointer-events:auto }
.ace-corpo{padding:6px 26px 24px;max-height:min(80vh,660px);overflow-y:auto}
.ace-lead{font-size:.92rem;color:var(--t1);line-height:1.55;margin:0 0 20px}
.ace-item{display:flex;gap:13px;margin-bottom:16px}
.ace-item .msr{font-size:21px;color:var(--brand-d);flex-shrink:0;margin-top:2px}
.ace-item b{display:block;font-size:.88rem;color:var(--t1);margin-bottom:3px}
.ace-item div{font-size:.83rem;color:var(--t2);line-height:1.5}
.ace-docs{font-size:.83rem;color:var(--t2);background:var(--bg);border-radius:10px;
  padding:12px 14px;margin:20px 0 16px;line-height:1.6}
.ace-docs a{color:var(--brand-d);font-weight:600}
.ace-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-bottom:16px}
.ace-check input{width:19px;height:19px;accent-color:var(--brand);margin-top:1px;
  flex-shrink:0;cursor:pointer}
.ace-check span{font-size:.87rem;color:var(--t1);line-height:1.45}
#aceite-btn:disabled{opacity:.4;cursor:not-allowed}
.ace-nota{font-size:.76rem;color:var(--t3);line-height:1.5;margin:14px 0 0;text-align:center}
/* Conferir imagem antes de enviar */
.imgp-para{font-size:.82rem;color:var(--t3);margin-bottom:10px}
.imgp-para b{color:var(--t1);font-weight:600}
.imgp-foto{background:var(--bg);border-radius:12px;padding:10px;display:flex;
  align-items:center;justify-content:center;max-height:300px;overflow:hidden}
.imgp-foto img{max-width:100%;max-height:280px;border-radius:8px;display:block}
.imgp-info{font-size:.74rem;color:var(--t3);margin:8px 0 12px}
#img-prev-legenda{width:100%;background:var(--bg);border:none;outline:none;
  border-radius:11px;padding:11px 13px;font-size:.88rem;color:var(--t1);
  font-family:inherit}
.imgp-acoes{display:flex;gap:9px;margin-top:14px}
.imgp-cancelar,.imgp-enviar{flex:1;padding:11px;border-radius:50px;border:none;
  font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px}
.imgp-cancelar{background:var(--bg);color:var(--t2)}
.imgp-cancelar:hover{background:var(--sidebar-hover);color:var(--t1)}
.imgp-enviar{background:var(--brand);color:#0d1f3c}
.imgp-enviar .msr{font-size:17px}
/* Riscos psicossociais */
.risco-sit{margin-left:auto;font-size:.72rem;font-weight:700;border-radius:50px;padding:3px 11px}
.risco-sit.rasc{background:var(--bg);color:var(--t3)}
.risco-sit.aberta{background:rgba(0,194,224,.16);color:#0086a0}
.risco-sit.fech{background:rgba(37,211,102,.15);color:#0a8f4d}
.risco-linha{display:flex;align-items:center;gap:7px;font-size:.81rem;color:var(--t3);margin-bottom:4px}
.risco-linha .msr{font-size:16px}
.risco-dim{margin-bottom:13px}
.risco-dim-topo{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.risco-dim-topo b{font-size:.88rem;color:var(--t1)}
.risco-nota{font-size:.76rem;font-weight:700;border-radius:50px;padding:2px 10px;margin-left:auto}
.risco-nota.ok{background:rgba(37,211,102,.15);color:#0a8f4d}
.risco-nota.atencao{background:rgba(245,158,11,.18);color:#b45309}
.risco-nota.critico{background:rgba(226,76,107,.15);color:#c8412f}
.risco-ok{color:#0a8f4d}
.risco-atencao{color:#b45309}
.risco-critico{color:#c8412f}
.risco-barra{height:7px;border-radius:50px;background:var(--bg);overflow:hidden}
.risco-barra i{display:block;height:100%;border-radius:50px}
.risco-barra i.ok{background:#25d366}
.risco-barra i.atencao{background:#f59e0b}
.risco-barra i.critico{background:#e24c6b}
.risco-q{margin-bottom:20px}
.risco-q-txt{font-size:.9rem;color:var(--t1);line-height:1.45;margin-bottom:9px}
.risco-q-txt span{color:var(--t3);font-weight:600;margin-right:4px}
.risco-escala{display:flex;gap:8px}
.risco-escala label{flex:1;cursor:pointer}
.risco-escala input{position:absolute;opacity:0;pointer-events:none}
.risco-escala span{display:flex;align-items:center;justify-content:center;height:40px;
  border:1.5px solid var(--border);border-radius:10px;font-size:.88rem;color:var(--t2);
  transition:background .1s}
.risco-escala label:hover span{border-color:var(--brand)}
.risco-escala input:checked + span{background:var(--brand);border-color:var(--brand);
  color:#0d1f3c;font-weight:700}
.risco-legenda{display:flex;justify-content:space-between;font-size:.7rem;color:var(--t3);
  margin-top:4px}
/* Controle de acesso */
.tela-final{position:fixed;inset:0;z-index:99999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px}
.tf-caixa{max-width:420px;text-align:center}
.tf-caixa .msr{font-size:52px;color:var(--t3);margin-bottom:14px}
.tf-caixa h3{font-size:1.3rem;color:var(--t1);margin:0 0 10px}
.tf-caixa p{font-size:.92rem;color:var(--t2);line-height:1.6;margin:0 0 22px}
.tf-caixa button{border:none;border-radius:50px;padding:12px 28px;background:var(--brand);
  color:#0d1f3c;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit}
.acoes-linha{display:flex;gap:4px;justify-content:flex-end}
.acoes-linha button{background:none;border:none;cursor:pointer;padding:5px;border-radius:7px;
  color:var(--t3);line-height:1}
.acoes-linha button:hover{background:var(--bg);color:var(--t1)}
.acoes-linha button.bloquear:hover{color:#e24c6b}
.acoes-linha button.liberar{color:#0a8f4d}
.acoes-linha .msr{font-size:18px}
tr.bloqueado td{opacity:.55}
/* Barra da seleção de mensagens */
.sel-barra{display:none;align-items:center;gap:12px;padding:9px 16px;
  background:var(--brand);color:#0d1f3c;flex-shrink:0}
.sel-barra.show{display:flex}
.sel-barra span{flex:1;font-size:.88rem;font-weight:600}
.sel-cancelar,.sel-acao{background:none;border:none;cursor:pointer;color:#0d1f3c;
  padding:5px;border-radius:8px;display:flex;align-items:center}
.sel-cancelar:hover,.sel-acao:hover{background:rgba(13,31,60,.12)}
.sel-cancelar svg,.sel-acao svg{width:19px;height:19px}
body.selecionando .msg{cursor:pointer}
body.selecionando .msg:hover{opacity:.85}
.msg.selecionada .msg-bubble,.msg.selecionada .bubble{outline:2px solid var(--brand);
  outline-offset:2px}
.dd-item svg{width:18px;height:18px;flex-shrink:0;color:var(--t3)}
.campo-erro{outline:2px solid #e24c6b!important;outline-offset:1px;
  animation:tremeCampo .3s}
@keyframes tremeCampo{0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.campo-erro{animation:none}}

/* Empresas-cliente */
.parc-sep{font-size:.72rem;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:.5px;margin:18px 0 12px;padding-top:14px;border-top:1px solid var(--border)}
.parc-dica{font-size:.78rem;color:var(--t3);line-height:1.5;margin:2px 0 4px}
.parc-cota{display:flex;align-items:center;gap:9px;padding:12px 16px;border-radius:11px;
  background:var(--bg);font-size:.85rem;color:var(--t2);margin-bottom:14px;flex-wrap:wrap}
.parc-cota .msr{font-size:18px;color:var(--brand-d)}
.parc-cota b{color:var(--t1)}
.parc-cota.cheia{background:rgba(245,158,11,.12)}
.parc-cota.cheia .msr{color:#b45309}
.parc-cota span:last-child{font-size:.78rem;color:var(--t3);margin-left:auto}
.parc-resp{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--t3);
  margin-top:8px}
.parc-resp .msr{font-size:15px}
#parc-modal, #cont-modal, #colab-modal{ z-index:300 }

/* Palavras-chave */
.pal-termos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.pal-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);
  border-radius:50px;padding:6px 8px 6px 14px;font-size:.85rem;color:var(--t1)}
.pal-chip button{background:none;border:none;color:var(--t3);cursor:pointer;
  font-size:.75rem;padding:2px 4px;border-radius:50%;line-height:1}
.pal-chip button:hover{color:#e24c6b;background:rgba(226,76,107,.12)}
mark.pal-marca{background:rgba(245,158,11,.35);color:inherit;border-radius:3px;padding:0 2px}
.pal-quem{display:flex;flex-wrap:wrap;gap:14px;font-size:.79rem;color:var(--t3);
  margin-top:9px}
.pal-quem b{color:var(--t2);font-weight:600}

/* Força da senha */
.sn-forca{height:4px;background:var(--border);border-radius:2px;margin-top:7px;overflow:hidden}
.sn-forca i{display:block;height:100%;width:0;border-radius:2px;transition:width .2s,background .2s}
.sn-dica{display:block;font-size:.75rem;color:var(--t3);margin-top:5px}

/* Ajuda */
.faq-item{border-bottom:1px solid var(--border);padding:14px 0}
.faq-item:last-child{border-bottom:none}
.faq-item b{display:block;font-size:.9rem;color:var(--t1);margin-bottom:5px}
.faq-item p{margin:0;font-size:.85rem;color:var(--t2);line-height:1.6}

.au-perfil{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;
  border-radius:11px;cursor:pointer;border:1.5px solid transparent}
.au-perfil:hover{background:var(--bg)}
.au-perfil:has(input:checked){border-color:var(--brand);background:rgba(0,194,224,.06)}
.au-perfil input{margin-top:3px;accent-color:var(--brand);flex-shrink:0}
.au-perfil b{display:block;font-size:.89rem;color:var(--t1)}
.au-perfil i{display:block;font-size:.78rem;color:var(--t3);font-style:normal;margin-top:1px}

.port-linha{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.port-linha span{font-size:.75rem;color:var(--t3);white-space:nowrap}
.port-linha input{flex:1;accent-color:var(--brand)}
.port-linha b{font-size:.82rem;color:var(--t1);min-width:26px;text-align:right;
  font-variant-numeric:tabular-nums}

/* Modo apresentação */
.apre-barra{display:flex;align-items:center;gap:12px;padding:10px 18px;
  background:var(--brand);color:#0d1f3c;font-size:.85rem;flex-shrink:0;flex-wrap:wrap}
.apre-barra .msr{font-size:19px}
.apre-quem{font-weight:700}
.apre-sit{flex:1;opacity:.85;font-size:.8rem}
.apre-barra button{border:none;border-radius:50px;padding:6px 14px;font-size:.78rem;
  font-weight:700;cursor:pointer;font-family:inherit;background:rgba(13,31,60,.14);
  color:#0d1f3c}
.apre-barra button:hover{background:rgba(13,31,60,.24)}
.apre-barra button.fim{background:#0d1f3c;color:#fff}
.vc-palavra{position:absolute;top:8px;right:8px;width:30px;height:30px;border:none;
  border-radius:50%;cursor:pointer;background:rgba(13,31,60,.55);color:#fff;
  display:flex;align-items:center;justify-content:center}
.vc-palavra:hover{background:rgba(13,31,60,.8)}
.vc-palavra.on{background:#25d366;color:#0b2418}
.vc-palavra .msr{font-size:16px}
.vc-room-btn.travado{opacity:.5;position:relative}
.vc-room-btn.travado::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(226,76,107,.8)}

/* Chamadas de voz e vídeo */
.lig-tela{position:fixed;inset:0;z-index:99990;background:#0d1f3c;display:none;
  align-items:center;justify-content:center}
.lig-tela.show{display:flex}
.lig-remoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#0d1f3c;display:none}
.lig-tela.com-video .lig-remoto{display:block}
.lig-tela.com-video .lig-info{opacity:0;pointer-events:none}
.lig-local{position:absolute;right:18px;top:18px;width:150px;border-radius:12px;
  background:#1a2b4a;z-index:2;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.lig-info{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:5px;color:#fff;transition:opacity .3s}
.lig-av{width:110px;height:110px;border-radius:50%;overflow:hidden;margin-bottom:14px;
  background:#1a2b4a;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;font-weight:700;color:#fff}
.lig-av img{width:100%;height:100%;object-fit:cover}
.lig-info b{font-size:1.4rem;font-weight:600}
.lig-info span{font-size:.92rem;color:rgba(255,255,255,.6)}
.lig-tempo{font-size:1.05rem!important;color:var(--brand)!important;
  font-variant-numeric:tabular-nums}
.lig-acoes{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);
  display:flex;gap:18px;z-index:3}
.lig-btn{width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;
  justify-content:center;transition:background .12s}
.lig-btn:hover{background:rgba(255,255,255,.26)}
.lig-btn .msr{font-size:25px}
.lig-btn .ic-off{display:none}
.lig-btn.mudo{background:rgba(226,76,107,.9)}
.lig-btn.mudo .ic-on{display:none}
.lig-btn.mudo .ic-off{display:block}
.lig-btn.desligar{background:#e24c6b}
.lig-btn.desligar:hover{background:#c8412f}
.lig-btn.atender{background:#25d366;width:64px;height:64px}
.lig-btn.recusar{background:#e24c6b;width:64px;height:64px}

.lig-recebendo{position:fixed;inset:0;z-index:99995;background:rgba(13,31,60,.75);
  backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}
.lig-recebendo.show{display:flex}
.lig-rec-caixa{background:var(--surface);border-radius:20px;padding:32px 36px;
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lig-rec-caixa b{font-size:1.25rem;color:var(--t1);margin-top:4px}
.lig-rec-caixa > span{font-size:.88rem;color:var(--t3);margin-top:3px}
.lig-rec-acoes{display:flex;gap:30px;margin-top:26px}

.lig-item{display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px;
  cursor:pointer}
.lig-item:hover{background:var(--sidebar-hover)}
.lig-item-av{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0}
.lig-item-av img{width:100%;height:100%;object-fit:cover}
.lig-item-main{flex:1;min-width:0}
.lig-item-main b{display:block;font-size:.9rem;color:var(--t1)}
.lig-item-main span{display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--t3)}
.lig-item-hora{font-size:.72rem;color:var(--t3);text-align:right;line-height:1.35}
.lig-item-btn{background:none;border:none;cursor:pointer;color:var(--brand-d);
  padding:6px;border-radius:8px}
.lig-item-btn:hover{background:var(--bg)}

/* Figurinhas */
.fig-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px;
  max-height:280px;overflow-y:auto}
.fig-item{position:relative;aspect-ratio:1;background:var(--bg);border-radius:11px;
  overflow:hidden;cursor:pointer}
.fig-item img{width:100%;height:100%;object-fit:contain;display:block}
.fig-item:hover{outline:2px solid var(--brand)}
.fig-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border:none;
  border-radius:50%;background:rgba(13,31,60,.75);color:#fff;font-size:.7rem;
  cursor:pointer;opacity:0;transition:opacity .12s;line-height:1}
.fig-item:hover .fig-x{opacity:1}
.fig-vazio{grid-column:1/-1;text-align:center;padding:30px 10px;color:var(--t3)}
.fig-vazio .msr{display:block;font-size:34px;margin-bottom:8px}
.fig-vazio span{font-size:.85rem}
.fig-palco{position:relative;width:320px;max-width:100%;margin:0 auto;border-radius:12px;
  overflow:hidden}
.fig-palco canvas{display:block;width:100%;cursor:grab;touch-action:none}
.fig-palco canvas:active{cursor:grabbing}
.fig-guia{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(0,194,224,.7)}
.fig-guia.redondo{border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,194,224,.7),
  0 0 0 999px rgba(255,255,255,.55)}
.fig-controle{display:flex;align-items:center;gap:10px;margin:14px 0 10px}
.fig-controle .msr{font-size:18px;color:var(--t3)}
.fig-controle input{flex:1;accent-color:var(--brand)}
.fig-formas{display:flex;gap:8px}
.fig-forma{flex:1;border:1.5px solid var(--border);background:none;border-radius:50px;
  padding:8px;font-size:.83rem;color:var(--t2);cursor:pointer;font-family:inherit}
.fig-forma.on{border-color:var(--brand);background:rgba(0,194,224,.07);
  color:var(--t1);font-weight:600}

/* Avaliação */
.quiz-q{margin-bottom:22px}
.quiz-tit{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.quiz-num{width:24px;height:24px;border-radius:50%;background:var(--bg);color:var(--t2);
  display:flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800;
  flex-shrink:0}
.quiz-tit b{flex:1;font-size:.92rem;color:var(--t1);line-height:1.45}
.quiz-alt{display:flex;align-items:center;gap:10px;padding:10px 13px;margin-left:34px;
  border:1.5px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:pointer}
.quiz-alt:hover{border-color:var(--t3)}
.quiz-alt input{accent-color:var(--brand);flex-shrink:0}
.quiz-alt span{flex:1;font-size:.86rem;color:var(--t1)}
.quiz-alt.marcada{border-color:var(--brand);background:rgba(0,194,224,.06)}
.quiz-alt.certa{border-color:#25d366;background:rgba(37,211,102,.08)}
.quiz-alt.errada{border-color:#e24c6b;background:rgba(226,76,107,.08)}
.quiz-ic{font-size:18px;flex-shrink:0}
.quiz-alt.certa .quiz-ic{color:#25d366}
.quiz-alt.errada .quiz-ic{color:#e24c6b}
.quiz-nota{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:12px;
  margin-bottom:20px}
.quiz-nota.ok{background:rgba(37,211,102,.12)}
.quiz-nota.nao{background:rgba(245,158,11,.14)}
.quiz-nota .msr{font-size:30px}
.quiz-nota.ok .msr{color:#0a8f4d}
.quiz-nota.nao .msr{color:#b45309}
.quiz-nota b{display:block;font-size:1.05rem;color:var(--t1)}
.quiz-nota span{display:block;font-size:.82rem;color:var(--t2);margin-top:2px}
.quiz-rodape{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border)}

.perg-alt{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.perg-alt input[type=radio]{accent-color:#25d366;flex-shrink:0;width:17px;height:17px}
.perg-alt input[type=text]{flex:1;margin:0}

/* Escolha de inscritos */
.selinsc-setor{display:flex;align-items:center;justify-content:space-between;
  padding:10px 4px 6px;font-size:.74rem;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.4px}
.selinsc-setor button{background:none;border:none;color:var(--brand-d);cursor:pointer;
  font-size:.73rem;font-weight:700;font-family:inherit;text-transform:none;letter-spacing:0}
.selinsc-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
  cursor:pointer}
.selinsc-item:hover{background:var(--bg)}
.selinsc-item.ja{opacity:.55;cursor:default}
.selinsc-item input{accent-color:var(--brand);flex-shrink:0}
.selinsc-item div{flex:1;min-width:0}
.selinsc-item b{display:block;font-size:.87rem;color:var(--t1)}
.selinsc-item span{display:block;font-size:.76rem;color:var(--t3)}
.selinsc-ja{font-size:.71rem;color:var(--t3);background:var(--bg);border-radius:50px;
  padding:2px 9px;white-space:nowrap}

#quiz-modal,#pergunta-modal,#selinsc-modal{z-index:310}

/* Aniversário */
/* O emoji fica dentro do avatar, não fora: o card tem overflow oculto e
   qualquer coisa que passe da borda é cortada. */
.vc-tile-av{position:relative}
.vc-bday{position:absolute;top:6px;right:8px;font-size:16px;line-height:1;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));pointer-events:none;z-index:3;
  background:rgba(255,255,255,.92);border-radius:50%;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center}

/* Sem etiqueta de texto: o card é pequeno e tem recorte, e qualquer coisa
   ao lado do nome era cortada. O emoji sozinho já comunica, e o title
   explica para quem passar o cursor. */
.ch-bday{margin-left:5px;font-size:.9rem;vertical-align:-1px}

/* Curso na área principal */
#curso-area{flex:1;min-width:0;background:var(--bg)}
.cs-principal{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.cs-barra{display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:var(--chat-top);border-bottom:1px solid var(--border);flex-shrink:0}
.cs-barra span{font-size:.8rem;font-weight:700;color:var(--t3);
  text-transform:uppercase;letter-spacing:.5px}
.cs-corpo{flex:1;overflow-y:auto;padding:26px 32px 40px;max-width:920px;
  width:100%;margin:0 auto}

.cs-topo{display:flex;align-items:flex-start;gap:18px;margin-bottom:18px}
.cs-tit{flex:1;min-width:0}
.cs-tit h2{margin:0 0 7px;font-size:1.55rem;color:var(--t1);line-height:1.25}
.cs-tit p{margin:0 0 12px;font-size:.92rem;color:var(--t2);line-height:1.6}
.cs-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.8rem;color:var(--t3)}
.cs-meta span{display:flex;align-items:center;gap:5px}
.cs-meta .msr{font-size:15px}

.cs-chat-btn{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);
  background:var(--surface);border-radius:50px;padding:9px 17px;cursor:pointer;
  font-family:inherit;font-size:.84rem;font-weight:600;color:var(--t2);flex-shrink:0}
.cs-chat-btn:hover{border-color:var(--brand);color:var(--t1)}
.cs-chat-btn .msr{font-size:18px}

.cs-modulos{margin-top:24px}
.mod-add{display:flex;align-items:center;gap:6px;margin-left:37px;margin-top:4px;
  background:none;border:1px dashed var(--border);border-radius:9px;padding:9px 14px;
  cursor:pointer;font-family:inherit;font-size:.82rem;color:var(--t3);width:calc(100% - 37px)}
.mod-add:hover{border-color:var(--brand);color:var(--brand-d)}
.mod-add .msr{font-size:16px}

/* Conversa do treinamento */
.curso-chat{width:0;flex-shrink:0;background:var(--sidebar-bg);display:flex;
  flex-direction:column;overflow:hidden;transition:width .2s ease;
  border-left:1px solid var(--border)}
.curso-chat.show{width:340px}
.cc-topo{display:flex;align-items:center;gap:9px;padding:14px 16px;
  border-bottom:1px solid var(--border);flex-shrink:0}
.cc-topo .msr{font-size:19px;color:var(--brand-d)}
.cc-topo b{flex:1;font-size:.9rem;color:var(--t1)}
.cc-msgs{flex:1;overflow-y:auto;padding:14px 14px 8px}
.cc-msg{display:flex;gap:8px;margin-bottom:12px}
.cc-msg.meu{justify-content:flex-end}
.cc-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0}
.cc-av img{width:100%;height:100%;object-fit:cover}
.cc-bolha{max-width:76%;background:var(--recv);border-radius:12px;padding:9px 12px}
.cc-msg.meu .cc-bolha{background:var(--sent)}
.cc-bolha b{display:block;font-size:.76rem;color:var(--brand-d);margin-bottom:3px}
.cc-bolha p{margin:0;font-size:.86rem;color:var(--t1);line-height:1.5;
  word-break:break-word}
.cc-bolha i{display:block;font-size:.68rem;color:var(--t3);font-style:normal;
  text-align:right;margin-top:3px}
.cc-envio{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);
  flex-shrink:0}
.cc-envio input{flex:1;background:var(--bg);border:none;outline:none;border-radius:50px;
  padding:10px 15px;font-size:.86rem;color:var(--t1);font-family:inherit}
.cc-envio button{border:none;border-radius:50%;width:38px;height:38px;background:var(--brand);
  color:#0d1f3c;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0}
.cc-envio button svg{width:17px;height:17px}

.curso-card.on{border-color:var(--brand);background:rgba(0,194,224,.06)}

/* O nome da empresa no topo dos painéis */
.sp-top-id{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.sp-top-id .s-top-company{font-size:.7rem;font-weight:700;color:var(--brand-d);
  text-transform:uppercase;letter-spacing:.6px}

@media(max-width:900px){
  .curso-chat.show{width:100%;position:absolute;inset:0;z-index:5}
  .cs-corpo{padding:18px 16px 32px}
}

/* Treinamentos */
.curso-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:15px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .12s}
.curso-card:hover{border-color:var(--brand)}
.curso-topo{display:flex;align-items:flex-start;gap:10px;margin-bottom:5px}
.curso-topo b{flex:1;font-size:.95rem;color:var(--t1)}
.curso-sit{font-size:.74rem;font-weight:700;white-space:nowrap}
.curso-card p{margin:0 0 9px;font-size:.83rem;color:var(--t2);line-height:1.5}
.curso-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.76rem;color:var(--t3)}
.curso-meta span{display:flex;align-items:center;gap:4px}
.curso-meta .msr{font-size:14px}
.curso-aberto{background:rgba(37,211,102,.14);color:#0a8f4d;border-radius:50px;
  padding:1px 9px;font-weight:600}
.curso-setor{background:var(--bg);border-radius:50px;padding:1px 9px}

.curso-cabeca{padding:4px 2px 18px;border-bottom:1px solid var(--border);margin-bottom:16px}
.curso-cabeca h2{margin:0 0 6px;font-size:1.25rem;color:var(--t1)}
.curso-cabeca p{margin:0 0 10px;font-size:.87rem;color:var(--t2);line-height:1.6}
.curso-recado{background:var(--bg);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;
  padding:11px 14px;margin-top:12px;font-size:.85rem;color:var(--t2);line-height:1.55}

.mod-bloco{margin-bottom:18px}
.mod-topo{display:flex;align-items:flex-start;gap:11px;margin-bottom:9px}
/* O número no círculo do módulo.
   Branco sobre o tom escuro da marca: o texto escuro anterior sumia no
   fundo, e a altura de linha da fonte o empurrava para fora do centro. */
.mod-topo .mod-num{width:28px;height:28px;border-radius:50%;
  background:var(--brand-d);color:#fff;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;line-height:1;padding:0;margin:0;
  font-variant-numeric:tabular-nums}

.curso-pessoas{display:flex;align-items:center;gap:9px;width:100%;background:var(--bg);
  border:1px dashed var(--border);border-radius:11px;padding:11px 14px;cursor:pointer;
  font-family:inherit;font-size:.87rem;color:var(--t2)}
.curso-pessoas:hover{border-color:var(--brand);color:var(--t1)}
.curso-pessoas .msr{font-size:18px}
#cpes-modal{z-index:320}

/* Campo obrigatório */
.obrig{color:#e24c6b;font-style:normal;font-weight:700;margin-left:1px}

/* Botão com texto na tabela do painel */
.pc-btn-txt{display:inline-flex;align-items:center;gap:5px;background:var(--bg);
  border:1px solid var(--border);border-radius:8px;padding:5px 11px;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--t2);white-space:nowrap}
.pc-btn-txt:hover{border-color:var(--brand);color:var(--t1)}
.pc-btn-txt .msr{font-size:15px}
.mod-topo > div{flex:1}
.mod-topo b{display:block;font-size:.92rem;color:var(--t1)}
/* Só o span da descrição, não o do número — `.mod-topo span` alcançava os
   dois, e por ter especificidade maior vencia o `.mod-num`: o número
   herdava o cinza e o display:block, saindo do centro do círculo. */
.mod-topo > div > span{display:block;font-size:.79rem;color:var(--t3);margin-top:2px}
.mod-acao{background:none;border:none;cursor:pointer;color:var(--t3);padding:5px;
  border-radius:7px;display:flex}
.mod-acao:hover{background:var(--bg);color:var(--t1)}
.mod-acao .msr{font-size:17px}

.cont-item{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-left:37px;
  border-radius:10px;cursor:pointer;border:1px solid var(--border);margin-bottom:6px}
.cont-item:hover{border-color:var(--brand);background:var(--bg)}
.cont-ic{font-size:22px;flex-shrink:0}
.cont-txt{flex:1;min-width:0}
.cont-txt b{display:block;font-size:.86rem;color:var(--t1)}
.cont-txt span{display:block;font-size:.77rem;color:var(--t3);margin-top:1px}
.cont-tipo{font-size:.72rem;color:var(--t3);background:var(--bg);border-radius:50px;
  padding:2px 9px;white-space:nowrap}
.cont-vazio{margin-left:37px;font-size:.8rem;color:var(--t3);padding:8px 0}

.curso-acoes{display:flex;gap:9px;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--border);flex-wrap:wrap}

.video-quadro{position:relative;width:100%;padding-bottom:56.25%;background:#000;
  border-radius:0 0 12px 12px;overflow:hidden}
.video-quadro iframe{position:absolute;inset:0;width:100%;height:100%}

.insc-item{display:flex;align-items:center;gap:11px;padding:10px 4px;
  border-bottom:1px solid var(--border)}
.insc-item:last-child{border-bottom:none}
.insc-txt{flex:1}
.insc-txt b{display:block;font-size:.87rem;color:var(--t1)}
.insc-txt span{display:block;font-size:.76rem;color:var(--t3)}
.insc-sit{font-size:.74rem;font-weight:700;white-space:nowrap}

#curso-modal,#cont-modal,#video-modal,#inscritos-modal,#modulo-modal{z-index:300}

/* Anotações */
.nota-card{background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .12s}
.nota-card:hover{border-color:var(--brand)}
.nota-card b{display:block;font-size:.9rem;color:var(--t1);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nota-card span{display:block;font-size:.8rem;color:var(--t2);line-height:1.45;
  max-height:2.9em;overflow:hidden}
.nota-card i{display:block;font-size:.71rem;color:var(--t3);font-style:normal;margin-top:6px}
.nota-tit{width:100%;background:none;border:none;outline:none;font-size:1.05rem;
  font-weight:700;color:var(--t1);font-family:inherit;padding:0 0 8px;
  border-bottom:1px solid var(--border);margin-bottom:12px}
.nota-corpo{width:100%;background:var(--bg);border:none;outline:none;border-radius:11px;
  padding:13px;font-size:.92rem;color:var(--t1);font-family:inherit;line-height:1.6;
  resize:vertical;min-height:200px}
.nota-rodape{display:flex;align-items:center;gap:10px;margin-top:14px}
.nota-rodape > span{flex:1;font-size:.76rem;color:var(--t3)}
.nota-apagar{background:none;border:none;color:#e24c6b;font-size:.85rem;font-weight:600;
  cursor:pointer;font-family:inherit;padding:8px 12px;border-radius:50px}
.nota-apagar:hover{background:rgba(226,76,107,.1)}

/* Escolha de cor da plataforma */
.pal-grade{display:flex;flex-wrap:wrap;gap:8px}
.pal-op{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);
  background:none;border-radius:50px;padding:7px 14px 7px 9px;cursor:pointer;
  font-family:inherit;font-size:.82rem;color:var(--t2)}
.pal-op:hover{border-color:var(--t3)}
.pal-op.on{border-color:var(--brand);background:rgba(0,194,224,.07);
  color:var(--t1);font-weight:600}
.pal-op i{width:16px;height:16px;border-radius:50%;flex-shrink:0}

.ct-meu-status{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--t3);
  font-style:italic;margin-top:3px}
.ct-meu-status i{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* Status na foto do perfil e etiquetas de prioridade */
.nav-user-av{position:relative}
.av-status{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border-radius:50%;border:2px solid var(--rail-bg);display:none}
.av-status.show{display:block}
.prio-etiq{display:inline-block;font-size:.64rem;font-weight:800;border-radius:50px;
  padding:1px 7px;margin-right:6px;text-transform:uppercase;letter-spacing:.3px}
.prio-etiq.importante{background:rgba(245,158,11,.18);color:#b45309}
.prio-etiq.urgente{background:rgba(226,76,107,.16);color:#c8412f}

/* O campo de texto muda de tom ao receber o foco — sem isso não fica claro
   onde o cursor está, sobretudo em telas grandes. */
.input-box:focus-within{background:var(--surface);
  box-shadow:0 0 0 2px var(--brand), 0 2px 12px rgba(0,0,0,.06)}
.input-box{transition:background .15s ease, box-shadow .15s ease}

/* Registro de acessos */
.log-perfil{display:block;font-size:.72rem;color:var(--t3)}
.log-ic{font-size:15px;color:var(--t3);vertical-align:-2px;margin-right:3px}
.log-det{display:block;font-size:.76rem;color:var(--t3);margin-left:21px}
/* Busca dentro da conversa */
.busca-conversa{display:none;align-items:center;gap:9px;padding:8px 14px;
  background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.busca-conversa.show{display:flex}
.busca-conversa > svg{width:16px;height:16px;color:var(--t3);flex-shrink:0}
.busca-conversa input{flex:1;background:var(--bg);border:none;outline:none;
  border-radius:50px;padding:8px 13px;font-size:.86rem;color:var(--t1);font-family:inherit}
.busca-conversa span{font-size:.76rem;color:var(--t3);white-space:nowrap}
.busca-conversa button{background:none;border:none;cursor:pointer;color:var(--t3);
  padding:5px;border-radius:7px;display:flex}
.busca-conversa button:hover{background:var(--bg);color:var(--t1)}
.busca-conversa button svg{width:17px;height:17px}
mark.busca-marca{background:rgba(0,194,224,.35);color:inherit;border-radius:3px;padding:0 1px}
.msg-w.atual .bubble{outline:2px solid var(--brand);outline-offset:2px}
.dd-item svg{width:18px;height:18px;flex-shrink:0;color:var(--t3)}
.s-more-alt{color:var(--t3)}
.s-more-alt:hover{color:var(--t1);background:var(--sidebar-hover)}
.s-more-alt svg{width:17px;height:17px}
.sp-top .s-more-alt,.s-acts .s-more-alt{margin-left:2px}
.tag-gestor{font-size:.66rem;font-weight:700;background:rgba(0,194,224,.15);color:#0086a0;
  border-radius:50px;padding:2px 9px;margin-left:7px;vertical-align:middle}
.tag-bloq{display:inline-flex;align-items:center;gap:3px;font-size:.66rem;font-weight:700;
  background:rgba(226,76,107,.14);color:#c8412f;border-radius:50px;padding:2px 9px 2px 6px;
  margin-left:7px;vertical-align:middle}
.tag-bloq .msr{font-size:12px}
.btn-liberar{display:flex;align-items:center;gap:5px;border:1.5px solid #0a8f4d;
  background:none;border-radius:50px;padding:4px 12px;color:#0a8f4d;font-size:.76rem;
  font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-liberar:hover{background:rgba(37,211,102,.1)}
.btn-liberar .msr{font-size:15px}
/* Conversas — leitura pelo administrador */
.chat-adm-linha{cursor:pointer}
.chat-adm-linha:hover{background:var(--sidebar-hover)}
.chat-adm-msgs{margin-top:8px;max-height:280px;overflow-y:auto;display:flex;
  flex-direction:column;gap:5px}
.chat-adm-linha-msg{display:flex;gap:8px;align-items:baseline;font-size:.82rem;
  padding:5px 9px;border-radius:8px;background:var(--bg)}
.chat-adm-linha-msg.propria{background:rgba(0,194,224,.08)}
.chat-adm-linha-msg b{color:var(--t1);flex-shrink:0;font-size:.78rem}
.chat-adm-linha-msg span{flex:1;color:var(--t2);line-height:1.4;word-break:break-word}
.chat-adm-linha-msg i{font-style:normal;font-size:.7rem;color:var(--t3);flex-shrink:0}
.chat-adm-marca{background:rgba(245,158,11,.35);color:inherit;border-radius:3px;padding:0 2px}
.adm-anexo{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.adm-anexo img{max-width:220px;max-height:180px;border-radius:9px;object-fit:cover;
  border:1px solid var(--border)}
.adm-anexo audio{max-width:260px;height:32px}
.adm-anexo a{font-size:.76rem;color:var(--brand-d)}
.adm-anexo.arquivo{flex-direction:row;align-items:center;gap:7px}
.adm-anexo .msr{font-size:19px;color:var(--t3)}
.adm-anexo-falha{font-size:.78rem;color:var(--t3);font-style:italic}
.pc-termos{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pc-termo{display:flex;align-items:center;gap:7px;background:var(--bg);border-radius:50px;
  padding:6px 8px 6px 14px;font-size:.83rem;color:var(--t1)}
.pc-termo button{background:none;border:none;color:var(--t3);cursor:pointer;font-size:.72rem;
  padding:2px 4px;line-height:1}
.pc-termo button:hover{color:#e24c6b}
.pc-vazio{display:flex;flex-direction:column;align-items:center;gap:8px;padding:50px 20px;
  color:var(--t3);text-align:center}
.pc-vazio .msr{font-size:34px}
.pc-vazio b{color:var(--t1);font-size:.95rem}
.pc-vazio span:last-child{font-size:.82rem;max-width:380px;line-height:1.5}
.pc-abas{display:flex;gap:7px;margin-bottom:14px}
.pc-abas button{border:1.5px solid var(--border);background:none;border-radius:50px;padding:6px 14px;
  font-size:.8rem;color:var(--t2);cursor:pointer;font-family:inherit}
.pc-abas button.on{border-color:#8b5cf6;background:rgba(139,92,246,.1);color:var(--t1);font-weight:600}
.pc-plano{display:flex;align-items:center;gap:26px;background:var(--bg);border-radius:12px;
  padding:16px 18px;margin-bottom:16px;flex-wrap:wrap}
.pc-plano b{display:block;font-size:1.05rem;color:var(--t1)}
.pc-form{display:grid;gap:5px;max-width:520px}
.pc-form label{font-size:.78rem;font-weight:600;color:var(--t2);margin-top:9px}
.pc-form input,.pc-form select,.pc-form textarea{background:var(--bg);border:none;outline:none;
  border-radius:10px;padding:10px 13px;font-size:.86rem;color:var(--t1);font-family:inherit}
/* A folha de opções e o fundo dela são do celular. As regras vêm ANTES
   do media query: postas depois, venceriam a que as mostra lá, e a
   folha ficava com display:none mesmo ao ser aberta. */
.vc-folha,
.vc-folha-fundo{ display:none }

/* O botão "Canais" do cabeçalho da sala também é do celular — no
   computador a lista está sempre visível ao lado, e voltar não faz
   sentido. Sem esta regra base o navegador o desenhava com o estilo
   padrão de botão, e ele aparecia no topo da sala. */
.vc-voltar-lista{ display:none }

/* O botão de mais é do celular: no computador todos os controles cabem
   na barra, e uma folha de opções não teria função. A regra vem ANTES do
   media query, senão venceria a que o mostra lá. */
#vc-mais{ display:none }

/* A foto e o rótulo do card flutuante também são do celular. Sem regra
   base, o navegador desenhava a imagem no tamanho natural — uma foto de
   rosto ocupando meia tela, que foi o que apareceu.

   Terceira vez que isso acontece: elemento no HTML, estilo só no media
   query. Daqui em diante, todo elemento de celular nasce oculto aqui. */
.vc-flut-foto,
.vc-flut-tag{ display:none }

@media(max-width:820px){
  .pc-menu{width:64px}
  .pc-item span:not(.msr){display:none}
  .pc-item{justify-content:center;padding:11px 0}
}
.agd-sec{font-size:.7rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--t3);padding:12px 8px 6px}
.agd-item.enviada{opacity:.72}
.agd-quando.enviada{color:#0EA47A}
html.dark .agd-quando.enviada{color:#25d366}
/* Prioridade da mensagem */
.am-imp{background:#f59e0b;font-weight:800;font-size:1.1rem}
.am-urg{background:#e24c6b;font-weight:800;font-size:1.1rem}
.am-item.am-prio{align-items:flex-start;gap:12px}
.am-txt b{display:block;font-size:.84rem;color:var(--t1);line-height:1.25}
.am-txt span{display:block;font-size:.71rem;color:var(--t3);line-height:1.3;margin-top:1px;
  white-space:normal;max-width:210px}
.am-item.am-prio{align-items:flex-start}
.selo-prio{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:.78rem;
  border-radius:18px 18px 0 0;font-weight:600}
.selo-prio b{width:17px;height:17px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.72rem;color:#fff;flex-shrink:0}
.selo-prio.importante{background:rgba(245,158,11,.14);color:#b45309}
.selo-prio.importante b{background:#f59e0b}
.selo-prio.urgente{background:rgba(226,76,107,.14);color:#c8412f}
.selo-prio.urgente b{background:#e24c6b}
.selo-prio button{margin-left:auto;background:none;border:none;color:inherit;opacity:.6;
  cursor:pointer;font-size:.8rem;padding:0 2px}
.selo-prio button:hover{opacity:1}
.input-area.modo-importante .composer{box-shadow:0 0 0 2px #f59e0b inset;border-radius:18px}
.input-area.modo-urgente .composer{box-shadow:0 0 0 2px #e24c6b inset;border-radius:18px}
/* Marca no balao recebido */
.bubble.prio-importante{box-shadow:inset 3px 0 0 #f59e0b}
.bubble.prio-urgente{box-shadow:inset 3px 0 0 #e24c6b}
.prio-selo{display:flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.prio-selo b{width:14px;height:14px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.62rem;color:#fff}
.prio-selo.importante{color:#b45309} .prio-selo.importante b{background:#f59e0b}
.prio-selo.urgente{color:#c8412f}    .prio-selo.urgente b{background:#e24c6b}
.prio-selo.agendada{color:#0EA47A}
.prio-selo.agendada b{background:transparent;font-size:.72rem}
.bubble.prio-agendada{box-shadow:inset 3px 0 0 #0EA47A}
html.dark .prio-selo.agendada{color:#25d366}
html.dark .prio-selo.importante{color:#fbbf24}
html.dark .prio-selo.urgente{color:#f8879f}
.am-doc{background:#7f66ff}.am-foto{background:#007bfc}.am-camera{background:#ff2e74}.am-audio{background:#f8792a}.am-colab{background:#00a884}.am-agenda{background:#1fa855}.am-denunc{background:#e53935}
.emoji-wrap{position:relative;flex-shrink:0}
.emoji-btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:1.4rem;transition:.15s;border:none;background:none;cursor:pointer}
.emoji-btn:hover{background:rgba(0,0,0,.06)}
.emoji-picker{position:absolute;bottom:54px;left:0;background:var(--surface);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.18);width:320px;z-index:60;display:none;flex-direction:column;animation:menuIn .15s ease}
.emoji-picker.open{display:flex}
.ep-search{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.ep-search svg{width:16px;height:16px;color:var(--t3);flex-shrink:0}
.ep-search input{flex:1;font-size:.875rem;color:var(--t1);background:transparent}
.ep-search input::placeholder{color:var(--t3)}
.ep-grid{display:flex;flex-wrap:wrap;gap:2px;padding:10px;max-height:220px;overflow-y:auto}
.ep-grid::-webkit-scrollbar{width:4px}.ep-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ep-emoji{width:36px;height:36px;border-radius:6px;font-size:1.35rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .1s;border:none;background:none}
.ep-emoji:hover{background:var(--bg)}
.input-box{flex:1;min-width:0;background:transparent;border-radius:10px;padding:9px 6px;box-shadow:none}
.msg-ta{width:100%;background:transparent;resize:none;font-size:.9375rem;color:var(--t1);line-height:1.5;max-height:120px;overflow-y:auto}
.msg-ta::placeholder{color:var(--t3)}
.mic-btn,.send-btn{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--brand);color:#0d1f3c;transition:.15s;border:none;cursor:pointer}
.mic-btn:hover,.send-btn:hover{background:var(--brand-d);color:#fff;transform:scale(1.05)}
.send-btn:disabled{opacity:.5;pointer-events:none}
.mic-btn svg,.send-btn svg{width:22px;height:22px}
.mic-btn{display:flex}.send-btn{display:none}
/* Gravação de áudio */
.rec-row{display:none;align-items:center;gap:10px;padding:7px 10px}
.input-area.recording .rec-row{display:flex}
.input-area.recording .composer-row{display:none}
.rec-del,.rec-pause,.rec-send{border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:50%;flex-shrink:0;transition:.15s}
.rec-del{width:36px;height:36px;background:none;color:var(--t2)}
.rec-del:hover{background:rgba(239,68,68,.12);color:#ef4444}
.rec-pause{width:36px;height:36px;background:none;color:#ef4444}
.rec-pause:hover{background:rgba(239,68,68,.12)}
.rec-send{width:42px;height:42px;background:var(--brand);color:#0d1f3c}
.rec-send:hover{background:var(--brand-d);color:#fff;transform:scale(1.05)}
.rec-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;flex-shrink:0;animation:recPulse 1.2s ease-in-out infinite}
.rec-row.paused .rec-dot{animation:none;opacity:.35}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.25}}
.rec-time{font-size:.9rem;font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:38px}
.rec-wave{flex:1;min-width:0;height:34px}
/* Envio em andamento: barra fina no composer, nada de tela cheia */
.input-area.sending-audio .composer{position:relative;overflow:hidden}
.input-area.sending-audio .composer::before{content:'';position:absolute;top:0;left:0;height:3px;width:40%;
  background:var(--brand);border-radius:3px;animation:audioSend 1s ease-in-out infinite;z-index:5}
@keyframes audioSend{0%{left:-40%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.rec-dot{animation:none}}
/* Player de áudio recebido */
/* Player de voz */
.m-voice{display:flex;align-items:center;gap:9px;padding:3px 2px 2px;min-width:240px;max-width:300px}
.mv-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;position:relative;
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.9rem}
.mv-mic{position:absolute;right:-1px;bottom:-1px;width:17px;height:17px;border-radius:50%;
  background:var(--brand-d);display:flex;align-items:center;justify-content:center}
html.dark .mv-mic{background:var(--brand)}
.mv-mic .msr{font-size:12px;color:#fff}
.msg-w.sent .mv-mic{background:#0f9d58}
.mv-play{width:30px;height:30px;border-radius:50%;border:none;background:none;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.12s}
.mv-play:hover{color:var(--t1);background:rgba(0,0,0,.06)}
.mv-play .msr{font-size:26px}
.mv-body{flex:1;min-width:0}
.mv-wave{display:flex;align-items:center;gap:2px;height:26px;cursor:pointer}
.mv-bar{flex:1;min-width:2px;border-radius:2px;background:#c4ccd1;transition:background .1s}
html.dark .mv-bar{background:rgba(255,255,255,.28)}
.mv-bar.on{background:var(--brand-d)}
html.dark .mv-bar.on{background:var(--brand)}
.msg-w.sent .mv-bar.on{background:#0f9d58}
.mv-foot{display:flex;align-items:center;gap:6px;margin-top:1px}
.mv-time{font-size:.7rem;color:var(--t3);font-variant-numeric:tabular-nums}
.mv-speed{font-size:.64rem;font-weight:700;color:var(--t3);background:rgba(0,0,0,.07);border:none;
  border-radius:50px;padding:1px 6px;cursor:pointer;display:none}
.m-voice.playing .mv-speed{display:inline-block}
.mv-speed:hover{color:var(--t1)}
/* Transcrição da mensagem de voz */
.mv-tr{margin-top:2px}
.mv-tr-btn{display:flex;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:2px 0;
  font-size:.72rem;color:var(--t3);font-weight:600}
.mv-tr-btn:hover{color:var(--t1)}
.mv-tr-btn .msr{font-size:15px}
.mv-tr-txt{display:none;position:relative;font-size:.82rem;line-height:1.4;color:var(--t2);
  background:rgba(0,0,0,.05);border-radius:8px;padding:8px 30px 8px 10px;margin-top:4px}
html.dark .mv-tr-txt{background:rgba(255,255,255,.07)}
.mv-tr.open .mv-tr-txt{display:block}
.mv-tr-copy{position:absolute;top:5px;right:5px;background:none;border:none;color:var(--t3);cursor:pointer;padding:2px;display:flex}
.mv-tr-copy:hover{color:var(--t1)}
.mv-tr-copy .msr{font-size:15px}
.input-area.has-text .mic-btn{display:none}.input-area.has-text .send-btn{display:flex}

/* Panels */
.new-chat-panel{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--sidebar-bg);z-index:20;display:none;flex-direction:column}
.new-chat-panel.open{display:flex}
.ncp-top{background:var(--sidebar-bg);padding:12px 14px 10px;min-height:60px;display:flex;align-items:center;gap:12px;flex-shrink:0;border-bottom:1px solid var(--sidebar-border)}
.ncp-back{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t2);cursor:pointer;transition:.15s;border:none;background:none}
.ncp-back:hover{background:var(--sidebar-hover);color:var(--t1)}.ncp-back svg{width:20px;height:20px}
.ncp-title{font-size:1.1rem;font-weight:700;color:var(--t1)}
.ncp-search{padding:6px 12px 8px;background:var(--sidebar-bg);border-bottom:1px solid var(--sidebar-border);flex-shrink:0}
.ncp-list{flex:1;overflow-y:auto}
.ncp-list::-webkit-scrollbar{width:4px}.ncp-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ncp-label{padding:8px 14px 4px;font-size:.75rem;font-weight:600;color:#00a884;text-transform:uppercase;letter-spacing:.5px}

.side-panel{width:340px;background:var(--sidebar-bg);flex-shrink:0;display:none;flex-direction:column;border-right:1px solid var(--sidebar-border)}
.sp-top{background:var(--sidebar-bg);padding:12px 16px 10px;display:flex;align-items:center;gap:12px;min-height:60px;flex-shrink:0;border-bottom:1px solid var(--sidebar-border)}
.sp-title{font-size:1.3rem;font-weight:700;color:var(--t1);letter-spacing:-.3px}
.sp-body{flex:1;overflow-y:auto;padding:20px 16px}
.profile-av-wrap{text-align:center;padding:32px 16px 20px}
.profile-av{width:120px;height:120px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--brand),#1a6b99);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:2.5rem;margin:0 auto 12px;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.profile-av img{width:100%;height:100%;border-radius:50%}
.profile-name{font-size:1.2rem;font-weight:600;color:var(--t1)}.profile-sector{font-size:.85rem;color:var(--t2);margin-top:2px}
.profile-row{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.profile-row svg{width:20px;height:20px;color:var(--t3);flex-shrink:0;margin-top:2px}
.profile-label{font-size:.75rem;color:var(--brand);margin-bottom:3px}.profile-value{font-size:.9375rem;color:var(--t1)}
/* Clientes e parceiros */
/* Faixa do acesso externo */
/* Administrador */
#badge-clientes.show{display:flex}
#badge-mencoes{background:#f59e0b}
#badge-mencoes.show{display:flex}
/* Estrela de favorito na lista de conversas */
.ch-fav{background:none;border:none;padding:0 4px;cursor:pointer;color:var(--t3);
  opacity:0;transition:opacity .12s;flex-shrink:0;line-height:1}
.ch-fav .msr{font-size:17px}
.ch-item:hover .ch-fav{opacity:.6}
.ch-fav:hover{opacity:1!important;color:#f59e0b}
.ch-fav.on{opacity:1;color:#f59e0b}
/* Painel de mencoes */
.menc-linha{display:flex;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--border)}
.menc-linha:hover{background:var(--sidebar-hover)}
.menc-linha.nova{background:rgba(245,158,11,.07)}
.menc-corpo{flex:1;min-width:0}
.menc-cab{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.menc-cab b{font-size:.86rem;color:var(--t1)}
.menc-canal{font-size:.7rem;font-weight:600;background:var(--bg);color:var(--t3);
  border-radius:50px;padding:1px 8px}
.menc-hora{margin-left:auto;font-size:.7rem;color:var(--t3);flex-shrink:0}
.menc-canal.urg{background:rgba(226,76,107,.16);color:#c8412f;font-weight:700}
.menc-linha.urgente{background:rgba(226,76,107,.06)}
html.dark .menc-canal.urg{color:#f8879f}
.menc-prev{font-size:.82rem;color:var(--t2);line-height:1.4;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* Políticas: o que a empresa não liberou some da interface */
body.sem-criar-canal .criar-canal{display:none}
body.sem-libras .cfg-item-libras{display:none}
body.sem-libras #btn-libras{display:none!important}
.nav-admin{display:none}
/* Nasce oculto e só aparece quando o vínculo é confirmado como
   administrativo — antes disso o item piscava para qualquer pessoa. */
#panel-admin{display:none}
body.modo-admin #panel-admin.aberto{display:flex}
body.modo-admin .nav-admin{display:flex;color:#a78bfa}
body.modo-admin .nav-admin.active{color:#fff;background:rgba(139,92,246,.25)}
.faixa-admin{background:linear-gradient(90deg,#8b5cf6,#6d28d9)!important;color:#fff!important;
  padding:5px 16px!important;font-size:.78rem}
.faixa-admin .msr{font-size:16px!important;color:rgba(255,255,255,.85)!important}
.faixa-admin b{font-weight:700}
.faixa-admin .fa-fechar{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.7);
  cursor:pointer;font-size:.8rem;padding:0 4px}
.faixa-admin .fa-fechar:hover{color:#fff}
.ext-topo{display:none;align-items:center;gap:10px;padding:8px 18px;background:#12314f;color:#fff;flex-shrink:0}
.ext-topo.show{display:flex}
.ext-topo .msr{font-size:18px;color:var(--brand)}
.ext-topo .txt{flex:1;font-size:.82rem;color:rgba(255,255,255,.85)}
.ext-topo b{color:#fff}
.ext-topo button{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:50px;
  padding:6px 14px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit}
.ext-topo button:hover{background:rgba(255,255,255,.26)}
/* Acesso externo: canais de texto, fóruns e o módulo de clientes não se
   aplicam. Canais de voz continuam, mas só os marcados como de cliente. */
body.modo-externo .nav-item[data-view="textos"],
body.modo-externo .nav-item[data-view="clients"]{display:none}
body.modo-externo .criar-canal{display:none}
body.modo-externo .vc-del{display:none}
body.modo-externo .tab[data-tab="courses"]{display:none}
body.modo-externo .tab[data-tab="groups"]{display:none}
/* Lista de empresas */
.emp-item{display:flex;align-items:center;gap:12px;padding:12px 20px;cursor:pointer;transition:background .12s}
.emp-item:hover{background:var(--sidebar-hover)}
.emp-item.atual{background:rgba(0,194,224,.08);cursor:default}
.emp-av{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#1a6b99);
  color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.emp-main{flex:1;min-width:0}
.emp-nome{font-size:.94rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-sub{font-size:.76rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp-atual{font-size:.66rem;font-weight:700;color:var(--brand-d);background:rgba(0,194,224,.16);
  padding:3px 9px;border-radius:50px;text-transform:uppercase;letter-spacing:.4px}
html.dark .emp-atual{color:var(--brand)}
/* Integrações */
.integ-lista{max-height:min(44vh,320px);overflow-y:auto;padding:0 22px}
.integ-item{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.integ-topo{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.integ-topo b{font-size:.9rem;color:var(--t1)}
.integ-origem{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:var(--bg);color:var(--t3);border-radius:50px;padding:2px 9px}
.integ-url{background:var(--bg);border-radius:8px;padding:9px 11px;font-family:ui-monospace,monospace;
  font-size:.72rem;color:var(--t2);word-break:break-all;cursor:pointer}
.integ-url:hover{color:var(--t1)}
.integ-pe{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;
  font-size:.72rem;color:var(--t3)}
.integ-pe button{background:none;border:none;color:var(--brand-d);font-weight:600;cursor:pointer;
  font-family:inherit;font-size:.72rem}
.integ-novo{display:flex;gap:8px;padding:14px 22px 20px;border-top:1px solid var(--border)}
.integ-novo input{flex:1;background:var(--bg);border:none;outline:none;border-radius:10px;
  padding:10px 12px;font-size:.85rem;color:var(--t1);font-family:inherit}
.integ-novo select{background:var(--bg);border:none;outline:none;border-radius:10px;padding:10px;
  font-size:.85rem;color:var(--t1);font-family:inherit}
.integ-novo button{background:var(--brand);border:none;border-radius:10px;padding:10px 18px;
  font-size:.85rem;font-weight:700;color:#0d1f3c;cursor:pointer;font-family:inherit}
.atend-colunas{display:flex;gap:14px;padding:0 22px}
.atend-col{flex:1;min-width:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.atend-cab{display:flex;align-items:center;gap:7px;padding:10px 12px;background:var(--bg);
  font-size:.78rem;font-weight:700;color:var(--t2)}
.atend-cab .msr{font-size:17px;color:var(--t3)}
.atend-lista{max-height:min(38vh,300px);overflow-y:auto;padding:4px}
@media(max-width:620px){ .atend-colunas{flex-direction:column} }
.grupo-aviso{display:flex;align-items:center;gap:11px;padding:12px 18px;margin:0;
  background:var(--surface);border-top:1px solid var(--border);font-size:.84rem;color:var(--t2)}
.grupo-aviso .msr{font-size:19px;color:var(--t3)}
.grupo-aviso button{margin-left:auto;background:var(--brand);border:none;border-radius:50px;
  padding:8px 16px;font-size:.8rem;font-weight:700;color:#0d1f3c;cursor:pointer;font-family:inherit}
/* Imagens do grupo */
.grp-imagens{position:relative;margin-bottom:34px}
.grp-capa{height:100px;background:linear-gradient(120deg,#00c2e0,#0097b2);background-size:cover;
  background-position:center;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:rgba(255,255,255,.85);cursor:pointer}
.grp-capa.tem-img .msr,.grp-capa.tem-img .grp-cap-txt{display:none}
.grp-cap-txt{font-size:.7rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.grp-foto{position:absolute;left:22px;bottom:-28px;width:66px;height:66px;border-radius:18px;
  background:var(--surface);background-size:cover;background-position:center;
  border:3px solid var(--surface);box-shadow:0 3px 12px rgba(0,0,0,.2);display:flex;
  align-items:center;justify-content:center;color:var(--t3);cursor:pointer}
.grp-foto.tem-img .msr{display:none}
.ginfo-capa{height:96px;background:linear-gradient(120deg,#00c2e0,#0097b2);background-size:cover;
  background-position:center;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.8)}
.ginfo-capa[onclick]{cursor:pointer}
/* Informações do grupo */
.ginfo-topo{display:flex;align-items:center;gap:14px;padding:16px 22px 10px}
.ginfo-av{width:54px;height:54px;border-radius:16px;background:var(--brand);display:flex;
  align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;
  background-size:cover;background-position:center;margin-top:-30px;
  border:3px solid var(--surface)}
.ginfo-av[onclick]{cursor:pointer}
.ginfo-topo b{display:block;font-size:1.05rem;color:var(--t1)}
.ginfo-topo span{font-size:.78rem;color:var(--t3)}
.ginfo-topo input{width:100%;background:var(--bg);border:none;outline:none;border-radius:9px;
  padding:8px 11px;font-size:1rem;font-weight:600;color:var(--t1);font-family:inherit;margin-bottom:4px}
.ginfo-desc{padding:0 22px 8px;font-size:.84rem;color:var(--t2);line-height:1.5}
.ginfo-sec{font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--t3);padding:14px 22px 6px}
.ginfo-lista{max-height:min(40vh,300px);overflow-y:auto;padding:0 12px}
.ginfo-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px}
.ginfo-item:hover{background:var(--sidebar-hover)}
.ginfo-tag{font-size:.62rem;font-weight:700;background:rgba(0,194,224,.18);color:var(--brand-d);
  border-radius:50px;padding:1px 7px;margin-left:5px}
.ginfo-x{background:none;border:none;color:var(--t3);cursor:pointer;font-size:.8rem;padding:4px 6px}
.ginfo-x:hover{color:#e24c6b}
.ginfo-entrar{display:flex;align-items:center;justify-content:center;gap:8px;
  width:calc(100% - 44px);margin:6px 22px;padding:11px;border-radius:11px;
  border:1.5px solid var(--brand);background:rgba(0,194,224,.08);color:var(--t1);
  cursor:pointer;font-size:.86rem;font-weight:600;font-family:inherit}
.ginfo-acoes{display:flex;gap:9px;padding:14px 22px 20px}
.ginfo-acoes button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px;border-radius:10px;border:none;background:var(--brand);color:#0d1f3c;
  font-weight:700;font-size:.84rem;cursor:pointer;font-family:inherit}
.ginfo-acoes button:first-child{background:var(--bg);color:var(--t2)}
.ginfo-acoes .msr{font-size:17px}
.grp-eu{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:.85rem;
  color:var(--t2);cursor:pointer}
.grp-eu input{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}
.grp-novo{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 24px);
  margin:12px;padding:12px;border-radius:12px;border:1.5px dashed var(--border);background:none;
  cursor:pointer;color:var(--t2);font-size:.88rem;font-weight:600;font-family:inherit}
.grp-novo:hover{border-color:var(--brand);color:var(--t1)}
.lib-filtros{display:flex;gap:8px;padding:4px 20px 10px}
.lib-filtros input{flex:1;background:var(--bg);border:none;outline:none;border-radius:9px;
  padding:9px 12px;font-size:.85rem;color:var(--t1);font-family:inherit}
.lib-filtros select{background:var(--bg);border:none;outline:none;border-radius:9px;padding:9px 10px;
  font-size:.82rem;color:var(--t1);font-family:inherit;max-width:44%}
.lib-conta{padding:0 20px 8px;font-size:.74rem;color:var(--t3)}
.lib-lista{max-height:min(42vh,320px);overflow-y:auto;padding:0 8px}
.lib-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;cursor:pointer}
.lib-item:hover{background:var(--sidebar-hover)}
.lib-item input{width:18px;height:18px;accent-color:var(--brand);flex-shrink:0}
.ext-busca{padding:10px 14px 6px}
.ext-abas{display:flex;gap:6px;padding:0 14px 10px;overflow-x:auto}
.ext-aba{flex-shrink:0;border:1px solid var(--border);background:none;border-radius:50px;padding:6px 13px;
  font-size:.78rem;font-weight:600;color:var(--t3);cursor:pointer;transition:.15s;font-family:inherit}
.ext-aba:hover{color:var(--t1)}
.ext-aba.on{background:var(--brand);border-color:var(--brand);color:#0d1f3c}
.ext-resumo{padding:0 16px 10px;font-size:.75rem;color:var(--t3)}
.ext-grupo{display:flex;align-items:center;gap:8px;padding:12px 16px 6px;
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3)}
.ext-grupo .msr{font-size:16px}
.ext-grupo b{color:var(--t2);font-weight:700}
.ext-grupo-n{margin-left:auto;background:var(--bg);border-radius:50px;padding:1px 8px;
  font-size:.68rem;letter-spacing:0}
.ext-item{display:flex;align-items:center;gap:11px;padding:10px 16px;cursor:pointer;transition:background .12s}
.ext-item:hover{background:var(--sidebar-hover)}
.ext-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.8rem}
.ext-main{flex:1;min-width:0}
.ext-nome{font-size:.9rem;color:var(--t1);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ext-org{font-size:.75rem;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ext-tag{flex-shrink:0;font-size:.64rem;font-weight:700;padding:3px 9px;border-radius:50px;letter-spacing:.4px;text-transform:uppercase}
.tag-client{background:rgba(245,158,11,.16);color:#b45309}
.tag-supplier{background:rgba(139,92,246,.16);color:#6d28d9}
.tag-partner{background:rgba(14,164,122,.16);color:#0b7a5c}
.tag-interno{background:var(--bg);color:var(--t3)}
html.dark .tag-client{color:#fbbf24}
html.dark .tag-supplier{color:#c4b5fd}
html.dark .tag-partner{color:#34d399}
.ext-menu{background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;display:flex;flex-shrink:0}
.ext-menu:hover{color:var(--t1)}
/* Aviso de conversa externa */
.ext-barra{display:none;align-items:center;gap:9px;padding:8px 16px;background:rgba(245,158,11,.12);
  border-bottom:1px solid rgba(245,158,11,.3);flex-shrink:0}
.ext-barra.show{display:flex}
.ext-barra .msr{font-size:17px;color:#b45309;flex-shrink:0}
.ext-barra span.txt{font-size:.8rem;color:var(--t2)}
.ext-barra b{color:var(--t1)}
.ch-ext{font-size:.62rem;font-weight:700;color:#b45309;background:rgba(245,158,11,.16);
  padding:1px 6px;border-radius:50px;margin-left:6px;flex-shrink:0}
html.dark .ch-ext{color:#fbbf24}
.cfg-sec{font-size:.72rem;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.priv-row{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;font-size:.8rem;color:var(--t2);line-height:1.45}
.priv-row .msr{font-size:19px;color:var(--brand-d);flex-shrink:0;margin-top:1px}
html.dark .priv-row .msr{color:var(--brand)}
.priv-row b{color:var(--t1);font-weight:600}
/* Interruptores */
.sw{position:relative;display:inline-block;width:44px;height:25px;cursor:pointer;flex-shrink:0;margin-left:auto}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw-bg{position:absolute;inset:0;background:var(--border);border-radius:50px;transition:background .18s}
.sw-bg::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;background:#fff;border-radius:50%;
  transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw input:checked + .sw-bg{background:#25d366}
.sw input:checked + .sw-bg::after{transform:translateX(19px)}
.cfg-item{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer}
.cfg-icon{width:42px;height:42px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cfg-icon svg{width:20px;height:20px;color:var(--t2)}.cfg-label{font-size:.9375rem;color:var(--t1)}.cfg-sub{font-size:.8rem;color:var(--t3)}
.call-empty{text-align:center;padding:60px 20px}
.call-empty svg{width:64px;height:64px;color:var(--border);margin:0 auto 16px}
.call-empty h4{font-size:1rem;color:var(--t2);margin-bottom:6px}.call-empty p{font-size:.85rem;color:var(--t3)}

/* Upload/Camera/Collab modals */
.upload-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}
.upload-overlay.show{display:flex}
.upload-box{background:#fff;border-radius:16px;padding:28px 36px;text-align:center;min-width:260px;box-shadow:0 8px 40px rgba(0,0,0,.25)}
.upload-box .spin{margin:12px auto 0}.upload-box p{font-size:.9rem;color:var(--t2);margin-top:12px}
.camera-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center}
.camera-modal.show{display:flex}
.camera-box{background:#1a1a1a;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.camera-box video{max-width:480px;width:100%;display:block}.camera-box canvas{display:none}
.camera-acts{display:flex;gap:12px;padding:16px;width:100%;background:#111;justify-content:center}
.cam-btn{padding:10px 24px;border-radius:50px;font-size:.9rem;font-weight:600;cursor:pointer;transition:.15s;border:none}
.cam-capture{background:var(--brand);color:#0d1f3c}.cam-capture:hover{background:var(--brand-d);color:#fff}
.cam-cancel{background:rgba(255,255,255,.1);color:#fff}.cam-cancel:hover{background:rgba(255,255,255,.2)}
.collab-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center}

/* Modais que se abrem por cima do painel de controle. Todas usam a mesma
   classe, então quem vence é quem vem depois no HTML — e o painel está no
   fim do arquivo. Sem elevar, o formulário abre atrás dele. */
#setor-modal, #status-modal, #nota-modal,
#fig-modal, #fig-corte, #img-prev{ z-index:300 }
.collab-modal.show{display:flex}
.collab-box{background:var(--surface);border-radius:16px;width:380px;max-height:min(88vh,720px);
  display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.25);overflow:hidden}
/* O conteúdo abaixo do cabeçalho rola: antes ele vazava para fora da caixa,
   e a última seção aparecia sem fundo. */
.collab-box > *:not(.collab-top){overflow-y:auto}
.collab-top{flex-shrink:0}
.collab-top{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.collab-top h3{font-size:1rem;font-weight:600;color:var(--t1)}
.collab-close{width:30px;height:30px;border-radius:50%;border:none;background:none;font-size:1.2rem;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.collab-close:hover{background:var(--sidebar-hover)}
.collab-search-wrap{padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.collab-list-m{flex:1;overflow-y:auto}
.collab-row{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;transition:background .1s;border-bottom:1px solid var(--border)}
.collab-row:hover{background:var(--sidebar-hover)}
.collab-row input[type=checkbox]{width:18px;height:18px;accent-color:#25d366;flex-shrink:0}
.collab-row-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#dfe5e7;display:flex;align-items:center;justify-content:center;color:var(--t2);font-weight:600;font-size:.85rem}
.collab-row-av img{width:100%;height:100%;border-radius:50%}
.collab-footer{padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0}
.collab-send{width:100%;padding:11px;border-radius:50px;background:var(--brand);color:#0d1f3c;font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:.15s}
.collab-send:hover{background:var(--brand-d);color:#fff}.collab-send:disabled{opacity:.5;pointer-events:none}

/* Toast */
.toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;padding:9px 18px;border-radius:50px;font-size:.85rem;font-weight:500;z-index:1000;display:none;box-shadow:0 4px 20px rgba(0,0,0,.3)}
.toast.show{display:block;animation:fiu .3s ease}
@keyframes fiu{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
#screen-login.active,
#tela-visita.active{display:flex !important}
.login-left{flex:1;min-width:0;height:100%;position:relative;isolation:isolate;
  background:#081227;
  display:flex;flex-direction:column;justify-content:space-between;padding:56px 48px;overflow:hidden}
.login-left::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,#081227 0%,#11223d 34%,#123a6b 70%,#0b1d3a 100%)}
.login-left::after{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 70% at 12% 8%,rgba(0,194,224,.20) 0%,transparent 60%),
             radial-gradient(70% 60% at 95% 100%,rgba(0,194,224,.10) 0%,transparent 65%)}
.ll-logo-name{font-size:1.1rem;font-weight:700;color:#fff}.ll-logo-tag{font-size:.7rem;color:var(--brand);font-weight:600;text-transform:uppercase;letter-spacing:1px}
.ll-hero{margin:auto 0}
.ll-title{font-size:clamp(1.8rem,2.6vw,2.5rem);font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.5px;margin-bottom:14px}.ll-title span{color:var(--brand)}
.ll-sub{font-size:.95rem;color:rgba(255,255,255,.5);max-width:360px;line-height:1.6;margin-bottom:36px}
.ll-features{display:flex;flex-direction:column;gap:14px}
.ll-feat{display:flex;align-items:flex-start;gap:14px}
.ll-feat-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;background:rgba(0,194,224,.10);border:1px solid rgba(0,194,224,.22);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.ll-feat-icon .msr{font-size:21px}
.ll-feat-title{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.9)}.ll-feat-sub{font-size:.78rem;color:rgba(255,255,255,.4);margin-top:2px}
.ll-bottom{font-size:.72rem;color:rgba(255,255,255,.25)}
.login-right{width:clamp(400px,34vw,520px);height:100%;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:48px 52px;overflow-y:auto;flex-shrink:0;
  box-shadow:-18px 0 50px rgba(0,0,0,.28)}
html.dark .login-right{background:#1a2b4a}
.lr-title{font-size:1.6rem;font-weight:800;color:#111827;margin-bottom:4px}.lr-sub{font-size:.875rem;color:#6b7280;margin-bottom:28px}
html.dark .lr-title{color:#fff}html.dark .lr-sub{color:rgba(255,255,255,.5)}
.login-extras{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.login-remember{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#6b7280;cursor:pointer}
.login-remember input{accent-color:var(--brand)}
.login-forgot{font-size:.82rem;color:var(--brand);text-decoration:none}
.login-footer{margin-top:28px;font-size:.75rem;color:#9ca3af;text-align:center}
.login-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;border-radius:10px;padding:12px 16px;font-size:.84rem;margin-top:14px;display:none;align-items:flex-start;gap:10px}
.login-error.show{display:flex}
.login-error-icon{font-size:1.1rem;flex-shrink:0}.login-error-title{font-weight:700;margin-bottom:2px}.login-error-msg{font-size:.78rem;color:#b91c1c}
@media (max-width:900px){
  .login-left{display:none}
  .login-right{width:100%;min-width:0;box-shadow:none;padding:32px 24px}
}
.s-menu-wrap{position:relative}
.s-menu{position:absolute;top:40px;right:0;z-index:100;background:var(--surface);border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.18);min-width:180px;padding:4px 0;display:none;flex-direction:column}
.s-menu.open{display:flex}
.s-menu-item{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;font-size:.9rem;color:var(--t1);transition:background .1s}
.s-menu-item svg{width:18px;height:18px;flex-shrink:0;color:var(--t3)}
.s-menu-item:hover svg{color:var(--t2)}
.s-menu-item.danger svg{color:#e53935}
.s-menu-item:hover{background:var(--sidebar-hover)}.s-menu-item.danger{color:#e53935}.s-menu-sep{height:1px;background:var(--border);margin:3px 0}
.msg-ctx{position:fixed;z-index:301;background:var(--surface);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.22);min-width:210px;overflow:hidden}
.msg-ctx-reactions{display:flex;align-items:center;gap:2px;padding:10px 12px;border-bottom:1px solid var(--border)}
.msg-ctx-emoji{width:38px;height:38px;border-radius:50%;border:none;background:none;font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.msg-ctx-emoji:hover{background:var(--sidebar-hover)}
.msg-ctx-more{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);background:none;cursor:pointer;color:var(--t2);font-size:1rem;display:flex;align-items:center;justify-content:center}
.msg-ctx-list{padding:4px 0}
.msg-ctx-item{display:flex;align-items:center;gap:11px;padding:8px 15px;cursor:pointer;font-size:.84rem;color:var(--t1);transition:background .1s}
.msg-ctx-item svg{width:16px;height:16px;flex-shrink:0}
.ctx-bola{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.66rem;font-weight:800;color:#fff;flex-shrink:0}
.ctx-bola.imp{background:#f59e0b}
.ctx-bola.urg{background:#e24c6b}
.ctx-emoji{width:16px;text-align:center;font-size:.9rem;flex-shrink:0}
.msg-ctx-item:hover{background:var(--sidebar-hover)}.msg-ctx-item svg{width:18px;height:18px;color:var(--t2);flex-shrink:0}
.msg-ctx-item.danger{color:#e53935}.msg-ctx-item.danger svg{color:#e53935}.msg-ctx-sep{height:1px;background:var(--border);margin:4px 0}
.msg-w{position:relative;align-items:flex-end;gap:4px}
.msg-menu-btn{display:none;width:22px;height:22px;border-radius:50%;flex-shrink:0;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.1);align-items:center;justify-content:center;cursor:pointer;color:var(--t2);font-size:.65rem;position:absolute;z-index:5}
.msg-w:hover .msg-menu-btn,.msg-w:hover .msg-react-btn{display:flex}
.msg-react-btn{position:absolute;top:4px;right:30px;z-index:4;display:none;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;font-size:.8rem;line-height:1;
  background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.msg-react-btn:hover{transform:scale(1.12)}
.msgs.selecting .msg-react-btn{display:none!important}
/* Mensagem apagada */
/* Reações */
.bubble-wrap{display:flex;flex-direction:column;min-width:0;max-width:100%}
.msg-w.sent .bubble-wrap{align-items:flex-end}
.msg-w.recv .bubble-wrap{align-items:flex-start}
.msg-w.has-react{margin-bottom:10px}
.m-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:-7px;padding:0 4px;position:relative;z-index:2}
.m-react{display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--border);
  border-radius:50px;padding:2px 7px;cursor:pointer;font-size:.8rem;line-height:1.2;
  box-shadow:0 1px 3px rgba(0,0,0,.10);transition:.12s}
.m-react:hover{transform:translateY(-1px)}
.m-react.mine{background:rgba(0,194,224,.16);border-color:var(--brand)}
.m-react-n{font-size:.7rem;font-weight:700;color:var(--t2)}
.m-react.mine .m-react-n{color:var(--brand-d)}
html.dark .m-react.mine .m-react-n{color:var(--brand)}
/* Seletor com mais emojis */
.rp-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:3200;padding:20px}
.rp-modal.show{display:flex}
.rp-box{background:var(--surface);border-radius:16px;padding:12px 14px 14px;max-width:400px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;max-height:min(70vh,520px)}
.rp-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:10px;flex-shrink:0}
.rp-tab{flex:1;font-size:1.15rem;padding:6px 0;border:none;background:none;cursor:pointer;border-radius:8px;
  opacity:.5;transition:.12s;border-bottom:2px solid transparent}
.rp-tab:hover{opacity:.85;background:var(--bg)}
.rp-tab.on{opacity:1;border-bottom-color:var(--brand)}
.rp-search-wrap{display:flex;align-items:center;gap:8px;background:var(--bg);border-radius:50px;padding:8px 14px;margin-bottom:10px;flex-shrink:0}
.rp-search-wrap .msr{font-size:18px;color:var(--t3)}
#rp-search{flex:1;background:none;border:none;outline:none;font-size:.9rem;color:var(--t1)}
#rp-grid{flex:1;min-height:0;overflow-y:auto}
.rp-sec{font-size:.75rem;font-weight:700;color:var(--t3);margin:8px 2px 4px}
.rp-row{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.rp-emoji{font-size:1.35rem;padding:6px 0;border:none;background:none;border-radius:8px;cursor:pointer;transition:.12s}
.rp-emoji:hover{background:var(--bg);transform:scale(1.18)}
.rp-vazio{padding:24px 4px;text-align:center;font-size:.85rem;color:var(--t3)}
.m-deleted{display:flex;align-items:center;gap:6px;font-style:italic;color:var(--t3);font-size:.85rem}
.m-deleted .msr{font-size:16px}
.msg-w.deleted .bubble{opacity:.85}
/* Seleção múltipla */
.msg-check{display:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--t3);flex-shrink:0;
  cursor:pointer;transition:.15s;position:absolute;left:0;top:50%;transform:translateY(-50%);background:var(--surface)}
.msg-check.on{background:#25d366;border-color:#25d366}
.msg-check.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:900;color:#fff}
.msgs.selecting .msg-check{display:block}
/* linha inteira: a caixa fica na margem esquerda e o balao mantem o lado */
.msgs.selecting .msg-w{cursor:pointer;max-width:none;margin-left:0;margin-right:0;padding-left:38px}
.msgs.selecting .msg-w.sent{justify-content:flex-end}
.msgs.selecting .msg-w.recv{justify-content:flex-start}
.msgs.selecting .msg-w>.bubble{max-width:65%}
.msgs.selecting .msg-menu-btn{display:none!important}
.msg-w.selected{background:rgba(37,211,102,.14)}
/* Barra do modo seleção */
/* Mensagem fixada */
/* Voltar ao fim da conversa */
.msgs-wrap{flex:1;min-height:0;display:flex;position:relative}
.msgs-wrap .msgs{flex:1}
.to-bottom{position:absolute;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;border:none;
  background:var(--surface);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.22);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .18s,transform .18s;z-index:6}
.to-bottom.show{opacity:1;pointer-events:auto;transform:none}
.to-bottom:hover{color:var(--t1)}
.to-bottom .msr{font-size:26px}
.tb-badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:50px;
  background:#25d366;color:#fff;font-size:.68rem;font-weight:700;display:none;align-items:center;justify-content:center}
.tb-badge.show{display:flex}
.pinned-bar{display:none;align-items:center;gap:10px;padding:9px 16px;background:var(--chat-top);
  border-bottom:1px solid var(--border);flex-shrink:0}
.pinned-bar.show{display:flex}
.pinned-bar>.msr{font-size:18px;color:var(--brand-d);flex-shrink:0}
html.dark .pinned-bar>.msr{color:var(--brand)}
.pin-txt{flex:1;min-width:0;font-size:.84rem;color:var(--t2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:pointer}
.pin-txt:hover{color:var(--t1)}
.pin-x{background:none;border:none;color:var(--t3);cursor:pointer;display:flex;padding:2px}
.pin-x:hover{color:var(--t1)}
.pin-x .msr{font-size:18px}
/* Favoritas */
.star-list{max-height:min(60vh,460px);overflow-y:auto;padding:6px 0}
.star-row{display:flex;gap:10px;padding:11px 18px;cursor:pointer;transition:background .12s;align-items:flex-start}
.star-row:hover{background:var(--sidebar-hover)}
.star-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff}
.star-main{flex:1;min-width:0}
.star-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.star-who{font-size:.875rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star-when{font-size:.7rem;color:var(--t3);flex-shrink:0}
.star-prev{font-size:.82rem;color:var(--t2);line-height:1.35;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.star-x{background:none;border:none;color:var(--t3);cursor:pointer;padding:2px;display:flex;flex-shrink:0}
.star-x{color:#f0b429}
.star-x:hover{color:#ef4444}
/* Favorita e encaminhada */
.msg-w.starred .bubble::after{content:'⭐';position:absolute;left:-16px;bottom:2px;font-size:.7rem;opacity:.85}
.msg-w.sent.starred .bubble::after{left:auto;right:-16px}
.m-fwd{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--t3);font-style:italic;margin-bottom:2px}
.sel-bar{display:none;align-items:center;gap:18px;padding:16px 22px;background:var(--bg);flex-shrink:0}
.sel-bar.show{display:flex}
.sel-bar-count{flex:1;font-size:.95rem;color:var(--t1)}
.sel-bar button{background:none;border:none;cursor:pointer;color:var(--t2);padding:8px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.sel-bar button:hover{background:var(--sidebar-hover);color:var(--t1)}
.sel-bar button .msr{font-size:24px}
/* Modal de exclusão */
.del-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:3000;padding:20px}
.del-modal.show{display:flex}
.del-box{background:var(--surface);border-radius:14px;max-width:460px;width:100%;padding:26px 26px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column}
.del-title{font-size:1.25rem;font-weight:500;color:var(--t1);margin-bottom:10px}
.del-sub{font-size:.88rem;color:var(--t3);margin-bottom:26px;line-height:1.45}
.del-acts{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
/* Ata */
/* Prévia da sala */
.previa{position:fixed;display:none;z-index:2600;background:var(--surface);border-radius:12px;
  overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.3);width:270px;pointer-events:none}
.previa.show{display:block}
.previa canvas{width:100%;display:block;image-rendering:pixelated}
.previa-rodape{padding:8px 12px;font-size:.76rem;color:var(--t2);display:flex;align-items:center;gap:7px}
.previa-rodape .bolha{width:7px;height:7px;border-radius:50%;background:#25d366;flex-shrink:0}
.ata-corpo{padding:16px 22px;max-height:min(58vh,460px);overflow-y:auto}
.ata-cab{border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:14px}
.ata-tit{font-size:1.05rem;font-weight:700;color:var(--t1)}
.ata-sub{font-size:.78rem;color:var(--t3);margin-top:3px}
.ata-sec{font-size:.72rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--brand-d);
  margin:16px 0 8px}
html.dark .ata-sec{color:var(--brand)}
.ata-chips{display:flex;flex-wrap:wrap;gap:6px}
.ata-chips span{background:var(--bg);border-radius:50px;padding:4px 12px;font-size:.8rem;color:var(--t2)}
.ata-item{font-size:.86rem;color:var(--t2);line-height:1.5;padding:8px 12px;background:var(--bg);
  border-radius:9px;margin-bottom:6px;border-left:3px solid var(--border)}
.ata-item b{color:var(--t1);font-weight:600;margin-right:5px}
.ata-prazo{background:rgba(245,158,11,.16);color:#b45309;border-radius:50px;padding:1px 8px;
  font-size:.7rem;font-weight:700;margin-left:6px;white-space:nowrap}
html.dark .ata-prazo{color:#fbbf24}
.ata-vazio{font-size:.82rem;color:var(--t3);font-style:italic;padding:4px 2px}
.ata-aviso{font-size:.74rem;color:var(--t3);margin-top:16px;line-height:1.45}
.ata-acoes{display:flex;gap:8px;padding:14px 22px 20px;border-top:1px solid var(--border)}
.ata-acoes button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;
  border-radius:50px;border:1.5px solid var(--border);background:none;color:var(--t2);cursor:pointer;
  font-family:inherit;font-size:.85rem;font-weight:600}
.ata-acoes button:hover{color:var(--t1)}
.ata-acoes .msr{font-size:17px}
.ata-acoes .ata-primaria{background:var(--brand);border-color:var(--brand);color:#0d1f3c}
.del-cancel{color:var(--t3)!important;font-weight:500!important}
.del-cancel:hover{color:var(--t1)!important}
.del-opt{padding:11px 26px;border-radius:50px;border:1px solid var(--border);background:none;cursor:pointer;
  font-size:.95rem;font-weight:600;color:#0f9d58;transition:.15s;white-space:nowrap}
html.dark .del-opt{color:#25d366}
.del-opt:hover{background:rgba(37,211,102,.10);border-color:#25d366}
.msg-w.sent .msg-menu-btn,.msg-w.recv .msg-menu-btn{right:4px;top:4px;left:auto}
.msg-quote{background:rgba(0,0,0,.06);border-left:3px solid var(--brand);border-radius:4px;padding:5px 8px;margin-bottom:5px;cursor:pointer}
html.dark .msg-quote{background:rgba(255,255,255,.06)}
.msg-quote-name{font-size:.72rem;font-weight:700;color:var(--brand);margin-bottom:2px}
.msg-quote-text{font-size:.78rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:6px;background:var(--sidebar-bg)}
/* Canais de texto */
.tc-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:6px;background:var(--sidebar-bg)}
.tc-item{display:flex;align-items:center;gap:8px;padding:7px 14px;margin:1px 8px;border-radius:6px;cursor:pointer;transition:.15s;position:relative}
.tc-item:hover{background:var(--sidebar-hover)}
.tc-item.active{background:rgba(0,194,224,.1)}
.tc-hash{font-size:1rem;font-weight:700;color:var(--t3);flex-shrink:0;width:16px;text-align:center}
.tc-name{flex:1;font-size:.875rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-item.active .tc-name{color:var(--t1);font-weight:600}
.tc-item.unread .tc-name{color:var(--t1);font-weight:700}
.tc-item.unread .tc-hash{color:var(--t1)}
.tc-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);flex-shrink:0}
.tc-item .vc-del{position:absolute;right:8px;background:var(--sidebar-hover)}
.tc-empty{padding:6px 22px 8px;font-size:.75rem;color:var(--t3)}
.tck-opt{flex:1;padding:10px 12px;border-radius:10px;border:1.5px solid var(--border);cursor:pointer;transition:.15s}
.tck-opt:hover{border-color:var(--brand)}
.tck-opt.sel{border-color:var(--brand);background:rgba(0,194,224,.08)}
.tck-t{font-size:.85rem;font-weight:600;color:var(--t1);margin-bottom:2px}
.tck-d{font-size:.7rem;color:var(--t3);line-height:1.3}
.tc-sec-label{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 4px;font-size:.7rem;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.6px}
/* Autor da mensagem em canal (nas diretas nao aparece) */
.m-author{font-size:.75rem;font-weight:700;color:var(--brand-d);margin-bottom:2px}
/* Fórum */
.fo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 14px}
.fo-title{font-size:1.05rem;font-weight:700;color:var(--t1)}
.fo-sub{font-size:.78rem;color:var(--t3)}
.fo-new{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:50px;background:var(--brand);color:#0d1f3c;
  font-weight:700;font-size:.85rem;border:none;cursor:pointer;transition:.15s}
.fo-new:hover{background:var(--brand-d);color:#fff}
.fo-topic{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:12px;padding:14px 16px;margin-bottom:8px;
  cursor:pointer;transition:.15s;border:1px solid transparent}
.fo-topic:hover{border-color:var(--brand);transform:translateY(-1px)}
.fo-topic-main{flex:1;min-width:0}
.fo-topic-title{font-size:.95rem;font-weight:600;color:var(--t1);margin-bottom:3px}
.fo-topic-meta{font-size:.75rem;color:var(--t3)}
.fo-topic-count{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--t3);flex-shrink:0}
.fo-back{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--t2);background:var(--surface);
  padding:6px 12px;border-radius:50px;cursor:pointer;margin-bottom:12px}
.fo-back:hover{color:var(--t1)}
html.dark .m-author{color:var(--brand)}
.vc-vinc{font-size:.62rem;font-weight:700;background:rgba(14,164,122,.16);color:#0b7a5c;
  border-radius:50px;padding:1px 7px;margin-right:4px;flex-shrink:0}
.vc-vinc.alerta{background:rgba(245,158,11,.18);color:#b45309}
html.dark .vc-vinc{color:#34d399}
html.dark .vc-vinc.alerta{color:#fbbf24}
.vc-channel{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 24px;cursor:pointer;border-radius:6px;margin:1px 8px;transition:.15s;position:relative}
.vc-channel:hover{background:var(--sidebar-hover)}.vc-channel.active{background:rgba(0,194,224,.1)}
.vc-icon{font-size:.85rem;flex-shrink:0;width:18px;text-align:center;color:var(--t2);display:flex;align-items:center;justify-content:center}
.vc-name{flex:1;font-size:.875rem;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-count{font-size:.72rem;color:var(--t3);flex-shrink:0;font-variant-numeric:tabular-nums}
/* Canal ocupado: alto-falante verde e nome em destaque, como no Discord */
.vc-channel.busy .vc-icon{color:#25d366}
.vc-channel.busy .vc-name{color:#1a9c4d;font-weight:600}
html.dark .vc-channel.busy .vc-name{color:#3ddc7f}
.vc-channel.busy .vc-count{color:#25d366;font-weight:700}
.vc-del{display:none;width:18px;height:18px;border-radius:50%;border:none;background:none;color:rgba(255,255,255,.4);cursor:pointer;font-size:.7rem;align-items:center;justify-content:center;flex-shrink:0}
.vc-channel:hover .vc-del{display:flex}.vc-del:hover{background:rgba(239,68,68,.1);color:#ef4444}
/* Mão levantada */
#room-hand-btn.on{background:#f59e0b;border-color:#f59e0b;color:#fff}
.vc-part-hand{font-size:13px;color:#f59e0b;flex-shrink:0;animation:maoSobe 1.6s ease-in-out infinite}
@keyframes maoSobe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.vc-part-hand-n{font-size:.6rem;font-weight:700;color:#b45309;background:rgba(245,158,11,.18);
  border-radius:50px;padding:0 5px;margin-left:2px}
.vc-tile-hand{position:absolute;top:8px;left:8px;background:rgba(245,158,11,.95);color:#fff;
  border-radius:50px;padding:3px 9px;font-size:.72rem;font-weight:700;display:flex;align-items:center;gap:4px;z-index:3}
/* Legenda ao vivo */
.legenda-vivo{display:none;position:absolute;bottom:96px;left:50%;transform:translateX(-50%);
  z-index:12;width:min(88%,760px);pointer-events:none}
.legenda-vivo .lg-linha{pointer-events:auto}
.legenda-vivo.show{display:block}
.lg-linha{background:rgba(12,18,30,.86);color:#fff;border-radius:10px;padding:9px 16px;
  margin-top:6px;font-size:1.05rem;line-height:1.4;opacity:.55;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.lg-linha.atual{opacity:1;font-size:1.2rem;font-weight:500}
.lg-linha b{color:#7fd4e8;margin-right:8px;font-weight:700}
.lg-linha{display:flex;align-items:flex-start;gap:8px;pointer-events:auto}
.lg-linha span{flex:1}
.lg-libras{background:rgba(255,255,255,.14);border:none;border-radius:8px;padding:2px 8px;
  cursor:pointer;font-size:.95rem;flex-shrink:0;line-height:1.3}
.lg-libras:hover{background:rgba(255,255,255,.3)}
@media(max-width:640px){ .lg-linha{font-size:.95rem} .lg-linha.atual{font-size:1.05rem} }
.maos-fila{display:none;align-items:center;gap:8px;padding:7px 16px;background:rgba(245,158,11,.12);
  border-bottom:1px solid rgba(245,158,11,.28);font-size:.8rem;color:var(--t2);flex-shrink:0}
.maos-fila.show{display:flex}
.maos-fila b{color:var(--t1)}
.maos-fila .msr{font-size:17px;color:#b45309}
/* Menu do participante */
.part-menu{position:fixed;background:var(--surface);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.24);
  padding:5px;z-index:3000;display:none;min-width:196px}
.part-menu.show{display:block}
.part-menu-head{padding:8px 12px 6px;font-size:.76rem;color:var(--t3);border-bottom:1px solid var(--border);margin-bottom:4px}
.part-menu-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:.86rem;color:var(--t1);transition:background .12s}
.part-menu-item:hover{background:var(--sidebar-hover)}
.part-menu-item .msr{font-size:18px;color:var(--t3)}
.vc-participants{padding:2px 0 4px 32px}
.vc-participant{display:flex;align-items:center;gap:6px;padding:3px 0;margin:1px 8px}
.vc-part-av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#0d1f3c}
.vc-part-name{flex:1;font-size:.78rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-part-icons{flex-shrink:0;display:flex;align-items:center;gap:4px}
.vc-part-i{font-size:15px;color:var(--t3)}
.vc-part-i.on{color:var(--brand-d)}
html.dark .vc-part-i.on{color:var(--brand)}
.vc-part-i.off{color:#ef4444}
.vc-part-av{transition:box-shadow .12s ease-out}
.vc-participant.speaking .vc-part-av{box-shadow:0 0 0 2px #25d366,0 0 8px rgba(37,211,102,.6);animation:vcSpeakSm 1.1s ease-in-out infinite}
.vc-part-name{transition:color .12s,font-weight .12s}
.vc-participant.speaking .vc-part-name{color:var(--t1);font-weight:700}
html.dark .vc-participant.speaking .vc-part-name{color:#fff}
/* etiqueta do nome no card tambem reage */
.vc-tile.speaking .vc-tile-name{background:rgba(37,211,102,.92);color:#0b2418}
@keyframes vcSpeakSm{0%,100%{box-shadow:0 0 0 2px #25d366,0 0 7px rgba(37,211,102,.5)}50%{box-shadow:0 0 0 3px #25d366,0 0 12px rgba(37,211,102,.8)}}
@media (prefers-reduced-motion:reduce){.vc-participant.speaking .vc-part-av{animation:none}}
.vc-add{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t3);border:none;background:none;cursor:pointer;font-size:1rem;transition:.15s}
.vc-add:hover{color:var(--brand)}
#vc-bar-av{overflow:hidden}
#vc-bar-av img,.vc-part-av img,.vc-tile-av img,.nav-user-av img,.ch-av img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;max-width:100%}
.vc-connected-bar{background:#1a2b4a;padding:8px 12px;display:none;flex-direction:column;gap:6px;flex-shrink:0;border-top:1px solid rgba(255,255,255,.08)}
.vc-connected-bar.show{display:flex}
.vc-connected-info{display:flex;align-items:center;gap:8px}.vc-signal{width:10px;height:10px;border-radius:50%;background:#25d366;flex-shrink:0;box-shadow:0 0 6px #25d366}
.vc-timer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--brand);letter-spacing:.3px}
.vc-connected-name{font-size:.78rem;color:rgba(255,255,255,.85);font-weight:600;flex:1}
.vc-bar-acts{display:flex;gap:4px;align-items:center}
.vc-act-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);cursor:pointer;transition:.15s}
.vc-act-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.vc-act-btn.active{background:var(--brand);color:#0d1f3c}#vc-btn-mic.active{background:rgba(255,255,255,.10);color:#fff}
/* Mudo: antes era um ícone pequeno no canto, fácil de não ver.
   Agora a borda avermelha e o rótulo diz por extenso. */
.vc-tile.muted::after{content:'🔇 sem áudio';position:absolute;bottom:10px;right:10px;
  background:rgba(226,76,107,.92);color:#fff;border-radius:50px;padding:3px 10px;
  font-size:.68rem;font-weight:700;z-index:3}
.vc-tile.muted{box-shadow:inset 0 0 0 2px rgba(226,76,107,.5)}
.vc-participant.mudo .vc-part-name{color:var(--t3)}
.vc-participant.mudo .vc-part-av{opacity:.62}
.vc-participant.ausente .vc-part-name{font-style:italic;color:var(--t3)}
.vc-part-aus{font-size:.62rem;font-weight:700;background:var(--bg);color:var(--t3);
  border-radius:50px;padding:1px 7px;margin-left:auto;flex-shrink:0}
.vc-act-btn.muted{background:rgba(239,68,68,.2);color:#ef4444}
.vc-act-btn.danger{background:rgba(239,68,68,.15);color:#ef4444}.vc-act-btn.danger:hover{background:#ef4444;color:#fff}
.vc-grid{display:flex;flex-wrap:wrap;gap:var(--tile-gap, 16px);
  justify-content:center;align-items:flex-start}

/* Quando alguém compartilha, a tela é a atriz principal: os cards ficam
   pequenos e não disputam espaço com ela. */
.vc-room.compartilhando .vc-grid{--tile-w:132px;--tile-gap:8px;max-height:180px;
  /* auto, não scroll: sem isto a barra continuava desenhada mesmo com os
     cards cabendo, e sobrava um trilho vazio depois do compartilhamento */
  overflow-y:auto;overflow-x:hidden;padding-bottom:2px;scrollbar-width:thin}
.vc-room.compartilhando .vc-tile-name{font-size:.66rem}
/* Painel lateral do canal */
.vc-body{flex:1;display:flex;min-height:0;overflow:hidden}
/* Escritório */
#office-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.of-bar{display:flex;align-items:center;gap:12px;width:100%;max-width:1100px;justify-content:space-between;
  flex-wrap:wrap;padding:0 2px}
.of-bar .of-hint{flex:1;justify-content:center;margin:0}
.of-cenas{display:flex;gap:4px;background:var(--surface);border-radius:50px;padding:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* Escolha do ambiente na criação */
.cena-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cena-op{border:2px solid var(--border);border-radius:12px;padding:0;cursor:pointer;overflow:hidden;
  background:none;transition:.15s;font-family:inherit}
.cena-op:hover{border-color:var(--brand)}
.cena-op.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,194,224,.18)}
.cena-op canvas{width:100%;display:block;image-rendering:pixelated}
.cena-op span{display:block;padding:6px 4px;font-size:.76rem;font-weight:600;color:var(--t2)}
.cena-op.on span{color:var(--t1)}
.of-cena{border:none;background:none;border-radius:50px;padding:6px 14px;cursor:pointer;
  font-size:.78rem;font-weight:600;color:var(--t3);transition:.15s}
.of-cena:hover{color:var(--t1)}
.of-cena.on{background:var(--brand);color:#0d1f3c}
.of-btn{display:flex;align-items:center;gap:6px;border:none;background:var(--surface);border-radius:50px;
  padding:7px 14px;cursor:pointer;font-size:.78rem;font-weight:600;color:var(--t2);
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.of-btn:hover{color:var(--t1)}
.of-btn.on{background:var(--brand);color:#0d1f3c}
/* Porta trancada: vermelho, para ninguem confundir com um botao ligado */
#of-porta.on{background:#e24c6b;color:#fff}
/* Botao da porta, flutuando sobre o mapa dentro da sala de reuniao */
.porta-flutua{position:absolute;top:14px;right:14px;z-index:28;display:flex;align-items:center;
  gap:7px;border:none;border-radius:50px;padding:9px 16px;background:var(--surface);
  color:var(--t1);font-size:.83rem;font-weight:600;font-family:inherit;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.24)}
.porta-flutua .msr{font-size:18px;color:var(--t3)}
.porta-flutua:hover{background:var(--sidebar-hover)}
.porta-flutua.trancada{background:#e24c6b;color:#fff}
.porta-flutua.trancada .msr{color:#fff}
/* Pedido para entrar na sala trancada */
.pedido-card{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:14px;
  padding:11px 14px;box-shadow:0 8px 30px rgba(0,0,0,.28);width:max-content;
  max-width:min(92%,520px);animation:pdEntra .24s ease-out}
@keyframes pdEntra{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.pedido-card .msr{font-size:26px;color:var(--t3);flex-shrink:0}
.pd-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem}
.pd-txt{flex:1;min-width:0}
.pd-txt b{display:block;font-size:.88rem;color:var(--t1);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pd-txt span{font-size:.75rem;color:var(--t3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;display:block}
.pd-sim,.pd-nao{border:none;border-radius:50px;padding:8px 15px;font-size:.8rem;font-weight:700;
  cursor:pointer;font-family:inherit;flex-shrink:0}
.pd-sim{background:var(--brand);color:#0d1f3c}
.pd-nao{background:var(--bg);color:var(--t2)}
.pedido-card.bater{background:rgba(226,76,107,.96);color:#fff}
.pedido-card.bater .msr,.pedido-card.bater .pd-txt b,.pedido-card.bater .pd-txt span{color:#fff}
.pedido-card.bater .pd-sim{background:#fff;color:#e24c6b}
.collab-row-av{position:relative}
.collab-row-av.online::after{content:'';position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border-radius:50%;background:#25d366;border:2px solid var(--surface)}
.of-btn .msr{font-size:17px}
body.side-hidden .side-col{display:none!important}
#office-canvas{width:100%;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.18);cursor:pointer;
  background:#efe6da;touch-action:none}
html.dark #office-canvas{box-shadow:0 10px 40px rgba(0,0,0,.5)}
/* Dicas: fora do caminho, atrás do "?" */
.of-ajuda{position:relative}
.of-dicas{display:none;position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:40;
  background:var(--surface);border-radius:12px;padding:12px 16px;width:290px;text-align:left;
  box-shadow:0 10px 34px rgba(0,0,0,.24);font-size:.78rem;color:var(--t2);line-height:1.5}
.of-dicas.show{display:block}
.of-dicas div{padding:4px 0}
.of-dicas b{color:var(--t1);background:var(--bg);border-radius:5px;padding:1px 6px;font-size:.74rem}
.of-hint{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:.73rem;color:var(--t3)}
/* Câmeras flutuando sobre os avatares */
.of-palco{position:relative;line-height:0}
.of-videos{position:absolute;inset:0;pointer-events:none}
.of-cam{position:absolute;transform:translate(-50%,-100%);width:132px;border-radius:10px;overflow:hidden;
  background:#000;box-shadow:0 6px 20px rgba(0,0,0,.35);pointer-events:auto;transition:box-shadow .15s}
.of-cam.falando{box-shadow:0 0 0 3px #25d366,0 6px 20px rgba(0,0,0,.35)}
.of-cam video{width:100%;height:99px;object-fit:cover;display:block}
.of-cam.eu video{transform:scaleX(-1)}
.of-cam-nome{position:absolute;left:0;right:0;bottom:0;font-size:.66rem;color:#fff;line-height:1.2;
  background:linear-gradient(transparent,rgba(0,0,0,.75));padding:10px 6px 3px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.of-cam-seta{position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#000;
  transform:translateX(-50%) rotate(45deg)}
/* Com tela compartilhada o mapa cede espaço */
#office-wrap.com-tela .of-palco{max-height:46vh}
#office-wrap.com-tela #office-canvas{max-height:46vh;width:auto!important}
/* Reações rápidas */
/* Escolha do clima */
.clima-ops{display:grid;gap:8px}
.clima-op{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'i n' 'i d';
  gap:1px 12px;align-items:center;text-align:left;padding:11px 14px;border-radius:11px;
  border:1.5px solid var(--border);background:none;cursor:pointer;font-family:inherit}
.clima-op:hover{border-color:var(--brand)}
.clima-op.on{border-color:var(--brand);background:rgba(0,194,224,.08)}
.clima-op .msr{grid-area:i;font-size:22px;color:var(--t3)}
.clima-op.on .msr{color:var(--brand-d)}
.clima-op b{grid-area:n;font-size:.88rem;color:var(--t1)}
.clima-op span:last-child{grid-area:d;font-size:.75rem;color:var(--t3)}
.pp-modo{font-size:.78rem;color:var(--t3)}
.pp-modo.online{color:var(--brand-d);font-weight:700}
html.dark .pp-modo.online{color:var(--brand)}
/* Fliperama */
/* Administração */
.adm-empresa{font-size:.78rem;color:var(--t3)}
.adm-acoes{display:flex;gap:10px;padding:4px 20px 8px}
.adm-acoes button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px;border-radius:11px;border:1.5px solid var(--border);background:none;cursor:pointer;
  color:var(--t1);font-size:.85rem;font-weight:600;font-family:inherit}
.adm-acoes button:hover{border-color:var(--brand);background:rgba(0,194,224,.06)}
.adm-acoes .msr{font-size:19px;color:var(--t3)}
.adm-sec{font-size:.72rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--t3);margin:22px 20px 8px}
.adm-sec:first-child{margin-top:8px}
.adm-item{display:flex;flex-direction:column;align-items:stretch;gap:9px;
  padding:14px 20px;border-bottom:1px solid var(--border)}
.adm-item-topo{display:flex;align-items:flex-start;gap:12px}
.adm-item .msr{font-size:21px;color:var(--t3);flex-shrink:0}
.adm-txt{flex:1;min-width:0}
.adm-txt b{display:block;font-size:.9rem;color:var(--t1);font-weight:600}
.adm-txt span{font-size:.76rem;color:var(--t3);line-height:1.4;display:block;margin-top:2px}
.adm-sel{background:var(--bg);border:1.5px solid var(--border);border-radius:9px;padding:9px 12px;
  font-size:.83rem;color:var(--t1);font-family:inherit;outline:none;width:100%;cursor:pointer}
.adm-vazio{padding:26px 20px;text-align:center;color:var(--t3);font-size:.85rem;line-height:1.6}
/* A linha do canal QUEBRA quando não cabe.
   Sem isso, o botão "Só equipe" saía pela borda direita do painel e
   ficava cortado ao meio — visível na tela, impossível de clicar
   inteiro. */
.adm-canal{display:flex;align-items:center;gap:8px;padding:11px 20px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.adm-canal b{flex:1 1 auto;min-width:96px;font-size:.88rem;color:var(--t1);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-canal button{flex-shrink:0;white-space:nowrap}
.adm-tag{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  background:var(--bg);color:var(--t3);border-radius:50px;padding:2px 9px}
.adm-aviso{margin:18px 20px;padding:12px 14px;border-radius:10px;background:rgba(139,92,246,.1);
  border-left:3px solid #8b5cf6;font-size:.8rem;color:var(--t2);line-height:1.5}
/* Cartão do colaborador */
.ct-topo{display:flex;align-items:center;gap:14px;padding:16px 22px 12px}
.ct-av{width:58px;height:58px;border-radius:50%;overflow:hidden;flex-shrink:0;position:relative;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.15rem}
.ct-av.online{overflow:visible}
.ct-av.online > img{border-radius:50%}
.ct-av.online::after{content:'';position:absolute;right:1px;bottom:1px;width:15px;height:15px;
  border-radius:50%;background:#25d366;border:3px solid var(--surface)}
.ct-nome b{display:block;font-size:1.05rem;color:var(--t1)}
.ct-nome span{font-size:.78rem;color:var(--t3)}
.ct-dados{padding:0 22px}
.ct-linha{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:.84rem}
.ct-linha:last-child{border-bottom:none}
.ct-linha span{color:var(--t3);flex-shrink:0}
.ct-linha b{color:var(--t1);font-weight:600;text-align:right;word-break:break-word}
/* A linha de ações QUEBRA.
   Eram quatro botões quando ela nasceu; hoje são oito — silenciar,
   pedir mudo, desligar microfone, conversa reservada, acenar, seguir.
   Com flex:1 e sem quebra, eles se espremiam até os últimos sumirem da
   vista, e parecia que os novos não tinham sido criados. */
/* Ações agrupadas por função, com o nome escrito.
   Dez ícones iguais numa fileira obrigavam a passar o mouse em cada um
   para descobrir o que faziam. O rótulo custa duas linhas e elimina a
   adivinhação. */
.ct-grupo{ padding:10px 22px 0 }
.ct-grupo-rot{
  display:block; margin-bottom:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--t3)
}
.ct-acoes{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 4px}
.ct-acoes button{
  flex:0 0 auto; min-width:74px;
  padding:8px 10px; border-radius:11px;
  border:1.5px solid var(--border); background:none;
  cursor:pointer; color:var(--t2);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:inherit
}
.ct-acoes button:hover{border-color:var(--brand);color:var(--t1)}
.ct-acoes button i{ font-style:normal; font-size:.68rem; line-height:1.2; text-align:center }
.ct-acoes .msr{font-size:20px}
.ct-acoes .ct-perigo:hover{ border-color:#c0304a; color:#c0304a }
.ct-envio{display:flex;gap:8px;padding:12px 22px 20px;align-items:flex-end}
.ct-envio textarea{flex:1;background:var(--bg);border:none;outline:none;border-radius:12px;
  padding:11px 14px;font-size:.88rem;color:var(--t1);font-family:inherit;resize:none;max-height:90px}
.ct-envio button{background:var(--brand);border:none;border-radius:50%;width:42px;height:42px;
  cursor:pointer;color:#0d1f3c;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Estante */
.estante-lista{max-height:min(52vh,400px);overflow-y:auto;padding:0 14px 18px}
.livro-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  text-decoration:none;color:inherit;cursor:pointer}
.livro-item:hover{background:var(--sidebar-hover)}
.livro-lombada{width:8px;height:34px;border-radius:2px;flex-shrink:0;
  box-shadow:inset -2px 0 0 rgba(0,0,0,.18)}
.livro-txt{flex:1;min-width:0}
.livro-txt b{display:block;font-size:.86rem;color:var(--t1);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.livro-txt .livro-de{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--t3);margin-top:2px}
.livro-av{width:18px;height:18px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.52rem;font-weight:700;color:#fff}
.livro-av img{width:100%;height:100%;object-fit:cover}
.livro-item .msr{font-size:19px;color:var(--t3);flex-shrink:0}
.livro-item:hover .msr{color:var(--brand-d)}
/* Cantina */
.cantina-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cant-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px;
  border-radius:12px;border:1.5px solid var(--border);background:none;cursor:pointer;font-family:inherit}
.cant-item:hover{border-color:var(--brand);background:rgba(0,194,224,.05)}
.cant-icone{font-size:2rem;line-height:1}
.cant-item b{font-size:.86rem;color:var(--t1)}
.arc-menu{display:grid;gap:10px}
.arc-jogo{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'i n r' 'i d r';
  gap:2px 14px;align-items:center;text-align:left;padding:14px 16px;border-radius:12px;
  border:1.5px solid var(--border);background:none;cursor:pointer;font-family:inherit}
.arc-jogo:hover{border-color:var(--brand);background:rgba(0,194,224,.05)}
.arc-icone{grid-area:i;font-size:1.8rem}
.arc-jogo b{grid-area:n;font-size:.95rem;color:var(--t1)}
.arc-desc{grid-area:d;font-size:.78rem;color:var(--t3)}
.arc-rec{grid-area:r;font-size:.7rem;font-weight:700;color:var(--t3);background:var(--bg);
  border-radius:50px;padding:3px 10px}
#arc-cv{width:100%;border-radius:10px;display:block;background:#101a2a;cursor:crosshair;touch-action:none}
.arc-pe{display:flex;justify-content:space-between;align-items:center;margin-top:10px;
  font-size:.82rem;color:var(--t2)}
.arc-pe button{background:none;border:none;color:var(--brand-d);font-weight:600;cursor:pointer;
  font-family:inherit;font-size:.82rem}
/* VLibras: o widget vem com um botão grande que cobre os controles.
   Encolhemos, empurramos para o canto e deixamos o resto da tela clicável. */
#vlibras-raiz [vw-access-button]{transform:scale(.62);transform-origin:bottom right}
#vlibras-raiz{position:fixed;right:8px;bottom:8px;z-index:2400;pointer-events:none}
#vlibras-raiz [vw-access-button],
#vlibras-raiz [vw-plugin-wrapper]{pointer-events:auto}
body.libras-oculto #vlibras-raiz{display:none}
.libras-esconder{position:fixed;right:10px;bottom:112px;z-index:2500;width:26px;height:26px;
  border-radius:50%;border:none;background:var(--surface);color:var(--t3);cursor:pointer;
  font-size:.75rem;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.libras-esconder:hover{color:var(--t1)}
body.libras-oculto .libras-esconder{bottom:10px;background:var(--brand);color:#0d1f3c}
body.libras-oculto .libras-esconder::before{content:'🤟';font-size:.8rem}
body.libras-oculto .libras-esconder{font-size:0}
.mural-balao{display:none;position:fixed;z-index:3500;max-width:260px;border-radius:8px;
  padding:10px 12px;box-shadow:0 8px 26px rgba(0,0,0,.26);pointer-events:none;
  transform:rotate(-.6deg)}
.mural-balao.show{display:block}
.mural-balao .mb-txt{font-size:.86rem;color:#10233B;line-height:1.45;white-space:pre-wrap;
  word-break:break-word}
.mural-balao .mb-pe{font-size:.68rem;color:rgba(16,35,59,.6);margin-top:7px}
.of-brinquedo{display:none;position:absolute;bottom:96px;left:50%;transform:translateX(-50%);
  z-index:9;background:var(--surface);border-radius:50px;padding:8px 18px;font-size:.84rem;
  font-weight:600;color:var(--t1);box-shadow:0 6px 22px rgba(0,0,0,.22)}
.of-brinquedo.show{display:block}
.of-andares{display:flex;gap:3px;background:var(--surface);border-radius:50px;padding:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.of-andar{border:none;background:none;border-radius:50px;padding:6px 11px;cursor:pointer;
  color:var(--t3);display:flex;align-items:center}
.of-andar .msr{font-size:18px}
.of-andar:hover{color:var(--t1)}
.of-andar.on{background:var(--brand);color:#0d1f3c}
.of-local{font-size:.78rem;font-weight:700;color:var(--brand-d);background:var(--surface);
  border-radius:50px;padding:6px 14px;box-shadow:0 1px 3px rgba(0,0,0,.12);white-space:nowrap}
html.dark .of-local{color:var(--brand)}
.of-reacoes{display:flex;gap:3px;background:var(--surface);border-radius:50px;padding:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.of-reacoes button{border:none;background:none;cursor:pointer;font-size:1.05rem;line-height:1;
  padding:5px 7px;border-radius:50px;transition:.12s}
.of-reacoes button:hover{background:var(--bg);transform:scale(1.18)}
/* Áudio */
.au-rot{font-size:.78rem;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.au-sel{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;
  font-size:.88rem;color:var(--t1);font-family:inherit;outline:none}
.au-nivel{height:7px;background:var(--bg);border-radius:5px;overflow:hidden;margin-top:10px}
#au-nivel-in{height:100%;width:0;background:var(--border);border-radius:5px;transition:width .06s linear}
.au-dica{font-size:.74rem;color:var(--t3);margin-top:6px}
.au-linha{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--border);cursor:pointer}
.au-linha:last-of-type{border-bottom:none}
.au-linha span{flex:1}
.au-linha b{display:block;font-size:.88rem;color:var(--t1);font-weight:600}
.au-linha i{font-size:.75rem;color:var(--t3);font-style:normal}
.au-linha input{width:19px;height:19px;accent-color:var(--brand);flex-shrink:0}
.au-aplicar{width:100%;margin-top:18px;padding:12px;border-radius:50px;background:var(--brand);
  color:#0d1f3c;font-weight:700;border:none;cursor:pointer;font-family:inherit;font-size:.92rem}
.au-obs{font-size:.75rem;color:var(--t3);margin-top:12px;line-height:1.45}
/* Status */
.st-ops{display:grid;gap:8px}
.st-op{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:10px;cursor:pointer;
  border:1.5px solid var(--border);background:none;font-family:inherit;text-align:left;width:100%}
.st-op:hover{border-color:var(--brand)}
.st-op.on{border-color:var(--brand);background:rgba(0,194,224,.08)}
.st-sep{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--t3);margin:14px 0 8px}
.st-aus{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.st-aus button{padding:10px 12px;border-radius:10px;border:1.5px solid var(--border);
  background:none;cursor:pointer;font-size:.82rem;color:var(--t1);font-family:inherit;text-align:left}
.st-aus button:hover{border-color:var(--brand)}
.st-aus button.on{border-color:var(--brand);background:rgba(0,194,224,.12);font-weight:700}
.st-aus button.on::after{content:' ✕';color:var(--t3);font-weight:400}
.nav-user-av,#vc-bar-av{position:relative}
.av-ausencia{position:absolute;bottom:-2px;right:-2px;font-size:.62rem;background:var(--surface);
  border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.st-voltar{width:100%;margin-top:10px;padding:11px;border-radius:50px;background:var(--brand);
  color:#0d1f3c;font-weight:700;border:none;cursor:pointer;font-family:inherit}
/* Aba de escopo do chat */
.vc-escopo{display:none;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border)}
.vc-escopo.show{display:flex}
.vc-escopo button{flex:1;padding:7px;border-radius:8px;border:1.5px solid var(--border);
  background:none;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--t3);font-family:inherit}
.vc-escopo button.on{border-color:var(--brand);background:rgba(0,194,224,.1);color:var(--t1)}
.vc-escopo button.off{opacity:.5;cursor:not-allowed}
.st-bola{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.st-txt b{display:block;font-size:.9rem;color:var(--t1)}
.st-txt span{font-size:.76rem;color:var(--t3)}
/* Aparência */
.look-corpo{padding:18px 24px 22px}
.look-colunas{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.look-rot{font-size:.78rem;font-weight:700;color:var(--t2);margin:0 0 9px;
  text-transform:uppercase;letter-spacing:.5px}
.look-colunas .look-acs{margin-bottom:20px}
.look-rodape{display:flex;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid var(--border)}
.look-sec{flex:1;padding:12px;border-radius:50px;background:none;border:1.5px solid var(--border);
  color:var(--t2);font-weight:600;cursor:pointer;font-family:inherit;font-size:.86rem}
.look-prim{flex:1;padding:12px;border-radius:50px;background:var(--brand);color:#0d1f3c;
  font-weight:700;border:none;cursor:pointer;font-family:inherit;font-size:.9rem}
@media(max-width:640px){ .look-colunas{grid-template-columns:1fr;gap:4px} }
.look-grade{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.look-cor{width:38px;height:38px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.look-cor.on{border-color:var(--t1);transform:scale(1.08)}
.look-acs{display:flex;flex-wrap:wrap;gap:8px}
.look-ac{padding:9px 16px;border-radius:50px;border:1.5px solid var(--border);background:none;
  cursor:pointer;font-size:.84rem;font-weight:600;color:var(--t2);font-family:inherit}
.look-ac.on{border-color:var(--brand);background:rgba(0,194,224,.1);color:var(--t1)}
/* Mural */
.mural-lista{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 20px;
  max-height:min(46vh,340px);overflow-y:auto}
.post-it{border-radius:4px;padding:12px 12px 8px;box-shadow:0 3px 10px rgba(0,0,0,.14);
  transform:rotate(-.6deg);min-height:92px;display:flex;flex-direction:column}
.post-it:nth-child(even){transform:rotate(.7deg)}
.post-txt{flex:1;font-size:.85rem;color:#10233B;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.post-pe{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:8px;
  font-size:.66rem;color:rgba(16,35,59,.6)}
.post-pe button{background:none;border:none;color:rgba(16,35,59,.5);cursor:pointer;font-size:.8rem;padding:0 2px}
.post-pe button:hover{color:#ef4444}
.mural-vazio{grid-column:1/-1;text-align:center;color:var(--t3);font-size:.86rem;padding:26px 10px}
.mural-novo{display:flex;gap:8px;padding:12px 20px 18px;border-top:1px solid var(--border)}
.mural-novo textarea{flex:1;background:var(--bg);border:none;outline:none;border-radius:10px;
  padding:10px 14px;font-size:.88rem;color:var(--t1);font-family:inherit;resize:none;height:44px}
.mural-novo button{background:var(--brand);border:none;border-radius:50%;width:44px;height:44px;
  cursor:pointer;color:#0d1f3c;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Quadro */
.quadro-topo{display:flex;align-items:center;gap:7px;padding:10px 16px;border-bottom:1px solid var(--border)}
.qd-cor{width:26px;height:26px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.qd-cor.on{border-color:var(--t1)}
#quadro-cv{width:100%;display:block;background:#fff;cursor:crosshair;touch-action:none}
/* Convite "chega aqui" */
.chega-card{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);z-index:9;
  background:var(--surface);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:0 10px 34px rgba(0,0,0,.28);animation:chegaEntra .22s ease-out}
@keyframes chegaEntra{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.chega-txt{font-size:.86rem;color:var(--t2);margin-right:4px}
.chega-txt b{color:var(--t1)}
.chega-sim{background:var(--brand);border:none;border-radius:50px;padding:9px 18px;font-size:.82rem;
  font-weight:700;color:#0d1f3c;cursor:pointer;font-family:inherit}
.chega-nao{background:none;border:1.5px solid var(--border);border-radius:50px;padding:8px 16px;
  font-size:.82rem;font-weight:600;color:var(--t3);cursor:pointer;font-family:inherit}
.chega-nao:hover{color:var(--t1)}
.cafe-ir{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);z-index:8;
  background:#b45309;color:#fff;border:none;border-radius:50px;padding:11px 22px;font-size:.86rem;
  font-weight:700;cursor:pointer;box-shadow:0 6px 22px rgba(180,83,9,.4);font-family:inherit;
  animation:cafePulsa 2s ease-in-out infinite}
@keyframes cafePulsa{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}
.of-hint.em-reuniao{color:var(--brand-d);font-weight:600}
.of-hint b{color:var(--t2);background:var(--surface);border-radius:5px;padding:1px 6px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);font-size:.72rem}
/* Zumbido: sacode a sala inteira */
.vc-room.nudging{animation:nudgeShake .62s cubic-bezier(.36,.07,.19,.97)}
@keyframes nudgeShake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-9px,-4px)}  20%{transform:translate(8px,5px)}
  30%{transform:translate(-7px,4px)}   40%{transform:translate(7px,-5px)}
  50%{transform:translate(-6px,-3px)}  60%{transform:translate(5px,4px)}
  70%{transform:translate(-4px,2px)}   80%{transform:translate(3px,-2px)}
  90%{transform:translate(-2px,1px)}
}
@media (prefers-reduced-motion:reduce){.vc-room.nudging{animation:none}}
.vc-panel{width:330px;flex-shrink:0;display:none;flex-direction:column;background:var(--surface);
  border-left:1px solid var(--border);min-height:0}
.vc-panel.open{display:flex}
.vc-panel-tabs{display:flex;align-items:center;gap:4px;padding:8px 8px 0;border-bottom:1px solid var(--border);flex-shrink:0}
.vc-tab.tem-novidade::after{content:'';position:absolute;top:7px;right:10px;width:7px;height:7px;
  border-radius:50%;background:var(--brand)}
.vc-tab{position:relative;flex:1;padding:9px 6px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;
  font-size:.85rem;font-weight:600;color:var(--t3);transition:.15s}
.vc-tab:hover{color:var(--t2)}
.vc-tab.active{color:var(--brand-d);border-bottom-color:var(--brand)}
html.dark .vc-tab.active{color:var(--brand)}
.vc-panel-x{background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;display:flex}
.vc-panel-x:hover{color:var(--t1)}
.vc-panel-view{flex:1;display:flex;flex-direction:column;min-height:0}
.vc-chat-msgs{flex:1;min-height:0;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.vc-chat-msg{display:flex;flex-direction:column;gap:2px}
.vc-chat-who{font-size:.72rem;font-weight:700;color:var(--brand-d)}
html.dark .vc-chat-who{color:var(--brand)}
.vc-chat-txt{font-size:.85rem;color:var(--t1);line-height:1.4;word-wrap:break-word}
.vc-chat-time{font-size:.65rem;color:var(--t3)!important;font-weight:400}
.vc-chat-in{display:flex;align-items:flex-end;gap:6px;padding:10px;border-top:1px solid var(--border);flex-shrink:0}
.vc-chat-in textarea{flex:1;background:var(--bg);border:none;outline:none;border-radius:18px;padding:9px 14px;
  font-size:.85rem;color:var(--t1);resize:none;max-height:100px;font-family:inherit}
.vc-chat-in button{width:38px;height:38px;border-radius:50%;border:none;background:var(--brand);color:#0d1f3c;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vc-chat-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#ef4444;display:none}
.vc-chat-dot.show{display:block}
#room-chat-btn{position:relative}
/* Transcricao */
.vc-tr-ctl{display:flex;gap:6px;padding:10px 10px 6px;flex-shrink:0}
.vc-tr-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border-radius:50px;
  border:1.5px solid var(--border);background:none;color:var(--t2);font-size:.8rem;font-weight:600;cursor:pointer;transition:.15s}
.vc-tr-toggle:hover{border-color:var(--brand);color:var(--t1)}
.vc-tr-toggle.on{background:#ef4444;border-color:#ef4444;color:#fff}
.vc-tr-mini{width:38px;border-radius:10px;border:1.5px solid var(--border);background:none;color:var(--t3);cursor:pointer}
.vc-tr-mini:hover{color:var(--t1)}
.vc-tr-hint{font-size:.7rem;color:var(--t3);padding:0 12px 8px;line-height:1.4;flex-shrink:0}
.vc-tr-acoes{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.ata-dia{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:7px 10px;
  font-size:.8rem;color:var(--t1);font-family:inherit;outline:none}
.ata-btn{display:flex;align-items:center;gap:6px;background:var(--brand);border:none;border-radius:8px;
  padding:7px 14px;font-size:.8rem;font-weight:600;color:#0d1f3c;cursor:pointer;font-family:inherit}
.ata-btn .msr{font-size:16px}
.vc-tr-lines{flex:1;min-height:0;overflow-y:auto;padding:4px 12px 14px;display:flex;flex-direction:column;gap:8px}
.vc-tr-line{font-size:.82rem;line-height:1.45}
.vc-tr-who{font-weight:700;color:var(--brand-d)}
html.dark .vc-tr-who{color:var(--brand)}
.vc-tr-line.interim{opacity:.55;font-style:italic}
@media (max-width:900px){.vc-panel{position:absolute;inset:0;width:100%;z-index:20}}
/* Controles sobre a tela compartilhada / camera */
.vc-media-ctrls{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:5;opacity:0;transition:opacity .15s}
.vc-media-host{position:relative}
.vc-media-host:hover .vc-media-ctrls,.vc-media-ctrls:focus-within,.vc-floating .vc-media-ctrls{opacity:1}
.vc-media-btn{width:34px;height:34px;border-radius:9px;border:none;cursor:pointer;background:rgba(0,0,0,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .15s}
.vc-media-btn:hover{background:rgba(0,0,0,.8)}
.vc-media-btn .msr{font-size:20px}
/* Janela flutuante reposicionavel */
.vc-floating{position:fixed!important;z-index:900;width:min(460px,60vw);max-width:none!important;height:auto!important;
  aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.45);resize:both;min-width:240px;min-height:140px}
.vc-drag-handle{position:absolute;top:0;left:0;right:0;height:34px;cursor:grab;z-index:4;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent)}
.vc-floating.dragging .vc-drag-handle{cursor:grabbing}
.vc-media-host:not(.vc-floating) .vc-drag-handle{display:none}
/* O card encolhe conforme entra gente. Com largura fixa, sete pessoas
   ocupavam a tela inteira e o compartilhamento virava um selo. A variável
   é ajustada no JavaScript, que sabe quantos são. */
.vc-tile{position:relative;background:var(--surface);border-radius:12px;
  width:var(--tile-w, 260px);aspect-ratio:16/10;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:2px solid transparent;transition:width .18s ease,border-color .2s}
.vc-tile.speaking{border-color:#25d366}
/* Anel verde pulsante no avatar de quem esta falando */
.vc-tile-av{position:relative;transition:box-shadow .12s ease-out}
/* Camera dentro do card */
.vc-tile-cam{position:absolute;inset:0;width:100%;height:100%;background:#000;border-radius:0;overflow:hidden}
.vc-tile.is-me .vc-tile-cam video{transform:scaleX(-1)}
.vc-tile.speaking{border-color:#25d366;box-shadow:0 0 0 1px #25d366}
.vc-tile.speaking .vc-tile-av{box-shadow:0 0 0 4px #25d366,0 0 16px rgba(37,211,102,.55);animation:vcSpeak 1.1s ease-in-out infinite}
.vc-speak-dot{position:absolute;right:2px;bottom:2px;width:16px;height:16px;border-radius:50%;background:#25d366;
  border:2.5px solid var(--surface);opacity:0;transform:scale(.6);transition:.15s}
.vc-tile.speaking .vc-speak-dot{opacity:1;transform:scale(1)}
@keyframes vcSpeak{0%,100%{box-shadow:0 0 0 4px #25d366,0 0 14px rgba(37,211,102,.45)}50%{box-shadow:0 0 0 6px #25d366,0 0 22px rgba(37,211,102,.75)}}
@media (prefers-reduced-motion:reduce){.vc-tile.speaking .vc-tile-av{animation:none}}
.vc-tile-av{width:86px;height:86px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--brand),#1a6b99);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.8rem;flex-shrink:0}
.vc-tile-av img{width:100%;height:100%;object-fit:cover}
/* Nome como etiqueta sobre o card, no canto inferior esquerdo */
.vc-tile-name{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);z-index:3;
  display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.62);color:#fff;
  padding:4px 9px;border-radius:7px;font-size:.8rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(3px)}
.vc-tile-name .msr{font-size:15px;color:#ef4444;flex-shrink:0}
.vc-tile-role{position:absolute;top:8px;right:8px;z-index:3;display:flex;align-items:center;gap:5px}
/* Selo AO VIVO (padrao Discord) */
.vc-live{display:inline-flex;align-items:center;gap:4px;background:#ef4444;color:#fff;font-size:.6rem;font-weight:800;
  letter-spacing:.6px;padding:2px 6px;border-radius:4px;text-transform:uppercase;line-height:1.4}
.vc-live::before{content:'';width:5px;height:5px;border-radius:50%;background:#fff;animation:vcLive 1.4s ease-in-out infinite}
.vc-live-sm{font-size:.52rem;padding:1px 4px}
@keyframes vcLive{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.vc-live::before{animation:none}}
/* Tile de quem esta compartilhando ganha destaque */
.vc-tile.live{border-color:#ef4444}
/* Rotulo sobre a tela compartilhada */
/* Seletor quando há mais de uma tela */
body.modo-teatro #office-wrap{max-height:22vh}
body.modo-teatro #vc-screen-area{max-height:none;flex:1}
body.modo-teatro #vc-screen-area video{max-height:72vh}
.tela-troca .teatro{padding:5px 10px;display:flex;align-items:center}
.tela-troca .teatro .msr{font-size:17px}
.tela-nenhuma{padding:26px 16px;text-align:center;font-size:.85rem;color:var(--t3)}
.tela-troca{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px;
  background:rgba(0,0,0,.6);padding:5px;border-radius:50px;backdrop-filter:blur(6px);z-index:6}
.tela-troca button{border:none;background:rgba(255,255,255,.14);color:#fff;border-radius:50px;
  padding:5px 14px;font-size:.76rem;font-weight:600;cursor:pointer;font-family:inherit}
.tela-troca button.on{background:var(--brand);color:#0d1f3c}
.vc-screen-label{position:absolute;top:8px;left:10px;z-index:4;display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.6);color:#fff;font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:6px;backdrop-filter:blur(4px)}
.vc-screen-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:vcLive 1.4s ease-in-out infinite}
.vc-tile-status{font-size:.68rem;color:var(--t3);font-style:italic;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-status-modal{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center}
.vc-status-modal.show{display:flex}
.vc-status-box{background:var(--surface);border-radius:16px;padding:24px;width:340px;max-width:90vw;box-shadow:0 8px 40px rgba(0,0,0,.3)}
.vc-status-box h3{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:14px}
.vc-status-input{width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid var(--border);font-size:.9rem;color:var(--t1);background:var(--bg);outline:none;transition:.2s;box-sizing:border-box}
.vc-status-input:focus{border-color:var(--brand)}
.vc-status-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.vc-status-chip{padding:5px 12px;border-radius:50px;border:1.5px solid var(--border);font-size:.78rem;color:var(--t2);cursor:pointer;transition:.15s;background:none;font-family:inherit}
.vc-status-chip:hover{border-color:var(--brand);color:var(--brand)}
.vc-status-chip.selected{background:var(--brand);border-color:var(--brand);color:#0d1f3c;font-weight:600}
.vc-status-actions{display:flex;gap:8px;margin-top:16px}
.vc-status-save{flex:1;padding:11px;border-radius:50px;background:var(--brand);color:#0d1f3c;font-weight:700;font-size:.9rem;border:none;cursor:pointer}
.vc-status-cancel{padding:11px 16px;border-radius:50px;background:var(--bg);color:var(--t2);font-size:.9rem;border:1.5px solid var(--border);cursor:pointer;font-family:inherit}
.ct-status{font-size:.74rem;margin-top:1px}


.vc-room{flex:1;display:none;flex-direction:column;overflow:hidden;position:relative}
/* Cinto de seguranca: mesmo que o style inline se perca, o preview local nunca
   pode virar um video em tela inteira sobre a interface. */
#vc-cam-local{position:absolute;top:70px;right:12px;width:120px;height:90px;max-width:160px;max-height:120px;
  border-radius:10px;overflow:hidden;z-index:10;background:#000}
#vc-cam-local video{width:100%;height:100%;object-fit:cover}
.vc-room video{max-width:100%}
.vc-room:not(.show) #vc-cam-local{display:none}
.vc-room.show{display:flex !important}

.profile-av:hover .profile-av-overlay{opacity:1 !important}

.vc-room-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);background:var(--bg);color:var(--t2);cursor:pointer;transition:.15s;flex-shrink:0}
.vc-room-btn:hover{background:var(--sidebar-hover);color:var(--t1)}
.vc-room-btn svg{width:22px;height:22px}
.vc-room-btn.active{background:var(--brand);color:#0d1f3c;border-color:var(--brand)}
.vc-room-btn.active:hover{background:var(--brand-d)}
.vc-room-btn.muted{background:rgba(239,68,68,.12);color:#ef4444;border-color:#ef4444}
.vc-room-btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}
.vc-room-btn.danger:hover{background:#dc2626}
.vc-room-btn.sharing{background:var(--brand);color:#0d1f3c;border-color:var(--brand)}

/* ── Material Symbols Rounded ── */
.msr{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;font-size:26px;line-height:1;
     letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;
     direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
     font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;user-select:none}
.msr.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* Barra de controles do canal de voz */
.vc-bar{position:absolute;left:0;right:0;bottom:0;z-index:12;padding:34px 16px 16px;display:flex;justify-content:center;gap:14px;
  background:linear-gradient(to top,var(--bg) 45%,rgba(0,0,0,0));border-top:none;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.vc-bar.show,.vc-bar:hover,.vc-bar:focus-within{opacity:1;transform:none;pointer-events:auto}
/* com o painel aberto a barra para antes dele, para nao cobrir o campo de mensagem */
.vc-room.panel-open .vc-bar{right:330px}
@media (max-width:900px){ .vc-room.panel-open .vc-bar{display:none} }
.vc-room-btn{width:56px;height:56px;border-radius:50%;border:none;background:var(--surface);color:var(--t1);
             box-shadow:0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);transition:transform .15s,background .15s,color .15s}
.vc-room-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.14)}
.vc-room-btn.active,.vc-room-btn.sharing{background:var(--brand);color:#0d1f3c;border:none}
/* microfone aberto e o estado normal: branco como os demais.
   mudo usa o mesmo tratamento vermelho do "audio desativado". */
#room-mic-btn.active{background:var(--surface);color:var(--t1)}
.vc-room-btn.muted,.vc-room-btn.deafened{background:rgba(239,68,68,.12);color:#ef4444;
  box-shadow:inset 0 0 0 2px #ef4444,0 1px 3px rgba(0,0,0,.10)}
.vc-room-btn.danger{background:#ef4444;color:#fff;border:none}
.vc-room-btn.danger:hover{background:#dc2626}
/* alterna o glifo conforme o estado do botão */
.vc-room-btn .ic-off{display:none}
.vc-room-btn.muted .ic-on,.vc-room-btn.sharing .ic-on,.vc-room-btn.cam-on .ic-on,.vc-room-btn.deafened .ic-on{display:none}
.vc-room-btn.muted .ic-off,.vc-room-btn.sharing .ic-off,.vc-room-btn.cam-on .ic-off,.vc-room-btn.deafened .ic-off{display:inline-block}

/* O mesmo para o flutuante. Precisa vir depois da definição de .msr, que
   declara display:inline-block — antes dela, os dois ícones apareciam. */
.vc-flut-mic .ic-off{display:none}
.vc-flut-mic.mudo .ic-on{display:none}
.vc-flut-mic.mudo .ic-off{display:inline-block}

@media (prefers-reduced-motion:reduce){.vc-room-btn:hover{transform:none}}


/* ═══════════════════════════════════════════════════════════════
   CELULAR — uma tela de cada vez

   No computador, lista e conversa convivem lado a lado. Numa tela de
   380px isso não cabe: a conversa fica fora do campo de visão, e a
   pessoa não consegue nem enviar mensagem nem entrar no canal de voz.

   Aqui a lista ocupa a tela inteira, e a conversa entra por cima ao
   ser aberta — com um botão de voltar. É o que todo mensageiro faz no
   telefone, e o que o Capacitor precisa para o app parecer app.
═══════════════════════════════════════════════════════════════ */
@media(max-width:820px){

  /* A coluna lateral ocupa tudo */
  #side-col, .side-panel, .sidebar{
    width:100% !important;
    max-width:100% !important;
    border-right:none
  }

  /* A área de conversa vira uma camada por cima */
  /* Fora da tela por `left`, não por `transform`.
     O transform já é usado por outras regras do arquivo e a cascata
     entre elas é frágil; `left` não compete com nada e anima igual. */
  .chat-area{
    position:fixed;
    top:0; bottom:0;
    left:100%; right:auto;
    width:100%;
    z-index:40;
    transition:left .22s ease;
    background:var(--bg);
    padding-bottom:env(safe-area-inset-bottom)
  }
  body.ver-conversa .chat-area{ left:0 }

  /* Sem conversa aberta, a tela de boas-vindas não faz sentido:
     ela ocuparia o lugar da lista. */
  .chat-empty{ display:none !important }

  /* A barra de navegação vai para o rodapé, como em qualquer app.
     A estrutura real é nav-logo · nav-sep · nav-items · nav-bottom —
     não nav-top/nav-mid, que eu supus e não existem. */
  .nav-rail{
    position:fixed;
    left:0; right:0; bottom:0;
    top:auto;
    width:100% !important;
    height:auto;
    flex-direction:row !important;
    align-items:center;
    padding:4px 2px calc(4px + env(safe-area-inset-bottom));
    border-right:none;
    border-top:1px solid var(--rail-border);
    z-index:45
  }

  /* O logotipo e o separador saem: o espaço do rodapé é dos atalhos, e
     a marca já está no topo da lista. */
  .nav-rail .nav-logo,
  .nav-rail .nav-sep{ display:none }

  /* O segundo grupo — tema e configurações — entra na barra.
     Ele tem flex:0 no HTML e por isso encolhia a zero no celular; o
     botão de configurações existia mas com largura nenhuma. */
  .nav-rail .nav-items[style]{ flex:0 0 auto !important }
  .nav-rail .nav-items .dark-toggle{ display:none }   /* tema fica em Aparência */

  /* Os atalhos em linha, distribuídos */
  .nav-rail .nav-items{
    display:flex;
    flex-direction:row !important;
    flex:1;
    justify-content:space-around;
    align-items:center;
    gap:0;
    overflow-x:auto;
    scrollbar-width:none
  }
  .nav-rail .nav-items::-webkit-scrollbar{ display:none }

  /* O avatar fica, à direita: é o atalho para o perfil */
  .nav-rail .nav-bottom{
    margin:0 4px 0 2px;
    flex-shrink:0
  }

  /* São nove atalhos numa tela de 390px. Em vez de espremer todos,
     a barra rola na horizontal — os mais usados ficam à vista, e o
     resto alcança com um arrasto. Espremer deixaria cada alvo menor
     que o dedo. */
  .nav-item{ width:46px; height:46px; flex-shrink:0 }
  .nav-item svg{ width:22px; height:22px }
  .nav-rail .nav-items{ padding:0 4px; gap:2px }

  /* Indica que há mais coisa à direita */
  .nav-rail::after{
    content:'';
    position:absolute;
    right:52px; top:0; bottom:0;
    width:22px;
    pointer-events:none;
    background:linear-gradient(90deg, transparent, var(--rail-bg))
  }

  /* Espaço para a barra de baixo não cobrir o conteúdo */
  /* O espaço da barra é MEDIDO, não suposto.
   
     Em aparelhos com fonte maior a barra fica mais alta, e os 62px fixos
     que eu usava deixavam o campo de mensagem atrás dela. A variável é
     calculada em JavaScript ao abrir e a cada mudança de tamanho. */
  #side-col, .app-inner{ padding-bottom:var(--alt-nav, 62px) }

  /* A área de conversa também respeita a barra: é onde fica o campo de
     texto, que era o que estava sendo coberto. */
  .chat-area{ padding-bottom:var(--alt-nav, 62px) }
  body.digitando .chat-area{ padding-bottom:0 }
  /* Sem repetir o seletor .chat-area aqui: uma segunda declaração depois
     da regra do body.ver-conversa sobrescrevia o `left` e a conversa
     nunca entrava. O padding já está definido acima. */

  /* Botão de voltar no topo da conversa */
  .ct-voltar{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    margin-right:4px;
    border:none;
    background:none;
    color:var(--t1);
    cursor:pointer;
    flex-shrink:0
  }
  .ct-voltar svg{ width:22px; height:22px }

  /* ─── A sala de voz ───
     Ela ocupava a tela toda mas ficava ATRÁS da barra de navegação, e
     os controles — microfone, sair — sumiam embaixo dela. E, ao trocar
     para as mensagens, a sala continuava visível por cima.

     Agora ela é uma camada própria, acima de tudo, e a barra do rodapé
     sai enquanto a sala está aberta: quem está numa chamada não precisa
     dos atalhos de navegação, precisa do botão de desligar. */
  /* A sala cobre a tela sempre que estiver aberta — com o convite de
     entrada ou já conectada.
     
     Condicionar a `na-sala` fez o convite abrir ATRÁS da lista, e o
     clique no canal parecia não fazer nada. */
  #vc-room.show{
    position:fixed;
    top:0; left:0;
    width:100vw;
    /* Altura explícita: a regra base tem `flex:1`, que num elemento
       fixo sem pai flexível resulta em altura zero — e a sala ficava
       invisível mesmo estando "aberta". */
    height:calc(100vh - var(--alt-nav, 62px));
    z-index:70;
    display:flex !important;
    flex-direction:column;
    background:var(--bg)
  }

  /* Conectado, o convite não tem mais o que dizer */
  body.na-sala #vc-join-prompt{ display:none !important }

  /* A lista sai de vista quando se está na chamada.
   
     Esconder por `display` não funciona: o switchNav define
     `display:flex` inline, e inline vence a folha. Por isso usamos
     `visibility`, que ele não toca — a lista continua ocupando o
     espaço, mas fica atrás e não recebe cliques. */
  body.na-sala #side-col{
    visibility:hidden;
    pointer-events:none
  }
  /* A navegação FICA durante a chamada.
     No computador o atalho para voltar é o flutuante; no telefone, tirar
     a barra deixa a pessoa presa na sala — ela não pode responder uma
     mensagem sem desligar, que é o oposto do que um app de trabalho
     precisa fazer. */
  /* A área de conversa some, mas não por `display:none` — a sala de voz
     vive dentro dela, e um filho de pai oculto não aparece, por mais
     `fixed` que seja. Era isto que deixava a sala com tamanho zero.
     
     `visibility` esconde a conversa e a sala reverte para si. */
  body.na-sala .chat-area{ visibility:hidden }
  body.na-sala #vc-room.show{ visibility:visible }

  /* ─── Fora da sala, uma faixa fina no topo ───
     O flutuante redondo ficava no meio da lista, cobrindo conversas — e
     o painel escuro do rodapé ocupava um terço da tela repetindo
     controles que já existem dentro da sala.

     Os dois somem. No lugar, a faixa que o Discord usa: fina, no topo,
     dizendo onde você está e levando de volta ao toque. */
  .vc-connected-bar{ display:none !important }

  /* ─── O card flutuante ───
     Quadrado, pequeno, com a foto de quem está falando — como o do
     Discord. Fica no canto e pode ser arrastado, em vez da pílula
     larga que cobria a conversa do meio da lista. */
  .vc-flut{
    position:fixed !important;
    right:12px; bottom:78px; left:auto; top:auto;
    width:92px; height:92px;
    padding:0 !important;
    border-radius:16px;
    background:#1a2b4a;
    box-shadow:0 6px 22px rgba(0,0,0,.32);
    overflow:hidden;
    display:none;
    align-items:center; justify-content:center;
    z-index:35;
    cursor:grab;
    touch-action:none
  }
  body.em-chamada:not(.na-sala) .vc-flut{ display:flex !important }
  .vc-flut.arrastando{ cursor:grabbing; transition:none }

  .vc-flut .vc-flut-info,
  .vc-flut .vc-flut-pulso,
  .vc-flut .vc-flut-mic,
  .vc-flut .vc-flut-sair{ display:none !important }

  .vc-flut-foto{
    display:block;
    width:52px; height:52px;
    border-radius:50%;
    overflow:hidden;
    border:2.5px solid transparent
  }
  .vc-flut-foto.falando{ border-color:#25d366 }
  .vc-flut-foto img{ width:100%; height:100%; object-fit:cover }

  .vc-flut-tag{
    display:block;
    position:absolute;
    left:0; right:0; bottom:0;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:.62rem;
    font-weight:600;
    padding:3px 5px;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }

  .vc-faixa{ display:none !important }

  .vc-faixa{
    display:none;
    align-items:center;
    gap:9px;
    padding:9px 14px;
    background:#1a8a4a;
    color:#fff;
    font-size:.83rem;
    font-weight:600;
    cursor:pointer;
    flex-shrink:0;
    position:relative;
    z-index:30
  }
  body.em-chamada:not(.na-sala) .vc-faixa{ display:flex }

  .vc-faixa .ponto{
    width:8px; height:8px; border-radius:50%;
    background:#7bffb0;
    animation:pulsaFaixa 2s ease-in-out infinite;
    flex-shrink:0
  }
  @keyframes pulsaFaixa{ 0%,100%{opacity:1} 50%{opacity:.35} }
  @media(prefers-reduced-motion:reduce){ .vc-faixa .ponto{ animation:none } }

  .vc-faixa .nome{ flex:1; min-width:0; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap }
  .vc-faixa .tempo{ font-variant-numeric:tabular-nums; opacity:.85;
    font-size:.79rem }
  .vc-faixa button{
    border:none; background:rgba(255,255,255,.16); color:#fff;
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0
  }
  .vc-faixa button.sair{ background:#e24c6b }
  .vc-faixa .msr{ font-size:17px }

  /* ─── Os controles ───
     Cinco na base: microfone, fone, conversa, compartilhar, mais e
     desligar. Os demais entram na folha que sobe.

     Eles somem sozinhos após alguns segundos e voltam ao toque na tela —
     numa chamada o que importa ver são as pessoas, não os botões. */
  /* A barra de controles aparece com a conexão — a marca é `na-sala`
     no body, não uma classe `conectado` na sala, que eu inventei e
     nunca cheguei a acrescentar em lugar nenhum. Era por isso que o
     botão de sair não aparecia. */
  #vc-room.show .vc-bar{ display:none }
  body.na-sala #vc-room .vc-bar{
    display:flex;
    bottom:14px;            /* dentro da sala, que já para antes da barra */
    transition:opacity .22s, transform .22s;
  }
  body.na-sala.controles-ocultos #vc-room .vc-bar{
    opacity:0;
    transform:translateY(14px);
    pointer-events:none
  }
  /* A barra de navegação fica visível o tempo todo, inclusive na
     chamada: é o atalho para conversas, menções e configurações, e
     escondê-la deixava a pessoa presa na sala.
     
     Ela tem z-index maior que a sala para continuar clicável. */
  body.na-sala .nav-rail{ z-index:75 }

  /* ─── O cabeçalho da sala ───
     É por ele que se troca de canal: um toque volta à lista, mantendo
     a chamada. Sem isso, sair para outro canal exigiria desligar. */
  body.na-sala #vc-room .vc-room-top{
    position:relative;
    z-index:2;
    padding-top:calc(12px + env(safe-area-inset-top))
  }
  .vc-voltar-lista{
    display:none;
    align-items:center;
    gap:7px;
    background:rgba(120,120,128,.2);
    border:none;
    border-radius:50px;
    padding:7px 14px 7px 10px;
    font-family:inherit;
    font-size:.82rem;
    font-weight:600;
    color:var(--t1);
    cursor:pointer
  }
  /* O botão de voltar vale no convite também: quem abriu o canal
     errado precisa de saída sem entrar nele. */
  #vc-room.show .vc-voltar-lista{ display:flex }
  .vc-voltar-lista .msr{ font-size:18px }
  #vc-room.show .vc-bar{
    bottom:70px;
    left:12px; right:12px !important;
    padding:12px 10px;
    flex-wrap:nowrap;
    gap:6px;
    justify-content:space-around;
    background:rgba(120,120,128,.22);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-radius:18px
  }
  #vc-room.show .vc-bar .vc-room-btn{
    width:52px; height:52px;
    flex-shrink:0;
    border:none;
    background:transparent
  }

  /* Só os quatro primeiros ficam na base, mais o "mais" e o de sair.
     O resto vai para a folha. */
  #vc-room.show .vc-bar > .vc-room-btn:nth-of-type(n+5):not(.danger):not(#vc-mais){
    display:none
  }
  #vc-room.show .vc-bar #vc-mais{ display:flex !important; order:98 }
  #vc-room.show .vc-bar .vc-room-btn.danger{
    background:#e24c6b; color:#fff; order:99
  }

  /* ─── A folha de opções ───
     Sobe de baixo com a alça de arrastar, como o painel de efeitos do
     Discord. É onde ficam as opções que não cabem na base. */
  .vc-folha{
    display:block;
    position:fixed;
    left:0; right:0; bottom:0;
    background:var(--surface);
    border-radius:22px 22px 0 0;
    z-index:90;
    transform:translateY(100%);
    transition:transform .24s cubic-bezier(.3,.8,.3,1);
    max-height:82vh;
    overflow-y:auto;
    padding-bottom:calc(20px + env(safe-area-inset-bottom))
  }
  .vc-folha.show{ transform:translateY(0) }

  .vc-folha-fundo{
    display:block;
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    z-index:89;
    opacity:0; pointer-events:none;
    transition:opacity .2s
  }
  .vc-folha-fundo.show{ opacity:1; pointer-events:auto }

  .vc-alca{
    width:38px; height:4px;
    background:var(--border);
    border-radius:2px;
    margin:10px auto 4px
  }

  .vc-folha-topo{
    display:flex;
    justify-content:space-around;
    padding:14px 12px 18px;
    border-bottom:1px solid var(--border)
  }
  .vc-folha-topo .vc-room-btn{ width:52px; height:52px; border:none }

  .vc-folha-sec{
    font-size:.74rem; font-weight:700; color:var(--t3);
    text-transform:uppercase; letter-spacing:.5px;
    padding:18px 20px 8px
  }
  .vc-folha-item{
    display:flex; align-items:center; gap:14px;
    padding:14px 20px;
    cursor:pointer;
    border-bottom:1px solid var(--border)
  }
  .vc-folha-item:active{ background:var(--bg) }
  .vc-folha-item .msr{ font-size:22px; color:var(--t2); flex-shrink:0 }
  .vc-folha-item > div{ flex:1; min-width:0 }
  .vc-folha-item b{ display:block; font-size:.92rem; color:var(--t1);
    font-weight:500 }
  .vc-folha-item span{ display:block; font-size:.78rem; color:var(--t3);
    margin-top:1px }

  /* ─── As pessoas na sala ───
     A grade base usa flex com `--tile-w` fixo em 260px. Numa tela de
     390px isso transborda e corta os nomes — foi o que apareceu no
     teste.

     Em vez de trocar o layout, ajustamos a variável: o card passa a
     medir uma fração da largura disponível, e o mesmo flex-wrap que
     funciona no computador organiza as colunas sozinho. */
  /* A grade ocupa a largura da sala e cria um contexto de tamanho, para
     os cards poderem se medir contra ela com `cqw`. Antes eu calculava
     por `vw` e errava: a sala não ocupa a tela inteira, e a diferença
     fazia os cards quebrarem linha. */
  #vc-room.show #vc-grid{
    width:100%;
    padding:16px 12px 100px;
    gap:12px !important;      /* a regra base usa uma variável de 16px */
    align-content:start;
    overflow-y:auto;
    /* Uma pessoa: card ocupa a largura toda, um embaixo do outro. */
    --tile-w:calc(100vw - 24px);
    --tile-gap:12px
  }
  /* A largura vai no próprio card: a variável no contêiner não alcança
     a regra base de `.vc-tile`, que tem especificidade maior. */
  /* A largura em pixels, calculada da tela.
   
     Percentual não serve: a grade é flex e o percentual de um filho
     flexível se resolve contra a largura de conteúdo, que sem cards
     ainda medidos é quase zero — foi o que produziu os cards minúsculos.
     
     Com `vw` a conta é da janela, que sempre existe. */
  /* A grade mede 342px numa tela de 390 — há 48px entre as duas, não
     24: o recuo de 12 de cada lado mais a barra de rolagem reservada.
     Descontar só o recuo fazia os cards passarem por poucos pixels, e
     bastava isso para quebrarem linha. */
  /* `cqw` é 1% da largura do contêiner — a conta passa a ser contra a
     grade de verdade, qualquer que seja o tamanho dela. */
  /* A largura vem do JavaScript — ver ajustarGradeCards em voz.js.
     Aqui ficam só a aparência e um valor de partida para o primeiro
     quadro, antes de a medição acontecer. */
  /* Sem `flex` e sem largura: quem define é o ajustarGradeCards, em
     voz.js. O `flex:1 1 100%` que estava aqui esticava todo card para a
     linha inteira, anulando o cálculo. */
  #vc-room.show .vc-tile{
    flex:0 0 auto;
    border-radius:16px
  }
  #vc-room.show .vc-tile .ch-av,
  #vc-room.show .vc-tile-av > div:first-child{
    width:84px; height:84px; font-size:1.8rem
  }
  #vc-room.show .vc-tile-name{ font-size:.88rem; max-width:86% }

  /* Duas ou mais pessoas: duas colunas, cards menores, todos visíveis
     sem rolar. É o que a pessoa quer numa chamada — ver quem está. */
  /* Metade menos o gap inteiro, não a metade dele: com dois cards há um
     só espaçamento entre eles, mas o arredondamento do navegador fazia a
     soma passar por uma fração de pixel — e bastava isso para quebrar a
     linha. Um pouco de folga resolve. */
  /* Dois por linha: metade da tela, menos o recuo (24px) e o
     espaçamento (12px), divididos entre os dois cards. */
  #vc-room.show #vc-grid.dois .vc-tile .ch-av,
  #vc-room.show #vc-grid.dois .vc-tile-av > div:first-child{
    width:62px; height:62px; font-size:1.3rem
  }
  #vc-room.show #vc-grid.dois .vc-tile-name{ font-size:.78rem }

  /* A partir de cinco, cards ainda menores para caberem sem rolagem */
  /* O espaçamento cresce com a quantidade em vez de encolher.
   
     A regra base reduz o gap quando há muita gente, o que junta os cards
     e faz a tela parecer amontoada — exatamente o oposto do que se quer
     quando há mais rostos para distinguir. */
  #vc-room.show #vc-grid.muitos{ gap:12px !important }

  /* A partir de sete, três colunas: cards menores, mas ainda com o mesmo
     respiro entre eles. */
  /* Compartilhar tela não existe no navegador embutido do Android — é
     limitação da plataforma. Esconder o botão é melhor que mostrá-lo e
     frustrar quem toca nele. */
  html.app-nativo #room-share-btn{ display:none }

  #vc-room.show #vc-grid.lotado{ gap:10px !important }
  #vc-room.show #vc-grid.lotado .vc-tile .ch-av,
  #vc-room.show #vc-grid.lotado .vc-tile-av > div:first-child{
    width:38px; height:38px; font-size:.85rem
  }
  #vc-room.show #vc-grid.lotado .vc-tile-name{
    font-size:.62rem; max-width:94%; padding:1px 6px
  }
  #vc-room.show #vc-grid.muitos .vc-tile .ch-av,
  #vc-room.show #vc-grid.muitos .vc-tile-av > div:first-child{
    width:48px; height:48px; font-size:1.05rem
  }
  #vc-room.show #vc-grid.muitos .vc-tile-name{ font-size:.7rem; max-width:92% }

  #vc-room.show #vc-join-prompt{ padding-bottom:96px }

  /* Painéis laterais de conteúdo viram tela cheia */
  .curso-chat.show{ position:fixed; inset:0; width:100%; z-index:60 }
  #curso-area{ position:fixed; inset:0; z-index:40 }

  /* Modais com margem menor: 94vw numa tela estreita quase não sobra */
  .collab-box{ width:min(96vw, 520px) !important }

  /* ─── O teclado ───
     Com o teclado aberto, a barra do rodapé cobria o campo de texto — dá
     para ver na captura, o campo espremido atrás dos ícones.

     O WhatsApp resolve escondendo a barra enquanto se digita, e é o que
     fazemos: a classe entra no body quando o campo recebe foco. */
  body.digitando .nav-rail{ display:none }
  body.digitando #side-col,
  body.digitando .app-inner{ padding-bottom:0 }

  #msgs{ overscroll-behavior:contain }

  /* O campo de texto encosta no rodapé quando a barra sai */
  .chat-area .input-box{ padding-bottom:calc(8px + env(safe-area-inset-bottom)) }
  body.digitando .chat-area .input-box{ padding-bottom:8px }

  /* ─── O cabeçalho da conversa ───
     O setor era cortado: nome e setor competiam pela mesma linha numa
     largura que não comporta os dois. Agora o setor vai abaixo. */
  .chat-area .ct-name-row{ flex-direction:column; align-items:flex-start; gap:1px }
  .chat-area .ct-sector{ font-size:.72rem; margin:0 }
  .chat-area .ct-name{ font-size:.95rem; line-height:1.2 }
  .chat-area .ct-bar{ padding-top:calc(10px + env(safe-area-inset-top)) }
}

/* Telas muito estreitas */
@media(max-width:380px){
  .nav-item{ width:38px; height:38px }
  .ch-item{ padding:10px 12px }
}

/* No app instalado, o cabeçalho encosta na barra de status do sistema */
@media(display-mode:standalone){
  .s-top, .sp-top, .ct-bar{ padding-top:calc(14px + env(safe-area-inset-top)) }
  .nav-rail{ padding-top:6px }
}

/* ═══ Elementos que só existem no celular ═════════════════════
   A marcação deles fica no HTML, que é um só; o estilo vive dentro do
   media query de 820px. Sem uma regra base, o navegador os desenha
   crus no topo da página — foi o que desconfigurou a versão web duas
   vezes.

   Aqui todos somem por padrão. O media query é quem decide mostrar.
═══════════════════════════════════════════════════════════════ */
.vc-faixa{ display:none }/* ═══════════════════════════════════════════════════════════════
   LOGIN

   A fotografia é o centro do painel esquerdo. Ela vai em
   assets/img/login-fundo.jpg — enquanto não estiver lá,
o gradiente
   abaixo sustenta a tela sozinho,
sem quebrar nada.
═══════════════════════════════════════════════════════════════ */
#screen-login.active,
#tela-visita.active{
  display:flex;
  min-height:100vh;
  min-height:100dvh;
  background:#fff
}

/* ─── Painel da marca ─── */
.lgn-campo{
  flex:0 0 50%;
  position:relative;
  overflow:hidden;
  color:#fff;
  /* O gradiente fica por baixo da foto: se o arquivo faltar ou
     demorar, a tela continua legível em vez de piscar branco. */
  background:linear-gradient(158deg, #17406f 0%, #0d2848 46%, #06182e 100%)
}

/* Enquadramento a 38%: mais abaixo, a caneca com a marca subia e
   ficava atrás do texto dos pilares. Aqui ela cai no espaço livre
   entre os pilares e a assinatura. */
.lgn-foto{
  position:absolute; inset:0;
  /* Caminho absoluto: relativo dependia de onde o CSS está servido,
     e uma pasta a mais no caminho fazia a imagem sumir sem erro. */
  background-image:url('/assets/img/login-fundo.jpg');
  background-size:cover;
  /* Um pouco à direita do centro: a caneca fica no terço esquerdo e
     o laptop à direita — o centro exato perderia um pedaço de cada. */
  background-position:58% center
}
/* O véu, calibrado para esta fotografia.
   
   Ela tem luzes quentes no alto e um tampo de madeira claro embaixo —
   os dois pontos onde o texto branco perderia contraste. Por isso o
   escurecimento é mais forte nas pontas e alivia no meio, deixando a
   caneca e o laptop visíveis. */
.lgn-veu{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(3,12,26,.74) 0%,
      rgba(3,12,26,.44) 36%,
      rgba(3,12,26,.4) 60%,
      rgba(3,12,26,.78) 100%),
    linear-gradient(90deg, rgba(3,12,26,.56) 0%, rgba(3,12,26,.06) 80%)
}

.lgn-conteudo{
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:52px 52px 44px
}

.lgn-marca{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:auto
}
.lgn-marca img{ height:78px; width:auto; display:block }
.lgn-marca-nome{ display:flex; flex-direction:column; line-height:1 }
.lgn-marca-nome span:first-child{
  font-size:2.35rem; font-weight:700; letter-spacing:-.02em; color:#fff
}
.lgn-marca-nome span:last-child{
  font-size:1.18rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.78); margin-top:5px
}

.lgn-titulo{
  margin:0 0 16px;
  font-size:2.15rem;
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.025em
}
.lgn-titulo em{ font-style:normal; color:#4FA8F0 }

.lgn-frase{
  margin:0 0 38px;
  background:none; padding:0; border-radius:0; opacity:1; text-shadow:none;
  font-size:1rem;
  line-height:1.6;
  color:rgba(255,255,255,.82);
  max-width:34ch
}

.lgn-pilares{ display:flex; gap:38px; margin-bottom:auto }
.lgn-pilar{ display:flex; flex-direction:column; gap:11px }
.lgn-pilar-ic{
  width:46px; height:46px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  color:#fff
}
.lgn-pilar-ic svg{ width:22px; height:22px }
.lgn-pilar-txt{
  font-size:.84rem;
  line-height:1.35;
  color:rgba(255,255,255,.88)
}

.lgn-assinatura{
  border-left:3px solid #2E8BE0;
  padding-left:14px;
  line-height:1.45
}
.lgn-assinatura b{ display:block; font-size:.92rem; font-weight:700 }
.lgn-assinatura span{ font-size:.84rem; color:rgba(255,255,255,.65) }

/* ─── Painel do acesso ─── */
.lgn-forma{
  flex:1;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:44px 48px;
  background:#f7f9fc
}

.lgn-onda{ position:absolute; pointer-events:none; line-height:0 }
.lgn-onda svg{ width:100%; height:100% }
.lgn-onda-topo{ top:0; right:0; width:300px; height:260px }
.lgn-onda-pe{ bottom:0; right:0; width:300px; height:260px }

.lgn-coluna{ position:relative; z-index:1; width:100%; max-width:430px }

.lgn-ola{
  margin:0 0 2px;
  font-size:1.18rem;
  font-weight:500;
  color:#4a5f78
}
.lgn-saudacao{
  margin:0 0 7px;
  font-size:2.2rem;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.15;
  color:#0d2340
}
.lgn-abertura{
  margin:0 0 30px;
  font-size:1rem;
  color:#657d96
}

.lgn-campo-in{
  display:flex;
  align-items:center;
  gap:15px;
  border:1.5px solid #dfe7f0;
  background:#fff;
  border-radius:14px;
  padding:14px 18px;
  margin-bottom:16px;
  transition:border-color .15s, box-shadow .15s
}
.lgn-campo-in:focus-within{
  border-color:#1b7fd6;
  box-shadow:0 0 0 3px rgba(27,127,214,.12)
}

.lgn-icone{
  width:24px; height:24px;
  flex-shrink:0;
  color:#5c7898;
  display:flex; align-items:center; justify-content:center
}
.lgn-icone svg{ width:23px; height:23px }
.lgn-campo-in:focus-within .lgn-icone{ color:#1b7fd6 }

.lgn-in-corpo{ flex:1; min-width:0 }
.lgn-in-corpo label{
  display:block;
  font-size:.74rem;
  font-weight:500;
  color:#8a9cb0;
  margin-bottom:2px
}
.lgn-in-corpo input{
  width:100%;
  border:none; background:none; outline:none; padding:0;
  font-family:inherit;
  font-size:.98rem;
  color:#0d2340
}
.lgn-in-corpo input::placeholder{ color:#b9c6d4 }

.lgn-olho{
  width:32px; height:32px;
  flex-shrink:0;
  border:none; background:none;
  color:#8aa0b8;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  overflow:hidden
}
.lgn-olho:hover{ color:#3d5268 }
.lgn-olho svg{ width:20px; height:20px }
.lgn-corte{ opacity:0; transition:opacity .12s }
.lgn-olho.mostrando .lgn-corte{ opacity:1 }
#screen-login .login-extras,
#tela-visita .login-extras{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:16px 0 26px
}
#screen-login .login-remember,
#tela-visita .login-remember{
  display:flex; align-items:center; gap:10px;
  font-size:.92rem; color:#44586f; cursor:pointer
}
#screen-login .login-remember input,
#tela-visita .login-remember input{
  width:19px; height:19px;
  accent-color:#1b7fd6;
  cursor:pointer
}
#screen-login .login-forgot,
#tela-visita .login-forgot{
  font-size:.92rem; font-weight:500;
  color:#1b7fd6; text-decoration:none
}
#screen-login .login-forgot:hover,
#tela-visita .login-forgot:hover{ text-decoration:underline }
#screen-login .btn-primary,
#tela-visita .btn-primary{
  width:100%;
  border:none;
  border-radius:13px;
  padding:16px;
  font-family:inherit;
  font-size:1.05rem;
  font-weight:600;
  color:#fff;
  background:linear-gradient(94deg, #1564c4 0%, #2b8ae4 100%);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:11px;
  box-shadow:0 6px 18px rgba(21,100,196,.28);
  transition:filter .15s, transform .08s
}/* A seta do botão vale nas DUAS telas de entrada.
   Presa a #screen-login,
ela não alcançava a tela do visitante — e o
   mesmo SVG,
sem tamanho,
esticava para preencher o botão inteiro. */
#screen-login .btn-primary svg,
#tela-visita .btn-primary svg{ width:20px; height:20px }
#screen-login .btn-primary:hover,
#tela-visita .btn-primary:hover{ filter:brightness(1.07) }
#screen-login .btn-primary:active,
#tela-visita .btn-primary:active{ transform:translateY(1px) }
#screen-login .btn-primary:disabled,
#tela-visita .btn-primary:disabled{ opacity:.6; cursor:default; transform:none }

.lgn-divisor{
  display:flex;
  align-items:center;
  gap:16px;
  margin:26px 0 18px;
  color:#8a9cb0;
  font-size:.86rem
}
.lgn-divisor::before,
.lgn-divisor::after{
  content:'';
  flex:1;
  height:1px;
  background:#dfe7f0
}
#screen-login .login-footer,
#tela-visita .login-footer{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:.82rem;
  color:#8a9cb0;
  text-align:center
}
#screen-login .login-footer svg,
#tela-visita .login-footer svg{ width:16px; height:16px; flex-shrink:0 }
#screen-login :focus-visible,
#tela-visita :focus-visible{
  outline:2px solid #1b7fd6;
  outline-offset:2px
}/* Os campos de texto NÃO recebem contorno próprio.
   O campo fica dentro de uma caixa que já muda de borda ao receber
   foco — o contorno a mais desenhava um retângulo em volta só do texto,
dentro da caixa,
com cara de seleção. Era o "campo selecionado"
   estranho. A caixa inteira já diz onde está o foco. */
#screen-login .lgn-campo-in input:focus,
#tela-visita .lgn-campo-in input:focus,
#screen-login .lgn-campo-in input:focus-visible,
#tela-visita .lgn-campo-in input:focus-visible{
  outline:none;
  box-shadow:none
}/* O preenchimento automático do Chrome pinta o campo de azul-lavanda
   e ignora o fundo definido. A sombra interna é o único jeito de
   sobrepor isso sem desligar o recurso. */
#screen-login input:-webkit-autofill,
#tela-visita input:-webkit-autofill,
#screen-login input:-webkit-autofill:hover,
#tela-visita input:-webkit-autofill:hover,
#screen-login input:-webkit-autofill:focus,
#tela-visita input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 40px #fff inset;
  -webkit-text-fill-color:#0d2340;
  transition:background-color 9999s ease-out
}

/* ─── Telas estreitas ───
   A foto vira uma faixa curta no topo: em pé, ela tomaria a altura
   que o formulário precisa. */
@media(max-width:940px){#screen-login.active,
#tela-visita.active{ flex-direction:column }

  .lgn-campo{ flex:0 0 auto }
  .lgn-conteudo{ padding:24px 24px 22px; height:auto }

  .lgn-marca{ margin-bottom:18px; gap:11px }
  .lgn-marca img{ height:44px }
  .lgn-marca-nome span:first-child{ font-size:1.4rem }
  .lgn-marca-nome span:last-child{ font-size:.72rem; letter-spacing:.16em }

  .lgn-titulo{ font-size:1.42rem; margin-bottom:9px }
  .lgn-titulo br{ display:none }
  .lgn-frase{ font-size:.9rem; margin-bottom:0; max-width:none }

  .lgn-pilares, .lgn-assinatura{ display:none }

  .lgn-forma{ padding:30px 24px calc(30px + env(safe-area-inset-bottom)) }
  .lgn-onda-topo{ display:none }
  .lgn-onda-pe{ width:200px; height:170px; opacity:.7 }

  .lgn-ola{ font-size:1.05rem }
  .lgn-saudacao{ font-size:1.8rem }
  .lgn-abertura{ font-size:.94rem; margin-bottom:24px }
}

@media(max-width:400px){
  .lgn-conteudo{ padding:20px }
  .lgn-forma{ padding:26px 20px 28px }
}

/* ─── Escolha do tema, no painel Aparência ───
   Três opções lado a lado, cada uma com uma amostra da cor — ver o tema
   decide mais rápido que ler o nome dele. */
.tema-grupo{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px
}
.tema-op{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:11px 6px 10px;
  border:1.5px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--t2);
  font-family:inherit;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s, color .15s
}
.tema-op:hover{ border-color:var(--t3) }
.tema-op.ativo{
  border-color:var(--brand, #00c2e0);
  color:var(--t1);
  box-shadow:0 0 0 1px var(--brand, #00c2e0)
}
.tema-amostra{
  width:100%;
  height:30px;
  border-radius:7px;
  border:1px solid rgba(0,0,0,.1)
}
.tema-am-claro{ background:linear-gradient(135deg, #ffffff 0 55%, #eef2f7 55%) }
.tema-am-escuro{ background:linear-gradient(135deg, #111b21 0 55%, #1f2c33 55%) }
.tema-am-auto{ background:linear-gradient(135deg, #ffffff 0 50%, #111b21 50%) }

/* ─── Cores do bichinho ─── */
.look-pet-cores{ margin-top:14px }
.look-pet-titulo{
  font-size:.78rem;
  font-weight:600;
  color:var(--t2);
  margin-bottom:9px
}
.look-pet-grade{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.look-pet-cor,
.look-pet-livre{
  width:30px; height:30px;
  border-radius:50%;
  border:2px solid var(--border);
  cursor:pointer;
  padding:0;
  position:relative;
  transition:transform .12s
}
.look-pet-cor:hover,
.look-pet-livre:hover{ transform:scale(1.1) }

/* O selecionado ganha um anel na cor da marca, afastado da bola para
   não se confundir com a própria pelagem. */
.look-pet-cor.on,
.look-pet-livre.on{
  border-color:var(--surface);
  box-shadow:0 0 0 2px var(--brand, #00c2e0)
}

/* A escolha livre: o seletor nativo fica invisível por cima, e o "+"
   diz que ali cabe qualquer cor. */
.look-pet-livre{
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(#e0679a, #e08a3c, #d8c29a, #3fbf7f, #4fa8f0, #7c5cd6, #e0679a);
  overflow:hidden
}
.look-pet-livre input{
  position:absolute; inset:0;
  opacity:0; cursor:pointer;
  width:100%; height:100%
}
.look-pet-livre span{
  color:#fff;
  font-weight:700;
  font-size:1rem;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  pointer-events:none
}
.look-pet-livre.on span{ display:none }

/* ═══ A barra de status do iPhone, no aplicativo ════════════════
   No aplicativo a página desenha a tela inteira, inclusive atrás da
   barra de status e da ilha dinâmica. Esta variável vale a altura dessa
   área no app e ZERO no navegador — então nada aqui muda a versão web.

   Cada camada que ocupa a tela a partir do alto desce o seu conteúdo
   por essa altura. Os modais centralizados não precisam: o conteúdo
   deles fica no meio, longe do relógio.
═══════════════════════════════════════════════════════════════ */
:root{ --topo-app:0px }
html.app-nativo{ --topo-app:env(safe-area-inset-top, 0px) }

/* As telas inteiras: lista de conversas, troca de senha, escolha de
   empresa. O login fica de fora — ali a fotografia sobe até o topo e
   quem desce é o texto, logo abaixo. */
html.app-nativo .screen.active:not(#screen-login){
  padding-top:var(--topo-app)
}

@media(max-width:940px){
  html.app-nativo .lgn-conteudo{ padding-top:calc(24px + var(--topo-app)) }
}

/* Camadas que cobrem a tela no celular, com o cabeçalho no alto */
@media(max-width:820px){
  html.app-nativo .chat-area,
  html.app-nativo #vc-room.show,
  html.app-nativo #curso-area,
  html.app-nativo .curso-chat.show{
    padding-top:var(--topo-app)
  }
}

html.app-nativo .lig-tela{ padding-top:var(--topo-app) }
html.app-nativo .tela-final{ padding-top:calc(24px + var(--topo-app)) }

/* O que é preso ao topo por `top` desce junto */
html.app-nativo .lb-bar{ top:var(--topo-app) }
html.app-nativo .faixa-versao{ top:calc(14px + var(--topo-app)) }
html.app-nativo .aviso-interno{ top:calc(16px + var(--topo-app)) }

/* ═══ Editor de aparência ════════════════════════════════════
   O boneco fica à esquerda, sempre visível, e as escolhas rolam à
   direita — assim dá para ver o efeito de cada clique sem fechar nada.
═══════════════════════════════════════════════════════════════ */
.look-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:22px;
  align-items:start
}
.look-previa-caixa{
  position:sticky; top:0;
  background:linear-gradient(170deg, #e8dfd0 0%, #ddd2bf 100%);
  border-radius:14px;
  padding:10px 10px 12px;
  text-align:center
}
#look-previa{ width:240px; height:220px; display:block }
.look-previa-rot{
  font-size:.72rem;
  color:#6b5f4c;
  margin-top:2px
}
.look-opcoes{ max-height:60vh; overflow-y:auto; padding-right:6px }
.look-rot-min{ font-size:.7rem !important; margin-top:10px !important; opacity:.8 }

/* Paleta: as cores em linha, com "padrão" e "qualquer cor" nas pontas */
.look-pal{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-bottom:4px
}
.look-pal .look-cor{
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border); cursor:pointer; padding:0;
  transition:transform .12s
}
.look-pal .look-cor:hover{ transform:scale(1.12) }
.look-pal .look-cor.on{
  border-color:var(--surface);
  box-shadow:0 0 0 2px var(--brand, #00c2e0)
}
.look-pal-auto{
  height:24px; padding:0 10px;
  border-radius:12px;
  border:1.5px solid var(--border);
  background:var(--surface); color:var(--t2);
  font-family:inherit; font-size:.72rem; font-weight:600;
  cursor:pointer
}
.look-pal-auto.on{
  border-color:var(--brand, #00c2e0); color:var(--t1);
  box-shadow:0 0 0 1px var(--brand, #00c2e0)
}
.look-pal-livre{
  width:24px; height:24px; border-radius:50%;
  border:2px solid var(--border);
  position:relative; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(#e0679a,#e08a3c,#d8c29a,#3fbf7f,#4fa8f0,#7c5cd6,#e0679a)
}
.look-pal-livre.on{
  border-color:var(--surface);
  box-shadow:0 0 0 2px var(--brand, #00c2e0)
}
.look-pal-livre input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer
}
.look-pal-livre span{
  color:#fff; font-weight:700; font-size:.85rem;
  text-shadow:0 1px 2px rgba(0,0,0,.45); pointer-events:none
}
.look-pal-livre.on span{ display:none }

@media(max-width:820px){
  .look-layout{ grid-template-columns:1fr; gap:14px }
  .look-previa-caixa{ position:static }
  #look-previa{ width:200px; height:184px; margin:0 auto }
  .look-opcoes{ max-height:none }
}

/* ═══ Cartão de chamada ══════════════════════════════════════
   Aparece sobre o mapa quando alguém chama. A ação principal ocupa a
   largura toda: quem foi chamado quase sempre quer ir até lá.
═══════════════════════════════════════════════════════════════ */
.chamada-card{
  position:fixed;
  left:50%; top:26px;
  transform:translate(-50%, -14px);
  z-index:5200;
  width:min(92vw, 420px);
  background:var(--surface);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow:0 18px 48px rgba(4,12,26,.34);
  opacity:0;
  transition:opacity .2s, transform .2s cubic-bezier(.3,.9,.4,1)
}
.chamada-card.show{ opacity:1; transform:translate(-50%, 0) }
.chamada-card.urgente{ box-shadow:0 0 0 2px #ef4444, 0 18px 48px rgba(4,12,26,.34) }

.chamada-topo{ display:flex; align-items:center; gap:13px }

.chamada-av{ position:relative; width:52px; height:52px; flex-shrink:0 }
.chamada-av img,
.chamada-av .av-ini{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  display:flex; align-items:center; justify-content:center
}
/* O ponto verde diz que a pessoa está lá agora — é o que decide se vale
   levantar e ir. */
.chamada-av.online::after{
  content:''; position:absolute; right:0; bottom:1px;
  width:14px; height:14px; border-radius:50%;
  background:#25d366; border:2.5px solid var(--surface)
}

.chamada-txt{ flex:1; min-width:0 }
.chamada-txt b{
  display:block; font-size:1.02rem; font-weight:700; color:var(--t1);
  line-height:1.25; letter-spacing:-.01em
}
.chamada-txt span{ font-size:.85rem; color:var(--t3) }

.chamada-x{
  width:32px; height:32px; flex-shrink:0;
  border:none; border-radius:50%;
  background:var(--bg); color:var(--t2);
  font-size:.9rem; cursor:pointer
}
.chamada-x:hover{ background:var(--border) }

.chamada-ir{
  width:100%;
  margin-top:13px;
  border:none; border-radius:13px;
  padding:14px;
  font-family:inherit; font-size:1rem; font-weight:700;
  color:#fff;
  background:linear-gradient(94deg, #1564c4 0%, #2b8ae4 100%);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  transition:filter .15s
}
.chamada-ir:hover{ filter:brightness(1.07) }
.chamada-ir .msr{ font-size:20px }

@media(max-width:820px){
  .chamada-card{ top:calc(12px + env(safe-area-inset-top, 0px)) }
}
@media(prefers-reduced-motion:reduce){
  .chamada-card{ transition:opacity .2s }
}

/* As quatro direções, em miniatura, embaixo do boneco grande */
#look-giro{
  width:184px; height:56px;
  display:block; margin:2px auto 0
}

/* ═══ A barra do canal dentro da tela cheia ══════════════════
   Flutua sobre o vídeo, no rodapé. Fundo escuro translúcido porque o
   que está por trás é imprevisível — uma tela branca de planilha ou
   um slide escuro.
═══════════════════════════════════════════════════════════════ */
.vc-bar.na-tela-cheia{
  position:absolute;
  left:50%; bottom:22px;
  transform:translateX(-50%);
  z-index:40;
  width:auto; max-width:min(94vw, 760px);
  padding:8px 12px;
  border-radius:16px;
  background:rgba(14,22,32,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(0,0,0,.42);
  flex-wrap:wrap;
  justify-content:center;
  /* some com os outros controles da mídia, ao parar de mexer o mouse */
  transition:opacity .25s
}
.vc-media-host:hover .vc-bar.na-tela-cheia{ opacity:1 }

.vc-bar.na-tela-cheia .vc-room-btn{
  color:#e8eef5;
  background:rgba(255,255,255,.09)
}
.vc-bar.na-tela-cheia .vc-room-btn:hover{ background:rgba(255,255,255,.18) }

/* No celular a barra encosta no rodapé e respeita o indicador de início */
@media(max-width:820px){
  .vc-bar.na-tela-cheia{
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    max-width:96vw; padding:6px 8px; gap:4px
  }
}

/* ═══ Cartão da reunião do dia, no painel ════════════════════
   Mostra o que está valendo e os dois caminhos: editar e excluir. A
   hora fica grande à esquerda porque é o que se procura primeiro.
═══════════════════════════════════════════════════════════════ */
.adm-item.adm-item-col{ display:block }

.adm-cartao{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:11px;
  padding:11px 12px;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--border)
}
.adm-cartao-hora{
  font-size:1.18rem;
  font-weight:700;
  color:var(--t1);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  flex-shrink:0
}
.adm-cartao-txt{ flex:1; min-width:0; line-height:1.35 }
.adm-cartao-txt b{
  display:block; font-size:.9rem; color:var(--t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}
.adm-cartao-txt span{ font-size:.78rem; color:var(--t3) }

.adm-cartao-acoes{ display:flex; gap:6px; flex-shrink:0 }
.adm-cartao-acoes button{
  width:34px; height:34px;
  border:none; border-radius:9px;
  background:var(--surface); color:var(--t2);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center
}
.adm-cartao-acoes button:hover{ background:var(--border); color:var(--t1) }
.adm-cartao-acoes button.perigo:hover{ background:#fdecee; color:#c0304a }
.adm-cartao-acoes .msr{ font-size:19px }

html.dark .adm-cartao-acoes button.perigo:hover{ background:#3a1f26; color:#f0a3b0 }

/* ═══ Cartão da reunião do dia ═══════════════════════════════
   Reaproveita o cartão da chamada de atenção. A diferença: no lugar da
   foto vai a hora, porque não há uma pessoa chamando — e não há ação
   nenhuma para oferecer.
═══════════════════════════════════════════════════════════════ */
.chamada-card.reuniao{ border-left:4px solid var(--brand, #00c2e0) }

.reuniao-hora{
  width:58px; height:52px;
  flex-shrink:0;
  border-radius:13px;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:1.02rem; font-weight:700; color:var(--t1);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums
}

/* ═══ Escritório em tela cheia ═══════════════════════════════
   Entre o topo do canal, a barra de botões e a moldura, quase um terço
   da altura ia embora antes do primeiro pixel de escritório.
═══════════════════════════════════════════════════════════════ */
/* !important porque o elemento tem display:flex escrito no próprio
   atributo style, e estilo inline vence a folha. */
.vc-room.sem-topo #vc-room-top{ display:none !important }

/* A barra de botões flutua sobre o mapa e só aparece quando o mouse
   encosta no alto — como a de baixo já fazia. */
#office-wrap{ position:relative }

.of-revela{
  position:absolute;
  top:0; left:0; right:0; height:54px;
  z-index:11
}

.of-bar{
  position:absolute;
  top:8px; left:8px; right:8px;
  z-index:12;
  border-radius:14px;
  padding:6px 8px;
  background:rgba(14,22,32,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 28px rgba(0,0,0,.34);
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .18s, transform .18s
}
.of-revela:hover + .of-bar,
.of-bar:hover,
.of-bar:focus-within{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto
}
.of-bar .of-btn{ color:#e8eef5; background:rgba(255,255,255,.08) }
.of-bar .of-btn:hover{ background:rgba(255,255,255,.18) }

/* No toque não há "encostar o mouse": a barra fica sempre visível. */
@media(hover:none){
  .of-bar{ opacity:1; transform:none; pointer-events:auto }
  .of-revela{ display:none }
}

/* ═══ Editor de aparência em abas ════════════════════════════
   Cinco grupos, um de cada vez. A rolagem única obrigava a passar por
   tudo para chegar em qualquer coisa.
═══════════════════════════════════════════════════════════════ */
.look-abas{
  display:flex;
  gap:4px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  overflow-x:auto
}
.look-aba{
  flex:1;
  min-width:72px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 6px;
  border:none; border-radius:11px;
  background:none; color:var(--t3);
  font-family:inherit; font-size:.72rem; font-weight:600;
  cursor:pointer;
  transition:background .15s, color .15s
}
.look-aba:hover{ background:var(--bg); color:var(--t2) }
.look-aba.on{ background:var(--bg); color:var(--brand, #00c2e0) }
.look-aba .msr{ font-size:21px }

.look-painel{ min-height:220px }

/* Grade de opções: o rótulo inteiro visível, sem cortar palavra */
.look-grade{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
  gap:7px;
  margin-bottom:4px
}
.look-opcao{
  padding:10px 8px;
  border:1.5px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  color:var(--t2);
  font-family:inherit; font-size:.78rem; font-weight:600;
  cursor:pointer;
  text-align:center;
  line-height:1.25;
  transition:border-color .15s, color .15s
}
.look-opcao:hover{ border-color:var(--t3) }
.look-opcao.on{
  border-color:var(--brand, #00c2e0);
  color:var(--t1);
  box-shadow:0 0 0 1px var(--brand, #00c2e0)
}

.look-nota{
  font-size:.8rem;
  color:var(--t3);
  line-height:1.5;
  margin-top:12px
}

@media(max-width:820px){
  .look-aba{ min-width:64px; font-size:.68rem }
  .look-grade{ grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)) }
}

/* ═══ O mapa toma a tela ═════════════════════════════════════
   O escritório era centralizado com espaçamento, e o canvas tinha
   cantos arredondados e sombra — o conjunto deixava uma moldura preta
   em volta, maior quanto mais largo o monitor.

   Aqui ele encosta nas quatro bordas. A sombra e o arredondamento
   saem: não há o que emoldurar quando a coisa ocupa tudo.
═══════════════════════════════════════════════════════════════ */
#office-wrap{
  gap:0;
  align-items:stretch;
  flex:1;
  min-height:0
}
#office-wrap .of-palco{
  flex:1;
  min-height:0;
  width:100% !important;
  height:100% !important
}
/* O canvas NÃO é esticado por CSS.
   O tamanho dele é definido em pixels pelo ofResize, que mede o palco.
   Forçar 100% aqui fazia o elemento seguir o palco enquanto o desenho
   seguia a medida — e quando as duas discordavam, por um instante que
   fosse, o mapa aparecia esmagado. */
#office-wrap #office-canvas{
  border-radius:0;
  box-shadow:none;
  display:block;
  margin:0 auto
}
#office-wrap.com-tela #office-canvas{ max-height:none }

/* ═══ Controle de zoom ═══════════════════════════════════════
   Canto inferior direito, sobre o mapa. Fica sempre visível: ao
   contrário da barra de cima, este é usado o tempo todo.
═══════════════════════════════════════════════════════════════ */
.of-zoom{
  position:absolute;
  right:14px;
  /* Acima da barra de baixo: com 14px o último botão ficava embaixo dela
     e não recebia clique. */
  bottom:96px;
  z-index:12;
  display:flex; flex-direction:column; gap:1px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(14,22,32,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.34)
}
.of-zoom button{
  width:38px; height:38px;
  border:none; background:none; color:#e8eef5;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center
}
.of-zoom button:hover{ background:rgba(255,255,255,.14) }
.of-zoom .msr{ font-size:20px }

@media(max-width:820px){
  .of-zoom{ right:10px; bottom:calc(104px + env(safe-area-inset-bottom, 0px)) }
  .of-zoom button{ width:34px; height:34px }
}

/* ═══ Editor de áreas do mapa ════════════════════════════════
   Painel lateral, sobre o mapa. Só aparece para quem abriu o editor.
═══════════════════════════════════════════════════════════════ */
.maped{
  position:fixed;
  right:16px; top:16px;
  z-index:5000;
  width:252px;
  border-radius:14px;
  background:rgba(14,22,32,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  color:#e8eef5;
  font-size:.85rem;
  overflow:hidden
}
.maped-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 13px;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.1)
}
.maped-top button{
  border:none; background:none; color:#9fb0c0; cursor:pointer; font-size:.9rem
}
.maped-tipos{ display:flex; gap:5px; padding:11px 11px 8px }
.maped-tipos button{
  flex:1; padding:8px 4px;
  border:1.5px solid rgba(255,255,255,.14); border-radius:9px;
  background:none; color:#b9c7d4;
  font-family:inherit; font-size:.76rem; font-weight:600; cursor:pointer
}
.maped-tipos button.on{ border-color:#00c2e0; color:#fff }
.maped-tipos b{ display:block; font-size:.9rem; margin-top:2px }

.maped-lista{ max-height:34vh; overflow-y:auto; padding:0 11px }
.maped-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 9px; margin-bottom:4px;
  border-radius:8px; background:rgba(255,255,255,.06)
}
.maped-item span{ font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.maped-item button{ border:none; background:none; color:#e0879a; cursor:pointer }
.maped-vazio{ font-size:.78rem; color:#8fa0b0; padding:4px 2px 10px }

.maped-pe{ display:flex; gap:7px; padding:11px }
.maped-pe button{
  flex:1; padding:9px; border:none; border-radius:9px;
  font-family:inherit; font-weight:700; font-size:.82rem; cursor:pointer
}
.maped-sec{ background:rgba(255,255,255,.1); color:#cfdae4 }
.maped-prim{ background:#00c2e0; color:#0d1f3c }

/* O painel do editor é arrastável e recolhível */
.maped-top{ cursor:grab; user-select:none; gap:6px }
.maped-top:active{ cursor:grabbing }
.maped-pega{ color:#6b7d8d; font-size:.9rem; letter-spacing:-2px }
.maped.recolhido .maped-tipos,
.maped.recolhido .maped-lista,
.maped.recolhido .maped-pe{ display:none }
.maped.recolhido{ width:auto }

/* Campo de texto e par de botões no painel do administrador */
.adm-campo{
  width:100%;
  margin-top:10px;
  padding:9px 12px;
  border:none; border-radius:9px;
  background:var(--bg); color:var(--t1);
  font-family:inherit; font-size:.85rem;
  outline:none
}
.adm-linha-btn{ display:flex; gap:7px; margin-top:8px }
.adm-linha-btn .adm-sel{ flex:1; text-align:center }

/* Área de texto no painel, para as frases da recepcionista */
textarea.adm-campo{
  resize:vertical;
  min-height:70px;
  line-height:1.5;
  font-family:inherit
}

/* Prévia do logotipo no painel — fundo xadrez para conferir transparência */
.adm-logo-previa{
  margin-top:10px; padding:12px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background-color:var(--bg);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%),
    linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%);
  background-size:16px 16px;
  background-position:0 0, 8px 8px
}
.adm-logo-previa img{ max-height:64px; max-width:100%; object-fit:contain }

/* Os tipos do editor em grade, e não em fila.
   Com dez tipos, a fila horizontal saía da largura do painel e os
   últimos ficavam inalcançáveis. */
.maped{ width:290px }
.maped-tipos{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:5px
}
.maped-tipos button{ padding:7px 3px; font-size:.72rem }
.maped-tipos b{ font-size:.85rem }
.maped-lista{ max-height:30vh }
.maped-pe{ flex-wrap:wrap }
.maped-pe button{ min-width:84px }

/* Espessura, borracha, desfazer e baixar no quadro */
.qd-esps{ display:flex; gap:4px; margin-left:8px }
.qd-esp{
  width:26px; height:26px; border-radius:8px;
  border:1.5px solid var(--border); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center
}
.qd-esp.on{ border-color:var(--brand, #00c2e0) }
.qd-esp i{ background:var(--t1); border-radius:50%; display:block }

.qd-acao{
  width:30px; height:30px; margin-left:4px;
  border:1.5px solid var(--border); border-radius:8px;
  background:none; color:var(--t2); cursor:pointer;
  display:flex; align-items:center; justify-content:center
}
.qd-acao:hover{ background:var(--bg) }
.qd-acao.on{ border-color:var(--brand, #00c2e0); color:var(--t1) }
.qd-acao .msr{ font-size:17px }

/* ═══ Enquete da sala ════════════════════════════════════════ */
.enq-pergunta{
  font-size:1rem; font-weight:700; color:var(--t1);
  line-height:1.4; margin-bottom:14px
}
.enq-ops{ display:flex; flex-direction:column; gap:7px }
.enq-op{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:8px;
  padding:11px 13px;
  border:1.5px solid var(--border); border-radius:11px;
  background:var(--surface);
  font-family:inherit; font-size:.9rem; color:var(--t1);
  cursor:pointer; text-align:left
}
.enq-op:hover:not(:disabled){ border-color:var(--t3) }
.enq-op.minha{ border-color:var(--brand, #00c2e0) }
.enq-op:disabled{ cursor:default }

/* A barra fica ATRÁS do texto, e não ao lado: assim a opção continua
   legível por inteiro enquanto a proporção cresce. */
.enq-barra{
  position:absolute; left:0; top:0; bottom:0;
  background:rgba(139,92,246,.16);
  transition:width .35s ease
}
.enq-txt{ position:relative; flex:1 }
.enq-num{
  position:relative; font-size:.8rem; font-weight:700; color:var(--t2)
}

.enq-nota{ font-size:.78rem; color:var(--t3); margin-top:12px }
.enq-acoes{ display:flex; gap:7px; margin-top:14px }
.enq-prim, .enq-sec{
  flex:1; padding:10px; border:none; border-radius:50px;
  font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer
}
.enq-prim{ background:var(--brand, #00c2e0); color:#0d1f3c; margin-top:14px }
.enq-acoes .enq-prim{ margin-top:0 }
.enq-sec{ background:var(--bg); color:var(--t2) }

/* Formulário da enquete */
.enq-rot{
  display:block; font-size:.78rem; font-weight:600;
  color:var(--t2); margin:12px 0 5px
}
.enq-rot:first-child{ margin-top:0 }
.enq-campo{
  width:100%; padding:10px 12px;
  border:none; border-radius:10px; outline:none;
  background:var(--bg); color:var(--t1);
  font-family:inherit; font-size:.9rem; line-height:1.5
}
textarea.enq-campo{ resize:vertical; min-height:88px }

/* ═══ Painel do administrador em cartões ═════════════════════
   Cada assunto num quadro com título, em vez de uma lista corrida de
   controles separados por traços — o que obrigava a ler tudo para
   achar um.
═══════════════════════════════════════════════════════════════ */
.adm-cartao{
  /* display:block explícito: o painel é um contêiner flex, e sem isto o
     título do cartão e os itens ficavam lado a lado em vez de
     empilhados. */
  display:block;
  width:100%;
  margin:10px 0 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  overflow:hidden
}
.adm-cartao-top{
  display:flex; align-items:center; gap:8px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  font-size:.8rem; font-weight:700;
  letter-spacing:.3px; text-transform:uppercase;
  color:var(--t2)
}
.adm-cartao-top .msr{ font-size:18px; color:var(--t3) }

/* Dentro do cartão os itens perdem a borda externa: o cartão já separa */
.adm-cartao .adm-item{ border-bottom:1px solid var(--border) }
.adm-cartao .adm-item:last-child{ border-bottom:none }
.adm-cartao .adm-item{ padding:13px 14px; display:block; width:100% }
.adm-cartao-top{ width:100% }

/* ═══ Roda de conversa ═══════════════════════════════════════ */
.chamada-card.roda{
  display:flex; align-items:center; gap:10px;
  background:rgba(109,40,217,.95); color:#fff
}
.chamada-card.roda .rd-txt{ font-size:.88rem }

.roda-bar{
  position:fixed; z-index:4400;
  left:50%; transform:translateX(-50%);
  bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  border-radius:50px;
  background:rgba(109,40,217,.95); color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  font-size:.85rem
}
.roda-bar .msr{ font-size:19px }
.rd-nomes{ max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.roda-bar button{
  border:none; border-radius:50px;
  padding:5px 13px;
  background:rgba(255,255,255,.22); color:#fff;
  font-family:inherit; font-size:.78rem; font-weight:700; cursor:pointer
}
.roda-bar button:hover{ background:rgba(255,255,255,.34) }

/* ═══ A carta entregue em mãos ═══════════════════════════════
   Papel no meio da tela. Sem sombra pesada nem cantos arredondados
   demais: é uma folha, não um cartão de sistema.
═══════════════════════════════════════════════════════════════ */
.carta-modal{
  position:fixed; inset:0; z-index:5400;
  display:none; align-items:center; justify-content:center;
  background:rgba(6,12,22,.5)
}
.carta-modal.show{ display:flex }

.carta-papel{
  position:relative;
  width:min(90vw, 420px);
  padding:30px 28px 22px;
  background:#fffdf7;
  border-radius:4px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  /* a dobra do papel, de leve */
  background-image:linear-gradient(180deg, rgba(0,0,0,.035) 0 1px, transparent 1px);
  background-position:0 52%;
  background-size:100% 100%;
  background-repeat:no-repeat
}

.carta-selo{
  position:absolute; top:-11px; left:24px;
  padding:4px 12px; border-radius:3px;
  font-size:.66rem; font-weight:800; letter-spacing:1.2px;
  color:#fff; background:#7c8794
}
.carta-selo.urgente{ background:#c0304a }
.carta-selo.importante{ background:#d97706 }
.carta-selo.carta{ background:#6d28d9 }

.carta-de{ font-size:.82rem; color:#6b7280; margin-bottom:12px }
.carta-de b{ color:#1f2937 }

.carta-texto{
  font-size:1rem; line-height:1.62; color:#1f2937;
  white-space:pre-wrap; word-break:break-word;
  min-height:60px; margin:0 0 20px
}

.carta-acoes{ display:flex; gap:9px; justify-content:flex-end }
.carta-prim, .carta-sec{
  padding:9px 18px; border:none; border-radius:50px;
  font-family:inherit; font-size:.85rem; font-weight:700; cursor:pointer
}
.carta-prim{ background:#6d28d9; color:#fff }
.carta-sec{ background:#eceff3; color:#4b5563 }

/* O item em foco na lista do editor */
.maped-item{ cursor:pointer }
.maped-item em{
  font-style:normal; font-size:.68rem; color:var(--t3);
  margin-left:auto; margin-right:8px; white-space:nowrap
}
.maped-item.foco{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)
}
.maped-item.foco span{ font-weight:700 }

/* ═══ Entrada do visitante ═════════════════════════════════
   A tela usa as classes do login do colaborador (lgn-*). Só o que é
   exclusivo dela fica aqui. */
.visita-aviso{ min-height:20px; font-size:.82rem; color:#e24c6b; margin:2px 0 12px }
.visita-rodape{ font-size:.75rem; color:var(--t3); margin-top:18px; line-height:1.5;
  text-align:center }


/* O item em foco na lista do editor */
.maped-item{ cursor:pointer }
.maped-item em{
  font-style:normal; font-size:.68rem; color:var(--t3);
  margin-left:auto; margin-right:8px; white-space:nowrap
}
.maped-item.foco{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)
}
.maped-item.foco span{ font-weight:700 }

/* ═══ Entrada do visitante ═══════════════════════════════════ */
.visita-tela{
  position:fixed; inset:0; z-index:6000;
  display:none; align-items:center; justify-content:center;
  background:var(--bg); padding:20px
}
.visita-tela.show{ display:flex }
.visita-caixa{
  width:min(92vw, 380px); text-align:center;
  background:var(--surface); border-radius:18px;
  padding:34px 28px 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.3)
}
.visita-logo{ max-width:130px; margin-bottom:18px }
.visita-caixa h2{ font-size:1.25rem; color:var(--t1); margin-bottom:6px }
.visita-sub{ font-size:.86rem; color:var(--t3); margin-bottom:20px }
.visita-caixa .enq-campo{ margin-bottom:10px; text-align:left }
.visita-aviso{ min-height:20px; font-size:.82rem; color:#e24c6b; margin:4px 0 10px }
.visita-rodape{ font-size:.75rem; color:var(--t3); margin-top:16px; line-height:1.5 }


/* Em modo visita, a tela de carregamento do aplicativo não aparece:
   quem chega por convite não está esperando o sistema carregar, está
   esperando um campo de senha. */
/* ═══ Modo visita ════════════════════════════════════════════
   Em modo visita existe UMA tela, e é a do visitante.

   Eu revelava a tela nova e deixava as outras seguirem o seu curso —
   e o login do colaborador, que é revelado pelo fluxo normal do
   aplicativo um instante depois, aparecia empilhado por baixo. Duas
   telas de entrada na mesma página, as duas funcionando.

   A regra é do documento inteiro, e por isso vence qualquer coisa que
   o código faça depois. */
html.modo-visita #loading{ display:none !important }

/* O canvas do escritório não é texto.
   Sem isto, o duplo clique tenta selecionar conteúdo e o navegador
   responde com o seu próprio gesto — inclusive o zoom da página. */
#office-canvas{
  user-select:none; -webkit-user-select:none;
  touch-action:none;
  -webkit-touch-callout:none
}

/* ═══ Cronômetro da sala ═════════════════════════════════════ */
.crono-barra{
  position:fixed; z-index:4500;
  left:50%; transform:translateX(-50%);
  top:calc(14px + env(safe-area-inset-top, 0px));
  display:flex; align-items:center; gap:10px;
  padding:8px 10px 8px 14px;
  border-radius:50px;
  background:rgba(14,22,32,.92); color:#fff;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  font-size:.9rem
}
.crono-barra b{
  font-variant-numeric:tabular-nums;   /* os dígitos não dançam */
  font-size:1.05rem; letter-spacing:.5px
}
.crono-barra .msr{ font-size:19px; color:#00c2e0 }
.crono-quem{ font-size:.75rem; color:rgba(255,255,255,.6) }
.crono-barra button{
  border:none; border-radius:50%; width:24px; height:24px;
  background:rgba(255,255,255,.16); color:#fff;
  cursor:pointer; font-size:.8rem; line-height:1
}
.crono-barra.acabou{
  background:rgba(192,48,74,.95);
  animation:cronoPisca 1s ease-in-out infinite
}
.crono-barra.acabou .msr{ color:#fff }
@keyframes cronoPisca{ 50%{ box-shadow:0 0 0 6px rgba(192,48,74,.28) } }

.crono-botoes{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px }
.crono-op{
  flex:1 0 28%; padding:11px 6px;
  border:1.5px solid var(--border); border-radius:11px;
  background:var(--surface); color:var(--t1);
  font-family:inherit; font-size:.88rem; font-weight:600; cursor:pointer
}
.crono-op:hover{ border-color:var(--brand); color:var(--brand) }

/* ═══ Modo visita — a última palavra ═════════════════════════
   Estas duas linhas ficam no FIM do arquivo de propósito.

   Existe uma regra `#screen-login.active{display:flex !important}`, e
   entre duas declarações com !important e mesma especificidade vence a
   ÚLTIMA. A regra do modo visita estava antes e perdia — as duas telas
   de entrada apareciam empilhadas.

   Ordem é parte da especificidade, e aqui ela é a diferença entre
   funcionar e não funcionar. */
/* A regra vale enquanto o visitante NÃO entrou.
 *
 * Escondendo toda tela que não seja a de visita, eu escondia também a
 * do aplicativo — o visitante autenticava, via a saudação e continuava
 * na mesma tela, porque o destino estava proibido de aparecer.
 *
 * Ao entrar, o corpo ganha .visitante e a regra se desliga. */
/* `html.modo-visita body:not(.visitante)` NÃO funciona: entre os dois
   seletores há um espaço, que pede descendente — e o body é filho
   direto do html, então a regra nunca casa.
   
   Com > o parentesco fica certo. */
html.modo-visita > body:not(.visitante) .screen:not(#tela-visita){ display:none !important }
html.modo-visita > body:not(.visitante) #tela-visita{ display:flex !important }

/* ═══ O que o visitante vê ═══════════════════════════════════
   As regras do servidor já barram a LEITURA do conteúdo. Isto aqui é
   outra coisa: tirar da frente o que ele não pode usar.

   Deixar os botões visíveis e negar por baixo dá o pior dos dois
   mundos — a pessoa tenta, não consegue, e conclui que o sistema está
   quebrado. Pior ainda com o campo de mensagem aberto: ela escreve,
   envia, e a mensagem some sem explicação.

   Fica só o que faz sentido numa visita: canais de voz, configurações
   e o próprio perfil. */
body.visitante .nav-item[data-view="conversas"],
body.visitante .nav-item[data-view="textos"],
body.visitante .nav-item[data-view="mencoes"],
body.visitante .nav-item[data-view="cursos"],
body.visitante .nav-item[data-view="notas"],
body.visitante .nav-item[data-view="marcadas"],
body.visitante .nav-item[data-view="clients"],
body.visitante .nav-item[data-view="chamadas"],
body.visitante .nav-item.nav-admin,
body.visitante .adm-abrir,
body.visitante #nav-admin{ display:none !important }

/* O campo de escrever some junto: uma caixa que aceita o que se digita
   e descarta é pior do que caixa nenhuma. */
body.visitante .composer{ display:none !important }

/* ═══ Painel de administração em cartões ═════════════════════
   Quatro cartões no lugar de uma lista corrida. Cada um abre o seu
   assunto numa janela com espaço para respirar. */
.adm-cartoes{
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; padding:4px 20px 20px
}
.adm-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:16px 14px;
  border:1.5px solid var(--border); border-radius:14px;
  background:var(--surface); color:var(--t1);
  font-family:inherit; text-align:left; cursor:pointer;
  transition:border-color .15s, transform .12s
}
.adm-card:hover{ border-color:var(--brand); transform:translateY(-1px) }
.adm-card .msr{ font-size:24px; color:var(--brand); margin-bottom:6px }
.adm-card b{ font-size:.92rem; line-height:1.25 }
.adm-card-sub{ font-size:.73rem; color:var(--t3); line-height:1.35 }

/* A janela da seção: larga, porque é onde o trabalho acontece. */
.adm-sec-box{
  max-width:min(94vw, 720px);
  max-height:88vh; display:flex; flex-direction:column
}
.adm-sec-corpo{
  overflow-y:auto; padding:0 0 10px;
  /* O conteúdo veio da coluna estreita e traz margens próprias. */
  --adm-pad:22px
}
.adm-sec-corpo .adm-item,
.adm-sec-corpo .adm-canal,
.adm-sec-corpo .adm-acoes,
.adm-sec-corpo .adm-aviso,
.adm-sec-corpo .adm-vazio{ padding-left:var(--adm-pad); padding-right:var(--adm-pad) }
.adm-sec-corpo .adm-cartao{ margin:14px var(--adm-pad) }
.adm-sec-corpo .adm-sec{ padding:16px var(--adm-pad) 6px }

@media (max-width:680px){
  .adm-cartoes{ grid-template-columns:1fr }
  .adm-sec-box{ max-width:96vw }
}

/* ═══ Cronômetros pessoais ═══════════════════════════════════
   Empilhados no canto, abaixo do cronômetro da sala — que fica no
   alto e é de todos. A separação no espaço reflete a separação de
   propósito. */
.cronos-meus{
  position:fixed; z-index:4400;
  right:14px; top:calc(74px + env(safe-area-inset-top, 0px));
  display:flex; flex-direction:column; gap:7px;
  pointer-events:none
}
.crono-meu{
  display:flex; align-items:center; gap:9px;
  padding:7px 9px 7px 13px; border-radius:50px;
  background:rgba(14,22,32,.9); color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
  pointer-events:auto
}
.crono-meu b{
  font-variant-numeric:tabular-nums;   /* os dígitos não dançam */
  font-size:1rem; letter-spacing:.5px
}
.crono-meu span{ font-size:.74rem; color:rgba(255,255,255,.62); max-width:130px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.crono-meu button{
  border:none; border-radius:50%; width:20px; height:20px;
  background:rgba(255,255,255,.14); color:#fff;
  cursor:pointer; font-size:.68rem; line-height:1
}

/* Os dez segundos finais: vermelho e pulsando. */
.crono-meu.contagem{ background:rgba(192,48,74,.92) }
.crono-meu.contagem b{ animation:cronoBate 1s steps(1) infinite }
@keyframes cronoBate{ 50%{ opacity:.45 } }

.crono-meu.fim{
  background:rgba(192,48,74,.96);
  animation:cronoPisca 1.1s ease-in-out infinite
}

/* As abas do modal */
.crono-abas{ display:flex; gap:6px; margin-bottom:14px }
.crono-aba{
  flex:1; padding:9px; border:none; border-radius:9px;
  background:var(--bg); color:var(--t3);
  font-family:inherit; font-size:.85rem; font-weight:600; cursor:pointer
}
.crono-aba.on{ background:var(--brand); color:#fff }

/* ═══ A dica do duplo clique ═════════════════════════════════
   Um balão escuro com a seta apontando para baixo, no ponto clicado. */
.of-dica{
  position:fixed; z-index:5200;
  transform:translate(-50%, -100%);
  padding:9px 15px; border-radius:11px;
  background:rgba(24,30,38,.94); color:#fff;
  font-size:.85rem; white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  pointer-events:none;                 /* não rouba o clique seguinte */
  opacity:0; transition:opacity .18s
}
.of-dica.show{ opacity:1 }
.of-dica::after{
  content:''; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:rgba(24,30,38,.94)
}

/* A legenda da imagem, sob ela e dentro da mesma bolha. */
.m-legenda{
  margin-top:6px; font-size:.88rem; line-height:1.45;
  white-space:pre-wrap; word-break:break-word
}