/*
 * OT Diary Core 1.10.90 — clean mobile bottom dock.
 *
 * Core owns only:
 * - destination geometry
 * - one shared active oval
 * - icon-only destination presentation
 * - destination animation
 * - hiding the dock inside an individual chat
 *
 * Quick Create owns the center launcher completely, including + / ×.
 */

@media (max-width: 767px) {
  .otd-mobile-bottom-dock {
    --otd-dock-height: 68px;
    --otd-dock-item-height: 52px;
    --otd-dock-icon-size: 28px;
    box-sizing: border-box !important;
    isolation: isolate !important;
    overflow: visible !important;
    height: var(--otd-dock-height) !important;
    min-height: var(--otd-dock-height) !important;
    max-height: var(--otd-dock-height) !important;
    padding: 7px 10px !important;
    align-items: center !important;
    transform: none !important;
    scale: 1 !important;
    transition:
      opacity .22s ease,
      transform .28s cubic-bezier(.22,.8,.24,1) !important;
  }

  .otd-mobile-bottom-dock > nav,
  .otd-mobile-bottom-dock > [role="navigation"],
  .otd-mobile-bottom-dock > ul,
  .otd-mobile-bottom-dock > div:has(> a),
  .otd-mobile-bottom-dock > div:has(> button) {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Destination slots never change size when selected. */
  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__item {
    position: relative !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--otd-dock-item-height) !important;
    min-height: var(--otd-dock-item-height) !important;
    max-height: var(--otd-dock-item-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 26px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: none !important;
    transform: none !important;
    color: rgba(255,255,255,.66) !important;
    transition: color .16s ease, opacity .16s ease !important;
  }

  /* Kill host/theme active pills on destinations only. */
  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__item::before,
  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__item::after {
    content: none !important;
    display: none !important;
  }

  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__item.otd-mobile-bottom-dock__active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.98) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.16) !important;
  }

  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__label {
    display: none !important;
  }

  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__icon {
    display: grid !important;
    place-items: center !important;
    width: var(--otd-dock-icon-size) !important;
    height: var(--otd-dock-icon-size) !important;
    min-width: var(--otd-dock-icon-size) !important;
    min-height: var(--otd-dock-icon-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    color: inherit !important;
    transform: none !important;
  }

  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__icon svg,
  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__icon img {
    display: block !important;
    width: var(--otd-dock-icon-size) !important;
    height: var(--otd-dock-icon-size) !important;
    max-width: var(--otd-dock-icon-size) !important;
    max-height: var(--otd-dock-icon-size) !important;
    margin: 0 !important;
    color: inherit !important;
  }

  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__icon svg {
    stroke: currentColor;
  }

  /*
   * ONE active shape for Home / Discover / Messages / Profile.
   * It is always oval and travels as one physical layer.
   */
  .otd-mobile-bottom-dock__indicator {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: var(--otd-dock-indicator-width, 72px) !important;
    min-width: var(--otd-dock-indicator-width, 72px) !important;
    max-width: var(--otd-dock-indicator-width, 72px) !important;
    height: var(--otd-dock-indicator-height, 48px) !important;
    min-height: var(--otd-dock-indicator-height, 48px) !important;
    max-height: var(--otd-dock-indicator-height, 48px) !important;
    border-radius: 999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    will-change: transform !important;
  }

  .otd-mobile-bottom-dock__indicator.is-visible {
    opacity: 1 !important;
  }

  .otd-mobile-bottom-dock__indicator-inner {
    display: block !important;
    width: var(--otd-dock-indicator-width, 72px) !important;
    min-width: var(--otd-dock-indicator-width, 72px) !important;
    max-width: var(--otd-dock-indicator-width, 72px) !important;
    height: var(--otd-dock-indicator-height, 48px) !important;
    min-height: var(--otd-dock-indicator-height, 48px) !important;
    max-height: var(--otd-dock-indicator-height, 48px) !important;
    border-radius: 999px !important;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    opacity: 1 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -1px 0 rgba(255,255,255,.05),
      0 5px 18px rgba(0,0,0,.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    transform: scaleX(1) scaleY(1);
    will-change: transform !important;
  }

  .otd-mobile-bottom-dock--travelling .otd-mobile-bottom-dock__indicator,
  .otd-mobile-bottom-dock--travelling .otd-mobile-bottom-dock__indicator-inner {
    transition: none !important;
    animation: none !important;
  }

  /*
   * Quick Create ownership boundary.
   * Do not set background, color, ::before, ::after, aria-expanded styles or
   * child opacity here. Quick Create 1.0.37 owns + -> × -> +.
   */
  .otd-mobile-bottom-dock [data-otd-quick-create-toggle],
  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__plus {
    position: relative !important;
    z-index: 4 !important;
    flex-shrink: 0 !important;
  }

  /* A conversation is an immersive sub-screen. */
  .otd-mobile-bottom-dock.otd-mobile-bottom-dock--conversation-hidden {
    opacity: 0 !important;
    transform: translate3d(0, calc(100% + 28px), 0) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .otd-mobile-bottom-dock,
  .otd-mobile-bottom-dock__indicator,
  .otd-mobile-bottom-dock__indicator-inner {
    transition: none !important;
    animation: none !important;
  }
}


/* 1.10.91-safe — transparent glass active indicator */
@media (max-width: 767px) {
  .otd-mobile-bottom-dock__indicator-inner {
    background:
      radial-gradient(circle at 50% 8%, rgba(255,255,255,.16), rgba(255,255,255,.06) 58%, rgba(255,255,255,.035) 100%) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 0 0 1px rgba(0,0,0,.025),
      0 4px 16px rgba(0,0,0,.07) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1.05) !important;
    backdrop-filter: blur(18px) saturate(150%) brightness(1.05) !important;
  }

  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__item:not(.otd-mobile-bottom-dock__plus) {
    opacity: .76 !important;
  }

  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__item.otd-mobile-bottom-dock__active:not(.otd-mobile-bottom-dock__plus) {
    opacity: 1 !important;
  }
}


/* 1.10.92-safe — remove legacy gray/circular destination bubble */
@media (max-width: 767px) {
  /*
   * Some host/theme navigation styles draw the active circle on an inner icon
   * wrapper or on a small slot parent. Core marks those slots in JavaScript.
   * Strip ONLY that destination chrome; Quick Create is deliberately excluded.
   */
  .otd-mobile-bottom-dock [data-otd-dock-destination],
  .otd-mobile-bottom-dock [data-otd-dock-destination].otd-mobile-bottom-dock__active,
  .otd-mobile-bottom-dock [data-otd-dock-destination] > *:not(svg):not(img),
  .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon,
  .otd-mobile-bottom-dock [data-otd-dock-slot="1"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
  }

  .otd-mobile-bottom-dock [data-otd-dock-destination]::before,
  .otd-mobile-bottom-dock [data-otd-dock-destination]::after,
  .otd-mobile-bottom-dock [data-otd-dock-destination] > *:not(svg):not(img)::before,
  .otd-mobile-bottom-dock [data-otd-dock-destination] > *:not(svg):not(img)::after,
  .otd-mobile-bottom-dock [data-otd-dock-slot="1"]::before,
  .otd-mobile-bottom-dock [data-otd-dock-slot="1"]::after {
    content: none !important;
    display: none !important;
  }

  /* Only the Core glass oval is allowed to paint an active background. */
  .otd-mobile-bottom-dock__indicator[data-otd-glass-indicator="1"] {
    display: block !important;
  }

  /* Messages dashboard must never inherit the hidden-chat transform. */
  body:not(.otd-conversation-open) .otd-mobile-bottom-dock:not(.otd-mobile-bottom-dock--conversation-hidden) {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* 1.10.93-safe — eliminate the remaining host gray destination pill */
@media (max-width: 767px) {
  /*
   * The video confirms the second pill lives inside/around the active
   * destination, not in Core's glass indicator. Strip visual chrome from
   * every HTML wrapper belonging to a destination while leaving SVG/image
   * artwork untouched.
   */
  .otd-mobile-bottom-dock [data-otd-dock-destination],
  .otd-mobile-bottom-dock [data-otd-dock-destination] *:not(svg):not(path):not(g):not(circle):not(rect):not(line):not(polyline):not(polygon):not(img):not(use),
  .otd-mobile-bottom-dock [data-otd-dock-legacy-chrome="1"],
  .otd-mobile-bottom-dock [data-otd-dock-slot="1"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .otd-mobile-bottom-dock [data-otd-dock-legacy-chrome="1"]::before,
  .otd-mobile-bottom-dock [data-otd-dock-legacy-chrome="1"]::after,
  .otd-mobile-bottom-dock [data-otd-dock-slot="1"]::before,
  .otd-mobile-bottom-dock [data-otd-dock-slot="1"]::after,
  .otd-mobile-bottom-dock [data-otd-dock-destination] *:not(svg):not(path):not(g):not(circle):not(rect):not(img)::before,
  .otd-mobile-bottom-dock [data-otd-dock-destination] *:not(svg):not(path):not(g):not(circle):not(rect):not(img)::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
  }

  /*
   * The only permitted active background is the Core glass indicator itself.
   */
  .otd-mobile-bottom-dock__indicator[data-otd-glass-indicator="1"],
  .otd-mobile-bottom-dock__indicator[data-otd-glass-indicator="1"] .otd-mobile-bottom-dock__indicator-inner {
    display: block !important;
  }
}


/* 1.10.94-safe — measured five-control dock geometry */
@media (max-width: 767px) {
  .otd-mobile-bottom-dock {
    --otd-dock-indicator-width: 72px;
    --otd-dock-indicator-height: 48px;
  }

  /*
   * Quick Create is visually centered by JS against the exact dock rectangle.
   * The plugin consumes this custom property; no hard-coded +/- pixel offset.
   */
  .otd-mobile-bottom-dock [data-otd-quick-create-toggle] {
    translate: var(--otd-qc-center-correction, 0px) 0 !important;
  }

  /*
   * Indicator width is measured from the real distance to Quick Create.
   * This guarantees that Discover/Messages glass never sits underneath
   * the center launcher, regardless of device width.
   */
  .otd-mobile-bottom-dock__indicator,
  .otd-mobile-bottom-dock__indicator-inner {
    width: var(--otd-dock-indicator-width, 72px) !important;
    min-width: var(--otd-dock-indicator-width, 72px) !important;
    max-width: var(--otd-dock-indicator-width, 72px) !important;
    height: var(--otd-dock-indicator-height, 48px) !important;
    min-height: var(--otd-dock-indicator-height, 48px) !important;
    max-height: var(--otd-dock-indicator-height, 48px) !important;
  }
}


/* 1.11.25-safe — persistent destination color follows the travelling glass bubble. */
@media (max-width: 767px) {
  /* Every regular destination stays white until it is the selected destination. */
  .otd-mobile-bottom-dock [data-otd-dock-destination] {
    color: rgba(255,255,255,.82) !important;
    transition: color .20s cubic-bezier(.2,.8,.2,1), opacity .16s ease !important;
  }

  /* The icon under the final glass-bubble position stays black, not just during travel. */
  .otd-mobile-bottom-dock [data-otd-dock-destination].otd-mobile-bottom-dock__active,
  .otd-mobile-bottom-dock [data-otd-dock-destination][data-otd-dock-visual-active="1"] {
    color: #111 !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }

  .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon,
  .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon svg,
  .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon svg * {
    color: inherit !important;
    transition: color .20s cubic-bezier(.2,.8,.2,1), stroke .20s cubic-bezier(.2,.8,.2,1), fill .20s cubic-bezier(.2,.8,.2,1) !important;
  }

  /* Respect the SVG's drawing model while forcing its painted strokes/fills to currentColor. */
  .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
  }
  .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
  }

  /* Quick Create remains owned by Quick Create and is deliberately excluded. */
  .otd-mobile-bottom-dock [data-otd-quick-create-toggle],
  .otd-mobile-bottom-dock .otd-mobile-bottom-dock__plus {
    color: inherit !important;
  }
}


/* 1.11.50-safe — persistent active bubble + white-to-black destination transition. */
@media (max-width: 767px) {
  body .otd-mobile-bottom-dock [data-otd-dock-destination] {
    color: rgba(255,255,255,.88) !important;
    opacity: .82 !important;
    transition: color .22s cubic-bezier(.2,.8,.2,1), opacity .20s ease !important;
  }

  body .otd-mobile-bottom-dock [data-otd-dock-destination].otd-mobile-bottom-dock__active,
  body .otd-mobile-bottom-dock [data-otd-dock-destination][data-otd-dock-visual-active="1"] {
    color: #111 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  body .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon,
  body .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon svg,
  body .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon svg * {
    color: inherit !important;
    transition: color .22s cubic-bezier(.2,.8,.2,1), stroke .22s cubic-bezier(.2,.8,.2,1), fill .22s cubic-bezier(.2,.8,.2,1) !important;
  }

  body .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
  }

  body .otd-mobile-bottom-dock [data-otd-dock-destination] .otd-mobile-bottom-dock__icon svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
  }

  body .otd-mobile-bottom-dock__indicator[data-otd-glass-indicator="1"].is-visible {
    display: block !important;
    opacity: 1 !important;
  }
}