@import url('/ombria/ui-theme.css');

/* Ritmo compartilhado. translate é independente do transform usado para centralizar/arrastar. */
:root {
  --om-enter: 220ms;
  --om-exit: 140ms;
  --om-feedback: 140ms;
  --om-ease-in: cubic-bezier(.16, 1, .3, 1);
  --om-ease-out: cubic-bezier(.4, 0, 1, 1);
}
[data-om-surface] {
  --om-rise: 8px;
  --om-control: 44px;
  animation: none !important;
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--om-enter) var(--om-ease-in), translate var(--om-enter) var(--om-ease-in);
  transition-property: opacity, translate, display, overlay;
  transition-behavior: allow-discrete;
}
[data-om-surface="panel"], [data-om-surface="notice"], [data-om-surface="menu"] { --om-rise: 4px; --om-enter: 180ms; }
[data-om-surface="window"] { --oh-glass: rgb(15 16 23 / 98%); }
.oh-tutorial-active #ohm-combat[data-om-surface], .tutorial-dialog[data-om-surface] { --om-rise: 0px; }
[data-om-surface][hidden], dialog[data-om-surface]:not([open]) {
  opacity: 0;
  translate: 0 var(--om-rise);
  transition-duration: var(--om-exit);
  transition-timing-function: var(--om-ease-out);
  pointer-events: none !important;
}
[data-om-surface][hidden] *, dialog[data-om-surface]:not([open]) * { pointer-events: none !important; }
@starting-style {
  [data-om-surface]:not([hidden]) { opacity: 0; translate: 0 var(--om-rise); }
  dialog[data-om-surface][open] { opacity: 0; translate: 0 var(--om-rise); }
}
[data-om-backdrop] {
  animation: none !important;
  transition: opacity var(--om-enter) ease-out, display var(--om-exit) allow-discrete;
}
[data-om-backdrop][hidden] { opacity: 0; pointer-events: none !important; }
@starting-style { [data-om-backdrop] { opacity: 0; } }
dialog[data-om-surface]::backdrop {
  background: rgb(5 7 12 / 72%);
  opacity: 0;
  transition: opacity var(--om-exit) ease-out, display var(--om-exit) allow-discrete, overlay var(--om-exit) allow-discrete;
}
dialog[data-om-surface][open]::backdrop { opacity: 1; }
dialog[data-om-surface]:not([open])::backdrop { pointer-events: none; }
@starting-style { dialog[data-om-surface][open]::backdrop { opacity: 0; } }

/* Cabeçalhos pertencem à janela; não recebem o zoom extra reservado ao HUD. */
[data-om-surface] > header { zoom: 1; flex-shrink: 0; }
[data-om-surface="window"] > header, [data-om-surface="dialog"] > header {
  gap: 12px;
  min-height: var(--om-control);
}
[data-om-surface] > header :is(h2, h3) { line-height: 1.3; text-wrap: balance; }
[data-om-surface] :is(button, input, select, textarea, summary) { touch-action: manipulation; }
[data-om-surface] button {
  transition: background-color var(--om-feedback) ease-out, border-color var(--om-feedback) ease-out, color var(--om-feedback) ease-out;
}
[data-om-surface] :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--oh-gold, #e0af68) !important;
  outline-offset: 2px;
}
[data-om-surface] :is(button, input, select, textarea):disabled { cursor: default; }
[data-om-surface] :is([id$="-close"], button[class$="-close"], button[aria-label^="Fechar"], button[aria-label^="Close"], .window-actions button, .oa-close, .op-close, .ammo-picker-close, .daily-reward-close, .poll-close, [data-ui-dismiss]) {
  min-width: var(--om-control);
  min-height: var(--om-control);
  flex-shrink: 0;
}
[data-om-surface] > header :is(button[id$="-close"], button[class$="-close"], button[aria-label^="Fechar"], button[aria-label^="Close"], .window-actions button, .oa-close, .op-close, [data-ui-dismiss]) {
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  border-radius: 6px;
}
[data-om-surface] :is([role="tablist"], .hunt-tabs, .trade-tabs, .oa-nav) { scroll-padding: 8px; }
[data-om-surface] :is(.oa-scroll,.op-scroll,.char-sheet-body,.outfit-columns,.hunt-detail,.hunt-list,.trade-panes,.inventory-body,.depot-body,.guild-body,.cyc-body,.hs-body,.ticket-body,.ticket-history,.friends-groups,.prey-slots,.blessings-list,.quick-sell-list,.imbue-columns,.party-members,.report-body,.trade-session-scroll,.options-body,.analyzer-body) {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-block: 12px;
}
[data-om-surface] :is(.text-prompt-buttons,.move-amount-buttons,.invite-footer,.opvp-btns) { gap: 10px; flex-wrap: wrap; }
[data-om-surface] :is(.text-prompt-buttons,.move-amount-buttons,.invite-footer,.opvp-btns) button { min-height: 44px; }
.text-prompt-dialog, .move-amount-dialog, .ammo-picker, .options-menu, .poll-window, .review-window, .spell-unlock-window, .opvp-modal {
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.text-prompt-dialog, .move-amount-dialog, .poll-window, .review-window, .opvp-modal { overflow-y: auto; }
.text-prompt-dialog input, .move-amount-dialog input { min-height: 44px; font-size: 16px; }
.text-prompt-dialog > header { font: 700 18px/1.4 var(--oh-num, Georgia, serif); color: var(--oh-gold-3, #e8c47c); }
.text-prompt-hint { line-height: 1.6; color: var(--oh-text, #c0caf5); }
.oa-dialog, .op-dialog { border-radius: 10px; border-color: var(--oh-gold-dark, #5a4a2d); background: var(--oh-ink-1, #13141c); }
.op-dialog > header { background: transparent; border-bottom-color: var(--oh-line, #3b4261); }
.op-dialog h2 { font-family: var(--oh-num, Georgia, serif); color: var(--oh-bright, #e8eaf2); }
.oa-status:empty { display: none; }
.oa-content[aria-busy="true"] { cursor: progress; }
.oa-replies button { text-align: left; line-height: 1.5; }
.oa-receipt { border-radius: 8px; }

.om-confirm { width: min(460px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--oh-gold-dark, #5a4a2d); border-top: 2px solid var(--oh-gold, #e0af68); border-radius: 10px; background: var(--oh-ink-1, #13141c); color: var(--oh-bright, #e8eaf2); box-shadow: 0 18px 64px #0009; font: 14px/1.6 var(--oh-ui, system-ui); }
.om-confirm > header { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--oh-line, #3b4261); }
.om-confirm h2 { margin: 0; font: 700 22px/1.3 var(--oh-num, Georgia, serif); }
.om-confirm > p { margin: 0; padding: 20px; }
.om-confirm > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px 16px; }
.om-confirm button { min-height: 44px; padding: 8px 14px; color: inherit; background: var(--oh-ink-4, #24283b); border: 1px solid var(--oh-line, #3b4261); border-radius: 6px; font: 600 14px/1.4 var(--oh-ui, system-ui); cursor: pointer; }
.om-confirm button:hover { border-color: var(--oh-gold, #e0af68); }
.om-confirm button.om-danger { border-color: #a45063; background: #4a2530; color: #ffd6dd; }
.opvp-modal { min-width: 0; width: min(420px, calc(100vw - 24px)); }
.opvp-modal small { color: var(--oh-text-2, #9aa5ce); }
.opvp-panel { max-width: calc(100vw - 24px); box-sizing: border-box; flex-wrap: wrap; }

@media (min-width: 1001px) {
  .ui-scaled[data-om-surface] { --om-control: calc(44px / var(--ui-zoom, 1)); }
}
@media (max-width: 1000px) {
  [data-om-surface="window"] { --om-rise: 12px; }
  #top-nav[data-om-surface] { --om-rise: 0px; transition-property: opacity, translate, display; }
  #top-nav[data-om-surface]:not(.open) { opacity: 0; translate: 18px 0; transition-duration: var(--om-exit); pointer-events: none; }
  @starting-style { #top-nav[data-om-surface].open { opacity: 0; translate: 18px 0; } }
  [data-om-surface="window"] :is(input, select, textarea), .oa-dialog :is(input, select), .op-dialog :is(input, select) { font-size: 16px; }
  [data-om-surface="window"] > footer button, [data-om-surface="window"] > nav button { min-height: 44px; }
  .om-confirm > footer { flex-wrap: wrap; }
  .om-confirm > footer button { flex: 1; }
  .oh-keyboard-open :is(.oa-dialog,.op-dialog,.om-confirm,.text-prompt-dialog,.move-amount-dialog) { max-height: calc(var(--oh-visible-height, 100dvh) - 16px); }
}
@media (max-width: 380px) {
  .oa-dialog:not(.oa-conversation) .oa-header { padding: 8px 12px; }
  .oa-dialog:not(.oa-conversation) .oa-header h2 { font-size: 19px; }
  .oa-dialog:not(.oa-conversation) .oa-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 8px 12px; gap: 6px; }
  .oa-dialog:not(.oa-conversation) .oa-nav button { flex: 0 0 auto; padding-inline: 12px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  [data-om-surface], [data-om-surface] *, [data-om-surface]::before, [data-om-surface]::after,
  [data-om-backdrop], dialog[data-om-surface]::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-om-surface] { translate: none !important; }
}