/* Ngeblogging Studio v14 — final source authority.
   The complete layout remains in the imported base; this last layer owns
   safety-critical visibility, interaction, and responsive invariants. */
@import "./studio-v14-layout-base.css";

:root {
  --sn-rail-width: 72px;
  --sn-panel-width: 228px;
  --sn-phone-rail: 58px;
  --sn-phone-panel: min(78vw, 272px);
}

[hidden],
.nara-composer input[type="file"],
.nara-native-file-input {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sn-mobile-nav,
.sn-mobile-sheet-layer,
.sn-side-bottom,
.sn-side-close,
[data-nara-workspace-route="true"] {
  display: none !important;
}

.sn-main,
.sn-side + .sn-main {
  width: calc(100% - var(--sn-panel-width));
  max-width: calc(100% - var(--sn-panel-width));
  margin-left: var(--sn-panel-width) !important;
}

.sn-side.collapsed {
  width: var(--sn-rail-width) !important;
  max-width: var(--sn-rail-width) !important;
}

.sn-side.collapsed + .sn-main {
  width: calc(100% - var(--sn-rail-width));
  max-width: calc(100% - var(--sn-rail-width));
  margin-left: var(--sn-rail-width) !important;
}

.sn-icon {
  touch-action: manipulation;
}

.sn-top-actions .sn-nara-button,
.nara-floating-button,
.nara-floating-button * {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.nara-floating-button {
  position: fixed !important;
  z-index: 24000 !important;
}

.nara-assistant-layer {
  z-index: 30000 !important;
  isolation: isolate;
}

.nara-composer-tools {
  grid-template-columns: 42px 42px minmax(78px, 1fr) minmax(88px, 1fr) 44px !important;
}

.sn-view-pad,
.nw-page,
.tn-studio,
.ml-page,
.bc-center,
.sn-welcome,
.sn-page-title,
.sn-home-grid,
.sn-metrics,
.sn-settings-grid,
.sn-settings-extras,
.sn-info-grid {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .sn-cloud span,
  .sn-view-site span {
    display: none;
  }
}

@media (max-width: 760px) {
  .sn-side.collapsed {
    width: var(--sn-phone-rail) !important;
    max-width: var(--sn-phone-rail) !important;
  }

  .sn-main,
  .sn-side + .sn-main,
  .sn-side.collapsed + .sn-main,
  .sn-side:not(.collapsed) + .sn-main {
    width: auto !important;
    max-width: none !important;
    margin-left: var(--sn-phone-rail) !important;
  }

  .sn-side:not(.collapsed) + .sn-main::before {
    content: "";
    pointer-events: none;
  }

  .sn-side.collapsed + .sn-main .sn-icon {
    left: calc(var(--sn-phone-rail) - 20px) !important;
  }

  .sn-welcome,
  .sn-page-title,
  .sn-home-grid,
  .sn-settings-grid,
  .sn-info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sn-content-tools {
    flex-direction: column;
  }

  .sn-doc-row {
    grid-template-columns: minmax(0, 1fr) auto 34px !important;
  }

  .sn-domain-card {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .nara-assistant-layer,
  .nara-assistant-shell {
    width: auto !important;
    max-width: none !important;
  }

  .nara-composer textarea {
    min-height: 88px !important;
  }
}

/* Physical-device authority. It remains active when Android browsers request a
   desktop viewport, so a phone cannot fall back to the tiny desktop dashboard. */
html[data-physical-mobile="true"] {
  --sn-phone-rail: 58px;
  --sn-phone-panel: min(82vw, 286px);
}

html[data-desktop-site-phone="true"] body {
  overflow-x: hidden !important;
}

html[data-desktop-site-phone="true"] .sn-shell {
  width: var(--sn-physical-layout-width) !important;
  min-width: var(--sn-physical-layout-width) !important;
  max-width: var(--sn-physical-layout-width) !important;
  min-height: var(--sn-physical-layout-height) !important;
  zoom: var(--sn-browser-scale);
}

html[data-physical-mobile="true"],
html[data-physical-mobile="true"] body,
html[data-physical-mobile="true"] #root,
html[data-physical-mobile="true"] .sn-shell {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

html[data-physical-mobile="true"] .sn-shell,
html[data-physical-mobile="true"] .sn-main {
  min-height: 100vh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
}

html[data-physical-mobile="true"] .sn-side {
  width: var(--sn-phone-panel) !important;
  max-width: var(--sn-phone-panel) !important;
  z-index: 22000 !important;
  box-shadow: 12px 0 42px rgba(12, 31, 56, .20) !important;
}

html[data-physical-mobile="true"] .sn-side.collapsed {
  width: var(--sn-phone-rail) !important;
  max-width: var(--sn-phone-rail) !important;
  box-shadow: 3px 0 14px rgba(12, 31, 56, .08) !important;
}

html[data-physical-mobile="true"] .sn-side.collapsed .sn-logo {
  height: 62px !important;
  min-height: 62px !important;
  padding-inline: 0 !important;
  justify-content: center !important;
}

html[data-physical-mobile="true"] .sn-side.collapsed .sn-logo b,
html[data-physical-mobile="true"] .sn-side.collapsed .sn-new span,
html[data-physical-mobile="true"] .sn-side.collapsed > nav > button span {
  display: none !important;
}

html[data-physical-mobile="true"] .sn-side.collapsed .sn-new,
html[data-physical-mobile="true"] .sn-side.collapsed > nav > button {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  justify-content: center !important;
}

html[data-physical-mobile="true"] .sn-side.collapsed > nav {
  padding-inline: 6px !important;
}

html[data-physical-mobile="true"] .sn-main,
html[data-physical-mobile="true"] .sn-side + .sn-main,
html[data-physical-mobile="true"] .sn-side.collapsed + .sn-main,
html[data-physical-mobile="true"] .sn-side:not(.collapsed) + .sn-main {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: var(--sn-phone-rail) !important;
  overflow-x: hidden !important;
}

html[data-physical-mobile="true"] .sn-side:not(.collapsed) + .sn-main::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 0 0 var(--sn-phone-panel) !important;
  z-index: 21000 !important;
  background: rgba(9, 25, 46, .42) !important;
  backdrop-filter: blur(2px);
  pointer-events: none !important;
}

html[data-physical-mobile="true"] .sn-icon {
  position: fixed !important;
  left: calc(var(--sn-phone-panel) - 20px) !important;
  top: max(11px, env(safe-area-inset-top)) !important;
  z-index: 23000 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(17, 43, 78, .18) !important;
  transform: none !important;
}

html[data-physical-mobile="true"] .sn-side.collapsed + .sn-main .sn-icon {
  left: calc(var(--sn-phone-rail) - 20px) !important;
}

html[data-physical-mobile="true"] .sn-top {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 62px !important;
  height: 62px !important;
  padding: 8px 8px 8px 28px !important;
  gap: 6px !important;
  overflow: visible !important;
}

html[data-physical-mobile="true"] .sn-workspace {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 4px 5px !important;
}

html[data-physical-mobile="true"] .sn-workspace > div,
html[data-physical-mobile="true"] .sn-workspace b {
  min-width: 0 !important;
}

html[data-physical-mobile="true"] .sn-workspace b {
  max-width: clamp(92px, 28vw, 180px) !important;
}

html[data-physical-mobile="true"] .sn-cloud,
html[data-physical-mobile="true"] .sn-install-app,
html[data-physical-mobile="true"] .sn-top-actions > button[aria-label="Cari"] {
  display: none !important;
}

html[data-physical-mobile="true"] .sn-top-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-left: auto !important;
}

html[data-physical-mobile="true"] .sn-view-site,
html[data-physical-mobile="true"] .sn-top-actions .sn-nara-button,
html[data-physical-mobile="true"] .sn-avatar {
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  line-height: 1 !important;
  transform: none !important;
}

html[data-physical-mobile="true"] .sn-view-site span,
html[data-physical-mobile="true"] .sn-top-actions .sn-nara-button {
  font-size: 0 !important;
}

html[data-physical-mobile="true"] .sn-view-site svg,
html[data-physical-mobile="true"] .sn-top-actions .sn-nara-button svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: auto !important;
  transform: none !important;
}

html[data-physical-mobile="true"] .sn-view-pad,
html[data-physical-mobile="true"] .nw-page,
html[data-physical-mobile="true"] .tn-studio,
html[data-physical-mobile="true"] .ml-page,
html[data-physical-mobile="true"] .bc-center {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: calc(100dvh - 62px) !important;
  padding: 18px 14px 104px !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

html[data-physical-mobile="true"] .sn-welcome,
html[data-physical-mobile="true"] .sn-page-title,
html[data-physical-mobile="true"] .sn-home-grid,
html[data-physical-mobile="true"] .sn-settings-grid,
html[data-physical-mobile="true"] .sn-info-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-physical-mobile="true"] .sn-welcome > div:last-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
}

html[data-physical-mobile="true"] .sn-welcome > div:last-child > *,
html[data-physical-mobile="true"] .sn-secondary-link,
html[data-physical-mobile="true"] .sn-primary {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-physical-mobile="true"] .sn-metrics {
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html[data-physical-mobile="true"] .sn-content-tools {
  align-items: stretch !important;
  flex-direction: column !important;
}

html[data-physical-mobile="true"] .sn-content-tools label,
html[data-physical-mobile="true"] .sn-content-tools input {
  width: 100% !important;
  min-width: 0 !important;
}

html[data-physical-mobile="true"] .sn-table-head {
  display: none !important;
}

html[data-physical-mobile="true"] .sn-doc-row {
  grid-template-columns: minmax(0, 1fr) auto 34px !important;
}

html[data-physical-mobile="true"] .sn-doc-row time {
  display: none !important;
}

html[data-physical-mobile="true"] .sn-domain-card {
  grid-template-columns: 42px minmax(0, 1fr) !important;
}

html[data-physical-mobile="true"] .sn-domain-card > i {
  grid-column: 2 !important;
  justify-self: start !important;
}

/* Stable Nara launchers: one centered glyph, no skewed label or inherited flex geometry. */
html[data-physical-mobile="true"] .nara-floating-button {
  position: fixed !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483000 !important;
  box-sizing: border-box !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 6px !important;
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  place-items: center !important;
  border-radius: 19px !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transform: none !important;
  isolation: isolate !important;
}

html[data-physical-mobile="true"] .nara-floating-button > span {
  grid-area: 1 / 1 !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

html[data-physical-mobile="true"] .nara-floating-button > b,
html[data-physical-mobile="true"] .nara-floating-button > small {
  display: none !important;
}

html[data-physical-mobile="true"] .nara-floating-button svg,
html[data-physical-mobile="true"] .nara-brand-orb svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  margin: auto !important;
  transform: none !important;
}

html[data-physical-mobile="true"] .nara-assistant-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483100 !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  display: block !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  transform: none !important;
}

html[data-physical-mobile="true"] .nara-assistant-backdrop {
  display: none !important;
}

html[data-physical-mobile="true"] .nara-assistant-shell {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  contain: none !important;
  overflow: hidden !important;
  transform: none !important;
  pointer-events: auto !important;
}

html[data-physical-mobile="true"] .nara-assistant-header {
  flex: 0 0 68px !important;
  min-height: 68px !important;
  height: 68px !important;
  grid-template-columns: 44px minmax(0, 1fr) 38px 38px !important;
  padding: 0 12px !important;
}

html[data-physical-mobile="true"] .nara-brand-orb {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

html[data-physical-mobile="true"] .nara-context-bar {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 42px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: flex-start !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  overflow: visible !important;
}

html[data-physical-mobile="true"] .nara-capability-shortcuts {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: repeat(5, minmax(64px, 1fr)) !important;
  gap: 7px !important;
  padding: 2px 0 0 !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain !important;
}

html[data-physical-mobile="true"] .nara-capability-shortcuts > button {
  min-width: 64px !important;
  min-height: 50px !important;
}

html[data-physical-mobile="true"] .nara-assistant-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 14px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-physical-mobile="true"] .nara-message > div {
  max-width: calc(100% - 38px) !important;
}

html[data-physical-mobile="true"] .nara-quick-prompts {
  flex: 0 0 auto !important;
  width: 100% !important;
  padding: 8px 10px 5px !important;
  overflow-x: auto !important;
}

html[data-physical-mobile="true"] .nara-composer {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 8px 9px max(10px, env(safe-area-inset-bottom)) !important;
  background: #fff !important;
}

html[data-physical-mobile="true"] .nara-composer textarea {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 88px !important;
  max-height: 28dvh !important;
  margin: 0 !important;
}

html[data-physical-mobile="true"] .nara-composer-tools {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 50px !important;
  display: grid !important;
  grid-template-columns: 40px 40px minmax(72px, 1fr) minmax(82px, 1fr) 42px !important;
  gap: 4px !important;
  overflow: visible !important;
}

html[data-physical-mobile="true"] .nara-composer-tools > button,
html[data-physical-mobile="true"] .nara-attachment-menu-wrap,
html[data-physical-mobile="true"] .nara-attachment-menu-wrap > button,
html[data-physical-mobile="true"] .nara-send {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
}

html[data-physical-mobile="true"] .nara-select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html[data-physical-mobile="true"] .nara-attachment-menu {
  position: fixed !important;
  left: 9px !important;
  right: 9px !important;
  bottom: calc(154px + env(safe-area-inset-bottom)) !important;
  width: auto !important;
  max-width: none !important;
  z-index: 2147483200 !important;
}

@media (max-width: 380px) {
  html[data-physical-mobile="true"] {
    --sn-phone-rail: 54px;
    --sn-phone-panel: min(84vw, 268px);
  }

  html[data-physical-mobile="true"] .nara-composer-tools {
    grid-template-columns: 38px 38px minmax(66px, 1fr) minmax(76px, 1fr) 40px !important;
  }
}