/* Dark terminal hover ticket. Side colors follow the Flow Feed legend; values stay white. */
.fish-flow-tooltip {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    width: 196px;
    max-width: calc(100vw - 16px);
    padding: 0;
    border: 1px solid #565d67;
    border-radius: 6px;
    background: #050607;
    color: #e6e6e6;
    box-shadow: none;
    font: 400 11px/1.35 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    text-shadow: none;
    overflow-wrap: anywhere;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
}
.fish-flow-tooltip[hidden] { display: none; }
/* Chat bubble tail: the outer triangle draws the border, the inner one the fill. */
.fish-flow-tooltip::before,
.fish-flow-tooltip::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }
.fish-flow-tooltip[data-tail='none']::before,
.fish-flow-tooltip[data-tail='none']::after { display: none; }
.fish-flow-tooltip[data-tail='bottom']::before { top: 100%; left: var(--fish-flow-tooltip-tail-x); margin-left: -8px; border-width: 9px 8px 0; border-top-color: #565d67; }
.fish-flow-tooltip[data-tail='bottom']::after { top: calc(100% - 1px); left: var(--fish-flow-tooltip-tail-x); margin-left: -7px; border-width: 8px 7px 0; border-top-color: #050607; }
.fish-flow-tooltip[data-tail='top']::before { bottom: 100%; left: var(--fish-flow-tooltip-tail-x); margin-left: -8px; border-width: 0 8px 9px; border-bottom-color: #565d67; }
.fish-flow-tooltip[data-tail='top']::after { bottom: calc(100% - 1px); left: var(--fish-flow-tooltip-tail-x); margin-left: -7px; border-width: 0 7px 8px; border-bottom-color: #050607; }
.fish-flow-tooltip[data-tail='left']::before { right: 100%; top: var(--fish-flow-tooltip-tail-y); margin-top: -8px; border-width: 8px 9px 8px 0; border-right-color: #565d67; }
.fish-flow-tooltip[data-tail='left']::after { right: calc(100% - 1px); top: var(--fish-flow-tooltip-tail-y); margin-top: -7px; border-width: 7px 8px 7px 0; border-right-color: #050607; }
.fish-flow-tooltip[data-tail='right']::before { left: 100%; top: var(--fish-flow-tooltip-tail-y); margin-top: -8px; border-width: 8px 0 8px 9px; border-left-color: #565d67; }
.fish-flow-tooltip[data-tail='right']::after { left: calc(100% - 1px); top: var(--fish-flow-tooltip-tail-y); margin-top: -7px; border-width: 7px 0 7px 8px; border-left-color: #050607; }
.fish-flow-tooltip .fish-flow-tooltip__header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 7px;
    border-bottom: 1px solid #2e3238;
}
.fish-flow-tooltip .fish-flow-tooltip__time { color: #e0ac55; }
.fish-flow-tooltip .fish-flow-tooltip__date,
.fish-flow-tooltip .fish-flow-tooltip__dim { color: #6b7178; }
.fish-flow-tooltip .fish-flow-tooltip__price { margin-left: auto; color: #6b7178; white-space: nowrap; }
.fish-flow-tooltip .fish-flow-tooltip__price b { color: #e6e6e6; font-weight: 400; }
.fish-flow-tooltip .fish-flow-tooltip__iv b { color: #e6e6e6; font-weight: 400; }
.fish-flow-tooltip .fish-flow-tooltip__pnl em { color: #6b7178; font-style: normal; }
.fish-flow-tooltip .fish-flow-tooltip__pnl small { font-size: 9px; }
.fish-flow-tooltip .is-up { color: #45e08a; }
.fish-flow-tooltip .is-down { color: #ff4466; }
.fish-flow-tooltip .fish-flow-tooltip__body { padding: 3px 7px; }
.fish-flow-tooltip .fish-flow-tooltip__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: transparent;
    color: inherit;
    font: inherit;
}
.fish-flow-tooltip .fish-flow-tooltip__table th,
.fish-flow-tooltip .fish-flow-tooltip__table td {
    padding: 0 0 0 6px;
    border: 0;
    background: transparent;
    color: #e6e6e6;
    font: inherit;
    text-align: right;
}
.fish-flow-tooltip .fish-flow-tooltip__table th { padding-left: 0; text-align: left; font-weight: 400; }
.fish-flow-tooltip .fish-flow-tooltip__table td:last-child { width: 62px; }
.fish-flow-tooltip .fish-flow-tooltip__ask > th, .fish-flow-tooltip em.fish-flow-tooltip__ask { color: #45e08a; }
.fish-flow-tooltip .fish-flow-tooltip__mid > th, .fish-flow-tooltip em.fish-flow-tooltip__mid { color: #5b7cff; }
.fish-flow-tooltip .fish-flow-tooltip__bid > th, .fish-flow-tooltip em.fish-flow-tooltip__bid { color: #ff4466; }
.fish-flow-tooltip .fish-flow-tooltip__none > th, .fish-flow-tooltip em.fish-flow-tooltip__none { color: #9aa0a6; }
.fish-flow-tooltip .fish-flow-tooltip__total > * { border-top: 1px solid #2e3238; font-weight: 600; }
.fish-flow-tooltip .fish-flow-tooltip__table .fish-flow-tooltip__total > th { color: #b48cff; }
.fish-flow-tooltip .fish-flow-tooltip__meter { display: flex; height: 3px; margin-top: 3px; }
.fish-flow-tooltip .fish-flow-tooltip__meter i { display: block; min-width: 2px; }
.fish-flow-tooltip .fish-flow-tooltip__meter .fish-flow-tooltip__ask { background: repeating-linear-gradient(90deg, #45e08a 0 2px, transparent 2px 3px); }
.fish-flow-tooltip .fish-flow-tooltip__meter .fish-flow-tooltip__mid { background: repeating-linear-gradient(90deg, #5b7cff 0 2px, transparent 2px 3px); }
.fish-flow-tooltip .fish-flow-tooltip__meter .fish-flow-tooltip__bid { background: repeating-linear-gradient(90deg, #ff4466 0 2px, transparent 2px 3px); }
.fish-flow-tooltip .fish-flow-tooltip__meter .fish-flow-tooltip__none { background: repeating-linear-gradient(90deg, #9aa0a6 0 2px, transparent 2px 3px); }
.fish-flow-tooltip .fish-flow-tooltip__shares { display: flex; gap: 9px; margin-top: 1px; font-size: 9px; color: #8a9099; }
.fish-flow-tooltip .fish-flow-tooltip__shares em { font-style: normal; }
.fish-flow-tooltip .fish-flow-tooltip__details { margin-top: 3px; padding-top: 2px; border-top: 1px solid #22262b; }
.fish-flow-tooltip .fish-flow-tooltip__pair { display: flex; justify-content: space-between; gap: 6px; }
.fish-flow-tooltip .fish-flow-tooltip__pair > :first-child { color: #6b7178; }
.fish-flow-tooltip .fish-flow-tooltip__iv {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 7px 3px;
    border-top: 1px solid #22262b;
}
.fish-flow-tooltip .fish-flow-tooltip__iv > :first-child { color: #6b7178; }
.fish-flow-tooltip .fish-flow-tooltip__note { color: #8f959b; font-size: 10px; }
.fish-flow-tooltip .fish-flow-tooltip__table .fish-flow-tooltip__total td:last-child { color: #e0ac55 !important; }