/* 2011 re-skin: windows, panels and the chat bar.
   NOTE: the <link> order in index.html is misleading - the app's own CSS is
   injected at runtime by JS, i.e. AFTER this file, and much of it already
   carries !important. Plain selectors (and even equal-specificity !important)
   silently lose. Every rule below is therefore anchored on #root so the id
   selector outranks the bundle. */

/* ============================================================
   1. WINDOW SHELL  (navigator, catalogue, inventory, profile...)
   Target: hard 1px dark border, 1px inner white bevel, flat body,
   a HARD offset shadow instead of the soft modern drop-shadow.
   ============================================================ */

#root .nitro-card,
#root .nitro-card-shell:not(.nitro-wired) {
    border: 1px solid #10171d !important;
    border-radius: 3px;
    background: #dfdfd7;
    /* the bundle uses filter: drop-shadow(3px 3px 3px ...) -> blurry & modern */
    filter: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        3px 3px 0 rgba(0, 0, 0, 0.26) !important;
}

/* Flash windows snapped into place, they did not tween. */
#root .draggable-window,
#root .draggable-window > .nitro-card-shell {
    filter: none !important;
    transition: none !important;
}

/* ============================================================
   2. TITLE BAR
   ============================================================ */

#root .nitro-card .nitro-card-header-shell,
#root .nitro-card-shell .nitro-card-header-shell,
#root .nitro-card-header {
    border-radius: 2px 2px 0 0;
    /* hard 50/50 split reads much more "Flash" than a smooth gradient */
    background: linear-gradient(180deg, #4e93b1 0%, #4e93b1 50%, #3c7f9d 50%, #3c7f9d 100%);
    border-bottom: 1px solid #10171d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

#root .nitro-card-header-shell .nitro-card-title,
#root .nitro-card-header .nitro-card-header-text {
    font-family: Volter, "Volter (Goldfish)", monospace;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}

/* 2011 close button: small hard red square, not a soft ringed pill */
#root .nitro-card-header .nitro-card-close-button,
#root .nitro-card-header-shell .nitro-card-close-button,
#root .nitro-card-header .nitro-card-header-close,
#root .nitro-card-header-shell .nitro-card-header-close {
    border: 1px solid #6d1009 !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #e8483b 0%, #e8483b 50%, #c23027 50%, #bd2f27 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

#root .nitro-card-header .nitro-card-close-button:active,
#root .nitro-card-header-shell .nitro-card-close-button:active {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

/* ============================================================
   3. TABS
   ============================================================ */

#root .nitro-card .nitro-card-tabs-shell,
#root .nitro-card-shell .nitro-card-tabs-shell,
#root .nitro-card-tabs {
    background: #cfcfc6;
    border-bottom: 1px solid #10171d;
}

#root .nitro-card-tabs-shell .nitro-card-tab-item,
#root .nitro-card-tabs-shell .nav-item,
#root .nitro-card-tabs .nav-item {
    border: 1px solid #10171d !important;
    border-bottom: 0 !important;
    border-radius: 3px 3px 0 0 !important;
    box-shadow: inset 0 1px 0 #ffffff, inset 1px 0 0 rgba(255, 255, 255, 0.6) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    /* untranslated / long tab labels currently bleed outside the tab box */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#root .nitro-card-tabs-shell .nitro-card-tab-item.active,
#root .nitro-card-tabs-shell .nitro-card-tab-item.nitro-card-tab-item-active,
#root .nitro-card-tabs-shell .nav-item.active {
    background: #dfdfd7 !important;
    box-shadow: inset 0 1px 0 #ffffff !important;
}

/* ============================================================
   4. WINDOW BODY: kill radii / translucency / soft shadows
   ============================================================ */

#root .nitro-card .nitro-card-content-shell,
#root .nitro-card-shell .nitro-card-content-shell,
#root .content-area {
    border-radius: 0 0 2px 2px;
    background: #dfdfd7;
}

/* Nothing inside a 2011 window was frosted or see-through. */
#root .nitro-card-shell,
#root .nitro-card-shell * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Clamp the modern radii the bundle's Tailwind utilities hand out. */
#root .nitro-card-shell :is(button, input, select, textarea),
#root .nitro-card-shell .cursor-pointer.select-none.no-underline,
#root .nitro-card-shell .nitro-card-panel,
#root .nitro-card-shell .nitro-card-row {
    border-radius: 3px !important;
}

/* Chunky bordered form fields */
#root .nitro-card-shell :is(input[type='text'], input[type='number'], input[type='search'], input[type='password'], textarea, select) {
    border: 1px solid #55554f !important;
    background: #ffffff !important;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.14) !important;
    color: #151515 !important;
}

/* Chunky bordered buttons (Button.tsx renders a div, hence the class combo) */
#root .nitro-card-shell .cursor-pointer.select-none.no-underline {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 0 rgba(0, 0, 0, 0.28) !important;
    font-weight: 700 !important;
}

#root .nitro-card-shell .cursor-pointer.select-none.no-underline:active {
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.32) !important;
}

/* Icon-only / transparent-bordered buttons still need the hard outline */
#root .nitro-card-shell .cursor-pointer.select-none.no-underline.border-transparent {
    border-color: #55554f !important;
}

/* Rules and separators: 1px hard line, never a soft gradient.
   .nitro-card-divider is a layout wrapper that draws its rule with border-t,
   so only the border may be touched - never its background. */
#root .nitro-card-shell :is(hr, .nitro-card-divider) {
    border-color: #a3a39a !important;
    box-shadow: none !important;
}

/* 2011 scrollbar: chunky, bordered, square-ish */
#root .nitro-card-shell ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

#root .nitro-card-shell ::-webkit-scrollbar-track {
    background: #c9c9c0;
    border-left: 1px solid #9a9a92;
    border-radius: 0;
}

#root .nitro-card-shell ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f2f2ec 0%, #d3d3ca 50%, #c6c6bc 50%, #bdbdb3 100%);
    border: 1px solid #55554f;
    border-radius: 2px;
}

#root .nitro-card-shell ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffffff 0%, #dedeD5 50%, #d0d0c6 50%, #c6c6bc 100%);
}

/* ============================================================
   5. CHAT INPUT BAR  (bottom of a room)
   The bundle already paints the SWF speech-bubble sprite; the text
   inside was mid-grey and the 2011 "say" button is missing entirely.
   ============================================================ */

#root .swf-chat-input .swf-chat-input-field {
    color: #000000 !important;
    font-weight: 400;
}

#root .swf-chat-input .swf-chat-input-field::placeholder {
    color: #8a8a8a !important;
    font-style: normal;
}

/* Chunky 2011 "say" affordance sat to the right of the bubble.
   Decorative + non-interactive: it labels the Enter key, it is not a
   button (a real one needs a component change). */
#root .nitro-chat-input-container.swf-chat-input::after {
    content: '\21B5  Decir';
    position: absolute;
    left: calc(100% + 26px);
    top: 2px;
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    box-sizing: border-box;
    pointer-events: none;
    white-space: nowrap;
    border: 1px solid #55554f;
    border-radius: 3px;
    background: linear-gradient(180deg, #ffffff 0%, #ececE4 50%, #dcdcd2 50%, #cfcfc4 100%);
    box-shadow:
        inset 0 1px 0 #ffffff,
        0 1px 0 rgba(0, 0, 0, 0.3);
    color: #2b2b2b;
    font: 700 13px UbuntuCondensed, Ubuntu, sans-serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ============================================================
   6. CHAT BUBBLES above avatars
   Already drawn from the original sprites - just make sure nothing
   modern (blur, soft shadow, smoothing) is layered on top.
   ============================================================ */

#root .bubble-container .chat-bubble {
    image-rendering: pixelated;
    filter: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

#root .bubble-container .chat-bubble .username {
    font-weight: 700;
    text-shadow: none;
}

#root .bubble-container .chat-bubble .message {
    text-shadow: none;
}


/* == AGENT3-FONT-SWEEP =======================================================
   Measured, not guessed: a DOM walk over `#root *` collecting every
   visible element with a direct text node whose computed font-family
   was not Volter. Offenders were the hotel-view copy (h2/p/button/
   strong), nitro-card titles, the generic Nitro button, tab labels,
   room-tools, the purse numerics, the friend-bar text and the room
   chat bubbles (span.username / span.message, 14px Ubuntu).

   `document.fonts` reports:  Volter/loaded, Ubuntu/unloaded,
   UbuntuCondensed/unloaded - so every "Ubuntu" run was really being
   painted in the system sans. That is exactly the "new font" the
   owner reported.

   CASCADE: Nitro's own CSS is injected at runtime AFTER these <link>
   tags and carries !important, so an equal-specificity !important
   loses. `html body #root *` scores (0,1,2) and beats `.foo`
   (0,1,0) / `.a .b` (0,2,0) alike, which is why the blanket rule is
   written that way rather than as `#root *`.

   Deliberately family-only: font-size is left untouched so no pinned
   flex geometry shifts. There is no icon webfont in the document
   (document.fonts lists only Volter/Ubuntu/UbuntuCondensed and three
   unused Google display faces), so a blanket family override cannot
   break glyph icons.
   ========================================================= */

html body #root,
html body #root *,
html body #root *::before,
html body #root *::after {
    font-family: Volter, "Volter (Goldfish)", "Volter Goldfish", monospace !important;
    -webkit-font-smoothing: none !important;
    font-smooth: never;
}

/* Emoji and any element that opts out keep their own stack. */
html body #root .allow-system-font,
html body #root .allow-system-font * {
    font-family: Ubuntu, Arial, sans-serif !important;
}


/* == AGENT3-FIT ==============================================
   Volter is a wider bitmap face than the system sans that was
   actually painting when these rules said "Ubuntu" (Ubuntu never
   loads - document.fonts reports it unloaded). So switching to the
   authentic face pushed several labels past their PINNED widths:

     span "Traducir"        56px inside a 50px .nitro-purse__btn
     "Hazte socio"          truncated to "Hazte ..." in a 101px button
     span.friend-bar-text   truncated to "Find ne..." in a 127px chip
     span.room-tool-label   104px + 30px indent inside a 126px row
     .nitro-purse-button__amount  "18.4k" clipped in a 25px box

   The fix is to drop to Volter's NATIVE 9px rather than widen the
   parents: the bundle pins these widths with !important and derives
   the flex row from them, so widening makes an element paint over
   its neighbour instead of reflowing.
   ========================================================= */

html body #root .room-tools-container,
html body #root .room-tools-container *,
html body #root .room-tool-label,
html body #root .room-tools-zoom-row,
html body #root .room-tools-zoom-row * {
    font-size: 9px !important;
    line-height: 13px !important;
    letter-spacing: 0 !important;
}

html body #root .room-tool-label {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* the +/- plates are icon buttons, not type - keep them square and
   inside the 126px zoom row rather than letting the glyph set the box */
html body #root .room-tools-zoom-button {
    font-size: 11px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}