@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Inter', 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
   MudBlazor define padding-top inline no mud-main-content para
   compensar a AppBar. Com box-sizing:border-box + height:100vh,
   esse padding fica DENTRO dos 100vh → sem espaço vazio embaixo.
═══════════════════════════════════════════════════════════════ */

.mud-layout {
    height: 100vh !important;
    overflow: hidden !important;
}

.mud-main-content {
    height: 100vh !important;
    box-sizing: border-box !important; /* padding-top da AppBar fica dentro dos 100vh */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding-left:   0 !important;
    padding-right:  0 !important;
    padding-bottom: 0 !important;
    /* padding-top é definido inline pelo MudBlazor (altura da AppBar) — não tocar */
}

/* O @Body deve ocupar 100% do espaço restante */
.mud-main-content > * {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.5); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════════ */
.mud-nav-link .mud-icon-root,
.mud-nav-link .mud-nav-link-text { color: #a8b5cc !important; font-size: 13px; }
.mud-nav-link:hover .mud-icon-root,
.mud-nav-link:hover .mud-nav-link-text { color: #fff !important; }
.mud-nav-link.active .mud-icon-root,
.mud-nav-link.active .mud-nav-link-text { color: #fff !important; font-weight: 500; }
.mud-nav-group-title-text {
    font-size: 10px !important; font-weight: 600 !important;
    color: #a8b5cc !important; text-transform: uppercase; letter-spacing: .07em;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTES GLOBAIS
═══════════════════════════════════════════════════════════════ */
.mud-button-root {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: 999px !important;
}
.mud-input-root { font-family: 'Inter', sans-serif !important; font-size: 14px !important; }
.mud-chip-root  {
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important; font-weight: 600 !important;
    border-radius: 999px !important;
}
.mud-typography { font-family: 'Inter', sans-serif !important; }
.mud-card { border-radius: 14px !important; transition: box-shadow .18s, transform .18s !important; }
.mud-card:hover { transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════════
   CHAT
═══════════════════════════════════════════════════════════════ */
.ch-badge {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 700; padding: 2px 7px;
    border-radius: 5px; color: #fff; line-height: 1.4;
}
.ch-wpp     { background: #25D366; }
.ch-oficial { background: #1DA462; }

/* Botão flutuante de scroll-to-bottom */
.scroll-down-fab {
    position: absolute;
    bottom: 74px;   /* acima do input */
    right: 18px;
    z-index: 20;
    animation: fadeIn .18s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

@@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@@keyframes prog-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}