/**
 * Digi Idle — UI responsiva (HUDs, float-wins, modais, toolbar)
 * Carregar depois do CSS principal.
 */

:root {
  --ui-gutter: 14px;
  --ui-gutter-x: max(14px, env(safe-area-inset-left, 0px));
  --ui-gutter-r: max(14px, env(safe-area-inset-right, 0px));
  --ui-gutter-t: max(8px, env(safe-area-inset-top, 0px));
  --ui-gutter-b: max(8px, env(safe-area-inset-bottom, 0px));
  --vvh: 100dvh;
  --ui-float-max-h: min(72vh, calc(var(--vvh) - var(--bar-space, 70px) - 48px));
}

@supports not (height: 100dvh) {
  :root { --vvh: 100vh; }
}

/* —— Sem seleção de texto no click (gameplay + HUDs) —— */
html,
body,
#root,
.stage,
canvas,
.unit-hud,
.digivice-body,
.unit-body,
.float-win,
.modal,
.spellbar,
.conn-status,
.toolbar,
.tb-rail,
.devo-fab,
.dcity-fab,
.dvice-fab,
.devo-root,
.dvl-unlock-modal {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}
img,
svg,
.unit-portrait,
.dvl-ball,
.party-ball {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Campos de texto / editáveis continuam selecionáveis */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""],
.chat-input,
.chat-compose input,
.chat-compose textarea,
.modal input,
.modal textarea,
.float-win input,
.float-win textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* —— Base: nenhuma janela ultrapassa a viewport —— */
.float-win {
  max-width: calc(100vw - (var(--ui-gutter-x) + var(--ui-gutter-r)));
  max-height: calc(var(--vvh) - var(--ui-gutter-t) - var(--ui-gutter-b) - 8px);
  box-sizing: border-box;
  /* Acima da toolbar (30) e da sidebar (35); React/panel-stack sobe mais no foco */
  z-index: 60;
}
.float-win.is-front {
  z-index: 95;
}

.float-body {
  max-height: var(--ui-float-max-h);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal {
  max-width: calc(100vw - 24px);
  max-height: calc(var(--vvh) - 24px - var(--ui-gutter-b));
}

.modal-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.unit-hud{
  max-width: calc(100vw - (var(--ui-gutter-x) + var(--ui-gutter-r)));
  max-height: calc(var(--vvh) - var(--ui-gutter-t) - var(--ui-gutter-b));
  box-sizing: border-box;
}

.unit-hud.unit-hud-float {
  overflow: visible;
  max-height: min(
    var(--ui-float-max-h),
    calc(var(--vvh) - var(--ui-gutter-t) - var(--ui-gutter-b) - 8px)
  );
}

.unit-hud.unit-hud-docked {
  overflow: visible;
  top: var(--vv-top, 0px);
  bottom: auto;
  max-height: var(--vvh);
  height: var(--vvh);
}

.dock-float {
  max-width: calc(100vw - 24px);
  top: max(16px, var(--bar-top), calc(var(--ui-gutter-t) + 8px));
  bottom: max(74px, calc(var(--bar-bottom) + 4px), calc(var(--ui-gutter-b) + 8px));
}

.chat-overlay {
  width: min(600px, calc(100vw - (var(--ui-gutter-x) + var(--ui-gutter-r))));
  max-width: calc(100vw - (var(--ui-gutter-x) + var(--ui-gutter-r)));
}

/* Scrollbars — webkit (Chromium). NÃO usar scrollbar-width no *: ele herda e anula ::-webkit-scrollbar
   Thumb oculto por padrão; aparece só no hover da área rolável (ou enquanto .is-scrolling). */
:root{
  --sb-size:1px;
  --sb-thumb:rgba(255,255,255,.22);
  --sb-thumb-hover:rgba(255,255,255,.36);
}
*::-webkit-scrollbar{
  width:var(--sb-size);
  height:var(--sb-size);
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner{
  background:transparent;
}
*::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:99px;
  border:0;
  min-height:12px;
  transition:background .15s ease;
}
*:hover::-webkit-scrollbar-thumb,
*.is-scrolling::-webkit-scrollbar-thumb{
  background:var(--sb-thumb-hover);
}

/* Firefox (sem webkit) */
@supports (-moz-appearance:none){
  *{
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
  }
  *:hover,
  *.is-scrolling{
    scrollbar-color:var(--sb-thumb-hover) transparent;
  }
}

.float-win .float-body::-webkit-scrollbar,
.float-win.anz-win .float-body::-webkit-scrollbar,
.float-win.anz-win .anz-full::-webkit-scrollbar,
.modal .modal-body::-webkit-scrollbar,
.panel::-webkit-scrollbar,
.chat-log::-webkit-scrollbar,
.unit-hud .digivice-body::-webkit-scrollbar,
.unit-hud .unit-body::-webkit-scrollbar{
  width:var(--sb-size);
  height:var(--sb-size);
}

.chat-overlay.collapsed {
  width: auto;
  max-width: none;
}

.chat-overlay.collapsed .chat-toggle {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.chat-overlay.collapsed .chat-toggle:active {
  cursor: grabbing;
}

.chat-tabs {
  cursor: grab;
  touch-action: none;
}

.chat-head {
  cursor: grab;
  touch-action: none;
}

.chat-tabs:active,
.chat-head:active {
  cursor: grabbing;
}

.chat-tabs .chat-tab,
.chat-tabs .chat-collapse,
.chat-head .chat-collapse {
  cursor: pointer;
}

/* Toolbar: ver toolbar-responsive.css */

.spellbar {
  max-width: min(96vw, calc(100vw - var(--bar-space, 70px) - 32px));
  bottom: max(24px, calc(var(--bar-bottom) + 18px), calc(var(--ui-gutter-b) + 20px));
}

/* Larguras fixas → fluidas no desktop estreito também */
.party-win { width: min(240px, calc(100vw - 24px)); }
.vip-win { width: min(240px, calc(100vw - 24px)); }
.settings-win { width: min(248px, calc(100vw - 20px)); max-width: min(300px, calc(100vw - 12px)); }
.anz-win { width: min(280px, calc(100vw - 24px)); min-width: 168px; }
.digidex-tracker-win { width: min(280px, calc(100vw - 24px)); }
.bag-win,
.box-win,
.depot-win {
  width: min(300px, calc(100vw - 24px));
}

/* —— Tablet —— */
@media (max-width: 900px) {
  :root {
    --ui-gutter: 10px;
    --ui-float-max-h: min(68vh, calc(var(--vvh) - var(--bar-space, 70px) - 40px));
  }

  .dex-win { width: min(640px, calc(100vw - 16px)); }
  .ranking-win { width: min(680px, calc(100vw - 16px)); }
  .hunt-win { width: min(440px, calc(100vw - 16px)); }
  .shop-win.float-resizable { max-width: calc(100vw - 16px); }
  .market-win.float-resizable { max-width: calc(100vw - 16px); }
  .donate-win.float-resizable { max-width: calc(100vw - 16px); }

  .float-head {
    padding: 8px 8px 8px 10px;
    min-height: 40px;
  }

  .float-close,
  .modal-close,
  .dock-close {
    width: 32px;
    height: 32px;
    touch-action: manipulation;
  }

}

/* —— Mobile / narrow —— */
@media (max-width: 640px) {
  :root {
    --bar-edge: 8px;
    --ui-float-max-h: min(58vh, calc(var(--vvh) - var(--bar-space, 60px) - 28px));
  }

  .unit-hud {
    top: max(10px, calc(var(--bar-top) + 4px), var(--ui-gutter-t));
    left: max(8px, var(--ui-gutter-x));
    width: min(300px, calc(100vw - 16px));
  }

  .unit-hud.unit-hud-float {
    min-width: min(280px, calc(100vw - 16px));
    min-height: min(300px, calc(var(--vvh) - var(--bar-space, 60px) - 24px));
    max-height: calc(var(--vvh) - var(--bar-space, 60px) - 24px);
  }

  /* Dock no mobile → painel inferior, ainda redimensionável */
  .unit-hud.unit-hud-docked {
    top: auto;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: min(58vh, 480px);
    max-height: calc(var(--vvh) - 48px);
    z-index: 35;
    box-shadow: 0 -12px 40px #00000080;
  }

  .unit-hud.unit-hud-docked .unit-card {
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border);
    border-bottom: 0;
  }

  /* No mobile docked, a alça vira resize vertical no topo */
  .unit-hud.unit-hud-docked .unit-resize-handle.dock-left,
  .unit-hud.unit-hud-docked .unit-resize-handle.dock-right {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 20px;
    cursor: ns-resize;
    transform: none;
  }
  .unit-hud.unit-hud-docked .unit-resize-handle.dock-left::before,
  .unit-hud.unit-hud-docked .unit-resize-handle.dock-right::before,
  .unit-hud.unit-hud-docked .unit-resize-handle.dock-left::after,
  .unit-hud.unit-hud-docked .unit-resize-handle.dock-right::after {
    display: none !important;
    content: none !important;
  }
  .unit-hud.unit-hud-docked .unit-split-grip.unit-width-grip {
    width: 56px;
    height: 14px;
    flex-basis: 14px;
  }
  .unit-hud.unit-hud-docked .unit-split-grip.unit-width-grip::before {
    top: 50%;
    bottom: auto;
    left: 8px;
    right: 8px;
    width: auto;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(79, 214, 255, 0.45), transparent);
  }
  .unit-hud.unit-hud-docked .unit-split-grip.unit-width-grip::after {
    width: 40px;
    height: 5px;
  }
  .unit-hud.unit-hud-docked .unit-resize-handle:hover .unit-split-grip.unit-width-grip::after,
  .unit-hud.unit-hud-docked .unit-resize-handle:active .unit-split-grip.unit-width-grip::after {
    width: 52px;
    height: 6px;
    background: linear-gradient(90deg, #ffb04a, #ff7a22);
    border-color: rgba(255, 154, 46, 0.55);
    box-shadow: 0 0 12px rgba(255, 154, 46, 0.35);
  }

  .unit-dock-btn,
  .unit-collapse-btn {
    width: 30px;
    height: 30px;
    touch-action: manipulation;
  }

  .unit-dock-btn {
    right: 42px;
  }

  /* No float, botões ficam na drag-bar */
  .unit-hud-float .unit-drag-bar {
    height: 34px;
  }
  .unit-hud-float .unit-dock-btn,
  .unit-hud-float .unit-collapse-btn {
    top: 2px;
    width: 28px;
    height: 28px;
  }
  .unit-hud-float .unit-dock-btn {
    right: 40px;
  }
  .unit-hud-float .unit-collapse-btn {
    right: 8px;
  }
  .unit-hud-float .unit-name-row {
    padding-right: 0;
  }

  .unit-body {
    padding: 10px;
    gap: 10px;
  }

  .unit-name-row {
    padding-right: 64px;
  }
  .unit-hud-float .unit-name-row {
    padding-right: 0;
  }

  /* Float: largura quase total; posição horizontal corrigida via JS */
  .float-win {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px);
    border-radius: 12px;
  }

  .float-body {
    max-height: var(--ui-float-max-h);
    padding: 10px;
  }

  .float-title {
    font-size: 13px;
  }

  .dock-float {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    top: max(12px, var(--bar-top));
    bottom: max(70px, calc(var(--bar-bottom) + 8px));
  }

  .chat-overlay {
    left: max(8px, var(--ui-gutter-x));
    right: max(8px, var(--ui-gutter-r));
    width: auto;
    max-width: none;
    bottom: max(12px, calc(var(--bar-bottom) + 8px), var(--ui-gutter-b));
  }

  .hunt-diff {
    top: max(52px, calc(var(--bar-top) + 4px));
    font-size: 9px;
    padding: 3px 10px;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .maint-banner {
    top: max(78px, calc(var(--bar-top) + 28px));
    max-width: min(96vw, 620px);
    font-size: 11px;
    padding: 7px 12px;
  }

  .spellbar {
    bottom: max(16px, calc(var(--bar-bottom) + 14px), calc(var(--ui-gutter-b) + 16px));
  }

  .modal:not(.digidex-modal):not(.maest-modal):not(.task-modal):not(.calc-modal):not(.wiki-modal):not(.mkt-modal) {
    width: min(560px, calc(100vw - 16px));
    max-height: calc(var(--vvh) - 16px - var(--ui-gutter-b));
    border-radius: 14px;
  }

  .modal-head { padding: 12px 14px; }
  .modal-body { padding: 12px 14px; }
  .modal-close { width: 36px; height: 36px; }

  .bag-win,
  .box-win,
  .depot-win {
    --slot: 34px;
  }

  .dex-win:not(.float-resizable) .float-body {
    max-height: calc(var(--vvh) - var(--bar-space, 60px) - 72px);
  }
}

/* —— Phones estreitos —— */
@media (max-width: 400px) {
  .unit-hud {
    width: calc(100vw - 16px);
    left: 8px;
  }

  .unit-hud.unit-hud-float {
    min-width: 0;
  }

  .party-ball {
    width: 22px;
    height: 22px;
  }

}

/* —— Altura baixa (desktop/tablet; não sobrescreve sheet mobile ≤640) —— */
@media (max-height: 520px) and (min-width: 641px) {
  :root {
    --ui-float-max-h: min(70vh, calc(var(--vvh) - 56px));
  }

  .float-body {
    max-height: var(--ui-float-max-h);
  }

  .unit-hud.unit-hud-docked {
    height: var(--vvh) !important;
    max-height: var(--vvh) !important;
  }

  .spellbar {
    bottom: max(12px, calc(var(--bar-bottom) + 10px));
  }

  .dock-float {
    top: max(8px, var(--bar-top));
    bottom: max(56px, calc(var(--bar-bottom) + 4px));
  }
}

/* —— Landscape mobile: dock lateral compacto —— */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .unit-hud.unit-hud-docked {
    top: 0;
    bottom: 0;
    left: 0 !important;
    right: auto !important;
    width: min(42vw, 320px) !important;
    height: auto !important;
    max-width: 42vw;
    box-shadow: 8px 0 28px #00000066;
  }

  .unit-hud.unit-hud-docked .unit-card {
    border-radius: 0;
  }

  .float-win {
    width: min(520px, calc(100vw - 16px)) !important;
    max-height: calc(var(--vvh) - 12px);
  }

  .float-body {
    max-height: calc(var(--vvh) - 52px);
  }
}

/* —— Touch —— */
@media (hover: none) and (pointer: coarse) {
  .float-close,
  .unit-collapse-btn,
  .unit-dock-btn,
  .dock-close,
  .modal-close {
    min-width: 32px;
    min-height: 32px;
  }

  .party-ball {
    touch-action: manipulation;
  }

  .float-head {
    touch-action: none;
  }
}