:root{--ui-nav-height:72px}
#appShell.shell{
  padding-left:0!important;
  padding-right:0!important;
  padding-bottom:0!important;
}
#appShell .topbar{
  left:0!important;
  right:0!important;
  width:100%!important;
}
#appShell>.nav{
  position:fixed!important;
  z-index:1400!important;
  inset:auto 0 0 0!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  height:calc(var(--ui-nav-height) + var(--safe-b))!important;
  min-height:calc(var(--ui-nav-height) + var(--safe-b))!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:0!important;
  padding:5px max(8px,var(--safe-r)) calc(5px + var(--safe-b)) max(8px,var(--safe-l))!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  border:0!important;
  border-top:1px solid rgba(19,199,255,.28)!important;
  border-right:0!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(3,13,19,.965),rgba(1,7,11,.985))!important;
  box-shadow:0 -14px 34px rgba(0,0,0,.46),0 -1px 18px rgba(19,199,255,.10)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
#appShell>.nav::-webkit-scrollbar{display:none}
#appShell>.nav>button{
  flex:1 1 0!important;
  min-width:68px!important;
  max-width:150px!important;
  min-height:58px!important;
  width:auto!important;
  padding:5px 6px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  border-radius:12px!important;
  text-align:center!important;
  font-size:10px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
#appShell>.nav>button.hidden{display:none!important}
#appShell>.nav .nicon{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  height:26px!important;
  margin:0!important;
  flex:none!important;
  font-size:18px!important;
}
#appShell>.nav button.on::before{
  left:50%!important;
  top:0!important;
  width:30px!important;
  height:2px!important;
  transform:translateX(-50%)!important;
}
#appShell>.nav .adminBottomEntry .nicon{color:#3dc7ff!important}
#appShell>.nav .cifraBottomEntry .nicon{color:#62d6ff!important}
#appShell>.nav .cifraBottomEntry .nicon img{display:block;width:28px!important;height:28px!important;object-fit:contain!important;filter:none!important}
#appShell>.nav [data-nav="work"] .nicon{color:#ad86ff!important}

/* Unified drawer icon geometry */
#sideDrawer .drawerNav>button{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  text-align:left!important;
}
#sideDrawer .drawerNav .drawerIcon{
  width:28px!important;
  height:28px!important;
  flex:0 0 28px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
#sideDrawer .drawerNav .drawerIcon svg,
#sideDrawer .drawerNav .drawerIcon img{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  max-width:22px!important;
  max-height:22px!important;
  display:block!important;
  object-fit:contain!important;
  transform:none!important;
  margin:0!important;
}
#sideDrawer .drawerNav .drawerIcon svg{stroke-width:1.7!important}
#sideDrawer .drawerNav .adminNavLabel,
#sideDrawer .drawerNav .cifraNavLabel,
#sideDrawer .drawerNav #sePayNav>span:last-child{
  min-width:0!important;
  margin:0!important;
}
#mainContent.content{
  padding-bottom:calc(var(--ui-nav-height) + 22px + var(--safe-b))!important;
}
html.edgeToEdge #mainContent.content{
  bottom:calc(var(--ui-nav-height) + var(--safe-b))!important;
  padding-bottom:18px!important;
}
@media(min-width:900px){
  #drawerLayer:not(.open){visibility:hidden!important;pointer-events:none!important}
  #drawerLayer:not(.open) .sideDrawer{transform:translateX(-105%)!important}
  #drawerLayer.open{visibility:visible!important;pointer-events:auto!important}
  #drawerLayer.open .sideDrawer{transform:translateX(0)!important}
  #appShell.shell{padding-left:0!important}
  #appShell .topbar{left:0!important}
  #appShell>.nav{
    inset:auto 0 0 0!important;
    width:100%!important;
    height:calc(var(--ui-nav-height) + var(--safe-b))!important;
    padding:5px max(14px,var(--safe-r)) calc(5px + var(--safe-b)) max(14px,var(--safe-l))!important;
  }
  #appShell>.nav>button{
    width:auto!important;
    min-width:88px!important;
    max-width:150px!important;
    padding:5px 12px!important;
  }
  #mainContent.content{padding-top:24px!important}
}
.masterAppMount>#mainContent{
  width:min(100%,1180px)!important;
  max-width:1180px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
body.masterAppOpen #adminBody .settingsGroup .settingRow{
  flex-wrap:wrap!important;
  align-items:center!important;
}
body.masterAppOpen #adminBody .settingRow .grow{
  flex:1 1 280px!important;
  min-width:min(280px,100%)!important;
  max-width:100%!important;
}
body.masterAppOpen #adminBody .settingRow button{
  flex:0 0 auto!important;
  max-width:100%!important;
}
body.masterAppOpen #rootPromptStatus{
  min-width:220px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:899px){
  #drawerLayer{padding:0!important;background:transparent!important}
  #drawerLayer.open .drawerBackdrop{background:rgba(0,0,0,.72)!important}
  #drawerLayer .sideDrawer{
    top:calc(var(--safe-t) + 12px)!important;
    bottom:calc(var(--safe-b) + 12px)!important;
    left:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    width:min(88vw,370px)!important;
    padding:10px 14px 10px max(14px,var(--safe-l))!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0 18px 18px 0!important;
    background:linear-gradient(180deg,rgba(2,13,18,.995),rgba(1,8,12,.995))!important;
    box-shadow:20px 0 50px rgba(0,0,0,.52)!important;
  }
  #drawerLayer .drawerBrand{margin:0 8px 5px!important;padding:0!important;flex:0 0 auto!important}
  #drawerLayer .drawerHead{margin:5px 0 8px!important;padding:10px 12px!important;flex:0 0 auto!important}
  #drawerLayer .drawerNav{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;gap:3px!important;padding:0 0 4px!important}
  #drawerLayer .drawerNav>button{flex:0 0 48px!important;min-height:48px!important;max-height:48px!important;padding:8px 11px!important}
  #drawerLayer .drawerFooter{flex:0 0 auto!important;margin-top:7px!important;padding-top:8px!important;padding-bottom:0!important}
}

.sectionBackButton{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  min-height:36px!important;
  margin:0 0 12px!important;
  padding:6px 10px 6px 2px!important;
  border:0!important;
  background:transparent!important;
  color:var(--cyan)!important;
  font:650 13px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:.01em!important;
  box-shadow:none!important;
}
.sectionBackButton .sectionBackArrow{font-size:24px!important;line-height:1!important;margin-top:-1px!important}
.sectionBackButton:active{opacity:.68!important}

@media(max-width:700px){
  #appShell>.nav{justify-content:flex-start!important}
  #appShell>.nav>button{flex:1 0 76px!important;max-width:110px!important}
  body.masterAppOpen #adminBody .settingRow{
    align-items:stretch!important;
  }
  body.masterAppOpen #adminBody .settingRow .grow{
    flex:1 0 100%!important;
    min-width:100%!important;
  }
  body.masterAppOpen #adminBody .settingRow button{
    flex:1 1 150px!important;
  }
}


/* UNIFIED CHAT CHROME · 2026-10-02 */
.unifiedChatHead{
  flex:0 0 58px!important;
  min-height:58px!important;
  height:58px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.unifiedChatHead .chatMenuButton{
  flex:0 0 auto!important;
  width:62px!important;
  min-width:62px!important;
  height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  padding:0 8px!important;
  border:1px solid var(--se-line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--skin-card2) 78%,transparent)!important;
  color:var(--skin-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.unifiedChatHead .chatMenuButton .menuGlyph{width:18px!important;display:flex!important;flex-direction:column!important;gap:3px!important}
.unifiedChatHead .chatMenuButton .menuGlyph i{display:block!important;width:18px!important;height:1.5px!important;border-radius:2px!important;background:currentColor!important}
.unifiedChatHead .chatMenuButton .menuLabel{font-size:8px!important;font-weight:800!important;letter-spacing:.08em!important}
.unifiedChatHead .back{
  flex:0 0 auto!important;
  min-width:68px!important;
  padding:9px 6px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.unifiedChatHead .chatBrandAvatar,
.unifiedChatHead .directAvatar,
.unifiedChatHead .systemChatAvatar{
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
}
.unifiedChatHead .chatHeadTitle{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  text-align:left!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.unifiedChatHead .chatHeaderAction,
.unifiedChatHead .chatDeleteButton{
  flex:0 0 38px!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
}
.unifiedChatHead .directTitleWrap{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
}
.unifiedChatHead .directTitleWrap .chatHeadTitle{text-align:left!important;margin:0!important}

/* Chat viewport is a fixed three-part layout: header / scrollable history / composer. */
.chatScreen{
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  max-height:100vh!important;
  max-height:100dvh!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.chatScreen>.messages{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
  padding-bottom:max(20px,calc(20px + var(--safe-b)))!important;
}
.chatScreen>.composer{
  position:relative!important;
  flex:0 0 auto!important;
  min-height:62px!important;
  width:100%!important;
  box-sizing:border-box!important;
  align-items:flex-end!important;
  overflow:visible!important;
  z-index:20!important;
}
.chatScreen>.composer textarea{
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.chatScreen>.composer .round{flex:0 0 42px!important}
.composerScrollControls{
  order:5!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  margin-left:-2px!important;
}
.composerScrollBtn{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--se-line)!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--skin-card2) 82%,transparent)!important;
  color:var(--skin-text)!important;
  font-size:18px!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 4px 12px rgba(0,0,0,.18)!important;
}
.composerScrollBtn:disabled{opacity:.24!important;pointer-events:none!important}
.chatScreen>.composer .send + .composerScrollControls .composerScrollBtn:last-child{
  border-color:color-mix(in srgb,var(--skin-accent) 34%,var(--skin-border))!important;
  box-shadow:0 0 12px color-mix(in srgb,var(--skin-accent2) 12%,transparent)!important;
}

@media(max-width:700px){
  .unifiedChatHead{gap:5px!important;padding:0 7px!important}
  .unifiedChatHead .chatMenuButton{width:42px!important;min-width:42px!important;padding:0!important}
  .unifiedChatHead .chatMenuButton .menuLabel{display:none!important}
  .unifiedChatHead .back{min-width:58px!important;font-size:12px!important;padding-left:3px!important;padding-right:3px!important}
  .unifiedChatHead .chatBrandAvatar,.unifiedChatHead .directAvatar,.unifiedChatHead .systemChatAvatar{width:32px!important;height:32px!important;min-width:32px!important;flex-basis:32px!important}
  .unifiedChatHead .chatHeaderAction,.unifiedChatHead .chatDeleteButton{width:36px!important;min-width:36px!important;height:36px!important}
  .chatScreen>.composer{gap:5px!important;padding-left:7px!important;padding-right:7px!important}
  .chatScreen>.composer .round{flex-basis:40px!important;width:40px!important;height:40px!important}
  .composerScrollControls{gap:3px!important;margin-left:-1px!important}
  .composerScrollBtn{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;border-radius:9px!important;font-size:16px!important}
}
@media(max-width:390px){
  .unifiedChatHead .back{min-width:51px!important;font-size:11px!important}
  .unifiedChatHead .chatBrandAvatar,.unifiedChatHead .directAvatar,.unifiedChatHead .systemChatAvatar{display:none!important}
  .chatScreen>.composer .round{flex-basis:36px!important;width:36px!important;height:36px!important}
  .composerScrollBtn{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important}
}
@media(prefers-reduced-motion:reduce){.chatScreen>.messages{scroll-behavior:auto!important}}


/* UNIVERSAL SECTION SCROLL-TOP */
.pageScrollTop{
  position:fixed!important;
  right:max(14px,var(--safe-r))!important;
  bottom:calc(var(--ui-nav-height,72px) + 14px + var(--safe-b))!important;
  z-index:1450!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid var(--se-line)!important;
  border-radius:14px!important;
  background:color-mix(in srgb,var(--skin-surface-strong) 88%,transparent)!important;
  color:var(--skin-text)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.30),0 0 18px color-mix(in srgb,var(--skin-accent2) 10%,transparent)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  backdrop-filter:blur(16px)!important;
  font-size:22px!important;
  line-height:1!important;
}
.pageScrollTop.hidden{display:none!important}
.pageScrollTop:active{transform:scale(.96)!important;border-color:var(--se-line-strong)!important}
@media(max-width:700px){
  .pageScrollTop{right:max(10px,var(--safe-r))!important;bottom:calc(var(--ui-nav-height,72px) + 10px + var(--safe-b))!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border-radius:13px!important}
}


/* ROOT AI CHAT · voice integrated into composer */
#liveVoiceBtn{display:none!important}
#liveVoiceOverlay{z-index:2147483000!important}
#chatScreen,#directChatScreen,#systemChatScreen{
  box-sizing:border-box!important;
  padding-top:max(0px,env(safe-area-inset-top))!important;
}
#chatScreen #rootComposer{
  position:relative!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) 62px!important;
  grid-template-rows:minmax(54px,auto)!important;
  align-items:center!important;
  column-gap:8px!important;
  row-gap:0!important;
  width:100%!important;
  min-height:78px!important;
  max-height:150px!important;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
  box-sizing:border-box!important;
}
#chatScreen #rootComposer #rootImagePreview{grid-column:1/-1!important;grid-row:1!important}
#chatScreen #rootComposer #rootAttach{grid-column:1!important;grid-row:1!important;align-self:end!important;margin:0!important}
#chatScreen #rootComposer #messageInput{grid-column:2!important;grid-row:1!important;align-self:center!important;margin:0!important;min-height:52px!important;max-height:110px!important}
#chatScreen #rootComposer #micBtn,#chatScreen #rootComposer #sendBtn{grid-column:3!important;grid-row:1!important;align-self:center!important;margin:0!important}
#chatScreen #rootComposer .composerScrollControls{
  position:absolute!important;
  left:18px!important;
  top:-74px!important;
  width:34px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  z-index:30!important;
}
#chatScreen #rootComposer .composerScrollBtn{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:11px!important}
#chatScreen #rootComposer #micBtn{
  width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;
  border-radius:50%!important;
  background:#25ff70!important;
  border:2px solid rgba(101,255,158,.95)!important;
  color:#001b0b!important;
  box-shadow:0 0 7px rgba(50,255,120,.95),0 0 26px rgba(35,255,105,.50)!important;
}
#chatScreen #rootComposer #micBtn svg{width:28px!important;height:28px!important}
#chatScreen #rootComposer #micBtn.recording{background:#20c7ff!important;border-color:#47c7ff!important;color:#fff!important;box-shadow:0 0 8px rgba(32,199,255,.9),0 0 28px rgba(32,199,255,.38)!important}
#chatScreen #rootComposer #micBtn:active{transform:scale(.95)!important}
#chatScreen #rootComposer #sendBtn{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;border-radius:50%!important}
#chatScreen>.messages{padding-bottom:24px!important}
@media(max-width:700px){
  #chatScreen #rootComposer{grid-template-columns:54px minmax(0,1fr) 58px!important;padding-left:10px!important;padding-right:10px!important;min-height:76px!important}
  #chatScreen #rootComposer #rootAttach{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  #chatScreen #rootComposer #micBtn,#chatScreen #rootComposer #sendBtn{width:54px!important;height:54px!important;min-width:54px!important;min-height:54px!important}
  #chatScreen #rootComposer .composerScrollControls{left:18px!important;top:-72px!important}
}
@media(max-width:390px){
  #chatScreen #rootComposer{grid-template-columns:50px minmax(0,1fr) 54px!important;column-gap:6px!important}
  #chatScreen #rootComposer #micBtn,#chatScreen #rootComposer #sendBtn{width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important}
}

@supports (-webkit-touch-callout:none){
  #chatScreen,#directChatScreen,#systemChatScreen{
    padding-top:max(24px,env(safe-area-inset-top))!important;
  }
}

/* ROOT SE ownership watermark — intentionally subtle and non-interactive. */
html body::after {
  content: 'ROOT SE • моя система';
  position: fixed;
  left: 50%;
  bottom: max(3px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2147483000;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 8px;
  line-height: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  color: rgba(255,255,255,.20);
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

@media (max-width: 600px) {
  html body::after {
    font-size: 7px;
    letter-spacing: .07em;
    color: rgba(255,255,255,.17);
  }
}