/* ============================================================================= Meeddy (med) — tema visual Portado do hub-theme.css do Ínsula Hub, que é a origem deste visual; aqui é CÓPIA INDEPENDENTE, com tudo no namespace do med (--med-*, .med-*, med-theme). Não editar esperando que o hub acompanhe, nem o contrário. Ver .specs/med/done/03-med-visual-padrao-hub.md. Carregado por último no header_med.html, então sobrescreve o tema base (Cuba) e o custom_med.css. Linguagem visual: superfícies quentes, tipografia sóbria, um único tom de destaque (o teal da marca) e muito espaço em branco. Suporta claro e escuro via [data-bs-theme] no . ========================================================================== */ /* ----------------------------------------------------------------- tokens */ :root, [data-bs-theme="light"] { --med-bg: #faf9f5; --med-surface: #ffffff; --med-surface-2: #f5f4ee; --med-sidebar: #f0eee6; --med-text: #1f1e1d; --med-text-soft: #55534d; --med-muted: #7c7a73; --med-border: #e6e3da; --med-border-soft: #efece3; /* Destaque: o teal da marca (#2AABC0) ESCURECIDO para o tema claro — puro ele dá 2,59:1 sobre o creme, o que reprova até em botão preenchido. No escuro a cor de marca entra como é (5,55:1 sobre #262624). */ --med-accent: #178396; --med-accent-hover: #136B7C; --med-accent-soft: rgba(23, 131, 150, 0.12); --med-accent-contrast: #ffffff; --med-bubble-user: #f0eee6; --med-bubble-user-text: #1f1e1d; --med-shadow: 0 1px 2px rgba(31, 30, 29, .05), 0 4px 16px rgba(31, 30, 29, .04); --med-shadow-lg: 0 8px 32px rgba(31, 30, 29, .10); --med-radius: 12px; --med-radius-lg: 16px; --med-radius-pill: 999px; } [data-bs-theme="dark"] { --med-bg: #262624; --med-surface: #30302e; /* Estava #35353200 — alpha 00, ou seja, TRANSPARENTE. Tudo que usa esta superfície como fundo no escuro (chips, campos desabilitados, hovers) simplesmente não aparecia. */ --med-surface-2: #353532; --med-sidebar: #1f1e1d; --med-text: #f5f4ef; --med-text-soft: #d6d3ca; --med-muted: #a19f96; --med-border: #3e3d39; --med-border-soft: #34332f; --med-accent: #2AABC0; --med-accent-hover: #3FBFD4; /* O destaque suave é usado em hover de menu, chips e realces; no escuro ele precisa aparecer — 18% é o mínimo que se enxerga sobre #262624. */ --med-accent-soft: rgba(42, 171, 192, 0.18); --med-accent-contrast: #1f1e1d; --med-bubble-user: #3a3936; --med-bubble-user-text: #f5f4ef; --med-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .22); --med-shadow-lg: 0 8px 32px rgba(0, 0, 0, .38); } /* Alinha os tokens do Bootstrap e do chat base (ia-chat.css) aos do tema, para que os componentes herdados sigam a paleta sem precisar de override caso a caso */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--med-bg); --bs-body-color: var(--med-text); --bs-secondary-bg: var(--med-surface-2); --bs-tertiary-bg: var(--med-sidebar); --bs-border-color: var(--med-border); --bs-primary: var(--med-accent); --bs-link-color: var(--med-accent); --bs-link-hover-color: var(--med-accent-hover); --bs-emphasis-color: var(--med-text); --bs-secondary-color: var(--med-muted); --ia-chat-bg-body: var(--med-bg); --ia-chat-bg-main: var(--med-bg); --ia-chat-bg-sidebar: var(--med-sidebar); --ia-chat-bg-message-user: var(--med-bubble-user); --ia-chat-bg-message-assistant: transparent; --ia-chat-color-text: var(--med-text); --ia-chat-color-text-secondary: var(--med-muted); --ia-chat-color-border: var(--med-border); --ia-chat-input-bg: var(--med-surface); --ia-chat-input-border: var(--med-border); --ia-chat-input-focus: var(--med-accent); --ia-chat-scrollbar-thumb: var(--med-border); --ia-chat-scrollbar-track: transparent; --ia-chat-header-bg: var(--med-bg); --ia-chat-shadow: var(--med-shadow); } /* ------------------------------------------------------------ tipografia */ body, .page-wrapper, .btn, .form-control, .form-select, input, textarea, select { font-family: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; } body { background: var(--med-bg); color: var(--med-text); font-size: .9375rem; line-height: 1.6; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--med-text); font-weight: 600; letter-spacing: -.018em; } small, .small { font-size: .8125rem; } .text-muted { color: var(--med-muted) !important; } hr { border-color: var(--med-border); opacity: 1; } /* ------------------------------------------------------------- estrutura */ .app-container { background: var(--med-bg); } /* A .main-area é o ÚNICO filho em fluxo do .app-container (flex) — a .sidebar é position:fixed. Com flex:1 e o min-width:auto padrão do flex, ela nunca encolhe abaixo da largura INTRÍNSECA do conteúdo: uma tabela de listagem com colunas nowrap e textos longos (nome de modelo, descrição) estica a área para além da viewport. Como a área ainda leva margin-left do tamanho da barra, TODO o conteúdo (barra de ações, botão "Novo agente", ações da linha) era empurrado para fora da borda direita — a tela "comida". min-width:0 faz a área respeitar a largura disponível; a tabela rola por dentro (.table-responsive) e a barra de ações quebra linha em vez de vazar. Em telas largas, onde já cabia, nada muda. */ .main-area { background: var(--med-bg); min-width: 0; } .main-area .list-actions-btn { min-width: 0; } .main-area .list-actions-btn .btns-pages { height: auto !important; flex-wrap: wrap; row-gap: .5rem; align-items: stretch; } /* `h-100` vem do markup de todas as telas e estica só quem o tem: o botão de cadastro ficava da altura da linha e o de recarregar, do tamanho do ícone. */ .main-area .list-actions-btn .btns-pages > .btn, .main-area .list-actions-btn .btns-pages > a.btn, .main-area .list-actions-btn .btns-pages > span > .btn { height: auto !important; } /* Recarregar a listagem: fica ao lado do "Novo …" em todas as telas e é só o ícone — o rótulo está no tooltip. Discreto de propósito: é ação de apoio e não pode competir com a ação primária da barra. */ .main-area .btn-refresh { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; /* Sem altura própria: o `stretch` da linha faz o botão acompanhar o de cadastro ao lado, seja qual for o tamanho dele. */ padding: .375rem 0 !important; background: var(--med-surface) !important; border: 1px solid var(--med-border) !important; color: var(--med-text-soft) !important; border-radius: var(--med-radius) !important; box-shadow: none !important; transition: background .15s ease, color .15s ease, border-color .15s ease; } .main-area .btn-refresh:hover, .main-area .btn-refresh:focus { background: var(--med-accent-soft) !important; border-color: var(--med-accent) !important; color: var(--med-accent) !important; } .main-area .btn-refresh i { font-size: .875rem; } /* Gira enquanto o Ajax da listagem não volta (classe posta pelo `medUi.refreshList`), para a ação ter resposta visível mesmo quando os dados voltam iguais. */ .main-area .btn-refresh i.is-spinning { animation: med-refresh-spin .7s linear infinite; } @keyframes med-refresh-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .main-area .btn-refresh i.is-spinning { animation: none; opacity: .5; } } /* ------------------------------------------------------------- sidebar */ .sidebar { background: var(--med-sidebar) !important; border-right: 1px solid var(--med-border) !important; } .sidebar-header { background: transparent !important; /* Uma linha só: logo à esquerda, ações (busca/recolher) à direita. */ display: flex !important; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .75rem !important; border-bottom: 1px solid var(--med-border-soft); } .sidebar-header .sidebar-logo { flex: 1 1 auto; min-width: 0; } .sidebar-header-actions { display: flex; align-items: center; gap: .15rem; flex: 0 0 auto; } /* Recolhida, a barra só tem espaço para a logo: as ações do topo saem e a busca continua alcançável pelo atalho e pela barra expandida. */ .sidebar:not(.expanded) .sidebar-header-actions { display: none; } /* Sem as ações, o `space-between` deixava a logo encostada na esquerda — recolhida ela fica centralizada, alinhada com o "+" e os ícones do menu. */ .sidebar:not(.expanded) .sidebar-header { justify-content: center; padding-left: .35rem !important; padding-right: .35rem !important; } .sidebar:not(.expanded) .sidebar-header .sidebar-logo { flex: 0 0 auto; display: flex; justify-content: center; width: 100%; } .sidebar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--med-radius); background: transparent; color: var(--med-muted); font-size: 1rem; transition: background .15s ease, color .15s ease; } .sidebar-icon-btn:hover { background: var(--med-accent-soft); color: var(--med-text); } /* A logo vinha com filtro para ficar branca sobre o gradiente antigo; agora o fundo é claro, então ela volta ao natural (e clareia no tema escuro). */ .sidebar-header #logo, .sidebar-header #logo_icon { filter: none !important; } /* No escuro também vai sem filtro: as duas artes já têm contraste próprio e o invert chapava as cores. */ [data-bs-theme="dark"] .sidebar-header #logo, [data-bs-theme="dark"] .sidebar-header #logo_icon { filter: none !important; opacity: 1; } /* Faixa de selos de contexto (Administrador / Conta de teste / Expert), logo abaixo do cabeçalho. Eram absolutos DENTRO do cabeçalho e, com ele virando uma linha só, caíam por cima da logo e do botão de novo atendimento. */ .sidebar-flags { display: flex; flex-wrap: wrap; gap: .3rem; padding: .1rem .75rem .5rem; } /* Recolhida, a barra tem 70px: "Administrador" sairia cortado no meio da palavra. É informação de contexto, não de navegação — some com a barra fechada e volta ao reabrir. */ .sidebar:not(.expanded) .sidebar-flags { display: none; } .sidebar-flags .badge { font-size: .62rem !important; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--med-radius-pill) !important; padding: .1rem .5rem !important; box-shadow: none !important; } .sidebar-flags .admin-info, .sidebar-header .admin-info { background: var(--med-accent) !important; color: var(--med-accent-contrast) !important; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--med-radius-pill); padding: .1rem .5rem; } .sidebar-body { padding: .5rem 0 !important; } .top-menu { gap: .15rem !important; padding: 0 .5rem; } .menu-item { border-radius: var(--med-radius); color: var(--med-text-soft) !important; font-weight: 500; padding: .1rem .25rem !important; transition: background .15s ease, color .15s ease; } .sidebar.expanded .menu-item { padding: .5rem .65rem !important; } .menu-item:hover { background: var(--med-accent-soft) !important; color: var(--med-text) !important; } .menu-item.active, .menu-item[aria-current="page"] { background: var(--med-accent-soft) !important; color: var(--med-accent) !important; } .menu-icon { font-size: 1.05rem !important; width: 34px !important; height: 34px !important; } .menu-text { font-size: .875rem !important; margin-left: .5rem !important; } .menu-badge { border-color: var(--med-border) !important; color: var(--med-muted) !important; } /* Botão "Nova conversa" */ .new-chat-btn { background: var(--med-accent) !important; color: var(--med-accent-contrast) !important; border-radius: var(--med-radius) !important; font-weight: 500 !important; font-size: .875rem !important; box-shadow: none !important; transition: background .15s ease; } .new-chat-btn:hover { background: var(--med-accent-hover) !important; } .sidebar.expanded .new-chat-btn { width: calc(100% - 1rem) !important; margin: .25rem .5rem 1rem !important; } /* Dica do atalho no botão "Nova conversa": só no hover, para não competir com o rótulo. Fora dela o botão fica idêntico ao de antes. */ .new-chat-btn { display: flex !important; align-items: center; justify-content: space-between !important; gap: .5rem; } .new-chat-btn .new-chat-label { display: inline-flex; align-items: center; } .new-chat-kbd { background: rgba(255, 255, 255, .18); color: inherit; border-radius: .35rem; padding: .1rem .35rem; font-size: .66rem; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .15s ease; } .new-chat-btn:hover .new-chat-kbd, .new-chat-btn:focus-visible .new-chat-kbd { opacity: 1; } /* Recolhida, só cabe o "+": rótulo e dica saem. O botão também encolhe — com 42px ele destoava dos ícones do menu (28px) e virava o elemento dominante da barra. 34px o mantém em destaque sem competir com a logo. */ .sidebar:not(.expanded) .new-chat-btn { justify-content: center !important; width: 34px !important; height: 34px !important; min-height: 34px !important; margin: .1rem auto .6rem !important; font-size: 1rem !important; } .sidebar:not(.expanded) .new-chat-kbd { display: none; } /* Conversas/Agentes: linha compacta, para o histórico começar mais acima. */ .top-menu-compact { margin-bottom: .35rem; } .sidebar.expanded .top-menu-compact .menu-item { padding: .3rem .65rem !important; } .top-menu-compact .menu-icon { width: 28px !important; height: 28px !important; font-size: .95rem !important; } .top-menu-compact .menu-text { font-size: .8125rem !important; } /* [removido do porte] Janela de busca de conversas (.chat-search-*). É um RECURSO, não estilo: depende de /ia/search-conversations, que não existe no med. A busca daqui é o #searchAttendance da barra lateral. Se a funcionalidade vier para o med, o bloco está no hub-theme.css. */ /* Conversa fixada: alfinete discreto ao lado do título no histórico */ .history-list .conv-pin-mark { font-size: .7rem; color: var(--med-muted); margin-left: .25rem; } /* Histórico de conversas — lista compacta, com ícone de balão no lugar das iniciais */ .history-list { padding: 0 .4rem; } .history-list ul li { margin: 0 !important; padding: 0 !important; } .history-list li.fw-bold { color: var(--med-muted) !important; font-size: .6875rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em; margin: .85rem 0 .2rem !important; padding: 0 .55rem !important; } .history-list .conv-item { display: flex; align-items: center; gap: .5rem; margin: 0 !important; padding: .3rem .55rem !important; border-radius: 8px; color: var(--med-text-soft) !important; font-size: .8125rem; line-height: 1.35; text-decoration: none; transition: background .15s ease; } .history-list .conv-item:hover { background: var(--med-accent-soft); color: var(--med-text) !important; } .history-list .conv-item .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-list .conv-icon { flex: 0 0 auto; font-size: .8rem; color: var(--med-muted); opacity: .85; } .history-list .conv-item:hover .conv-icon { color: var(--med-accent); opacity: 1; } /* Ações da conversa (renomear / excluir): o botão fica sobre o item, revelado no hover. Ele é IRMÃO do link, não filho — dentro do o clique abriria a conversa junto do menu. */ .history-list .conv-row { position: relative; } .history-list .conv-row .conv-item { padding-right: 1.9rem !important; } .conv-actions { position: absolute; top: 50%; right: .25rem; transform: translateY(-50%); } .conv-actions-btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--med-muted); font-size: .8rem; line-height: 1; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; } .history-list .conv-row:hover .conv-actions-btn, .conv-actions-btn:focus-visible, .conv-actions.show .conv-actions-btn, .conv-actions-btn[aria-expanded="true"] { opacity: 1; } .conv-actions-btn:hover { background: var(--med-border); color: var(--med-text); } /* Sem hover (toque), o menu precisa estar sempre alcançável. */ @media (hover: none) { .conv-actions-btn { opacity: 1; } } /* Menu recolhido: a lista some, então as ações não têm o que fazer. */ .sidebar:not(.expanded) .conv-actions { display: none; } /* Enquanto o menu está aberto, a caixa de ações precisa subir acima das linhas seguintes. O transform em .conv-actions cria um stacking context próprio, então o z-index que o Bootstrap dá ao .dropdown-menu fica preso ali dentro — as conversas renderizadas DEPOIS no DOM pintavam por cima e o texto atravessava o menu. Cobrimos os dois jeitos de o Bootstrap sinalizar "aberto": .show no wrapper e o botão com aria-expanded. */ .conv-actions.show, .conv-actions:has(.dropdown-menu.show), .conv-actions:has(.conv-actions-btn[aria-expanded="true"]) { z-index: 1080; } /* Menu de opções da conversa (Renomear / Excluir). Estilo próprio, NÃO herdado de #sidebar .dropdown-menu: o Bootstrap pode reposicionar o dropdown e ele escapava daquele seletor, ficando sem fundo — a lista aparecia ATRAVÉS do menu. Fundo opaco e cores sólidas, independentes de onde ele for renderizado. */ .conv-actions-menu.dropdown-menu { min-width: 172px; padding: .35rem !important; background-color: var(--med-surface) !important; border: 1px solid var(--med-border) !important; border-radius: var(--med-radius-lg) !important; box-shadow: var(--med-shadow-lg) !important; } .conv-actions-menu .dropdown-item { display: flex; align-items: center; border-radius: 8px; padding: .5rem .6rem; font-size: .875rem; color: var(--med-text) !important; background: transparent; } .conv-actions-menu .dropdown-item:hover, .conv-actions-menu .dropdown-item:focus { background-color: var(--med-accent-soft) !important; color: var(--med-text) !important; } .conv-actions-menu .dropdown-item.conv-delete, .conv-actions-menu .dropdown-item.conv-delete i { color: var(--med-danger, #d33) !important; } .conv-actions-menu .dropdown-item.conv-delete:hover { background-color: rgba(211, 51, 51, .1) !important; } /* Rodapé do usuário */ .sidebar-footer { border-top: 1px solid var(--med-border-soft); padding: .5rem; } .user-area { border-radius: var(--med-radius); padding: .4rem; transition: background .15s ease; } .user-area:hover { background: var(--med-accent-soft); } /* Menu RECOLHIDO: o caret do dropdown continuava ocupando espaço na linha do usuário mesmo sem o nome ao lado, empurrando as iniciais para fora do centro e contra a borda lateral da barra. Sem o caret, os 34px do avatar ficam realmente centrados nos 70px da barra recolhida. */ .sidebar:not(.expanded) .sidebar-footer .dropdown-toggle::after { display: none !important; } .sidebar:not(.expanded) .sidebar-footer .user-area { justify-content: center !important; width: 100% !important; padding: 0 !important; } .sidebar:not(.expanded) .sidebar-footer { padding-left: .35rem; padding-right: .35rem; } .user-name .fw-bold { font-size: .875rem; font-weight: 500 !important; color: var(--med-text); } .avatar-circle, .med-user-initials { background: var(--med-accent) !important; color: var(--med-accent-contrast) !important; font-weight: 600 !important; font-size: .8rem !important; letter-spacing: .01em; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; border-radius: 9px !important; display: flex; align-items: center; justify-content: center; text-transform: uppercase; } #sidebar .dropdown-menu { background: var(--med-surface) !important; border: 1px solid var(--med-border) !important; border-radius: var(--med-radius-lg) !important; box-shadow: var(--med-shadow-lg) !important; padding: .35rem !important; } #sidebar .dropdown-item { border-radius: 8px; color: var(--med-text-soft) !important; font-size: .875rem; padding: .5rem .6rem; } #sidebar .dropdown-item:hover { background: var(--med-accent-soft) !important; color: var(--med-text) !important; } #sidebar .dropdown-item i { color: var(--med-muted); font-size: 1rem !important; } /* ============================================================================= Menu do usuário (avatar do rodapé da barra lateral) Abre COM A BARRA RECOLHIDA, ao lado da trilha — antes o clique no avatar expandia a barra só para o menu caber, desfazendo o layout escolhido. Com a barra recolhida o nome não aparece em lugar nenhum da tela, então o topo do próprio menu passou a ser o cartão de quem está logado. ============================================================================= */ /* Largura FIXA, não min-width: o e-mail do cartão tem ellipsis, que só atua com largura limitada. Com min-width o menu esticava até caber o endereço inteiro (~330px), ficava mais largo que a barra de 260px e vazava para fora da tela. */ .med-user-menu { --med-user-menu-width: 15.5rem; width: var(--med-user-menu-width); min-width: var(--med-user-menu-width); max-width: calc(100vw - 1rem); padding: .35rem !important; max-height: calc(100vh - 5rem); overflow-y: auto; /* Acima do conteúdo quando escapa da barra (que já está em z-index 1050). */ z-index: 1060; } /* POSIÇÃO — pelo id de propósito. Com data-bs-display="static" o Bootstrap carimba data-bs-popper="static" no menu, e o CSS dele traz `.dropdown-menu[data-bs-popper] { top: 100% }`, que é mais específico (0,2,0) do que uma classe: o menu descia e sumia embaixo da tela com a barra ABERTA. O #user-menu (1,0,0) vence sem precisar de !important em cada propriedade. Barra aberta: sobe a partir do avatar, ancorado pela ESQUERDA. Pela direita ele crescia para fora da tela quando ficava mais largo que a barra; pela esquerda o excesso passa por cima do conteúdo, que é o que a referência faz. */ #user-menu.med-user-menu { position: absolute; top: auto; right: auto; bottom: calc(100% + .4rem); left: 0; margin: 0; } /* ---- superfície do menu ---- Escrita pelo id porque o tema base pinta os dropdowns por vários caminhos (style.css, custom.css, form-custom.css) e o resultado no escuro ficava com contraste baixo e linha em volta de cada item. */ #user-menu.med-user-menu { background: var(--med-surface) !important; border: 1px solid var(--med-border) !important; border-radius: 14px !important; box-shadow: 0 10px 32px rgba(0, 0, 0, .16) !important; } [data-bs-theme="dark"] #user-menu.med-user-menu { background: #2f2f2d !important; border-color: rgba(255, 255, 255, .09) !important; box-shadow: 0 12px 36px rgba(0, 0, 0, .5) !important; } /* ---- itens: sem contorno, sem linha, sem quina ---- O que estava desenhando um retângulo em volta de cada linha do menu vinha do tema base; aqui os itens são zerados e redesenhados. Ícone e rótulo em colunas para o rótulo de duas linhas ("Convites de colaboração") não quebrar por baixo do ícone. */ #user-menu.med-user-menu li { border: 0 !important; background: none !important; } /* Separador desenhado por pseudo-elemento também some: era isso que punha uma linha em volta de cada item, e a origem muda conforme a folha do tema base que ganha a disputa. O
dos divisores é elemento real e não é afetado. */ #user-menu.med-user-menu li::before, #user-menu.med-user-menu li::after, #user-menu.med-user-menu .dropdown-item::before, #user-menu.med-user-menu .dropdown-item::after { content: none !important; display: none !important; } #user-menu.med-user-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 0 !important; border-radius: 8px; box-shadow: none !important; font-size: .875rem; /* O texto herdava um cinza claro do tema base e ficava difícil de ler no modo claro; aqui é a cor de texto do tema, cheia. */ color: var(--med-text) !important; } #user-menu.med-user-menu .dropdown-item i { flex: 0 0 1.05rem; text-align: center; font-size: 1rem !important; color: var(--med-muted) !important; } /* Hover neutro, não colorido: o accent tingia a linha inteira e competia com o conteúdo. */ #user-menu.med-user-menu .dropdown-item:hover, #user-menu.med-user-menu .dropdown-item:focus { background: var(--med-surface-2) !important; color: var(--med-text) !important; } #user-menu.med-user-menu .dropdown-item:hover i { color: var(--med-text) !important; } [data-bs-theme="dark"] #user-menu.med-user-menu .dropdown-item:hover, [data-bs-theme="dark"] #user-menu.med-user-menu .dropdown-item:focus { background: rgba(255, 255, 255, .07) !important; } #user-menu.med-user-menu .dropdown-header { padding: .5rem .6rem .2rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--med-muted) !important; background: none !important; } #user-menu.med-user-menu .dropdown-divider { margin: .3rem .35rem; border-top: 1px solid var(--med-border-soft) !important; opacity: 1; } [data-bs-theme="dark"] #user-menu.med-user-menu .dropdown-divider { border-top-color: rgba(255, 255, 255, .08) !important; } /* ---- cartão de quem está logado, no topo do menu ---- */ #user-menu .med-user-card { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem; border: 0 !important; } /* min-width:0 + overflow:hidden: sem os dois, o item flex adota a largura do conteúdo (o e-mail inteiro) e o ellipsis nunca aparece. */ #user-menu .med-user-card-info { flex: 1 1 auto; min-width: 0; overflow: hidden; } #user-menu .med-user-card-name { font-size: .875rem; font-weight: 600; color: var(--med-text) !important; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #user-menu .med-user-card-mail { font-size: .75rem; color: var(--med-muted) !important; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O avatar do cartão é menor que o do rodapé (que precisa ser alvo de clique): aqui ele só identifica a conta. */ #user-menu .med-user-initials { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; max-width: 30px !important; max-height: 30px !important; border-radius: 50% !important; font-size: .72rem !important; } /* As mesmas seções no menu do shell genérico (templates com barra superior, que incluem partial/menu_user.html e não têm as classes do dropdown do Bootstrap). */ .profile-dropdown .dropdown-header { padding: .5rem .75rem .25rem; margin: 0; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--med-muted); } .profile-dropdown .dropdown-divider { margin: .3rem .5rem; border-color: var(--med-border-soft); opacity: 1; } /* ---- sair: última ação e a única destrutiva do menu ---- */ #user-menu .med-user-menu-exit, #user-menu .med-user-menu-exit i { color: #c74a3c !important; } #user-menu .med-user-menu-exit:hover, #user-menu .med-user-menu-exit:hover i { background: rgba(199, 74, 60, .1) !important; color: #c74a3c !important; } #user-menu .med-user-menu-exit:hover i { background: none !important; } [data-bs-theme="dark"] #user-menu .med-user-menu-exit, [data-bs-theme="dark"] #user-menu .med-user-menu-exit i, [data-bs-theme="dark"] #user-menu .med-user-menu-exit:hover, [data-bs-theme="dark"] #user-menu .med-user-menu-exit:hover i { color: #ef8b7d !important; } [data-bs-theme="dark"] #user-menu .med-user-menu-exit:hover { background: rgba(239, 139, 125, .12) !important; } /* ---- barra RECOLHIDA: o menu sai para o LADO ---- Na trilha o avatar tem 34px: subir por cima dele deixaria o menu quase todo fora da barra. Ao lado, ele nasce alinhado pelo pé, como no padrão que a referência usa. */ .sidebar:not(.expanded) #user-menu.med-user-menu { top: auto; right: auto; bottom: 0; left: calc(100% + .5rem); } /* A barra tem overflow:hidden (para a largura não vazar durante a transição), o que cortaria o menu aberto ao lado. A classe é posta pelo JS do shell só enquanto ele está aberto — deixar visível o tempo todo faria a trilha vazar na animação de abrir/recolher. */ .sidebar.user-menu-open { overflow: visible !important; } .sidebar.user-menu-open .sidebar-footer, .sidebar.user-menu-open .sidebar-footer .dropdown { overflow: visible; } /* No celular a barra recolhida cobre a tela inteira, então sair pela direita jogaria o menu para fora da viewport: ele volta a subir pelo avatar. */ @media (max-width: 767.98px) { .sidebar:not(.expanded) #user-menu.med-user-menu { right: 0; bottom: calc(100% + .4rem); left: auto; } } /* --------------------------------------------------------------- topbar */ header#pageWrapper .page-header { background: transparent !important; border-bottom: 1px solid var(--med-border-soft); padding: .55rem .25rem !important; box-shadow: none !important; } #conv-title { font-size: 1rem !important; font-weight: 600; letter-spacing: -.015em; color: var(--med-text); } /* Topo em UMA linha: o subtítulo vazio reservava uma segunda linha de altura (ex.: "Nova conversa" sem descrição). Sem conteúdo ele some, e as colunas do cabeçalho ficam centradas verticalmente na mesma linha. */ header#pageWrapper .page-header { align-items: center; } .page-header .med-title-block .text-success:empty { display: none; } /* O título estava colado na borda esquerda da tela */ .page-header .med-page-title { padding-left: 1rem !important; } @media (max-width: 767.98px) { .page-header .med-page-title { padding-left: .5rem !important; } } /* Barra lateral RECOLHIDA no desktop: a barra flutuante (recolher + buscar) fica sobre o começo da .main-area, e o título nascia por baixo dela. A reserva é a largura da flutuante (2 botões de 32px + espaçamentos) mais uma folga. */ @media (min-width: 992px) { .sidebar:not(.expanded) ~ .main-area .page-header .med-page-title { padding-left: 6.5rem !important; } } /* ===== TOPO: título fluido ===== O bloco do título tinha width:70% fixo e a coluna de ações era `col`. Em notebook (1280-1440) com o menu expandido as duas não cabiam na mesma linha e o topo quebrava. Agora o título é elástico e trunca; as ações têm largura natural e ficam encostadas à direita. */ .page-header .med-page-title { min-width: 0; overflow: hidden; } .page-header .med-title-wrap { min-width: 0; } .page-header .med-title-block { min-width: 0; flex: 1 1 auto; } .page-header .med-title-line { display: flex; align-items: center; gap: .4rem; min-width: 0; } .page-header .med-conv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O tema base define `.page-wrapper .page-header .header-wrapper { width: 100% }` e essa regra (3 classes) vence o `col-auto` do Bootstrap: a coluna dos ícones ocupava a linha inteira e caía embaixo do título. Aqui ela volta a ter largura de conteúdo e fica ao lado do título, na mesma linha. */ header#pageWrapper .page-header { flex-wrap: nowrap; } header#pageWrapper .page-header .header-wrapper { min-width: 0; width: auto !important; flex: 0 0 auto; } /* O .nav-right carrega larguras de grid (col-xxl-8 / col-xl-6 / col-md-7): dentro do cabeçalho de largura natural, o col-xl-6 reservava 50% e a linha estourava no notebook — o ícone de relatório descolava para o canto. Aqui o cluster passa a ter largura de CONTEÚDO, numa linha só, encostado à direita. */ .page-header .header-wrapper > .row { flex-wrap: nowrap; margin: 0; width: auto; } .page-header .nav-right { width: auto !important; max-width: none !important; flex: 0 0 auto !important; } .page-header .nav-menus { flex-wrap: nowrap; } /* ===== TÍTULO EDITÁVEL ===== */ .med-conv-title-input { min-width: 0; width: 100%; max-width: 460px; padding: .1rem .45rem; font-size: 1rem !important; font-weight: 600; letter-spacing: -.015em; color: var(--med-text); background: var(--med-surface); border: 1px solid var(--med-accent); border-radius: 8px; outline: none; } .med-conv-rename-btn { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--med-muted); font-size: .8rem; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; } /* O lápis só aparece ao passar o mouse pelo topo — no toque ele fica sempre visível, já que não existe hover. */ .page-header .med-title-wrap:hover .med-conv-rename-btn { opacity: 1; } .med-conv-rename-btn:hover { background: var(--med-accent-soft); color: var(--med-accent); } .med-conv-rename-btn:focus-visible { opacity: 1; outline: 2px solid var(--med-accent); } @media (hover: none) { .med-conv-rename-btn { opacity: 1; } } /* ===== TOPO NO CELULAR ===== O menu-sanduíche (.btn-expand) fica fixo no canto superior esquerdo; sem uma reserva o título nasce embaixo dele. E o input de edição não pode ter os 460px do desktop numa tela estreita. */ @media (max-width: 767.98px) { .page-header .med-page-title { padding-left: 3.2rem !important; } .med-conv-title-input { max-width: 100%; } /* Numa tela de toque o lápis some quando o input abre, para não competir com o teclado; a edição continua acessível pelo duplo toque no título e pela opção "Renomear" da lista. */ } @media (max-width: 575.98px) { #conv-title, .page-header .med-conv-title, .med-conv-title-input { font-size: .9375rem !important; } .page-header .text-success { font-size: .7rem; } } /* Botão que abre o consumo da conversa, ao lado do título */ .med-conv-usage-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--med-border); border-radius: 8px; background: transparent; color: var(--med-muted); font-size: .9rem; transition: background .15s ease, color .15s ease, border-color .15s ease; } .med-conv-usage-btn:hover { background: var(--med-accent-soft); border-color: var(--med-accent); color: var(--med-accent); } /* Subtítulo da página (vinha em verde de sucesso) */ .page-header .text-success { color: var(--med-muted) !important; font-weight: 400; } /* Ícone de tela cheia: o sprite usa fill/stroke do tema base */ .page-header .fullscreen-body svg { stroke: currentColor !important; fill: none !important; } .page-header .nav-menus { align-items: center; gap: .35rem; } /* O tema base pinta cada item do topo com um "chip" claro fixo (#f4f7f9) — no tema escuro isso vira uma bolha branca. Aqui os itens ficam transparentes e o realce é só no hover. */ .page-header .nav-menus > li { padding: 0 !important; background: transparent !important; border-radius: var(--med-radius) !important; box-shadow: none !important; } /* Seletor de organização: era um bloco azul com gradiente inline */ #navOrganizations { background-image: none !important; background: transparent !important; border: 1px solid var(--med-border) !important; border-radius: var(--med-radius-pill) !important; box-shadow: none !important; padding: .15rem .7rem .15rem .2rem !important; } #navOrganizations:hover { background: var(--med-accent-soft) !important; } #navOrganizations .text-white-force, #navOrganizations p, #navOrganizations span, #navOrganizations i { color: var(--med-text) !important; } /* Iniciais coloridas por letra (gradiente inline) em toda a interface: organização no topo, avatar do usuário e avatar do cabeçalho da conversa. */ #navOrganizations div[style*="linear-gradient"], .sidebar-footer div[style*="linear-gradient"], .avatar-ai-header div[style*="linear-gradient"] { background-image: none !important; background: var(--med-accent) !important; color: var(--med-accent-contrast) !important; border-radius: 8px !important; box-shadow: none !important; } /* Ícones do topo (tela cheia, notificações, tema). `div.notification-box` de propósito: a LISTA de notificações usa a mesma classe num