/* ui-bugs-final.css
   Final UI bugfixes:
   - draggable Dynamic Island in Glass/Safe Glass
   - reliable comments controls
   - real cover reposition mode
*/

/* ── Time Tracker floating widget must be movable ─────────────────── */

/* Default center if user has not dragged it. */
.tt-widget:not(.positioned):not(.dragging) {
  left: 50% !important;
  top: 12px !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

/* When positioned/dragging, variables from JS win over Safe Glass rules. */
html[data-safe-glass="true"] body .tt-widget.positioned,
html[data-safe-glass="true"] body .tt-widget.dragging,
html[data-visual="liquid-glass"] body .tt-widget.positioned,
html[data-visual="liquid-glass"] body .tt-widget.dragging,
body .tt-widget.positioned,
body .tt-widget.dragging {
  position: fixed !important;
  left: var(--tt-left, auto) !important;
  top: var(--tt-top, auto) !important;
  right: var(--tt-right, auto) !important;
  bottom: var(--tt-bottom, auto) !important;
  transform: none !important;
  translate: none !important;
  margin: 0 !important;
  width: max-content !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  touch-action: none !important;
  pointer-events: auto !important;
  cursor: grab !important;
  z-index: 2147482500 !important;
}

body .tt-widget.dragging {
  cursor: grabbing !important;
  transition: none !important;
  user-select: none !important;
}

/* Minimized/vertical states should still be draggable and not forced to top center. */
html[data-safe-glass="true"] body .tt-widget.positioned.minimized,
html[data-visual="liquid-glass"] body .tt-widget.positioned.minimized,
body .tt-widget.positioned.minimized {
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
}

/* ── Comments controls ────────────────────────────────────────────── */

.comments-popover {
  z-index: 2147482501 !important;
  pointer-events: auto !important;
}

#context-menu.context-menu {
  z-index: 2147483600 !important;
  pointer-events: auto !important;
}

.comment-more,
.comment-act,
.comment-delete-direct,
.comments-btns .btn,
.comments-compose button {
  pointer-events: auto !important;
  user-select: none !important;
}

.comment-act.danger,
.comment-delete-direct {
  color: var(--danger, #eb5757) !important;
}

.comment-act.danger:hover,
.comment-delete-direct:hover {
  background: color-mix(in srgb, var(--danger, #eb5757) 14%, transparent) !important;
  color: var(--danger, #eb5757) !important;
}

/* ── Cover reposition ─────────────────────────────────────────────── */

.page-cover.cover-repositioning {
  cursor: ns-resize !important;
  outline: 2px solid color-mix(in srgb, var(--primary, #5b8def) 65%, transparent) !important;
  outline-offset: -2px !important;
  overflow: hidden !important;
}

.page-cover.cover-repositioning #page-cover-img,
.page-cover.cover-repositioning img {
  cursor: ns-resize !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.cover-reposition-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 8;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 15, 18, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  pointer-events: none;
}

.cover-action-btn.active {
  background: var(--text, #fff) !important;
  color: var(--bg, #111) !important;
}