/* Barra de abas (js/abas.js). Só aparece com duas ou mais abas; com uma, o editor é igual ao de antes.
   Aba escolhida = verde, como todo item marcado (borda --accent, fundo --accent-soft). */
.tabbar{display:flex;align-items:center;gap:4px;height:34px;padding:0 8px;background:var(--bg);border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;position:relative;z-index:2001}
.tabbar[hidden]{display:none}
body.has-tabs .app{height:calc(100% - 34px)}
.tab{display:flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 10px;border:1px solid transparent;border-radius:5px;background:var(--raised);color:var(--muted);font-size:11px;flex:0 1 180px;min-width:96px;max-width:200px;cursor:default;user-select:none}
.tab:hover{color:var(--fg);border-color:var(--line-2)}
.tab:focus-visible{outline:none;border-color:var(--accent)}
.tab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.tab-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-x{border:0;background:transparent;color:inherit;width:18px;height:18px;border-radius:4px;display:grid;place-items:center;padding:0;flex:none;opacity:.7}
.tab-x svg{width:11px;height:11px}
.tab-x:hover{opacity:1;background:var(--line)}
.tab-new{flex:none}
/* as abas a mais ficam por cima do editor principal, abaixo da barra */
.tabframes{position:fixed;left:0;right:0;top:34px;bottom:0;z-index:2000;pointer-events:none}
.tabframes .aba-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg);visibility:hidden;pointer-events:none}
.tabframes .aba-frame.on{visibility:visible;pointer-events:auto}
body:not(.has-tabs) .tabframes{display:none}