:root{--bg:#0b1116;--panel:#101923;--panel2:#16242f;--line:#304654;--text:#eef5f8;--muted:#9db0bc;--accent:#4db7ff;--danger:#b74f4f} *{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Consolas,monospace} button,input,textarea{font:inherit}button{cursor:pointer} #app,#wrap{position:fixed;inset:0;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated;background:#20321d} /* Game tool rail */ #tools{position:absolute;left:max(6px,env(safe-area-inset-left));top:max(6px,env(safe-area-inset-top));bottom:max(6px,env(safe-area-inset-bottom));width:70px;z-index:10;background:#101923ef;border:1px solid #2f4352;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 18px #0008} .brand{height:46px;display:grid;place-items:center;border-bottom:1px solid #2e414f;margin-bottom:2px;font-weight:700;font-size:9px;text-align:center;line-height:1.05} .tool{height:58px;border:1px solid transparent;background:transparent;color:#dfe9ef;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;padding:3px} .tool img{display:none}.tool::before{font-size:22px;line-height:1}.tool[data-tool="select"]::before{content:"⌖"}.tool[data-tool="region"]::before{content:"▦"}.tool[data-tool="house"]::before{content:"⌂"}#archiveBtn::before{content:"▤"}.tool.active{background:#173956;border-color:#3d9fe7}.tool.bottom{margin-top:auto} #hud{position:absolute;left:84px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));z-index:8;display:flex;justify-content:space-between;gap:8px;pointer-events:none} .hudbox{background:#111a24ea;border:1px solid #334a5a;border-radius:8px;padding:7px 9px;font-size:10px;color:#d6e1e7;box-shadow:0 4px 14px #0006} /* Small house summary */ #housePanel{position:absolute;right:10px;top:10px;width:min(360px,calc(100% - 92px));z-index:18;background:#0f1821f7;border:2px solid #314755;border-radius:10px;display:none;box-shadow:0 10px 28px #0009;overflow:hidden} #housePanel.open{display:block}.panelHead{height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#172532;border-bottom:1px solid #334957}.panelHead strong{font-size:13px}.panelHead button{margin-left:auto} .panelBody{padding:11px}.noteCard{display:grid;grid-template-columns:92px 1fr;gap:10px}.previewHouse{background:#0d151c;border:1px solid #314757;border-radius:6px;display:grid;place-items:center;min-height:92px}.previewHouse img{max-width:84px;max-height:96px;image-rendering:pixelated} .metaList{font-size:10px;color:#b8c6ce;line-height:1.55}.openNote{margin-top:10px;width:100%;min-height:66px;border:1px solid #b88a47;background:#1b2a35;color:white;border-radius:7px;text-align:left;padding:10px 12px}.openNote b{display:block;font-size:13px}.openNote span{font-size:10px;color:#b7c5ce} .row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.btn{border:1px solid #3a5060;background:#172633;color:#edf4f7;border-radius:5px;padding:7px 9px;font-size:11px}.danger{border-color:#8d4141;background:#472022} /* Fullscreen editor */ #editorFull{position:fixed;inset:0;z-index:50;background:#0b1117;display:none} #editorFull.open{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) 54px} #fileSidebar{position:fixed;left:0;top:0;bottom:0;width:min(340px,88vw);z-index:65;border-right:1px solid #314654;background:#0f1821;overflow:hidden;display:flex;flex-direction:column;transform:translateX(-101%);transition:transform .2s;box-shadow:8px 0 24px #0008} #fileSidebar.open{transform:none} .sidebarTop{height:52px;display:flex;align-items:center;gap:7px;padding:0 9px;border-bottom:1px solid #314654;background:#16242f}.sidebarTop strong{font-size:11px} #tree{padding:8px;overflow:auto;flex:1;font-size:11px}.treeRegion{margin:5px 0}.treeRegionTitle{color:#dce8ee;padding:5px 4px}.treeFile{display:block;width:100%;text-align:left;border:0;background:transparent;color:#b9c8d0;padding:6px 7px 6px 18px;border-radius:5px}.treeFile.active{background:#153c64;color:white}.treeFile:hover{background:#142936} #editorTop{grid-column:1;grid-row:1;border-bottom:1px solid #314654;background:#101a23;display:flex;align-items:center;padding:0 10px;gap:8px;min-width:0} #fileNameDisplay{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.saveState{font-size:9px;color:#8da2ad}.iconBtn{border:1px solid #3a5060;background:#172633;color:#edf4f7;border-radius:5px;min-width:36px;height:34px} #editorMain{grid-column:1;grid-row:2;display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;background:#0c1319} #mdToolbar{display:flex;gap:5px;flex-wrap:wrap;padding:7px 9px;border-bottom:1px solid #314654;background:#111c25;overflow-x:auto} .mdBtn{height:32px;min-width:34px;padding:0 8px;border:1px solid #38505f;background:#162531;color:#edf5f8;border-radius:5px;font-size:11px} #editorScroll{overflow:auto;padding:12px 14px 120px} #propertiesBox{border-left:3px solid #9c7b45;background:#111b22;border-radius:5px;padding:9px 10px;margin-bottom:10px;color:#b8c6ce;font-size:11px;line-height:1.5} #bodyEditor{width:100%;min-height:calc(100vh - 250px);resize:none;border:0;outline:0;background:transparent;color:#eef5f8;font:15px/1.58 ui-monospace,SFMono-Regular,Consolas,monospace} #editorBottom{grid-column:1;grid-row:3;border-top:1px solid #314654;background:#101a23;display:flex;align-items:center;justify-content:space-between;padding:0 10px;gap:10px}.statusText{font-size:9px;color:#8ea2ad}.aiLaunch{height:38px;border:1px solid #4b82a7;background:#143a57;color:white;border-radius:6px;padding:0 13px;font-size:11px} #sidebarToggleMobile{display:none} /* AI drawer */ #aiPanel{position:fixed;right:0;top:0;bottom:0;width:min(380px,92vw);z-index:70;background:#0f1821;border-left:2px solid #314755;transform:translateX(101%);transition:.2s;display:flex;flex-direction:column;box-shadow:-8px 0 24px #0008} #aiPanel.open{transform:none}.aiHead{height:52px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid #314654;background:#172532}.aiHead strong{font-size:12px}.aiHead button{margin-left:auto}.chatLog{flex:1;overflow:auto;padding:10px}.bubble{max-width:92%;padding:8px 9px;border-radius:7px;margin-bottom:8px;font-size:11px;line-height:1.45}.bubble.ai{background:#172733;border:1px solid #2e4556}.bubble.user{background:#153a58;border:1px solid #28648f;margin-left:auto}.chatInput{border-top:1px solid #314654;padding:9px;display:flex;gap:7px}.chatInput textarea{flex:1;min-height:62px;max-height:120px;background:#0b1319;color:white;border:1px solid #38505f;border-radius:5px;padding:8px;resize:none;font-size:12px} /* Region dialog/toast */ #dialog{position:absolute;inset:0;z-index:30;background:#0009;display:none;place-items:center;padding:16px}#dialog.open{display:grid}.dialogBox{width:min(420px,94vw);background:#111c25;border:2px solid #3a5262;border-radius:9px;padding:13px}.dialogBox h3{margin:0 0 8px;font-size:14px}label{display:block;font-size:10px;color:var(--muted);margin-top:8px}input,textarea{font-size:14px} .dialogBox input,.dialogBox textarea{width:100%;margin-top:4px;border:1px solid #38505f;background:#0c141b;color:#eef6fa;border-radius:5px;padding:8px}.dialogBox textarea{min-height:90px;resize:vertical} #toast{position:absolute;right:10px;bottom:10px;z-index:90;pointer-events:none;max-width:300px;background:#14212a;border:1px solid #3e5665;border-radius:8px;padding:8px 10px;font-size:10px;opacity:0;transform:translateY(7px);transition:.18s}#toast.show{opacity:1;transform:none} /* mobile editor */ @media(max-width:760px){ #tools{width:62px;padding:5px}.tool{height:52px;font-size:8px}.tool img{display:none}.brand{height:42px;font-size:8px} #hud{left:74px;right:6px;bottom:6px}.hudbox:last-child{display:none} #housePanel{left:70px;right:6px;top:auto;bottom:6px;width:auto} #editorFull.open{grid-template-columns:1fr;grid-template-rows:50px minmax(0,1fr) 50px} #fileSidebar{width:min(82vw,300px)} #editorTop{grid-column:1;grid-row:1;padding-left:7px} #editorMain{grid-column:1;grid-row:2} #editorBottom{grid-column:1;grid-row:3} #sidebarToggleMobile{display:inline-block} #mdToolbar{flex-wrap:nowrap} #editorScroll{padding:10px 10px 100px} #bodyEditor{font-size:14px;min-height:calc(100vh - 225px)} .statusText{display:none} } #wikiSuggest{ position:fixed; z-index:85; display:none; min-width:220px; max-width:min(360px,78vw); max-height:240px; overflow:auto; background:#101a23; border:1px solid #3a5262; border-radius:7px; box-shadow:0 10px 26px #000a; padding:5px; } #wikiSuggest.open{display:block} .wikiItem{ width:100%; text-align:left; border:0; background:transparent; color:#dce8ee; padding:8px 9px; border-radius:5px; font-size:11px; } .wikiItem:hover,.wikiItem.active{background:#173956;color:#fff} .wikiEmpty{padding:9px;color:#879aa6;font-size:10px} /* Source / rendered Markdown view */ #viewModeBtn{ min-width:38px; font-size:16px; line-height:1; } #viewModeBtn[data-mode="source"]::after{content:""} #viewModeBtn[data-mode="preview"]::after{content:"◉"} #renderedPreview{ display:none; width:100%; max-width:920px; margin:0 auto; color:#edf4f7; font:15px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow-wrap:anywhere; } #editorScroll.previewMode #bodyEditor{display:none} #editorScroll.previewMode #renderedPreview{display:block} #editorScroll.previewMode #propertiesBox{display:none} #editorMain.previewMode #mdToolbar{display:none} #renderedPreview h1,#renderedPreview h2,#renderedPreview h3{ line-height:1.25; margin:1.25em 0 .55em; color:#fff; } #renderedPreview h1{font-size:2em;border-bottom:1px solid #314654;padding-bottom:.25em} #renderedPreview h2{font-size:1.55em} #renderedPreview h3{font-size:1.25em} #renderedPreview p{margin:.7em 0} #renderedPreview ul,#renderedPreview ol{padding-left:1.7em} #renderedPreview blockquote{ margin:1em 0; padding:.2em 1em; border-left:3px solid #668ba1; color:#b9c8d0; background:#111b22; } #renderedPreview code{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; background:#17232d; border:1px solid #283e4c; border-radius:4px; padding:.08em .3em; } #renderedPreview pre{ overflow:auto; background:#0a1117; border:1px solid #2d4350; border-radius:7px; padding:12px; } #renderedPreview pre code{border:0;background:transparent;padding:0} #renderedPreview a{color:#65bfff;text-decoration:none} #renderedPreview hr{border:0;border-top:1px solid #314654;margin:1.5em 0} #renderedPreview img{max-width:100%;height:auto} #renderedPreview .wikilink{ display:inline-block; padding:0 .28em; border-radius:4px; background:#173956; color:#8fd1ff; cursor:pointer; } #renderedPreview .task{list-style:none;margin-left:-1.4em} #renderedPreview .task input{vertical-align:middle;margin-right:.45em} #renderedPreview[contenteditable="true"]{ outline:none; min-height:calc(100vh - 210px); cursor:text; } #renderedPreview[contenteditable="true"]:focus{ box-shadow:inset 0 0 0 1px #2f5063; border-radius:6px; } #renderedPreview:empty::before{ content:"Comece a escrever..."; color:#6f8592; pointer-events:none; } #mini{position:absolute;top:8px;right:8px;z-index:12;background:#0e1a22cc;border:1px solid #2e4556;border-radius:6px;padding:3px;cursor:pointer} #mini canvas{display:block;border-radius:4px} #busca{position:absolute;top:8px;right:118px;z-index:12;width:150px} #busca input{width:100%;background:#0e1a22ee;color:#fff;border:1px solid #2e4556;border-radius:6px;padding:6px 8px;font-size:11px} #buscaLista{margin-top:3px;background:#0e1a22f2;border:1px solid #2e4556;border-radius:6px;overflow:hidden;display:none} #buscaLista button{display:block;width:100%;text-align:left;background:none;border:none;color:#dfe9ef;font-size:11px;padding:6px 8px;cursor:pointer} #buscaLista button:hover{background:#1b2c38} #mapao{position:absolute;inset:0;z-index:33;background:#060c11ee;display:none;place-items:center} #mapao.open{display:grid} #mapao canvas{border:1px solid #2e4556;border-radius:8px;cursor:crosshair;max-width:92vw;max-height:78vh} #mapao .dica{position:absolute;bottom:18px;color:#8396a1;font-size:11px} /* Explorer multi-select + organic regions */ #explorerActions{display:none;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 8px;border-bottom:1px solid #314654;background:#111c25} #explorerActions.selectionMode{display:flex} #explorerActions .btn{padding:6px 8px;font-size:10px} #explorerActions .selectionOnly{display:none} #explorerActions.selectionMode .selectionOnly{display:inline-flex;align-items:center;gap:4px} #explorerActions .selectionCount{display:none;color:#9fd7ff;font-size:10px;padding:0 4px;font-weight:700} #explorerActions.selectionMode .selectionCount{display:inline-flex;align-items:center} .treeFile{display:flex;align-items:center;gap:6px;border:1px solid transparent!important;transition:background .12s,border-color .12s,box-shadow .12s;color:#b9c8d0;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .treeFile.selected{background:#173956b8!important;border-color:#55b9ffb8!important;box-shadow:inset 0 0 0 1px #55b9ff2e;color:#fff} .treeFile.dragging{opacity:.4} .treeRegionTitle{border-radius:5px;transition:background .12s,box-shadow .12s} .treeRegionTitle{cursor:pointer;padding:6px 7px;border:1px solid transparent;-webkit-user-select:none;user-select:none} .treeRegionTitle.target{background:#173956;border-color:#4da6de;color:#fff;box-shadow:inset 0 0 0 1px #4da6de22} .sidebarTop .iconBtn{min-width:34px;height:32px;padding:0 7px} .fileKind{display:inline-grid;place-items:center;min-width:28px;height:18px;border:1px solid #34505f;border-radius:4px;font-size:8px;color:#bcd3df;background:#12212b} .treeRegionTitle.dropTarget{background:#1d5c8a!important;box-shadow:inset 0 0 0 1px #6fd0ff;color:#fff} #dragGhost{position:fixed;z-index:999;pointer-events:none;transform:translate(-50%,-150%);background:#173956f2;border:1px solid #55b9ff;color:#eaf6ff;font-size:11px;padding:5px 9px;border-radius:7px;box-shadow:0 6px 18px #0009;max-width:62vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .treeFile .fileLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .treeRegionTitle.dropTarget{background:#18364a;border-radius:5px} .mdBtn{font-size:16px;width:34px;min-width:34px;padding:0;display:grid;place-items:center} #renderedPreview[contenteditable="true"],#renderedPreview[contenteditable="true"]:focus{outline:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;background:transparent!important} #renderedPreview .frontmatterCard{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 18px;padding:0 0 12px;border:0;border-bottom:1px solid #20313c;border-radius:0;background:transparent;color:#aebdc6;font-size:11px;line-height:1.35} #renderedPreview .frontmatterRow{display:inline-flex;gap:5px;align-items:center;min-width:0;margin:0} #renderedPreview .frontmatterKey{color:#718895;font-size:10px;text-transform:lowercase} #renderedPreview .frontmatterValue{display:inline-flex;gap:4px;flex-wrap:wrap;color:#cbd7dd;overflow-wrap:anywhere} #renderedPreview .frontmatterChip{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:#162630;color:#bcd7e6;font-size:10px;line-height:1.3} /* v0.13.3 — Live Preview mobile/IME isolado do runtime da cidade */ #renderedPreview .live-empty::before{content:attr(data-placeholder);color:#617784;pointer-events:none} #renderedPreview .wikilink.live-edit{outline:1px solid rgba(101,191,255,.28)} #wikiSuggest.visualWiki{z-index:10050} /* ---------- v0.16: Fase 1 + correções de capacidade ---------- */ #menuCidades{position:fixed;inset:0;z-index:200;background:#080d12;display:none; overflow:auto;padding:max(18px,env(safe-area-inset-top)) 16px 24px; -webkit-overflow-scrolling:touch} #menuCidades.open{display:block} #menuCidades .caixa{max-width:520px;margin:0 auto} #menuCidades h1{font-size:26px;letter-spacing:2px;margin:6px 0 2px} #menuCidades .sub{color:#7d94a2;font-size:11px;margin-bottom:16px;line-height:1.5} #menuCidades .selo{display:inline-flex;align-items:center;gap:6px;font-size:10px; padding:4px 9px;border-radius:999px;border:1px solid #2f4757;background:#0f1a23;color:#9fc4dc} #menuCidades .selo.ok{border-color:#2f6d4a;color:#8fe0b0;background:#0e1d17} #menuCidades .selo.aviso{border-color:#6d5a2f;color:#e6cd8f;background:#1d1a0e} #menuCidades .bloco{border:1px solid #24363f;background:#0d161d;border-radius:10px; padding:13px;margin-bottom:12px} #menuCidades .bloco p{font-size:11px;color:#8ba0ad;line-height:1.55;margin:0 0 10px} #menuCidades .larga{width:100%;min-height:46px;border:1px solid #3a5a70;background:#14293a; color:#eaf4fa;border-radius:8px;font-size:13px;padding:11px;text-align:left} #menuCidades .larga.primaria{border-color:#b88a47;background:#231d13} #menuCidades .larga+.larga{margin-top:8px} #menuCidades input[type=text]{width:100%;min-height:44px;border:1px solid #2f4757; background:#0a1218;color:#eaf4fa;border-radius:8px;padding:10px 11px;font-size:13px;margin-bottom:8px} .cidadeItem{display:flex;align-items:center;gap:10px;border:1px solid #26404f;background:#101d27; border-radius:9px;padding:11px;margin-bottom:8px} .cidadeItem .nome{flex:1;min-width:0;text-align:left;background:none;border:0;color:#eaf4fa; font-size:14px;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cidadeItem .nome small{display:block;color:#7c93a1;font-size:10px;margin-top:3px;font-weight:400} .cidadeItem .lixo{border:1px solid #6d3535;background:#2a1517;color:#e8a9a9;border-radius:6px; min-width:38px;min-height:38px;font-size:14px} #menuCidades .vazio{color:#66808f;font-size:11px;padding:10px 2px} #syncSelo{position:fixed;left:50%;transform:translateX(-50%);top:max(7px,env(safe-area-inset-top));font-size:9px;color:#7fa6bd; background:#0e1a23d9;border:1px solid #2b4152;border-radius:999px;padding:3px 8px;z-index:9; pointer-events:none;transition:opacity .3s} #syncSelo.erro{border-color:#7a3b3b;color:#ffb4b4} /* ========== v0.17 — Explorador mobile-first + preview de arquivos ========== */ #explorerContext{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #263b48;background:#0d171e;color:#8097a5;font-size:10px;min-height:34px} #explorerContext strong{color:#dceaf1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} #filePreview{position:fixed;inset:0;z-index:82;display:none;background:#081017f2;backdrop-filter:blur(5px)} #filePreview.open{display:grid;place-items:center;padding:18px} .filePreviewCard{width:min(760px,96vw);max-height:min(88dvh,820px);display:grid;grid-template-rows:auto auto minmax(180px,1fr) auto;background:#0e1820;border:1px solid #345062;border-radius:14px;overflow:hidden;box-shadow:0 22px 70px #000b} .filePreviewHead{min-height:58px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #2b414f;background:#14222c} .filePreviewHead .titleWrap{flex:1;min-width:0}.filePreviewHead strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filePreviewHead small{display:block;color:#879dab;font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .filePreviewTools{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid #263a46;background:#101b23;overflow-x:auto} .filePreviewTools select{min-width:0;max-width:280px;height:36px;background:#0b141a;color:#eaf3f7;border:1px solid #36505f;border-radius:7px;padding:0 8px;font-size:11px} #filePreviewBody{min-height:0;overflow:auto;display:grid;place-items:center;padding:14px;background:#091118} #filePreviewBody img,#filePreviewBody video{max-width:100%;max-height:66dvh;object-fit:contain;border-radius:8px} #filePreviewBody audio{width:min(560px,100%)} #filePreviewBody iframe{width:100%;height:62dvh;border:1px solid #314957;border-radius:8px;background:white} #filePreviewBody pre{align-self:stretch;justify-self:stretch;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;background:#071017;border:1px solid #263d4b;border-radius:8px;padding:13px;color:#dbe8ee;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace} .previewEmpty{max-width:520px;text-align:center;color:#8fa5b2;font-size:12px;line-height:1.55;padding:30px 16px}.previewEmpty b{display:block;color:#dce8ee;font-size:14px;margin-bottom:7px} .filePreviewFoot{display:flex;justify-content:flex-end;gap:7px;padding:9px 10px;border-top:1px solid #263b48;background:#101a22} .worldLabel{pointer-events:none} @media(max-width:760px){ #fileSidebar{inset:0;width:100vw;height:100dvh;max-height:none;border:0;border-radius:0;transform:translateY(101%);transition:transform .22s cubic-bezier(.2,.8,.2,1);box-shadow:0 -18px 50px #000b;background:#0b141b} #fileSidebar.open{transform:translateY(0)} .sidebarTop{height:auto;min-height:64px;padding:max(8px,env(safe-area-inset-top)) 10px 8px;gap:8px;background:#12202a} .sidebarTop strong{font-size:16px;letter-spacing:.2px} .sidebarTop .iconBtn,#closeSidebar{min-width:46px;height:46px;border-radius:10px;font-size:12px;padding:0 9px} #closeSidebar{order:-1;font-size:22px;background:#0d171e} #explorerImportFolderBtn{font-size:0}#explorerImportFolderBtn::after{content:"Pasta";font-size:10px} #explorerContext{min-height:42px;padding:7px 14px;font-size:11px}#explorerContext strong{font-size:12px} #tree{padding:8px 10px calc(118px + env(safe-area-inset-bottom));font-size:14px;overscroll-behavior:contain} .treeRegion{margin-top:3px!important;margin-bottom:3px!important} .treeRegionTitle,.treeFile{min-height:50px;border-radius:10px!important;font-size:14px;padding:8px 11px!important;gap:10px} .treeRegionTitle{font-weight:650;color:#e5f0f5} .treeFile{padding-left:15px!important} .fileKind{min-width:38px;height:30px;border-radius:7px;font-size:10px} .treeFile .fileLabel{font-size:13px} #explorerActions{padding:8px 10px;gap:7px;overflow-x:auto;flex-wrap:nowrap;min-height:54px} #explorerActions .btn{min-height:38px;white-space:nowrap;font-size:11px;padding:7px 10px} #housePanel{z-index:18} #filePreview.open{display:block;padding:0;background:#081017} .filePreviewCard{width:100vw;height:100dvh;max-height:none;border:0;border-radius:0;grid-template-rows:auto auto minmax(0,1fr) auto} .filePreviewHead{padding:max(8px,env(safe-area-inset-top)) 10px 8px;min-height:62px}.filePreviewHead strong{font-size:15px} .filePreviewHead .iconBtn{min-width:46px;height:46px;border-radius:10px;font-size:20px} .filePreviewTools{min-height:52px;padding:8px 10px}.filePreviewTools .btn{min-height:38px;white-space:nowrap}.filePreviewTools select{height:40px;flex:1} #filePreviewBody{padding:10px;place-items:center}#filePreviewBody iframe{height:100%;min-height:62dvh} .filePreviewFoot{padding:8px 10px max(9px,env(safe-area-inset-bottom))}.filePreviewFoot .btn{min-height:44px;padding:9px 14px} } /* ========== v0.18 — árvore mobile, ações contextuais e preview físico ========== */ #explorerActions{display:none!important} #explorerContext{gap:6px} .explorerCrumb{border:0;background:transparent;color:#8fd1ff;padding:5px 4px;font:inherit;font-weight:700;border-radius:6px} .explorerCrumb:active{background:#173956} #tree{position:relative;padding:7px 8px 82px} .treeNode{display:block} .treeRow{width:100%;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;color:#c8d6dd;border-radius:8px;min-height:42px;padding:5px 8px;padding-left:calc(7px + var(--depth,0)*16px);text-align:left;touch-action:pan-y;-webkit-user-select:none;user-select:none} .treeRow:active{background:#142b39}.treeRow.target{background:#173956;border-color:#3d8fc4;color:#fff}.treeRow.active{background:#153c64;color:#fff} .treeCaret{width:22px;min-width:22px;text-align:center;color:#718995;font-size:12px;transition:transform .12s}.treeCaret.open{transform:rotate(90deg)} .treeIcon{width:28px;min-width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#13212a;font-size:13px} .treeName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.treeMeta{font-size:9px;color:#6f8795;white-space:nowrap} .treeChildren[hidden]{display:none}.treeEmpty{padding:28px 18px;color:#708793;text-align:center;font-size:11px;line-height:1.55} .explorerHoldHint{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:10px 14px max(11px,env(safe-area-inset-bottom));background:#0e1921f5;border-top:1px solid #263b48;color:#718996;font-size:10px;text-align:center} #explorerActionSheet{position:fixed;inset:0;z-index:120;display:none;background:#0008;align-items:flex-end;justify-content:center;padding:12px} #explorerActionSheet.open{display:flex}.explorerSheet{width:min(520px,100%);max-height:min(76dvh,680px);overflow:auto;background:#101b23;border:1px solid #36505f;border-radius:16px;padding:8px;box-shadow:0 20px 60px #000b} .explorerSheetHead{display:flex;align-items:center;gap:8px;padding:8px 9px 10px;border-bottom:1px solid #253a47;margin-bottom:6px}.explorerSheetHead strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.explorerSheetHead button{border:0;background:transparent;color:#9db0bc;font-size:22px} .explorerAction{width:100%;min-height:47px;border:0;background:transparent;color:#e7f0f4;border-radius:9px;padding:10px 11px;text-align:left;font-size:12px;display:flex;align-items:center;gap:10px}.explorerAction:active{background:#173956}.explorerAction.danger{color:#ffb1b1}.explorerAction .ico{width:28px;text-align:center;font-size:16px} #regionColor{height:42px!important;padding:4px!important} #filePreviewBody .pdfFrame{width:100%;height:68dvh;border:0;border-radius:8px;background:#fff} .previewSourceBadge{display:inline-flex;align-items:center;gap:4px;margin-left:5px;padding:1px 5px;border:1px solid #2f6d4a;border-radius:999px;color:#8fe0b0;font-size:8px} @media(max-width:760px){ #tree{padding:6px 7px calc(72px + env(safe-area-inset-bottom))} .treeRow{min-height:50px;border-radius:10px;padding-top:7px;padding-bottom:7px;padding-left:calc(8px + var(--depth,0)*17px)} .treeName{font-size:14px}.treeMeta{font-size:10px}.treeIcon{width:34px;min-width:34px;height:34px;font-size:15px}.treeCaret{width:24px;min-width:24px} .explorerHoldHint{font-size:10px;padding-bottom:max(12px,env(safe-area-inset-bottom))} #explorerActionSheet{padding:0;align-items:flex-end}.explorerSheet{width:100%;max-height:82dvh;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;padding:8px 9px max(10px,env(safe-area-inset-bottom))}.explorerAction{min-height:54px;font-size:14px}.explorerSheetHead strong{font-size:14px} #filePreviewBody .pdfFrame{height:100%;min-height:68dvh} } /* ========== v0.19 — gestos, identidade do arquivo, PDF inline e PWA ========== */ .importBtn{font-size:20px!important;font-weight:800;letter-spacing:-2px} #explorerImportFolderBtn::after{content:""!important} #fileNameDisplay{cursor:text;border-radius:7px;padding:7px 9px;margin-left:-6px;transition:background .12s;outline:none} #fileNameDisplay:hover,#fileNameDisplay:focus{background:#172733} #documentWatermark{max-width:920px;margin:0 auto 12px;color:#5f7480;font:600 12px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none} .treeRow.dragging{opacity:.38} .treeRow.dropTarget{background:#194e70!important;box-shadow:inset 0 0 0 1px #67c8ff} #tree.rootDropTarget{box-shadow:inset 0 0 0 2px #4db7ff55;background:#0d1c27} #treeDragGhost{position:fixed;z-index:10020;pointer-events:none;max-width:70vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#173956f2;border:1px solid #55b9ff;color:#eef8ff;border-radius:8px;padding:7px 10px;font-size:11px;box-shadow:0 8px 24px #0009;transform:translate(12px,-115%)} #filePreviewBody .pdfPages{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 4px 30px;overflow:auto;background:#202326} #filePreviewBody .pdfPage{display:block;max-width:100%;height:auto;background:#fff;box-shadow:0 2px 14px #0009} #filePreviewBody .pdfLoadMore{position:sticky;bottom:8px;align-self:center;z-index:2} #updateBanner{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%) translateY(140%);z-index:10080;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 24px);background:#13232d;border:1px solid #3b6278;border-radius:10px;padding:8px 9px 8px 12px;box-shadow:0 10px 30px #000a;font-size:11px;transition:transform .22s} #updateBanner.open{transform:translateX(-50%) translateY(0)} #updateBanner button{white-space:nowrap} #dialog.regionInputGuard .dialogBox{pointer-events:none} @media(max-width:760px){#fileNameDisplay{font-size:13px;min-width:0;padding:8px 7px}#documentWatermark{font-size:11px;margin-bottom:10px;padding:0 2px}.importBtn{min-width:42px;height:42px;font-size:23px!important}#filePreviewBody .pdfPages{padding:8px 0 24px;gap:9px}} /* ========== v0.20 — território prioritário, Explorer toolbar e IA ========== */ #explorerActionSheet{display:none!important} .sidebarTop{min-height:54px;height:auto;flex-wrap:wrap;padding:7px 8px} #explorerTopActions{display:flex;align-items:center;gap:5px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none} #explorerTopActions::-webkit-scrollbar{display:none} .explorerTopBtn{flex:0 0 auto;min-width:38px;height:38px;border:1px solid #334b5a;background:#14232e;color:#e9f3f7;border-radius:8px;font-size:16px;padding:0 9px;display:grid;place-items:center} .explorerTopBtn[hidden]{display:none!important}.explorerTopBtn.danger{border-color:#7a3e42;color:#ffc2c2;background:#2b171a} #explorerSelectionLabel{flex:0 0 auto;color:#8fd1ff;font-size:10px;font-weight:700;white-space:nowrap;padding:0 4px} .treeRow.multiSelected{background:#173956!important;box-shadow:inset 0 0 0 1px #62c6ff;color:#fff} #explorerContext{cursor:default}.explorerHoldHint{display:none!important} .regionShapeHint{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);z-index:13;background:#0e1921e8;border:1px solid #4d7388;border-radius:999px;padding:6px 11px;color:#dcebf2;font-size:10px;pointer-events:none;display:none}.regionShapeHint.open{display:block} #aiPanel{width:min(430px,100vw)} .aiTabs{display:flex;gap:4px;padding:7px 8px;border-bottom:1px solid #314654;background:#0d171f;overflow-x:auto} .aiTab{border:1px solid transparent;background:transparent;color:#91a7b4;border-radius:7px;padding:7px 10px;font-size:11px;white-space:nowrap}.aiTab.active{background:#173956;border-color:#356d92;color:#fff} .aiPane{display:none;min-height:0;flex:1;overflow:auto}.aiPane.active{display:flex;flex-direction:column} .aiSettings{padding:11px;overflow:auto}.aiField{display:block;margin:0 0 10px}.aiField span{display:block;font-size:10px;color:#8fa4b0;margin-bottom:4px}.aiField input,.aiField select{width:100%;min-height:40px;background:#0b1319;color:#fff;border:1px solid #38505f;border-radius:7px;padding:8px;font-size:12px} .aiHelp{font-size:10px;line-height:1.5;color:#8096a3;margin:6px 0 10px}.aiStatusCard{border:1px solid #2d4554;background:#0d1820;border-radius:9px;padding:9px;margin-top:8px;font-size:10px;line-height:1.55;color:#a9bbc5}.aiStatusCard b{color:#e9f3f7} .aiMetrics{padding:11px;overflow:auto}.metricGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}.metricCard{border:1px solid #2d4554;background:#0d1820;border-radius:9px;padding:9px}.metricCard small{display:block;color:#8299a5;font-size:9px}.metricCard strong{display:block;margin-top:3px;font-size:15px}.metricTable{width:100%;border-collapse:collapse;font-size:10px}.metricTable th,.metricTable td{padding:7px 5px;border-bottom:1px solid #243844;text-align:left;vertical-align:top}.metricTable th{color:#839aa7;font-weight:600}.metricTable td:last-child,.metricTable th:last-child{text-align:right} #aiModelPrice{font-size:9px;color:#7f98a7;margin-top:4px}.aiCfgActions{display:flex;gap:7px;flex-wrap:wrap}.aiCfgActions .btn{min-height:38px} #menuAiBlock input{width:100%;min-height:42px;border:1px solid #2f4757;background:#0a1218;color:#eaf4fa;border-radius:8px;padding:9px 10px;font-size:12px;margin:5px 0}.menuAiRow{display:flex;gap:7px;align-items:center}.menuAiRow .btn{min-height:40px}.menuAiNote{font-size:10px!important;color:#758c99!important} @media(max-width:760px){ .sidebarTop>strong{display:none}#explorerTopActions{order:1;width:calc(100% - 48px);flex-basis:calc(100% - 48px)}#closeSidebar{order:2;min-width:42px;height:42px}.explorerTopBtn{min-width:42px;height:42px;font-size:18px}#explorerSelectionLabel{font-size:10px} #aiPanel{width:100vw}.aiTabs{padding-left:10px;padding-right:10px}.aiTab{min-height:40px;font-size:12px}.metricGrid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ============================================================ Urbe v0.21 — mobile-first pixel UI / unified file workflow ============================================================ */ :root{--v21-ink:#0a1014;--v21-panel:#111a20;--v21-panel2:#18242c;--v21-line:#3f5661;--v21-hi:#dceef3;--v21-muted:#8fa6ad;--v21-accent:#79c9d8;--v21-danger:#d66f67;--v21-px:2px} /* pixelado só onde há pixel art (canvas e sprites); controles usam o tema. */ canvas,img{image-rendering:pixelated} #tools{top:10px;left:10px;height:auto!important;min-height:0;width:54px;padding:5px;gap:5px;background:var(--v21-panel);border:2px solid #263841;border-radius:0!important;box-shadow:4px 4px 0 #071014;transition:width .14s ease;overflow:hidden} #tools .brand,#tools [data-tool="select"]{display:none!important} #tools .tool,#tools .v21RailBtn{width:40px;height:40px;min-height:40px;padding:5px;margin:0;border:2px solid transparent;background:#18252c;color:#d9e8ec;display:grid;place-items:center;box-shadow:none} #tools .tool img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated} #tools .tool.active{border-color:#8fe1ef;background:#243a43;box-shadow:inset 0 0 0 2px #102027} #tools.collapsed{width:20px;padding:3px} #tools.collapsed .tool,#tools.collapsed .v21RailAction{display:none!important} #tools.collapsed #v21RailToggle{width:10px;height:34px;min-width:10px;font-size:0;padding:0} #tools.collapsed #v21RailToggle:after{content:'›';font-size:18px} .v21RailSep{height:2px;background:#2d424c;margin:1px 3px} .v21RailBtn{font:20px/1 monospace;cursor:pointer} #hud{left:72px;top:10px;right:auto;bottom:auto;display:flex;gap:5px;pointer-events:none;max-width:min(64vw,620px)} #hud .hudbox{display:none} #syncSelo{font-size:9px!important;border-radius:0!important;box-shadow:2px 2px 0 #061014} #busca{display:none!important} #mini{border-radius:0!important;border:2px solid #263a43!important;box-shadow:4px 4px 0 #071014!important;background:#162128!important} #housePanel{border-radius:0!important;border:2px solid #344c57;box-shadow:5px 5px 0 #071014;background:#101a20f7} #housePanel .panelHead{background:#182830} #moveBtn{display:none!important} #housePanel .openNote span{display:none} #housePanel .openNote b:after{content:none} /* loading */ #v21Loading{position:fixed;inset:0;z-index:120;background:#091015;display:none;place-items:center;padding:22px} #v21Loading.open{display:grid} .v21LoadCard{width:min(360px,82vw);background:#101a20;border:3px solid #3b5661;box-shadow:8px 8px 0 #05090b;padding:18px} .v21LoadMark{font:900 30px/1 ui-monospace,monospace;letter-spacing:4px;text-align:center;margin:3px 0 17px;color:#e3f3f6} .v21LoadTrack{height:16px;border:2px solid #3d5863;padding:2px;background:#071015} #v21LoadBar{display:block;height:100%;width:0;background:#7bc8d5;transition:width .12s linear} #v21LoadText{display:block;margin-top:9px;text-align:center;color:#91a8b0;font:10px ui-monospace,monospace} /* compact pixel menu */ #menuCidades{background:#071015e8;backdrop-filter:none!important} #menuCidades .caixa{width:min(520px,calc(100vw - 22px));max-height:min(620px,calc(100vh - 22px));overflow:auto;border:3px solid #3c5660;border-radius:0!important;background:#101920;box-shadow:9px 9px 0 #030709;padding:12px} #menuCidades .v21MenuHead{display:flex;align-items:center;height:44px;border-bottom:2px solid #2c414a;margin-bottom:8px} .v21MenuLogo{font:900 24px ui-monospace,monospace;letter-spacing:5px;flex:1;color:#e2f0f3} .v21Version{font:9px ui-monospace,monospace;color:#7e969e} .v21StorageRow{display:flex;gap:6px;align-items:center;margin-bottom:8px} .v21StorageRow .v21IconBtn{margin-left:auto} .v21StorageName{font:10px ui-monospace,monospace;color:#8198a0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v21CityPanel{border:2px solid #2b424c;background:#0b1318} .v21CityToolbar{height:42px;display:flex;align-items:center;padding:4px 5px;border-bottom:2px solid #253942} .v21CityToolbar strong{font:11px ui-monospace,monospace;letter-spacing:1px;flex:1} .v21IconBtn{width:34px;height:32px;background:#17252c;border:2px solid #35505c;color:#e6f2f5;font:18px/1 monospace;display:grid;place-items:center;cursor:pointer} .v21CityList{display:flex;flex-direction:column;max-height:340px;overflow:auto} .v21City{display:grid;grid-template-columns:1fr 38px;min-height:46px;border-bottom:1px solid #20323a} .v21City:last-child{border-bottom:0}.v21CityOpen,.v21CityDelete{background:transparent;border:0;color:#dce9ed;text-align:left;padding:8px 10px;font:12px ui-monospace,monospace}.v21CityOpen small{display:block;color:#6f8790;font-size:9px;margin-top:2px}.v21CityDelete{text-align:center;color:#d8877f;font-size:17px} .v21CityNew{display:none;grid-template-columns:1fr auto;gap:5px;padding:6px;background:#132027;border-bottom:1px solid #263b44}.v21CityNew.open{display:grid}.v21CityNew input{min-width:0;background:#081116;border:2px solid #344e58;color:#fff;padding:8px;font:12px ui-monospace,monospace}.v21MenuEmpty{padding:28px 10px;text-align:center;color:#6f858d;font:10px ui-monospace,monospace} /* generic dialogs / placement */ #v21FileDialog,#v21GlobalSettings,#v21ContextDialog{position:fixed;inset:0;z-index:94;background:#02070bad;display:none;place-items:center;padding:14px} #v21FileDialog.open,#v21GlobalSettings.open,#v21ContextDialog.open{display:grid} .v21DialogCard{width:min(480px,100%);max-height:min(680px,92vh);overflow:auto;background:#101a20;border:3px solid #3b5661;box-shadow:7px 7px 0 #05090b;padding:12px} .v21DialogHead{display:flex;align-items:center;border-bottom:2px solid #293f48;padding-bottom:8px;margin-bottom:10px}.v21DialogHead strong{flex:1;font:700 13px ui-monospace,monospace}.v21DialogHead button{width:34px;height:32px} .v21Field{display:block;margin:9px 0}.v21Field>span{display:block;color:#87a0a8;font:9px ui-monospace,monospace;margin-bottom:4px}.v21Field input,.v21Field textarea,.v21Field select{width:100%;background:#081116;border:2px solid #304a55;color:#edf6f8;padding:9px;font:12px ui-monospace,monospace}.v21Field textarea{min-height:92px;resize:vertical}.v21DialogActions{display:flex;justify-content:flex-end;gap:6px;margin-top:12px}.v21DialogActions button{min-height:38px;padding:0 13px;background:#17262d;border:2px solid #36515c;color:#e6f1f4}.v21DialogActions .primary{border-color:#73bcc9;background:#213c44}.v21Hint{font:9px/1.5 ui-monospace,monospace;color:#6f8790} #v21PlacementDock{position:fixed;z-index:70;bottom:12px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:5px;background:#101a20;border:3px solid #3b5661;box-shadow:5px 5px 0 #05090b;padding:5px;max-width:calc(100vw - 20px)} #v21PlacementDock.open{display:flex}#v21PlacementText{font:10px ui-monospace,monospace;color:#9db2b8;max-width:45vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#v21PlacementDock button{height:36px;min-width:42px;background:#17262d;border:2px solid #35515c;color:#eaf4f6} /* region dialog */ #dialog .dialogBox{border-radius:0!important;border:3px solid #3b5661;box-shadow:7px 7px 0 #05090b;background:#101a20} #dialog input,#dialog textarea{border-radius:0!important;background:#081116;border:2px solid #304a55} .regionShapeHint{border-radius:0!important;background:#101a20!important;border:2px solid #4e727f!important;box-shadow:3px 3px 0 #071014!important} /* Explorer */ #fileSidebar{background:#0d161c;border-right:3px solid #304852;box-shadow:6px 0 0 #05090b} #fileSidebar .sidebarTop{height:auto;min-height:48px;display:flex;flex-wrap:wrap;gap:4px;padding:5px;border-bottom:2px solid #2b414a;background:#132028} #fileSidebar .sidebarTop>strong,#fileSidebar .importBtn,#explorerTopActions{display:none!important} #v21ExplorerToolbar{display:flex;gap:4px;align-items:center;flex:1;overflow-x:auto}.v21ExBtn{min-width:38px;height:38px;background:#17252c;border:2px solid #334d58;color:#dbe9ed;font:17px/1 monospace;display:grid;place-items:center}.v21ExBtn.active{border-color:#75c5d4;background:#223c45}.v21ExBtn.danger{color:#e18a81} #explorerContext{height:auto;padding:6px;border-bottom:1px solid #283d46;display:flex;gap:5px;align-items:center}.explorerCrumb{background:transparent;border:0;color:#dce9ed;font:11px ui-monospace,monospace;padding:4px 1px;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#explorerPath{font:9px ui-monospace,monospace;color:#718991;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #v21ExplorerSearch{margin:6px;width:calc(100% - 12px);height:38px;background:#071116;border:2px solid #2c4651;color:#edf5f7;padding:7px 9px;font:12px ui-monospace,monospace} #tree{padding:0 5px 20px}.v21TreeRow{--depth:0;width:100%;display:grid;grid-template-columns:30px 1fr auto;gap:5px;align-items:center;min-height:42px;padding:4px 5px 4px calc(5px + var(--depth)*13px);background:transparent;border:0;border-bottom:1px solid #1b2b32;color:#dce9ec;text-align:left;touch-action:pan-y}.v21TreeRow:active,.v21TreeRow.selected{background:#203841}.v21TreeRow.target{box-shadow:inset 3px 0 #79c9d8}.v21TreeIcon{width:25px;height:25px;position:relative;display:grid;place-items:center;image-rendering:pixelated}.v21TreeName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px ui-monospace,monospace}.v21TreeMeta{font:9px ui-monospace,monospace;color:#647c85}.v21FileIcon{width:20px;height:24px;border:2px solid #8ca3aa;background:#d6e0df;position:relative;box-shadow:2px 2px 0 #071014}.v21FileIcon:before{content:'';position:absolute;right:-2px;top:-2px;border-left:7px solid transparent;border-bottom:7px solid #8ca3aa}.v21FileIcon:after{content:'';position:absolute;left:3px;right:3px;bottom:4px;height:4px;background:var(--file-accent,#658b96)}.v21FolderIcon{width:24px;height:17px;background:#b18d51;border:2px solid #e0bd73;box-shadow:2px 2px 0 #071014;position:relative;margin-top:5px}.v21FolderIcon:before{content:'';position:absolute;left:-2px;top:-7px;width:11px;height:6px;background:#b18d51;border:2px solid #e0bd73;border-bottom:0}.v21TreeEmpty{padding:30px 12px;text-align:center;color:#647b83;font:10px/1.6 ui-monospace,monospace}.explorerHoldHint{display:none!important} /* editor tabs + adaptive tools */ #v21EditorTabs{height:36px;display:flex;align-items:end;gap:2px;padding:0 5px;background:#0b1318;border-bottom:2px solid #263b44;overflow-x:auto}.v21Tab{height:31px;max-width:180px;display:flex;align-items:center;gap:7px;padding:0 7px;border:2px solid #263b44;border-bottom:0;background:#101b21;color:#7f969e;font:10px ui-monospace,monospace;white-space:nowrap}.v21Tab.active{background:#17262d;border-color:#46636f;color:#e7f0f2}.v21TabLabel{overflow:hidden;text-overflow:ellipsis}.v21TabClose{font-size:15px;color:#81979e;padding:0 1px} #mdToolbar{min-height:43px}.v21CodeTools{display:none;gap:4px;padding:5px;align-items:center}.v21CodeTools.open{display:flex}.v21CodeTools button{height:32px;background:#17252c;border:2px solid #314b56;color:#dce9ed;font:11px ui-monospace,monospace;padding:0 9px} #bodyEditor{font-family:'Roboto Mono',ui-monospace,monospace;tab-size:2}#renderedPreview iframe{width:100%;min-height:70vh;border:0;background:#fff} /* AI */ #aiPanel{background:#0d161c;border-left:3px solid #304852;box-shadow:-6px 0 0 #05090b} .v21AiHead{min-height:48px;display:flex;align-items:center;padding:5px 7px;border-bottom:2px solid #263b44;background:#121f26}.v21AiHead strong{flex:1;font:12px ui-monospace,monospace}.v21Balance{font:9px ui-monospace,monospace;color:#83b6c0;margin-right:6px}.v21AiControls{display:grid;grid-template-columns:1fr 1fr auto;gap:5px;padding:6px;border-bottom:1px solid #273b44}.v21AiControls select,.v21AiControls button{min-width:0;height:37px;background:#081116;border:2px solid #304a55;color:#dce9ed;padding:5px;font:10px ui-monospace,monospace}.v21AiHistory{border-bottom:1px solid #273b44}.v21AiHistory>summary{list-style:none;cursor:pointer;padding:7px;font:10px ui-monospace,monospace;color:#829aa2}.v21AiHistory>summary::-webkit-details-marker{display:none}.v21HistoryList{max-height:160px;overflow:auto;padding:0 6px 6px}.v21HistoryItem{width:100%;min-height:34px;background:#111d23;border:1px solid #263b44;color:#b5c6cb;text-align:left;padding:6px;font:10px ui-monospace,monospace;margin-top:3px}.v21AiGreeting{padding:22px 10px 12px;text-align:center;font:700 15px ui-monospace,monospace;color:#c9dadd}.v21AiSub{display:block;margin-top:5px;color:#69828b;font:9px ui-monospace,monospace} .v21ArtifactBox{border:2px solid #2c444e;padding:7px;margin:8px 0;background:#0a1318}.v21ArtifactHead{font:10px ui-monospace,monospace;color:#93aab1;margin-bottom:5px}.v21ArtifactEmpty{font:9px ui-monospace,monospace;color:#5f7880} /* map */ #mapao .mapCard{border-radius:0!important;border:3px solid #354e59!important;box-shadow:8px 8px 0 #05090b!important;background:#0b1419!important}#mapao canvas{image-rendering:pixelated;background:#243922} @media(max-width:760px){ #tools{left:6px;top:6px;width:50px}.tool,#tools .v21RailBtn{width:36px!important;height:36px!important;min-height:36px!important} #hud{left:62px;top:6px}.v21LoadCard{width:min(330px,92vw)} #housePanel{left:6px!important;right:6px!important;bottom:6px!important;width:auto!important} #fileSidebar{width:100vw!important} #v21PlacementDock{bottom:7px;width:calc(100vw - 14px);justify-content:flex-end}#v21PlacementText{margin-right:auto;max-width:42vw} .v21AiControls{grid-template-columns:1fr auto}.v21AiControls #v21ModelSort{display:none} } /* ============================================================ v0.22 — correções de layout sobre a v0.21 ============================================================ */ /* abas do editor ganham linha própria no grid (antes caíam no rodapé) */ #editorFull.open{grid-template-rows:52px auto minmax(0,1fr) 54px} #editorFull.open #editorTop{grid-column:1;grid-row:1} #editorFull.open #v21EditorTabs{grid-column:1;grid-row:2} #editorFull.open #editorMain{grid-column:1;grid-row:3} #editorFull.open #editorBottom{grid-column:1;grid-row:4} #v21EditorTabs.v22Single{display:none} /* a toolbar Markdown não pode ficar visível no modo visual: seus botões escrevem no textarea escondido e corrompem o arquivo */ #editorMain.previewMode #mdToolbar{display:none!important} /* o atributo hidden precisa vencer o display:grid dos botões do Explorador */ .v21ExBtn[hidden]{display:none!important} /* o texto "Salvando..." mudava a largura do cabeçalho entre o toque e o soltar do dedo: o botão saía de baixo do dedo e o clique se perdia */ #editorTop .saveState{min-width:66px;text-align:right;flex:0 0 auto} #editorTop #fileNameDisplay{min-width:0} /* HUD e selo de sincronização deixam de colidir com o minimapa */ #hud{max-width:calc(100vw - 200px)} #syncSelo{left:62px;right:auto;top:auto;transform:none;bottom:max(8px,env(safe-area-inset-bottom))} @media (max-width:760px){ #editorFull.open{grid-template-rows:50px auto minmax(0,1fr) 50px} #editorFull.open #editorTop{grid-row:1} #editorFull.open #v21EditorTabs{grid-row:2} #editorFull.open #editorMain{grid-row:3} #editorFull.open #editorBottom{grid-row:4} #hud #hint{display:none} #syncSelo{left:56px} .v21AiControls{grid-template-columns:minmax(0,1fr) auto auto} .v21AiControls #v21ModelSort{display:block;max-width:92px} } /* ============================================================ v0.23 — casca mobile-first Princípios aplicados: navegação primária na zona do polegar, uma única ação primária visível (FAB), bottom sheets no lugar de modais centrais, alvos de 48px, hierarquia tipográfica de 3 níveis, espaçamento em múltiplos de 4 e áreas seguras respeitadas. ============================================================ */ :root{ --v23-bg:#0b1117;--v23-panel:#101b22;--v23-panel2:#16242c;--v23-panel3:#1c2f38; --v23-line:#24373f;--v23-line2:#35525e;--v23-ink:#e7f1f4;--v23-ink2:#8fa6af;--v23-ink3:#6d858f; --v23-accent:#7fd4e6;--v23-accent-ink:#06222b;--v23-danger:#e78a80;--v23-ok:#77d494; --v23-dock:62px;--v23-top:48px; --v23-safe-b:env(safe-area-inset-bottom);--v23-safe-t:env(safe-area-inset-top); } /* ---------- barra superior flutuante ---------- */ #v23Top{position:fixed;top:0;left:0;right:0;z-index:44;display:flex;align-items:center;gap:8px; height:calc(var(--v23-top) + var(--v23-safe-t));padding:var(--v23-safe-t) 8px 0 12px; background:linear-gradient(#0b1117f2 55%,#0b111700);pointer-events:none} #v23Top>*{pointer-events:auto} #v23VaultDot{width:8px;height:8px;flex:0 0 8px;background:var(--v23-ok)} #v23VaultDot.gravando{background:#e6c46a} #v23VaultDot.erro{background:var(--v23-danger)} #v23VaultName{flex:1;min-width:0;font:600 12px/1 ui-monospace,monospace;color:var(--v23-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.04em} .v23TopBtn{width:44px;height:44px;display:grid;place-items:center;font-size:15px; background:#101b22cc;border:2px solid var(--v23-line);color:var(--v23-ink)} .v23TopBtn:active{background:var(--v23-panel3)} /* ---------- faixa de modo (ferramenta ativa) ---------- */ #v23ModeBar{position:fixed;z-index:44;left:8px;right:8px;top:calc(var(--v23-top) + var(--v23-safe-t)); display:none;align-items:center;gap:8px;padding:8px 8px 8px 12px; background:var(--v23-panel3);border:2px solid var(--v23-line2)} #v23ModeBar.open{display:flex} #v23ModeBar span{flex:1;font:10px/1.35 ui-monospace,monospace;color:var(--v23-ink)} #v23ModeBar button{height:32px;padding:0 12px;background:#0b1117;border:2px solid var(--v23-line2);color:var(--v23-ink);font:10px ui-monospace,monospace} /* ---------- dock inferior ---------- */ #v23Dock{position:fixed;left:0;right:0;bottom:0;z-index:45; height:calc(var(--v23-dock) + var(--v23-safe-b));padding-bottom:var(--v23-safe-b); display:grid;grid-template-columns:repeat(3,1fr); background:var(--v23-panel);border-top:2px solid var(--v23-line)} #v23Dock button{display:grid;place-items:center;align-content:center;gap:3px;padding:0; background:transparent;border:0;color:var(--v23-ink3);font:9px/1 ui-monospace,monospace;letter-spacing:.03em} #v23Dock .v23NavIco{width:46px;height:26px;display:grid;place-items:center;font-size:15px;border:2px solid transparent} #v23Dock button.ativo{color:var(--v23-accent)} #v23Dock button.ativo .v23NavIco{background:#18333d;border-color:var(--v23-accent)} #v23Dock button:active .v23NavIco{background:var(--v23-panel3)} /* ---------- ação primária ---------- */ #v23Fab{position:fixed;right:14px;z-index:46;width:56px;height:56px; bottom:calc(var(--v23-dock) + var(--v23-safe-b) + 14px); display:grid;place-items:center;font-size:23px;line-height:1; background:var(--v23-accent);color:var(--v23-accent-ink);border:2px solid #06131a; box-shadow:4px 4px 0 #05161c} #v23Fab:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #05161c} #v23Fab[hidden],#v23Dock[hidden],#v23Top[hidden]{display:none!important} /* ---------- painéis-destino ficam acima do dock, nunca embaixo ---------- */ #fileSidebar,#aiPanel,#menuCidades{z-index:40!important} #fileSidebar,#aiPanel{padding-bottom:calc(var(--v23-dock) + var(--v23-safe-b))} #aiPanel.v23SobreEditor{z-index:56!important} #menuCidades .caixa{padding-bottom:calc(var(--v23-dock) + var(--v23-safe-b) + 12px)} #tools,#mini,#hud,#syncSelo,#viewModeBtn,#editorTop .saveState{display:none!important} /* ---------- folhas inferiores (bottom sheets) ---------- */ /* a v0.20 desligou o action sheet com display:none!important e nunca o religou: desde então "Mover", o seletor de destino e o de importação abriam invisíveis */ #explorerActionSheet{z-index:72!important} #explorerActionSheet.open{display:flex!important} #dialog,#v21FileDialog,#v21GlobalSettings,#v21ContextDialog{align-items:flex-end!important; place-items:end stretch!important;padding:0!important;z-index:70!important} #dialog .dialogBox,#v21FileDialog .v21DialogCard,#v21GlobalSettings .v21DialogCard,#v21ContextDialog .v21DialogCard, #explorerActionSheet .explorerSheet{ width:100%!important;max-width:none!important;max-height:86vh;overflow:auto; padding:20px 16px calc(20px + var(--v23-safe-b))!important; background:var(--v23-panel2)!important;border:0!important;border-top:2px solid var(--v23-line2)!important; box-shadow:0 -14px 40px #000a!important} #dialog .dialogBox:before,#v21FileDialog .v21DialogCard:before,#v21GlobalSettings .v21DialogCard:before, #v21ContextDialog .v21DialogCard:before,#explorerActionSheet .explorerSheet:before,#housePanel:before{ content:'';display:block;width:44px;height:4px;margin:-8px auto 14px;background:var(--v23-line2)} #dialog h3,#v21FileDialog .v21DialogHead strong,#v21GlobalSettings .v21DialogHead strong{ font:600 15px/1.2 ui-monospace,monospace;color:var(--v23-ink);margin:0 0 14px} #dialog label,.v21Field{display:block;margin:0 0 14px} #dialog label{font:10px ui-monospace,monospace;color:var(--v23-ink2)} #dialog input,#dialog textarea,.v21Field input,.v21Field textarea{ width:100%;min-height:46px;margin-top:6px;padding:12px;font:13px ui-monospace,monospace; background:#0a1319;border:2px solid var(--v23-line2);color:var(--v23-ink)} #dialog textarea,.v21Field textarea{min-height:76px} #dialog input:focus,.v21Field input:focus,#dialog textarea:focus,.v21Field textarea:focus{outline:0;border-color:var(--v23-accent)} #dialog .row,.v21DialogActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} #dialog .row .btn,.v21DialogActions button{height:50px!important;font:12px ui-monospace,monospace!important; background:var(--v23-panel3)!important;border:2px solid var(--v23-line2)!important;color:var(--v23-ink)!important} #dialog .row .btn#confirmRegion,.v21DialogActions .primary{ background:var(--v23-accent)!important;border-color:var(--v23-accent)!important;color:var(--v23-accent-ink)!important;font-weight:700} #explorerActionSheet .explorerSheetHead{margin-bottom:6px} .explorerAction{min-height:54px!important;font:12px ui-monospace,monospace!important;gap:14px!important;padding:0 4px!important} .explorerAction .ico{width:26px;text-align:center;font-size:16px} /* ---------- ficha do arquivo vira folha inferior ---------- */ #housePanel{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important; width:auto!important;height:auto!important;max-height:80vh;overflow:auto;z-index:60!important; background:var(--v23-panel2)!important;border:0!important;border-top:2px solid var(--v23-line2)!important; padding:16px 16px calc(16px + var(--v23-safe-b))!important;box-shadow:0 -14px 40px #000a} #housePanel .panelHead{height:auto!important;background:transparent!important;border:0!important;padding:0 0 12px!important} #housePanel .panelHead img{width:22px;height:22px} #housePanel .panelBody{padding:0!important} #housePanel .openNote{min-height:56px!important;margin:14px 0 10px!important; background:var(--v23-accent)!important;border:0!important;color:var(--v23-accent-ink)!important} #housePanel .openNote b{color:var(--v23-accent-ink)} #housePanel .openNote span{color:#0a3341} #housePanel .row{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:8px} #housePanel .row .btn{height:48px!important} #housePanel .noteCard{gap:12px} /* ---------- editor ---------- */ #editorFull.open{grid-template-rows:auto auto minmax(0,1fr) auto} #editorTop{height:calc(52px + var(--v23-safe-t));padding-top:var(--v23-safe-t);gap:6px} #editorTop #sidebarToggleMobile{order:0;font-size:19px} #editorTop #fileNameDisplay{order:1;flex:1;min-width:0;font:600 13px ui-monospace,monospace} #editorTop #v23Seg{order:2} #editorTop #closeFullEditor{order:3;font-size:19px} #v23Seg{display:flex;border:2px solid var(--v23-line2);height:34px} #v23Seg button{min-width:56px;padding:0 10px;background:transparent;border:0;color:var(--v23-ink2); font:10px ui-monospace,monospace;letter-spacing:.04em} #v23Seg button.ativo{background:var(--v23-accent);color:var(--v23-accent-ink);font-weight:700} #v23Seg[hidden]{display:none} #mdToolbar{gap:4px;padding:6px;overflow-x:auto;scroll-snap-type:x proximity} #mdToolbar .mdBtn{min-width:46px!important;height:44px!important;font-size:16px!important;scroll-snap-align:start} #v21CodeTools button{min-height:44px} #editorBottom{height:calc(52px + var(--v23-safe-b));padding-bottom:var(--v23-safe-b)} #editorBottom .statusText{font:9px ui-monospace,monospace;color:var(--v23-ink3)} #editorBottom .saveState{font:9px ui-monospace,monospace;color:var(--v23-ink3);margin-left:auto;padding-right:10px} #editorBottom #openAI{width:auto;min-width:96px;height:40px;padding:0 14px;gap:7px; background:var(--v23-panel3);border:2px solid var(--v23-line2);color:var(--v23-ink);font:11px ui-monospace,monospace} #editorScroll{padding-bottom:24px} #bodyEditor,#renderedPreview{font-size:15px!important;line-height:1.65!important} /* ---------- explorador ---------- */ #fileSidebar .sidebarTop{padding:calc(8px + var(--v23-safe-t)) 8px 8px;gap:6px;align-items:center} #v21ExplorerToolbar{gap:6px} /* criar/importar viraram a ação primária (FAB); a barra fica só com o que é contextual */ #v21ExNew,#v21ExFolder,#v21ExImport{display:none!important} .v21ExBtn{min-width:44px!important;height:44px!important;font-size:16px!important} #v21ExplorerSearch{width:calc(100% - 16px);margin:0 8px 6px;min-height:44px;padding:0 12px; background:#0a1319;border:2px solid var(--v23-line);color:var(--v23-ink);font:12px ui-monospace,monospace} #v21ExplorerSearch:focus{outline:0;border-color:var(--v23-accent)} .v21TreeRow{min-height:52px!important;gap:10px!important} .v21TreeName{font-size:12px!important} #explorerContext{padding:2px 10px 8px} #tree{padding-bottom:96px} /* ---------- snackbar ---------- */ #toast{left:12px;right:12px;max-width:none;bottom:calc(var(--v23-dock) + var(--v23-safe-b) + 14px); border:2px solid var(--v23-line2);border-radius:0;background:var(--v23-panel3);color:var(--v23-ink); font:11px/1.4 ui-monospace,monospace;padding:12px 14px;box-shadow:4px 4px 0 #05161c} /* ---------- mapa grande ---------- */ #mapao{z-index:68} #mapao .dica{font:10px ui-monospace,monospace;color:var(--v23-ink2)} /* ---------- menu de vaults ---------- */ #menuCidades .v21CityOpen{min-height:56px} #menuCidades .v21IconBtn{min-width:44px;min-height:44px} #v21CityName{min-height:46px;padding:0 12px} /* ---------- posicionamento ---------- */ #v21PlacementDock{bottom:calc(var(--v23-dock) + var(--v23-safe-b) + 14px)!important;left:12px!important;right:12px!important; padding:10px!important;gap:10px!important;background:var(--v23-panel3)!important;border:2px solid var(--v23-line2)!important} #v21PlacementDock button{height:44px!important;min-width:52px!important} #v21PlacementText{max-width:none!important;flex:1} /* ---------- painel de IA ---------- */ .v21AiHead{padding:calc(6px + var(--v23-safe-t)) 8px 6px} .v21AiControls{padding:8px} .v21AiControls select,.v21AiControls button{height:44px!important} #aiPanel .chatInput textarea{min-height:52px;font-size:14px} #aiPanel .chatInput .btn{min-height:52px;min-width:80px;background:var(--v23-accent)!important;color:var(--v23-accent-ink)!important;border:0!important;font-weight:700} #renderedPreview.isEmpty{position:relative} #renderedPreview.isEmpty::before{content:"Esta nota está vazia.";position:absolute;top:.7em;left:0;color:#8296a3;pointer-events:none}