/* Sinapse - estilos globais (extraidos do <style> de index.html).
   Variaveis de tema, animacoes, helpers de hover e o layout base do #app. */

:root{--bg:#f5f3ec;--bg2:#edeade;--card:#fffefa;--ink:#23211a;--ink2:#6d6759;--ink3:#a39c8b;--line:#e4dfd0;--acc:#177e70;--acc-ink:#ffffff;--warm:#c4643f;--ring:#e9e4d6;--danger:#b23b2f;--shadow:0 1px 2px rgba(45,38,20,.04),0 14px 34px -18px rgba(45,38,20,.18)}
[data-theme="escuro"]{--bg:#151410;--bg2:#1c1a14;--card:#211f17;--ink:#ece7da;--ink2:#a49d8a;--ink3:#6d6656;--line:#2e2b20;--acc-ink:#0f1d19;--warm:#e08a62;--ring:#2e2b20;--danger:#e8877a;--shadow:0 1px 2px rgba(0,0,0,.35),0 18px 44px -20px rgba(0,0,0,.6)}
html,body{margin:0;padding:0;background:var(--bg)}
*{box-sizing:border-box}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--warm)}
input,select,textarea,button{font-family:inherit;color:inherit;font-size:inherit}
input:focus,select:focus,textarea:focus,button:focus{outline:none}
input::placeholder,textarea::placeholder{color:var(--ink3)}
::selection{background:color-mix(in oklab,var(--acc) 25%,transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}
@keyframes drawerIn{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes growX{from{transform:scaleX(0)}}
@keyframes ringIn{from{stroke-dashoffset:527.8}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
/* hover / focus helpers (substituem os style-hover/style-focus do runtime) */
.hov-lift{transition:transform .2s}.hov-lift:hover{transform:translateY(-2px)}
.hov-lift1{transition:transform .2s}.hov-lift1:hover{transform:translateY(-1px)}
.hov-lift3:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--acc) 40%,var(--line))}
.hov-bg{transition:background .2s}.hov-bg:hover{background:var(--bg2)}
.hov-warm{transition:color .2s}.hov-warm:hover{color:var(--warm)}
.hov-scale{transition:transform .15s}.hov-scale:hover{transform:scale(1.02)}
.navi:hover{background:var(--bg2)!important}
.inp{transition:border-color .2s}.inp:focus{border-color:var(--acc)}
.usercard{transition:background .2s;border-radius:12px}.usercard:hover{background:var(--bg2)}
.setfield{transition:border-color .2s}.setfield:focus{border-color:var(--acc)}
.blk-x{transition:opacity .15s}.blk-x:hover{opacity:1!important}
/* ------- chat de amigos (canto inferior direito, fora do #app) ------- */
#sinapse-chat{position:fixed;right:24px;bottom:24px;z-index:35;font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased}
#sinapse-chat *{box-sizing:border-box}
#sinapse-chat #chat-fab{transition:transform .2s,background .4s}
#sinapse-chat #chat-fab:hover{transform:scale(1.06)}
#sinapse-chat .chat-row{transition:background .18s}
#sinapse-chat .chat-row:hover{background:var(--bg2)}
#sinapse-chat .chat-res:hover{background:var(--bg2)}
@keyframes chatIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
#app{display:flex;height:100vh;min-width:1080px;overflow:hidden;background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;transition:background .4s;-webkit-font-smoothing:antialiased}