/* ===== Skin barre du bas — pilule / icônes uniformes (::before) / libellés dessous (::after) ===== */

.nitro-toolbar {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100% - 20px);
    bottom: 12px !important;
    height: auto !important;
    min-height: 66px;
    padding: 8px 16px 6px !important;
    border-radius: 22px !important;
    background: rgba(23, 25, 32, 0.94) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(8px);
    box-sizing: border-box;
    align-items: flex-end !important;
    gap: 4px !important;
}
.nitro-toolbar > div, .nitro-toolbar .flex { align-items: flex-end !important; gap: 2px !important; }

/* chaque bouton : colonne, icône en haut, libellé dessous */
.nitro-toolbar .navigation-item,
.nitro-toolbar .navigation-item.item-avatar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding: 5px 8px 4px !important;
    min-width: 56px;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: relative;
    border-radius: 14px;
    transition: background .15s ease, transform .15s ease;
}
.nitro-toolbar .navigation-item:hover { background: rgba(255,255,255,.09); transform: translateY(-2px) !important; }
.nitro-toolbar .navigation-item.active { background: rgba(120,170,255,.22); }

/* ICÔNE = pseudo ::before, boîte 34x30 identique pour toutes */
.nitro-toolbar .navigation-item.icon { background: none !important; }
.nitro-toolbar .navigation-item.icon::before {
    content: '';
    display: block;
    order: 1;
    width: 34px;
    height: 30px;
    background-image: var(--tb-ic);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* icônes natives (servies par vite en dev) */
.nitro-toolbar .icon-habbo    { --tb-ic: url('/src/assets/images/toolbar/icons/habbo.png'); }
.nitro-toolbar .icon-house    { --tb-ic: url('/src/assets/images/toolbar/icons/house.png'); }
.nitro-toolbar .icon-camera   { --tb-ic: url('/src/assets/images/toolbar/icons/camera.png'); }
.nitro-toolbar .icon-game     { --tb-ic: url('/src/assets/images/toolbar/icons/game.png'); }
.nitro-toolbar .icon-modtools { --tb-ic: url('/src/assets/images/toolbar/icons/modtools.png'); }
.nitro-toolbar .icon-message  { --tb-ic: url('/src/assets/images/toolbar/icons/message.png'); }
/* icônes custom (pixel-art fournies) */
.nitro-toolbar .icon-inventory { --tb-ic: url('/skin/icons/inventaire.png'); }
.nitro-toolbar .icon-catalog   { --tb-ic: url('/skin/icons/boutique.png'); }
.nitro-toolbar .icon-rooms     { --tb-ic: url('/skin/icons/apparts.png'); }
.nitro-toolbar .icon-friendall { --tb-ic: url('/skin/icons/amis.png'); }
.nitro-toolbar .icon-phone     { --tb-ic: url('/skin/icons/telephone.png'); }
.nitro-toolbar .icon-rpinv     { --tb-ic: url('/skin/icons/sacoche.png'); }
.nitro-toolbar .icon-skins     { --tb-ic: url('/skin/icons/skins.png'); }

/* LIBELLÉ = pseudo ::after, toujours sous l'icône */
.nitro-toolbar .navigation-item::after {
    order: 2;
    display: block;
    font: 600 10px/1 'Ubuntu', Verdana, sans-serif;
    color: #d6dbe6;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
    pointer-events: none;
}
.nitro-toolbar .icon-habbo::after,
.nitro-toolbar .icon-house::after     { content: "Accueil"; }
.nitro-toolbar .icon-rooms::after     { content: "Apparts"; }
.nitro-toolbar .icon-catalog::after   { content: "Boutique"; }
.nitro-toolbar .icon-inventory::after { content: "Inventaire"; }
.nitro-toolbar .icon-rpinv::after     { content: "Sacoche"; }
.nitro-toolbar .icon-skins::after     { content: "Skins"; }
.nitro-toolbar .icon-phone::after     { content: "Téléphone"; }
.nitro-toolbar .icon-camera::after    { content: "Photo"; }
.nitro-toolbar .icon-modtools::after  { content: "Modo"; }
.nitro-toolbar .icon-friendall::after { content: "Amis"; }
.nitro-toolbar .icon-message::after   { content: "Messages"; }
.nitro-toolbar .icon-game::after      { content: "Jeux"; }

/* avatar "Moi" : cadré tête, même boîte 34x30 */
.nitro-toolbar .navigation-item.item-avatar .avatar-image {
    order: 1;
    position: relative !important;
    width: 34px !important;
    height: 30px !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
    background-repeat: no-repeat !important;
    background-position: -8px -6px !important;
    background-size: 50px auto !important;
    transform: none !important;
}
.nitro-toolbar .navigation-item.item-avatar::after { content: "Moi"; order: 2; }

/* compteurs (pastilles) */
.nitro-toolbar .navigation-item .item-count,
.nitro-toolbar .navigation-item [class*="count"] {
    position: absolute !important;
    top: 0 !important; right: 4px !important;
    z-index: 3;
}

/* champ de chat : thème sombre assorti */
#toolbar-chat-input-container { min-width: 210px; margin: 0 6px; }
.nitro-chat-input-container {
    background: rgba(12,13,17,.9) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 16px !important;
    height: 38px !important;
}
.nitro-chat-input-container:before { display: none !important; }
.nitro-chat-input-container .chat-input,
.nitro-chat-input-container input { color: #e7eaf0 !important; }
.nitro-chat-input-container .chat-input::placeholder { color: #9aa1af !important; }