/* Ngeblogging mobile/PWA repair v24.
   This file is deliberately scoped to compact mobile Studio and Nara only.
   It must not change the approved landing page, desktop, computer, tablet,
   or Android Desktop-site geometry.
*/

:root {
  --nara-v24-safe: max(10px, env(safe-area-inset-bottom));
  --nara-v24-side: max(10px, env(safe-area-inset-left));
  --nara-v24-radius: 22px;
}

/* Keep the only mobile navigation rail visible and above its own scrim. */
@media (max-width: 760px) {
  html:not([data-desktop-layout-requested="true"]) .sn-shell > .sn-side {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 30000 !important;
  }

  html:not([data-desktop-layout-requested="true"]) .sn-shell > .sn-side > nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
  }

  html:not([data-desktop-layout-requested="true"]) .sn-shell > .sn-side > nav::-webkit-scrollbar {
    display: none !important;
  }

  html:not([data-desktop-layout-requested="true"]) .sn-shell > .sn-side.collapsed > nav > button,
  html:not([data-desktop-layout-requested="true"]) .sn-shell > .sn-side.collapsed .sn-new {
    display: grid !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html:not([data-desktop-layout-requested="true"]) .sn-shell > .sn-side.collapsed > nav > button svg,
  html:not([data-desktop-layout-requested="true"]) .sn-shell > .sn-side.collapsed .sn-new svg {
    position: static !important;
    margin: auto !important;
    transform: none !important;
    rotate: 0deg !important;
  }

  html:not([data-desktop-layout-requested="true"]) .sn-sidebar-scrim-v23 {
    z-index: 29900 !important;
  }

  html:not([data-desktop-layout-requested="true"]) .sn-icon.sn-sidebar-edge-owner-v23,
  html:not([data-desktop-layout-requested="true"]) .sn-icon[data-sidebar-authority="single-v23"] {
    z-index: 30100 !important;
  }

  html:not([data-desktop-layout-requested="true"]) .sn-mobile-nav,
  html:not([data-desktop-layout-requested="true"]) .sn-mobile-sheet-layer,
  html:not([data-desktop-layout-requested="true"]) .sn-side-close,
  html:not([data-desktop-layout-requested="true"]) .sn-side-bottom {
    display: none !important;
  }
}

/* Default phone/PWA behavior: a complete compact Nara window, not fullscreen. */
html[data-physical-phone="true"] .nara-assistant-layer[data-nara-window-mode="compact"],
html[data-physical-screen-mobile="true"] .nara-assistant-layer[data-nara-window-mode="compact"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  display: grid !important;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  place-items: end center !important;
  padding: 10px max(10px, env(safe-area-inset-right)) var(--nara-v24-safe) max(10px, env(safe-area-inset-left)) !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
  z-index: 2147483600 !important;
}

html[data-physical-phone="true"] .nara-assistant-layer[data-nara-window-mode="compact"] .nara-assistant-backdrop,
html[data-physical-screen-mobile="true"] .nara-assistant-layer[data-nara-window-mode="compact"] .nara-assistant-backdrop {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(12, 25, 45, .46) !important;
  backdrop-filter: blur(2px) !important;
  pointer-events: auto !important;
}

html[data-physical-phone="true"] .nara-assistant-layer[data-nara-window-mode="compact"] .nara-assistant-shell,
html[data-physical-screen-mobile="true"] .nara-assistant-layer[data-nara-window-mode="compact"] .nara-assistant-shell {
  position: relative !important;
  inset: auto !important;
  grid-area: 1 / 1 !important;
  width: min(100%, 430px) !important;
  min-width: 0 !important;
  max-width: 430px !important;
  height: min(76dvh, 680px) !important;
  min-height: min(430px, calc(100dvh - 20px)) !important;
  max-height: calc(100dvh - 20px - env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(49, 77, 113, .16) !important;
  border-radius: var(--nara-v24-radius) !important;
  box-shadow: 0 24px 70px rgba(8, 25, 49, .34) !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* The explicit expand button changes only Nara, never the Studio/landing geometry. */
html[data-physical-phone="true"] .nara-assistant-layer[data-nara-window-mode="expanded"],
html[data-physical-screen-mobile="true"] .nara-assistant-layer[data-nara-window-mode="expanded"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  display: grid !important;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  place-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 0 !important;
  z-index: 2147483600 !important;
}

html[data-physical-phone="true"] .nara-assistant-layer[data-nara-window-mode="expanded"] .nara-assistant-backdrop,
html[data-physical-screen-mobile="true"] .nara-assistant-layer[data-nara-window-mode="expanded"] .nara-assistant-backdrop {
  display: none !important;
}

html[data-physical-phone="true"] .nara-assistant-layer[data-nara-window-mode="expanded"] .nara-assistant-shell,
html[data-physical-screen-mobile="true"] .nara-assistant-layer[data-nara-window-mode="expanded"] .nara-assistant-shell {
  position: relative !important;
  inset: auto !important;
  grid-area: 1 / 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

/* Header owns reset, expand/restore, and close in one clean row. */
.nara-assistant-shell[data-nara-window-v24="true"] .nara-assistant-header {
  grid-template-columns: 42px minmax(0, 1fr) 36px 36px 36px !important;
  gap: 6px !important;
}

.nara-assistant-shell[data-nara-window-v24="true"] .nara-window-toggle-v24,
.nara-assistant-shell[data-nara-window-v24="true"] .nara-plugin-trigger-v24 {
  appearance: none !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  rotate: 0deg !important;
  touch-action: manipulation !important;
}

.nara-assistant-shell[data-nara-window-v24="true"] .nara-window-toggle-v24 svg,
.nara-assistant-shell[data-nara-window-v24="true"] .nara-plugin-trigger-v24 svg {
  width: 18px !important;
  height: 18px !important;
  margin: auto !important;
  transform: none !important;
  rotate: 0deg !important;
}

/* GPT-style permission-first plugin drawer inside the current Nara conversation. */
.nara-assistant-shell[data-nara-window-v24="true"] .nara-composer {
  position: relative !important;
}

.nara-plugin-panel-v24 {
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  bottom: calc(100% - 4px) !important;
  z-index: 80 !important;
  max-height: min(52dvh, 430px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(42, 83, 132, .18) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 20px 52px rgba(18, 44, 78, .26) !important;
  backdrop-filter: blur(18px) !important;
}

.nara-plugin-panel-v24[hidden] {
  display: none !important;
}

.nara-plugin-panel-v24 > header {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 12px 9px !important;
  border-bottom: 1px solid rgba(42, 83, 132, .12) !important;
}

.nara-plugin-panel-v24 > header b,
.nara-plugin-panel-v24 > header small {
  display: block !important;
}

.nara-plugin-panel-v24 > header b {
  color: #17345c !important;
  font-size: 13px !important;
}

.nara-plugin-panel-v24 > header small {
  margin-top: 2px !important;
  color: #748196 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.nara-plugin-panel-v24 > header button {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f0f4f9 !important;
  color: #40556f !important;
}

.nara-plugin-panel-v24 > header svg {
  width: 17px !important;
  height: 17px !important;
}

.nara-plugin-list-v24 {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  gap: 7px !important;
  padding: 9px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.nara-plugin-card-v24 {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px !important;
  border: 1px solid rgba(42, 83, 132, .12) !important;
  border-radius: 13px !important;
  background: #fff !important;
}

.nara-plugin-card-v24 > span {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: #edf4ff !important;
  color: #2d6edf !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.nara-plugin-card-v24 > div {
  min-width: 0 !important;
}

.nara-plugin-card-v24 b,
.nara-plugin-card-v24 small {
  display: block !important;
}

.nara-plugin-card-v24 b {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #1c3556 !important;
  font-size: 11px !important;
}

.nara-plugin-card-v24 small {
  margin-top: 2px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #7b8798 !important;
  font-size: 9px !important;
}

.nara-plugin-card-v24 > button {
  min-width: 76px !important;
  min-height: 34px !important;
  border: 1px solid #d8e2ef !important;
  border-radius: 10px !important;
  padding: 0 9px !important;
  background: #fff !important;
  color: #2d6edf !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.nara-plugin-card-v24 > button[data-status="connected"] {
  border-color: #bfe5d0 !important;
  background: #eaf8f0 !important;
  color: #176b44 !important;
}

.nara-plugin-card-v24 > button[data-status="pending"] {
  border-color: #f0d9aa !important;
  background: #fff8e9 !important;
  color: #8a5d12 !important;
}

.nara-plugin-empty-v24 {
  padding: 20px 14px !important;
  color: #6e7d90 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  html:not([data-desktop-layout-requested="true"]) .nara-assistant-shell[data-nara-window-v24="true"] .nara-context-bar {
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 9px !important;
  }

  html:not([data-desktop-layout-requested="true"]) .nara-assistant-shell[data-nara-window-v24="true"] .nara-capability-shortcuts {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
    padding: 3px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html:not([data-desktop-layout-requested="true"]) .nara-assistant-shell[data-nara-window-v24="true"] .nara-capability-shortcuts::-webkit-scrollbar {
    display: none !important;
  }

  html:not([data-desktop-layout-requested="true"]) .nara-assistant-shell[data-nara-window-v24="true"] .nara-capability-shortcuts > button {
    flex: 0 0 72px !important;
    min-width: 72px !important;
    min-height: 48px !important;
    padding: 5px 4px !important;
  }

  html:not([data-desktop-layout-requested="true"]) .nara-assistant-shell[data-nara-window-v24="true"] .nara-quick-prompts {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html:not([data-desktop-layout-requested="true"]) .nara-assistant-shell[data-nara-window-v24="true"] .nara-quick-prompts::-webkit-scrollbar {
    display: none !important;
  }

  html:not([data-desktop-layout-requested="true"]) .nara-plugin-card-v24 {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  html:not([data-desktop-layout-requested="true"]) .nara-plugin-card-v24 > button {
    min-width: 68px !important;
    padding-inline: 7px !important;
  }
}

@supports not (height: 100dvh) {
  html[data-physical-phone="true"] .nara-assistant-layer[data-nara-window-mode],
  html[data-physical-screen-mobile="true"] .nara-assistant-layer[data-nara-window-mode] {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
}