:root{
  --cor:#C8C4B9;      /* a única cor do site (cinza escuro da paleta) */
  --branco:#FFFBF3;
  --gaveta:280px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--branco);color:var(--cor);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus,button:focus-visible{outline:none}
/* flutuando, respirando */
@keyframes respira{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.5px) scale(1.06)}}
#alterna svg,#nova svg{animation:respira 4.2s ease-in-out infinite}
#nova svg{animation-delay:-1.4s}
#ponto::before{animation:respira 4.2s ease-in-out infinite;animation-delay:-2.8s}
body{display:flex}
svg{display:block}

/* ---------- o botãozinho de abrir e fechar as pílulas ---------- */
#alterna{position:fixed;top:34px;left:calc(var(--gaveta) - 48px);z-index:8;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--branco);transition:transform .2s,left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),color .45s}
#alterna:hover{transform:scale(1.15)}
#alterna svg{width:17px;height:17px}
body.gaveta-fechada #alterna{left:32px;top:20px;color:var(--cor)}

/* ---------- a gaveta: as pílulas, uma embaixo da outra ---------- */
#gaveta{position:relative;z-index:5;flex:0 0 var(--gaveta);height:100%;display:flex;flex-direction:column;padding:72px 28px 28px;background:var(--cor);border-right:0;overflow:hidden;
  transition:flex-basis .45s cubic-bezier(.2,.8,.2,1),padding .45s cubic-bezier(.2,.8,.2,1),border-color .45s}
#gaveta>*{transition:opacity .25s}
body.gaveta-fechada #gaveta{flex-basis:0;padding-left:0;padding-right:0}
body.gaveta-fechada #gaveta>*{opacity:0;pointer-events:none}
#lista{list-style:none;margin:0 -28px -24px;padding:20px 28px 48px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
#lista::-webkit-scrollbar{display:none}
.pilula{position:relative;flex:0 0 auto;height:58px;border-radius:999px;background:var(--branco);cursor:grab;user-select:none;touch-action:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
.pilula:hover{transform:translateX(4px)}
.pilula .num{position:absolute;right:42px;top:50%;transform:translateY(-50%);max-width:calc(100% - 110px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right;font:600 12px/1.4 "F-h5",system-ui,sans-serif;letter-spacing:.08em;color:var(--cor);outline:none;pointer-events:none}
.pilula .num[contenteditable=true]{pointer-events:auto;cursor:text;text-overflow:clip;min-width:40px}
.pilula .dup{position:absolute;left:34px;top:50%;width:28px;height:28px;margin-top:-14px;display:flex;align-items:center;justify-content:center;color:var(--cor);opacity:0;transition:opacity .2s,transform .2s}
.pilula .dup svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.pilula:hover .dup{opacity:1}
.pilula .dup:hover{transform:scale(1.15)}
.pilula.voando .dup{display:none}
.pilula{opacity:.5}
.pilula:hover{opacity:.8}
.pilula.aberta{opacity:1;box-shadow:0 0 14px 3px rgba(255,251,243,.9),0 0 26px 6px rgba(255,251,243,.45)}
.pilula.vaga{opacity:.25}
.pilula.voando{position:fixed;z-index:50;pointer-events:none;cursor:grabbing;transition:none}
.pilula.chegou{animation:chegou .7s cubic-bezier(.2,.8,.2,1)}
@keyframes chegou{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:none}}
#nova{display:flex;align-items:center;justify-content:center;margin-right:-8px;width:28px;height:28px;color:var(--branco);transition:transform .2s}
#nova:hover{transform:scale(1.15)}
#nova svg{width:17px;height:17px}

/* ---------- embaixo da lateral: a minha foto (e sair) e o + ---------- */
#rodape{display:flex;align-items:center;justify-content:space-between;margin-top:34px;position:relative;z-index:1;flex:0 0 auto}
#eu{display:flex;align-items:center;gap:14px}
#foto{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--branco);flex:0 0 auto;transition:transform .2s,box-shadow .4s}
#foto:hover{transform:scale(1.06)}
#foto img{display:block;width:100%;height:100%;object-fit:cover}
#foto img:not([src]),#foto img[src=""]{display:none}
/* enquanto salva no Supabase, a foto respira; salvou, ela para */
body.salvando #foto{animation:salvando 1.4s ease-in-out infinite}
@keyframes salvando{50%{box-shadow:0 0 0 4px rgba(255,251,243,.55)}}
#menu-eu{display:flex;gap:10px;opacity:0;pointer-events:none;transform:translateX(-6px);transition:opacity .25s,transform .25s}
#eu.aberto #menu-eu{opacity:1;pointer-events:auto;transform:none}
#menu-eu button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--branco);transition:transform .2s}
#menu-eu button:hover{transform:scale(1.15)}
#menu-eu svg{width:18px;height:18px}

/* ---------- o mundo: a página de escrever do typefaces ---------- */
#mundo{position:relative;flex:1;height:100%;overflow-y:auto;overflow-x:hidden;cursor:text;scrollbar-width:none}
#mundo::-webkit-scrollbar{display:none}
#t{box-sizing:border-box;min-height:100%;padding:calc(1.3vw + .14em) 1vw 180px;text-align:center;outline:none;caret-color:var(--cor);color:var(--cor);
  font-family:"F-s1",sans-serif;white-space:pre-wrap;word-break:break-word;transform-origin:50% 0}
#t ::selection,#t::selection{background:var(--cor);color:var(--branco)}
#t.fechando{transition:transform .8s cubic-bezier(.6,0,.3,1),opacity .8s ease-in}
#t.abrindo{animation:abrindo .6s cubic-bezier(.2,.8,.2,1)}
@keyframes abrindo{from{opacity:0}to{opacity:1}}

/* foto e vídeo no meio do texto */
#t .midia{position:relative;display:block;width:min(72%,900px);margin:.12em auto;font-size:16px;line-height:0;user-select:none}
#t .midia img,#t .midia video{display:block;width:100%;height:auto;border-radius:22px;background:var(--cor)}
#t .midia.enviando{animation:enviando 1.2s ease-in-out infinite}
@keyframes enviando{50%{opacity:.45}}
#t .midia .tira{position:absolute;right:14px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--branco);color:var(--cor);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
#t .midia:hover .tira{opacity:1}
#t .midia .tira svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* link no meio do texto: uma pílula com o endereço */
#t .midia.link{display:block;width:max-content;max-width:100%;margin:.15em auto;line-height:1}
#t .midia.link .abre{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 20px;border-radius:999px;background:var(--cor);color:var(--branco);font:500 15px/1 "F-h4",system-ui,sans-serif;letter-spacing:.04em}
#t .midia.link .abre svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
#t .midia.link .tira{right:-12px;top:-12px;width:24px;height:24px;border:1px solid var(--cor)}

/* o campo do link (sai da barra) */
#link{position:fixed;z-index:9;display:none;transform:translateY(-50%);width:min(360px,60vw);height:40px;padding:0 18px;border-radius:999px;border:1.5px solid var(--cor);background:var(--branco);color:var(--cor);font:500 15px/1 "F-h4",system-ui,sans-serif;outline:none}
#link.ver{display:block}

/* o site na lateral direita */
#painel{position:fixed;top:0;right:0;bottom:0;z-index:6;width:min(46vw,760px);background:var(--cor);padding:52px 12px 12px;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body.site-aberto #painel{transform:none}
#painel iframe{display:block;width:100%;height:100%;border:0;border-radius:18px;background:var(--branco)}
#painel-ponto{position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:50%}
#painel-ponto::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--branco);transition:transform .2s}
#painel-ponto:hover::before{transform:scale(1.3)}

#solta{position:fixed;inset:18px;z-index:6;display:none;border:2px dashed var(--cor);border-radius:36px;pointer-events:none}
body.soltando #solta{display:block}

/* ---------- a barra (a mesma do typefaces, na cor única, só com desenhos), em pé à esquerda ---------- */
#bar{position:fixed;left:calc(var(--gaveta) + 18px);top:60px;z-index:7;display:flex;flex-direction:column;gap:14px;align-items:center;
  background:var(--cor);color:var(--branco);border-radius:40px;padding:12px 11px;user-select:none;overflow-y:auto;max-height:calc(100vh - 88px);scrollbar-width:none;
  transition:opacity .4s,left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
#bar::-webkit-scrollbar{display:none}
body.gaveta-fechada #bar{left:18px;top:78px}
#bar.off{opacity:0;pointer-events:none}
#bar .g{display:flex;flex-direction:column;align-items:center;gap:4px}
#bar .g:empty{display:none}
#bar .g.escolha.recolhido .st:not(.on){display:none}
#bar .g.escolha.recolhido .obl:not(.on){display:none}
#bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#bar svg .cheio{fill:currentColor}
#bar button{width:32px;height:32px;border-radius:50%;background:var(--branco);color:var(--cor);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#bar .ic{display:flex;color:var(--branco)}
#bar .ic svg{width:20px;height:20px;stroke-width:1.6}
#bar button.st{width:34px;height:34px;padding:0;background:transparent;color:var(--branco);border:2px solid var(--branco);font-size:19px;line-height:1}
#bar button.st.on{background:var(--branco);color:var(--cor)}

/* o ponto: só um ponto, sempre no mesmo lugar, lá em cima; clica abre, clica fecha a barra */
#ponto{position:fixed;z-index:8;top:26px;transition:left .45s cubic-bezier(.2,.8,.2,1),top .35s cubic-bezier(.2,.8,.2,1);left:calc(var(--gaveta) + 34px);width:24px;height:24px;}
#ponto::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--cor);transition:transform .2s}
#ponto:hover::before{transform:scale(1.3)}
body.gaveta-fechada #ponto,body.gaveta-fechada.barra-fechada #ponto{left:34px;top:44px}
body.barra-fechada #ponto{top:36px}
body.barra-fechada #bar{display:none}
#t{padding-left:max(calc(1vw + 92px),var(--folga,0px));padding-right:max(calc(1vw + 92px),var(--folga,0px))}

/* ---------- celular: as pílulas viram uma fileira em cima ---------- */
@media (max-width:760px){
  :root{--gaveta:0px}
  body{flex-direction:column}
  #alterna,body.gaveta-fechada #alterna{top:calc(env(safe-area-inset-top) + 16px);left:auto;right:10px}
  #gaveta{flex:0 0 auto;height:auto;flex-direction:row;align-items:center;gap:14px;padding:calc(env(safe-area-inset-top) + 18px) 44px 18px 16px;border-right:0;border-bottom:0}
  body.gaveta-fechada #gaveta{flex-basis:auto;height:calc(env(safe-area-inset-top) + 74px);background:var(--branco)}
  #lista{flex-direction:row;overflow-x:auto;overflow-y:hidden;margin:0;padding:6px 4px;gap:10px}
  .pilula{height:48px;width:92px}
  .pilula.aberta .dup{opacity:1;left:18px}
  .pilula .num{right:24px;font-size:10px}
  .pilula:hover{transform:none}
  #nova{flex:0 0 auto;margin:0;align-self:center}
  #rodape{margin:0;gap:12px}
  #menu-eu{display:none}
  #eu.aberto #menu-eu{display:flex}
  #bar,body.gaveta-fechada #bar{left:50%;top:auto;bottom:calc(env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px 16px;padding:10px 16px;width:max-content;max-width:calc(100vw - 32px)}
  #bar .g{flex-direction:row}
  #ponto,body.gaveta-fechada #ponto{left:50%;top:auto;bottom:calc(env(safe-area-inset-bottom) + 8px);margin-left:-12px}
    #t{padding-left:max(1vw,var(--folga,0px));padding-right:max(1vw,var(--folga,0px))}
  #t .midia{width:100%}
  #painel{width:100vw}
}