
/* Pass 13/14 — fixed mobile writer accessory dock + attached panel */
@media (max-width: 760px) {
  body[data-active-view="writer-app"] #mobile-format-bar,
  body[data-active-view="writer-app"] #mode-indicator,
  body[data-active-view="writer-app"] #sn-toolbar-btn,
  body[data-active-view="writer-app"] #tag-float-bar,
  html body[data-active-view="writer-app"] #mobile-format-bar,
  html body[data-active-view="writer-app"] #mode-indicator,
  html body[data-active-view="writer-app"] #sn-toolbar-btn,
  html body[data-active-view="writer-app"] #tag-float-bar {
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body[data-active-view="writer-app"] #writer-mobile-hub,
  body[data-active-view="writer-app"][data-ui-tier="phone"] #writer-mobile-hub,
  body.cbs-writer-phone[data-active-view="writer-app"] #writer-mobile-hub,
  body.cbs-writer-phone-fixed[data-active-view="writer-app"] #writer-mobile-hub,
  body.cbs-writer-phone-keyboard[data-active-view="writer-app"] #writer-mobile-hub {
    display:block !important;
  }

  body[data-active-view="writer-app"] #writer-app .editor-frame {
    padding-bottom: calc(var(--cbs-writer-live-clearance, 72px) - 8px) !important;
    scroll-padding-bottom: calc(var(--cbs-writer-live-clearance, 72px) + 4px) !important;
  }

  body[data-active-view="writer-app"] .editor-statusbar {
    bottom: calc(var(--cbs-bottom-nav-height, 0px) + var(--sab, 0px) + 2px) !important;
    min-height: 26px !important;
    padding: 4px 10px !important;
    max-width: calc(100vw - 16px) !important;
  }

  body[data-active-view="writer-app"] .page-content { padding-bottom: 6px !important; }
}

#writer-mobile-hub {
  position: fixed;
  right: 12px;
  bottom: var(--wmh-dock-bottom, calc(var(--cbs-bottom-nav-height, 0px) + var(--sab, 0px) + 92px));
  z-index: 7600;
  display: none;
  pointer-events: none;
}
#writer-mobile-hub .wmh-dock,
#writer-mobile-hub .wmh-panel-shell { pointer-events: auto; }
#writer-mobile-hub .wmh-dock {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}
#writer-mobile-hub .wmh-mini {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.97);
  box-shadow: 0 12px 28px rgba(15,23,42,.22), 0 2px 8px rgba(15,23,42,.12);
  color: #0f172a;
  font: inherit;
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#writer-mobile-hub .wmh-mini.active { background:#eff6ff; border-color:rgba(37,99,235,.45); color:#1d4ed8; }
#writer-mobile-hub.has-selection [data-open="tag"] { box-shadow: 0 12px 28px rgba(37,99,235,.28), 0 2px 8px rgba(15,23,42,.12); }
#writer-mobile-hub .wmh-panel-shell {
  position: fixed;
  right: 12px;
  bottom: var(--wmh-panel-bottom, calc(var(--wmh-dock-bottom, 120px) + 54px));
  width: min(338px, calc(100vw - 24px));
  transition: opacity .12s ease, transform .12s ease;
  transform-origin: bottom right;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.985);
  box-shadow: 0 24px 48px rgba(15,23,42,.22), 0 6px 18px rgba(15,23,42,.12);
  padding: 14px 12px 12px;
  display: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
#writer-mobile-hub.open .wmh-panel-shell { display:block; opacity:1; transform:translateY(0); }
#writer-mobile-hub .wmh-panel-shell { opacity:0; transform:translateY(6px); }
#writer-mobile-hub .wmh-close {
  width:34px; height:34px; border-radius:999px; border:1px solid rgba(148,163,184,.35); background:#f8fafc; font:inherit; font-weight:800;
}
#writer-mobile-hub .wmh-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
#writer-mobile-hub .wmh-title { font-weight:800; font-size:15px; color:#0f172a; }
#writer-mobile-hub .wmh-subtitle { font-size:12px; color:#64748b; }
#writer-mobile-hub .wmh-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
#writer-mobile-hub .wmh-stack { display:grid; gap:8px; }
#writer-mobile-hub .wmh-panel { display:none; }
#writer-mobile-hub .wmh-panel.active { display:block; }
#writer-mobile-hub .wmh-action, #writer-mobile-hub .wmh-chip {
  border: 1px solid rgba(148,163,184,.32);
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  padding: 10px 8px;
  min-height: 46px;
  font: inherit;
  font-weight: 800;
}
#writer-mobile-hub .wmh-action.wmh-wide { width:100%; text-align:left; padding-inline:12px; }
#writer-mobile-hub .wmh-action.active { background: #eff6ff; border-color: rgba(37,99,235,.45); color: #1d4ed8; }
#writer-mobile-hub .wmh-help { margin-top:8px; font-size:12px; line-height:1.35; color:#475569; }
#writer-mobile-hub .wmh-section { margin: 6px 0 10px; }
#writer-mobile-hub .wmh-section-title { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#64748b; margin-bottom:6px; }
#writer-mobile-hub .wmh-chip-row { display:flex; gap:6px; flex-wrap:wrap; }
#writer-mobile-hub .wmh-chip { min-height:36px; padding:8px 10px; border-radius:999px; }
body.dark #writer-mobile-hub .wmh-mini,
body.dark #writer-mobile-hub .wmh-panel-shell { background: rgba(15,23,42,.96); color: #e5e7eb; border-color: rgba(148,163,184,.18); }
body.dark #writer-mobile-hub .wmh-action,
body.dark #writer-mobile-hub .wmh-chip,
body.dark #writer-mobile-hub .wmh-close { background: rgba(30,41,59,.9); color: #e5e7eb; border-color: rgba(148,163,184,.18); }
body.dark #writer-mobile-hub .wmh-title { color:#e5e7eb; }
body.dark #writer-mobile-hub .wmh-subtitle,
body.dark #writer-mobile-hub .wmh-help,
body.dark #writer-mobile-hub .wmh-section-title { color:#cbd5e1; }
#sn-popover.sn-mobile-sheet {
  position: fixed !important;
  left: 10px !important; right: 10px !important; top: auto !important;
  bottom: calc(var(--wmh-panel-bottom, 160px) + 8px) !important;
  width: auto !important; max-width: none !important;
  z-index: 7800 !important;
}
#sn-popover.sn-mobile-sheet #sn-pop-textarea { min-height: 120px !important; }
body.cbs-writer-delete-lock {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  top: calc(var(--cbs-delete-lock-top, 0px) * -1) !important;
  overflow: hidden !important;
}
@media (max-width:760px) {
  body.cbs-writer-phone-keyboard #writer-mobile-hub .wmh-mini,
  body.cbs-writer-keyboard-open #writer-mobile-hub .wmh-mini { width:44px; height:44px; }
}
