/* O gráfico dos terminais.
 *
 * Ele entra no lugar exato de um <img> que a captura deixou, então herda o
 * espaço daquele elemento. Duas coisas precisam ser explícitas:
 *
 *   - ALTURA. A imagem tinha altura própria; um <div> vazio tem zero, e a
 *     biblioteca desenharia num retângulo de 0px sem reclamar de nada.
 *   - COR. O corpo da captura computa preto; texto herdado nasce invisível
 *     sobre o tema escuro.
 */

.oc-grafico {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* `min-height` e não `height`: onde o container pai já dá altura (o
     vue-grid do terminal), o gráfico cresce junto; onde não dá, ele ainda
     assim existe. */
  min-height: 340px;
  height: 100%;
  color: var(--text-1, #f4f4f5);
}

.oc-graf-tela {
  flex: 1 1 auto;
  min-height: 260px;
}

/* ── período ─────────────────────────────────────────────────────────── */

.oc-graf-periodos {
  display: flex;
  gap: 2px;
  flex: none;
  padding: 4px 2px;
}

.oc-graf-periodos button {
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  opacity: 0.55;
  cursor: pointer;
}

.oc-graf-periodos button[aria-pressed='true'] {
  background: rgba(128, 128, 128, 0.18);
  opacity: 1;
}

.oc-graf-periodos button:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: -2px;
}

/* ── legenda ─────────────────────────────────────────────────────────── */

/* Sobreposta ao canvas, sem capturar o ponteiro: se ela recebesse o clique,
   arrastar o gráfico pararia justamente onde a legenda está — no topo, que
   é onde o cursor passa mais. */
.oc-graf-legenda {
  position: absolute;
  top: 34px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  pointer-events: none;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

.oc-graf-legenda strong {
  font-weight: 600;
  font-family: inherit;
}

/* A cor repete o que a vela já diz; quem não a distingue continua lendo os
   números, que são a informação. */
/* Mesmo par de sinal do resto da plataforma — ver `cores()` no grafico.js. */
.oc-graf-legenda .sobe { color: #00e08f; }
.oc-graf-legenda .desce { color: #ff4d4f; }


@media (max-width: 720px) {
  .oc-grafico { min-height: 260px; }
  .oc-graf-tela { min-height: 200px; }
  /* No telefone a legenda de 5 campos ocupa a tela toda; fica só o par e o
     fechamento, que é o que se lê de relance. */
  /* Só o cabeçalho (par + fechamento) encolhe no telefone; as linhas dos
     indicadores ("MA7: …") ficam inteiras — a moldura da Bybit vive delas. */
  .oc-leg-cab > span:not(:last-child):not(:nth-child(5)) { display: none; }

  /* 🔴 O gráfico ocupa 270px do meio da tela e ENGOLIA o gesto de rolar: a
   * lightweight-charts registra `touchmove` e chama `preventDefault` para
   * arrastar as velas, então o dedo que começava sobre ele não movia a
   * página. Medido em 29/08/2026 (440×956): gesto vertical em y=250, 350 e
   * 450 → `scrollY` zero nas três; o mesmo gesto 100px abaixo do gráfico
   * rolava 440px. Num terminal, o meio da tela é onde o dedo cai primeiro.
   *
   * 🔑 `pan-y` e não `auto`: com `pan-y` o NAVEGADOR fica dono do eixo
   * vertical — e um `preventDefault` do script não tem como tomá-lo de volta,
   * que é justamente o que uma regra de CSS resolve e um patch no JS da
   * biblioteca não resolveria. O eixo horizontal segue com a biblioteca, e é
   * nele que o gráfico anda no tempo. */
  .oc-graf-tela { touch-action: pan-y; }
}

/* A barra de período da captura, que ficou sem o Vue que a ligava.
 *
 * `!important` não é atalho: o reset desta captura prefixa cada regra com
 * `[dir]` — elemento + atributo, especificidade (0,1,1) — e ganha de
 * qualquer classe única. Sem isto a regra existiria e não valeria. */
.oc-graf-morto {
  display: none !important;
}

/* ── a barra da captura, agora viva ──────────────────────────────────── */

/* Controle que passou a funcionar ganha a aparência de quem funciona: sem
   isto ele continua parecendo enfeite, e ninguém tenta clicar. */
.oc-barra-viva .oc-barra-clicavel {
  cursor: pointer;
}

.oc-barra-viva .oc-barra-clicavel:hover {
  opacity: 1;
  filter: brightness(1.35);
}

.oc-barra-viva .oc-barra-clicavel:focus-visible {
  outline: 2px solid #f7931a;
  outline-offset: 2px;
  border-radius: 4px;
}

.oc-barra-viva .oc-barra-ativo {
  filter: brightness(1.5);
}

/* Controle SEM fonte de dado sai da tela.
 *
 * 🔑 Não é esconder problema: é o contrário. `1s` não existe na fonte (a
 * menor vela é de 1 minuto) e sobrepor ordens precisa de API que esta tela
 * ainda não tem. Deixá-los visíveis prometeria função que não há — e quem
 * clica e não vê nada conclui que a plataforma travou.
 *
 * `!important` porque o reset desta captura prefixa cada regra com `[dir]`,
 * o que dá (0,1,1) e ganha de classe única. */
/* O popup de intervalos do telefone trouxe da captura um "Edit" no título e
 * um bloco "Customize intervals" com um "+" — controles do Vue da origem,
 * sem nenhum código atrás aqui. Controle que não faz nada sai da tela. */
/* Com dez períodos fora, sobram seis células num flex `space-between` de
 * quatro colunas: a última linha ficava `4h ………… 1d`, um em cada ponta.
 * Três por linha: 1m 5m 15m / 1h 4h 1d. `!important` pelo mesmo motivo das
 * regras acima: o CSS da captura é escopado e ganha de classe nossa. */
[dir] .all-intervals .content { justify-content: flex-start !important; gap: 10px !important; }
[dir] .all-intervals .content > div { flex: 0 0 calc((100% - 20px) / 3) !important; }

[dir] .all-intervals .header-edit-wrap,
[dir] .all-intervals .custom-interval { display: none !important; }

.oc-barra-sem-fonte {
  display: none !important;
}

.oc-barra-recado {
  margin-left: 10px;
  font-size: 11px;
  opacity: 0.75;
}

/* O menu suspenso da captura, quando aberto.
 *
 * O `display:none` dele vem de um `style=""` inline, e atributo de estilo
 * ganha de qualquer folha — por isso `!important`, que aqui é a única forma
 * de sobrepor. */
.oc-pop-aberto {
  display: block !important;
  z-index: 60 !important;
}

/* A caixinha do alerta de preço. Vai no <body> e não dentro da barra: a
   barra tem `overflow` recortando, e um popover dentro dela nasce cortado. */
.oc-alerta-caixa {
  position: fixed;
  z-index: 80;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.3));
  border-radius: 10px;
  background: var(--bx-bg-one, #16171b);
  color: var(--text-1, #f4f4f5);
  font-size: 13px;
}

.oc-alerta-caixa .oc-input {
  width: 130px;
  padding: 7px 10px;
  border: 1px solid var(--bx-line-two, rgba(128, 128, 128, 0.3));
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.oc-alerta-caixa .oc-botao {
  margin: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: #f7931a;
  color: #101114;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ── menu de indicadores e ajustes (06/09/2026) ─────────────────────────
 * Ancorado ao ícone da barra por `abrePop` (fixed, no body). */
.oc-ind-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  min-width: 232px;
  padding: 8px 6px;
  border-radius: 10px;
  background: #141416;
  border: 1px solid #2a2a2e;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color: #e8e8ec;
  font-size: 12.5px;
}
[dir] .oc-ind-menu { margin: 0; }
.oc-ind-titulo {
  padding: 6px 10px 4px;
  color: #7d7f8a;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.oc-ind-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
}
.oc-ind-item:hover { background: rgba(255, 255, 255, 0.05); }
[dir] .oc-ind-item input { margin: 0; width: 14px; height: 14px; accent-color: #f7931a; }
.oc-ind-cor { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }

/* ── barra de desenhos (grafico-desenhos.js, 06/09/2026) ────────────────
 * Coluna de ferramentas colada à esquerda do painel, como no TradingView.
 * O host do gráfico vira referência de posição; a barra fica sobre o canvas
 * e some no celular (o próprio script não a monta em `body.oc-mv`). */
[data-oc-grafico] { position: relative; }
/* 07/09/2026 ("quero igual 100 %"): a coluna de ferramentas do TradingView —
   à esquerda do painel, da altura dele, ícones em cinza, o ativo em laranja
   da marca (lá é azul), separadores finos, o "‹" no pé. O gráfico começa
   depois dela (`margin-left` no painel), como lá. */
.oc-des-barra {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #0b0b0d;
  border-right: 1px solid #1f2027;
  overflow: hidden;
}
[dir] .oc-des-barra { margin: 0; padding: 10px 0 6px; }
.oc-des-barra.oc-recolhida { display: none; }
/* Submenu do grupo "previsão": posição longa / curta. */
.oc-des-sub { position: absolute; left: 56px; z-index: 7; display: flex; flex-direction: column; min-width: 180px; background: #141416; border: 1px solid #2a2a2e; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
[dir] .oc-des-sub { padding: 6px; margin: 0; }
.oc-des-sub-item { height: 32px; border: 0; background: transparent; color: #d1d4dc; font: 13px/1 -apple-system, "Inter", "Segoe UI", sans-serif; text-align: left; border-radius: 6px; cursor: pointer; }
[dir] .oc-des-sub-item { padding: 0 10px; }
.oc-des-sub-item:hover { background: #1f2027; color: #fff; }
[data-oc-grafico]:not(.oc-sem-barra) .oc-graf-tela,
[data-oc-grafico]:not(.oc-sem-barra) .oc-graf-pe { margin-left: 52px; }
[data-oc-grafico].oc-sem-barra .oc-graf-legenda { left: 12px; }
.oc-des-bt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b2b5be;
  cursor: pointer;
}
.oc-des-bt svg { width: 22px; height: 22px; }
[dir] .oc-des-bt { padding: 0; }
.oc-des-bt:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.oc-des-bt.oc-on { color: #f7931a; background: rgba(247, 147, 26, 0.12); }
.oc-des-bt.oc-armado { color: #ff4d4f; }
.oc-des-bt.oc-apagado, .oc-des-bt:disabled { color: #4a4c55; cursor: default; }
.oc-des-bt.oc-des-recolhe { margin-top: auto; width: 28px; height: 24px; color: #6b6d75; }
.oc-des-sep { display: block; width: 26px; height: 1px; margin: 3px 0; background: #2a2a2e; flex: 0 0 auto; }
.oc-des-barra.oc-desenhando ~ .oc-graf-tela,
[data-oc-grafico]:has(.oc-des-barra.oc-desenhando) .oc-graf-tela { cursor: crosshair; }

/* ── o cabeçalho do TradingView (grafico-barra.js `montaTopoTV`) ─────── */
.oc-capt-oculto { display: none !important; }
.oc-tv-viva { display: flex !important; align-items: center; min-height: 44px; }
.oc-tv-topo {
  display: flex; align-items: center; gap: 2px;
  width: 100%;
  font: 14px/1 -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
  color: #b2b5be;
}
[dir] .oc-tv-topo { padding: 0 8px 0 12px; margin: 0; }
.oc-tv-rot { color: #b2b5be; }
[dir] .oc-tv-rot { margin-right: 10px; }
.oc-tv-int {
  height: 30px; border: 0; border-radius: 6px; background: transparent;
  color: #b2b5be; font: inherit; cursor: pointer;
}
[dir] .oc-tv-int { padding: 0 10px; }
.oc-tv-int:hover { color: #fff; background: rgba(255,255,255,.06); }
.oc-tv-int.oc-on { color: #fff; background: #2a2e39; }
.oc-tv-int:disabled { color: #4a4c55; cursor: default; }
.oc-tv-bt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; border: 0; border-radius: 6px;
  background: transparent; color: #b2b5be; cursor: pointer;
}
[dir] .oc-tv-bt { padding: 0; margin: 0 1px; }
.oc-tv-bt:hover { color: #fff; background: rgba(255,255,255,.06); }
.oc-tv-bt.oc-on { color: #f7931a; }
.oc-tv-bt.oc-apagado, .oc-tv-bt:disabled { color: #4a4c55; cursor: default; }
.oc-tv-bt.oc-tv-seta { width: 24px; }
.oc-tv-sep { display: inline-block; width: 1px; height: 22px; background: #2a2e39; }
[dir] .oc-tv-sep { margin: 0 8px; }
.oc-tv-dir { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.oc-tv-dir .oc-fonte { position: static; transform: none; color: #b2b5be; font: inherit; }
[dir] .oc-tv-dir .oc-fonte { padding: 4px 4px; margin: 0; }
.oc-tv-pop {
  position: fixed; top: 0; left: 0; z-index: 1200;
  display: flex; flex-direction: column; min-width: 150px;
  background: #141416; border: 1px solid #2a2a2e; border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
}
[dir] .oc-tv-pop { padding: 6px; margin: 0; }
.oc-tv-pop-item {
  display: flex; align-items: center; gap: 10px; height: 32px;
  border: 0; border-radius: 6px; background: transparent; color: #d1d4dc;
  font: 13px/1 -apple-system, "Inter", "Segoe UI", sans-serif; text-align: left; cursor: pointer;
}
[dir] .oc-tv-pop-item { padding: 0 10px; }
.oc-tv-pop-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.oc-tv-pop-item.oc-on { color: #f7931a; }

/* legenda e rodapé no tamanho de lá */
.oc-graf-legenda { font-size: 14px; top: 12px; gap: 6px; }
.oc-leg-cab strong { font-size: 15px; }
.oc-leg-linha { font-size: 14px; color: #b2b5be; }
.oc-leg-nome { color: #b2b5be; }
.oc-leg-alt { width: 46px; height: 28px; font-size: 12px; }
.oc-leg-volume { position: absolute; left: 62px; z-index: 3; display: flex; gap: 8px; pointer-events: none; font: 14px/1.2 -apple-system, "Inter", "Segoe UI", sans-serif; }
[data-oc-grafico].oc-sem-barra .oc-leg-volume { left: 12px; }
.oc-graf-pe { flex: 0 0 34px; font-size: 14px; font-family: -apple-system, "Inter", "Segoe UI", sans-serif; }
.oc-pe-bt { height: 26px; font-size: 14px; }
[dir] .oc-pe-bt { padding: 0 9px; }
.oc-pe-esq { display: inline-flex; align-items: center; gap: 12px; }
.oc-pe-cal { display: inline-flex; align-items: center; color: #8b8d95; cursor: pointer; position: relative; }
.oc-pe-cal:hover { color: #fff; }
.oc-pe-data { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* ── legenda no desenho do TradingView (06/09/2026) ─────────────────── */
.oc-graf-legenda { flex-direction: column; gap: 3px; left: 56px; font-size: 12px; opacity: 1; }
.oc-leg-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.oc-leg-cab strong { font-size: 13px; color: #fff; }
.oc-leg-meta { color: #8b8d95; }
.oc-leg-rot { color: #8b8d95; margin-right: 1px; }
.oc-leg-vol { color: #a8a8a8; }
.oc-leg-ind { display: flex; flex-direction: column; gap: 2px; }
.oc-leg-linha { display: flex; align-items: center; gap: 7px; color: #c9c9cf; }
.oc-leg-linha i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.oc-leg-nome { color: #8b8d95; min-width: 44px; }
.oc-leg-val { font-variant-numeric: tabular-nums; }
.oc-graf-legenda.oc-recolhida .oc-leg-ind { display: none; }
.oc-leg-alt {
  align-self: flex-start;
  pointer-events: auto;
  width: 22px; height: 16px;
  border: 1px solid #2a2a2e; border-radius: 4px;
  background: rgba(20,20,22,.8); color: #8b8d95;
  font: 10px/1 ui-monospace, monospace; cursor: pointer;
}
[dir] .oc-leg-alt { padding: 0; margin: 2px 0 0; }
.oc-leg-alt:hover { color: #fff; }
/* Comparar: a linha do comparado na legenda e a caixa de busca do pop. */
.oc-leg-comp { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c9c9cf; pointer-events: auto; }
.oc-leg-comp i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.oc-leg-comp-nome { color: #d1d4dc; font-weight: 600; }
.oc-leg-comp-x { border: 0; background: transparent; color: #8b8d95; font-size: 14px; line-height: 1; cursor: pointer; }
[dir] .oc-leg-comp-x { padding: 0 2px; margin: 0; }
.oc-leg-comp-x:hover { color: #fff; }
.oc-tv-pop-comp { min-width: 250px; }
.oc-tv-comp-caixa { width: 100%; height: 30px; border: 1px solid #2a2a2e; border-radius: 6px; background: #0b0b0d; color: #fff; font: 13px -apple-system, "Inter", "Segoe UI", sans-serif; box-sizing: border-box; outline: none; }
[dir] .oc-tv-comp-caixa { padding: 0 8px; margin: 0 0 6px; }
.oc-tv-comp-caixa:focus { border-color: #f7931a; }
.oc-tv-comp-lista { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }

/* ── o pé: hora · % · log · auto ─────────────────────────────────────── */
.oc-graf-pe {
  flex: 0 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #1f2027;
  color: #8b8d95;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
[dir] .oc-graf-pe { padding: 0 8px 0 12px; margin: 0; }
.oc-pe-hora { font-variant-numeric: tabular-nums; }
.oc-pe-dir { display: flex; gap: 2px; }
.oc-pe-bt {
  border: 0; border-radius: 4px; background: transparent; color: #8b8d95;
  font: inherit; cursor: pointer; height: 18px;
}
[dir] .oc-pe-bt { padding: 0 7px; }
.oc-pe-bt:hover { color: #fff; background: rgba(255,255,255,.06); }
.oc-pe-bt.oc-on { color: #fff; background: rgba(255,255,255,.12); }

/* ── "Mark price ˅" na barra ─────────────────────────────────────────── */
/* Ancorado à direita do cabeçalho: como filho do flex ele caía numa segunda
   linha (medido no ar, 06/09 23:5x). */
.oc-barra-viva { position: relative; }
.oc-fonte {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  border: 0; border-radius: 6px;
  background: transparent; color: #c9c9cf;
  font: 12px/1 inherit; cursor: pointer;
  appearance: auto;
}
[dir] .oc-fonte { padding: 4px 6px; margin-right: 6px; }
.oc-fonte:hover { background: rgba(255,255,255,.06); }
.oc-fonte option { background: #141416; color: #e8e8ec; }
@media (max-width: 720px) {
  .oc-graf-legenda { left: 10px; }
  .oc-graf-pe { display: none; }
}
.oc-des-texto {
  position: absolute; z-index: 6;
  width: 180px; height: 24px;
  border: 1px solid #f7931a; border-radius: 5px;
  background: #141416; color: #fff;
  font: 12px/1 -apple-system, "Inter", "Segoe UI", sans-serif;
}
[dir] .oc-des-texto { padding: 0 8px; margin: 0; }
.oc-leg-moeda { width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; }
[dir] .oc-leg-moeda { margin: 0 4px 0 0; }
.oc-leg-nome { min-width: 0; white-space: nowrap; }

/* ── o celular no desenho da Bybit (grafico-movel.js, 07/09/2026) ───────── */
body.oc-by .oc-tv-topo, body.oc-by .oc-leg-cab, body.oc-by .oc-leg-alt, body.oc-by .oc-graf-pe { display: none !important; }
/* Medidas da captura da Bybit (07/09/2026, 430pt): legenda ~10px proporcional
 * com 12px de linha, a 16px da borda; nome e valor na cor da linha. */
body.oc-by .oc-graf-legenda { left: 16px; top: 4px; gap: 0; font: 400 10px/12px -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; letter-spacing: 0; }
body.oc-by .oc-leg-ind { flex-direction: row; flex-wrap: wrap; gap: 0 7px; }
body.oc-by .oc-leg-linha { gap: 3px; font-size: 10px; line-height: 12px; }
body.oc-by .oc-leg-linha i { display: none; }
body.oc-by .oc-leg-nome { min-width: 0; }
body.oc-by .oc-leg-quebra { flex-basis: 100%; height: 0; }
.oc-leg-quebra { display: none; }
body.oc-by .oc-leg-quebra { display: block; }
.oc-leg-paineis { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; z-index: 3; }
.oc-leg-painel { position: absolute; left: 62px; display: flex; flex-wrap: wrap; gap: 2px 8px; font: 13px/1.2 -apple-system, "Inter", "Segoe UI", sans-serif; color: #b2b5be; }
[data-oc-grafico].oc-sem-barra .oc-leg-painel, body.oc-by .oc-leg-painel { left: 10px; }
body.oc-by .oc-leg-painel { left: 16px; gap: 0 7px; font-size: 10px; line-height: 12px; }
.oc-leg-painel .oc-leg-nome { color: #8b8d95; }
body.oc-by .oc-by-viva { display: flex !important; align-items: center; min-height: 32px; }
.oc-by-topo { display: flex; align-items: center; gap: 0; width: 100%; font: 13px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; color: #8b8d95; }
[dir] .oc-by-topo { padding: 0 6px 0 8px; margin: 0; }
.oc-by-int { height: 28px; border: 0; background: transparent; color: #8b8d95; font: inherit; cursor: pointer; white-space: nowrap; }
[dir] .oc-by-int { padding: 0 7px; }
.oc-by-int.oc-on { color: #fff; font-weight: 600; }
.oc-by-int.oc-apagado, .oc-by-int:disabled { color: #4a4c55; }
.oc-by-depth-bt { margin-left: auto; }
.oc-by-depth-bt.oc-on { color: #fff; font-weight: 600; }
[dir] .oc-by-depth-bt { border-left: 1px solid #2a2a2e; margin-left: auto; padding-left: 10px; }
.oc-by-icones { display: inline-flex; align-items: center; gap: 2px; }
[dir] .oc-by-icones { border-left: 1px solid #2a2a2e; margin-left: 6px; padding-left: 6px; }
.oc-by-ico { width: 28px; height: 28px; border: 0; background: transparent; color: #b2b5be; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
[dir] .oc-by-ico { padding: 0; }
.oc-by-ico.oc-apagado, .oc-by-ico:disabled { color: #4a4c55; }
.oc-by-pop { position: fixed; z-index: 1200; display: flex; flex-direction: column; min-width: 120px; background: #141416; border: 1px solid #2a2a2e; border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
[dir] .oc-by-pop { padding: 6px; margin: 0; }
.oc-by-pop-item { height: 32px; border: 0; background: transparent; color: #d1d4dc; font: 13px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; text-align: left; cursor: pointer; border-radius: 6px; }
[dir] .oc-by-pop-item { padding: 0 10px; }
.oc-by-abas { flex: 0 0 34px; display: flex; align-items: center; border-top: 1px solid #1f2027; background: #0b0b0d; }
.oc-by-abas-rolo { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.oc-by-abas-rolo::-webkit-scrollbar { display: none; }
[dir] .oc-by-abas-rolo { padding: 0 6px; }
.oc-by-aba { flex: 0 0 auto; height: 28px; border: 0; background: transparent; color: #6b6d75; font: 600 13px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; cursor: pointer; }
[dir] .oc-by-aba { padding: 0 8px; }
.oc-by-aba.oc-on { color: #fff; }
.oc-by-sep { flex: 0 0 1px; height: 18px; background: #2a2a2e; }
[dir] .oc-by-sep { margin: 0 4px; }
.oc-by-cheia { flex: 0 0 34px; height: 34px; border: 0; background: transparent; color: #b2b5be; display: inline-flex; align-items: center; justify-content: center; }
[dir] .oc-by-cheia { padding: 0; border-left: 1px solid #1f2027; }
.oc-by-caixa { position: absolute; right: 2px; z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 0; background: #0b0b0d; border: 1px solid #e4e6eb; border-radius: 5px; font: 500 11px/13px -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; text-align: right; }
[dir] .oc-by-caixa { padding: 3px 5px; margin: 0; }
.oc-by-caixa-ult { color: #fff; }
.oc-by-caixa-marca { color: #f7931a; }
.oc-by-caixa-cont { color: #fff; font-weight: 500; }
body.oc-by [data-oc-grafico]:not(.oc-sem-barra) .oc-graf-tela { margin-left: 0; }
/* O ⤢ da captura fica no canto do `.kline-view`, por cima dos ícones da Bybit; a tela cheia vive na barra de baixo. */
body.oc-by .kline-view > .full-screen { display: none !important; }
/* A barra lateral de desenhos é do desktop; no celular o lápis abre a barra da Bybit embaixo. */
body.oc-by .oc-des-barra { display: none !important; }
body.oc-by [data-oc-grafico] .oc-graf-legenda { left: 16px; }
body.oc-by [data-oc-grafico] .oc-leg-painel { left: 16px; }
/* Tela cheia por CSS (o Safari do iPhone não tem requestFullscreen para elementos): host fixo
 * cobrindo a tela sob a barra de períodos, que fica fixa no topo. */
/* Tranca a rolagem do documento (regra da captura vence sem o !important; no WebKit de
 * desktop a barra clássica de 5px ainda comeria a largura da camada). */
html:has(body.oc-by-cheia-ativa), body.oc-by-cheia-ativa { overflow: hidden !important; }
/* 🔴 Não é `fixed` no host: o item do grid tem `transform` e prende o fixed. É uma camada no body. */
.oc-by-cheia-camada { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; background: #0b0b0d; }
[dir] .oc-by-cheia-camada { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); margin: 0; }
.oc-by-cheia-camada .oc-by-viva { flex: 0 0 auto; width: 100%; }
[data-oc-grafico].oc-cheia { flex: 1 1 auto; height: auto !important; min-height: 0; width: 100%; }
/* Depth: o canvas cobre a área do K-line (que segue vivo, só escondido) até a barra MA…RSI. */
/* 🔴 `canvas` é substituído: com `top`/`bottom` e altura auto a altura sai da PROPORÇÃO 300×150 e o `bottom` é ignorado — a altura tem de ser explícita. */
.oc-by-depth { display: none; position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: calc(100% - 34px); background: #0b0b0d; }
[data-oc-grafico].oc-by-profundidade .oc-by-depth { display: block; }
[data-oc-grafico].oc-by-profundidade :is(.oc-graf-legenda, .oc-leg-paineis, .oc-by-caixa) { visibility: hidden; }
/* ── barra de desenho: coluna à ESQUERDA do gráfico (dono, 07/09/2026 01:15,
 * "coloque na vertical do lado esquerdo"), do topo até a barra MA…RSI, que
 * continua visível. Rola quando os 13 botões não cabem; o ✕ fica preso no pé.
 * O gráfico e as legendas se afastam 36px enquanto se desenha. ──────────── */
.oc-by-des { display: none; position: absolute; left: 0; top: 0; bottom: 34px; z-index: 5; width: 36px; flex-direction: column; align-items: center; background: rgba(11,11,13,.94); border-right: 1px solid #1f2027; }
[data-oc-grafico].oc-by-desenhando .oc-by-des { display: flex; }
[data-oc-grafico].oc-by-desenhando .oc-graf-tela { cursor: crosshair; }
body.oc-by [data-oc-grafico].oc-by-desenhando .oc-graf-tela { margin-left: 36px; }
body.oc-by [data-oc-grafico].oc-by-desenhando .oc-graf-legenda,
body.oc-by [data-oc-grafico].oc-by-desenhando .oc-leg-painel { left: 50px; }
.oc-by-des-rolo { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
/* Quando os botões não cabem, o pé da coluna esmaece para avisar que rola; some no fim. */
.oc-by-des.oc-rola:not(.oc-no-fim) .oc-by-des-rolo { -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.oc-by-des-rolo::-webkit-scrollbar { display: none; }
[dir] .oc-by-des-rolo { padding: 4px 0; }
.oc-by-des .oc-by-ico { flex: 0 0 30px; width: 32px; height: 30px; color: #8b8d95; border-radius: 6px; }
.oc-by-des .oc-by-ico.oc-on { color: #fff; background: #1f2027; }
.oc-by-des .oc-by-ico.oc-armado { color: #ef454a; }
.oc-by-des .oc-by-sep { flex: 0 0 1px; width: 18px; height: 1px; }
[dir] .oc-by-des .oc-by-sep { margin: 3px 0; }
.oc-by-des-x { flex: 0 0 34px; width: 36px; height: 34px; color: #b2b5be; }
[dir] .oc-by-des-x { border-left: 0; border-top: 1px solid #1f2027; }
/* ── folhas (indicadores · ajustes): sobem do pé da tela ─────────────────── */
.oc-by-folha-fundo { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.oc-by-folha { width: 100%; max-height: 72vh; overflow-y: auto; background: #141416; border-radius: 14px 14px 0 0; color: #d1d4dc; font: 14px/1.3 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
[dir] .oc-by-folha { padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; }
.oc-by-folha-cab { display: flex; align-items: center; justify-content: space-between; height: 46px; border-bottom: 1px solid #1f2027; }
[dir] .oc-by-folha-cab { padding: 0 8px 0 16px; }
.oc-by-folha-cab strong { font-size: 15px; color: #fff; }
.oc-by-folha-x { width: 34px; height: 34px; border: 0; background: transparent; color: #b2b5be; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
[dir] .oc-by-folha-x { padding: 0; }
[dir] .oc-by-folha-corpo { padding: 4px 16px 0; }
.oc-by-folha-secao { font-size: 12px; color: #8b8d95; text-transform: uppercase; letter-spacing: .04em; }
[dir] .oc-by-folha-secao { margin: 12px 0 4px; }
.oc-by-folha-linha { display: flex; align-items: center; justify-content: space-between; min-height: 40px; border-bottom: 1px solid #1a1b1f; }
.oc-by-folha-tx { display: flex; flex-direction: column; gap: 1px; }
.oc-by-folha-nome { color: #fff; }
.oc-by-folha-dica { font-size: 11px; color: #8b8d95; }
.oc-by-sw { flex: 0 0 40px; width: 40px; height: 22px; border: 0; border-radius: 11px; background: #2a2a2e; position: relative; cursor: pointer; }
[dir] .oc-by-sw { padding: 0; margin: 0; }
.oc-by-sw i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.oc-by-sw.oc-on { background: #f7931a; }
.oc-by-sw.oc-on i { transform: translateX(18px); }
.oc-by-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[dir] .oc-by-chips { margin: 2px 0 6px; }
.oc-by-chip { height: 30px; border: 1px solid #2a2a2e; border-radius: 15px; background: transparent; color: #d1d4dc; font: 13px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; }
[dir] .oc-by-chip { padding: 0 12px; }
.oc-by-chip.oc-on { border-color: #f7931a; color: #f7931a; }
.oc-by-folha-bt { width: 100%; height: 40px; border: 1px solid #2a2a2e; border-radius: 8px; background: transparent; color: #fff; font: 14px/1 -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif; }
[dir] .oc-by-folha-bt { margin: 12px 0 0; padding: 0; }