/* =============================================================================
   Vantara - tema escuro tecnico sobre o Bootstrap 5.3 (data-bs-theme="dark").
   Tokens --vt-*; componentes do portal com prefixo vt-.
   ============================================================================= */

:root,
[data-bs-theme="dark"] {
    /* fundo azul-petroleo quase preto: base #030E17, ate #02070C nas bordas, centro levemente iluminado */
    --vt-bg: #030E17;
    --vt-bg-deep: #02070C;
    --vt-grid: rgba(0, 229, 255, 0.025);
    --vt-chrome: rgba(3, 14, 23, 0.82);
    --vt-sidebar-bg: #030C14;
    --vt-surface: #071926;
    --vt-surface-2: #0a2131;
    --vt-surface-3: #0e2a3c;
    --vt-border: #123142;
    --vt-border-strong: #1a4357;
    --vt-text: #e6edf3;
    --vt-muted: #8aa1b1;
    --vt-faint: #57707f;
    --vt-accent: #4cc2ff;
    --vt-accent-strong: #2ea8ea;
    --vt-accent-soft: rgba(76, 194, 255, 0.12);
    --vt-ok: #3fb950;
    --vt-warn: #d29922;
    --vt-danger: #f85149;
    --vt-claude: #d97757;
    --vt-term-bg: #020A10;
    --vt-radius: 10px;
    --vt-sidebar: 248px;
    --vt-mono: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;

    --bs-body-bg: var(--vt-bg);
    --bs-body-color: var(--vt-text);
    --bs-secondary-color: var(--vt-muted);
    --bs-border-color: var(--vt-border);
    --bs-primary: var(--vt-accent);
    --bs-primary-rgb: 76, 194, 255;
    --bs-link-color: var(--vt-accent);
    --bs-link-color-rgb: 76, 194, 255;
    --bs-link-hover-color: #8ad6ff;
    --bs-tertiary-bg: var(--vt-surface-2);
    --bs-secondary-bg: var(--vt-surface-3);
    --bs-emphasis-color: #ffffff;
    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
    background-color: var(--vt-bg-deep);
}

/* grade ciano bem discreta sobre o degrade radial (centro azul-petroleo, bordas quase pretas) */
body {
    font-size: 0.925rem;
    color: var(--vt-text);
    min-height: 100vh;
    background-color: var(--vt-bg-deep);
    background-image:
        linear-gradient(var(--vt-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--vt-grid) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 40%, rgba(0, 45, 58, 0.28) 0%, rgba(3, 14, 23, 0.35) 45%, rgba(2, 7, 12, 0.9) 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
    background-attachment: fixed;
}

.icone {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.mono {
    font-family: var(--vt-mono);
}

.text-muted, .text-secondary {
    color: var(--vt-muted) !important;
}

a {
    text-decoration: none;
}

/* ---------------------------------------------------------------- botoes -- */
.btn {
    border-radius: 8px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    justify-content: center;
}

.btn-primary {
    --bs-btn-bg: var(--vt-accent-strong);
    --bs-btn-border-color: var(--vt-accent-strong);
    --bs-btn-hover-bg: var(--vt-accent);
    --bs-btn-hover-border-color: var(--vt-accent);
    --bs-btn-active-bg: #1f8fcc;
    --bs-btn-color: #04131c;
    --bs-btn-hover-color: #04131c;
    --bs-btn-active-color: #04131c;
    --bs-btn-disabled-bg: #24485c;
    --bs-btn-disabled-border-color: #24485c;
}

.btn-claude {
    --bs-btn-bg: var(--vt-claude);
    --bs-btn-border-color: var(--vt-claude);
    --bs-btn-hover-bg: #e48a6c;
    --bs-btn-hover-border-color: #e48a6c;
    --bs-btn-active-bg: #c4664a;
    --bs-btn-color: #1a0d07;
    --bs-btn-hover-color: #1a0d07;
    --bs-btn-active-color: #1a0d07;
    --bs-btn-disabled-bg: #4a3128;
    --bs-btn-disabled-border-color: #4a3128;
    --bs-btn-disabled-color: #a08070;
}

.btn-outline-secondary {
    --bs-btn-color: var(--vt-text);
    --bs-btn-border-color: var(--vt-border-strong);
    --bs-btn-hover-bg: var(--vt-surface-3);
    --bs-btn-hover-border-color: var(--vt-border-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--vt-surface-3);
}

.btn-icone {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    color: var(--vt-muted);
    background: transparent;
    border: 1px solid transparent;
}

.btn-icone:hover {
    color: var(--vt-text);
    background: var(--vt-surface-3);
}

/* ---------------------------------------------------------- formularios -- */
.form-control, .form-select {
    background-color: var(--vt-surface-2);
    border-color: var(--vt-border);
    color: var(--vt-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--vt-surface-2);
    border-color: var(--vt-accent);
    color: var(--vt-text);
    box-shadow: 0 0 0 0.2rem var(--vt-accent-soft);
}

.form-control::placeholder {
    color: var(--vt-faint);
}

.form-label {
    font-weight: 500;
    color: #c9d4df;
    margin-bottom: 0.3rem;
}

.form-text {
    color: var(--vt-muted);
}

textarea.mono, input.mono {
    font-size: 0.85rem;
}

/* --------------------------------------------------------------- layout -- */
.vt-shell {
    display: flex;
    min-height: 100vh;
}

.vt-sidebar {
    width: var(--vt-sidebar);
    flex-shrink: 0;
    background: var(--vt-sidebar-bg);
    border-right: 1px solid var(--vt-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1030;
}

.vt-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.1rem 1rem;
    color: var(--vt-text);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
}

.vt-brand:hover {
    color: #fff;
}

.vt-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.vt-nav {
    padding: 0.25rem 0.6rem 1rem;
    flex: 1;
}

.vt-nav-group {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vt-faint);
    padding: 1rem 0.6rem 0.4rem;
    font-weight: 600;
}

.vt-nav a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    color: var(--vt-muted);
    font-weight: 500;
    margin-bottom: 2px;
}

.vt-nav a:hover {
    background: var(--vt-surface-3);
    color: var(--vt-text);
}

.vt-nav a.ativo {
    background: var(--vt-accent-soft);
    color: var(--vt-accent);
}

.vt-nav .contador {
    margin-left: auto;
    font-size: 0.7rem;
}

/* pendencias (ex.: solicitacoes esperando o administrador) */
.vt-nav .vt-nav-contador {
    margin-left: auto;
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--vt-warn);
    color: #111;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

/* texto livre com quebras de linha (pedidos, respostas, escopo) */
.vt-texto-pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* comandos internos e saidas na conversa (so leitura): monoespacado e mais discreto */
.vt-texto-mono {
    font-family: var(--vt-mono);
    font-size: 0.82rem;
    color: var(--vt-muted);
}

/* atendimento: destaca as linhas das MINHAS mensagens (PERGUNTA); o resto fica como esta */
[data-conversa-corpo] tr[data-tipo="PERGUNTA"] > td {
    background: rgba(76, 194, 255, 0.22);
}

/* atendimento: realce ao arrastar arquivo sobre a caixa de envio */
[data-conversa-enviar].vt-arrastando {
    outline: 2px dashed var(--vt-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

/* visualizador do admin (Histórico/Sessões): destaca a mensagem de quem e humano; o do Claude fica como esta */
.vt-destaque-humano {
    background: rgba(76, 194, 255, 0.22);
    border-radius: 0 8px 8px 0;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-right: 0.6rem;
}

/* conversas anteriores do Claude (so leitura) */
.vt-conversa-resumo {
    max-width: 60ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* tela do projeto: coluna da direita com as conversas e, logo abaixo, as sessoes */
.vt-projeto-lado {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vt-projeto-lado .vt-card-header {
    flex-wrap: wrap;
}

.vt-conversas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vt-conversas li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.1rem;
    border-bottom: 1px solid var(--vt-border);
}

.vt-conversas li:last-child {
    border-bottom: 0;
}

.vt-conversas .texto {
    flex: 1;
    min-width: 0;
}

.vt-conversas .vt-conversa-resumo {
    max-width: none;
}

.vt-conversas .acoes {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* tela larga: a lista rola dentro do cartao, para as sessoes ficarem logo abaixo */
@media (min-width: 992px) {
    .vt-conversas {
        max-height: 55vh;
        overflow-y: auto;
    }
}

.vt-conversa {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 980px;
}

.vt-msg {
    border: 1px solid var(--vt-border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    background: var(--vt-surface);
}

.vt-msg-usuario {
    background: var(--vt-surface-2);
    border-left: 3px solid var(--vt-accent);
}

.vt-msg-claude {
    border-left: 3px solid var(--vt-claude);
}

.vt-msg-autor {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vt-muted);
    margin-bottom: 0.35rem;
}

.vt-msg-hora {
    font-weight: 400;
    color: var(--vt-faint);
}

.vt-msg-texto {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
}

div.vt-texto-pre {
    background: var(--vt-surface-2);
    border: 1px solid var(--vt-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

.vt-sidebar-footer {
    border-top: 1px solid var(--vt-border);
    padding: 0.8rem 1rem;
    font-size: 0.8rem;
    color: var(--vt-faint);
}

/* pagina /manuais: cards com capa + explicacao; cada card abre o PDF em nova aba */
.vt-manuais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.vt-manual-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--vt-surface-2);
    border: 1px solid var(--vt-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.vt-manual-card:hover {
    border-color: var(--vt-accent);
    transform: translateY(-2px);
}
.vt-manual-capa {
    height: 190px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--vt-border);
}
.vt-manual-capa img {
    width: 100%;
    height: auto;
    display: block;
}
.vt-manual-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 1rem 1rem;
    flex: 1;
}
.vt-manual-titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}
.vt-manual-titulo svg { width: 1em; height: 1em; }
.vt-manual-desc {
    margin: 0;
    font-size: 0.85rem;
    color: var(--vt-faint);
    flex: 1;
}
.vt-manual-card .btn { align-self: flex-start; margin-top: 0.25rem; }

.vt-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vt-topbar {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--vt-border);
    background: var(--vt-chrome);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.vt-topbar h1 {
    font-size: 1.05rem;
    margin: 0;
    font-weight: 600;
}

.vt-topbar .espaco {
    flex: 1;
}

.vt-content {
    padding: 1.5rem;
    width: 100%;
    min-width: 0;
}

.vt-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vt-surface-3);
    border: 1px solid var(--vt-border-strong);
    color: var(--vt-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.vt-user-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.2rem 0.6rem 0.2rem 0.25rem;
    color: var(--vt-text);
}

.vt-user-btn:hover {
    background: var(--vt-surface-3);
}

/* cabecalho do terminal: o menu do usuario fica no canto direito, sem encolher */
.vt-term-header .vt-menu-usuario {
    flex-shrink: 0;
}

.vt-term-header .vt-user-btn {
    padding-right: 0.45rem;
    gap: 0.4rem;
}

/* terminal em tela estreita (botoes so com icone): so as iniciais */
@media (max-width: 991.98px) {
    .vt-term-header .vt-user-btn .nome {
        display: none !important;
    }
}

.dropdown-menu {
    --bs-dropdown-bg: var(--vt-surface-2);
    --bs-dropdown-border-color: var(--vt-border-strong);
    --bs-dropdown-link-hover-bg: var(--vt-surface-3);
    --bs-dropdown-link-color: var(--vt-text);
    --bs-dropdown-link-hover-color: #fff;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vt-menu-toggle {
    display: none;
}

.vt-backdrop {
    display: none;
}

/* ---------------------------------------------------------------- cartoes -- */
.vt-card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
}

.vt-card-header {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--vt-border);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
}

.vt-card-body {
    padding: 1.1rem;
}

.vt-section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vt-faint);
    font-weight: 600;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vt-stat {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    padding: 1rem 1.1rem;
}

.vt-stat .numero {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
}

.vt-stat .rotulo {
    color: var(--vt-muted);
    font-size: 0.8rem;
}

/* -------------------------------------------------------- cartao projeto -- */
/* Inicio: titulo "Meus projetos" com a pesquisa a direita (embaixo dele em tela estreita) */
.vt-projetos-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.vt-projetos-topo .vt-section-title {
    margin: 0;
}

/* campo de pesquisa com lupa (Inicio e lista de projetos do admin; filtro no app.js, data-filtrar) */
.vt-pesquisa {
    position: relative;
    width: 20rem;
    max-width: 100%;
}

.vt-pesquisa .icone {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vt-faint);
    pointer-events: none;
}

.vt-pesquisa input {
    padding-left: 2rem;
}

@media (max-width: 575.98px) {
    .vt-pesquisa {
        width: 100%;
    }
}

.vt-project {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    transition: border-color 0.15s;
}

.vt-project:hover {
    border-color: var(--vt-border-strong);
}

.vt-project h3 {
    font-size: 1.02rem;
    margin: 0;
    font-weight: 600;
}

.vt-project h3 a {
    color: var(--vt-text);
}

.vt-project h3 a:hover {
    color: var(--vt-accent);
}

.vt-project .desc {
    color: var(--vt-muted);
    font-size: 0.86rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vt-project .caminho {
    font-family: var(--vt-mono);
    font-size: 0.76rem;
    color: var(--vt-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-project .acoes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* admin: quem esta usando o projeto (sem d-flex: o d-flex venceria o [hidden]) */
.vt-project .vt-em-uso {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vt-project .vt-em-uso[hidden] {
    display: none;
}

/* ---------------------------------------------------------------- selos -- */
.vt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--vt-border-strong);
    color: var(--vt-muted);
    background: var(--vt-surface-2);
    white-space: nowrap;
}

.vt-badge.success { color: var(--vt-ok); border-color: rgba(63, 185, 80, 0.35); background: rgba(63, 185, 80, 0.08); }
.vt-badge.warning { color: var(--vt-warn); border-color: rgba(210, 153, 34, 0.35); background: rgba(210, 153, 34, 0.08); }
.vt-badge.danger { color: var(--vt-danger); border-color: rgba(248, 81, 73, 0.35); background: rgba(248, 81, 73, 0.08); }
.vt-badge.info { color: var(--vt-accent); border-color: rgba(76, 194, 255, 0.35); background: var(--vt-accent-soft); }
.vt-badge.claude { color: var(--vt-claude); border-color: rgba(217, 119, 87, 0.4); background: rgba(217, 119, 87, 0.08); }
.vt-badge.secondary { color: var(--vt-muted); }

.vt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* --------------------------------------------------------------- tabelas -- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--vt-text);
    --bs-table-border-color: var(--vt-border);
    --bs-table-hover-bg: var(--vt-surface-2);
    --bs-table-hover-color: var(--vt-text);
    margin: 0;
}

.table > :not(caption) > * > * {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

.table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vt-faint);
    font-weight: 600;
    border-bottom-color: var(--vt-border-strong);
    white-space: nowrap;
}

.table td.acoes {
    white-space: nowrap;
    text-align: right;
}

/* auditoria: coluna Tipo estreita (o selo quebra em ate duas linhas); a sobra vai para a descricao.
   A largura fica no th: na grade em cartao o cabecalho some e a celula ocupa a linha toda */
.vt-auditoria th.vt-col-tipo {
    width: 13.5rem;
}

.vt-auditoria .vt-badge {
    white-space: normal;
    line-height: 1.3;
    border-radius: 0.6rem;
}

.vt-empty {
    text-align: center;
    color: var(--vt-muted);
    padding: 2.2rem 1rem;
}

.vt-empty .icone {
    width: 2rem;
    height: 2rem;
    color: var(--vt-faint);
    display: block;
    margin: 0 auto 0.6rem;
}

/* --------------------------------------------------------------- alertas -- */
.alert {
    border-radius: var(--vt-radius);
    border-width: 1px;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.alert .icone {
    margin-top: 0.15rem;
}

.alert-success { --bs-alert-bg: rgba(63, 185, 80, 0.1); --bs-alert-border-color: rgba(63, 185, 80, 0.35); --bs-alert-color: #8ee09a; }
.alert-danger { --bs-alert-bg: rgba(248, 81, 73, 0.1); --bs-alert-border-color: rgba(248, 81, 73, 0.4); --bs-alert-color: #ffa198; }
.alert-warning { --bs-alert-bg: rgba(210, 153, 34, 0.1); --bs-alert-border-color: rgba(210, 153, 34, 0.4); --bs-alert-color: #e3b341; }
.alert-info { --bs-alert-bg: var(--vt-accent-soft); --bs-alert-border-color: rgba(76, 194, 255, 0.35); --bs-alert-color: #9ddcff; }

.vt-http-warning {
    background: rgba(210, 153, 34, 0.1);
    border-bottom: 1px solid rgba(210, 153, 34, 0.35);
    color: #e3b341;
    font-size: 0.82rem;
    padding: 0.45rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* --------------------------------------------------------------- acesso -- */
.vt-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: transparent; /* o fundo com grade do body */
}

.vt-auth-card {
    width: 100%;
    max-width: 410px;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 14px;
    padding: 2rem 2rem 1.6rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.vt-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.vt-auth-sub {
    color: var(--vt-muted);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.vt-auth-foot {
    margin-top: 1.4rem;
    text-align: center;
    color: var(--vt-faint);
    font-size: 0.75rem;
}

.vt-auth-link {
    display: block;
    margin-top: 1.1rem;
    text-align: center;
    color: var(--vt-muted);
    font-size: 0.8rem;
    text-decoration: none;
}

.vt-auth-link:hover {
    color: var(--vt-accent);
}

/* tela publica do certificado do servidor */
.vt-cert-passos {
    margin: 1rem 0 1.2rem;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--vt-muted);
}

.vt-cert-passos li + li {
    margin-top: 0.35rem;
}

.vt-cert-dados {
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.vt-cert-dados dt {
    color: var(--vt-faint);
    font-weight: 500;
}

.vt-cert-dados dd {
    margin-bottom: 0.45rem;
    word-break: break-word;
}

.vt-cert-manual {
    font-size: 0.8rem;
    color: var(--vt-muted);
}

.vt-cert-manual summary {
    cursor: pointer;
    color: var(--vt-text);
    margin-bottom: 0.4rem;
}

.vt-prompt-deco {
    font-family: var(--vt-mono);
    font-size: 0.78rem;
    color: var(--vt-faint);
    background: var(--vt-term-bg);
    border: 1px solid var(--vt-border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin-bottom: 1.4rem;
}

.vt-prompt-deco .ps { color: var(--vt-accent); }
.vt-prompt-deco .cl { color: var(--vt-claude); }

/* ======================================================== tela do terminal == */
.vt-term-page {
    /* Presa nas quatro bordas da janela (top/bottom 0): cabe em qualquer tela sem depender de 100vh
       (que no celular/iPad inclui a area atras das barras do navegador). Com teclado da tela aberto, o
       terminal.js passa a altura e o deslocamento da area visivel (--vt-altura/--vt-topo) */
    position: fixed;
    top: var(--vt-topo, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    /* 100svh = altura com as barras do navegador SEMPRE a mostra: no Chrome do celular a janela conta
       a area atras da barra de endereco (so a tela cheia cabia). Navegador sem svh fica no bottom: 0 */
    height: var(--vt-altura, min(100svh, 100dvh));
    /* barra de gestos/indicador do aparelho (viewport-fit=cover no terminal.html) */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vt-term-header {
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem 0 0.9rem;
    background: var(--vt-sidebar-bg);
    border-bottom: 1px solid var(--vt-border);
    min-width: 0;
}

.vt-term-header .vt-logo {
    width: 26px;
    height: 26px;
}

.vt-term-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.vt-term-title strong {
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-term-title small {
    color: var(--vt-faint);
    font-size: 0.72rem;
    font-family: var(--vt-mono);
    white-space: nowrap;
}

.vt-term-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    min-width: 0;
    /* tela estreita: o que nao couber some, nunca fica por baixo dos botoes */
    overflow: hidden;
}

.vt-term-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.vt-term-actions .btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.82rem;
}

.vt-term-body {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

.vt-term-wrap {
    flex: 1;
    min-width: 0;
    background: var(--vt-term-bg);
    padding: 6px 4px 4px 10px;
    position: relative;
}

.vt-term {
    width: 100%;
    height: 100%;
}

.vt-term .xterm {
    height: 100%;
}

.vt-term .xterm,
.vt-term .xterm-viewport,
.vt-term .xterm-scrollable-element {
    background-color: var(--vt-term-bg) !important;
}

.vt-term .xterm-viewport {
    scrollbar-color: var(--vt-border-strong) transparent;
}

.vt-term-wrap.arrastando::after {
    content: "Solte para enviar o arquivo";
    position: absolute;
    inset: 10px;
    border: 2px dashed var(--vt-accent);
    border-radius: 12px;
    background: rgba(2, 10, 16, 0.88);
    color: var(--vt-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    z-index: 5;
    pointer-events: none;
}

/* ---- lado usuario: o assistente com cara de pagina (terminal em cartao + caixa de mensagem) ---- */
.vt-modo-site .vt-term-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.1rem 1rem;
    background: transparent;
}

.vt-modo-site .vt-term {
    flex: 1;
    min-height: 0;
    height: auto;
    background: var(--vt-term-bg);
    border: 1px solid var(--vt-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.vt-modo-site .vt-term .xterm {
    padding: 14px 8px 10px 16px;
}

.vt-boasvindas {
    flex-shrink: 0;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(76, 194, 255, 0.12), rgba(76, 194, 255, 0.03));
    border: 1px solid var(--vt-border-strong);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
}

.vt-boasvindas[hidden] {
    display: none;
}

/* pouco espaco (celular com teclado): o cartao encolhe e rola, a caixa de mensagem nunca e empurrada */
.vt-modo-site .vt-boasvindas {
    flex-shrink: 1;
    min-height: 0;
    overflow-y: auto;
}

.vt-boasvindas strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

/* destaque dentro do texto (ex.: Aplicar alteracao aprovada) continua na mesma linha */
.vt-boasvindas p strong {
    display: inline;
    font-size: inherit;
    margin: 0;
}

.vt-boasvindas-icone {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--vt-accent-soft);
    color: var(--vt-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* solicitacao respondida / sessao liberada para alterar */
.vt-aprovacao {
    background: linear-gradient(135deg, rgba(63, 185, 80, 0.16), rgba(63, 185, 80, 0.04));
    border-color: rgba(63, 185, 80, 0.55);
}

.vt-aprovacao .vt-boasvindas-icone {
    background: rgba(63, 185, 80, 0.16);
    color: #3fb950;
}

.vt-aprovacao.negada {
    background: linear-gradient(135deg, rgba(255, 123, 114, 0.14), rgba(255, 123, 114, 0.03));
    border-color: rgba(255, 123, 114, 0.5);
}

.vt-aprovacao.negada .vt-boasvindas-icone {
    background: rgba(255, 123, 114, 0.14);
    color: #ff7b72;
}

.vt-boasvindas-ex {
    color: var(--vt-muted);
    font-size: 0.82rem;
}

.vt-composer {
    flex-shrink: 0;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 14px;
    padding: 0.55rem 0.6rem 0.6rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.vt-composer:focus-within {
    border-color: var(--vt-border-strong);
}

.vt-composer-atalhos {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.vt-atalho {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--vt-border);
    background: var(--vt-surface-2);
    color: var(--vt-text);
    border-radius: 999px;
    padding: 0.22rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.vt-atalho:hover {
    border-color: var(--vt-accent);
    color: var(--vt-accent);
}

.vt-atalho-select {
    appearance: auto;
    padding-right: 0.5rem;
    max-width: 210px;
}

.vt-atalho-select option {
    background: var(--vt-surface);
    color: var(--vt-text);
}

.vt-atalho[data-atalho-interromper]:hover {
    border-color: #ff7b72;
    color: #ff7b72;
}

.vt-composer-dica {
    margin-left: auto;
    color: var(--vt-faint);
    font-size: 0.72rem;
}

/* dica do Enter: no PC (classe vt-enter-envia, posta pelo terminal.js) Enter envia; celular/tablet quebra a linha */
.vt-composer:not(.vt-enter-envia) .vt-dica-mouse,
.vt-enter-envia .vt-dica-toque {
    display: none;
}

.vt-composer-caixa {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.vt-composer-caixa textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--vt-text);
    font-size: 0.95rem;
    line-height: 1.45;
    padding: 0.45rem 0.35rem;
    /* sempre duas linhas a mostra; cresce com o texto ate o maximo */
    min-height: calc(2 * 1.45em + 0.9rem);
    max-height: 11rem;
    overflow-y: auto;
}

.vt-composer-caixa textarea::placeholder {
    color: var(--vt-faint);
}

.vt-composer-anexo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--vt-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.vt-composer-anexo:hover {
    background: var(--vt-surface-2);
    color: var(--vt-accent);
}

.vt-composer-enviar {
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* iPad/iPhone: campo com fonte menor que 16px faz o Safari dar zoom ao tocar (e desalinha a tela) */
/* any-pointer: iPad com teclado e trackpad pode informar ponteiro fino, mas a tela continua de toque */
@media (pointer: coarse), (any-pointer: coarse) {
    .vt-composer-caixa textarea {
        font-size: 16px;
    }

}

/* Celular: o Chrome desenha a pagina por baixo da barra de gestos e nao informa quanto cobre. Terminal
   menor (folga embaixo) para a caixa de mensagem subir e ficar inteira a mostra */
@media (max-width: 699.98px) {
    .vt-term-page .vt-term-body .vt-term-wrap {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
    }

    /* teclado aberto: o Chrome do celular ainda cobre um pedaco (barra de sugestoes do teclado) sem
       informar; folga menor que a da barra de gestos, mas suficiente para as duas linhas aparecerem */
    .vt-teclado-aberto .vt-term-page .vt-term-body .vt-term-wrap {
        padding-bottom: 56px;
    }

    /* teclado aberto: as boas-vindas saem da frente para a caixa de mensagem caber acima do teclado */
    .vt-teclado-aberto .vt-modo-site [data-boasvindas] {
        display: none;
    }
}

/* iPad: a barra de atalhos do teclado fisico cobre o fim da pagina sem mudar a altura visivel
   informada pelo Safari: folga embaixo (o terminal diminui e a caixa de mensagem cabe) */
@media (pointer: coarse) and (min-width: 700px), (any-pointer: coarse) and (min-width: 700px) {
    html:not(.vt-teclado-aberto) .vt-term-page {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 44px);
    }
}

@media (max-width: 760px) {
    .vt-composer-dica {
        display: none;
    }

    .vt-modo-site .vt-term-wrap {
        padding: 0.6rem;
    }
}

/* area de arrastar/colar do painel de arquivos */
.vt-files-soltar {
    margin: 0.6rem 0.75rem 0.2rem;
    border: 1.5px dashed var(--vt-border-strong);
    border-radius: 12px;
    padding: 0.75rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--vt-muted);
    cursor: pointer;
    outline: none;
}

.vt-files-soltar small {
    color: var(--vt-faint);
    font-size: 0.72rem;
}

.vt-files-soltar:hover,
.vt-files-soltar:focus,
.vt-files.arrastando .vt-files-soltar {
    border-color: var(--vt-accent);
    color: var(--vt-accent);
    background: var(--vt-accent-soft);
}

/* anexos da mensagem (lado usuario), como miniaturas em cima da caixa */
.vt-anexos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.2rem 0.3rem 0.5rem;
}

.vt-anexos[hidden] {
    display: none;
}

.vt-anexo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 240px;
    height: 64px;
    padding: 0 0.65rem 0 0;
    border: 1px solid var(--vt-border);
    border-radius: 12px;
    background: var(--vt-surface-2);
    overflow: hidden;
}

.vt-anexo img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    cursor: zoom-in;
    flex-shrink: 0;
}

.vt-anexo .tipo {
    width: 48px;
    height: 48px;
    margin-left: 8px;
    border-radius: 8px;
    background: var(--vt-accent-soft);
    color: var(--vt-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.vt-anexo .info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.25;
}

.vt-anexo .info .nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-anexo .info small {
    color: var(--vt-faint);
}

.vt-anexo.so-imagem {
    width: 64px;
    padding: 0;
}

.vt-anexo .remover {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(2, 7, 12, 0.85);
    color: var(--vt-text);
    font-size: 0.8rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.vt-anexo .remover:hover {
    background: #ff7b72;
    color: #02070c;
}

.vt-anexo.enviando {
    opacity: 0.55;
}

/* painel de arquivos */
.vt-files {
    width: 340px;
    flex-shrink: 0;
    background: var(--vt-surface);
    border-left: 1px solid var(--vt-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.vt-files[hidden] {
    display: none;
}

.vt-files-head {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--vt-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vt-files-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.6rem 0;
    border-bottom: 1px solid var(--vt-border);
}

.vt-files-tabs button {
    background: none;
    border: none;
    color: var(--vt-muted);
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.vt-files-tabs button.ativo {
    color: var(--vt-text);
    border-bottom-color: var(--vt-accent);
}

.vt-files-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.vt-file {
    border: 1px solid var(--vt-border);
    border-radius: 9px;
    background: var(--vt-surface-2);
    overflow: hidden;
}

.vt-file.novo {
    border-color: var(--vt-accent);
    box-shadow: 0 0 0 2px var(--vt-accent-soft);
}

.vt-file img {
    display: block;
    width: 100%;
    max-height: 210px;
    object-fit: contain;
    background: var(--vt-bg-deep);
    cursor: zoom-in;
}

.vt-file-info {
    padding: 0.45rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.vt-file-info .nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-file-info .meta {
    color: var(--vt-faint);
    white-space: nowrap;
}

.vt-file-info .btn-icone {
    width: 26px;
    height: 26px;
}

.vt-files-foot {
    padding: 0.65rem 0.8rem;
    border-top: 1px solid var(--vt-border);
    font-size: 0.75rem;
    color: var(--vt-faint);
}

/* sobreposicao (sessao encerrada, erro, reconectando) */
.vt-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 7, 12, 0.72);
    backdrop-filter: blur(2px);
    z-index: 10;
}

.vt-overlay[hidden] {
    display: none;
}

.vt-overlay-card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border-strong);
    border-radius: 14px;
    padding: 1.6rem 1.7rem;
    max-width: 460px;
    width: calc(100% - 2rem);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.vt-overlay-card .icone {
    width: 2.2rem;
    height: 2.2rem;
    margin-bottom: 0.6rem;
}

.vt-overlay-card h2 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}

.vt-overlay-card p {
    color: var(--vt-muted);
    margin-bottom: 1rem;
}

.vt-overlay-card .codigo {
    font-family: var(--vt-mono);
    font-size: 0.75rem;
    color: var(--vt-faint);
}

.vt-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--vt-border-strong);
    border-top-color: var(--vt-accent);
    border-radius: 50%;
    animation: vt-girar 0.8s linear infinite;
    margin: 0 auto 0.8rem;
}

@keyframes vt-girar {
    to { transform: rotate(360deg); }
}

/* Painel "Respostas": conversa so-leitura por cima do terminal (o xterm fica montado atras). O JS ajusta o
   "bottom" para o painel terminar logo acima da caixa de mensagem, que continua utilizavel. */
.vt-respostas {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    background: var(--vt-term-bg);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    overflow: hidden;
}

.vt-respostas[hidden] {
    display: none;
}

.vt-conversa-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--vt-border);
    background: var(--vt-surface);
}

.vt-conversa-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    color: var(--vt-muted);
    cursor: pointer;
}

[data-conversa-alternar].ativo {
    border-color: var(--vt-accent);
    color: var(--vt-accent);
}

.vt-conversa-corpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.vt-conversa-item {
    border: 1px solid var(--vt-border);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    background: var(--vt-surface);
}

.vt-conversa-item.prompt {
    background: rgba(76, 194, 255, 0.22);
    border-color: var(--vt-border-strong);
}

.vt-conversa-item.command,
.vt-conversa-item.output {
    background: var(--vt-surface-2);
    border-style: dashed;
}

.vt-conversa-autor {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vt-faint);
    margin-bottom: 0.25rem;
}

.vt-conversa-item.answer .vt-conversa-autor {
    color: var(--vt-claude);
}

.vt-conversa-item.prompt .vt-conversa-autor {
    color: var(--vt-accent);
}

.vt-conversa-texto {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    line-height: 1.45;
}

.vt-conversa-item.command .vt-conversa-texto,
.vt-conversa-item.output .vt-conversa-texto {
    font-family: var(--vt-mono);
    font-size: 0.8rem;
    color: var(--vt-muted);
}

.vt-conversa-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-top: 1px solid var(--vt-border);
    background: var(--vt-surface);
    color: var(--vt-muted);
    font-size: 0.8rem;
}

.vt-conversa-status[hidden] {
    display: none;
}

.vt-conversa-spinner {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: 2px solid var(--vt-border-strong);
    border-top-color: var(--vt-accent);
    border-radius: 50%;
    animation: vt-girar 0.8s linear infinite;
}

/* avisos curtos (canto inferior) */
.vt-toasts {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2000;
    max-width: min(380px, calc(100vw - 2rem));
}

.vt-toast {
    background: var(--vt-surface-2);
    border: 1px solid var(--vt-border-strong);
    border-left: 3px solid var(--vt-accent);
    border-radius: 9px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.vt-toast.erro { border-left-color: var(--vt-danger); }
.vt-toast.aviso { border-left-color: var(--vt-warn); }
.vt-toast.ok { border-left-color: var(--vt-ok); }

/* modo tela cheia: so o terminal */
body.vt-fullscreen .vt-term-header {
    height: 34px;
}

body.vt-fullscreen .vt-term-header .vt-term-title small,
body.vt-fullscreen .vt-term-header .rotulo-btn {
    display: none;
}

/* copiar texto do terminal (conversa ou tela): texto normal, selecionavel tambem no toque */
.vt-copiar .vt-copiar-abas {
    padding: 0 0 0 0.75rem;
    border-bottom: none;
}

.vt-copiar .modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.vt-copiar-bloco {
    border: 1px solid var(--vt-border);
    border-radius: 9px;
    background: var(--vt-term-bg);
}

.vt-copiar-bloco.user {
    background: var(--vt-surface-2);
}

.vt-copiar-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    border-bottom: 1px solid var(--vt-border);
    color: var(--vt-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.vt-copiar-bloco pre {
    margin: 0;
    padding: 0.6rem 0.75rem;
    font-family: var(--vt-mono);
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--vt-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-user-select: text;
    user-select: text;
}

.vt-copiar-nota {
    margin: 1rem 0;
    color: var(--vt-muted);
    text-align: center;
}

.vt-copiar-dica {
    color: var(--vt-muted);
    font-size: 0.8rem;
}

@media (max-width: 575.98px) {
    .vt-copiar-dica {
        display: none;
    }

    .vt-copiar .modal-footer .btn {
        flex: 1;
    }
}

/* visualizador de imagem */
.vt-lightbox .modal-content {
    background: var(--vt-bg-deep);
    border: 1px solid var(--vt-border-strong);
}

.vt-lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    display: block;
    margin: 0 auto;
}

.modal-content {
    background: var(--vt-surface);
    border-color: var(--vt-border-strong);
}

/* -------------------------------------------------------------- saude -- */
.vt-health-row {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--vt-border);
}

.vt-health-row:last-child {
    border-bottom: none;
}

.vt-health-row .nome {
    width: 180px;
    flex-shrink: 0;
    font-weight: 600;
}

.vt-health-row .detalhe {
    flex: 1;
    color: var(--vt-muted);
    font-size: 0.86rem;
    word-break: break-word;
}

.vt-kv {
    display: grid;
    grid-template-columns: minmax(150px, 230px) 1fr;
    gap: 0.45rem 1rem;
    font-size: 0.88rem;
}

.vt-kv dt {
    color: var(--vt-muted);
    font-weight: 500;
}

.vt-kv dd {
    margin: 0;
    word-break: break-word;
}

/* ===================================================== painel do admin (TV) == */
.vt-painel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vt-painel-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.vt-painel-toolbar .espaco {
    flex: 1;
}

.vt-painel-toolbar .btn.ativo {
    border-color: var(--vt-accent);
    color: var(--vt-accent);
}

.vt-painel-status {
    font-size: 0.8rem;
    color: var(--vt-faint);
}

.vt-painel-status.erro {
    color: var(--vt-warn);
}

.vt-segmentado {
    display: inline-flex;
    border: 1px solid var(--vt-border-strong);
    border-radius: 8px;
    overflow: hidden;
}

.vt-segmentado button,
.vt-segmentado a {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--vt-muted);
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.vt-segmentado button + button,
.vt-segmentado a + a {
    border-left: 1px solid var(--vt-border-strong);
}

.vt-segmentado button.ativo,
.vt-segmentado a.ativo {
    background: var(--vt-accent-soft);
    color: var(--vt-accent);
}

/* solicitacoes esperando: calmo (verde) ou ativo (ambar pulsando) */
.vt-alerta {
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    padding: 0.9rem 1.1rem;
}

.vt-alerta-cabeca {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.vt-alerta-icone {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: rgba(63, 185, 80, 0.1);
    color: var(--vt-ok);
}

.vt-alerta-titulo {
    font-size: 1.15rem;
    font-weight: 700;
}

.vt-alerta-sub {
    color: var(--vt-muted);
    font-size: 0.85rem;
}

.vt-alerta-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}

.vt-alerta.ativo {
    border-color: rgba(227, 179, 65, 0.8);
    background: linear-gradient(90deg, rgba(210, 153, 34, 0.18), rgba(210, 153, 34, 0.04) 65%), var(--vt-surface);
    animation: vt-pulso 2s ease-in-out infinite;
}

.vt-alerta.ativo .vt-alerta-icone {
    background: var(--vt-warn);
    color: #111;
    animation: vt-sino 1.8s ease-in-out infinite;
}

.vt-alerta.ativo .vt-alerta-titulo {
    color: #ffd77a;
    font-size: 1.5rem;
}

.vt-alerta.ativo .vt-alerta-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.vt-alerta-lista li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    background: rgba(2, 7, 12, 0.55);
    border: 1px solid rgba(227, 179, 65, 0.35);
}

.vt-alerta-lista .texto {
    flex: 1;
    min-width: 0;
}

.vt-alerta-lista .titulo {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-alerta-lista .meta {
    color: var(--vt-muted);
    font-size: 0.8rem;
}

/* esperando ha 10 min ou mais */
.vt-alerta-lista li.demorando {
    border-color: rgba(248, 81, 73, 0.7);
}

.vt-alerta-lista li.demorando .meta {
    color: #ffa198;
}

.vt-alerta.chegou {
    animation: vt-chegou 0.9s ease-out 3, vt-pulso 2s ease-in-out 2.7s infinite;
}

@keyframes vt-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(227, 179, 65, 0); }
    50% { box-shadow: 0 0 0 6px rgba(227, 179, 65, 0.16), 0 0 30px rgba(227, 179, 65, 0.25); }
}

@keyframes vt-sino {
    0%, 60%, 100% { transform: rotate(0); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-12deg); }
    30% { transform: rotate(8deg); }
    40% { transform: rotate(-6deg); }
}

@keyframes vt-chegou {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.012); }
}

/* numeros */
.vt-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.8rem;
}

.vt-kpi {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius);
    padding: 0.85rem 1rem;
    min-width: 0;
}

.vt-kpi .numero {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.vt-kpi .rotulo {
    color: var(--vt-muted);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

/* uso do plano do Claude */
.vt-medidores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem 1.6rem;
}

.vt-medidor .topo {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.vt-medidor .rotulo {
    font-weight: 600;
}

.vt-medidor .pct {
    margin-left: auto;
    font-size: 1.6rem;
    font-weight: 700;
    color: #7fe7ff;
    font-variant-numeric: tabular-nums;
}

.vt-medidor .trilho {
    height: 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.07);
    border: 1px solid rgba(0, 229, 255, 0.12);
    overflow: hidden;
    margin: 0.35rem 0;
}

.vt-medidor .valor {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #00b8d9, #4cc2ff);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
    transition: width 0.6s ease;
}

.vt-medidor.alto .pct { color: #e3b341; }
.vt-medidor.alto .valor { background: linear-gradient(90deg, #b7791f, #e3b341); box-shadow: 0 0 12px rgba(227, 179, 65, 0.4); }
.vt-medidor.critico .pct { color: #ff7b72; }
.vt-medidor.critico .valor { background: linear-gradient(90deg, #da3633, #ff7b72); box-shadow: 0 0 12px rgba(248, 81, 73, 0.5); }

.vt-medidor .renova {
    color: var(--vt-muted);
    font-size: 0.8rem;
}

.vt-claude-rodape {
    margin-top: 0.9rem;
}

.vt-painel-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vt-painel-cards > .largo {
    grid-column: 1 / -1;
}

/* barras horizontais */
.vt-barras {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.vt-barra {
    display: grid;
    grid-template-columns: minmax(110px, 28%) 1fr 4.8rem;
    align-items: center;
    column-gap: 0.75rem;
}

.vt-barra .nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.vt-barra .trilho {
    height: 14px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.06);
    display: flex;
    overflow: hidden;
}

.vt-barra .valor {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.5), #4cc2ff);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
    transition: width 0.6s ease;
}

.vt-barra.lider .valor {
    background: linear-gradient(90deg, #00e5ff, #4cc2ff);
}

.vt-barra .numero {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vt-barra .detalhe {
    grid-column: 2 / 4;
    font-size: 0.72rem;
    color: var(--vt-faint);
}

.vt-barra .trilho.dividido .valor {
    border-radius: 0;
}

.vt-barra .trilho.dividido .valor.falha {
    background: linear-gradient(90deg, #da3633, #ff7b72);
    box-shadow: none;
}

.vt-barras-vazio {
    color: var(--vt-muted);
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.vt-legenda .ok,
.vt-legenda .falha {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin: 0 0.25rem 0 0.6rem;
    vertical-align: middle;
}

.vt-legenda .ok { background: #4cc2ff; margin-left: 0; }
.vt-legenda .falha { background: #ff7b72; }

/* ultimos eventos */
.vt-eventos li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 1.1rem;
    border-bottom: 1px solid var(--vt-border);
    font-size: 0.85rem;
}

.vt-eventos li:last-child {
    border-bottom: none;
}

.vt-eventos .descricao {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-eventos .ha {
    color: var(--vt-faint);
    white-space: nowrap;
    font-size: 0.78rem;
}

/* modo TV: so o painel, sem menu e barra; cursor some parado */
html.vt-tv .vt-sidebar,
html.vt-tv .vt-topbar,
html.vt-tv .vt-http-warning,
html.vt-tv .vt-backdrop {
    display: none !important;
}

/* tela larga (TV, monitor, tablet deitado): letra maior e tudo numa tela so; a TV nao rola a pagina e os
   cartoes dividem a altura que sobra (3 x 2). No celular fica o layout normal do painel, rolando */
@media (min-width: 992px) {
    html.vt-tv {
        font-size: 18px;
    }

    html.vt-tv .vt-content {
        max-width: none;
        height: 100vh;
        padding: 0.9rem 1.3rem;
    }

    html.vt-tv .vt-painel {
        height: 100%;
        gap: 0.8rem;
    }

    html.vt-tv .vt-painel-cards {
        flex: 1;
        min-height: 0;
        gap: 0.8rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    html.vt-tv .vt-painel-cards > .largo {
        grid-column: auto;
    }

    html.vt-tv .vt-painel-cards > .vt-card {
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    html.vt-tv .vt-painel-cards > .vt-card > :not(.vt-card-header) {
        min-height: 0;
        overflow: hidden;
    }

    html.vt-tv .vt-medidores {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    html.vt-tv .vt-claude-uso .vt-card-body {
        padding: 0.6rem 1rem;
    }

    html.vt-tv .vt-medidor .pct {
        font-size: 1.3rem;
    }

    html.vt-tv .vt-medidor .trilho {
        height: 10px;
        margin: 0.15rem 0;
    }

    html.vt-tv .vt-medidor .renova,
    html.vt-tv .vt-claude-rodape {
        font-size: 0.72rem;
    }

    html.vt-tv .vt-claude-rodape {
        margin-top: 0.4rem;
    }

    html.vt-tv .vt-kpis {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* na TV, ate 3 solicitacoes na lista (o titulo ja diz quantas sao) */
html.vt-tv .vt-alerta-lista li:nth-child(n+4) {
    display: none;
}

html.vt-sem-cursor,
html.vt-sem-cursor * {
    cursor: none !important;
}

@media (max-width: 1399.98px) {
    .vt-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .vt-painel-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .vt-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vt-barra {
        grid-template-columns: minmax(80px, 34%) 1fr 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-alerta.ativo,
    .vt-alerta.ativo .vt-alerta-icone,
    .vt-alerta.chegou {
        animation: none;
    }
}

/* ------------------------------------------------------------ responsivo -- */
@media (max-width: 991.98px) {
    .vt-sidebar {
        position: fixed;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.2s;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    }

    body.vt-menu-aberto .vt-sidebar {
        transform: translateX(0);
    }

    body.vt-menu-aberto .vt-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1025;
    }

    .vt-menu-toggle {
        display: inline-flex;
    }

    .vt-content {
        padding: 1rem;
    }

    .vt-topbar {
        padding: 0 1rem;
    }

    .vt-files {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 8;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .vt-term-actions .rotulo-btn {
        display: none;
    }

    /* tela estreita: nome, situacao e tempo na primeira linha; o detalhe ocupa a largura toda embaixo */
    .vt-health-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "nome status tempo" "detalhe detalhe detalhe";
        gap: 0.35rem 0.6rem;
        align-items: center;
    }

    .vt-health-row .nome {
        grid-area: nome;
        width: auto;
    }

    .vt-health-row > .vt-badge {
        grid-area: status;
    }

    .vt-health-row .detalhe {
        grid-area: detalhe;
        overflow-wrap: anywhere;
    }

    .vt-health-row > .small {
        grid-area: tempo;
    }
}

/* lado usuario em tablet (iPad em pe): painel de Arquivos ao lado, mais estreito, sem cobrir a caixa */
@media (min-width: 700px) and (max-width: 991.98px) {
    .vt-modo-site .vt-files {
        position: static;
        width: 270px;
        box-shadow: none;
    }

    .vt-modo-site .vt-composer-dica {
        display: none;
    }
}

@media (max-width: 640px) {
    .vt-term-status .vt-badge.opcional {
        display: none;
    }

    /* celular: no cabecalho so a bolinha da conexao; o selo do modo some */
    .vt-term-status [data-estado-texto] {
        display: none;
    }

    .vt-modo-site .vt-term-status .vt-badge:not([data-estado]) {
        display: none;
    }

    .vt-term-title small {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vt-term-header {
        gap: 0.5rem;
    }

    /* boas-vindas mais curta: os exemplos tomam a tela do celular */
    .vt-modo-site .vt-boasvindas-exemplos {
        display: none;
    }

    .vt-files {
        width: 100%;
    }

    .vt-kv {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-spinner {
        animation-duration: 2s;
    }

    .vt-sidebar {
        transition: none;
    }
}

/* linguagem do projeto (logo + nome), sempre embaixo do nome do projeto (lista de projetos do admin e
   cartoes do Inicio) */
.vt-linguagem {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    margin-top: 0.25rem;
    padding: 0.1rem 0.55rem 0.1rem 0.3rem;
    border: 1px solid var(--vt-border-strong);
    border-radius: 999px;
    background: var(--vt-accent-soft);
    color: var(--vt-accent);
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
}

/* Cada linha vira um cartao "titulo: valor", sem rolagem lateral. O app.js marca a tabela
   (vt-tabela-cartao), poe o titulo da coluna em data-label e, em QUALQUER largura, liga .vt-cartao-ativo
   quando a tabela nao cabe no container (mede no modo tabela). Assim nenhuma tabela, em nenhuma tela,
   deixa barra de rolagem horizontal, independente do numero de colunas. */
.table-responsive:has(> .vt-cartao-ativo) {
    overflow-x: visible;
}

.vt-cartao-ativo thead {
    display: none;
}

.vt-cartao-ativo,
.vt-cartao-ativo tbody,
.vt-cartao-ativo tr,
.vt-cartao-ativo td {
    display: block;
    width: 100%;
}

.vt-cartao-ativo tbody tr {
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--vt-border);
}

.vt-cartao-ativo tbody tr:last-child {
    border-bottom: 0;
}

.vt-cartao-ativo.table > :not(caption) > * > * {
    border: 0;
    padding: 0.18rem 0.75rem;
}

/* rotulo na 1a coluna; todo o conteudo da celula (texto, selo, detalhe) empilhado na 2a, largura toda */
.vt-cartao-ativo td[data-label] {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.2rem 0.75rem;
    align-items: baseline;
    justify-items: start;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.vt-cartao-ativo td[data-label]::before {
    content: attr(data-label);
    grid-column: 1;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vt-faint);
    font-weight: 600;
}

.vt-cartao-ativo td[data-label] > * {
    grid-column: 2;
    max-width: 100%;
}

/* coluna sem titulo (botoes): alinhada a direita, sem rotulo */
.vt-cartao-ativo td:not([data-label]):not(.vt-celula-inteira) {
    text-align: right;
}

.vt-cartao-ativo td.acoes {
    text-align: right;
    padding-top: 0.4rem;
}

/* texto que nao quebra na tabela (ex.: diretorio) quebra no modo cartao */
.vt-cartao-ativo .text-nowrap {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.vt-linguagem img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* cartao do Inicio: a direita do nome, na altura da primeira linha dele */
.vt-project .vt-linguagem {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* painel: nenhum cartao pode ficar mais largo que a tela (tabela/medidores encolhem dentro dele) */
.vt-painel-cards > .vt-card,
.vt-painel > * {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .vt-medidores {
        grid-template-columns: minmax(0, 1fr);
    }

    .vt-painel-toolbar .btn span {
        display: none;
    }
}

/* painel no celular: o aviso de solicitacoes nao espreme o texto ao lado do botao */
@media (max-width: 575.98px) {
    .vt-alerta-cabeca {
        flex-wrap: wrap;
    }

    .vt-alerta-cabeca > div {
        flex: 1 1 0;
        min-width: 0;
    }

    .vt-alerta-cabeca > .btn {
        flex-basis: 100%;
        margin-left: 0 !important;
    }
}

/* admin: terminal em cima e a caixa de mensagem embaixo (o terminal continua aceitando digitacao) */
.vt-term-page:not(.vt-modo-site) .vt-term-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vt-term-page:not(.vt-modo-site) .vt-term {
    flex: 1;
    min-height: 0;
    height: auto;
}

/* painel de arquivos: os itens nao encolhem (senao a lista nunca passa da altura e nao rola) */
.vt-files-list > * {
    flex-shrink: 0;
}

/* celular: o fim do painel de arquivos tambem fica acima da barra de gestos */
@media (max-width: 699.98px) {
    .vt-term-page .vt-term-body .vt-files {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
    }
}