/* HUD view (moment-hud.js). Every rule waits for html.kmh-on, which only a room whose map script speaks the office HUD
   protocol turns on; other rooms are untouched. Values are the brand tokens of theme.css (loaded by the view). */
html.kmh-on {
  --kmh-bg: #03051a; --kmh-card: #0e2236; --kmh-elevated: #182c41; --kmh-hover: #1f3349;
  --kmh-border: #2d3746; --kmh-border-strong: #768395; --kmh-fg: #f0f5fb; --kmh-fg-2: #b4bdcc; --kmh-muted: #98a3b3;
  --kmh-accent: #53ffc8; --kmh-on-accent: #1a1f1e; --kmh-ease: cubic-bezier(.16, 1, .3, 1);
  --kmh-gap: 12px;
  --kmh-dock-tile: rgba(255, 255, 255, .07); --kmh-dock-tile-hover: rgba(255, 255, 255, .13);
  --kmh-chat-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-9l-5 4v-4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/></svg>");
  /* one dark frosted slate for every floating surface (dream-loop rounds 1-2, sampled on the target) */
  --kmh-glass: linear-gradient(180deg, rgba(40, 54, 72, .95), rgba(26, 40, 58, .95) 45%, rgba(18, 32, 52, .96));
  --kmh-glass-strong: var(--kmh-glass);
  --kmh-glass-edge: rgba(190, 210, 230, .28);
  --kmh-glass-depth: inset 0 1px 0 rgba(255, 255, 255, .1), var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32));
  --kmh-tile: rgba(255, 255, 255, .06); --kmh-tile-edge: rgba(255, 255, 255, .14);
  --kmh-mint: #55fac8;
}

/* ------------------------------------------------------------------ the native HUD, docked */
/* WA puts its bar at the bottom on phones by flipping this column; the room does it on every width. */
html.kmh-on .flex.min-h-full.flex-col-reverse:has(.bp-menu) { flex-direction: column !important; }
/* Its messages and zoom controls clear the bar; above a focus chip or a conversation label they clear that too. */
html.kmh-on .popups { margin-bottom: calc(var(--kmh-bar, 96px) + var(--kmh-gap)) !important; }
html.kmh-on:is([data-kmh-moment="mesa"], [data-kmh-moment="conversa"]) .popups {
  margin-bottom: calc(var(--kmh-bar, 96px) + 76px) !important;
}
html.kmh-on [data-testid="actions-explorer"] { bottom: calc(var(--kmh-bar, 96px) + 8px) !important; }
/* WA's area-name notices sit in the top right corner, where the people pill is: they move below it. */
html.kmh-on .flex.flex-col.absolute.end-0:has(> .notification-playing) { top: 72px !important; }
/* In focus at a desk and while a game is open, the bar keeps only the microphone and the camera. The surfaces inside
   the groups set their own visibility, so the rule reaches them too. */
html.kmh-on:not(.kmh-g):is([data-kmh-focus="on"], [data-kmh-moment="jogo"]) :is(
  [data-testid="chat-action"], #action-wrapper, [data-testid="actions-explorer"],
  .bp-menu .main-action div:has(> * > :is([data-testid="emoji-btn"], [data-testid="apps-button"]))),
html.kmh-on:not(.kmh-g):is([data-kmh-focus="on"], [data-kmh-moment="jogo"]) :is(
  [data-testid="chat-action"], #action-wrapper, [data-testid="actions-explorer"],
  .bp-menu .main-action div:has(> * > :is([data-testid="emoji-btn"], [data-testid="apps-button"]))) * {
  visibility: hidden !important;
}

/* ------------------------------------------------------------------ the dock (desktop widths) */
/* The bar's row keeps its full width and centres its two halves (the chat group, then media and actions), drawn as one
   surface: rounded at the outer ends, joined in the middle. The row must not take its content's width: WA writes the
   row's free width into the right half and grows it 22 px per frame then (measured 18/10). Nothing moves in the DOM: moving the groups would make WA's
   visibility checker send buttons to its overflow menu. The groups' own pills turn into parts of the surface. */
@media (min-width: 768px) {
  html.kmh-dock .bp-menu > div > .w-full.flex.justify-between.items-center { justify-content: center; gap: 0; }
  /* WA swaps flex-1 and flex-none on these halves as the width changes, so they are picked by position. */
  html.kmh-dock .bp-menu > div > .w-full.flex.justify-between.items-center > :is(:first-child, :last-child) {
    flex: 0 0 auto !important; align-self: stretch; align-items: center; border: 1px solid var(--kmh-border);
    background: var(--kmh-bg); box-shadow: 0 8px 32px rgba(0, 0, 0, .32); pointer-events: auto;
  }
  html.kmh-dock .bp-menu > div > .w-full.flex.justify-between.items-center > :first-child {
    padding: 4px 4px 4px 8px; border-inline-end: 0; border-radius: 18px 0 0 18px;
  }
  /* WA writes the free width of the row into this half's inline min/max-width; the dock sizes it by its content. */
  html.kmh-dock .bp-menu > div > .w-full.flex.justify-between.items-center > :last-child {
    min-width: 0 !important; max-width: none !important;
    padding: 4px 8px 4px 0; border-inline-start: 0; border-radius: 0 18px 18px 0;
  }
  html.kmh-dock .bp-menu > div > .w-full.flex.justify-between.items-center > :first-child > .w-0.flex-1 { flex: 0 0 0 !important; }
  html.kmh-dock .bp-menu > div > .w-full.flex.justify-between.items-center > :last-child > :last-child { flex: 0 0 auto !important; }
  html.kmh-dock .bp-menu :is(.relative.bg-contrast\/80, [data-testid="map-menu"] > .group, [data-testid="action-user"] > .group) {
    border-color: transparent !important; background: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.kmh-dock .bp-menu :is(.main-action > .flex, #action-wrapper, #action-wrapper > .flex) { gap: 0 !important; margin-inline: 0 !important; }
  html.kmh-dock #action-wrapper .group\/visibilitychecker { margin-inline: 0 !important; }
  html.kmh-dock #action-wrapper [data-testid="map-menu"] { padding-inline: 0 !important; }
  html.kmh-dock .bp-menu :is(.w-full.flex.justify-between.items-center > :last-child > :first-child,
    #action-wrapper > .flex.flex-row:first-child, #action-wrapper > .flex.justify-end:last-child) {
    margin-inline-start: 4px; padding-inline-start: 4px; border-inline-start: 1px solid var(--kmh-border);
  }
  /* The office's buttons as icons. The label stays in the button for screen readers, and the browser's own tooltip
     (title) shows it: a drawn tooltip would be clipped by the actions' overflow-hidden container. */
  html.kmh-dock #action-wrapper button[data-kmh-icon] { width: 44px; padding: 0 !important; font-size: 0 !important; }
  html.kmh-dock #action-wrapper button[data-kmh-icon]::before {
    content: ''; position: absolute; inset: 0; width: 22px; height: 22px; margin: auto; background: currentColor;
    -webkit-mask: var(--kmh-glyph) center / contain no-repeat; mask: var(--kmh-glyph) center / contain no-repeat;
  }
  html.kmh-dock #action-wrapper [data-testid="map-menu"] .font-bold { font-size: 0 !important; }
}
[data-kmh-icon="clap"] { --kmh-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 13V8a1.3 1.3 0 0 1 2.6 0v4M11.6 11.5V6.5a1.3 1.3 0 0 1 2.6 0v5M14.2 11.5V7.5a1.3 1.3 0 0 1 2.6 0V12M16.8 12v-1.5a1.3 1.3 0 0 1 2.6 0v4.5a6 6 0 0 1-6 6h-.8a5.2 5.2 0 0 1-4.4-2.4L6 16.2a1.3 1.3 0 0 1 2.2-1.4L9 16M3 5l1.6 1.6M6.5 2.5l.4 2.1M2.5 9h2.2'/></svg>"); }
[data-kmh-icon="confetti"] { --kmh-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l3.6-11 7.4 7.4zM9.6 13.6l.9.9M14 3.5l.8 2M19.5 5l-2 1.2M20.5 10.5h-2.2M12 7.5l1.2-1.2'/></svg>"); }
[data-kmh-icon="sound"] { --kmh-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.5v5h3.5L12 18V6L7.5 9.5zM15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/></svg>"); }
[data-kmh-icon="sound-off"] { --kmh-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.5v5h3.5L12 18V6L7.5 9.5zM16 9.5l5 5M21 9.5l-5 5'/></svg>"); }
[data-kmh-icon="lock"] { --kmh-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 11h12v10H6zM8.5 11V7.5a3.5 3.5 0 0 1 7 0V11'/></svg>"); }
[data-kmh-icon="unlock"] { --kmh-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 11h12v10H6zM8.5 11V7.5a3.5 3.5 0 0 1 6.8-1.2'/></svg>"); }
[data-kmh-icon="desk"] { --kmh-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10.5h16M5.5 10.5V7.5a1.5 1.5 0 0 1 1.5-1.5h10a1.5 1.5 0 0 1 1.5 1.5v3M3.5 10.5v4h17v-4M5.5 14.5V18M18.5 14.5V18'/></svg>"); }

/* ------------------------------------------------------------------ the source layout (html.kmh-g, desktop widths) */
/* The rail and the people panel on the left, the map in an inset card. The game-inset patch of the local gateway sizes
   the game to the window minus --k-game-inset-x/y (px literals: the patch reads numbers), so the camera centres on
   the card; the view dispatches a resize after the panel opens or closes. */
@media (min-width: 768px) {
  html.kmh-g { --k-game-inset-x: 66px; --k-game-inset-y: 12px; }
  html.kmh-g:is(.kmh-panel-open, .kmh-chat-open) { --k-game-inset-x: 362px; }
  html.kmh-g, html.kmh-g body, html.kmh-g #main-container { background: var(--kmh-bg); }
  html.kmh-g #main-container { box-sizing: border-box; padding: 6px 6px 6px 60px; }
  html.kmh-g #game {
    flex: 1 1 auto; min-width: 0; border-radius: var(--k-radius-surface, 16px); overflow: hidden;
    transition: margin-left 140ms var(--kmh-ease);
  }
  html.kmh-g:is(.kmh-panel-open, .kmh-chat-open) #game {
    margin-left: 296px;
    transition: margin-left 200ms var(--kmh-ease);
  }
  /* WA's own screens (entry, Woka, companion, camera test) take the whole window, without the HUD (moment-hud.js) */
  html.kmh-g.kmh-offstage { --k-game-inset-x: 0px; --k-game-inset-y: 0px; }
  html.kmh-g.kmh-offstage #main-container { padding: 0; }
  html.kmh-g.kmh-offstage #game { margin-left: 0; border-radius: 0; }
  html.kmh-g.kmh-offstage .kmh { display: none; }
  /* WA's conversation in the people panel's place (owner, 18/10/2026: "Deveria aparecer isso aí igual o de pessoas"):
     the same slot, surface and collapse button; "Conversa" on the rail and in the dock opens and closes it. */
  html.kmh-g section#chat {
    position: fixed !important; left: 60px !important; top: 6px !important; bottom: 6px !important; height: auto !important;
    width: 290px !important; min-width: 0 !important; max-width: 290px !important; overflow: hidden;
    border: 1px solid var(--kmh-border); border-radius: var(--k-radius-surface, 16px); background: var(--kmh-card) !important;
  }
  html.kmh-g section#chat > [class*="cursor-col-resize"] { display: none !important; }   /* the slot has one width */
  /* the K's menu, the gear's settings and your card open over the conversation, not under it */
  html.kmh-g.kmh-profile-open section#chat { z-index: 300 !important; }
  html.kmh-g [data-testid="closeChatButton"] svg { display: none; }
  html.kmh-g [data-testid="closeChatButton"]::before {
    content: ''; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--kmh-chat-glyph) center / contain no-repeat; mask: var(--kmh-chat-glyph) center / contain no-repeat;
  }

  /* The dock in the source's order: you, microphone and camera, reaction, conversation, your desk, then WA's tools.
     WA's wrappers turn transparent (display: contents), so the buttons are items of one row the dock orders; nothing
     moves in the DOM. The row is the surface and takes its content's width: its halves no longer have a box, so the
     free width WA writes into the right one feeds nothing (measured steady, 18/10). */
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center > :first-child,
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center > :first-child > *,
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center > :first-child > * > *,
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center > :last-child,
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center > :last-child > :last-child,
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center > :last-child > :last-child > *,
  html.kmh-g #action-wrapper, html.kmh-g #action-wrapper > * { display: contents !important; }
  /* glass (owner, 18/10/2026: "Crie um efeito de glass aqui... Como da Apple"): the map shows through, blurred and
     brightened, under a top highlight and a hairline edge */
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center,
  html.kmh-g .bottom-action-bar {
    border: 1px solid var(--kmh-glass-edge); background: var(--kmh-glass) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: var(--kmh-glass-depth);
  }
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center {
    width: max-content !important; margin-inline: auto; gap: 6px; padding: 6px; border-radius: var(--k-radius-surface, 16px); pointer-events: auto;
  }
  html.kmh-g .bp-menu .main-action .flex.justify-center.relative { gap: 6px !important; margin-inline: 0 !important; }
  html.kmh-g .bp-menu .main-action { min-width: 0 !important; }   /* WA keeps 192 px for its larger buttons */
  /* one 6 px step between every two controls, whichever of WA's groups holds them (owner, 18/10/2026: "Ficou sem
     espaçamento alguns... Tem que padronizar sempre") */
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center :is(.flex, [class*="actions:flex"]) { gap: 6px !important; }
  html.kmh-g .bp-menu .group\/hardware { gap: 6px; }

  /* WA's reactions panel: named reactions with their key, the office's actions, then the speech bubbles */
  html.kmh-g .bottom-action-bar {
    position: relative; gap: 10px; padding: 16px 16px 12px !important; border-radius: var(--k-radius-surface, 16px) !important; width: 420px;
    overflow: visible !important;
  }
  html.kmh-g .bottom-action-bar::after {
    content: ''; position: absolute; left: 58px; bottom: -8px; width: 16px; height: 8px; background: rgba(18, 30, 43, .9);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  html.kmh-g .bottom-action-bar > :first-child { order: 0; gap: 6px; justify-content: space-between; }
  html.kmh-g .bottom-action-bar > :first-child > .py-1 { gap: 6px; padding: 0 !important; }
  html.kmh-g .bottom-action-bar > .h-\[1px\] { order: 1; background: var(--kmh-tile-edge) !important; }
  html.kmh-g .bottom-action-bar > .kmh-react-office { order: 2; }
  html.kmh-g .bottom-action-bar > :has([data-testid="say-bubble-button"]) { order: 3; padding: 0 !important; }
  html.kmh-g .bottom-action-bar .bottom-action-button { border: 0 !important; }
  html.kmh-g .bottom-action-bar button.emoji, html.kmh-g .bottom-action-bar .btn-ghost {
    position: relative; width: 49px; height: 54px; justify-content: center; padding: 0 !important; border-radius: var(--k-radius-menu, 12px) !important;
    border: 1px solid var(--kmh-tile-edge) !important; background: var(--kmh-tile) !important;
  }
  html.kmh-g .bottom-action-bar :is(button.emoji, .btn-ghost):hover { background: rgba(255, 255, 255, .14) !important; }
  html.kmh-g .bottom-action-bar .bottom-action-button.flex { padding-left: 0 !important; }
  html.kmh-g .bottom-action-bar .bottom-action-button.flex::before { display: none !important; }
  html.kmh-g .bottom-action-bar .btn-ghost { width: 63px; min-height: 54px; }
  html.kmh-g .bottom-action-bar .btn-ghost .btn-label > span { flex-direction: column; gap: 4px !important; font: 600 12px/1 Urbanist, sans-serif; color: var(--kmh-fg); }
  html.kmh-g .bottom-action-bar .btn-ghost svg { width: 16px; height: 16px; }
  html.kmh-g .bottom-action-bar button.emoji > div:first-child { font-size: 26px; line-height: 1; }
  html.kmh-g .bottom-action-bar button.emoji > div:last-child {
    position: absolute; right: 7px; bottom: 5px; padding: 0 !important; font: 600 12px/1 Urbanist, sans-serif; color: var(--kmh-fg) !important;
  }
  html.kmh-g .bottom-action-bar :is([data-testid="say-bubble-button"], [data-testid="think-bubble-button"]) {
    gap: 8px; height: 32px; padding: 0 !important; border-radius: var(--k-radius-menu, 12px) !important; border: 1px solid var(--kmh-tile-edge);
    background: var(--kmh-tile) !important; font: 600 14px/1 Urbanist, sans-serif !important; color: var(--kmh-fg) !important;
  }
  html.kmh-g .bottom-action-bar :is([data-testid="say-bubble-button"], [data-testid="think-bubble-button"])::before {
    content: ''; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--kmh-bubble) center / contain no-repeat; mask: var(--kmh-bubble) center / contain no-repeat;
  }
  html.kmh-g .bottom-action-bar [data-testid="say-bubble-button"] { --kmh-bubble: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-9l-5 4v-4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/></svg>"); }
  html.kmh-g .bottom-action-bar [data-testid="think-bubble-button"] { --kmh-bubble: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 15a4 4 0 0 1-.6-7.95A5.5 5.5 0 0 1 17 7.5a3.75 3.75 0 0 1 .5 7.5zM8 19.5a1.25 1.25 0 1 0 0-.01M4.5 21.5a.75.75 0 1 0 0-.01'/></svg>"); }
  html.kmh-g .bottom-action-bar :is([data-testid="say-bubble-button"], [data-testid="think-bubble-button"]):hover {
    background: rgba(255, 255, 255, .16) !important;
  }
  html.kmh-g [data-testid="action-user"] { order: -1; }
  html.kmh-g .bp-menu .main-action .flex.justify-center.relative > div:has([data-testid="emoji-btn"]) { order: 1; }
  html.kmh-g [data-testid="chat-action"] { order: 1; }
  html.kmh-g #action-wrapper .group\/visibilitychecker { order: 2; }
  html.kmh-g .bp-menu :is(div:has(> [data-testid="user-list-button"]), div:has(> [data-testid="apps-button"])),
  /* WA's tools ("Mapa") leave the dock (owner, 18/10/2026: "Pode tirar esse botão do docker"): "Construir" on the right
     lists them, pressing WA's own items, so the menu stays in the DOM, out of sight. */
  /* The office's own buttons are pressed from the reactions panel and your desk from the right column, so none of
     WA's action groups stays in the dock (they stay in the DOM, out of sight). */
  html.kmh-g #action-wrapper .group\/visibilitychecker { display: none !important; }
  /* the separator after you; 24 px tall, centred */
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center > :last-child > :first-child { position: relative; padding-inline-start: 8px; }
  html.kmh-g .bp-menu > div > .w-full.flex.justify-between.items-center > :last-child > :first-child::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 28px; translate: 0 -50%; background: rgba(255, 255, 255, .12);
  }
  /* One size for every dock control: 36 px squares (the rail's), 18 px glyphs drawn at the same 1.8 stroke; microphone
     and camera keep a wider key for their status dot. WA's wrappers lose their own padding. */
  html.kmh-g .bp-menu .relative.bg-contrast\/80 { padding: 0 !important; }
  html.kmh-g .bp-menu .relative.bg-contrast\/80 > button {
    width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: var(--k-radius-menu, 12px) !important;
  }
  /* Every dock key in one system (owner, 18/10/2026: "padronizar a cor, hover, ativo, etc..."), on WA's own states:
     - rest: the quiet tile, white glyph; hover: the lighter tile;
     - on (WA's active and live: the reactions or the conversation open, following, a raised hand, sharing): a mint tint
       and a mint glyph, a little stronger on hover;
     - forbidden (WA's danger, such as a locked conversation): a red tint and a red glyph; the microphone and the camera
       keep the source's red stroke on the quiet tile instead;
     - disabled: half strength.
     The glyph takes the key's colour on the <svg>: the icons' invisible 24 px frame (a path with stroke="none") keeps
     its own attribute, which a rule on every path overrode, drawing a square that looked like a focus ring. */
  /* (two rules, not one :is(): an id inside :is() would lift the rest state above the "on" one) */
  html.kmh-g .bp-menu .relative.bg-contrast\/80 > button { background-color: var(--kmh-dock-tile) !important; color: var(--kmh-fg) !important; }
  html.kmh-g .bp-menu .relative.bg-contrast\/80 > button:hover { background-color: var(--kmh-dock-tile-hover) !important; }
  html.kmh-g #action-wrapper button[data-kmh-icon] { background-color: var(--kmh-dock-tile) !important; color: var(--kmh-fg) !important; }
  html.kmh-g #action-wrapper button[data-kmh-icon]:hover { background-color: var(--kmh-dock-tile-hover) !important; }
  html.kmh-g :is(.bp-menu .relative.bg-contrast\/80 > button:is(.bg-secondary, .bg-success), [data-testid="closeChatButton"]) {
    background-color: rgba(83, 255, 200, .16) !important; color: var(--kmh-accent) !important;
  }
  html.kmh-g :is(.bp-menu .relative.bg-contrast\/80 > button:is(.bg-secondary, .bg-success), [data-testid="closeChatButton"]):hover {
    background-color: rgba(83, 255, 200, .24) !important;
  }
  html.kmh-g .bp-menu .relative.bg-contrast\/80 > button.bg-danger:not(:is([data-testid="microphone-button"], [data-testid="camera-button"])) {
    background-color: rgba(239, 68, 68, .16) !important; color: #ff8a8a !important;
  }
  html.kmh-g .bp-menu .relative.bg-contrast\/80 > button.bg-danger:not(:is([data-testid="microphone-button"], [data-testid="camera-button"])):hover {
    background-color: rgba(239, 68, 68, .24) !important;
  }
  html.kmh-g .bp-menu .relative.bg-contrast\/80 > button:is(.opacity-50, .opacity-70) { opacity: .45 !important; }
  html.kmh-g .bp-menu .relative.bg-contrast\/80 > button svg { stroke: currentColor !important; }
  html.kmh-g .bp-menu svg :is(path, line, circle, rect, polyline, ellipse) { fill: none !important; }
  /* microphone and camera off: the source's red stroke across the glyph, on the same quiet tile */
  html.kmh-g :is([data-testid="microphone-button"], [data-testid="camera-button"]) svg path[d^="M3 3l18 18"] { stroke: #ef4444 !important; }
  /* WA's media-settings caret hangs under the microphone and shows on hover only; here it is the right end of a split
     key, as in the source, and stays while WA offers it (owner, 18/10/2026: "quando tem a setinha, ela poderia se
     manter"): the key widens and the caret takes its last 20 px */
  html.kmh-g .group\/hardware:has(> .absolute [data-testid="media-settings-toggle-button"]) > .relative:first-child > [data-testid="microphone-button"] {
    width: 58px !important; padding-right: 20px !important;
  }
  html.kmh-g .group\/hardware > .absolute:has([data-testid="media-settings-toggle-button"]) {
    display: block !important; opacity: 1 !important;
    left: 38px !important; top: 0 !important; bottom: auto !important; width: 20px !important; height: 36px !important; translate: none;
    border-radius: 0 var(--k-radius-menu, 12px) var(--k-radius-menu, 12px) 0 !important; background: transparent !important; backdrop-filter: none !important;
  }
  html.kmh-g [data-testid="media-settings-toggle-button"] {
    position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important;
    border-radius: inherit !important; box-shadow: inset 1px 0 rgba(255, 255, 255, .14);
  }
  html.kmh-g [data-testid="media-settings-toggle-button"]:hover { background: var(--kmh-dock-tile-hover) !important; }
  /* WA's chevron points up and WA turns it down while closed (its bar is at the top, the panel hangs below): here the
     panel opens above the dock, so the chevron points up while closed and down while open */
  html.kmh-g [data-testid="media-settings-toggle-button"] svg { width: 12px !important; height: 12px !important; rotate: 180deg; }
  html.kmh-g [data-testid="media-settings-toggle-button"] svg.rotate-180 { rotate: 0deg !important; }
  html.kmh-g [data-testid="media-settings-toggle-button"] svg path { stroke-width: 2.4 !important; }
  /* WA's device panel (camera, microphone, speaker, camera background) hangs 80 px below its group, under the screen
     once the group sits in the bottom dock (measured 18/10/2026: its rows at y 852-1238 in an 820 px viewport, so the
     caret looked dead). It opens above the dock, inside the viewport, on the HUD's glass. */
  html.kmh-g [data-testid="media-settings-panel"] {
    top: auto !important; bottom: calc(100% + 12px) !important; width: 288px !important; padding: 8px !important;
    border: 1px solid var(--kmh-glass-edge); border-radius: var(--k-radius-surface, 16px) !important;
    background: var(--kmh-glass); box-shadow: var(--kmh-glass-depth);
    -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  }
  html.kmh-g [data-testid="media-settings-panel"]::before, html.kmh-g [data-testid="media-settings-panel"]::after { display: none !important; }
  html.kmh-g [data-testid="media-settings-panel"] > div {
    max-height: calc(100dvh - var(--kmh-bar, 96px) - 40px) !important; overflow-y: auto; overscroll-behavior: contain;
  }
  html.kmh-g [data-testid="emoji-btn"] { width: 36px !important; height: 36px !important; border-radius: var(--k-radius-menu, 12px) !important; }
  /* every dock glyph at 18 px, including the buttons WA adds in a conversation (share the screen, picture in picture,
     follow, lock, raise a hand), which come at 24 (owner, 18/10/2026: "um monte de ícones... não estão padronizados") */
  html.kmh-g .bp-menu .relative.bg-contrast\/80 > button svg,
  html.kmh-g [data-testid="action-user"] .profile-menu-burger-icon svg { width: 18px !important; height: 18px !important; }
  html.kmh-g [data-testid="action-user"] .profile-menu-burger-icon {
    width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: var(--k-radius-menu, 12px);
  }
  html.kmh-g :is(.bp-menu, [data-testid="actions-explorer"]) svg :is(path, line, circle, rect, polyline) { stroke-width: 1.8; }
  html.kmh-g .bp-menu .relative.bg-contrast\/80 { background: transparent !important; backdrop-filter: none !important; }
  html.kmh-g #action-wrapper button[data-kmh-icon] { width: 36px; height: 36px; padding: 0 !important; font-size: 0 !important; border-radius: var(--k-radius-menu, 12px); }
  html.kmh-g #action-wrapper button[data-kmh-icon]::before {
    content: ''; position: absolute; inset: 0; width: 18px; height: 18px; margin: auto; background: currentColor;
    -webkit-mask: var(--kmh-glyph) center / contain no-repeat; mask: var(--kmh-glyph) center / contain no-repeat;
  }
  html.kmh-g #action-wrapper button[aria-disabled="true"] { opacity: .45; cursor: default; }
  /* you: the avatar only, ringed in your status colour */
  /* WA swaps the avatar for a menu glyph when its bar's container query decides the bar is narrow (in a conversation,
     with five more buttons); the dock always shows who you are */
  html.kmh-g [data-testid="action-user"] .profile-menu-full { display: flex !important; }
  html.kmh-g [data-testid="action-user"] .profile-menu-burger-icon { display: none !important; }
  html.kmh-g [data-testid="action-user"] .profile-menu-full > :not(:first-child) { display: none !important; }
  /* you: a perfect circle with your woka inside (owner, 18/10/2026: "uma bolinha perfeita com o boneco dentro") */
  html.kmh-g [data-testid="action-user"] .profile-menu-full { position: relative; width: 36px; height: 36px; flex: none; }
  html.kmh-g [data-testid="action-user"] .profile-menu-full > :first-child {
    flex: none; width: 36px !important; height: 36px !important; min-width: 36px; aspect-ratio: 1; padding: 0 !important; border: 0;
    border-radius: 50% !important; background: var(--kmh-elevated); overflow: hidden; display: grid !important; place-items: center;
  }
  html.kmh-g [data-testid="action-user"] .profile-menu-full > :first-child img { width: 28px !important; height: 28px !important; object-fit: contain; }
  html.kmh-g [data-testid="action-user"] .profile-menu-full::after {
    content: ''; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 2px solid #142334; border-radius: 50%;
    background: var(--kmh-mint); pointer-events: none;
  }
  html.kmh-g[data-kmh-focus="on"] [data-testid="action-user"] .profile-menu-full::after { background: #8fa7ff; }
  html.kmh-g [data-testid="action-user"] > .group {
    height: auto !important; padding: 0 !important; background: transparent !important; border-color: transparent !important;
  }

  html.kmh-g :is(.kmh-place, .kmh-pill) { display: none !important; }
  html.kmh-g :is(.kmh-focus, .kmh-call) { left: calc(50% + 30px); transition: left 200ms var(--kmh-ease); }
  html.kmh-g:is(.kmh-panel-open, .kmh-chat-open) :is(.kmh-focus, .kmh-call) { left: calc(50% + 178px); }
  html.kmh-g .kmh-map { left: 362px; right: auto; top: 12px; transform-origin: top left; }
  html.kmh-g:not(.kmh-panel-open, .kmh-chat-open) .kmh-map { left: 72px; }
  html.kmh-g .kmh-map :is(.kmh-people, .kmh-empty, .kmh-notice) { display: none !important; }
  html.kmh-g [data-testid="actions-explorer"] {
    /* As in the source (owner, 18/10/2026: "deixar bem menor... padronizar os ícones"): one 30 px column 8 px inside the
       card's corner. Our "⋯" (30 px) closes WA's capsule at the bottom, so the view measures WA's column and shifts it
       to end 44 px above the window's bottom, whatever box WA positions it in. */
    right: 14px !important; translate: 0 var(--kmh-nav-shift, 0px); transition: none !important; width: 30px !important; padding: 0 !important;
    border-radius: var(--k-radius-inner, 8px) var(--k-radius-inner, 8px) 0 0 !important; overflow: hidden;
    border: 1px solid var(--kmh-glass-edge); border-bottom: 0; background: var(--kmh-glass) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: var(--kmh-glass-depth);
  }
  /* 16 px glyphs at the dock's 1.35 px stroke (2 in a 24 drawing); WA's plus and minus are open strokes, drawn at 18 px
     with the same stroke on screen so they look as large as the map glyph under them */
  html.kmh-g [data-testid="actions-explorer"] svg { width: 16px !important; height: 16px !important; }
  html.kmh-g [data-testid="actions-explorer"] svg :is(path, line, circle, rect, polyline) { stroke-width: 2 !important; }
  html.kmh-g [data-testid="actions-explorer"] [data-khud-zoom] svg { width: 18px !important; height: 18px !important; }
  html.kmh-g [data-testid="actions-explorer"] [data-khud-zoom] svg :is(path, line) { stroke-width: 1.8 !important; }
  html.kmh-g [data-testid="actions-explorer"] .flex-col { gap: 0 !important; }
  html.kmh-g [data-testid="actions-explorer"] .group { width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0; border-radius: 0; }
  html.kmh-g [data-testid="actions-explorer"] > .flex-col > .group { border-top: 1px solid rgba(255, 255, 255, .1); }   /* zoom | map */
  html.kmh-g [data-testid="actions-explorer"] .group:hover { background: rgba(255, 255, 255, .1); }
  /* WA's floating area name: the panel says where you are */
  html.kmh-g .flex.flex-col.absolute.end-0:has(> .notification-playing) { display: none !important; }
  /* Simplificado: the live map gives way to the plan */
  html.kmh-g.kmh-simple-on #game canvas { visibility: hidden; }
  /* the resource saver: our motion stops */
  html.kmh-g.kmh-saver .kmh *, html.kmh-g.kmh-saver .kmh *::before { animation: none !important; transition: none !important; }
}

/* the rail */
.kmh-rail {
  left: 0; top: 0; bottom: 0; width: 60px; display: none; flex-direction: column; align-items: center; gap: 12px;
  padding: 12px 0;
}
.kmh-logo {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; padding: 0; border: 0; border-radius: var(--k-radius-menu, 12px);
  background: transparent; color: #fff; cursor: pointer;
}
.kmh-logo:hover, .kmh-logo[aria-expanded="true"] { background: var(--kmh-hover); }
.kmh-logo svg { width: 24px; height: 24px; }
/* the whole menu (the K), as konclui-platform's sidebar draws its navigation (owner, 18/10/2026: "Pegue os estilos de
   sidebar e cores do konclui-platform"): its rail gradient with a 6% hairline, the white logotype, uppercase section
   labels, rows in white at 65% that turn white on a 6% hover and mint, with a glow, on a 10% fill when chosen. The muted
   label is lifted from the platform's 40% to 55% to pass AA on the gradient. */
.kmh {
  --kmh-rail-bg: linear-gradient(-160deg, rgb(3, 4, 24) 15%, rgb(1, 1, 12) 60%, rgb(5, 14, 35) 100%);
  --kmh-nav-fg: rgba(255, 255, 255, .65); --kmh-nav-hover: rgba(255, 255, 255, .06); --kmh-nav-active: rgba(255, 255, 255, .10);
  --kmh-out-expo: cubic-bezier(.16, 1, .3, 1);
}
.kmh-menu {
  left: 66px; top: 6px; bottom: 6px; width: 248px; display: flex; flex-direction: column; gap: 4px; padding: 0 8px 12px; overflow: auto;
  border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--k-radius-xl, 12px); background: var(--kmh-rail-bg);
  box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32));
  opacity: 1; transform: translateX(0);
  transition: transform 200ms var(--kmh-ease), opacity 200ms var(--kmh-ease), display 200ms allow-discrete;
}
.kmh-menu:not(.kmh-settings)[hidden] {
  display: none !important; opacity: 0 !important; transform: translateX(-12px) !important;
}
@starting-style {
  .kmh-menu:not(.kmh-settings):not([hidden]) {
    opacity: 0; transform: translateX(-12px);
  }
}
.kmh-menu-head { display: flex; align-items: center; height: 64px; flex: none; padding: 8px 12px 0; }
.kmh-menu-wordmark { display: block; height: 28px; color: #fff; }
.kmh-menu-wordmark svg { display: block; height: 100%; width: auto; }
.kmh-menu-group { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.kmh-menu-group h3 {
  margin: 0 0 4px; padding: 0 12px; font: 500 12px/1.5 Urbanist, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.kmh-menu-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: var(--k-radius-inner, 8px);
  background: transparent; font: 500 13px/1.5 Urbanist, sans-serif; text-align: left; color: var(--kmh-nav-fg);
  transition: color 200ms var(--kmh-out-expo), background-color 200ms var(--kmh-out-expo);
  animation: kmh-nav-in .24s var(--kmh-out-expo) backwards; animation-delay: calc(min(var(--i, 0), 12) * 35ms);   /* under 300 ms each */
}
.kmh-menu-item:hover { background: var(--kmh-nav-hover); color: #fff; }
.kmh-menu-item[aria-checked="true"] { background: var(--kmh-nav-active); color: var(--kmh-accent); }
.kmh-menu-item[aria-checked="true"] :is(.kmh-ic, i) { filter: drop-shadow(0 0 6px rgba(83, 255, 200, .5)); }
.kmh-menu-item .kmh-ic { width: 18px; height: 18px; stroke-width: 1.5; }
.kmh-menu-item i { flex: none; width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; }
/* The gear's settings, as the source's (owner, 19/10/2026: "ele abre esse modal"): a dialog over the dimmed office,
   the sections on the left in the K menu's colours, one section on the right; Esc, the X or a press outside close it. */
.kmh-menu.kmh-settings {
  inset: 0; width: auto; display: grid; place-items: center; padding: 24px; overflow: visible; border: 0; border-radius: 0;
  background: rgba(3, 5, 26, .62); box-shadow: none;   /* dimmed, never blurred (the theme bans DOM blur) */
}
.kmh-menu.kmh-settings[hidden] { display: none; }
.kmh-set-box {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); width: min(880px, 100%); height: min(600px, 100%); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--k-radius-surface, 16px); background: var(--kmh-card);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5); animation: kmh-set-in .22s var(--kmh-out-expo) both;
}
@keyframes kmh-set-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.kmh-set-nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; overflow: auto; background: var(--kmh-rail-bg); border-right: 1px solid rgba(255, 255, 255, .06); }
.kmh-set-nav h3 { margin: 12px 0 6px; padding: 0 10px; font: 500 12px/1.5 Urbanist, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.kmh-set-nav h3:first-child { margin-top: 0; }
.kmh-set-tab {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: var(--k-radius-inner, 8px); background: transparent;
  font: 500 14px/1.3 Urbanist, sans-serif !important; text-align: left; color: var(--kmh-nav-fg) !important;
}
.kmh-set-tab:hover { background: var(--kmh-nav-hover); color: #fff !important; }
.kmh-set-tab[aria-current="true"] { background: var(--kmh-nav-active); color: var(--kmh-accent) !important; }
.kmh-set-tab .kmh-ic { width: 18px; height: 18px; stroke-width: 1.6; }
.kmh-set-body { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kmh-set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--kmh-border); }
.kmh-set-head h2 { margin: 0; font: 700 20px/1.25 Urbanist, sans-serif; color: var(--kmh-fg); }
.kmh-set-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--k-radius-inner, 8px); background: transparent; color: var(--kmh-fg-2); }
.kmh-set-close:hover { background: var(--kmh-hover); color: var(--kmh-fg); }
.kmh-set-pane { display: flex; flex-direction: column; gap: 8px; padding: 20px; overflow: auto; }
.kmh-set-pane[hidden] { display: none; }
.kmh-set-lead { margin: 0 0 8px; font: 500 14px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-set-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-menu, 12px);
  background: var(--kmh-elevated); text-align: left; color: var(--kmh-fg) !important;
}
.kmh-set-row:hover { background: var(--kmh-hover); }
.kmh-set-row > .kmh-ic:first-child { width: 20px; height: 20px; color: var(--kmh-accent); }
.kmh-set-row > .kmh-ic:last-child { width: 16px; height: 16px; rotate: -90deg; color: var(--kmh-muted); }
.kmh-set-row > span, .kmh-set-switch > span { flex: 1; min-width: 0; }
.kmh-set-row b, .kmh-set-switch b, .kmh-set-mode b { display: block; font: 600 14px/1.3 Urbanist, sans-serif; }
.kmh-set-row small, .kmh-set-switch small, .kmh-set-mode small { display: block; margin-top: 2px; font: 500 13px/1.4 Urbanist, sans-serif; color: var(--kmh-fg-2); }
/* a switch, mint when on */
.kmh-set-switch { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-menu, 12px); background: var(--kmh-elevated); text-align: left; }
.kmh-set-switch > i { position: relative; flex: none; width: 40px; height: 24px; border-radius: 9999px; background: var(--kmh-border-strong); transition: background-color 160ms var(--kmh-out-expo); }
.kmh-set-switch > i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: translate 160ms var(--kmh-out-expo); }
.kmh-set-switch[aria-checked="true"] > i { background: var(--kmh-accent); }
.kmh-set-switch[aria-checked="true"] > i::after { translate: 16px 0; }
/* the mini mode, drawn: a document with the small call window over it */
.kmh-set-art { position: relative; height: 170px; margin-bottom: 8px; overflow: hidden; border-radius: var(--k-radius-menu, 12px); background: linear-gradient(160deg, #1b2c46, #0f1c30); }
.kmh-art-doc { position: absolute; left: 24px; right: 120px; top: 22px; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 10px 10px 0 0; background: #f4f6fa; }
.kmh-art-doc i { height: 8px; border-radius: 4px; background: #d6dbe5; } .kmh-art-doc i:first-child { width: 45%; height: 12px; background: #b9c1d0; } .kmh-art-doc i:nth-child(3) { width: 80%; }
.kmh-art-pip { position: absolute; right: 22px; top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 150px; padding: 6px; border-radius: 10px; background: #0b1324; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.kmh-art-pip i { aspect-ratio: 4 / 3; border-radius: 6px; background: linear-gradient(160deg, #2c5d6b, #1e454d); }
.kmh-art-pip i:nth-child(2) { background: linear-gradient(160deg, #5b4a7a, #142160); }
.kmh-art-pip b { grid-column: 1 / -1; justify-self: center; width: 60px; height: 10px; margin-top: 2px; border-radius: 9999px; background: rgba(255, 255, 255, .25); }
/* the view modes, as cards with the "⋯" menu's thumbnails */
.kmh-set-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kmh-set-mode { display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-menu, 12px); background: var(--kmh-elevated); text-align: left; color: var(--kmh-fg) !important; }
.kmh-set-mode:hover { background: var(--kmh-hover); }
.kmh-set-mode[aria-checked="true"] { border-color: var(--kmh-accent); box-shadow: inset 0 0 0 1px var(--kmh-accent); }
.kmh-set-mode .kmh-thumb { width: 100%; height: 64px; }
/* the settings' lists (owner, 20/10/2026: "Termine de preencher todas as opções"): a heading, then one card of rows, each
   a name with its hint on the left and its control on the right, hairlines between, as the source's */
.kmh-set-section { margin: 14px 0 2px; padding: 0 4px; font: 600 12px/1.5 Urbanist, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--kmh-fg-2); }
.kmh-set-section:first-child { margin-top: 0; }
.kmh-set-group { display: flex; flex-direction: column; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-menu, 12px); background: var(--kmh-elevated); }
.kmh-set-item { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 10px 14px; }
.kmh-set-item[hidden] { display: none; }
.kmh-set-item:not([hidden]) ~ .kmh-set-item:not([hidden]) { border-top: 1px solid var(--kmh-border); }
.kmh-set-item > span { flex: 1; min-width: 0; }
.kmh-set-item b { display: block; font: 600 14px/1.3 Urbanist, sans-serif; color: var(--kmh-fg); }
.kmh-set-item small { display: block; margin-top: 2px; font: 500 13px/1.4 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-set-stack { flex-wrap: wrap; }
.kmh-set-stack > span { flex-basis: 220px; }
.kmh-set-note { margin: 0; font: 500 13px/1.4 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-set-note[hidden], .kmh-set-row[hidden], .kmh-set-tab[hidden] { display: none; }
.kmh-set-button {
  flex: none; padding: 8px 16px; border: 0; border-radius: 10px; background: var(--kmh-accent);
  font: 700 13px/1.3 Urbanist, sans-serif !important; color: #1a1f1e !important;
}
.kmh-set-button:hover { filter: brightness(1.06); }
/* the name, edited in place */
.kmh-name-field { display: flex; gap: 8px; flex: 1 1 260px; }
.kmh-name-field input {
  flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--kmh-border-strong); border-radius: 10px; background: rgba(3, 5, 26, .45);
  font: 600 14px/1.3 Urbanist, sans-serif; color: var(--kmh-fg);
}
.kmh-name-error { flex-basis: 100%; color: #ff8a8a !important; }
.kmh-name-error:empty { display: none !important; }
/* the camera and the microphone, live: WA's own stream */
.kmh-av-test { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; align-items: stretch; }
.kmh-av-test[hidden] { display: none; }
.kmh-av-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-menu, 12px); background: #050817; }
.kmh-av-video video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.kmh-av-off { position: absolute; inset: 0; display: none; place-items: center; font: 600 13px/1.4 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-av-camera-off .kmh-av-off { display: grid; }
.kmh-av-camera-off video { visibility: hidden; }
.kmh-av-mic { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-menu, 12px); background: var(--kmh-elevated); }
.kmh-av-mic span { font: 600 13px/1.3 Urbanist, sans-serif; color: var(--kmh-fg); }
.kmh-meter { height: 8px; overflow: hidden; border-radius: 9999px; background: var(--kmh-border-strong); }
.kmh-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--kmh-accent); transition: width 80ms linear; }
@media (max-width: 720px) { .kmh-av-test { grid-template-columns: 1fr; } }
/* a switch, the same as the mini mode's */
.kmh-toggle { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 9999px; background: var(--kmh-border-strong); transition: background-color 160ms var(--kmh-out-expo); }
.kmh-toggle > i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: translate 160ms var(--kmh-out-expo); }
.kmh-toggle[aria-checked="true"] { background: var(--kmh-accent); }
.kmh-toggle[aria-checked="true"] > i { translate: 16px 0; }
/* a choice of a few: a segmented control */
.kmh-seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(3, 5, 26, .45); }
.kmh-seg button { padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; font: 600 13px/1.3 Urbanist, sans-serif !important; color: var(--kmh-fg-2) !important; white-space: nowrap; }
.kmh-seg button:hover { color: var(--kmh-fg) !important; }
.kmh-seg button[aria-checked="true"] { background: var(--kmh-hover); color: var(--kmh-accent) !important; box-shadow: inset 0 0 0 1px rgba(83, 255, 200, .25); }
.kmh-select {
  flex: none; max-width: 230px; padding: 8px 32px 8px 12px; border: 1px solid var(--kmh-border-strong); border-radius: 10px; appearance: none;
  background: rgba(3, 5, 26, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8c4d6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 10px center / 14px no-repeat;
  font: 600 13px/1.3 Urbanist, sans-serif; color: var(--kmh-fg);
}
.kmh-select option { background: var(--kmh-card); color: var(--kmh-fg); }
.kmh-set-play { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--kmh-border-strong); border-radius: 10px; background: transparent; color: var(--kmh-fg-2); }
.kmh-set-play:hover { background: var(--kmh-hover); color: var(--kmh-fg); }
.kmh-set-play .kmh-ic { width: 14px; height: 14px; fill: currentColor; }
/* a slider with its value */
.kmh-range { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; }
.kmh-range input {
  flex: 1; height: 6px; margin: 0; border-radius: 9999px; appearance: none; cursor: pointer;
  background: linear-gradient(90deg, var(--kmh-accent) var(--kmh-fill, 50%), var(--kmh-border-strong) var(--kmh-fill, 50%));
}
.kmh-range input::-webkit-slider-thumb { width: 18px; height: 18px; border-radius: 50%; appearance: none; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.kmh-range input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }
.kmh-range output { min-width: 40px; text-align: right; font: 600 13px/1 Urbanist, sans-serif; color: var(--kmh-fg-2); font-variant-numeric: tabular-nums; }
/* the keyboard shortcuts */
.kmh-keys { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-menu, 12px); background: var(--kmh-elevated); }
.kmh-keys > div { display: flex; align-items: center; gap: 16px; padding: 10px 14px; }
.kmh-keys > div + div { border-top: 1px solid var(--kmh-border); }
.kmh-keys dt { display: flex; align-items: center; gap: 4px; flex: none; width: 150px; font: 500 12px/1 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-keys kbd { min-width: 24px; padding: 4px 7px; border: 1px solid var(--kmh-border-strong); border-bottom-width: 2px; border-radius: 6px; background: rgba(3, 5, 26, .45); font: 600 12px/1 Urbanist, sans-serif; text-align: center; color: var(--kmh-fg); }
.kmh-keys dd { margin: 0; font: 500 14px/1.4 Urbanist, sans-serif; color: var(--kmh-fg); }
@media (max-width: 720px) { .kmh-set-box { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .kmh-set-nav { flex-direction: row; flex-wrap: wrap; } .kmh-set-nav h3 { display: none; } .kmh-set-modes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kmh-set-box { animation: none; } .kmh-set-switch > i, .kmh-set-switch > i::after, .kmh-toggle, .kmh-toggle > i { transition: none; } }
/* the gear sits at the foot of the rail */
.kmh-rail-end { margin-top: auto; }
html.kmh-g .kmh-rail-btn[aria-expanded="true"] { background: var(--kmh-nav-active); color: var(--kmh-accent); }
@keyframes kmh-nav-in { from { opacity: 0; transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .kmh-menu-item { animation: none; transition: none; } }
/* the rail, in the same colours */
html.kmh-g .kmh-rail { background: var(--kmh-rail-bg); }
html.kmh-g .kmh-rail-btn { color: var(--kmh-nav-fg); transition: color 200ms var(--kmh-out-expo), background-color 200ms var(--kmh-out-expo); }
html.kmh-g .kmh-rail-btn:hover { background: var(--kmh-nav-hover); color: #fff; }
html.kmh-g .kmh-rail-btn[aria-pressed="true"] { background: var(--kmh-nav-active); color: var(--kmh-accent); }
html.kmh-g .kmh-rail-btn[aria-pressed="true"] .kmh-ic { filter: drop-shadow(0 0 6px rgba(83, 255, 200, .5)); }
.kmh-rail-btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--kmh-fg-2); transition: background-color 120ms var(--kmh-ease);
}
.kmh-rail-btn .kmh-ic { width: 22px; height: 22px; }
.kmh-rail-btn:hover { background: var(--kmh-hover); color: var(--kmh-fg); }
.kmh-rail-btn[aria-pressed="true"] { background: var(--kmh-elevated); color: var(--kmh-accent); }

/* the people panel */
.kmh-panel {
  left: 60px; top: 6px; bottom: 6px; width: 290px; display: none; flex-direction: column; gap: 10px; padding: 14px 12px;
  border: 1px solid var(--kmh-border); border-radius: var(--k-radius-surface, 16px); background: var(--kmh-card); overflow: auto;
}
.kmh-panel-head { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.kmh-panel-head strong { flex: 1; font: 700 20px/1.25 Urbanist, sans-serif; }
.kmh-collapse {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--k-radius-inner, 8px);
  background: transparent; color: var(--kmh-fg-2);
}
.kmh-collapse:hover { background: var(--kmh-hover); color: var(--kmh-fg); }
.kmh-chat-collapse {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-inline-start: auto; padding: 0; border: 0;
  border-radius: var(--k-radius-inner, 8px); background: transparent; color: var(--kmh-fg-2); cursor: pointer;
}
.kmh-chat-collapse:hover { background: var(--kmh-hover); color: var(--kmh-fg); }
.kmh-here { display: flex; align-items: center; gap: 6px; margin: -4px 0 0 4px; font-size: 13px; color: var(--kmh-fg-2); }
.kmh-here .kmh-ic { width: 16px; height: 16px; color: var(--kmh-accent); }
.kmh-here span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmh-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 3px; border: 1px solid var(--kmh-border);
  border-radius: var(--k-radius-menu, 12px); background: var(--kmh-bg); color: var(--kmh-fg-2);
}
.kmh-search:focus-within { border-color: var(--kmh-border-strong); }
.kmh-search .kmh-ic { width: 16px; height: 16px; }
.kmh-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--kmh-fg);
  font: 500 14px/1.3 Urbanist, sans-serif;
}
.kmh-search input::placeholder { color: var(--kmh-muted); }
.kmh-search input::-webkit-search-cancel-button { display: none; }
.kmh-search kbd {
  padding: 2px 6px; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-row, 6px); font: 600 12px/1.5 Urbanist, sans-serif;
  color: var(--kmh-fg-2);
}
.kmh-section {
  display: flex; align-items: center; gap: 4px; align-self: flex-start; height: 28px; padding: 0 4px; border: 0;
  border-radius: var(--k-radius-row, 6px); background: transparent; font: 600 12px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2);
}
.kmh-section:hover { background: var(--kmh-hover); }
.kmh-section .kmh-ic { width: 16px; height: 16px; transition: rotate 200ms var(--kmh-ease); }
.kmh-section[aria-expanded="false"] .kmh-ic { rotate: -90deg; }
.kmh-roster { display: flex; flex-direction: column; gap: 2px; margin-top: -4px; }
.kmh-panel .kmh-av { width: 36px; height: 36px; border-radius: 50%; font-size: 13px; }
.kmh-me { cursor: default; }
.kmh-panel .kmh-empty { margin: 4px; }
.kmh-panel .kmh-notice { margin: 0 4px; }
.kmh-open-map {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin-top: auto; flex: none;
  border: 0; border-radius: var(--k-radius-menu, 12px); background: var(--kmh-elevated); font-weight: 600;
}
.kmh-open-map:hover { background: var(--kmh-hover); }

/* right edge of the map: "centre on me" above WA's zoom column, the view modes right below it */
.kmh-tools {
  right: 14px; bottom: calc(100vh - var(--kmh-nav-top, 612px) + 8px); display: none; flex-direction: column; gap: 8px; width: 30px;
}
.kmh-tool, .kmh-more-btn {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--kmh-glass-edge);
  border-radius: var(--k-radius-inner, 8px); background: var(--kmh-glass); color: var(--kmh-fg); box-shadow: var(--kmh-glass-depth);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
.kmh-tool[aria-disabled="true"] { color: var(--kmh-fg-2); cursor: default; }
.kmh-tool[aria-disabled="true"]:hover { background: var(--kmh-glass); }
.kmh-tool:hover, .kmh-more-btn:hover { background: rgba(255, 255, 255, .1); }   /* as the zoom keys and the editor's tools */
.kmh-more-btn[aria-expanded="true"] { background: rgba(83, 255, 200, .16); color: var(--kmh-accent); }   /* open: the dock's "on" */
.kmh-tool .kmh-ic, .kmh-more-btn .kmh-ic { width: 16px; height: 16px; stroke-width: 2; }
html.kmh-g .kmh-more { right: 14px; top: auto; bottom: 14px; width: 30px; }
html.kmh-g .kmh-more-btn {
  height: 30px; border-top-color: rgba(255, 255, 255, .1); border-radius: 0 0 var(--k-radius-inner, 8px) var(--k-radius-inner, 8px);
  box-shadow: none;   /* the capsule above casts the shadow */
}
/* WA's map-editor toolbar in the right column's system (owner, 18/10/2026: "saiu completamente do padrão... Tudo deve
   ser alinhado. Do mesmo tamanho / peso / cores / comportamento"): 30 px keys in glass capsules, 16 px glyphs at the
   1.35 px stroke, the chosen tool in the mint tint, tooltips like the floor-click hint */
html.kmh-g #map-editor-container .side-bar { gap: 8px !important; padding-top: 14px !important; }
html.kmh-g #map-editor-container .side-bar > .flex-col { gap: 8px !important; }
html.kmh-g #map-editor-container .side-bar :is(.close-window, .rounded-2xl) {
  gap: 0 !important; padding: 0 !important; border: 1px solid var(--kmh-glass-edge); border-radius: var(--k-radius-inner, 8px) !important;
  background: var(--kmh-glass) !important; box-shadow: var(--kmh-glass-depth);
}
html.kmh-g #map-editor-container .side-bar button {
  display: grid !important; place-items: center; width: 30px !important; height: 30px !important; padding: 0 !important; margin: 0 !important;
  border-radius: calc(var(--k-radius-inner, 8px) - 1px) !important; background: transparent; color: var(--kmh-fg);
}
html.kmh-g #map-editor-container .side-bar button:hover { background: rgba(255, 255, 255, .1) !important; }
html.kmh-g #map-editor-container .side-bar button:is(.bg-secondary, .active) { background: rgba(83, 255, 200, .16) !important; color: var(--kmh-accent) !important; }
html.kmh-g #map-editor-container .side-bar button svg { width: 16px !important; height: 16px !important; }
html.kmh-g #map-editor-container .side-bar button svg :is(path, line, circle, rect, polyline) { stroke-width: 2 !important; }
html.kmh-g #map-editor-container .side-bar .tooltip {
  right: calc(100% + 8px) !important; padding: 6px 10px !important; border-radius: var(--k-radius-inner, 8px) !important;
  background: rgba(3, 5, 26, .92) !important; font: 600 13px/1.3 Urbanist, sans-serif !important; color: var(--kmh-fg) !important;
  box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32));
}
/* WA's map-editor sidebar as one of our panels (owner, 18/10/2026: "Melhorar bastante a UX dele"): a card like the
   people panel, its title and search in the panel's type, the categories as quiet rows (thumbnail on a tile, the count
   in a badge; WA's "Imagems" label is noise and misspelt), no white flash on hover */
html.kmh-g #map-editor-right > .sidebar {
  box-sizing: border-box; height: calc(100dvh - 12px) !important; margin: 6px 6px 6px 0; padding: 16px 12px !important;
  border: 1px solid var(--kmh-border) !important; border-radius: var(--k-radius-surface, 16px); background: var(--kmh-card) !important;
}
html.kmh-g #map-editor-right .sidebar p.text-\[22px\] { font: 700 20px/1.25 Urbanist, sans-serif !important; color: var(--kmh-fg); }
html.kmh-g #map-editor-right .sidebar p.opacity-50 { margin-top: 4px !important; opacity: 1 !important; font: 500 13px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
html.kmh-g #map-editor-right .sidebar input.input-text {
  box-sizing: border-box; height: 40px; border: 1px solid var(--kmh-border) !important; border-radius: var(--k-radius-menu, 12px) !important;
  background-color: var(--kmh-bg) !important; color: var(--kmh-fg) !important; font: 500 14px/1.3 Urbanist, sans-serif !important;
}
html.kmh-g #map-editor-right .sidebar input.input-text::placeholder { color: var(--kmh-muted); }
html.kmh-g #map-editor-right .sidebar ul > li {
  margin-top: 2px !important; border-radius: var(--k-radius-inner, 8px) !important; background: transparent !important; color: var(--kmh-fg) !important;
}
html.kmh-g #map-editor-right .sidebar ul > li:hover { background: var(--kmh-hover) !important; color: var(--kmh-fg) !important; }
html.kmh-g #map-editor-right .entities-tag-list-item-grid {
  display: grid !important; grid-template: none / 40px minmax(0, 1fr) auto 16px !important; align-items: center; gap: 10px !important; padding: 6px 8px !important;
}
html.kmh-g #map-editor-right .entities-tag-list-item-grid > * { grid-area: auto !important; }
html.kmh-g #map-editor-right .entities-tag-list-item-grid .asset {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--k-radius-inner, 8px); background: var(--kmh-elevated);
}
html.kmh-g #map-editor-right .entities-tag-list-item-grid .tag p {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.3 Urbanist, sans-serif;
}
html.kmh-g #map-editor-right .entities-tag-list-item-grid .entitiesCount {
  min-width: 24px; padding: 2px 8px; border-radius: var(--k-radius-pill, 9999px); background: var(--kmh-elevated); text-align: center;
  font: 600 12px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2);
}
html.kmh-g #map-editor-right .entities-tag-list-item-grid .entitiesCount { border: 0 !important; }
html.kmh-g #map-editor-right .entities-tag-list-item-grid .object { display: none !important; }
/* "Add your image": the drop zone keeps one line instead of a fifth of the panel */
html.kmh-g #map-editor-right .sidebar [class*="border-dashed"] {
  min-height: 0 !important; padding: 12px !important; border-color: var(--kmh-border-strong) !important; border-radius: var(--k-radius-menu, 12px) !important;
}
html.kmh-g #map-editor-right .entities-tag-list-item-grid .chevronRight { color: var(--kmh-fg-2); }

/* The camera strip on top of the map (owner, 19/10/2026: "Tá feio aqui em cima esse negócio das cameras cortadas...
   Elas poderiam ficar apenas menores ao invés de cortar"). In the grid (the strip after 10 s standing still, with the
   drag handle) WA gives the strip a height and a lone row of tiles only a width, never under 160 px: a grid dragged
   lower than the tiles cut their bottom (the names). Here such a tile takes the grid's height and its width from
   16:9, so it shrinks instead. The row keeps WA's own width: its strip has no height to follow, and a tile taking
   100 % of it grew to twice WA's size (527 x 296 px instead of 264 x 148 in a 820 px window, measured 20/10/2026). */
html.kmh-g #cameras-container[style*="height"] > .camera-box:not([style*="height"]) {
  width: auto !important; max-width: none !important; height: 100% !important; aspect-ratio: 16 / 9;
}
/* A grid dragged smaller keeps its tile size while walking (moment-hud.js sets --kmh-cam-h from the drag and the
   class): WA's row tiles grow up to an inline max-width and never go under 160 px wide. */
html.kmh-g.kmh-cam-capped #cameras-container:not([style*="height"]) > .camera-box {
  max-width: calc(var(--kmh-cam-h) * 16 / 9) !important; min-width: min(10rem, calc(var(--kmh-cam-h) * 16 / 9)) !important;
}
/* One radius through the tile (owner, 20/10/2026: "melhore o radius dele pra gente, pra ficar elegante"): WA rounds the
   tile's inner layers at 16 px inside our 12 px clip, so the map showed in the corners, and a hairline edge as the
   dock's surfaces have. */
html.kmh-g #cameras-container .camera-box { border-radius: var(--k-radius-menu, 12px); }
html.kmh-g #cameras-container .camera-box .rounded-lg { border-radius: var(--k-radius-menu, 12px) !important; }
html.kmh-g #cameras-container .camera-box .bg-contrast\/80.rounded-lg { box-shadow: inset 0 0 0 1px var(--kmh-glass-edge, rgba(255, 255, 255, .1)); }
/* "Arraste para redimensionar" (owner: "Deixar mais sutil esse negócio de arrastar... Dar uma limpada"): a short
   translucent grip that lights up under the pointer, with an invisible, larger hold; WA's own is a 160 px white bar
   with a 4 px outline. Its hint takes the floor-click hint's look. */
html.kmh-g [data-testid="resize-handle"] {
  width: 40px !important; height: 4px !important; margin-top: 8px !important; outline: 0 !important; border-radius: 9999px !important;
  background: rgba(255, 255, 255, .28) !important; box-shadow: 0 1px 3px rgba(3, 5, 26, .35); transition: background-color 160ms var(--kmh-ease), width 160ms var(--kmh-ease);
}
html.kmh-g [data-testid="resize-handle"]::before { content: ''; position: absolute; inset: -10px -16px; }
html.kmh-g [data-testid="resize-handle"]:is(:hover, :active) { width: 56px !important; background: rgba(255, 255, 255, .72) !important; }
html.kmh-g [data-testid="resize-handle"] > div {
  top: calc(100% + 8px) !important; bottom: auto !important; translate: -50% 0 !important;   /* below the grip (centred), never over the names */
  padding: 4px 10px !important; border-radius: var(--k-radius-inner, 8px) !important; background: rgba(3, 5, 26, .72) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32));
}
html.kmh-g [data-testid="resize-handle"] > div p { font: 600 12px/1.4 Urbanist, sans-serif !important; color: var(--kmh-fg) !important; }
/* "more cameras" arrows: small glass keys instead of WA's wide gradient and big round chevron */
html.kmh-g #cameras-container ~ .scroll-indicator .scroll-indicator-gradient { display: none !important; }
html.kmh-g #cameras-container ~ .scroll-indicator .scroll-indicator-chevron {
  display: grid !important; place-items: center; width: 24px !important; height: 24px !important; padding: 0 !important;
  border: 1px solid var(--kmh-glass-edge); border-radius: 9999px !important; background: var(--kmh-glass) !important; box-shadow: var(--kmh-glass-depth);
}
html.kmh-g #cameras-container ~ .scroll-indicator .scroll-indicator-chevron svg { width: 14px !important; height: 14px !important; }
html.kmh-g #cameras-container ~ .scroll-indicator { opacity: .55 !important; }
html.kmh-g #cameras-container ~ .scroll-indicator:hover { opacity: 1 !important; }

/* the chosen piece in the editor (name, colours, positions): a card of the sidebar, not a sheet over the map */
html.kmh-g #map-editor-right .sidebar .fixed.left-2 {
  min-height: 0 !important; padding: 12px !important; border: 1px solid var(--kmh-border); border-radius: var(--k-radius-menu, 12px) !important;
  background: var(--kmh-elevated) !important;
}

/* "Explore the room": the clicked piece's card (WA's .object-menu, a sheet over half the map) as a small glass card
   above the dock, thumbnail beside the name, so the piece stays in sight (owner, 18/10/2026: "Quando eu clico em um
   móvel, ele aparece isso e sai do foco"). WA writes the name in capitals: it reads as a label. */
html.kmh-g .object-menu {
  box-sizing: border-box; width: 340px !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important;
  margin: 0 0 calc(var(--kmh-bar, 96px) + 12px) !important; padding: 12px; overflow: hidden !important;
  border: 1px solid var(--kmh-glass-edge); border-radius: var(--k-radius-surface, 16px) !important;
  background: var(--kmh-glass) !important; box-shadow: var(--kmh-glass-depth); color: var(--kmh-fg);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
html.kmh-g .object-menu > .p-8 {
  display: grid !important; grid-template-columns: minmax(0, 1fr); column-gap: 12px; align-items: center; justify-items: start;
  padding: 0 !important; text-align: left;
}
html.kmh-g .object-menu > .p-8:has(> img) { grid-template-columns: 56px minmax(0, 1fr); }
html.kmh-g .object-menu > .p-8 > img {
  grid-area: 1 / 1 / 3 / 2; width: 56px !important; height: 56px !important; margin: 0 !important; padding: 6px; box-sizing: border-box;
  border-radius: var(--k-radius-inner, 8px); background: var(--kmh-tile);
}
html.kmh-g .object-menu > .p-8 > h1 {
  grid-row: 1; max-width: 100%; overflow: hidden; padding: 0 !important; text-overflow: ellipsis; white-space: nowrap;
  font: 700 13px/1.3 Urbanist, sans-serif !important; letter-spacing: .04em; color: var(--kmh-fg);
}
html.kmh-g .object-menu > .p-8 > p {
  grid-row: 2; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin-top: 2px !important; font: 500 13px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2);
}
html.kmh-g .object-menu > .p-8 > p:empty { display: none; }
html.kmh-g .object-menu > .p-8:has(> p:empty) > h1 { grid-row: 1 / 3; }
/* the piece's or area's properties (WA writes the area's row as "flew-wrap"): left, under the text */
html.kmh-g .object-menu > .p-8 + div:not(.buttons-wrapper):not(:empty) { justify-content: flex-start !important; gap: 6px; margin-top: 10px; }
html.kmh-g .object-menu .buttons-wrapper { margin-top: 12px; padding: 0 !important; background: transparent !important; }
html.kmh-g .object-menu .buttons-wrapper button {
  height: 36px !important; min-height: 0 !important; padding: 0 14px !important; border-radius: var(--k-radius-menu, 12px) !important;
  font: 600 14px/1 Urbanist, sans-serif !important;
}
html.kmh-g .object-menu .buttons-wrapper button.btn-outline {
  border: 1px solid var(--kmh-tile-edge) !important; background: var(--kmh-tile) !important; color: var(--kmh-fg) !important;
}
html.kmh-g .object-menu .buttons-wrapper button.btn-outline:hover { background: var(--kmh-dock-tile-hover) !important; }

/* your card, above the dock's avatar; WA's own menu stays in the DOM, out of sight */
html.kmh-g [data-testid="profile-menu"] { visibility: hidden !important; pointer-events: none !important; }

/* WA's legacy fragmented settings and media modals (Menu.svelte, EnableCameraScene):
   completely suppressed in favour of the unified Konclui modal (.kmh-settings) */
html.kmh-g #main-layout-main > :has(.menu-nav-sidebar),
html.kmh-g .menu-nav-sidebar,
html.kmh-g #main-layout-main > .close-window:has(.menu-nav-sidebar),
html.kmh-g .enableCameraScene,
html.kmh-g form.enableCameraScene,
html.kmh-g :has(> .enableCameraScene) {
  display: none !important;
  pointer-events: none !important;
}
.kmh-card {
  display: flex; flex-direction: column; gap: 10px; width: 300px; padding: 12px;
  border-color: var(--kmh-glass-edge); background: var(--kmh-glass); box-shadow: var(--kmh-glass-depth);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  opacity: 1; transform: translateY(0);
  transition: transform 200ms var(--kmh-ease), opacity 200ms var(--kmh-ease), display 200ms allow-discrete;
}
.kmh-card[hidden] {
  display: none !important; opacity: 0 !important; transform: translateY(8px) !important;
}
@starting-style {
  .kmh-card:not([hidden]) {
    opacity: 0; transform: translateY(8px);
  }
}
.kmh-card-head { display: flex; align-items: flex-start; gap: 8px; padding: 2px 2px 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kmh-card-head > span { flex: 1; min-width: 0; }
.kmh-card-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.3 Urbanist, sans-serif; }
.kmh-card-status { display: block; font: 500 13px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-card-edit {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--k-radius-inner, 8px);
  background: var(--kmh-dock-tile); color: var(--kmh-fg);
}
.kmh-card-edit:hover { background: var(--kmh-dock-tile-hover); }
.kmh-card-statuses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kmh-card-statuses button {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--k-radius-menu, 12px); background: transparent; font: 600 13px/1 Urbanist, sans-serif; white-space: nowrap;
}
.kmh-card-statuses button:hover { background: var(--kmh-dock-tile); }
.kmh-card-statuses button[aria-checked="true"] { border-color: rgba(83, 255, 200, .35); background: rgba(83, 255, 200, .12); }
.kmh-card-statuses i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.kmh-card-rows { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.kmh-card-rows button {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; border: 0; border-radius: var(--k-radius-inner, 8px);
  background: transparent; font: 500 14px/1.3 Urbanist, sans-serif; text-align: left;
}
.kmh-card-rows button:hover { background: var(--kmh-hover); }
.kmh-card-rows .kmh-ic { color: var(--kmh-fg-2); }

html.kmh-g .kmh-more-menu { right: calc(100% + 8px); left: auto; bottom: 0; top: auto; min-width: 300px; transform-origin: bottom right; }
.kmh-mode {
  display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: var(--k-radius-menu, 12px); background: transparent;
  text-align: left; color: var(--kmh-fg);
}
.kmh-mode:hover, .kmh-mode:focus-visible { background: var(--kmh-hover); }
.kmh-mode b { display: block; font: 600 14px/1.3 Urbanist, sans-serif; }
.kmh-mode small { display: block; margin-top: 2px; font: 500 12px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-thumb {
  position: relative; flex: none; width: 64px; height: 44px; border-radius: var(--k-radius-inner, 8px); border: 2px solid transparent;
  background: var(--kmh-bg); overflow: hidden;
}
.kmh-mode[aria-checked="true"] .kmh-thumb { border-color: var(--kmh-accent); }
.kmh-thumb::before, .kmh-thumb::after { content: ''; position: absolute; }
.kmh-thumb-simple::before { left: 4px; top: 4px; bottom: 4px; width: 16px; border-radius: 4px; background: var(--kmh-elevated); }
.kmh-thumb-simple::after { left: 24px; right: 4px; top: 4px; bottom: 4px; border-radius: 4px; background: #d8ead7 center / cover; opacity: .55; }
.kmh-thumb-immersive::before { inset: 4px; border-radius: 4px; background: #d8ead7 center / cover; background-image: var(--kmh-plan-url); }
.kmh-thumb-immersive::after { left: 50%; top: 50%; width: 6px; height: 6px; translate: -50% -50%; border-radius: 50%; background: var(--kmh-accent); }
.kmh-thumb-auto::before { inset: 4px 50% 4px 4px; border-radius: 4px 0 0 4px; background: #d8ead7 center / cover; background-image: var(--kmh-plan-url); }
.kmh-thumb-auto::after { inset: 4px 4px 4px 50%; border-radius: 0 4px 4px 0; background: var(--kmh-elevated); }
.kmh-mode[aria-checked="true"] .kmh-thumb-auto::after, .kmh-mode[aria-checked="true"] .kmh-thumb-simple::before { background: var(--kmh-hover); }

/* the minimap and your desk, bottom left of the map */
/* As in the source (owner, 18/10/2026: "O mapa aqui também tá incrível. Super sutil."): 110×80, dark and solid, the plan
   a faint grey line drawing, a dashed reach around a small glowing dot for you */
.kmh-mini {
  left: calc(var(--kmh-card-left, 356px) + 8px); bottom: 14px; display: none; flex-direction: column; gap: 8px; align-items: flex-start;
  transition: left 200ms var(--kmh-ease);
}
.kmh-mini-map {
  position: relative; width: 110px; height: 80px; padding: 0; border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--k-radius-surface, 16px);
  background: #101b29; box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32)); overflow: hidden;
}
.kmh-mini-plan { position: absolute; inset: 0; overflow: hidden; background-color: #101b29; background-repeat: no-repeat; }
/* the plan (set by the view as this element's background) shows through a grey, dark veil */
.kmh-mini-plan::before {
  content: ''; position: absolute; inset: 0; background: rgba(16, 27, 41, .86);
  -webkit-backdrop-filter: grayscale(1) contrast(1.5); backdrop-filter: grayscale(1) contrast(1.5);
}
.kmh-mini-plan .kmh-dot {
  z-index: 1; width: 5px; height: 5px; border: 0; background: var(--kmh-fg-2); box-shadow: none;
}
.kmh-mini-plan .kmh-you { z-index: 2; width: 6px; height: 6px; background: var(--kmh-mint); box-shadow: 0 0 6px 1px rgba(83, 255, 200, .6); }
.kmh-mini-plan .kmh-you::before { display: none; }
.kmh-mini-ring {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 50px; height: 50px; translate: -50% -50%; border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .3); pointer-events: none;
}
.kmh-mini-map:hover { border-color: rgba(255, 255, 255, .16); }
/* The simplified view, in place of the live map: the source's flat plan, light as the source draws it (owner,
   19/10/2026: "Ele poderia ser simplificado igual do Gather"). The plan takes clicks: drag, wheel, double click. */
.kmh-simple {
  position: absolute; inset: 0; z-index: 5; display: none; overflow: hidden; border-radius: inherit; background: #d7ecd3;
  font: 500 14px/1.3 Urbanist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--kmh-fg); pointer-events: auto;
}
.kmh-simple-plan { position: absolute; inset: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.kmh-simple-plan.kmh-plan-dragging { cursor: grabbing; }
.kmh-plan-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.kmh-plan-lawn { fill: #d7ecd3; }
.kmh-plan-building { fill: #fbfbfd; stroke: #dfe2eb; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.kmh-plan-area { stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.kmh-plan-room { fill: #ecebfb; stroke: #c4c0f0; }
.kmh-plan-booth { fill: #e4e9f0; stroke: #b6c0cf; }
.kmh-plan-cafe { fill: #f8efe4; stroke: #e8d3b8; }
.kmh-plan-water { fill: #d8ebfa; stroke: #a6cdee; }
.kmh-plan-stage { fill: #fdf0da; stroke: #efd29e; }
.kmh-plan-lobby { fill: #fbe9f3; stroke: #eec3da; }
.kmh-plan-desks { fill: #f2f3f7; stroke: #dfe2ea; }
.kmh-plan-desk rect { fill: #e6e9f0; } .kmh-plan-desk circle { fill: #b9c1d0; }
.kmh-plan-desk.kmh-plan-mine rect { fill: rgba(83, 255, 200, .3); } .kmh-plan-desk.kmh-plan-mine circle { fill: #19b98a; }
.kmh-plan-marks { position: absolute; inset: 0; pointer-events: none; }
/* names and icons of the areas: white chips, the size they are at any zoom; far out, the icons only */
.kmh-plan-label {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px;
  transform: translate(-50%, -50%); border-radius: 9999px; background: #fff; color: #3a3f5c; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(24, 28, 52, .07), 0 1px 2px rgba(24, 28, 52, .12); font: 600 12px/1.25 Urbanist, sans-serif;
}
.kmh-plan-label .kmh-ic { width: 13px; height: 13px; flex: none; stroke-width: 1.8; color: #6a62d4; }
.kmh-plan-label-booth { padding: 4px; } .kmh-plan-label-booth .kmh-ic { color: #66748a; }
.kmh-plan-label-cafe .kmh-ic { color: #b07a3a; } .kmh-plan-label-water .kmh-ic { color: #3a8fd0; }
.kmh-plan-label-stage .kmh-ic { color: #c08a2a; } .kmh-plan-label-lobby .kmh-ic { color: #c9508f; }
.kmh-plan-label-desks { padding: 3px 9px; color: #5a6078; }
.kmh-plan-far .kmh-plan-label:not(.kmh-plan-label-desks) span { display: none; }
.kmh-plan-far .kmh-plan-label:not(.kmh-plan-label-desks) { padding: 4px; }
.kmh-plan-far .kmh-plan-label-desks { opacity: .85; }
/* everyone: a round badge with the initials; you, ringed in mint with your name above (as the source) */
.kmh-plan-person {
  position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 3px; transform: translate(-50%, calc(-100% + 14px));
  pointer-events: auto; cursor: default;
}
.kmh-plan-person i {
  display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%;
  font: 700 11px/1 Urbanist, sans-serif; font-style: normal; color: #fff; box-shadow: 0 1px 4px rgba(18, 22, 44, .3);
}
.kmh-plan-me i { background: var(--kmh-accent); color: var(--kmh-on-accent); box-shadow: 0 0 0 3px rgba(83, 255, 200, .35), 0 1px 4px rgba(18, 22, 44, .3); }
.kmh-plan-name {
  padding: 2px 8px; border-radius: 9999px; background: #121a33; color: #fff; font: 600 11px/1.3 Urbanist, sans-serif; white-space: nowrap;
}
/* one click marks a spot, as on the live map; a double click walks there and the mark stays until you arrive */
.kmh-plan-pick { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 6px; transform: translate(-50%, -12px); pointer-events: none; }
.kmh-plan-pick[hidden] { display: none; }
.kmh-plan-ring { width: 20px; height: 20px; box-sizing: border-box; border: 2px solid #121a33; border-radius: 50%; background: rgba(83, 255, 200, .35); }
.kmh-plan-going .kmh-plan-ring { border-color: var(--kmh-accent); background: rgba(83, 255, 200, .5); animation: kmh-plan-pulse 1.2s ease-in-out infinite; }
.kmh-plan-going .kmh-plan-tip { display: none; }
.kmh-plan-learnt .kmh-plan-tip, .kmh-pick-tip:empty { display: none; }
.kmh-plan-tip { padding: 4px 9px; border-radius: var(--k-radius-inner, 8px); background: rgba(3, 5, 26, .78); color: #fff; font: 600 12px/1.3 Urbanist, sans-serif; white-space: nowrap; }
@keyframes kmh-plan-pulse { 50% { scale: 1.25; } }
/* the mode, small, top left of the plan */
.kmh-simple-head {
  position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px;
  border: 1px solid var(--kmh-glass-edge); border-radius: 9999px; background: var(--kmh-glass); box-shadow: var(--kmh-glass-depth);
  color: var(--kmh-fg); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
.kmh-simple-head .kmh-ic { width: 14px; height: 14px; color: var(--kmh-accent); }
.kmh-simple-head b { font: 600 12px/1.3 Urbanist, sans-serif; }
.kmh-simple-back {
  height: 26px; padding: 0 10px; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, .1); color: var(--kmh-fg);
  font: 600 12px/1 Urbanist, sans-serif; white-space: nowrap;
}
.kmh-simple-back:hover { background: rgba(255, 255, 255, .18); }
/* the plan's zoom, right above "⋯", where the live map's zoom column is: the right column stays one piece */
.kmh-plan-zoom {
  position: absolute; right: 8px; bottom: 38px; display: flex; flex-direction: column; width: 30px; overflow: hidden;
  border: 1px solid var(--kmh-glass-edge); border-bottom: 0; border-radius: var(--k-radius-inner, 8px) var(--k-radius-inner, 8px) 0 0;
  background: var(--kmh-glass); box-shadow: var(--kmh-glass-depth);
}
.kmh-plan-zoom button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--kmh-fg); }
.kmh-plan-zoom button + button { border-top: 1px solid rgba(255, 255, 255, .1); }
.kmh-plan-zoom button:hover { background: rgba(255, 255, 255, .1); }
.kmh-plan-zoom .kmh-ic { width: 16px; height: 16px; stroke-width: 2; }
/* "A caminho!": small and dark, bottom centre above the dock, with "Cancelar" (as the source) */
.kmh-walk {
  position: absolute; left: 50%; bottom: calc(var(--kmh-bar, 96px) + 10px); display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; translate: -50% 0; border-radius: var(--k-radius-menu, 12px); background: rgba(3, 5, 26, .86);
  color: #fff; font: 600 13px/1.3 Urbanist, sans-serif; box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32));
}
.kmh-walk[hidden] { display: none; }
.kmh-walk.kmh-walk-error { padding-right: 14px; }
.kmh-walk-cancel {
  height: 28px; padding: 0 12px; border: 0; border-radius: var(--k-radius-inner, 8px); background: rgba(83, 255, 200, .16);
  color: var(--kmh-accent); font: 600 13px/1 Urbanist, sans-serif;
}
.kmh-walk-cancel:hover { background: rgba(83, 255, 200, .26); }
@media (prefers-reduced-motion: reduce) { .kmh-plan-going .kmh-plan-ring { animation: none; } }

/* the saver's notices, top right of the map */
/* a game or one of WA's modals takes the screen: the notice waits, so it never covers their close button */
html:is([data-kmh-moment="jogo"], :has([data-testid="close-modal-button"])) .kmh .kmh-toast { display: none !important; }
.kmh .kmh-toast {
  right: 18px; top: 26px; width: min(360px, calc(100vw - 36px)); display: grid; grid-template-columns: 64px 1fr 28px; gap: 2px 12px; padding: 20px 19px 17px;
  background: var(--kmh-glass); border-color: var(--kmh-glass-edge); box-shadow: var(--kmh-glass-depth);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--k-radius-surface, 16px); animation: kmh-pop 220ms var(--kmh-ease) backwards; transform-origin: top right;
}
.kmh-toast-icon {
  width: 64px; height: 64px; border-radius: var(--k-radius-menu, 12px); border: 1px solid rgba(190, 210, 230, .28); position: relative;
  background: linear-gradient(160deg, #2a3646, #121a28);
}
.kmh-toast-icon::before {
  content: ''; position: absolute; inset: 9px; background: var(--kmh-toast-ink, #e0b341);
  -webkit-mask: var(--kmh-toast-glyph) center / contain no-repeat; mask: var(--kmh-toast-glyph) center / contain no-repeat;
}
.kmh-toast[data-kind="battery"] .kmh-toast-icon::before {
  inset: 23px 14px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'><rect x='1' y='1' width='30' height='16' rx='3.5' fill='none' stroke='%23c9d2dc' stroke-width='2'/><rect x='32.5' y='6' width='2.5' height='6' rx='1' fill='%23c9d2dc'/><rect x='4' y='4' width='7' height='10' rx='1.5' fill='%23e53935'/></svg>") center / contain no-repeat;
  -webkit-mask: none; mask: none;
}
.kmh-toast[data-kind="battery"] { --kmh-toast-ink: #e8594e; --kmh-toast-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7' width='17' height='10' rx='2.5'/><path d='M22 10.5v3M6 10v4'/></svg>"); }
.kmh-toast[data-kind="charging"] { --kmh-toast-ink: var(--kmh-accent); --kmh-toast-glyph: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7' width='17' height='10' rx='2.5'/><path d='M22 10.5v3M11.5 8.5 9 12h4l-2.5 3.5'/></svg>"); }
.kmh-toast-text { min-width: 0; }
.kmh-toast b { display: block; font: 700 20px/1.25 Urbanist, sans-serif; }
.kmh-toast p { margin: 4px 0 0; font: 500 13px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-toast-close {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--k-radius-inner, 8px); background: transparent;
  color: var(--kmh-fg-2);
}
.kmh-toast-close:hover { background: var(--kmh-hover); color: var(--kmh-fg); }
.kmh-toast-close { align-self: start; margin-top: -6px; }
.kmh-toast-close .kmh-ic { width: 16px; height: 16px; }
.kmh-toast-actions { grid-column: 1 / -1; display: flex; gap: 9px; margin-top: 14px; }
.kmh-toast-actions[hidden] { display: none; }
.kmh-toast-actions button { height: 36px; padding: 0 14px; border-radius: var(--k-radius-menu, 12px); font: 600 14px/1 Urbanist, sans-serif; }
.kmh .kmh-toast-primary { flex: 1; border: 0; background: linear-gradient(180deg, #5cfbcb, #4ff0c0); color: #0b1a26; }
.kmh-toast-primary:hover { filter: brightness(1.06); }
.kmh-toast-secondary { border: 1px solid rgba(255, 255, 255, .28); background: #0f1a28; font-weight: 600 !important; }
.kmh-toast-secondary:hover { background: var(--kmh-hover); }

/* the picked floor tile: four corner marks, and the hint above it */
.kmh .kmh-pick { pointer-events: none; }   /* the second click must reach the map */
.kmh-pick[hidden] { display: none !important; }
.kmh-pick-box {
  position: absolute; inset: 0; animation: kmh-pop 160ms var(--kmh-ease) backwards;
  --c: rgba(255, 255, 255, .9); --l: 26%;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 2px, linear-gradient(var(--c), var(--c)) top left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 2px, linear-gradient(var(--c), var(--c)) top right / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l);
  background-repeat: no-repeat; filter: drop-shadow(0 0 1px rgba(3, 5, 26, .9));
}
/* the hint stays out of the way (owner, 18/10/2026: "muito largo e muito escuro... mais elegante... mais transparente...
   sumindo mais rápido, sumindo quando anda ou quando aperta esc"): small, see-through, gone after 1.8 s */
.kmh-pick-tip {
  position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; padding: 3px 8px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--k-radius-row, 6px); background: rgba(3, 5, 26, .58); color: var(--kmh-fg); font: 600 12px/1.4 Urbanist, sans-serif;
  white-space: nowrap; pointer-events: none;
}
.kmh-pick { transition: opacity 220ms var(--kmh-ease); }
.kmh-pick.kmh-pick-out { opacity: 0; }

/* a drag of the floor moves the camera (gateway patch sets data-k-dragging while it lasts) */
html[data-k-dragging] #game canvas { cursor: grabbing !important; }

/* desk claims: the desk under the pointer and who owns it; "Mover mesa para cá" above you at a free desk */
.kmh .kmh-desk-hover { pointer-events: none; }
.kmh-desk-outline { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .95); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(3, 5, 26, .35); }
.kmh-desk-tip {
  position: absolute; left: calc(100% - 8px); top: calc(100% - 4px); padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--k-radius-inner, 8px); background: rgba(3, 5, 26, .92); color: var(--kmh-fg); font: 600 13px/1.3 Urbanist, sans-serif;
  white-space: nowrap; box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32));
}
.kmh-claim {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; translate: -50% -100%; border: 0;
  border-radius: var(--k-radius-menu, 12px); background: #fff; color: #0e1726 !important; font: 700 14px/1 Urbanist, sans-serif !important;
  box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32));
}
.kmh-claim:hover { background: #e9f1f7; }
.kmh-claim .kmh-ic { width: 16px; height: 16px; }

/* emotes: the grid in the reactions panel, and the emote drawn inside a chat message (pixel art, crisp) */
.kmh-emotes { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; order: 4; }
.kmh-emotes::before {
  content: 'Emotes'; grid-column: 1 / -1; margin-bottom: -2px; font: 600 12px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2);
}
.kmh-emotes[hidden] { display: none; }
.kmh-emote {
  display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: var(--k-radius-inner, 8px);
  background: transparent; cursor: pointer;
}
.kmh-emote:hover { border-color: var(--kmh-tile-edge); background: var(--kmh-tile); }
.kmh-emote img, .kmh-chat-emote { width: 32px; height: 32px; image-rendering: pixelated; }
.kmh-chat-emote { width: 24px; height: 24px; vertical-align: middle; }

/* the office's actions inside WA's reactions panel */
.kmh-react-office { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.kmh-react-office::before {
  content: 'No escritório'; grid-column: 1 / -1; margin-bottom: -2px; font: 600 12px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2);
}
.kmh-react-office[hidden] { display: none; }
.kmh-react-item {
  position: relative; display: flex; align-items: center; min-width: 0; height: 40px; padding: 0 8px 0 42px;
  border: 1px solid var(--kmh-tile-edge); border-radius: var(--k-radius-menu, 12px); background: var(--kmh-tile); color: var(--kmh-fg); text-align: left;
  font: 600 14px/1.3 Urbanist, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.kmh-react-item:hover, .kmh-react-item:focus-visible { background: rgba(255, 255, 255, .14); }
.kmh-react-item:focus-visible { outline: 3px solid var(--kmh-accent); outline-offset: 1px; }
.kmh-react-item::before {
  content: ''; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; background: currentColor;
  -webkit-mask: var(--kmh-glyph) center / contain no-repeat; mask: var(--kmh-glyph) center / contain no-repeat;
}

/* the view modes menu ("⋯") */
.kmh-more { display: none; }
.kmh-more-menu {
  position: absolute; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  animation: kmh-pop 160ms var(--kmh-ease) backwards;
}
.kmh-more-menu[hidden] { display: none; }

@media (min-width: 768px) {
  html.kmh-g { --kmh-card-left: 60px; }
  html.kmh-g:is(.kmh-panel-open, .kmh-chat-open) { --kmh-card-left: 356px; }
  html.kmh-g :is(.kmh-rail, .kmh-more, .kmh-tools, .kmh-mini) { display: flex; }
  html.kmh-g.kmh-panel-open .kmh-panel { display: flex; }
  html.kmh-g.kmh-simple-on .kmh-simple { display: block; }
  html.kmh-g.kmh-simple-on .kmh-mini { display: none; }
  /* the right column on the plan: your desk and "centre on me" above the plan's zoom and "⋯", one column */
  html.kmh-g.kmh-simple-on .kmh-tools { bottom: 112px; }
  html.kmh-g.kmh-simple-on [data-testid="actions-explorer"] { visibility: hidden !important; }
}
@media (max-width: 767px) {
  /* the people pill holds the top right corner on phones: the notice sits under it */
  .kmh .kmh-toast { top: 72px; right: 8px; width: calc(100vw - 16px); }
  /* the people sheet covers the same place: the notice waits until it closes */
  html.kmh-g.kmh-panel-open .kmh .kmh-toast { display: none !important; }
  html.kmh-g.kmh-panel-open .kmh-panel { display: flex; left: 8px; right: 8px; top: 68px; bottom: auto; width: auto; max-height: 70vh; }
}

/* ------------------------------------------------------------------ our layer */
html.kmh-on .kmh {
  position: fixed; inset: 0; z-index: 305; pointer-events: none;
  font: 500 14px/1.3 Urbanist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--kmh-fg);
  -webkit-font-smoothing: antialiased;
}
.kmh > * { position: absolute; pointer-events: auto; box-sizing: border-box; }
.kmh [hidden] { display: none !important; }
.kmh-surface {
  background: var(--kmh-bg); border: 1px solid var(--kmh-border); border-radius: var(--k-radius-surface, 16px);
  box-shadow: var(--k-shadow, 0 8px 32px rgba(0, 0, 0, .32));
}
.kmh-ic {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.kmh button, :where(.kmh-simple) button { font: inherit; color: inherit; cursor: pointer; }
/* pressed: a small give under the finger or the pointer, as the dock's keys have (theme.css) */
.kmh button:active:not(:disabled):not([aria-disabled="true"]), :where(.kmh-simple) button:active:not(:disabled) { scale: .97; }
.kmh :focus-visible { outline: 3px solid var(--kmh-accent); outline-offset: 2px; }
/* Focus rings for the keyboard only (owner, 18/10/2026: "Deixar apenas no uso com teclado. Em absolutamente tudo."):
   the view keeps how the focus last moved in <html data-k-input>; after a click nothing is ringed, after Tab everything
   is. Tailwind's rings are shadows, so their variables are emptied instead of every shadow. */
html[data-k-input="pointer"] :is(:focus, :focus-visible) {
  outline: none !important; --tw-ring-shadow: 0 0 #0000 !important; --tw-ring-offset-shadow: 0 0 #0000 !important;
}
html[data-k-input="pointer"] .kmh-search:focus-within { border-color: var(--kmh-border); }
.kmh-av {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; color: #fff;
  font: 700 12px/1 Urbanist, sans-serif; letter-spacing: .02em;
}
.kmh-t0 { background: #1e454d; } .kmh-t1 { background: #142160; } .kmh-t2 { background: #04706f; }
.kmh-t3 { background: #7a5a3a; } .kmh-t4 { background: #0e7f66; } .kmh-t5 { background: #5b3b6e; }

/* where you are */
.kmh-place {
  left: 16px; top: 16px; display: flex; align-items: center; gap: 8px; max-width: calc(50vw - 40px);
  padding: 9px 14px 9px 10px; font-weight: 650;
}
.kmh-place .kmh-ic { color: var(--kmh-accent); }
.kmh-place b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.kmh-sep { flex: none; width: 1px; height: 18px; background: var(--kmh-border); }
.kmh-near { color: var(--kmh-fg-2); white-space: nowrap; }
.kmh-alone :is(.kmh-sep, .kmh-near) { display: none; }

/* who is in the office: the pill that opens the people map */
.kmh-pill {
  right: 16px; top: 16px; display: flex; align-items: center; gap: 10px; min-height: 46px;
  padding: 6px 14px 6px 6px; border-radius: 999px; text-align: left;
  transition: border-color 120ms var(--kmh-ease);
}
.kmh-pill:hover, html.kmh-map-open .kmh-pill { border-color: var(--kmh-border-strong); }
.kmh-stack { display: flex; }
.kmh-stack:empty { display: none; }
.kmh-stack:empty + .kmh-pill-text { padding-left: 8px; }
.kmh-stack .kmh-av { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--kmh-bg); }
.kmh-stack .kmh-av + .kmh-av { margin-left: -8px; }
.kmh-pill b { display: block; font: 700 14px/1.3 Urbanist, sans-serif; }
.kmh-pill small { display: block; font: 500 12px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-pill > .kmh-ic { width: 16px; height: 16px; color: var(--kmh-fg-2); transition: rotate 200ms var(--kmh-ease); }
html.kmh-map-open .kmh-pill > .kmh-ic { rotate: 180deg; }
html[data-kmh-moment="mesa"] .kmh-pill :is(.kmh-stack, small) { display: none; }
html[data-kmh-moment="mesa"] .kmh-pill .kmh-pill-text { padding-left: 8px; }

/* the people map */
.kmh-map {
  right: 16px; top: 72px; z-index: 1; width: 300px; padding: 12px;
  max-height: calc(100vh - var(--kmh-bar, 96px) - 96px); overflow: auto; transform-origin: top right;
  animation: kmh-pop 200ms var(--kmh-ease) backwards;
}
.kmh-map:focus { outline: none; }
.kmh-map-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 4px; }
.kmh-map-head strong { flex: 1; font: 700 16px/1.25 Urbanist, sans-serif; }
.kmh-online { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--kmh-fg-2); }
.kmh-online::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #10b981; }
.kmh-close {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--k-radius-inner, 8px);
  background: transparent;
}
.kmh-close:hover { background: var(--kmh-hover); }
.kmh-plan {
  position: relative; width: 100%; border-radius: var(--k-radius-row, 6px); background: #d8ead7 center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.kmh-dot {
  position: absolute; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; translate: -50% -50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45); transition: scale 160ms var(--kmh-ease), left 600ms linear, top 600ms linear;
}
.kmh-dot.kmh-lit { z-index: 2; scale: 1.45; box-shadow: 0 0 0 3px var(--kmh-accent), 0 1px 4px rgba(0, 0, 0, .45); }
.kmh-you { z-index: 1; width: 14px; height: 14px; background: var(--kmh-accent); border-color: #0a0a3d; }
.kmh-you::before {
  content: ''; position: absolute; inset: -6px; border: 2px solid var(--kmh-accent); border-radius: 50%;
  animation: kmh-ring 1800ms var(--kmh-ease) infinite;
}
.kmh-dot:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; z-index: 3;
  padding: 6px 8px; border-radius: var(--k-radius-inner, 8px); border: 1px solid #3e4858; background: var(--kmh-card); white-space: nowrap;
  font: 600 12px/1 Urbanist, sans-serif; color: var(--kmh-fg); pointer-events: none;
}
.kmh-people { margin-top: 8px; }
.kmh-person {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 4px; border: 0; border-radius: var(--k-radius-row, 6px);
  background: transparent; text-align: left;
}
.kmh-person:hover, .kmh-person:focus-visible { background: var(--kmh-hover); }
.kmh-grow { flex: 1; min-width: 0; }
.kmh-person b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.3 Urbanist, sans-serif; }
.kmh-person small {
  display: flex; align-items: center; gap: 6px; margin-top: 2px; font: 500 12px/1.5 Urbanist, sans-serif;
  color: var(--kmh-fg-2);
}
.kmh-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmh-dotline { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.kmh-s-ok { background: #10b981; } .kmh-s-focus { background: #8fa7ff; }
.kmh-s-busy { background: #e8594e; } .kmh-s-away { background: #e0b341; }
.kmh-go { opacity: 0; font: 600 12px/1 Urbanist, sans-serif; color: var(--kmh-accent); }
.kmh-person:is(:hover, :focus-visible) .kmh-go { opacity: 1; }
.kmh-empty { margin: 14px 4px 4px; font: 500 13px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-notice { margin: 8px 4px 0; font: 500 13px/1.5 Urbanist, sans-serif; color: var(--kmh-accent); }
.kmh-notice:empty { display: none; }
.kmh-notice.kmh-error { color: #ffb4ab; }
.kmh-desk {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 8px;
  border: 0; border-radius: var(--k-radius-menu, 12px); background: var(--kmh-elevated); font-weight: 600;
}
.kmh-desk:hover { background: var(--kmh-hover); }

/* focus at a desk, and the conversation label: above the docked bar */
:is(.kmh-focus, .kmh-call) {
  left: 50%; bottom: calc(var(--kmh-bar, 96px) + var(--kmh-gap)); translate: -50% 0; display: none; align-items: center;
  gap: 12px; border-radius: 999px;
}
.kmh-focus { padding: 8px 8px 8px 16px; }
.kmh-focus > .kmh-ic { color: #8fa7ff; }
.kmh-focus b { display: block; font: 700 14px/1.3 Urbanist, sans-serif; }
.kmh-focus small { display: block; font: 500 12px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kmh-focus-button {
  height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--kmh-elevated); font-weight: 650;
  white-space: nowrap;
}
.kmh-focus-button:hover { background: var(--kmh-hover); }
.kmh-call { padding: 9px 16px 9px 12px; font-weight: 600; color: var(--kmh-fg-2); }
.kmh-call > .kmh-ic { color: var(--kmh-accent); }
html[data-kmh-moment="mesa"] .kmh-focus, html[data-kmh-moment="conversa"] .kmh-call {
  display: flex; animation: kmh-rise 220ms var(--kmh-ease) backwards;
}

/* what each moment shows */
html[data-kmh-moment="conversa"] .kmh-place,
html[data-kmh-moment="jogo"] :is(.kmh-place, .kmh-pill, .kmh-map) { display: none !important; }

/* ------------------------------------------------------------------ action messages: a drawn Space key */
/* In the source layout the message is small, see-through and centred on the map's card, stacked above the dock and
   above the focus or conversation chip, never over them (owner, 18/10/2026: "melhore a hierarquia visual... Deixar ele
   centralizado também... Pequeno... Mais transparente..."). WA centres its stack on the window and gives each message
   at least 240×80 px. */
html.kmh-g .fixed:has(> .popups) { left: var(--kmh-card-left, 60px) !important; right: 6px !important; }
html.kmh-g .popups { height: auto !important; margin-bottom: calc(var(--kmh-bar, 96px) + 10px) !important; }
html.kmh-g:is([data-kmh-moment="mesa"], [data-kmh-moment="conversa"]) .popups { margin-bottom: calc(var(--kmh-bar, 96px) + 82px) !important; }
html.kmh-g .kmh-prompt.popup-container {
  min-width: 0 !important; min-height: 0 !important; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--k-radius-menu, 12px) !important;
  background: rgba(3, 5, 26, .6) !important; box-shadow: none !important;
}
html.kmh-g .kmh-prompt.popup-container > .flex { padding: 6px 12px !important; }
html.kmh-g .kmh-prompt .responsive-message { gap: 8px; font: 600 13px/1.3 Urbanist, sans-serif !important; }
html.kmh-g .kmh-prompt .kmh-key { height: 20px; padding: 0 6px; font-size: 11px; }
html.kmh-on .kmh-prompt .responsive-message { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.kmh-prefix { color: #b4bdcc; font-weight: 500; }
.kmh-key {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px;
  border: 1px solid #768395; border-bottom-width: 2px; background: #182c41; color: #f0f5fb;
  font: 700 12px/1 Urbanist, sans-serif; letter-spacing: .02em; white-space: nowrap;
}
.kmh-key-touch { display: none; }
@media (pointer: coarse) {
  .kmh-key-desk { display: none; }
  .kmh-key-touch { display: inline; }
}

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 640px) {
  /* the place chip and the pill share the top edge: the pill keeps only its count, the chip the room that is left */
  .kmh-place { max-width: calc(100vw - 196px); }
  .kmh-stack { display: none !important; }
  .kmh-near, .kmh-sep, .kmh-pill small { display: none !important; }
  .kmh-map { left: 8px; right: 8px; width: auto; top: 68px; }
}

@keyframes kmh-pop { from { opacity: 0; transform: scale(.97); } }
@keyframes kmh-rise { from { opacity: 0; translate: -50% 6px; } }
@keyframes kmh-ring { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) {
  html.kmh-g #game, .kmh-panel, .kmh-card, .kmh-menu, .kmh-mini,
  .kmh *, .kmh *::before, .kmh-map, .kmh-focus, .kmh-call {
    animation: none !important; transition: none !important; transform: none !important;
  }
}