/* Obsidian Pro Mobile Focus Mode */

@media (max-width: 1023px) {
 body.obsidian-app.obsidian-focus-mode {
 overflow: hidden;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-shell {
 display: flex;
 flex-direction: column;
 height: 100dvh;
 max-height: 100dvh;
 min-height: 100dvh;
 overflow: hidden;
 padding:.45rem;
 padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
 gap:.4rem;
 }

 /* ── Compact header (single row) ── */
 body.obsidian-app.obsidian-focus-mode header.glass {
 flex-wrap: nowrap;
 gap:.35rem;
 padding:.4rem.55rem;
 flex-shrink: 0;
 }

 body.obsidian-app.obsidian-focus-mode header.glass.leading-tight p:last-child {
 display: none;
 }

 body.obsidian-app.obsidian-focus-mode header.glass.leading-tight p:first-child {
 font-size: 12px;
 }

 body.obsidian-app.obsidian-focus-mode header.glass >.mx-1,
 body.obsidian-app.obsidian-focus-mode #undo,
 body.obsidian-app.obsidian-focus-mode #redo,
 body.obsidian-app.obsidian-focus-mode #zoomOut,
 body.obsidian-app.obsidian-focus-mode #zoomIn,
 body.obsidian-app.obsidian-focus-mode #zoomLabel,
 body.obsidian-app.obsidian-focus-mode #zoomFit,
 body.obsidian-app.obsidian-focus-mode #btnProPen,
 body.obsidian-app.obsidian-focus-mode #btnEyedropper,
 body.obsidian-app.obsidian-focus-mode #btnProDesigns,
 body.obsidian-app.obsidian-focus-mode #btnProLoad,
 body.obsidian-app.obsidian-focus-mode #btnProSave,
 body.obsidian-app.obsidian-focus-mode #btnMagicResize,
 body.obsidian-app.obsidian-focus-mode #btnAiPanel,
 body.obsidian-app.obsidian-focus-mode.aurora-hub-trigger,
 body.obsidian-app.obsidian-focus-mode #expFormat,
 body.obsidian-app.obsidian-focus-mode #expScale,
 body.obsidian-app.obsidian-focus-mode #expDpi,
 body.obsidian-app.obsidian-focus-mode #btnProCollab,
 body.obsidian-app.obsidian-focus-mode #proCollabBadge,
 body.obsidian-app.obsidian-focus-mode #btnSocialBatch,
 body.obsidian-app.obsidian-focus-mode #toggleRight,
 body.obsidian-app.obsidian-focus-mode label.obsidian-hide-tablet,
 body.obsidian-app.obsidian-focus-mode header.glass.ml-auto > div {
 display: none!important;
 }

 body.obsidian-app.obsidian-focus-mode #rightInspector {
 display: none!important;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-panel-right #rightInspector {
 display: flex!important;
 }

 body.obsidian-app.obsidian-focus-mode header.glass.ml-auto {
 margin-left: auto;
 flex-wrap: nowrap;
 gap:.35rem;
 }

 body.obsidian-app.obsidian-focus-mode #btnExport {
 padding:.45rem.7rem;
 font-size: 11px;
 white-space: nowrap;
 }

 body.obsidian-app.obsidian-focus-mode #btnObsidianMore {
 display: inline-flex!important;
 align-items: center;
 justify-content: center;
 min-width: 2.25rem;
 min-height: 2.25rem;
 padding:.35rem.55rem;
 font-size: 14px;
 font-weight: 700;
 }

 /* ── Hide power-user bars ── */
 body.obsidian-app.obsidian-focus-mode #proBreakpointBar,
 body.obsidian-app.obsidian-focus-mode #proGridLayoutBar {
 display: none!important;
 }

 body.obsidian-app.obsidian-focus-mode #proPageBar {
 display: none!important;
 }

 /* ── Canvas takes remaining space ── */
 body.obsidian-app.obsidian-focus-mode.obsidian-shell >.flex.min-h-0.flex-1 {
 flex: 1;
 min-height: 0;
 gap: 0;
 }

 body.obsidian-app.obsidian-focus-mode #leftDrawer.drawer-collapsed {
 display: none!important;
 }

 body.obsidian-app.obsidian-focus-mode main {
 flex: 1;
 min-height: 0;
 display: flex;
 flex-direction: column;
 border-radius: 1rem;
 }

 body.obsidian-app.obsidian-focus-mode #stageWrap {
 flex: 1;
 min-height: 58dvh;
 -webkit-overflow-scrolling: touch;
 }

 body.obsidian-app.obsidian-focus-mode #stagePad {
 padding:.65rem!important;
 min-height: 100%;
 }

 body.obsidian-app.obsidian-focus-mode.glass-2.pointer-events-none.absolute.bottom-3 {
 bottom:.5rem;
 font-size: 10px;
 padding:.35rem.65rem;
 max-width: calc(100% - 1rem);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }

 /* Hide floating toolhub dock bottom nav replaces it */
 body.obsidian-app.obsidian-focus-mode #auroraQuickDock {
 display: none!important;
 }

 /* Toast above bottom nav */
 body.obsidian-app.obsidian-focus-mode #toast {
 bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
 }
}

/* ── Bottom navigation ── */
.obsidian-bottom-nav {
 display: none;
}

@media (max-width: 1023px) {
 body.obsidian-app.obsidian-focus-mode.obsidian-bottom-nav {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 position: fixed;
 left:.45rem;
 right:.45rem;
 bottom: calc(.45rem + env(safe-area-inset-bottom, 0px));
 z-index: 80;
 padding:.35rem.25rem;
 border-radius: 1.1rem;
 background: rgba(15, 23, 42,.92);
 backdrop-filter: blur(20px) saturate(160%);
 border: 1px solid rgba(34, 211, 238,.18);
 box-shadow: 0 16px 40px -12px rgba(0, 0, 0,.75);
 }

.obsidian-bottom-nav button {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap:.15rem;
 min-height: 2.75rem;
 padding:.25rem.15rem;
 border: none;
 border-radius:.65rem;
 background: transparent;
 color: #94a3b8;
 font-size: 9px;
 font-weight: 700;
 letter-spacing:.04em;
 text-transform: uppercase;
 transition: background.18s ease, color.18s ease, transform.15s ease;
 -webkit-tap-highlight-color: transparent;
 }

.obsidian-bottom-nav button.obs-nav-icon {
 font-size: 17px;
 line-height: 1;
 }

.obsidian-bottom-nav button:active {
 transform: scale(0.94);
 }

.obsidian-bottom-nav button.on,
.obsidian-bottom-nav button:hover {
 color: #67e8f9;
 background: rgba(34, 211, 238,.12);
 }

.obsidian-bottom-nav button.obs-nav-primary {
 color: #0f172a;
 background: linear-gradient(135deg, #22d3ee, #fb923c);
 font-weight: 800;
 }

.obsidian-bottom-nav button.obs-nav-primary.on {
 color: #0f172a;
 box-shadow: 0 0 20px rgba(34, 211, 238,.35);
 }
}

/* ── More menu (overflow) ── */
.obsidian-more-menu {
 position: fixed;
 z-index: 95;
 right:.65rem;
 top: 3.25rem;
 min-width: 11.5rem;
 padding:.35rem;
 border-radius:.85rem;
 background: rgba(15, 23, 42,.96);
 border: 1px solid rgba(148, 163, 184,.2);
 box-shadow: 0 20px 50px -16px rgba(0, 0, 0,.85);
 opacity: 0;
 visibility: hidden;
 transform: translateY(-6px) scale(0.98);
 transition: opacity.2s ease, transform.22s cubic-bezier(.22, 1,.36, 1), visibility.2s;
}

.obsidian-more-menu.open {
 opacity: 1;
 visibility: visible;
 transform: none;
}

.obsidian-more-menu button {
 display: flex;
 width: 100%;
 align-items: center;
 gap:.5rem;
 padding:.55rem.65rem;
 border: none;
 border-radius:.55rem;
 background: transparent;
 color: #e2e8f0;
 font-size: 12px;
 font-weight: 600;
 text-align: left;
 min-height: 2.5rem;
}

.obsidian-more-menu button:hover,
.obsidian-more-menu button:active {
 background: rgba(34, 211, 238,.1);
 color: #67e8f9;
}

.obsidian-more-menu.obs-more-divider {
 height: 1px;
 margin:.25rem.35rem;
 background: rgba(255, 255, 255,.08);
}

.obsidian-more-backdrop {
 display: none;
 position: fixed;
 inset: 0;
 z-index: 94;
 background: transparent;
}

.obsidian-more-backdrop.open {
 display: block;
}

@media (min-width: 1024px) {
 #btnObsidianMore,
.obsidian-bottom-nav,
.obsidian-more-menu,
.obsidian-more-backdrop {
 display: none!important;
 }
}

/* ── FAB quick-add ── */
.obsidian-fab {
 display: none;
}

.obsidian-fab-backdrop,
.obsidian-fab-sheet {
 display: none;
}

@media (max-width: 1023px) {
 body.obsidian-app.obsidian-focus-mode.obsidian-fab {
 display: flex;
 align-items: center;
 justify-content: center;
 position: fixed;
 right: calc(.65rem + env(safe-area-inset-right, 0px));
 bottom: calc(5.1rem + env(safe-area-inset-bottom, 0px));
 z-index: 85;
 width: 3.25rem;
 height: 3.25rem;
 border: none;
 border-radius: 50%;
 background: linear-gradient(145deg, #fb923c, #f97316);
 color: #0f172a;
 box-shadow:
 0 8px 28px -6px rgba(251, 146, 60,.65),
 0 0 0 1px rgba(255, 255, 255,.12) inset;
 transition: transform.22s cubic-bezier(.22, 1,.36, 1), box-shadow.22s ease;
 -webkit-tap-highlight-color: transparent;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab.obs-fab-plus {
 font-size: 1.65rem;
 font-weight: 300;
 line-height: 1;
 transition: transform.28s cubic-bezier(.22, 1,.36, 1);
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab.open.obs-fab-plus {
 transform: rotate(45deg);
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab:active {
 transform: scale(0.94);
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab.open {
 background: linear-gradient(145deg, #22d3ee, #06b6d4);
 box-shadow: 0 8px 28px -6px rgba(34, 211, 238,.55);
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab-backdrop {
 display: block;
 position: fixed;
 inset: 0;
 z-index: 82;
 background: rgba(2, 6, 23,.45);
 opacity: 0;
 visibility: hidden;
 transition: opacity.25s ease, visibility.25s;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab-backdrop.open {
 opacity: 1;
 visibility: visible;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab-sheet {
 display: block;
 position: fixed;
 left:.55rem;
 right:.55rem;
 bottom: calc(4.85rem + env(safe-area-inset-bottom, 0px));
 z-index: 84;
 padding:.85rem.75rem 1rem;
 border-radius: 1.15rem;
 background: rgba(15, 23, 42,.96);
 border: 1px solid rgba(34, 211, 238,.2);
 box-shadow: 0 24px 60px -16px rgba(0, 0, 0,.85);
 transform: translateY(110%);
 opacity: 0;
 visibility: hidden;
 transition: transform.32s cubic-bezier(.22, 1,.36, 1), opacity.25s ease, visibility.25s;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab-sheet.open {
 transform: none;
 opacity: 1;
 visibility: visible;
 }

.obs-fab-title {
 margin: 0 0.65rem;
 padding: 0.15rem;
 font-size: 10px;
 font-weight: 800;
 letter-spacing:.18em;
 text-transform: uppercase;
 color: #64748b;
 }

.obs-fab-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap:.45rem;
 }

.obs-fab-grid button {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap:.3rem;
 min-height: 4.25rem;
 padding:.5rem.35rem;
 border: 1px solid rgba(148, 163, 184,.14);
 border-radius:.75rem;
 background: rgba(148, 163, 184,.06);
 color: #e2e8f0;
 font-size: 10px;
 font-weight: 700;
 letter-spacing:.03em;
 transition: background.18s ease, border-color.18s ease, transform.15s ease;
 -webkit-tap-highlight-color: transparent;
 }

.obs-fab-grid button.obs-fab-ico {
 font-size: 1.35rem;
 line-height: 1;
 color: #67e8f9;
 }

.obs-fab-grid button:active {
 transform: scale(0.96);
 background: rgba(34, 211, 238,.12);
 border-color: rgba(34, 211, 238,.35);
 }
}

/* ── Zoom pill (pinch feedback) ── */
.obsidian-zoom-pill {
 position: fixed;
 top: 50%;
 left: 50%;
 z-index: 90;
 transform: translate(-50%, -50%) scale(0.9);
 padding:.55rem 1rem;
 border-radius: 999px;
 background: rgba(15, 23, 42,.88);
 border: 1px solid rgba(34, 211, 238,.35);
 color: #67e8f9;
 font-size: 15px;
 font-weight: 800;
 letter-spacing:.04em;
 pointer-events: none;
 opacity: 0;
 visibility: hidden;
 transition: opacity.2s ease, transform.22s cubic-bezier(.22, 1,.36, 1), visibility.2s;
}

.obsidian-zoom-pill.show {
 opacity: 1;
 visibility: visible;
 transform: translate(-50%, -50%) scale(1);
}

/* Pinch-friendly canvas scroll */
@media (max-width: 1023px) {
 body.obsidian-app.obsidian-focus-mode #stageWrap {
 touch-action: pan-x pan-y;
 overscroll-behavior: contain;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-rail {
 display: none!important;
 }

 body.obsidian-app.obsidian-focus-mode #toggleLeft {
 display: inline-flex!important;
 }
}

/* Landscape phone maximize canvas */
@media (max-width: 1023px) and (orientation: landscape) {
 body.obsidian-app.obsidian-focus-mode.obsidian-shell {
 padding:.3rem;
 padding-bottom: calc(3.15rem + env(safe-area-inset-bottom, 0px));
 gap:.3rem;
 }

 body.obsidian-app.obsidian-focus-mode header.glass {
 padding:.3rem.45rem;
 }

 body.obsidian-app.obsidian-focus-mode header.glass.leading-tight {
 display: none;
 }

 body.obsidian-app.obsidian-focus-mode #stageWrap {
 min-height: 72dvh;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-bottom-nav {
 left:.3rem;
 right:.3rem;
 bottom: calc(.3rem + env(safe-area-inset-bottom, 0px));
 padding:.25rem.15rem;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-bottom-nav button span:not(.obs-nav-icon) {
 display: none;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-bottom-nav button {
 min-height: 2.2rem;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab {
 width: 2.85rem;
 height: 2.85rem;
 bottom: calc(3.65rem + env(safe-area-inset-bottom, 0px));
 right: calc(.45rem + env(safe-area-inset-right, 0px));
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-fab-sheet {
 bottom: calc(3.35rem + env(safe-area-inset-bottom, 0px));
 padding:.65rem.6rem.75rem;
 }

 body.obsidian-app.obsidian-focus-mode.obs-fab-grid button {
 min-height: 3.5rem;
 font-size: 9px;
 }

 body.obsidian-app.obsidian-focus-mode.glass-2.pointer-events-none.absolute.bottom-3 {
 display: none;
 }
}

/* ══════════════════════════════════════════════════════════════
 Canva-style contextual bottom toolbar (Phase 3)
 ══════════════════════════════════════════════════════════════ */

.obsidian-canva-bar,
.obsidian-canva-panel,
.obsidian-mini-bar,
.obsidian-page-dots {
 display: none;
}

@media (max-width: 1023px) {
 body.obsidian-app.obsidian-focus-mode.obsidian-canva-edit #obsidianNavBar,
 body.obsidian-app.obsidian-focus-mode.obsidian-canva-edit.obsidian-bottom-nav {
 display: none!important;
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-canva-edit.obsidian-fab {
 opacity: 0;
 pointer-events: none;
 transform: scale(0.85);
 }

 body.obsidian-app.obsidian-focus-mode.obsidian-canva-edit.obsidian-canva-bar {
 display: block;
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 88;
 padding:.4rem.35rem calc(.45rem + env(safe-area-inset-bottom, 0px));
 background: rgba(255, 255, 255,.97);
 border-top: 1px solid rgba(15, 23, 42,.08);
 box-shadow: 0 -12px 40px -12px rgba(0, 0, 0,.25);
 animation: canvaBarUp.32s cubic-bezier(.22, 1,.36, 1);
 }

 @keyframes canvaBarUp {
 from { transform: translateY(100%); opacity: 0; }
 to { transform: none; opacity: 1; }
 }

.canva-bar-scroll {
 display: flex;
 align-items: stretch;
 gap:.15rem;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 padding-right:.25rem;
 }

.canva-bar-scroll::-webkit-scrollbar { display: none; }

.obsidian-canva-bar button {
 flex: 0 0 auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap:.2rem;
 min-width: 3.5rem;
 min-height: 3.25rem;
 padding:.35rem.45rem;
 border: none;
 border-radius:.65rem;
 background: transparent;
 color: #334155;
 font-size: 9px;
 font-weight: 700;
 letter-spacing:.02em;
 -webkit-tap-highlight-color: transparent;
 }

.obsidian-canva-bar button.cico {
 font-size: 1.15rem;
 line-height: 1;
 font-weight: 800;
 color: #0f172a;
 }

.obsidian-canva-bar button:active {
 background: rgba(34, 211, 238,.12);
 }

.obsidian-canva-bar button.canva-done {
 margin-left: auto;
 min-width: 3rem;
 min-height: 3rem;
 border-radius: 50%;
 background: #0f172a;
 color: #fff;
 font-size: 1.25rem;
 font-weight: 300;
 box-shadow: 0 4px 16px -4px rgba(15, 23, 42,.5);
 align-self: center;
 }

 /* Sub-panel */
 body.obsidian-app.obsidian-canva-panel-open.obsidian-canva-panel {
 display: block;
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 89;
 max-height: 52dvh;
 padding-bottom: env(safe-area-inset-bottom, 0px);
 background: #fff;
 border-radius: 1.1rem 1.1rem 0 0;
 box-shadow: 0 -20px 50px -16px rgba(0, 0, 0,.3);
 transform: translateY(105%);
 transition: transform.34s cubic-bezier(.22, 1,.36, 1);
 }

 body.obsidian-app.obsidian-canva-panel-open.obsidian-canva-panel.open {
 transform: none;
 }

.canva-panel-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding:.75rem 1rem.5rem;
 border-bottom: 1px solid rgba(15, 23, 42,.08);
 font-size: 13px;
 font-weight: 800;
 color: #0f172a;
 }

.canva-panel-head button {
 border: none;
 background: rgba(15, 23, 42,.06);
 width: 2rem;
 height: 2rem;
 border-radius: 50%;
 font-size: 12px;
 color: #64748b;
 }

.canva-panel-body {
 padding:.85rem 1rem 1.25rem;
 overflow-y: auto;
 max-height: calc(52dvh - 3rem);
 }

.canva-font-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap:.4rem;
 }

.canva-font-pick,
.canva-style-btn {
 padding:.65rem.5rem;
 border: 1px solid rgba(15, 23, 42,.1);
 border-radius:.6rem;
 background: #f8fafc;
 font-size: 12px;
 font-weight: 600;
 color: #0f172a;
 text-align: left;
 }

.canva-range {
 width: 100%;
 margin:.5rem 0;
 }

.canva-range-val {
 text-align: center;
 font-size: 14px;
 font-weight: 800;
 color: #0f172a;
 }

.canva-color {
 width: 100%;
 height: 2.75rem;
 border: none;
 border-radius:.65rem;
 margin-bottom:.65rem;
 }

.canva-swatches {
 display: flex;
 flex-wrap: wrap;
 gap:.45rem;
 }

.canva-swatch {
 width: 2.25rem;
 height: 2.25rem;
 border-radius: 50%;
 border: 2px solid rgba(15, 23, 42,.12);
 padding: 0;
 }

 /* Floating mini bar above selection */
.obsidian-mini-bar {
 position: fixed;
 z-index: 87;
 display: flex;
 gap:.25rem;
 padding:.3rem.4rem;
 border-radius: 999px;
 background: rgba(255, 255, 255,.96);
 border: 1px solid rgba(15, 23, 42,.1);
 box-shadow: 0 8px 28px -8px rgba(0, 0, 0,.35);
 transform: translate(-50%, 0) scale(0.92);
 opacity: 0;
 visibility: hidden;
 transition: opacity.2s ease, transform.22s cubic-bezier(.22, 1,.36, 1), visibility.2s;
 pointer-events: none;
 }

.obsidian-mini-bar.show {
 display: flex;
 opacity: 1;
 visibility: visible;
 transform: translate(-50%, 0) scale(1);
 pointer-events: auto;
 }

.obsidian-mini-bar button {
 width: 2.35rem;
 height: 2.35rem;
 border: none;
 border-radius: 50%;
 background: transparent;
 font-size: 14px;
 color: #334155;
 -webkit-tap-highlight-color: transparent;
 }

.obsidian-mini-bar button:active {
 background: rgba(34, 211, 238,.15);
 }

.obsidian-mini-bar button[data-mini="del"] {
 color: #ef4444;
 }

 /* Page dots */
.obsidian-page-dots {
 position: fixed;
 left: 50%;
 bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
 z-index: 75;
 transform: translateX(-50%);
 display: flex;
 gap:.35rem;
 padding:.25rem.5rem;
 border-radius: 999px;
 background: rgba(15, 23, 42,.55);
 backdrop-filter: blur(8px);
 opacity: 0;
 visibility: hidden;
 transition: opacity.2s ease, visibility.2s;
 }

.obsidian-page-dots.show {
 display: flex;
 opacity: 1;
 visibility: visible;
 }

 body.obsidian-app.obsidian-canva-edit.obsidian-page-dots {
 bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
 }

.obsidian-page-dots.page-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 border: none;
 padding: 0;
 background: rgba(255, 255, 255,.35);
 }

.obsidian-page-dots.page-dot.on {
 background: #22d3ee;
 width: 18px;
 border-radius: 99px;
 }

 /* Hide legacy edit popup sheet on mobile Canva bar replaces it */
 body.obsidian-app.obsidian-canva-edit #proEditPopup {
 display: none!important;
 }

 body.obsidian-app.obsidian-canva-panel-open.obsidian-shell {
 padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
 }
}