/* ================================================================
Metabolia Design v3.6 : matches JSX V2 proposal
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&family=Instrument+Sans:wght@300;400;500;600&family=Spline+Sans+Mono:wght@400;500&display=swap');
:root{--bg:#0F110E;--surface:#161814;--card:#1D1F1A;--border:rgba(255,255,255,.09);--accent:#DCA84F;--accent-rgb:220,168,79;--accent-dim:rgba(220,168,79,.15);--accent-text:#DCA84F;--send:#DCA84F;--text:#ECEAE0;--muted:rgba(236,234,224,.55);--muted-low:rgba(236,234,224,.18);--user-bg:#DCA84F;--user-text:#141610;--radius:18px;--hbtn-idle:rgba(236,234,224,.62);--flora-bg:#241F16;--flora-border:rgba(255,255,255,.13);--wm-ia:#DCA84F}
.intro-light{--bg:#F4F7FB;--surface:#ECF1F8;--card:#FFFFFF;--border:#D6E1EF;--accent:#164E8C;--accent-rgb:22,78,140;--accent-dim:rgba(22,78,140,.10);--accent-text:#164E8C;--send:#164E8C;--text:#12294A;--muted:#5B6B80;--muted-low:rgba(18,41,74,.16);--user-bg:#164E8C;--user-text:#FFFFFF;--hbtn-idle:#3D4B60;--flora-bg:#FFFFFF;--flora-border:#D6E1EF;--wm-ia:#B0762A}
body.metabolia-active{color-scheme:dark;color:var(--text)}
body.metabolia-active.intro-light{color-scheme:light}
body.metabolia-active{overflow:hidden}
body.metabolia-active #wpadminbar,body.metabolia-active .site-header,body.metabolia-active header:not(#intro-header),body.metabolia-active footer:not(#intro-footer){display:none!important}
#metabolia-app{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;background:var(--bg);font-family:'Instrument Sans',sans-serif;font-weight:300;font-size:14px;color:var(--text);transition:background .3s;overflow:hidden}
#metabolia-app::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(var(--accent-rgb),.05) 0%,transparent 70%);animation:bgPulse 9s ease-in-out infinite}
@keyframes bgPulse{0%,100%{opacity:.6}50%{opacity:1}}
/* HEADER */
#intro-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border);position:relative;z-index:10;flex-shrink:0}
#intro-logo{font-family:'Bricolage Grotesque',serif;font-size:17px;font-weight:300;letter-spacing:.2em;color:var(--text);margin:0;line-height:1;user-select:none;display:inline-flex;align-items:center;gap:0}
#intro-logo .ia{color:var(--wm-ia)}
/* Cluster de 4 estrelas após o "IA" (assinatura visual de inteligência artificial) */
.intro-sparkles{display:inline-flex;align-items:center;margin-left:3px;color:var(--accent)}
.intro-sparkles svg{width:18px;height:18px;display:block}
/* Logo do lock screen: estrelas escala maior */
.intro-pin-lock-logo .intro-sparkles{margin-left:4px}
.intro-pin-lock-logo .intro-sparkles svg{width:20px;height:20px}
#intro-controls{display:flex;align-items:center;gap:2px}
.intro-hbtn{background:none;border:none;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--hbtn-idle);transition:background .18s,color .18s;flex-shrink:0}
.intro-hbtn:hover,.intro-hbtn.active{background:var(--accent-dim);color:var(--accent)}
.intro-hbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-linecap:round;display:block}
.intro-hbtn span{font-size:11px;font-weight:400;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;line-height:1}
/* Garantir cor visível dos ícones em ambos os temas */
.intro-light .intro-hbtn{color:#3D3B36}
.intro-light .intro-hbtn svg{stroke:#3D3B36;stroke-width:2.2}
.intro-light .intro-hbtn:hover,.intro-light .intro-hbtn.active{color:var(--accent)}
.intro-light .intro-hbtn:hover svg,.intro-light .intro-hbtn.active svg{stroke:var(--accent)}
/* sun/moon spans removidos : substituídos por #intro-theme-icon trocado via JS */
#intro-reset-btn.confirm{color:#C4756A!important;background:rgba(196,117,106,.1)!important}
/* SEARCH (modal por dia) */
@keyframes slideDown{from{opacity:0;transform:scaleY(.8);transform-origin:top}to{opacity:1;transform:scaleY(1)}}
#intro-search-overlay{position:absolute;inset:0;z-index:60;display:none;align-items:stretch;justify-content:center}
.isr-backdrop{position:absolute;inset:0;background:rgba(8,7,6,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.isr-modal{position:absolute;left:12px;right:12px;top:40px;bottom:40px;max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:isrIn .18s ease}
@keyframes isrIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.isr-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;flex-shrink:0}
.isr-title{font-family:'Bricolage Grotesque',Georgia,serif;font-weight:400;font-size:21px;color:var(--text);margin:0;letter-spacing:.01em}
.isr-x{background:none;border:none;cursor:pointer;color:var(--muted);font-size:17px;line-height:1;padding:4px 6px;transition:color .15s}
.isr-x:hover{color:var(--accent)}
.isr-field{display:flex;align-items:center;gap:9px;margin:0 16px 12px;background:var(--bg);border:1px solid var(--border);border-radius:13px;padding:11px 13px;flex-shrink:0}
.isr-icon{width:17px;height:17px;stroke:var(--muted);fill:none;flex-shrink:0}
#intro-search-input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:'Instrument Sans',sans-serif;font-size:15px;font-weight:300}
#intro-search-input::placeholder{color:var(--muted)}
.isr-results{flex:1;overflow-y:auto;padding:2px 16px 18px;-webkit-overflow-scrolling:touch}
.isr-hint{font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--muted);padding:18px 2px;text-align:center}
.isr-tally{font-family:'Instrument Sans',sans-serif;font-size:11.5px;color:var(--muted);letter-spacing:.04em;margin:2px 2px 10px}
.isr-day{font-family:'Bricolage Grotesque',Georgia,serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);opacity:.85;margin:6px 2px 8px}
.isr-item{padding:9px 4px;cursor:pointer;border-radius:10px;transition:background .12s}
.isr-item:hover,.isr-item:active{background:var(--accent-dim)}
.isr-excerpt{font-family:'Instrument Sans',sans-serif;font-size:14.5px;line-height:1.5;color:var(--text)}
.isr-excerpt mark{color:var(--accent);background:var(--accent-dim);border-radius:4px;padding:0 3px}
.isr-meta{font-family:'Instrument Sans',sans-serif;font-size:11.5px;color:var(--muted);margin-top:5px}
/* DEPTH */
#intro-depth{height:2px;background:var(--muted-low);flex-shrink:0}
#intro-depth-bar{height:100%;background:var(--accent);width:0;transition:width 1s ease;opacity:.4}
/* MESSAGES */
#intro-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 14px 6px 14px;display:flex;flex-direction:column;gap:2px;position:relative;z-index:1}
#intro-messages::-webkit-scrollbar{width:3px}
#intro-messages::-webkit-scrollbar-thumb{background:var(--muted-low);border-radius:3px}
/* v1.30.1: pan-y em vez de manipulation. O manipulation deixa o browser reclamar
o arrasto horizontal (pointercancel: a bolha inclinava e parava, teste real do
Jonas). E a licao v8.55.0 do beta nos cartoes de resumo, aplicada as bolhas.
O duplo toque continua sem zoom (qualquer valor diferente de auto o desliga)
e o scroll vertical fica nativo. */
.intro-msg{display:flex;flex-direction:column;margin-bottom:9px;touch-action:pan-y}
.intro-msg--user{align-items:flex-end}
/* Bloco de citação (slide-to-reply) : aparece dentro da bolha do utilizador */
.intro-msg-quote {
max-width: 78%;
background: rgba(0,0,0,.25);
border-left: 3px solid var(--accent);
border-radius: 6px 6px 0 0;
padding: .35rem .65rem .3rem;
margin-bottom: -4px;
cursor: pointer;
user-select: none;
transition: background .15s;
display: flex;
flex-direction: column;
gap: 2px;
align-self: flex-end;
}
.intro-msg-quote:hover { background: rgba(0,0,0,.35); }
.intro-light .intro-msg-quote { background: rgba(0,0,0,.05); }
.intro-light .intro-msg-quote:hover { background: rgba(0,0,0,.09); }
.intro-msg-quote__label {
font-size: .68rem;
font-weight: 600;
color: var(--accent);
letter-spacing: .03em;
}
.intro-msg-quote__text {
font-size: .78rem;
color: var(--muted);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Highlight momentâneo ao clicar na citação */
@keyframes introMsgHighlight {
0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),.5); }
40% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.3); }
100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}
.intro-msg--highlight .intro-msg__text {
animation: introMsgHighlight 1.8s ease-out;
}
.intro-msg--assistant{align-items:flex-start}
.intro-msg--summary{align-items:center}
.intro-msg__text{padding:10px 14px;border-radius:18px;font-size:13.5px;line-height:1.55;font-weight:300;max-width:82%;letter-spacing:.01em}
.intro-msg--user .intro-msg__text{background:var(--user-bg);color:var(--user-text);border-radius:18px 18px 4px 18px}
.intro-msg--assistant .intro-msg__text{background:var(--flora-bg);color:var(--text);border:1px solid var(--flora-border);border-radius:18px 18px 18px 4px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.intro-light .intro-msg--assistant .intro-msg__text{box-shadow:0 1px 3px rgba(0,0,0,.06)}
.intro-msg--summary .intro-msg__text{background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),.2);border-radius:12px;color:var(--text);font-size:12px;max-width:90%}
.intro-msg__text p{margin:0 0 .5em}
.intro-msg__text p:last-child{margin-bottom:0}
.intro-msg__time{font-size:9.5px;color:var(--muted);padding:2px 4px;letter-spacing:.05em}
/* v7.0.5: acções (copiar/ouvir/apagar) ao LADO da bolha, espelhadas.
Assistente: à esquerda da bolha. User: à direita. */
.intro-msg{position:relative}
.intro-msg__actions{
display:none;gap:2px;
position:absolute;top:50%;transform:translateY(-50%);
flex-direction:column;
background:rgba(10,9,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
border:1px solid var(--border);border-radius:8px;padding:2px;
z-index:3;
}
.intro-light .intro-msg__actions{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.08)}
.intro-msg.intro-msg-acts-open{z-index:6}
.intro-msg__actions{z-index:30}
.intro-msg-action{pointer-events:auto}
.intro-msg-action--del:hover{color:#e05c5c}
.intro-msg-action--armed{color:#e05c5c !important;background:rgba(224,92,92,.12);border-radius:6px;animation:intro-del-pulse 1s ease-in-out infinite}
#intro-session-warn{display:flex;align-items:center;gap:.55rem;padding:.5rem .85rem;background:rgba(var(--accent-rgb),.1);border-bottom:1px solid rgba(var(--accent-rgb),.25);font-size:.78rem;color:var(--accent);flex-shrink:0;max-width:640px;margin:0 auto;width:100%;box-sizing:border-box}
#intro-session-warn svg{flex-shrink:0}
#intro-session-warn span{flex:1;min-width:0}
#isw-take,#intro-session-take-inline{background:var(--accent);color:var(--user-text);border:none;border-radius:100px;padding:.35rem .9rem;font-family:'Instrument Sans',sans-serif;font-size:.78rem;font-weight:500;cursor:pointer;flex-shrink:0}
#intro-session-take-inline{position:absolute;right:54px;bottom:11px;z-index:3}
.intro-session-readonly #intro-input{opacity:.55}
@keyframes intro-del-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.intro-msg--assistant .intro-msg__actions{left:0;transform:translate(calc(-100% - 8px), -50%)}
.intro-msg--user .intro-msg__actions{right:0;transform:translate(calc(100% + 8px), -50%)}
/* Desktop: hover na bolha mostra. */
@media (hover: hover) and (pointer: fine) {
.intro-msg:hover .intro-msg__actions{display:flex}
}
/* Mobile: só com tap explícito (.intro-msg-acts-open via JS) */
.intro-msg.intro-msg-acts-open .intro-msg__actions{display:flex}
.intro-msg-action{background:none;border:none;cursor:pointer;color:var(--muted);opacity:.85;transition:opacity .2s,background .2s;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:5px}
.intro-msg-action:hover{opacity:1;background:rgba(255,255,255,.06)}
.intro-light .intro-msg-action:hover{background:rgba(0,0,0,.04)}
.intro-msg-action svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.intro-msg-action--speak:hover svg{stroke:var(--accent)}
/* v8.9.6: botão Reagir no menu lateral. Hover suave para indicar interactividade. */
.intro-msg-action--react:hover svg{stroke:#d4a373}
/* Em viewports muito estreitos onde não cabe ao lado, deixar dentro da margem do chat */
@media (max-width: 440px) {
.intro-msg--assistant .intro-msg__actions{left:4px;transform:translate(0, -50%);top:auto;bottom:-32px}
.intro-msg--user .intro-msg__actions{right:4px;transform:translate(0, -50%);top:auto;bottom:-32px}
}
/* Typing */
/* Loading: breathing circle instead of dots */
.intro-msg--assistant.intro-typing .intro-msg__text{
padding:16px 18px;display:flex;align-items:center;justify-content:center;
min-width:72px;background:var(--card);border:1px solid var(--border);
border-radius:18px 18px 18px 4px;
}
.intro-breathing{
width:36px;height:36px;border-radius:50%;
background:radial-gradient(circle at 40% 40%, rgba(var(--accent-rgb),.35) 0%, rgba(var(--accent-rgb),.08) 70%);
border:1px solid rgba(var(--accent-rgb),.3);
animation:almaBreath 3s ease-in-out infinite;
}
@keyframes almaBreath{
0%,100%{transform:scale(.72);opacity:.45;box-shadow:0 0 0 0 rgba(var(--accent-rgb),.0)}
50%{transform:scale(1.05);opacity:.95;box-shadow:0 0 12px 4px rgba(var(--accent-rgb),.18)}
}
mark.intro-search-highlight{background:rgba(var(--accent-rgb),.25);border-radius:2px}
mark.intro-search-current{background:rgba(var(--accent-rgb),.55)}
.intro-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding:0 2px}
.intro-choice-btn{background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),.25);border-radius:100px;padding:6px 14px;color:var(--text);font-size:12px;font-family:'Instrument Sans',sans-serif;font-weight:300;cursor:pointer;transition:all .18s;letter-spacing:.02em}
.intro-choice-btn:hover{background:rgba(var(--accent-rgb),.25)}
.intro-suggest{margin-top:6px}
.intro-suggest-btn{background:var(--card);border:1px solid var(--accent);border-radius:100px;padding:6px 13px 6px 10px;font-size:12px;font-family:'Instrument Sans',sans-serif;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .18s;box-shadow:0 2px 10px rgba(var(--accent-rgb),.12);font-weight:300;letter-spacing:.02em}
.intro-suggest-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(var(--accent-rgb),.2)}
.intro-suggest-btn svg{width:14px;height:14px;stroke:var(--accent);flex-shrink:0}
.fs-12 .intro-msg__text{font-size:12px}
.fs-16 .intro-msg__text{font-size:15.5px}
#intro-toast{position:fixed;bottom:130px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--card);border:1px solid var(--border);color:var(--text);font-size:12px;font-family:'Instrument Sans',sans-serif;padding:7px 16px;border-radius:100px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:100001;white-space:nowrap}
#intro-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
/* CHIPS ROW : nav is now absolutely positioned inside messages area */
#intro-chips-row{display:flex;align-items:flex-start;padding:8px 12px 6px;position:relative;z-index:2;flex-shrink:0}
#intro-chips{flex:1;display:flex;flex-wrap:wrap;gap:6px;padding-right:38px}
.intro-chip{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:100px;padding:7px 14px;color:var(--text);font-size:12.5px;font-weight:300;font-family:'Instrument Sans',sans-serif;cursor:pointer;letter-spacing:.02em;transition:all .18s;white-space:nowrap}
.intro-light .intro-chip{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.09)}
.intro-chip:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
/* v7.0.5/6: NAV de mensagens : escondida no desktop (scroll natural chega),
visível em mobile pequeno, alinhada no canto inferior direito como FAB discreto. */
#intro-nav{
position:absolute;right:10px;bottom:90px;top:auto;
display:none; /* default: escondido. Mostra-se só em mobile. */
flex-direction:column;justify-content:flex-end;
gap:8px;z-index:5;pointer-events:none;
padding:0;
}
@media (max-width: 900px) {
#intro-nav { display: flex !important; }
}
@media (min-width: 901px) {
#intro-nav { display: none !important; }
}
#intro-nav button{
background:rgba(20,17,15,.85);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(var(--accent-rgb),.25);
border-radius:50%;width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:rgba(232,229,221,.7);
transition:all .2s;pointer-events:all;
box-shadow:0 4px 12px rgba(0,0,0,.3);
}
#intro-nav button:hover,#intro-nav button:active{
border-color:var(--accent);color:var(--accent);
background:rgba(20,17,15,.95);
}
#intro-nav button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
/* INPUT */
/* -- Reply bar (slide-to-reply, estilo WhatsApp) --------------------- */
#intro-reply-bar{
padding:6px 12px 0;
flex-shrink:0;
animation:replyBarSlideIn .18s ease-out;
}
@keyframes replyBarSlideIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
.intro-reply-bar-inner{
display:flex;align-items:center;gap:10px;
background:var(--card);
border-left:3px solid var(--accent);
border-radius:8px;
padding:8px 10px;
}
.intro-reply-bar-content{flex:1;min-width:0;overflow:hidden}
.intro-reply-bar-label{
font-size:.7rem;color:var(--accent);
font-weight:500;letter-spacing:.02em;
margin-bottom:2px;
}
.intro-reply-bar-text{
font-size:.82rem;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.3;
}
.intro-reply-bar-close{
background:transparent;border:none;
color:var(--muted);cursor:pointer;
width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.intro-reply-bar-close:hover{background:rgba(255,255,255,.05);color:var(--text)}
.intro-reply-bar-close svg{width:16px;height:16px}
/* -- Selection toolbar (longpress multi-select) ---------------------- */
/* v8.40.0: barra de selecção movida do TOPO para JUNTO ao input (onde está o
polegar). Ocupa o lugar da barra de voz enquanto se seleccionam mensagens. */
#intro-selection-bar{
display:flex;flex-direction:column;gap:10px;
padding:12px 16px 14px;
background:var(--surface);
border-top:2px solid var(--border);
flex-shrink:0;
animation:selBarSlideUp .2s ease-out;
}
@keyframes selBarSlideUp{
from{opacity:0;transform:translateY(40%)}
to{opacity:1;transform:translateY(0)}
}
.intro-selection-top{
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.intro-selection-cancel-btn{
background:transparent;border:1px solid var(--border);
color:var(--muted);
padding:6px 14px;border-radius:18px;
font-family:'Instrument Sans',sans-serif;font-size:.82rem;font-weight:500;
cursor:pointer;flex-shrink:0;
display:flex;align-items:center;gap:6px;
transition:all .15s ease;
}
.intro-selection-cancel-btn:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--text)}
.intro-selection-cancel-btn svg{width:15px;height:15px}
.intro-selection-actions{
display:flex;gap:10px;
}
.intro-selection-count{
font-family:'Instrument Sans',sans-serif;font-size:.95rem;
color:var(--text);font-weight:500;
}
.intro-selection-btn{
flex:1;justify-content:center;
background:transparent;border:1px solid var(--border);
color:var(--text);
padding:10px 14px;border-radius:14px;
font-family:'Instrument Sans',sans-serif;font-size:.85rem;
cursor:pointer;
display:flex;align-items:center;gap:7px;
transition:all .15s ease;
}
.intro-selection-btn:hover{background:rgba(var(--accent-rgb),.1);border-color:var(--accent)}
.intro-selection-btn svg{width:16px;height:16px}
/* -- Swipe-to-reply gesture state ---------------------------------- */
.intro-msg.is-swiping{transition:none}
.intro-msg.is-swiping .intro-msg__text{pointer-events:none}
.intro-msg__swipe-hint{
position:absolute;left:-30px;top:50%;
transform:translateY(-50%);
color:var(--accent);
opacity:0;
transition:opacity .12s ease;
pointer-events:none;
}
.intro-msg__swipe-hint svg{width:18px;height:18px}
.intro-msg.is-swipe-armed .intro-msg__swipe-hint{opacity:1}
/* -- Selection mode visual states ----------------------------------- */
body.intro-selection-mode .intro-msg{cursor:pointer;user-select:none}
body.intro-selection-mode .intro-msg__actions{display:none !important}
.intro-msg.is-selected{
background:rgba(var(--accent-rgb),.13) !important;
outline:2px solid var(--accent);
outline-offset:2px;
border-radius:14px;
}
#intro-input-area{display:flex;align-items:flex-end;gap:8px;padding:6px 12px 8px;position:relative;z-index:2;flex-shrink:0}
#intro-input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:22px;padding:9px 50px 9px 14px;color:var(--text);font-family:'Instrument Sans',sans-serif;font-weight:300;font-size:14px;line-height:1.5;resize:none;outline:none;max-height:200px;min-height:38px;overflow-y:auto;letter-spacing:.01em;width:100%;transition:border-color .2s,max-height .15s}
#intro-input:focus{border-color:rgba(var(--accent-rgb),.3)}
#intro-input::placeholder{color:var(--muted)}
#intro-send{position:absolute;right:15px;bottom:13px;width:32px;height:32px;border-radius:50%;background:var(--send);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--user-text);opacity:.55;transition:opacity .2s,transform .15s;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* A barra do limite de escrita: por baixo do campo, alinhada com ele (recuo do icone). So aparece com texto; verde, ambar aos 75%, vermelho aos 90%, linha dupla vermelha aos 100%. */
.intro-wm-wrap{padding:3px 12px 1px;flex-shrink:0}
.intro-wm-wrap .intro-word-meter{margin:0 0 0 37px}
.intro-word-meter{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;opacity:0;transition:opacity .2s ease,height .15s ease}
.intro-word-meter--show{opacity:1}
.intro-word-meter__fill{height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .15s ease,background-color .2s ease}
.intro-wm-amber .intro-word-meter__fill{background:#E0A458}
.intro-wm-red .intro-word-meter__fill{background:#D9534F}
.intro-wm-full{height:5px;box-shadow:inset 0 0 0 1px #D9534F;border-top:1px solid #D9534F}
.intro-wm-full .intro-word-meter__fill{background:#D9534F}
.intro-light .intro-word-meter{background:rgba(0,0,0,.06)}
#intro-send.ready{opacity:1}
#intro-send.ready:active{transform:scale(.92)}
#intro-send:disabled{opacity:.3;cursor:default}
#intro-send svg{width:16px;height:16px;display:block;margin-left:-1px;margin-top:1px}
/* BOTTOM BAR */
#intro-bottom-bar{display:flex;align-items:center;gap:8px;padding:4px 12px 6px;position:relative;z-index:2;flex-shrink:0}
.intro-bar-sep{width:1px;height:16px;background:var(--border);flex-shrink:0}
#intro-speed-btn{background:var(--muted-low);border:none;border-radius:100px;padding:5px 10px;font-family:'Instrument Sans',sans-serif;font-size:11.5px;font-weight:300;color:var(--muted);cursor:pointer;letter-spacing:.04em;transition:all .18s;flex-shrink:0}
#intro-speed-btn:hover{color:var(--accent)}
#intro-interpret-wrap{flex:1;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:100px;padding:5px 10px 5px 7px}
.intro-interpret-icon{width:13px;height:13px;stroke:var(--muted);fill:none;flex-shrink:0}
#intro-interpret-label{font-size:11.5px;color:var(--muted);letter-spacing:.04em;font-weight:300}
.intro-mini-toggle{position:relative;display:inline-block;width:32px;height:18px;flex-shrink:0}
.intro-mini-toggle input{opacity:0;width:0;height:0}
.intro-mini-slider{position:absolute;cursor:pointer;inset:0;background:var(--muted-low);border-radius:18px;transition:background .2s}
.intro-mini-slider::before{content:'';position:absolute;height:14px;width:14px;left:2px;bottom:2px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.intro-mini-toggle input:checked+.intro-mini-slider{background:var(--accent)}
.intro-mini-toggle input:checked+.intro-mini-slider::before{transform:translateX(14px)}
#intro-mic-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);flex-shrink:0;transition:all .2s}
#intro-mic-btn:hover{border-color:var(--accent);color:var(--accent)}
#intro-mic-btn.recording{background:rgba(196,117,106,.15);border-color:#C4756A;color:#C4756A}
#intro-mic-btn svg{width:14px;height:14px;stroke:currentColor;fill:none}
/* ACTION ROW */
#intro-action-row{display:flex;gap:5px;padding:2px 10px 8px;position:relative;z-index:2;flex-shrink:0}
#intro-action-row button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:100px;padding:8px 8px;font-family:'Instrument Sans',sans-serif;font-size:12.5px;font-weight:300;cursor:pointer;letter-spacing:.04em;transition:all .2s}
#intro-login-btn{border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.06);color:var(--accent);font-weight:400}
#intro-login-btn:hover{background:rgba(var(--accent-rgb),.14);border-color:var(--accent)}
/* Pills uniformes (v6.9.9): mesmo estilo para respirar, meditações, diário, settings, partilhar */
#intro-breathe-btn,#intro-library-btn,#intro-diary-btn,#intro-settings-btn,#intro-share-btn{
flex:1;border:1px solid var(--border)!important;
background:transparent!important;color:var(--muted)!important;
}
#intro-breathe-btn:hover,#intro-library-btn:hover,
#intro-diary-btn:hover,#intro-settings-btn:hover,#intro-share-btn:hover{
border-color:var(--accent)!important;color:var(--accent)!important;
}
#intro-summary-btn{flex:0;padding:8px 16px;border:1px solid var(--border);background:transparent;color:var(--muted)}
#intro-action-row button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;flex-shrink:0}
/* FOOTER */
#intro-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;font-size:11.5px;color:var(--foot-text,rgba(255,255,255,.45));letter-spacing:.01em;flex-shrink:0;background:rgba(255,255,255,.02);border-top:2px solid rgba(255,255,255,.07)}
.intro-light #intro-footer{color:rgba(15,14,12,.6);background:rgba(0,0,0,.025);border-top-color:rgba(0,0,0,.09)}
.intro-light .intro-foot-ia{color:rgba(15,14,12,.62)}
.intro-light #intro-v8-bar,.intro-light #intro-v8-bar-anon{background:#ECEAE3}
.intro-light #intro-defs{background:#E4E7E2}
.intro-footer-col{display:flex;flex-direction:column;gap:4px;line-height:1.25;min-width:0;background:none;border:none;padding:0;margin:0;font-family:inherit;font-size:inherit;letter-spacing:inherit}
.intro-foot-l1,.intro-foot-l2{display:block}
.intro-foot-ia{flex:1 1 auto;min-width:0;text-align:left;align-items:flex-start;color:var(--foot-text,rgba(255,255,255,.45));cursor:pointer}
.intro-foot-ia .intro-foot-l2{text-decoration:underline;text-underline-offset:2px;opacity:.85}
.intro-foot-credits-col{flex:0 0 auto;align-items:flex-end;white-space:nowrap}
.intro-foot-credits-col #intro-footer-credits{color:var(--text);font-weight:500}
.intro-foot-install{flex:0 0 auto;align-items:flex-end;white-space:nowrap;color:var(--accent);cursor:pointer;font-weight:600}
.intro-foot-install .intro-foot-l1,.intro-foot-install .intro-foot-l2{color:var(--accent)}
.intro-topup-btn{background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;line-height:1.2}
.intro-topup-btn:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
.intro-topup-btn:active{transform:scale(.97)}
#intro-privacy-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
#intro-privacy-link:hover{color:var(--accent)}
#intro-status{color:var(--accent);font-size:10px}
/* LOGIN MODAL */
#intro-login-modal{position:fixed;inset:0;z-index:100003;background:rgba(10,9,8,.94);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#intro-login-box{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px 20px 20px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;position:relative;animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
#intro-login-close{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;opacity:.35;color:var(--text);transition:opacity .2s;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px}
#intro-login-close:hover{opacity:1;background:rgba(255,255,255,.06)}
#intro-login-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-linecap:round}
#intro-login-title{font-family:'Bricolage Grotesque',serif;font-weight:300;font-size:1.25rem;letter-spacing:.06em;color:var(--text);margin:0}
#intro-login-desc{font-size:.8rem;color:var(--muted);line-height:1.5;margin:0}
#intro-login-conv-tag{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0}
#intro-login-conv-credits{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.85rem 0;margin:0}
.intro-conv-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px}
.intro-conv-pre,.intro-conv-post{color:var(--muted);font-size:.84rem}
.intro-conv-total{font-family:'Bricolage Grotesque',serif;font-size:1.8rem;font-weight:600;color:var(--accent);line-height:1}
.intro-conv-detail{color:var(--muted);opacity:.7;font-size:.72rem;margin-top:6px}
#intro-sms-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
#intro-sms-input{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:.7rem 1rem;font-family:'Instrument Sans',sans-serif;font-weight:300;font-size:.95rem;color:var(--text);outline:none;transition:border-color .2s;width:100%}
#intro-sms-input:focus{border-color:var(--accent)}
#intro-sms-input::placeholder{color:var(--muted)}
#intro-sms-code{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:.8rem;font-family:'Instrument Sans',sans-serif;font-weight:300;font-size:1.5rem;letter-spacing:.35em;text-align:center;color:var(--text);outline:none;transition:border-color .2s;width:100%}
#intro-sms-code:focus{border-color:var(--accent)}
#intro-sms-back-row{display:flex;align-items:center}
#intro-sms-back{background:none;border:none;color:var(--muted);font-family:'Instrument Sans',sans-serif;font-size:.78rem;cursor:pointer;padding:0;transition:color .2s}
#intro-sms-back:hover{color:var(--accent)}
#intro-auth-send{background:var(--accent);color:var(--user-text);border:none;border-radius:10px;padding:.7rem;font-family:'Instrument Sans',sans-serif;font-weight:400;font-size:.9rem;cursor:pointer;width:100%;transition:opacity .2s}
#intro-auth-send:hover{opacity:.87}
#intro-auth-send:disabled{opacity:.4;cursor:default}
#intro-auth-feedback{font-size:.78rem;text-align:center;min-height:1.2em;color:var(--muted)}
.intro-login-privacy{font-size:.7rem;color:var(--muted);text-align:center;opacity:.6;margin:0}
/* BREATHING */
#intro-breathe-overlay{position:fixed;inset:0;z-index:100002;background:rgba(10,9,8,.97);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 16px 24px;overflow-y:auto}
.intro-light #intro-breathe-overlay{background:rgba(245,243,239,.97)}
#intro-breathe-overlay-close{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;color:var(--muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}
#intro-breathe-overlay-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
#intro-breathe-overlay-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-linecap:round}
#intro-breathe-overlay-title{font-family:'Bricolage Grotesque',serif;font-size:1.2rem;font-weight:300;letter-spacing:.12em;color:var(--text);margin-bottom:20px;margin-top:10px}
#intro-breathe-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px;padding-bottom:16px}
/* v8.28.0: .intro-breathe-card* removidas (substituídas pela tab Respirações).
O #intro-breathe-modal mantém-se, continua vivo. */
#intro-breathe-modal{position:fixed;inset:0;z-index:100004;background:radial-gradient(ellipse at 50% 50%,#1A150D 0%,#0F110E 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
#intro-breathe-close{position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.25);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}
#intro-breathe-close:hover{color:var(--text)}
#intro-breathe-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-linecap:round}
#intro-breathe-title{font-family:'Bricolage Grotesque',serif;font-size:1.4rem;font-weight:300;letter-spacing:.15em;color:rgba(255,255,255,.5);text-align:center}
#intro-breathe-circle-wrap{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center}
#intro-breathe-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.2);transition:transform 5s ease-in-out}
#intro-breathe-circle{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 5s ease-in-out;transform:scale(.3)}
#intro-breathe-phase{font-size:.75rem;color:var(--accent);letter-spacing:.12em;text-transform:lowercase}
#intro-breathe-count{font-family:'Bricolage Grotesque',serif;font-size:1.4rem;color:rgba(255,255,255,.7)}
#intro-breathe-desc{font-size:.82rem;color:rgba(255,255,255,.35);max-width:260px;text-align:center;line-height:1.5}
#intro-breathe-cycles{font-size:.75rem;color:rgba(255,255,255,.25);letter-spacing:.08em}
/* MOOD */
#metabolia-app[data-mood="crisis"]{--accent:#B08888}
#metabolia-app[data-mood="grief"]{--accent:#88A8B0}
#metabolia-app[data-mood="serene"]{--accent:#A8C4B0}
#metabolia-app.intro-light[data-mood="crisis"]{--accent:#B0483C}
#metabolia-app.intro-light[data-mood="grief"]{--accent:#3F7085}
#metabolia-app.intro-light[data-mood="serene"]{--accent:#2E7D5B}
#metabolia-app::before{transition:all 2s ease-in-out}
/* RESET CONFIRM */
#intro-reset-confirm-overlay{position:fixed;inset:0;z-index:100005;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;backdrop-filter:blur(4px)}
#intro-reset-confirm-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px 24px 20px;text-align:center;max-width:280px}
#intro-reset-confirm-box p{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:4px}
#intro-reset-confirm-box small{color:var(--muted);font-size:11px}
.intro-confirm-btns{display:flex;gap:8px;margin-top:16px}
.intro-confirm-btns button{flex:1;padding:8px;border-radius:10px;font-family:'Instrument Sans',sans-serif;font-size:12px;font-weight:300;cursor:pointer;transition:all .2s}
#intro-confirm-cancel{border:1px solid var(--border);background:none;color:var(--muted)}
#intro-confirm-ok{border:none;background:rgba(196,117,106,.15);color:#C4756A}
/* VOICE */
#metabolia-app.voice-listening::after{content:'';position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#C4756A,transparent);animation:listeningBar 1.5s ease-in-out infinite;z-index:100000;pointer-events:none}
@keyframes listeningBar{0%,100%{opacity:.3}50%{opacity:1}}
#intro-voice-controls{display:inline-flex;align-items:center;gap:.35rem;margin-left:.3rem}
#intro-voice-controls button{background:transparent;border:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:7px;transition:background .2s}
#intro-voice-controls button svg{width:14px;height:14px;stroke:var(--muted);transition:stroke .25s}
#intro-voice-controls button:hover svg{stroke:var(--accent)}
/* -- DIARY PANEL --------------------------------------------- */
#intro-diary-panel,#intro-settings-panel{
position:fixed;inset:0;z-index:100006;
background:rgba(10,9,8,.96);
display:flex;align-items:flex-end;justify-content:center;
animation:fadeIn .2s ease;
overflow-y:auto;
}
.intro-light #intro-diary-panel,.intro-light #intro-settings-panel{
background:rgba(245,243,239,.97);
}
#intro-diary-box,#intro-settings-box{
background:var(--card);border:1px solid var(--border);
border-radius:20px 20px 0 0;
width:100%;max-width:500px;
padding:20px 20px 32px;
max-height:92vh;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
animation:slideUp .25s ease;
box-shadow:0 -8px 40px rgba(0,0,0,.3);
}
#intro-diary-header,#intro-settings-header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:20px;
}
#intro-diary-header span,#intro-settings-header span{
font-family:'Bricolage Grotesque',serif;font-size:1.2rem;
font-weight:300;letter-spacing:.1em;color:var(--text);
}
#intro-diary-close,#intro-settings-close{
background:none;border:none;cursor:pointer;
color:var(--muted);width:28px;height:28px;
display:flex;align-items:center;justify-content:center;
border-radius:6px;transition:all .2s;
}
#intro-diary-close:hover,#intro-settings-close:hover{
color:var(--text);background:rgba(255,255,255,.06);
}
#intro-diary-close svg,#intro-settings-close svg{
width:15px;height:15px;stroke:currentColor;fill:none;stroke-linecap:round;
}
#intro-diary-content p,#intro-settings-content p{
font-size:.85rem;color:var(--muted);line-height:1.6;margin-bottom:.5rem;
}
/* -- TOOLBAR UPDATE ------------------------------------------ */
/* Remove old interpret wrap : now just toggles in a row */
#intro-interpret-wrap { display:none!important; }
#intro-bottom-bar { gap:6px; padding:4px 12px 6px; }
#intro-flow-toggle-wrap .intro-mini-slider--flow {
background:var(--muted-low);
}
input:checked + .intro-mini-slider--flow {
background:rgba(var(--accent-rgb),.7)!important;
}
#intro-tts-btn {
width:32px; height:32px; border-radius:50%;
background:rgba(255,255,255,.05); border:1px solid var(--border);
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:var(--muted); flex-shrink:0; transition:all .2s;
}
#intro-tts-btn:hover { border-color:var(--accent); color:var(--accent); }
#intro-tts-btn.active { background:var(--accentDim); color:var(--accent); border-color:var(--accent); }
#intro-tts-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; }
/* -- VOICE BANNER -------------------------------------------- */
#intro-voice-banner {
display:flex; align-items:center; gap:8px;
padding:7px 14px;
background:rgba(var(--accent-rgb),.1);
border-top:1px solid rgba(var(--accent-rgb),.2);
border-bottom:1px solid rgba(var(--accent-rgb),.1);
flex-shrink:0; z-index:10;
animation:fadeIn .2s ease;
}
#intro-voice-banner-dot {
width:7px; height:7px; border-radius:50%;
background:var(--accent); flex-shrink:0;
animation:bannerPulse 2s ease-in-out infinite;
}
@keyframes bannerPulse { 0%,100%{opacity:.5;transform:scale(.9)} 50%{opacity:1;transform:scale(1.1)} }
#intro-voice-banner-label {
font-size:12px; color:var(--accent); letter-spacing:.05em;
font-weight:300; flex-shrink:0;
}
#intro-voice-transcript {
display: none; /* substituído pela waveform reactiva */
}
/* v1.47.4: a onda (canvas) volta a faixa de leitura durante ouvir/ditar
(Parte 2 da fusao). Ja reage a voz da Flora e ao microfone; estava escondida
desde que a aura passou para os botoes. Layout afinado no fim do ficheiro. */
/* v8.30.0: controlos de leitura no banner (pausar, recomeçar, parar). */
#intro-voice-controls { display:flex; align-items:center; gap:.7rem; margin-left:auto; }
.intro-vc-btn {
display:flex; flex-direction:column; align-items:center; gap:.2rem;
background:none; border:none; cursor:pointer;
color:var(--text); font-family:inherit; font-size:.64rem; letter-spacing:.02em;
padding:0; flex-shrink:0;
}
.intro-vc-btn svg {
width:40px; height:40px; padding:10px; box-sizing:border-box;
border:1.5px solid var(--border); border-radius:50%;
background:var(--surface); color:var(--text);
transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.intro-vc-btn:active svg { transform:scale(.92); }
.intro-vc-lbl { color:var(--muted); }
.intro-vc-btn--stop svg { border-color:rgba(210,85,74,.5); color:#d2554a; background:rgba(210,85,74,.12); }
.intro-vc-btn--stop:active svg { background:rgba(210,85,74,.25); }
/* Pausar e recomeçar só fazem sentido quando a Flora FALA. No modo "ouvir"
(a captar a tua voz), só aparece o parar. */
#intro-voice-banner:not(.speaking) #intro-vc-pause,
#intro-voice-banner:not(.speaking) #intro-vc-restart { display:none; }
#intro-voice-banner-stop {
width:44px; height:44px; border-radius:10px; flex-shrink:0;
background:rgba(196,117,106,.15); border:1px solid rgba(196,117,106,.3);
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:#C4756A; transition:all .2s;
pointer-events:auto !important;
-webkit-tap-highlight-color: rgba(196,117,106,.4);
position:relative;
z-index: 100;
/* isolate: cria um stacking context próprio para garantir que nada por cima */
isolation:isolate;
/* desabilita selection que pode capturar touch em mobile */
-webkit-user-select:none; user-select:none;
-webkit-touch-callout:none;
}
#intro-voice-banner-stop:hover { background:rgba(196,117,106,.3); }
#intro-voice-banner-stop:active { background:rgba(196,117,106,.5); transform:scale(.94); }
#intro-voice-banner-stop svg { width:16px; height:16px; pointer-events:none; }
/* Banner states */
#intro-voice-banner.speaking #intro-voice-banner-label { color:rgba(232,227,218,.6); }
#intro-voice-banner.speaking #intro-voice-banner-dot { background:rgba(232,227,218,.4); animation:none; }
/* -- TOGGLE GROUPS WITH LABELS ------------------------------- */
.intro-tgl-group{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.intro-tgl-label{font-size:9px;color:var(--muted);letter-spacing:.05em;text-align:center;line-height:1;white-space:nowrap}
/* -- SETTINGS PANEL (full) ----------------------------------- */
.ia-s-section{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.5rem 0 .3rem;border-top:1px solid var(--border);margin-top:.6rem}
.ia-s-section:first-child{border-top:none;margin-top:0}
.ia-s-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:.55rem 0}
.ia-s-row-info{flex:1;display:flex;flex-direction:column;gap:3px}
.ia-s-label{font-size:13px;color:var(--text);font-weight:300}
.ia-s-desc{font-size:11px;color:var(--muted);line-height:1.4}
.ia-s-speed-row{display:flex;gap:8px;padding:.4rem 0}
.ia-s-speed{flex:1;padding:7px 0;border-radius:8px;border:1px solid var(--border);background:none;color:var(--muted);font-family:'Instrument Sans',sans-serif;font-size:12px;font-weight:300;cursor:pointer;transition:all .18s}
.ia-s-speed:hover{border-color:var(--accent);color:var(--accent)}
.ia-s-speed--active{background:var(--accent-dim)!important;border-color:var(--accent)!important;color:var(--accent)!important;font-weight:400}
.ia-s-placeholder{font-size:12px;color:var(--muted);line-height:1.6;padding:.3rem 0 .5rem}
.ia-s-credits-row{justify-content:center;padding:.3rem 0}
#ia-s-credits-display{font-size:12px;color:var(--muted)}
.ia-s-logout-btn{width:100%;padding:9px;margin-top:.5rem;border-radius:10px;border:1px solid var(--border);background:none;color:var(--muted);font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:300;cursor:pointer;transition:all .2s}
.ia-s-logout-btn:hover{border-color:#C4756A;color:#C4756A}
.ia-s-credits-row .ia-s-label{font-size:12px}
/* -- MIC PILL ------------------------------------------------ */
#intro-mic-btn.intro-mic-pill {
width:auto!important; height:32px; border-radius:100px;
background:rgba(255,255,255,.05); border:1px solid var(--border);
display:flex!important; align-items:center; gap:7px;
padding:0 12px 0 9px; cursor:pointer; color:var(--muted);
font-family:'Instrument Sans',sans-serif; font-size:12px; font-weight:300;
letter-spacing:.03em; transition:all .2s;
}
#intro-mic-btn.intro-mic-pill:hover { border-color:var(--accent); color:var(--accent); }
#intro-mic-btn.intro-mic-pill.recording {
background:rgba(196,117,106,.12); border-color:#C4756A; color:#C4756A;
animation:micPulse 1.5s ease-in-out infinite;
}
@keyframes micPulse { 0%,100%{box-shadow:0 0 0 0 rgba(196,117,106,.0)} 50%{box-shadow:0 0 0 4px rgba(196,117,106,.18)} }
#intro-mic-btn.intro-mic-pill svg { width:13px; height:13px; flex-shrink:0; }
/* -- PER-MESSAGE SPEAK BUTTON -------------------------------- */
.intro-msg-action--speak { opacity:.7; } /* always visible */
.intro-msg-action--speak svg { stroke:currentColor; }
.intro-msg-action--speak.playing { color:var(--accent)!important; opacity:1!important; }
/* -- VOICE BANNER SOUND BARS -------------------------------- */
#intro-voice-banner-dot { display:none; } /* replaced by bars */
#intro-voice-bars {
display:flex; align-items:center; gap:3px; height:20px; flex-shrink:0;
}
.vb {
display:block; width:3px; border-radius:2px;
background:var(--accent); opacity:.7;
animation:vbar 1.1s ease-in-out infinite;
transform-origin:bottom;
}
.vb:nth-child(1){height:6px; animation-delay:0s}
.vb:nth-child(2){height:14px; animation-delay:.15s}
.vb:nth-child(3){height:20px; animation-delay:.3s}
.vb:nth-child(4){height:10px; animation-delay:.45s}
.vb:nth-child(5){height:6px; animation-delay:.6s}
@keyframes vbar{
0%,100%{transform:scaleY(.3);opacity:.4}
50% {transform:scaleY(1); opacity:.9}
}
/* Pulse bars faster when speech detected */
#intro-voice-banner.speaking-detected .vb { animation-duration:.35s; }
/* Banner label style update */
#intro-voice-banner { gap:10px; }
#intro-voice-banner-label { font-size:11px; }
/* -- VOICE WAVE CANVAS --------------------------------------- */
#intro-voice-wave {
flex: 1 1 auto;
min-width: 0;
height: 24px;
opacity: .9;
display: block;
}
/* Remove old .vb bar rules if present */
.vb { display: none !important; }
#intro-voice-bars { display: none !important; }
/* -- PILL TTS STATE (Flora a falar) --------------------------- */
#intro-mic-btn.pill-speaking {
background: rgba(var(--accent-rgb),.12) !important;
border-color: rgba(var(--accent-rgb),.4) !important;
cursor: default;
gap: 0;
padding: 0 14px;
}
.pill-wave-bars {
display: flex;
align-items: center;
gap: 3px;
height: 100%;
padding: 7px 0;
}
.pwb {
width: 3px;
border-radius: 2px;
background: rgba(var(--accent-rgb),.8);
animation: pwbAnim 1s ease-in-out infinite;
transform-origin: bottom center;
}
.pwb:nth-child(1) { height: 4px; animation-delay: 0s; }
.pwb:nth-child(2) { height: 10px; animation-delay: .1s; }
.pwb:nth-child(3) { height: 7px; animation-delay: .2s; }
.pwb:nth-child(4) { height: 14px; animation-delay: .3s; }
.pwb:nth-child(5) { height: 9px; animation-delay: .15s; }
.pwb:nth-child(6) { height: 12px; animation-delay: .25s; }
.pwb:nth-child(7) { height: 6px; animation-delay: .05s; }
.pwb:nth-child(8) { height: 10px; animation-delay: .35s; }
@keyframes pwbAnim {
0%, 100% { transform: scaleY(.35); opacity:.5; }
50% { transform: scaleY(1); opacity:1; }
}
/* -- PILL SPEAKING STATE ------------------------------------ */
.pill-normal-content { display:flex; align-items:center; gap:7px; }
.pill-wave-bars { display:none; align-items:center; gap:3px; padding:0 2px; }
.intro-mic-pill.pill-speaking { pointer-events:none; border-color:rgba(var(--accent-rgb),.35)!important; }
.intro-mic-pill.pill-speaking .pill-normal-content { display:none; }
.intro-mic-pill.pill-speaking .pill-wave-bars { display:flex; }
/* -- VOICE BANNER WAVE (CSS animated) ----------------------- */
/* Pill waveform : hides mic icon and label, shows canvas */
#intro-mic-btn { position: relative; }
#intro-mic-btn.pill-wave-active svg,
#intro-mic-btn.pill-wave-active .pill-label { display: none !important; }
#intro-mic-btn.pill-wave-active { padding: 6px 18px; }
#intro-pill-wave { vertical-align: middle; }
/* ============================================================ */
/* MODO + PESSOAS + BETA (v6.3) */
/* ============================================================ */
/* Botão modo no rodapé */
#intro-mode-btn{
display:flex;align-items:center;gap:6px;
background:none;border:none;cursor:pointer;
color:var(--accent);font-family:'Instrument Sans',sans-serif;font-weight:300;font-size:11px;
letter-spacing:.03em;padding:3px 8px;border-radius:8px;
transition:background .18s,color .18s;flex-shrink:0;
}
#intro-mode-btn:hover{background:var(--accent-dim)}
#intro-mode-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;flex-shrink:0}
#intro-mode-label{font-weight:400;text-transform:lowercase}
/* Modo modal */
#intro-mode-modal{
position:fixed;inset:0;z-index:100004;
background:rgba(10,9,8,.85);
display:flex;align-items:center;justify-content:center;
padding:20px;animation:fadeIn .2s ease;
}
.intro-light #intro-mode-modal{background:rgba(245,243,239,.85)}
.intro-mode-box{
background:var(--card);border:1px solid var(--border);border-radius:14px;
padding:1.4rem 1.2rem;max-width:420px;width:100%;
position:relative;box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.intro-mode-close{
position:absolute;top:.6rem;right:.6rem;background:none;border:none;cursor:pointer;
color:var(--muted);width:28px;height:28px;display:flex;align-items:center;justify-content:center;
}
.intro-mode-close svg{width:14px;height:14px;stroke:currentColor;fill:none}
.intro-mode-title{
font-family:'Bricolage Grotesque',serif;font-weight:300;
font-size:1.15rem;color:var(--text);margin:0 0 1rem;line-height:1.3;
}
.intro-mode-option{
display:flex;align-items:flex-start;gap:12px;width:100%;
background:none;border:1px solid var(--border);border-radius:10px;
padding:11px 12px;margin-bottom:.5rem;cursor:pointer;text-align:left;
transition:border-color .18s,background .18s;color:var(--text);font-family:inherit;
}
.intro-mode-option:hover{border-color:var(--accent);background:var(--accent-dim)}
.intro-mode-option.active{border-color:var(--accent);background:var(--accent-dim)}
.intro-mode-option-icon{
width:30px;height:30px;flex-shrink:0;color:var(--accent);
display:flex;align-items:center;justify-content:center;
}
.intro-mode-option-icon svg{width:18px;height:18px;stroke:currentColor;fill:none}
.intro-mode-option-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.intro-mode-option-name{font-size:.92rem;color:var(--text);font-weight:400}
.intro-mode-option-desc{font-size:.74rem;color:var(--muted);line-height:1.4}
.intro-mode-foot{font-size:.7rem;color:var(--muted);margin:.6rem 0 0;text-align:center}
/* Settings: radio de modos */
.ia-s-mode-row{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}
.ia-s-mode{
display:flex;align-items:flex-start;gap:10px;padding:.5rem;
border:1px solid var(--border);border-radius:8px;cursor:pointer;
background:var(--surface);
transition:border-color .18s,background .18s;
}
.ia-s-mode:hover{border-color:var(--accent);background:var(--accent-dim)}
.ia-s-mode:has(input:checked){border-color:var(--accent);background:var(--accent-dim)}
.ia-s-mode input[type="radio"]{flex-shrink:0;margin-top:3px;accent-color:var(--accent)}
.ia-s-mode-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ia-s-mode-label{font-size:.85rem;color:var(--text);font-weight:400}
.ia-s-mode-desc{font-size:.7rem;color:var(--muted);line-height:1.4}
/* People panel */
#intro-people-panel{
position:fixed;inset:0;z-index:100008;
background:var(--bg);display:flex;flex-direction:column;
animation:fadeIn .2s ease;
}
.intro-people-box{
display:flex;flex-direction:column;width:100%;height:100%;max-width:560px;margin:0 auto;
padding:0 1rem;
}
.intro-people-header{
display:flex;align-items:center;justify-content:space-between;
padding:1rem 0 .6rem;
font-family:'Bricolage Grotesque',serif;font-size:1.2rem;font-weight:300;
letter-spacing:.05em;color:var(--text);
border-bottom:1px solid var(--border);
}
#intro-people-close{background:none;border:none;cursor:pointer;color:var(--muted);padding:6px}
#intro-people-close svg{width:16px;height:16px;stroke:currentColor;fill:none}
.intro-people-intro{font-size:.78rem;color:var(--muted);padding:.8rem 0;line-height:1.5}
.intro-people-add{
background:var(--accent-dim);color:var(--accent);border:1px dashed var(--accent);
border-radius:10px;padding:9px;font-family:inherit;font-size:.85rem;
cursor:pointer;margin-bottom:.6rem;transition:background .18s;
}
.intro-people-add:hover{background:var(--accent);color:var(--user-text)}
#intro-people-list{flex:1;overflow-y:auto;padding-bottom:2rem}
.intro-people-group{margin-bottom:1rem}
.intro-people-group-label{
font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
color:var(--muted);padding:.5rem 0 .3rem;
}
.intro-person-row{
display:flex;align-items:center;gap:10px;padding:.7rem .5rem;
border:1px solid var(--border);border-radius:9px;margin-bottom:.35rem;
background:var(--card);cursor:pointer;transition:border-color .18s;
}
.intro-person-row:hover{border-color:var(--accent)}
.intro-person-row-name{flex:1;min-width:0;font-size:.88rem;color:var(--text)}
.intro-person-row-deceased{color:var(--accent);font-size:.75rem;margin-left:.4rem;opacity:.7}
.intro-person-row-sub{font-size:.72rem;color:var(--muted);display:block;margin-top:1px}
.intro-empty{color:var(--muted);font-size:.85rem;text-align:center;padding:2rem 0}
/* Person edit modal */
#intro-person-modal{
position:fixed;inset:0;z-index:100009;background:rgba(10,9,8,.85);
display:flex;align-items:center;justify-content:center;
padding:20px;animation:fadeIn .2s ease;
}
.intro-light #intro-person-modal{background:rgba(245,243,239,.85)}
.intro-person-box{
background:var(--card);border:1px solid var(--border);border-radius:14px;
padding:1.2rem;max-width:440px;width:100%;
max-height:90vh;overflow-y:auto;
}
.intro-person-header{
display:flex;align-items:center;justify-content:space-between;
padding-bottom:.7rem;border-bottom:1px solid var(--border);margin-bottom:.8rem;
font-family:'Bricolage Grotesque',serif;font-size:1.1rem;font-weight:300;color:var(--text);
}
#intro-person-close{background:none;border:none;cursor:pointer;color:var(--muted);padding:6px}
#intro-person-close svg{width:14px;height:14px;stroke:currentColor;fill:none}
.intro-person-field{display:block;margin-bottom:.7rem}
.intro-person-label{display:block;font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
.intro-person-field input,
.intro-person-field select,
.intro-person-field textarea{
width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;
padding:8px 10px;color:var(--text);font-family:inherit;font-size:.88rem;
outline:none;transition:border-color .18s;
}
.intro-person-field input:focus,
.intro-person-field select:focus,
.intro-person-field textarea:focus{border-color:var(--accent)}
.intro-person-field textarea{resize:vertical;min-height:60px}
.intro-person-check{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text);margin-bottom:.7rem;cursor:pointer}
.intro-person-check input{accent-color:var(--accent);width:16px;height:16px}
.intro-person-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--border)}
.intro-person-btn{
padding:8px 16px;border-radius:8px;font-family:inherit;font-size:.85rem;font-weight:400;
cursor:pointer;border:1px solid var(--border);background:none;color:var(--text);
transition:all .18s;
}
.intro-person-btn--primary{background:var(--accent);color:var(--user-text);border-color:var(--accent)}
.intro-person-btn--primary:hover{opacity:.9}
.intro-person-btn--danger{color:#C4756A;border-color:#C4756A}
.intro-person-btn--danger:hover{background:rgba(196,117,106,.1)}
/* Beta modal */
#intro-beta-modal{
position:fixed;inset:0;z-index:100006;background:rgba(10,9,8,.92);
display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .25s ease;
}
.intro-beta-box{
background:var(--card);border:1px solid var(--border);border-radius:14px;
padding:1.6rem 1.3rem;max-width:440px;width:100%;
text-align:center;
}
.intro-beta-title{font-family:'Bricolage Grotesque',serif;font-weight:300;font-size:1.5rem;color:var(--text);margin:0 0 1rem;letter-spacing:.08em}
.intro-beta-text{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0 0 1rem;text-align:left}
.intro-beta-actions{display:flex;gap:.7rem;justify-content:center;margin-top:1.4rem}
.intro-beta-btn{padding:10px 18px;border-radius:9px;font-family:inherit;font-size:.88rem;cursor:pointer;transition:all .18s}
.intro-beta-btn--primary{background:var(--accent);color:var(--user-text);border:1px solid var(--accent)}
.intro-beta-btn--ghost{background:none;color:var(--muted);border:1px solid var(--border)}
.intro-beta-btn--ghost:hover{color:var(--text);border-color:var(--text)}
/* Diary entry actions */
.intro-diary-entry{
background:var(--card);border:1px solid var(--border);border-radius:11px;
padding:.9rem .9rem .7rem;margin-bottom:.6rem;
}
.intro-diary-entry-date{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}
.intro-diary-entry-emotions{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.5rem}
.intro-diary-tag{
background:var(--accent-dim);color:var(--accent);
padding:2px 8px;border-radius:99px;font-size:.7rem;letter-spacing:.02em;
}
.intro-diary-entry-summary{font-size:.85rem;color:var(--text);line-height:1.5;margin-bottom:.6rem}
.intro-diary-entry-actions{display:flex;gap:.5rem;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:.5rem}
.intro-diary-btn{
background:none;border:1px solid var(--border);border-radius:7px;
padding:5px 10px;font-size:.72rem;color:var(--muted);
font-family:inherit;cursor:pointer;transition:all .18s;
}
.intro-diary-btn:hover{border-color:var(--accent);color:var(--accent)}
.intro-diary-btn--danger:hover{border-color:#C4756A;color:#C4756A}
.intro-diary-delete-all{
display:block;width:100%;text-align:center;padding:.6rem;margin:.8rem 0;
background:none;border:1px solid #C4756A;border-radius:8px;
color:#C4756A;font-family:inherit;font-size:.78rem;cursor:pointer;transition:all .18s;
}
.intro-diary-delete-all:hover{background:rgba(196,117,106,.1)}
/* ============================================================ */
/* COMPRA DE CRÉDITOS (v6.5) */
/* ============================================================ */
#intro-buy-modal{
position:fixed;inset:0;z-index:100007;background:rgba(10,9,8,.88);
display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeIn .2s ease;
}
.intro-light #intro-buy-modal{background:rgba(245,243,239,.88)}
.intro-buy-box{
background:var(--card);border:1px solid var(--border);border-radius:16px;
padding:1.5rem 1.3rem;max-width:480px;width:100%;
max-height:92vh;overflow-y:auto;position:relative;
box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.intro-buy-close{
position:absolute;top:.7rem;right:.7rem;background:none;border:none;cursor:pointer;
color:var(--muted);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;
}
.intro-buy-close:hover{background:var(--accent-dim);color:var(--accent)}
.intro-buy-close svg{width:14px;height:14px;stroke:currentColor;fill:none}
.intro-buy-back{
background:none;border:none;cursor:pointer;color:var(--muted);
padding:4px;margin:0 0 .8rem -4px;display:flex;align-items:center;gap:4px;font-family:inherit;font-size:.78rem;
}
.intro-buy-back svg{width:16px;height:16px;stroke:currentColor;fill:none}
.intro-buy-back:hover{color:var(--accent)}
.intro-buy-title{
font-family:'Bricolage Grotesque',serif;font-weight:300;
font-size:1.4rem;color:var(--text);margin:0 0 .3rem;line-height:1.25;letter-spacing:.02em;
}
.intro-buy-sub{color:var(--muted);font-size:.85rem;line-height:1.5;margin:0 0 1.2rem}
.intro-buy-help{
background:var(--surface);border-radius:9px;padding:.7rem .8rem;margin-top:1rem;
font-size:.72rem;color:var(--muted);line-height:1.55;
}
.intro-buy-help strong{color:var(--text);font-weight:400}
/* Pacote cards */
#intro-buy-packs{display:flex;flex-direction:column;gap:.5rem}
.intro-pack{
display:flex;align-items:center;gap:14px;
background:var(--bg);border:1px solid var(--border);border-radius:11px;
padding:.85rem 1rem;cursor:pointer;font-family:inherit;text-align:left;color:var(--text);width:100%;
transition:border-color .18s,background .18s,transform .12s;
}
.intro-pack:hover{border-color:var(--accent);background:var(--accent-dim)}
.intro-pack:active{transform:scale(.99)}
.intro-pack-amount{font-family:'Bricolage Grotesque',serif;font-size:1.5rem;font-weight:400;color:var(--accent);min-width:54px;letter-spacing:.01em}
.intro-pack-info{flex:1;min-width:0}
.intro-pack-credits{font-size:.92rem;color:var(--text);font-weight:400}
.intro-pack-bonus{
background:var(--accent-dim);color:var(--accent);padding:2px 7px;border-radius:99px;
font-size:.66rem;margin-left:.4rem;letter-spacing:.04em;text-transform:uppercase;font-weight:500;vertical-align:middle;
}
.intro-pack-desc{font-size:.72rem;color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.intro-pack-arrow{color:var(--muted);flex-shrink:0}
.intro-pack-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none}
.intro-pack:hover .intro-pack-arrow{color:var(--accent)}
/* Confirm step */
.intro-buy-selected{
background:var(--surface);border-radius:9px;padding:.7rem .9rem;margin-bottom:1rem;
font-size:.85rem;color:var(--text);
}
.intro-buy-selected strong{color:var(--accent);font-weight:500}
.intro-buy-field{display:block;margin-bottom:.4rem}
.intro-buy-field span{display:block;font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
.intro-buy-field input{
width:100%;background:var(--bg);border:1px solid var(--border);border-radius:9px;
padding:11px 14px;color:var(--text);font-family:inherit;font-size:1rem;letter-spacing:.04em;
outline:none;transition:border-color .18s;
}
.intro-buy-field input:focus{border-color:var(--accent)}
.intro-buy-hint{font-size:.72rem;color:var(--muted);display:block;margin-bottom:1.2rem;letter-spacing:.01em}
.intro-buy-confirm{
width:100%;background:var(--accent);color:var(--user-text);border:none;border-radius:11px;
padding:13px;font-family:inherit;font-size:.95rem;font-weight:400;letter-spacing:.02em;cursor:pointer;
transition:opacity .18s,transform .12s;
}
.intro-buy-confirm:hover{opacity:.92}
.intro-buy-confirm:active{transform:scale(.99)}
.intro-buy-confirm:disabled{opacity:.5;cursor:not-allowed}
.intro-buy-ghost{
width:100%;background:none;color:var(--muted);border:1px solid var(--border);border-radius:11px;
padding:10px;font-family:inherit;font-size:.85rem;cursor:pointer;margin-top:.7rem;
transition:color .18s,border-color .18s;
}
.intro-buy-ghost:hover{color:var(--text);border-color:var(--text)}
.intro-buy-error{color:#C4756A;font-size:.8rem;margin-top:.7rem;text-align:center;min-height:1em}
/* Waiting step */
.intro-buy-pulse{position:relative;width:120px;height:120px;margin:1.5rem auto 1.8rem}
.intro-buy-pulse-ring{
position:absolute;inset:0;border:2px solid var(--accent);border-radius:50%;
animation:introPulseRing 1.8s ease-out infinite;
}
.intro-buy-pulse-core{
position:absolute;inset:40px;border-radius:50%;background:var(--accent);opacity:.6;
animation:introPulseCore 1.8s ease-in-out infinite;
}
@keyframes introPulseRing{
0%{transform:scale(.5);opacity:1}
100%{transform:scale(1.4);opacity:0}
}
@keyframes introPulseCore{
0%,100%{transform:scale(1);opacity:.6}
50%{transform:scale(1.15);opacity:.9}
}
.intro-buy-countdown{text-align:center;color:var(--muted);font-size:.85rem;margin:.5rem 0 1.2rem;letter-spacing:.06em}
.intro-buy-countdown span{color:var(--accent);font-weight:500}
/* Success step */
.intro-buy-check{width:80px;height:80px;margin:1.5rem auto;color:var(--accent)}
.intro-buy-check svg{width:100%;height:100%;stroke:currentColor;fill:none}
.intro-buy-cross{width:80px;height:80px;margin:1.5rem auto;color:#C4756A}
.intro-buy-cross svg{width:100%;height:100%;stroke:currentColor;fill:none}
/* Low balance banner (futuro) */
.intro-low-balance{
background:var(--accent-dim);color:var(--accent);
padding:8px 12px;border-radius:9px;font-size:.78rem;
display:flex;align-items:center;justify-content:space-between;gap:.6rem;
margin:.5rem 12px;
}
.intro-low-balance button{
background:var(--accent);color:var(--user-text);border:none;border-radius:7px;
padding:5px 11px;font-size:.75rem;cursor:pointer;font-family:inherit;
}
/* ============================================================ */
/* DESKTOP CENTRADO (v6.5.1) - foco na conversa, sem cabeça a girar */
/* ============================================================ */
@media (min-width: 900px) {
/* O app fica fullscreen mas o conteúdo central limita-se a ~580px e centra. */
#intro-header,
#intro-depth,
#intro-tabs,
#intro-voice-banner,
#intro-incognito-banner,
#intro-view-resumos,
#intro-view-breath,
#intro-view-medit,
#intro-view-sons,
#intro-messages,
#intro-chips-row,
#intro-input-area,
#intro-v8-bar,
#intro-v8-bar-anon,
#intro-bottom-bar,
#intro-action-row,
#intro-footer {
max-width: 640px;
margin-left: auto;
margin-right: auto;
width: 100%;
box-sizing: border-box;
}
/* Aumentar tamanho de texto e respiração no desktop */
#metabolia-app { font-size: 15px; }
.intro-msg__text { font-size: 14.5px; max-width: 78% }
/* Botões de navegação (setas) ficam fora da coluna central */
#intro-nav {
right: max(16px, calc((100vw - 640px) / 2 - 60px));
}
}
@media (min-width: 1280px) {
/* Em ecrãs muito largos, ainda mais focado. */
#intro-header,
#intro-depth,
#intro-tabs,
#intro-voice-banner,
#intro-incognito-banner,
#intro-view-resumos,
#intro-view-breath,
#intro-view-medit,
#intro-view-sons,
#intro-messages,
#intro-chips-row,
#intro-input-area,
#intro-v8-bar,
#intro-v8-bar-anon,
#intro-bottom-bar,
#intro-action-row,
#intro-footer {
max-width: 680px;
}
/* Vinhete subtil à volta para focar mais */
#metabolia-app::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: radial-gradient(ellipse 50% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.25) 100%);
}
.intro-light #metabolia-app::after {
background: radial-gradient(ellipse 50% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.06) 100%);
}
}
/* ============================================================ */
/* APOIO À LEITURA + CHEVRON "HÁ MAIS" (v6.7) */
/* ============================================================ */
/* Sentinel invisível no fundo da lista para detecção de scroll */
#intro-msg-sentinel{
width:1px;height:1px;visibility:hidden;flex-shrink:0;
}
/* Palavras envolvidas em spans durante TTS */
.intro-msg__text .iw{
display:inline;
transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.intro-msg__text .iw.iw-active{
color:var(--accent);
border-bottom:1.5px solid var(--accent);
padding-bottom:1px;
}
.intro-light .intro-msg__text .iw.iw-active{
color:var(--accent);
border-bottom-color:var(--accent);
}
/* Sobrepor em mensagens do utilizador (que têm fundo accent) : alto contraste */
.intro-msg--user .intro-msg__text .iw.iw-active{
color:var(--user-text);
background:rgba(0,0,0,.12);
border-bottom-color:transparent;
border-radius:3px;
padding:0 2px;
}
/* Chevron "há mais para baixo" */
#intro-scroll-hint{
position:absolute;
left:50%;
bottom:118px; /* acima do input/bottom-bar */
transform:translateX(-50%);
width:42px;height:42px;
background:var(--card);
border:1px solid var(--border);
border-radius:50%;
color:var(--accent);
cursor:pointer;
display:none;align-items:center;justify-content:center;
box-shadow:0 4px 16px rgba(0,0,0,.25);
z-index:99;
opacity:.85;
transition:opacity .2s ease, transform .2s ease, background .15s ease;
animation:hintPulse 2.4s ease-in-out infinite;
}
#intro-scroll-hint:hover{
opacity:1;
background:var(--accent-dim);
transform:translateX(-50%) translateY(2px);
}
#intro-scroll-hint svg{width:18px;height:18px;stroke:currentColor;fill:none}
@keyframes hintPulse{
0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(3px)}
}
/* Em desktop com layout central, o chevron ajusta ao container */
@media (min-width:900px){
#intro-scroll-hint{
left:50%;
bottom:130px;
}
}
/* No mobile com bottom-bar visível, subir um pouco */
@media (max-width:480px){
#intro-scroll-hint{bottom:140px}
}
/* ============================================================ */
/* ACESSIBILIDADE : v6.8 */
/* ============================================================ */
/* Painel de acessibilidade (igual ao settings, ergonomia bottom-sheet) */
#intro-a11y-panel{
position:fixed;inset:0;z-index:100007;
background:rgba(10,9,8,.96);
display:flex;align-items:flex-end;justify-content:center;
animation:fadeIn .2s ease;
overflow-y:auto;
}
.intro-a11y-box{
background:var(--card);border:1px solid var(--border);
border-radius:20px 20px 0 0;
width:100%;max-width:500px;
padding:20px 20px 32px;
max-height:92vh;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
animation:slideUp .25s ease;
}
.intro-a11y-header{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:1rem;
font-family:'Bricolage Grotesque',serif;
font-size:1.4rem;font-weight:300;letter-spacing:.06em;
color:var(--text);
text-transform:uppercase;
}
#intro-a11y-close{
background:transparent;border:none;color:var(--muted);
width:36px;height:36px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
transition:background .15s;
}
#intro-a11y-close:hover{background:var(--border)}
#intro-a11y-close svg{width:20px;height:20px}
.intro-a11y-section{
font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);font-weight:500;
margin:1.3rem 0 .6rem;
padding-bottom:.3rem;
border-bottom:1px solid var(--border);
}
.intro-a11y-row{
display:flex;align-items:center;justify-content:space-between;
gap:1rem;padding:.7rem 0;
}
.intro-a11y-row-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.intro-a11y-label{font-size:.95rem;color:var(--text);font-weight:400}
.intro-a11y-desc{font-size:.78rem;color:var(--muted);line-height:1.4}
/* Grupo de tamanho de texto */
.intro-a11y-fontsize-group{
display:flex;gap:.4rem;align-items:center;
}
.intro-a11y-fontbtn{
width:44px;height:44px;
background:transparent;
border:1px solid var(--border);
border-radius:10px;
color:var(--text);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-family:Georgia,serif;font-weight:400;
font-size:1rem;
transition:all .15s;
}
.intro-a11y-fontbtn--lg{font-size:1.25rem}
.intro-a11y-fontbtn--xl{font-size:1.55rem}
.intro-a11y-fontbtn:hover{background:var(--border)}
.intro-a11y-fontbtn.active{
background:var(--accent);
border-color:var(--accent);
color:var(--card);
}
/* 3 níveis de tamanho de texto aplicados a #metabolia-app */
#metabolia-app.intro-fs-md .intro-msg__text{font-size:15px;line-height:1.55}
#metabolia-app.intro-fs-lg .intro-msg__text{font-size:18px;line-height:1.55}
#metabolia-app.intro-fs-xl .intro-msg__text{font-size:22px;line-height:1.50}
@media (max-width:600px){
#metabolia-app.intro-fs-md .intro-msg__text{font-size:14px}
#metabolia-app.intro-fs-lg .intro-msg__text{font-size:16.5px}
#metabolia-app.intro-fs-xl .intro-msg__text{font-size:20px}
}
/* Contraste reforçado */
#metabolia-app.intro-a11y-contrast-on{
--bg:#000000 !important;
--card:#000000 !important;
--text:#FFFFFF !important;
--muted:#D8D5CE !important;
--border:#FFFFFF !important;
--user-bg:#FFFFFF !important;
--user-text:#000000 !important;
--flora-bg:#000000 !important;
--flora-border:#FFFFFF !important;
}
#metabolia-app.intro-a11y-contrast-on .intro-msg--assistant{
background:#000000 !important;
border:1.5px solid #FFFFFF !important;
color:#FFFFFF !important;
}
#metabolia-app.intro-a11y-contrast-on .intro-msg--user{
background:#FFFFFF !important;
color:#000000 !important;
}
/* v1.48.75: no tema claro o contraste reforcado NAO herda o preto do escuro (o
bug que o Jonas apanhou). Ganha rampa propria, branco e preto puros, com
especificidade maior (mais uma classe) para vencer o bloco de cima. */
#metabolia-app.intro-a11y-contrast-on.intro-light{
--bg:#FFFFFF !important;
--card:#FFFFFF !important;
--text:#000000 !important;
--muted:#262626 !important;
--border:#000000 !important;
--user-bg:#000000 !important;
--user-text:#FFFFFF !important;
--flora-bg:#FFFFFF !important;
--flora-border:#000000 !important;
}
#metabolia-app.intro-a11y-contrast-on.intro-light .intro-msg--assistant{
background:#FFFFFF !important;
border:1.5px solid #000000 !important;
color:#000000 !important;
}
#metabolia-app.intro-a11y-contrast-on.intro-light .intro-msg--user{
background:#000000 !important;
color:#FFFFFF !important;
}
/* Modo foco: esconder elementos secundários */
#metabolia-app.intro-a11y-focus-on #intro-chips-row,
#metabolia-app.intro-a11y-focus-on #intro-action-row,
#metabolia-app.intro-a11y-focus-on #intro-footer{
display:none !important;
}
/* ============================================================ */
/* RESPIRAÇÃO : v6.8 (refeita) */
/* ============================================================ */
#intro-breathe-topbar{
position:absolute;top:16px;right:16px;z-index:2;
display:flex;justify-content:flex-end;
}
#intro-breathe-close{
width:48px;height:48px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
color:var(--text);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s, transform .15s;
}
#intro-breathe-close:hover{
background:rgba(255,255,255,.12);
transform:scale(1.05);
}
#intro-breathe-close svg{width:22px;height:22px}
#intro-breathe-modal #intro-breathe-title{
font-family:'Bricolage Grotesque',serif;
font-weight:300;letter-spacing:.12em;
text-transform:uppercase;
color:var(--text);
font-size:1.4rem;
text-align:center;
margin-top:6vh;
opacity:.85;
}
#intro-breathe-circle-wrap{
position:relative;
width:280px;height:280px;
margin:6vh auto 4vh;
display:flex;align-items:center;justify-content:center;
}
@media (max-height:700px){
#intro-breathe-circle-wrap{margin:3vh auto;width:230px;height:230px}
}
#intro-breathe-ring{
position:absolute;inset:0;
border:1px solid rgba(var(--accent-rgb),.22);
border-radius:50%;
transform:scale(0.95);
transition:transform 1s ease;
}
#intro-breathe-circle{
position:relative;
width:200px;height:200px;
border-radius:50%;
background:radial-gradient(circle, var(--breath-accent, var(--accent)) 0%, rgba(var(--accent-rgb),.15) 65%, transparent 100%);
transform:scale(0.6);
transition:transform 1s ease-in-out;
display:flex;flex-direction:column;align-items:center;justify-content:center;
box-shadow:0 0 40px rgba(var(--accent-rgb),.15);
}
@media (max-height:700px){
#intro-breathe-circle{width:160px;height:160px}
}
#intro-breathe-count{
font-family:'Instrument Sans',sans-serif;
font-weight:300;
font-size:.95rem;
color:rgba(255,255,255,.55);
letter-spacing:.05em;
margin-bottom:.3rem;
}
#intro-breathe-phase{
font-family:'Bricolage Grotesque',serif;
font-weight:300;
font-size:2rem;
letter-spacing:.12em;
color:rgba(255,255,255,.92);
text-transform:lowercase;
transition:opacity .3s;
}
@media (max-height:700px){
#intro-breathe-phase{font-size:1.6rem}
}
#intro-breathe-desc{
text-align:center;
color:var(--muted);
font-size:.92rem;
max-width:32ch;
margin:0 auto 1.5rem;
line-height:1.5;
font-weight:300;
}
#intro-breathe-cycles{
text-align:center;
color:var(--muted);
font-size:.82rem;
letter-spacing:.08em;
font-family:'Instrument Sans',sans-serif;
margin-bottom:2rem;
}
/* Pós-conclusão */
#intro-breathe-done{
display:none;
flex-direction:column;align-items:center;gap:1.5rem;
margin-top:6vh;
animation:fadeIn .4s ease;
}
#intro-breathe-done-msg{
font-family:'Bricolage Grotesque',serif;
font-weight:300;
font-size:1.6rem;
color:var(--text);
text-align:center;
max-width:24ch;
line-height:1.4;
}
#intro-breathe-done-actions{
display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
}
#intro-breathe-done-repeat, #intro-breathe-done-back{
background:transparent;
border:1px solid var(--accent);
color:var(--accent);
padding:.7rem 1.6rem;
border-radius:24px;
font-size:.95rem;font-family:'Instrument Sans',sans-serif;
cursor:pointer;
transition:background .2s;
min-height:44px;
}
#intro-breathe-done-repeat:hover, #intro-breathe-done-back:hover{
background:rgba(var(--accent-rgb),.10);
}
#intro-breathe-done-back{
border-color:var(--border);color:var(--muted);
}
/* ============================================================ */
/* BIBLIOTECA DE MEDITAÇÕES : v6.9 */
/* ============================================================ */
/* Overlay de escolha (lista de meditações) */
#intro-library-overlay{
position:fixed;inset:0;z-index:100007;
background:rgba(10,9,8,.97);
display:flex;align-items:center;justify-content:center;
flex-direction:column;
animation:fadeIn .25s ease;
padding:1.2rem;
overflow-y:auto;
}
#intro-library-overlay-close{
position:absolute;top:18px;right:18px;
width:44px;height:44px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:50%;color:var(--text);cursor:pointer;
display:flex;align-items:center;justify-content:center;
}
#intro-library-overlay-close svg{width:20px;height:20px}
#intro-library-overlay-title{
font-family:'Bricolage Grotesque',serif;font-weight:300;
letter-spacing:.14em;font-size:1.8rem;
text-transform:uppercase;color:var(--text);
text-align:center;margin:0 0 .3rem;
}
#intro-breathe-overlay-tagline{
font-family:'Bricolage Grotesque',serif;font-weight:300;
font-style:italic;font-size:1rem;
color:var(--muted);text-align:center;margin:0 0 1.8rem;letter-spacing:.04em;
}
#intro-library-list{
width:100%;max-width:560px;
display:flex;flex-direction:column;gap:.7rem;
}
.intro-library-card{
background:var(--card);border:1px solid var(--border);
border-radius:14px;padding:1rem 1.1rem;
cursor:pointer;transition:border-color .2s, transform .15s, background .2s;
}
.intro-library-card:hover{
border-color:var(--accent);background:rgba(var(--accent-rgb),.06);
}
.intro-library-card.locked{opacity:.6}
.intro-library-card.not-ready{opacity:.45;cursor:not-allowed}
.intro-library-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.3rem}
.intro-library-card-title{
font-family:'Bricolage Grotesque',serif;font-weight:300;
font-size:1.3rem;letter-spacing:.04em;color:var(--text);
}
.intro-library-card-meta{
color:var(--muted);font-size:.78rem;letter-spacing:.06em;
font-family:'Instrument Sans',sans-serif;
}
.intro-library-card-desc{
color:var(--muted);font-size:.88rem;line-height:1.5;
font-family:'Instrument Sans',sans-serif;font-weight:300;
}
.intro-library-card-foot{margin-top:.5rem;display:flex;gap:.5rem}
.intro-library-card-lock,.intro-library-card-warn{
font-size:.7rem;letter-spacing:.08em;padding:2px 8px;border-radius:10px;
text-transform:uppercase;font-family:'Instrument Sans',sans-serif;
}
.intro-library-card-lock{background:rgba(var(--accent-rgb),.12);color:var(--accent)}
.intro-library-card-warn{background:rgba(196,117,106,.15);color:#C4756A}
/* Modal do player */
#intro-library-modal{
position:fixed;inset:0;z-index:100008;
background:var(--bg);
display:flex;flex-direction:column;align-items:center;
padding:5vh 1.2rem 2vh;
animation:fadeIn .3s ease;
}
#intro-library-topbar{
position:absolute;top:16px;left:16px;right:16px;
display:flex;justify-content:space-between;z-index:2;
}
#intro-library-back, #intro-library-close{
width:48px;height:48px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
border-radius:50%;color:var(--text);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s, transform .15s;
}
#intro-library-back:hover,#intro-library-close:hover{
background:rgba(255,255,255,.12);transform:scale(1.05);
}
#intro-library-back svg,#intro-library-close svg{width:22px;height:22px}
#intro-library-title{
font-family:'Bricolage Grotesque',serif;font-weight:300;
font-size:1.6rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--text);text-align:center;margin-top:5vh;opacity:.9;
}
#intro-library-orb{
position:relative;width:240px;height:240px;margin:7vh auto 4vh;
display:flex;align-items:center;justify-content:center;
}
#intro-library-orb-ring{
position:absolute;inset:0;border:1px solid rgba(var(--accent-rgb),.18);
border-radius:50%;animation:libRingPulse 5s ease-in-out infinite;
}
#intro-library-orb-core{
width:140px;height:140px;border-radius:50%;
background:radial-gradient(circle, rgba(var(--accent-rgb),.65) 0%, rgba(var(--accent-rgb),.18) 60%, transparent 100%);
transition:opacity .4s ease;
}
#intro-library-orb-core.pulsing{
animation:libOrbPulse 4s ease-in-out infinite;
}
@keyframes libOrbPulse{
0%,100%{transform:scale(0.9);opacity:.85}
50%{transform:scale(1.05);opacity:1}
}
@keyframes libRingPulse{
0%,100%{transform:scale(1);opacity:.6}
50%{transform:scale(1.08);opacity:.9}
}
@media (max-height:700px){
#intro-library-orb{width:200px;height:200px;margin:4vh auto}
#intro-library-orb-core{width:120px;height:120px}
}
#intro-library-segment-info{
color:var(--muted);font-size:.85rem;letter-spacing:.05em;
text-align:center;margin-bottom:1.2rem;font-family:'Instrument Sans',sans-serif;
min-height:1.3rem;
}
#intro-library-progress{
width:80%;max-width:380px;height:2px;
background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
margin-bottom:1.8rem;
}
#intro-library-progress-bar{
height:100%;background:var(--accent);
transition:width .6s ease;width:0;
}
#intro-library-controls{
display:flex;gap:1rem;justify-content:center;align-items:center;margin-bottom:2rem;
}
.intro-library-speed-btn{
background:transparent;border:1px solid rgba(255,255,255,.12);
color:var(--muted);
min-width:54px;min-height:44px;padding:.5rem .8rem;
border-radius:22px;cursor:pointer;
font-family:'Instrument Sans',sans-serif;font-size:.85rem;font-weight:400;letter-spacing:.04em;
transition:background .2s, color .2s, border-color .2s;
-webkit-tap-highlight-color: rgba(var(--accent-rgb),.3);
}
.intro-library-speed-btn:active{transform:scale(.94)}
.intro-library-speed-btn--active{
background:rgba(var(--accent-rgb),.18);
border-color:var(--accent);
color:var(--accent);
}
#intro-library-pause{
width:60px;height:60px;border-radius:50%;
background:rgba(var(--accent-rgb),.15);border:1px solid rgba(var(--accent-rgb),.35);
color:var(--accent);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s, transform .15s;
}
#intro-library-pause:hover{background:rgba(var(--accent-rgb),.25);transform:scale(1.05)}
#intro-library-pause svg{width:22px;height:22px;pointer-events:none;}
#intro-library-attribution{
position:absolute;bottom:1.5rem;left:1.2rem;right:1.2rem;
text-align:center;color:var(--muted);
font-size:.72rem;letter-spacing:.03em;
font-style:italic;font-family:'Bricolage Grotesque',serif;
max-width:560px;margin:0 auto;
}
#intro-library-audio{display:none}
/* ============================================================ */
/* BOTÕES DE SUGESTÃO DA FLORA (Respirar/Meditar) */
/* ============================================================ */
.intro-suggestion-row{
display:flex;gap:.6rem;margin-top:.7rem;
animation:fadeIn .3s ease;
}
.intro-suggestion-btn{
flex:1;padding:.7rem 1.1rem;
border-radius:24px;cursor:pointer;
font-family:'Instrument Sans',sans-serif;font-size:.92rem;
transition:background .2s, transform .15s;
min-height:44px;
}
.intro-suggestion-btn--no{
background:transparent;border:1px solid var(--border);
color:var(--muted);
}
.intro-suggestion-btn--no:hover{background:rgba(255,255,255,.04);color:var(--text)}
.intro-suggestion-btn--yes{
background:rgba(var(--accent-rgb),.18);border:1px solid var(--accent);
color:var(--accent);font-weight:500;
}
.intro-suggestion-btn--yes:hover{
background:rgba(var(--accent-rgb),.30);transform:translateY(-1px);
}
/* Botão "outra": discreto, à direita do "Vamos respirar/meditar".
Não rouba atenção. Existe para quem quer trocar a escolha da Flora. */
.intro-suggestion-btn--other{
flex:0 0 auto;padding:.7rem .9rem;
background:transparent;border:1px solid var(--border);
color:var(--muted);font-size:.85rem;font-weight:400;
border-radius:24px;cursor:pointer;
transition:background .2s, color .2s;
min-height:44px;
}
.intro-suggestion-btn--other:hover{
background:rgba(255,255,255,.04);color:var(--text);
}
/* ============================================================ */
/* PAINEL CONTINUAR NO FINAL (v6.9.5) */
/* ============================================================ */
#intro-library-continue{
position:absolute;left:0;right:0;bottom:0;
background:linear-gradient(to top, rgba(10,9,8,.98) 60%, rgba(10,9,8,.85) 100%);
padding:2.5rem 1.2rem 3rem;
display:flex;flex-direction:column;align-items:center;gap:1rem;
animation:libContinueIn .5s ease;
z-index:3;
}
@keyframes libContinueIn{
0%{opacity:0;transform:translateY(20px)}
100%{opacity:1;transform:translateY(0)}
}
#intro-library-continue-title{
font-family:'Bricolage Grotesque',serif;font-weight:300;
font-size:1.5rem;color:var(--text);text-align:center;
margin:0;letter-spacing:.04em;
}
#intro-library-continue-sub{
color:var(--muted);font-size:.9rem;text-align:center;
margin:0 0 .5rem;font-family:'Instrument Sans',sans-serif;font-weight:300;
}
#intro-library-continue-actions{
display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;
max-width:520px;
}
.intro-library-cont-btn{
background:transparent;border:1px solid rgba(255,255,255,.18);
color:var(--text);
padding:.7rem 1.2rem;border-radius:24px;
cursor:pointer;font-family:'Instrument Sans',sans-serif;font-size:.92rem;
transition:background .2s, border-color .2s;
min-height:44px;
}
.intro-library-cont-btn:hover{
background:rgba(var(--accent-rgb),.12);border-color:var(--accent);color:var(--accent);
}
.intro-library-cont-btn[data-mins="0"]{
color:var(--muted);
}
#intro-library-continue-timer{
color:var(--accent);font-size:.85rem;letter-spacing:.05em;margin-top:.5rem;
font-family:'Instrument Sans',sans-serif;
}
/* ============================================================ */
/* CAPÍTULOS CLICÁVEIS + SKIP BUTTONS (v6.9.6) */
/* ============================================================ */
#intro-library-chapters{
display:flex;gap:6px;
width:80%;max-width:380px;margin:0 auto 1.8rem;
align-items:stretch;
}
.intro-library-chapter{
flex:1;background:transparent;border:none;cursor:pointer;
padding:14px 0; /* área de toque mínima 44px (14+16+14) */
margin:0;display:flex;align-items:center;
-webkit-tap-highlight-color: rgba(var(--accent-rgb),.3);
}
.intro-library-chapter-fill{
display:block;width:100%;height:3px;border-radius:2px;
background:rgba(255,255,255,.10);
transition:background .25s ease;
}
.intro-library-chapter.is-done .intro-library-chapter-fill{
background:rgba(var(--accent-rgb),.65); /* concluído: acento dim */
}
.intro-library-chapter.is-active .intro-library-chapter-fill{
background:var(--accent);
animation:libChapterPulse 1.6s ease-in-out infinite;
}
.intro-library-chapter:active .intro-library-chapter-fill{
background:rgba(var(--accent-rgb),.85);
}
@keyframes libChapterPulse{
0%,100%{opacity:.85}
50%{opacity:1}
}
/* Controls layout: duas filas (controlos principais + velocidades) */
#intro-library-controls{
display:flex;flex-direction:column;gap:1rem;align-items:center;
margin-bottom:2rem;
}
.intro-library-controls-row{
display:flex;gap:1rem;justify-content:center;align-items:center;
}
.intro-library-controls-row--speed{gap:.7rem;}
#intro-library-restart, #intro-library-back30{
background:transparent;border:1px solid rgba(255,255,255,.12);
color:var(--muted);
width:48px;height:48px;
border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s, color .2s, border-color .2s;
-webkit-tap-highlight-color: rgba(var(--accent-rgb),.3);
position:relative;
}
#intro-library-restart:hover, #intro-library-back30:hover{
background:rgba(var(--accent-rgb),.12);color:var(--accent);
border-color:rgba(var(--accent-rgb),.3);
}
#intro-library-restart:active, #intro-library-back30:active{transform:scale(.94)}
#intro-library-restart svg, #intro-library-back30 svg{width:18px;height:18px}
.intro-library-back30-label{
position:absolute;bottom:7px;right:7px;
font-size:9px;letter-spacing:.02em;
color:var(--muted);font-family:'Instrument Sans',sans-serif;
background:var(--bg);padding:0 3px;border-radius:3px;
pointer-events:none;
}
/* ============================================================ */
/* PIN: BLOQUEIO RÁPIDO (v6.9.8) */
/* ============================================================ */
/* Botão cadeado no header com destaque (cor acento) */
.intro-hbtn--accent{
background:rgba(var(--accent-rgb),.12) !important;
border:1px solid rgba(var(--accent-rgb),.4) !important;
color:var(--accent) !important;
}
.intro-hbtn--accent:hover{
background:rgba(var(--accent-rgb),.22) !important;
border-color:var(--accent) !important;
}
.intro-hbtn--accent svg{stroke:currentColor}
/* Modal de PIN (setup e reset) e modais de dados/feedback */
#intro-pin-setup-modal, #intro-pin-reset-modal,
#intro-data-soft-modal, #intro-data-nuclear-modal,
#intro-my-feedbacks-modal, #intro-my-payments-modal,
#intro-tts-confirm-modal, #intro-pwa-install-modal, #intro-funcs-modal {
position:fixed;inset:0;z-index:100050;
background:rgba(10,9,8,.85);
display:flex;align-items:center;justify-content:center;
padding:1rem;
animation:fadeIn .2s ease;
}
.intro-light #intro-pin-setup-modal,
.intro-light #intro-pin-reset-modal,
.intro-light #intro-data-soft-modal,
.intro-light #intro-data-nuclear-modal,
.intro-light #intro-my-feedbacks-modal,
.intro-light #intro-my-payments-modal,
.intro-light #intro-tts-confirm-modal,
.intro-light #intro-pwa-install-modal,
.intro-light #intro-funcs-modal {background:rgba(245,242,235,.92)}
/* Passos de instalação PWA */
.intro-pwa-steps {
margin: .8rem 0 1rem 1.2rem;
padding: 0;
font-size: .9rem;
color: var(--text);
line-height: 1.7;
}
.intro-pwa-steps li { margin-bottom: .4rem; }
.intro-pwa-icon {
display: inline-block;
font-size: 1.1rem;
vertical-align: middle;
margin-left: 2px;
}
.intro-pin-modal-box{
background:var(--bg);border:1px solid var(--border);
border-radius:18px;
padding:2rem 1.6rem 1.6rem;
max-width:380px;width:100%;
position:relative;
box-shadow:0 20px 60px rgba(0,0,0,.4);
}
/* O Definir PIN passou a usar o modal central; o Esqueci o PIN mantem o modal
proprio (tem o passo do SMS) mas alinha o aspecto com o central: cartao
destacado e desfoque por tras, para os ecras de PIN ficarem todos iguais. */
#intro-pin-setup-modal, #intro-pin-reset-modal{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
#intro-pin-setup-modal .intro-pin-modal-box, #intro-pin-reset-modal .intro-pin-modal-box{background:var(--card);border-radius:20px}
.intro-pin-modal-close{
position:absolute;top:.8rem;right:.8rem;
background:transparent;border:none;color:var(--muted);
width:32px;height:32px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
}
.intro-pin-modal-close:hover{background:rgba(255,255,255,.06)}
.intro-pin-modal-close svg{width:18px;height:18px}
.intro-pin-modal-title{
font-family:'Bricolage Grotesque',serif;
font-size:1.4rem;font-weight:400;
color:var(--text);margin:0 0 .5rem;text-align:center;
}
.intro-pin-modal-desc{
font-family:'Instrument Sans',sans-serif;
font-size:.85rem;color:var(--muted);
margin:0 0 1.4rem;text-align:center;line-height:1.5;
}
.intro-pin-modal-hint{
font-size:.78rem;color:var(--muted);
text-align:center;margin:0 0 1.2rem;letter-spacing:.03em;
}
.intro-pin-modal-error{
color:#d57a7a;font-size:.8rem;text-align:center;
margin:.8rem 0 0;min-height:1.2em;
}
/* 4 pontos do PIN: estilo iOS/Android com bolinhas grandes e feedback visual claro */
.intro-pin-dots{
display:flex;gap:22px;justify-content:center;
margin:0 0 1.6rem;
}
.intro-pin-dot{
width:20px;height:20px;border-radius:50%;
border:2px solid var(--border);
background:transparent;
transition:all .18s ease;
}
.intro-pin-dot--filled,
.intro-pin-dot.is-filled{
background:var(--accent);
border-color:var(--accent);
transform:scale(1.15);
box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18);
}
.intro-pin-dots.is-shake{animation:pinShake .35s ease}
@keyframes pinShake{
0%,100%{transform:translateX(0)}
25%{transform:translateX(-6px)}
75%{transform:translateX(6px)}
}
/* Pavé numérico: estilo lockscreen, bem espaçado.
O JS cria botões com classe .intro-pin-pad-btn (não .intro-pin-key). */
.intro-pin-pad{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
max-width:280px;margin:0 auto;
}
.intro-pin-pad-empty{aspect-ratio:1;width:100%}
.intro-pin-pad-btn{
background:transparent;border:1px solid var(--border);
border-radius:50%;
aspect-ratio:1;width:100%;
font-family:'Instrument Sans',sans-serif;
font-size:1.65rem;font-weight:300;
color:var(--text);cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .15s ease;
-webkit-tap-highlight-color: rgba(var(--accent-rgb),.3);
}
.intro-pin-pad-btn:hover{background:rgba(var(--accent-rgb),.1);border-color:var(--accent)}
.intro-pin-pad-btn:active{transform:scale(.94);background:rgba(var(--accent-rgb),.18)}
.intro-pin-pad-del{font-size:1.4rem;color:var(--muted)}
.intro-pin-pad-del svg{width:22px;height:22px}
/* Botão primário (recuperação) */
.intro-pin-primary-btn{
width:100%;padding:.9rem;
background:var(--accent);color:var(--user-text);
border:none;border-radius:100px;
font-family:'Instrument Sans',sans-serif;font-size:.95rem;font-weight:400;
cursor:pointer;letter-spacing:.03em;
transition:opacity .2s;
}
.intro-pin-primary-btn:hover{opacity:.9}
.intro-pin-primary-btn:disabled{opacity:.5;cursor:not-allowed}
.intro-pin-code-input{
width:100%;padding:.9rem;
background:transparent;
border:1px solid var(--border);border-radius:12px;
font-family:'Instrument Sans',sans-serif;font-size:1.2rem;
color:var(--text);text-align:center;letter-spacing:.5em;
margin:.5rem 0;outline:none;
}
.intro-pin-code-input:focus{border-color:var(--accent)}
.intro-pin-forgot-link{
background:transparent;
border:1px solid var(--muted);
color:var(--text);
font-size:.85rem;
padding:.6rem 1rem;
border-radius:8px;
cursor:pointer;
margin-top:1.5rem;
font-family:'Instrument Sans',sans-serif;
transition:border-color .15s, color .15s, background .15s;
}
.intro-pin-forgot-link:hover{
border-color:var(--accent);
color:var(--accent);
background:rgba(var(--accent-rgb),.06);
}
/* OVERLAY DE BLOQUEIO: blur total, conteúdo isolado */
#intro-pin-lock-overlay{
position:fixed;inset:0;z-index:100100;
backdrop-filter:blur(28px) brightness(0.3) saturate(.5);
-webkit-backdrop-filter:blur(28px) brightness(0.3) saturate(.5);
background:rgba(10,9,8,.75);
display:flex;align-items:center;justify-content:center;
padding:1rem;
animation:lockFadeIn .35s ease;
}
.intro-light #intro-pin-lock-overlay{
background:rgba(245,242,235,.55);
}
@keyframes lockFadeIn{
from{backdrop-filter:blur(0) brightness(1); -webkit-backdrop-filter:blur(0) brightness(1); opacity:0}
to{opacity:1}
}
.intro-pin-lock-content{
max-width:340px;width:100%;
text-align:center;
}
.intro-pin-lock-logo{
font-family:'Bricolage Grotesque',serif;
font-size:1.4rem;font-weight:300;
color:var(--text);letter-spacing:.15em;
margin:0 0 2.5rem;
}
.intro-pin-lock-logo .ia{color:var(--wm-ia)}
/* Fade-out quando se remove */
#intro-pin-lock-overlay.is-leaving{
animation:lockFadeOut .3s ease forwards;
}
@keyframes lockFadeOut{
from{opacity:1}
to{opacity:0;backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0)}
}
/* ============================================================ */
/* SHARE MODAL: PARTILHAR CONVERSA + CONVIDAR (v6.9.9) */
/* ============================================================ */
#intro-share-modal{
position:fixed;inset:0;z-index:100060;
background:rgba(10,9,8,.85);
display:flex;align-items:center;justify-content:center;
padding:1rem;
animation:fadeIn .2s ease;
}
.intro-light #intro-share-modal{background:rgba(245,242,235,.92)}
.intro-share-modal-box{
background:var(--bg);border:1px solid var(--border);
border-radius:18px;
padding:2rem 1.6rem 1.6rem;
max-width:480px;width:100%;
position:relative;
box-shadow:0 20px 60px rgba(0,0,0,.4);
max-height:90vh;overflow-y:auto;
}
.intro-share-modal-close{
position:absolute;top:.8rem;right:.8rem;
background:transparent;border:none;color:var(--muted);
width:32px;height:32px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
border-radius:50%;z-index:2;
}
.intro-share-modal-close:hover{background:rgba(255,255,255,.06)}
.intro-share-modal-close svg{width:18px;height:18px}
.intro-share-back{
background:transparent;border:none;color:var(--muted);
width:32px;height:32px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
margin:0 0 .6rem -.6rem;
}
.intro-share-back:hover{background:rgba(255,255,255,.06);color:var(--accent)}
.intro-share-back svg{width:18px;height:18px}
.intro-share-title{
font-family:'Bricolage Grotesque',serif;
font-size:1.5rem;font-weight:400;
color:var(--text);margin:0 0 1.2rem;
}
.intro-share-desc{
font-family:'Instrument Sans',sans-serif;
font-size:.9rem;color:var(--muted);line-height:1.55;
margin:0 0 1.2rem;
}
.intro-share-desc strong{color:var(--text);font-weight:400}
/* Opções principais */
.intro-share-option{
display:flex;align-items:center;gap:1rem;
width:100%;padding:1rem 1.2rem;margin:0 0 .8rem;
background:transparent;
border:1px solid var(--border);border-radius:14px;
cursor:pointer;text-align:left;
transition:all .2s ease;
}
.intro-share-option:hover{
border-color:var(--accent);
background:rgba(var(--accent-rgb),.06);
}
.intro-share-option-icon{
flex-shrink:0;width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(var(--accent-rgb),.12);color:var(--accent);
}
.intro-share-option-icon svg{width:22px;height:22px}
.intro-share-option-text{display:flex;flex-direction:column;gap:.2rem}
.intro-share-option-label{
font-family:'Instrument Sans',sans-serif;font-size:.95rem;font-weight:400;
color:var(--text);
}
.intro-share-option-desc{
font-family:'Instrument Sans',sans-serif;font-size:.78rem;
color:var(--muted);line-height:1.4;
}
/* Preview de screenshot */
#intro-share-preview-container{
background:rgba(255,255,255,.03);
border:1px solid var(--border);border-radius:12px;
overflow:hidden;
min-height:180px;
display:flex;align-items:center;justify-content:center;
margin:0 0 1rem;
}
#intro-share-preview-loading{
color:var(--muted);font-size:.9rem;
}
#intro-share-preview-img{
max-width:100%;height:auto;display:block;
}
.intro-share-action-row{
display:flex;gap:.6rem;flex-wrap:wrap;
}
.intro-share-action-row > button{flex:1}
.intro-share-secondary-btn{
background:transparent;
border:1px solid var(--border);border-radius:100px;
padding:.9rem 1.2rem;
color:var(--text);
font-family:'Instrument Sans',sans-serif;font-size:.9rem;font-weight:300;
cursor:pointer;transition:all .2s;
}
.intro-share-secondary-btn:hover{
border-color:var(--accent);color:var(--accent);
}
.intro-share-error{
color:#d57a7a;font-size:.8rem;text-align:center;
margin:.8rem 0 0;min-height:1.2em;
}
/* Painel de créditos pendentes */
.intro-share-credits-card{
background:rgba(var(--accent-rgb),.06);
border:1px solid rgba(var(--accent-rgb),.25);
border-radius:14px;
padding:1.4rem 1.2rem;
margin:0 0 1.4rem;
text-align:center;
}
.intro-share-credits-num{
font-family:'Bricolage Grotesque',serif;
font-size:3.2rem;font-weight:300;line-height:1;
color:var(--accent);
margin:0 0 .3rem;
}
.intro-share-credits-label{
font-family:'Instrument Sans',sans-serif;font-size:.85rem;
color:var(--muted);margin:0 0 1rem;
}
.intro-share-credits-actions{
display:flex;gap:.5rem;align-items:center;justify-content:center;
}
.intro-share-icon-btn{
background:transparent;
border:1px solid var(--border);border-radius:50%;
width:42px;height:42px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
color:var(--muted);cursor:pointer;
transition:all .2s;
}
.intro-share-icon-btn:hover{
border-color:var(--accent);color:var(--accent);
}
.intro-share-icon-btn svg{width:18px;height:18px}
.intro-share-icon-btn.is-loading svg{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.intro-share-credits-actions .intro-pin-primary-btn{flex:1;max-width:240px}
.intro-share-credits-stats{
font-family:'Instrument Sans',sans-serif;font-size:.78rem;
color:var(--muted);margin:.8rem 0 0;
}
/* Linha do link */
.intro-share-link-row{
display:flex;gap:.5rem;
}
#intro-share-link{
flex:1;padding:.8rem;
background:rgba(255,255,255,.04);
border:1px solid var(--border);border-radius:10px;
font-family:'Instrument Sans',sans-serif;font-size:.85rem;
color:var(--text);outline:none;
}
#intro-share-link:focus{border-color:var(--accent)}
.intro-share-link-row .intro-share-secondary-btn{padding:.8rem 1rem;font-size:.85rem}
/* Feedback à equipa (v6.9.13) */
#intro-share-feedback-text{
width:100%;padding:.9rem;
background:rgba(255,255,255,.04);
border:1px solid var(--border);border-radius:12px;
font-family:'Instrument Sans',sans-serif;font-size:.9rem;line-height:1.5;
color:var(--text);resize:vertical;min-height:120px;outline:none;
margin:0 0 .8rem;
}
#intro-share-feedback-text:focus{border-color:var(--accent)}
.intro-share-feedback-checkbox{
display:flex;align-items:center;gap:.6rem;
margin:0 0 .8rem;cursor:pointer;
font-size:.85rem;color:var(--muted);
}
.intro-share-feedback-checkbox input[type=checkbox]{
width:18px;height:18px;cursor:pointer;
accent-color:var(--accent);
}
#intro-share-feedback-preview-wrap{
margin:0 0 .8rem;
border-radius:8px;overflow:hidden;
border:1px solid var(--border);
}
#intro-share-feedback-preview{
max-width:100%;height:auto;display:block;
max-height:160px;
object-fit:contain;
}
/* Selecção opcional de mensagens no feedback (v6.9.15) */
.intro-share-pick-btn{
display:flex;align-items:center;gap:.5rem;
padding:.7rem 1rem;
background:rgba(var(--accent-rgb),.08);
border:1px dashed var(--accent);border-radius:10px;
color:var(--accent);font-size:.85rem;cursor:pointer;
width:100%;margin:0 0 .8rem;
transition:background .2s;
}
.intro-share-pick-btn:hover{background:rgba(var(--accent-rgb),.14)}
.intro-share-pick-btn svg{flex-shrink:0}
/* Overlay para seleccionar mensagens */
/* v7.0.6: barra de selecção de mensagens (feedback à equipa).
z-index alto para ficar acima do header da Metabolia. */
#intro-msg-select-overlay{
position:fixed;inset:0;
z-index:100050;
background:transparent;
pointer-events:none;
display:flex;flex-direction:column;
}
.intro-msg-select-bar{
display:flex;align-items:center;justify-content:space-between;
padding:1rem 1.2rem;
background:var(--card);
border-bottom:2px solid var(--accent);
pointer-events:auto;
box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.intro-msg-select-cancel{
border:1px solid var(--border);background:transparent;
font-family:inherit;font-size:.92rem;
cursor:pointer;padding:.5rem 1rem;border-radius:999px;
color:var(--muted);transition:all .15s;
}
.intro-msg-select-cancel:hover{color:var(--text);border-color:var(--muted)}
.intro-msg-select-count{
font-size:.85rem;color:var(--text);font-weight:500;
}
.intro-msg-select-hint{
text-align:center;
color:var(--user-text,#fff);
background:rgba(0,0,0,.55);
font-size:.78rem;
padding:.35rem 1rem;
pointer-events:auto;
backdrop-filter:blur(4px);
margin:0;
}
.intro-msg-select-confirm-row{
margin-top:auto;
padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom, 0));
background:var(--card);
border-top:1px solid var(--border);
pointer-events:auto;
box-shadow:0 -4px 20px rgba(0,0,0,.25);
}
.intro-msg-select-done-big{
width:100%;
padding:.95rem 1.5rem;
background:var(--accent);
color:var(--user-text,#141610);
border:none;border-radius:14px;
font-family:inherit;font-size:1rem;font-weight:600;
cursor:pointer;letter-spacing:.02em;
transition:filter .15s, opacity .15s;
}
.intro-msg-select-done-big:hover{filter:brightness(1.06)}
.intro-msg-select-done-big:disabled{opacity:.35;cursor:not-allowed;filter:none}
/* Modo selecção: mensagens ficam clicáveis com checkbox visual */
#metabolia-app.intro-selecting-msgs .intro-msg{
cursor:pointer;
position:relative;
transition:transform .15s, box-shadow .15s;
}
#metabolia-app.intro-selecting-msgs .intro-msg::after{
content:'';
position:absolute;top:.5rem;right:.5rem;
width:22px;height:22px;
border:2px solid var(--border);
border-radius:50%;
background:rgba(255,255,255,.06);
transition:background .15s, border-color .15s;
}
#metabolia-app.intro-selecting-msgs .intro-msg.intro-msg-selected{
box-shadow:0 0 0 2px var(--accent);
}
#metabolia-app.intro-selecting-msgs .intro-msg.intro-msg-selected::after{
background:var(--accent);
border-color:var(--accent);
background-image:url("data:image/svg+xml;utf8,");
background-size:14px;background-position:center;background-repeat:no-repeat;
}
/* Em modo selecção, desactivar botões internos (copiar, estrela, ouvir, apagar) para
evitar que captem clicks e o click chegue sempre à mensagem-pai. */
#metabolia-app.intro-selecting-msgs .intro-msg__actions,
#metabolia-app.intro-selecting-msgs .intro-msg-action{
pointer-events:none !important;
opacity:.3;
}
/* Empurrar conteúdo do chat para baixo da barra fixa de selecção */
#metabolia-app.intro-selecting-msgs #intro-messages{
padding-top:7rem;
}
/* v7.0.5: secções só visíveis para utilizadores autenticados.
Por defeito escondidas; o JS adiciona body.intro-auth quando há sessão. */
.ia-s-authed-only { display: none; }
body.intro-auth .ia-s-authed-only { display: block; }
body.intro-auth #ia-s-install-section { /* este tem display="none" inline, JS gere */ }
/* v7.0.5: botão "1×" da barra inferior só visível para autenticados,
porque a leitura por voz requer créditos e não está disponível no anónimo */
body:not(.intro-auth) #intro-speed-btn { display: none; }
/* v7.0.5: barra de navegação entre mensagens removida no desktop.
Mantida em mobile, mais discreta, alinhada com o input. */
@media (min-width: 901px) {
#intro-nav { display: none !important; }
}
@media (max-width: 900px) {
#intro-nav {
display: flex !important;
position: fixed;
right: 6px;
bottom: 130px;
top: auto;
flex-direction: column;
gap: 4px;
z-index: 4;
padding: 0;
}
#intro-nav button {
width: 30px;
height: 30px;
background: rgba(10, 9, 8, .55);
opacity: .55;
}
#intro-nav button svg { width: 12px; height: 12px; }
}
/* ════════════════════════════════════════════════════════════════════
v7.0.5: ELEMENTOS SÓ-AUTH (escondidos no anónimo)
- 1× botão de velocidade de leitura (não há áudio para anónimos)
- Secção PIN nas Definições
- Secção Aplicação (PWA) nas Definições
════════════════════════════════════════════════════════════════════ */
body.intro-anon #intro-speed-btn,
body.intro-anon .intro-bar-sep + #intro-speed-btn { display: none !important; }
body.intro-anon #intro-speed-btn + .intro-bar-sep { display: none !important; }
body.intro-anon .ia-s-pin-only,
body.intro-anon #ia-s-pin-state,
body.intro-anon #ia-s-pin-actions,
body.intro-anon #ia-s-install-section { display: none !important; }
/* Esconder também o título "PIN de bloqueio" da secção quando anónimo. Marcamos o
antes do `ia-s-pin-state` como pin-section-header via class adicional no template. */
body.intro-anon .ia-s-section-pin { display: none !important; }
/* ════════════════════════════════════════════════════════════════════
v7.0.5: ACÇÕES ESPELHADAS : copiar/ler/apagar ficam AO LADO da bolha,
não em baixo. Lado depende do role (assistente → esquerda, user → direita).
════════════════════════════════════════════════════════════════════ */
.intro-msg { position: relative; }
.intro-msg__actions {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex !important;
flex-direction: column;
gap: 2px;
padding: 0;
opacity: 0;
pointer-events: none;
transition: opacity .15s;
z-index: 3;
}
.intro-msg:hover .intro-msg__actions,
.intro-msg.intro-msg--touched .intro-msg__actions {
opacity: 1;
pointer-events: all;
}
/* Assistente E utilizador: acções sempre à direita da bolha (v7.0.6).
Antes o Jonas pediu "lado da bolha" mas isto fica visualmente inconsistente.
Agora todas alinhadas no mesmo lado (direita), à frente da bolha. */
.intro-msg[data-role="assistant"] .intro-msg__actions {
right: -36px;
left: auto;
flex-direction: column;
}
.intro-msg[data-role="user"] .intro-msg__actions {
right: -36px;
left: auto;
flex-direction: column;
}
/* Mobile: muito pouco espaço lateral. Mover para overlay no topo da bolha. */
@media (max-width: 600px) {
.intro-msg__actions {
position: absolute;
top: -8px;
transform: none;
flex-direction: row;
background: rgba(20,17,15,.92);
border: 1px solid rgba(255,255,255,.08);
border-radius: 999px;
padding: 2px 4px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.intro-msg[data-role="assistant"] .intro-msg__actions { right: 8px; left: auto; }
.intro-msg[data-role="user"] .intro-msg__actions { right: 8px; left: auto; }
}
/* ════════════════════════════════════════════════════════════════════
v7.0.5: BANNER DE CRÉDITOS BAIXOS
Aparece entre o header e a área de mensagens quando credits < 3.
════════════════════════════════════════════════════════════════════ */
.intro-low-credits-banner {
display: flex;
align-items: center;
gap: .7rem;
padding: .6rem .9rem;
margin: .5rem auto .4rem;
max-width: 640px;
width: calc(100% - 1.6rem);
box-sizing: border-box;
background: rgba(var(--accent-rgb),.08);
border: 1px solid rgba(var(--accent-rgb),.25);
border-radius: 12px;
color: var(--text);
font-size: .82rem;
line-height: 1.35;
animation: introLcbIn .25s ease;
}
@keyframes introLcbIn { from { opacity: 0; transform: translateY(-4px); } }
.intro-lcb-text { flex: 1; min-width: 0; }
.intro-lcb-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.intro-lcb-cta {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
padding: .35rem .8rem;
border-radius: 999px;
font-size: .78rem;
cursor: pointer;
white-space: nowrap;
transition: background .15s, color .15s;
}
.intro-lcb-cta:hover { background: var(--accent-dim); }
/* botão primário "Carregar" preenchido, para ser o caminho directo */
.intro-lcb-cta--primary {
background: var(--accent);
color: #0a0f0d;
font-weight: 500;
}
.intro-lcb-cta--primary:hover { background: var(--accent); opacity: .88; }
.intro-lcb-close {
background: transparent;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 1.3rem;
padding: 0 .35rem;
line-height: 1;
}
.intro-lcb-close:hover { color: var(--text); }
/* v7.0.6: Speak inteiramente escondido para utilizadores anónimos (CSS) */
body.intro-anon .intro-msg-action--speak,
body.intro-anon .intro-tgl-group { display: none !important; }
/* STT disponível para todos (é gratuito). Apenas TTS é reservado a utilizadores logados. */
body.intro-anon #intro-mic-btn { opacity: 1; pointer-events: auto; }
/* Cadeado (PIN) nunca visível para utilizadores anónimos */
body.intro-anon #intro-lock-btn { display: none !important; }
/* v7.0.6: Banner persistente de "Sem créditos disponíveis", maior do que o toast.
Aparece quando o user tenta usar funcionalidade que custa créditos sem ter saldo. */
.intro-no-credits-banner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(20,17,15,.98);
border: 1px solid rgba(196,117,106,.45);
color: var(--text);
padding: 1.3rem 1.6rem 1.1rem;
border-radius: 14px;
box-shadow: 0 16px 40px rgba(0,0,0,.5);
z-index: 100020;
max-width: 380px;
width: calc(100% - 32px);
text-align: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: introNcbIn .22s ease;
}
@keyframes introNcbIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.93); } }
.intro-no-credits-title {
font-family: 'Bricolage Grotesque', serif;
font-size: 1.4rem;
font-weight: 300;
margin: 0 0 .55rem;
color: var(--text);
letter-spacing: .01em;
}
.intro-no-credits-text {
color: var(--text-soft, #C7C2B8);
font-size: .92rem;
margin: 0 0 1.05rem;
line-height: 1.4;
}
.intro-no-credits-actions { display: flex; flex-direction: column; gap: .55rem; }
.intro-no-credits-btn-primary {
background: var(--accent);
color: #141610;
border: none;
padding: .65rem 1.2rem;
border-radius: 999px;
font-size: .9rem;
cursor: pointer;
font-weight: 500;
}
.intro-no-credits-btn-primary:hover { filter: brightness(1.05); }
.intro-no-credits-btn-secondary {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
padding: .55rem 1.2rem;
border-radius: 999px;
font-size: .85rem;
cursor: pointer;
}
.intro-no-credits-close {
position: absolute;
top: .55rem;
right: .8rem;
background: transparent;
border: none;
color: var(--muted);
font-size: 1.4rem;
cursor: pointer;
line-height: 1;
padding: 0;
}
.intro-no-credits-close:hover { color: var(--text); }
.intro-no-credits-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 100019;
animation: introNcbBdIn .2s ease;
}
@keyframes introNcbBdIn { from { opacity: 0; } }
/* ═══════════════════════════════════════════════════
TOASTS CONTEXTUAIS
═══════════════════════════════════════════════════ */
.intro-ctx-toast{
position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
z-index:100100;
background:var(--card);border:1px solid var(--accent);border-radius:14px;
padding:.75rem 1rem;
display:flex;align-items:center;gap:.6rem;
box-shadow:0 4px 24px rgba(0,0,0,.25);
max-width:calc(100vw - 2rem);width:max-content;
opacity:0;transition:opacity .25s,transform .25s;
font-size:.84rem;
}
.intro-ctx-toast--in{opacity:1;transform:translateX(-50%) translateY(0)}
.intro-ctx-toast__msg{color:var(--text);flex:1;line-height:1.4}
.intro-ctx-toast__action{
background:var(--accent);color:var(--user-text,#141610);
border:none;border-radius:8px;padding:.3rem .7rem;
font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;
font-family:inherit;
}
.intro-ctx-toast__close{
background:none;border:none;color:var(--muted);cursor:pointer;
font-size:1.1rem;line-height:1;padding:0 .2rem;
}
/* ═══════════════════════════════════════════════════
BUY MODAL TABS
═══════════════════════════════════════════════════ */
.intro-buy-tabs{
display:flex;gap:0;margin-bottom:1.4rem;
border-bottom:1px solid var(--border);
}
.intro-buy-tab{
flex:1;padding:.6rem .6rem;border:none;border-radius:0;
background:transparent;color:var(--muted);
font-family:inherit;font-size:.9rem;cursor:pointer;
border-bottom:2px solid transparent;
margin-bottom:-1px;
transition:color .18s,border-color .18s;
}
.intro-buy-tab--active{color:var(--text);font-weight:500;border-bottom-color:var(--accent)}
/* ═══════════════════════════════════════════════════
CRÉDITOS GRÁTIS TAB
═══════════════════════════════════════════════════ */
.intro-free-section{text-align:center;padding:.5rem 0 1rem}
.intro-free-icon{margin-bottom:.5rem;display:flex;justify-content:center;color:var(--accent)}
.intro-free-icon svg{display:block}
.intro-free-title{font-size:1.1rem;font-weight:400;color:var(--text);margin:0 0 .4rem}
.intro-free-desc{font-size:.84rem;color:var(--muted);line-height:1.5;margin:0 0 1rem}
.intro-free-link-row{display:flex;gap:.4rem;margin-bottom:.5rem}
.intro-free-link-input{
flex:1;background:var(--bg2);border:1px solid var(--border);
border-radius:8px;padding:.45rem .7rem;color:var(--muted);
font-size:.75rem;font-family:inherit;min-width:0;
}
.intro-free-copy-btn{
background:var(--bg2);border:1px solid var(--border);border-radius:8px;
padding:.45rem .8rem;font-size:.8rem;color:var(--text);cursor:pointer;
font-family:inherit;white-space:nowrap;transition:background .15s;
}
.intro-free-copy-btn:hover{background:var(--accent);color:var(--user-text)}
.intro-free-stats{font-size:.78rem;color:var(--muted);margin-top:.6rem}
.intro-free-pending{color:var(--accent)}
.intro-free-transfer-btn{
margin-top:.6rem;width:100%;padding:.6rem;border:1px solid var(--accent);
background:transparent;color:var(--accent);border-radius:10px;
font-family:inherit;font-size:.85rem;cursor:pointer;transition:background .15s,color .15s;
}
.intro-free-transfer-btn:hover{background:var(--accent);color:var(--user-text)}
.intro-free-divider{
text-align:center;font-size:.75rem;color:var(--muted);
margin:1rem 0 .8rem;position:relative;
}
.intro-free-divider::before,.intro-free-divider::after{
content:'';position:absolute;top:50%;width:35%;height:1px;background:var(--border);
}
.intro-free-divider::before{left:0}
.intro-free-divider::after{right:0}
.intro-free-bonus-list{display:flex;flex-direction:column;gap:.5rem}
.intro-free-bonus-item{
display:flex;align-items:center;gap:.8rem;
background:var(--bg2);border-radius:10px;padding:.7rem .9rem;
}
.intro-free-bonus-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--accent);opacity:.85}
.intro-free-bonus-text{flex:1;min-width:0;text-align:left}
.intro-free-bonus-label{font-size:.85rem;color:var(--text)}
.intro-free-bonus-desc{font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.35}
.intro-free-bonus-status{margin-left:auto;font-size:.78rem;white-space:nowrap}
/* v8.8.7: variante clicável com CTA visível. Substitui o "+5 créditos"
estático por um botão accionável "Definir" / "Activar". */
.intro-free-bonus-clickable{
border:1px solid transparent;
cursor:pointer;
transition:background .15s, border-color .15s;
font-family:inherit;
width:100%;
}
.intro-free-bonus-clickable:hover{
background:rgba(var(--accent-rgb),.08);
border-color:rgba(var(--accent-rgb),.3);
}
.intro-free-bonus-cta{
margin-left:auto;
background:var(--accent);
color:#141610;
border-radius:14px;
padding:5px 12px;
font-size:.74rem;
font-weight:600;
white-space:nowrap;
flex-shrink:0;
}
.intro-free-bonus-cta--done{
background:transparent;
border:1px solid var(--accent);
color:var(--accent);
font-weight:500;
}
.intro-free-bonus-item--done{
opacity:.65;
cursor:default;
}
.intro-free-bonus-item--done:hover{
background:var(--bg2);
border-color:transparent;
}
/* ═══════════════════════════════════════════════════
BREATHING SHARE BUTTON
═══════════════════════════════════════════════════ */
.intro-breathe-done-share{
display:flex;align-items:center;justify-content:center;gap:.4rem;
background:transparent;border:1px solid var(--accent);color:var(--accent);
border-radius:12px;padding:.55rem 1rem;
font-family:inherit;font-size:.85rem;cursor:pointer;
width:100%;transition:background .15s,color .15s;
}
.intro-breathe-done-share:hover{background:var(--accent);color:var(--user-text)}
/* Botão partilha nos cards de meditação : no footer, não sobreposição */
.intro-library-card-foot{margin-top:.6rem;display:flex;align-items:center;gap:.5rem;justify-content:space-between}
.intro-library-card-foot-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.intro-library-card-share{
background:transparent;border:1px solid rgba(var(--accent-rgb),.3);
border-radius:8px;padding:.25rem .5rem;cursor:pointer;
color:var(--muted);transition:all .18s;
line-height:0;flex-shrink:0;
display:flex;align-items:center;gap:.3rem;
font-size:.72rem;font-family:'Instrument Sans',sans-serif;letter-spacing:.04em;
}
.intro-library-card-share:hover{
border-color:var(--accent);color:var(--accent);
background:rgba(var(--accent-rgb),.07);
}
/* Breathing list share button */
.intro-breathe-card-share{
display:flex;align-items:center;gap:.25rem;
background:transparent;border:1px solid rgba(var(--accent-rgb),.25);
border-radius:8px;padding:.25rem .55rem;
font-size:.72rem;font-family:'Instrument Sans',sans-serif;letter-spacing:.04em;
color:var(--muted);cursor:pointer;transition:all .18s;
margin-top:.5rem;
width:fit-content;
}
.intro-breathe-card-share:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.06)}
/* Share choice inline popup */
.intro-share-choice{
display:flex;flex-direction:column;gap:.4rem;
background:var(--card);border:1px solid var(--border);
border-radius:12px;padding:.7rem .9rem;
margin-top:.4rem;
box-shadow:0 4px 16px rgba(0,0,0,.2);
font-size:.82rem;
}
.intro-share-choice-title{color:var(--muted);font-size:.74rem;margin-bottom:.1rem}
.intro-share-choice-row{display:flex;gap:.4rem}
.intro-share-choice-btn{
flex:1;padding:.45rem .6rem;border-radius:8px;cursor:pointer;
font-family:inherit;font-size:.8rem;transition:all .15s;
border:1px solid var(--border);background:transparent;color:var(--text);
}
.intro-share-choice-btn.with-ref{border-color:var(--accent);background:rgba(var(--accent-rgb),.08);color:var(--accent)}
.intro-share-choice-btn.with-ref:hover{background:var(--accent);color:var(--user-text)}
.intro-share-choice-btn:hover{border-color:var(--muted)}
/* Conversa expandida no diário */
.intro-diary-entry-messages{
margin:.6rem 0;
display:flex;flex-direction:column;gap:.5rem;
max-height:320px;overflow-y:auto;
border-top:1px solid var(--border);padding-top:.7rem;
}
.intro-diary-msg{
display:flex;flex-direction:column;gap:.15rem;
max-width:90%;
}
.intro-diary-msg--user{align-self:flex-end;align-items:flex-end}
.intro-diary-msg--assistant{align-self:flex-start;align-items:flex-start}
.intro-diary-msg-who{
font-size:.68rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;
}
.intro-diary-msg-text{
font-size:.82rem;line-height:1.5;color:var(--text);
background:var(--bg2);border-radius:10px;padding:.5rem .75rem;
}
.intro-diary-msg--user .intro-diary-msg-text{
background:rgba(var(--accent-rgb),.15);
}
/* ================================================================
v8.0.0 : TABS, CREDITS BADGE, RESUMOS, FAB, EMBEDDED OVERLAYS
================================================================ */
/* Credits badge */
.intro-credits-badge{
display:inline-flex;align-items:center;gap:2px;
padding:3px 10px;border-radius:20px;
background:rgba(var(--accent-rgb),.1);
border:1px solid rgba(85,122,106,.4);
color:var(--accent);font-size:.75rem;font-weight:500;
cursor:pointer;font-family:inherit;
transition:background .2s,border-color .2s;
white-space:nowrap;
}
.intro-credits-badge:hover{background:rgba(var(--accent-rgb),.18);}
.intro-credits-badge--low{
background:rgba(192,57,43,.1);
border-color:rgba(192,57,43,.3);
color:#c0392b;
}
.intro-credits-badge--low:hover{background:rgba(192,57,43,.18);}
.intro-credits-unit{font-size:.68rem;opacity:.8;}
/* Tab nav */
#intro-tabs{
display:flex;align-items:stretch;
border-bottom:1px solid var(--border);
background:var(--bg2);
overflow-x:auto;
flex-shrink:0;
scrollbar-width:none;
}
#intro-tabs::-webkit-scrollbar{display:none;}
#intro-tabs{overflow-x:hidden}
#intro-tabs > .intro-tab{flex:1 1 0;min-width:0;text-align:center;padding:.55rem .15rem !important;font-size:.68rem !important}
.intro-tab{
background:none;border:none;border-bottom:2px solid transparent;
color:var(--muted);font-size:.78rem;font-weight:500;
font-family:inherit;padding:.6rem .9rem;
cursor:pointer;white-space:nowrap;
letter-spacing:.04em;
transition:color .18s,border-color .18s;
flex-shrink:0;
}
.intro-tab:hover{color:var(--text);}
.intro-tab--active{
color:var(--accent);
border-bottom-color:var(--accent);
}
/* Tab views */
#intro-view-resumos,
#intro-view-breath,
#intro-view-medit{
flex:1;flex-direction:column;
overflow:hidden;
animation:introFadeUp .2s ease;
}
#intro-view-resumos{overflow-y:auto;padding:.75rem;}
/* Loading / empty states */
.intro-view-loading{
padding:1.5rem;text-align:center;
font-size:.82rem;color:var(--muted);
}
.intro-view-empty{
padding:2rem 1.5rem;text-align:center;
font-size:.82rem;color:var(--muted);
line-height:1.6;flex-direction:column;
align-items:center;gap:.5rem;
}
/* Resumo cards */
.intro-resumo-card{
background:var(--card);
border:1px solid var(--border);
border-radius:14px;
padding:.9rem 1rem;
margin-bottom:.6rem;
cursor:pointer;
transition:border-color .18s,background .18s;
position:relative;
touch-action:pan-y; /* v8.55.0: permite o swipe horizontal sem bloquear o scroll vertical */
}
.intro-resumo-card:hover{
border-color:rgba(var(--accent-rgb),.5);
background:rgba(var(--accent-rgb),.05);
}
/* v8.55.0: ao deslizar para a direita além do limiar, dica visual de continuar */
.intro-resumo-card.irc-swipe-armed{
border-color:var(--accent);
box-shadow:-4px 0 0 0 var(--accent) inset;
}
.intro-resumo-card__actions .irc-act--continue{
background:var(--accent);
color:#141610;
border-color:var(--accent);
font-weight:600;
}
.intro-resumo-card__meta{
display:flex;justify-content:space-between;
align-items:center;margin-bottom:.45rem;
}
.intro-resumo-card__date{
font-size:.72rem;color:var(--muted);letter-spacing:.04em;
}
.intro-resumo-card__dur{
font-size:.68rem;color:var(--muted);opacity:.7;
}
.intro-resumo-card__title{
font-size:.88rem;color:var(--text);font-weight:500;
line-height:1.45;margin-bottom:.55rem;
}
.intro-resumo-card__emotions{
display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.55rem;
}
.intro-resumo-card__tag{
font-size:.68rem;color:var(--accent);font-style:italic;
background:rgba(var(--accent-rgb),.1);
border:1px solid rgba(85,122,106,.25);
border-radius:20px;padding:2px 8px;
}
.intro-resumo-card__cta{
font-size:.68rem;color:var(--accentDim,var(--accent));
opacity:.7;letter-spacing:.04em;text-align:right;
}
/* FAB scroll to bottom */
#intro-fab-bottom{
position:absolute;
bottom:calc(var(--input-h, 120px) + 12px);
right:12px;
width:36px;height:36px;
border-radius:50%;
background:var(--card);
border:1px solid var(--border);
color:var(--accent);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(0,0,0,.35);
z-index:20;
animation:introFadeUp .2s ease;
}
#intro-fab-bottom svg{width:16px;height:16px;}
/* Tilintar animation */
@keyframes introMsgTilintar{
0%,100%{background:transparent}
15%,45%,75%{background:rgba(var(--accent-rgb),.16)}
30%,60%,90%{background:transparent}
}
.intro-msg--tilintar{
animation:introMsgTilintar 2.8s ease;
border-radius:8px;
}
/* Embedded overlays (breathing / meditation shown inside tab) */
.intro-overlay--tab-embedded{
position:relative !important;
inset:auto !important;
z-index:auto !important;
height:100% !important;
max-height:none !important;
border-radius:0 !important;
animation:none !important;
flex:1;
}
#intro-view-breath .intro-overlay--tab-embedded,
#intro-view-medit .intro-overlay--tab-embedded{
display:flex !important;
flex-direction:column;
overflow-y:auto;
}
/* Hide the "x" overlay close button when embedded : we use tab instead */
#intro-view-breath .intro-overlay--tab-embedded #intro-breathe-overlay-close,
#intro-view-medit .intro-overlay--tab-embedded #intro-library-overlay-close{
display:none !important;
}
/* Ensure header layout accommodates credits badge */
#intro-header{
display:flex;align-items:center;
gap:.4rem;
padding:.55rem .75rem .5rem;
flex-shrink:0;
}
#intro-logo{flex:1;}
#intro-controls{display:flex;align-items:center;gap:.2rem;}
@keyframes introFadeUp{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
/* v8: respirar e meditações são agora tabs : esconder da action-row para evitar duplicação */
#intro-breathe-btn,
#intro-library-btn {
display: none !important;
}
/* v8: tab Respirações e Meditações : garantir scroll interno */
#intro-breath-tab-content,
#intro-medit-tab-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
#intro-view-breath,
#intro-view-medit {
padding: 0;
}
/* v8: breathing overlay embedded : remover posicionamento absoluto e deixar fluir */
.intro-overlay--tab-embedded {
border-radius: 0 !important;
}
/* Garantir que o overlay de lista de respirações preenche a tab */
#intro-breathe-overlay.intro-overlay--tab-embedded {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Garantir que o overlay da biblioteca preenche a tab */
#intro-library-overlay.intro-overlay--tab-embedded {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* ================================================================
v8.1.0 : BARRA INFERIOR, WAVE BARS, INCÓGNITO, INLINE TABS
================================================================ */
/* Esconder barras legacy no modo v8 */
.intro-v8 #intro-legacy-bars { display:none !important; }
/* -- V8 BAR -- */
#intro-v8-bar,
#intro-v8-bar-anon {
display:none;
align-items:flex-start;
justify-content:center;
justify-content:safe center;
gap:clamp(.3rem,2.2vw,.85rem);
padding:.9rem clamp(.4rem,3vw,1rem) 1rem;
background:var(--bg2);
border-top:1px solid var(--border);
flex-shrink:0;
overflow-x:auto;
scrollbar-width:none;
}
/* v8.27.0: separadores da barra escondidos (o JSX aprovado não os tem). */
#intro-v8-bar .intro-v8-sep, #intro-v8-bar-anon .intro-v8-sep { display:none !important; }
/* v8.29.0: pega discreta para recolher a barra de voz (preferência pessoal).
Centrada por cima da barra. Começa a apontar para baixo (recolher). */
#intro-v8-bar-toggle {
display:flex;align-items:center;justify-content:center;
width:46px;height:22px;margin:0 auto;padding:0;
background:none;border:none;cursor:pointer;
color:var(--muted);flex-shrink:0;
transition:color .18s, transform .2s;
}
#intro-v8-bar-toggle:hover { color:var(--text); }
#intro-v8-bar-toggle svg { width:22px;height:22px;transition:transform .25s ease; }
/* recolhida: a seta aponta para cima (mostrar) */
#intro-v8-bar-toggle.intro-v8-bar-toggle--collapsed svg { transform:rotate(180deg); }
/* barra recolhida: esconde os botões com transição suave */
#intro-v8-bar.intro-v8-bar--collapsed {
max-height:0;padding-top:0;padding-bottom:0;
overflow:hidden;opacity:0;
border-top-color:transparent;
pointer-events:none;
}
#intro-v8-bar {
transition:max-height .28s ease, opacity .2s ease, padding .28s ease;
max-height:200px;
}
#intro-v8-bar::-webkit-scrollbar,
#intro-v8-bar-anon::-webkit-scrollbar { display:none; }
/* v8.27.0: barra IGUAL ao JSX aprovado.
Cada botão = círculo com o ícone dentro + etiqueta por baixo.
O círculo é desenhado no próprio elemento do ícone (fundo + raio + tamanho),
sem precisar de wrappers novos no HTML. */
.intro-v8-btn {
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
gap:.45rem;
padding:0;
background:none;border:none;
color:var(--muted);font-size:.72rem;font-family:inherit;letter-spacing:.01em;
cursor:pointer;white-space:nowrap;flex-shrink:0;
border-radius:0;
transition:color .18s;
min-width:0;
}
/* círculo pequeno por defeito (Velocidade, Partilhar) */
.intro-v8-btn svg {
box-sizing:border-box;
width:clamp(40px,12.5vw,48px);height:clamp(40px,12.5vw,48px);padding:clamp(10px,3.2vw,12px);
border:1.5px solid var(--border);border-radius:50%;
background:var(--surface);color:var(--text);
transition:transform .16s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .3s ease;
}
/* botão Velocidade: o valor "1×" dentro do mesmo círculo */
#intro-v8-speed #intro-v8-speed-val {
box-sizing:border-box;
width:clamp(40px,12.5vw,48px);height:clamp(40px,12.5vw,48px);
border:1.5px solid var(--border);border-radius:50%;
background:var(--surface);color:var(--text);
display:grid;place-items:center;
font-size:clamp(.85rem,3.4vw,1rem);font-weight:500;
}
/* (todos os botoes ao mesmo tamanho: o Ouvir e o Falar deixaram de ser maiores) */
.intro-v8-btn:active svg,
.intro-v8-btn:active #intro-v8-speed-val { transform:scale(.92); }
.intro-v8-btn:hover { color:var(--text); }
/* GLOW afinavel, SO quando o botao esta activo (ligado): a cor e a forca vem do
painel (Faixa de som), entregues a cada botao em variaveis pela voz.
Desligado, nao ha glow nenhum. Sem afinacao, cai na cor de realce da casa. */
.intro-v8-btn.intro-v8-on > svg,
.intro-v8-btn--listening > svg,
.intro-v8-btn--active > svg {
box-shadow:0 0 var(--ivg-blur, 10px) var(--ivg-spread, 2px) var(--ivg-color, var(--accent));
border-color:var(--ivg-color, var(--accent));
}
/* Incógnito e Bloquear subiram para o header; esconder da barra. */
#intro-v8-bar #intro-v8-incognito,
#intro-v8-bar #intro-v8-lock { display:none !important; }
/* Estado activo do Ouvir e do Ditar: acendem com o mesmo glow afinado (cor e
forca do painel), anel da mesma cor, sobre o fundo escuro, igual a
pre-visualizacao. Sem cores fixas a tapar a escolha do Jonas. */
.intro-v8-btn--listen.intro-v8-btn--listening > svg,
.intro-v8-btn--listen.intro-v8-btn--active > svg,
.intro-v8-btn--speak.intro-v8-btn--speaking > svg,
.intro-v8-btn--speak.intro-v8-btn--active > svg {
box-shadow:0 0 var(--ivg-blur, 12px) var(--ivg-spread, 3px) var(--ivg-color, var(--accent));
border-color:var(--ivg-color, var(--accent));
}
.intro-v8-btn--listen.intro-v8-btn--listening,
.intro-v8-btn--listen.intro-v8-btn--active,
.intro-v8-btn--speak.intro-v8-btn--speaking,
.intro-v8-btn--speak.intro-v8-btn--active { color:var(--text); }
.intro-v8-btn--login {
color:var(--accent);
flex-direction:row;gap:6px;font-size:.8rem;font-weight:500;
border:1px solid var(--accent);border-radius:20px;
padding:.45rem 1rem;min-width:auto;
}
.intro-v8-sep {
width:1px;height:22px;background:var(--border);flex-shrink:0;margin:0 .1rem;
}
/* -- INCÓGNITO -- */
#intro-incognito-banner {
display:none;
align-items:center;gap:.6rem;
padding:.45rem .85rem;
background:rgba(90,80,140,.45);
border-bottom:1px solid rgba(90,80,140,.6);
font-size:.75rem;color:#b8aee8;
flex-shrink:0;
}
#intro-incognito-banner svg { width:14px;height:14px;flex-shrink:0;opacity:.8; }
#intro-incognito-label { flex:1; }
#intro-incognito-exit {
background:none;border:1px solid rgba(90,80,140,.5);
border-radius:12px;padding:2px 10px;
color:#b8aee8;font-size:.68rem;cursor:pointer;font-family:inherit;
transition:background .15s;
}
#intro-incognito-exit:hover { background:rgba(90,80,140,.25); }
.intro-light #intro-incognito-banner { color:#463a75; }
.intro-light #intro-incognito-exit { color:#463a75; border-color:rgba(90,80,140,.5); }
.intro-light #intro-incognito-exit:hover { background:rgba(90,80,140,.14); }
.intro-incognito #intro-logo { color:#b8aee8 !important; }
.intro-incognito #intro-tabs { background:rgba(90,80,140,.15); }
.intro-incognito .intro-tab--active { color:#b8aee8;border-bottom-color:#b8aee8; }
/* No incognito a conversa nao fica registada: nao ha o que ver nem apagar, mas o continuar serve para trazer o resumo. */
.intro-incognito .irc-act--view,
.intro-incognito .irc-act--del { display:none !important; }
/* Modal "Trazer este resumo" (continuar daqui) */
.intro-pull-pill{display:inline-flex;align-items:center;gap:6px;background:var(--accent-dim);color:var(--accent);border-radius:999px;padding:5px 12px;font-size:12px;margin-bottom:14px}
.intro-pull-opts,.intro-pull-focus{display:flex;flex-direction:column;gap:9px}
.intro-pull-act{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;transition:opacity .15s}
.intro-pull-act:hover{opacity:.9}
.intro-pull-act .ipa-t{display:block;font-size:14px;font-weight:500;color:var(--text)}
.intro-pull-act .ipa-d{display:block;font-size:12px;margin-top:3px;color:var(--muted)}
.intro-pull-act--accent .ipa-t{color:var(--accent)}
.intro-pull-act--main{background:var(--accent-dim);border-color:var(--accent)}
.intro-pull-act--main .ipa-t{color:var(--accent)}
.intro-pull-focus-q{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--accent);margin-bottom:2px}
.intro-pull-input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 13px;font-size:14px;color:var(--text);outline:none;box-sizing:border-box}
.intro-pull-input:focus{border-color:var(--accent)}
.intro-pull-back{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:4px;align-self:center}
/* -- TAB HEADER -- */
.intro-tab-header {
padding:1rem .25rem .6rem;
text-align:center;
flex-shrink:0;
}
.intro-tab-title {
font-family:'Bricolage Grotesque',serif;
font-size:1.5rem;font-weight:300;
letter-spacing:.08em;color:var(--text);
margin-bottom:.3rem;
}
.intro-tab-sub { font-size:.8rem;color:var(--muted);font-style:italic; }
/* -- RESPIRAÇÕES INLINE -- */
#intro-breath-tab-content,
#intro-medit-tab-content {
display:flex;flex-direction:column;
flex:1;overflow-y:auto;padding:.5rem .75rem;
}
.intro-breath-card-v8 {
background:var(--card);border:1px solid var(--border);
border-radius:14px;padding:.9rem 1rem;margin-bottom:.6rem;
transition:border-color .18s;
}
.intro-breath-card-v8:hover { border-color:rgba(var(--accent-rgb),.4); }
.ibcv8-top { display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.5rem; }
.ibcv8-dot {
width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:3px;
background:var(--card-accent,var(--accent));
}
.ibcv8-name { font-size:.9rem;font-weight:500;color:var(--text);line-height:1.3; }
.ibcv8-rhythm { font-size:.72rem;color:var(--muted);margin-top:2px; }
.ibcv8-desc { font-size:.78rem;color:var(--muted);line-height:1.5;margin-bottom:.7rem; }
.ibcv8-actions { display:flex;gap:.5rem;justify-content:flex-end; }
.ibcv8-share,.ibcv8-start {
background:none;border:1px solid var(--border);
border-radius:20px;padding:4px 12px;
font-size:.72rem;cursor:pointer;font-family:inherit;
transition:all .15s;
}
.ibcv8-share { color:var(--muted); }
.ibcv8-start {
background:var(--card-accent,var(--accent));
border-color:var(--card-accent,var(--accent));
color:#0c0c0c;font-weight:500;
}
.ibcv8-start:hover { opacity:.85; }
/* Exercício de respiração inline */
.intro-breath-ex {
display:flex;flex-direction:column;align-items:center;
flex:1;padding:1rem .5rem 1.5rem;gap:1rem;
}
.ibe-back {
align-self:flex-start;background:none;border:none;
color:var(--muted);font-size:.8rem;cursor:pointer;
display:flex;align-items:center;gap:.4rem;font-family:inherit;
padding:.2rem 0;
}
.ibe-back:hover { color:var(--text); }
.ibe-circle-wrap {
width:180px;height:180px;flex-shrink:0;margin-top:auto;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
}
.ibe-circle {
width:120px;height:120px;border-radius:50%;
background:radial-gradient(circle,rgba(var(--accent-rgb),.7),rgba(var(--accent-rgb),.28) 55%,rgba(var(--accent-rgb),0));
background:radial-gradient(circle,color-mix(in srgb,var(--ex-accent,var(--accent)) 70%,transparent),color-mix(in srgb,var(--ex-accent,var(--accent)) 28%,transparent) 55%,transparent);
box-shadow:0 0 50px 8px color-mix(in srgb,var(--ex-accent,var(--accent)) 32%,transparent);
transition:transform 5s ease-in-out;
}
.ibe-phase { font-size:1.3rem;color:var(--text);font-weight:300;letter-spacing:.05em; }
.ibe-sub { font-size:.78rem;color:var(--muted);margin-bottom:auto; }
.ibe-foot { margin-top:auto; }
.ibe-start-btn {
background:color-mix(in srgb,var(--ex-accent,var(--accent)) 22%,transparent);
border:1px solid color-mix(in srgb,var(--ex-accent,var(--accent)) 55%,transparent);
color:var(--ex-accent,var(--accent));
border-radius:20px;padding:.55rem 1.8rem;
font-size:.88rem;cursor:pointer;font-family:inherit;
}
/* -- MEDITAÇÕES INLINE -- */
.intro-medit-card-v8 {
position:relative;
background:var(--card);border:1px solid var(--border);
border-radius:18px;padding:1.05rem 1.1rem;margin-bottom:.7rem;
display:flex;align-items:center;gap:1.05rem;cursor:pointer;
transition:border-color .18s;
}
.intro-medit-card-v8:hover { border-color:color-mix(in srgb,var(--mc-accent,var(--accent)) 40%,transparent); }
.imcv8-halo { position:relative;flex-shrink:0; }
.imcv8-halo::before {
content:'';position:absolute;inset:-8px;border-radius:50%;
background:radial-gradient(circle, color-mix(in srgb,var(--mc-accent,var(--accent)) 30%,transparent), transparent 68%);
}
.imcv8-play {
position:relative;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:3px;
}
.imcv8-info { flex:1;min-width:0; }
.imcv8-top { display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem;margin-bottom:5px; }
.imcv8-name {
font-family:'Bricolage Grotesque',serif;font-size:1.28rem;font-weight:500;
color:var(--text);line-height:1.12;flex:1;min-width:0;
}
.imcv8-desc { font-size:.8rem;color:var(--muted);line-height:1.45;margin-bottom:.5rem; }
.imcv8-foot { display:flex;align-items:center;justify-content:space-between;gap:.5rem; }
.imcv8-meta { font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500; }
.imcv8-share {
background:none;border:none;color:var(--muted);cursor:pointer;
padding:.3rem;flex-shrink:0;opacity:.7;transition:opacity .15s;
}
.imcv8-share svg { width:17px;height:17px; }
.imcv8-share:hover { opacity:1; }
.imcv8-selo {
flex:none;margin-top:3px;
font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.imcv8-selo--free { color:#0A0E0C;background:var(--mc-accent,var(--accent)); }
.imcv8-selo--login { color:var(--mc-accent,var(--accent));background:transparent;border:1px solid color-mix(in srgb,var(--mc-accent,var(--accent)) 40%,transparent); }
.imcv8-selo--locked { color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--border); }
/* Player de meditação */
.intro-medit-player {
display:flex;flex-direction:column;align-items:center;
flex:1;min-height:0;padding:.5rem 1rem .8rem;gap:.2rem;
}
.imp-back {
align-self:flex-start;background:none;border:none;
color:var(--muted);font-size:.8rem;cursor:pointer;
display:flex;align-items:center;gap:.4rem;font-family:inherit;
}
.imp-back:hover { color:var(--text); }
.imp-ringwrap {
position:relative;flex-shrink:0;
width:min(82vw, 37vh, 308px);height:min(82vw, 37vh, 308px);
display:flex;align-items:center;justify-content:center;margin:.4rem auto;
}
.imp-ring { width:100%;height:100%;position:relative;z-index:2;touch-action:none;cursor:grab; }
.imp-ring:active { cursor:grabbing; }
.imp-progress { transition:stroke-dashoffset .1s linear; }
.imp-dot { transition:r .2s ease, fill .2s ease; pointer-events:none; }
.imp-dot-halo { pointer-events:none; }
.imp-halo {
position:absolute;width:74%;aspect-ratio:1;border-radius:50%;z-index:1;opacity:0;
background:radial-gradient(circle, color-mix(in srgb,var(--mp-accent,var(--accent)) 20%,transparent) 0%, transparent 68%);
}
.imp-halo--on { animation:impBreathe 7.5s ease-in-out infinite; }
@keyframes impBreathe {
0%,100% { transform:scale(.86); opacity:.35; }
50% { transform:scale(1.12); opacity:.8; }
}
.imp-center {
position:absolute;inset:0;z-index:3;pointer-events:none;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:0 19%;
}
.imp-bigsub { font-family:'Bricolage Grotesque',serif;font-weight:300;font-size:1.8rem;line-height:1.18;color:var(--text); }
.imp-mini { font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.6rem;font-weight:300; }
.imp-steps { display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin:.1rem 0;max-width:94%; }
.imp-step {
width:26px;height:26px;border-radius:50%;padding:0;border:none;cursor:pointer;flex:none;
background:transparent;display:flex;align-items:center;justify-content:center;
-webkit-tap-highlight-color:transparent;
}
.imp-step::before {
content:'';width:8px;height:8px;border-radius:50%;
background:rgba(var(--accent-rgb),0.28);transition:transform .2s, background .2s;
}
.imp-step--done::before { background:color-mix(in srgb,var(--mp-accent,var(--accent)) 55%,transparent); }
.imp-step--on::before { background:var(--mp-accent,var(--accent));transform:scale(1.6); }
.imp-controls { display:flex;align-items:center;gap:1.6rem;margin:.15rem 0; }
.imp-reset,.imp-share {
width:46px;height:46px;border-radius:50%;
background:transparent;border:1px solid color-mix(in srgb,var(--mp-accent,var(--accent)) 30%,transparent);
color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.imp-reset:hover,.imp-share:hover { border-color:var(--accent);color:var(--text); }
.imp-play {
width:74px;height:74px;border-radius:50%;
background:var(--mp-accent,var(--accent));border:none;color:#08110d;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:box-shadow .2s;
}
.imp-play:hover { box-shadow:0 8px 30px color-mix(in srgb,var(--mp-accent,var(--accent)) 35%,transparent); }
.imp-speed { display:flex;align-items:center;justify-content:center;gap:1.1rem;margin:.1rem 0; }
.imp-chip {
font-family:inherit;font-size:.74rem;color:var(--muted);
background:transparent;border:1px solid var(--border);border-radius:20px;
padding:4px 13px;cursor:pointer;transition:all .15s;
}
.imp-chip:hover { color:var(--text);border-color:var(--muted); }
.imp-chip--on { color:#0A0E0C;background:var(--mp-accent,var(--accent));border-color:var(--mp-accent,var(--accent)); }
.imp-speedlabel { text-align:center;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);opacity:.7;margin:.5rem 0 .2rem; }
.imp-spd { display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:none;padding:0;background:var(--mp-accent,var(--accent));color:#0A0E0C;cursor:pointer;transition:opacity .15s,transform .1s; }
.imp-spd:hover { transform:scale(1.06); }
.imp-spd:active { transform:scale(.95); }
.imp-spd:disabled { opacity:.32;cursor:default;transform:none; }
.imp-spdval { min-width:3.4rem;text-align:center;font-size:1.15rem;color:var(--text);font-variant-numeric:tabular-nums; }
.imp-hint { margin:.6rem auto .2rem;text-align:center;font-size:.7rem;line-height:1.45;color:var(--muted);opacity:.65;font-weight:300;max-width:80%; }
@media (prefers-reduced-motion: reduce) { .imp-halo--on { animation:none;opacity:.5; } }
/* Resumo card actions */
.intro-resumo-card__actions {
display:flex;gap:.4rem;margin-top:.65rem;flex-wrap:wrap;
}
.irc-act {
background:none;border:1px solid var(--border);
border-radius:20px;padding:3px 10px;
font-size:.68rem;color:var(--muted);cursor:pointer;
font-family:inherit;transition:all .15s;
}
.irc-act:hover { color:var(--text);border-color:var(--muted); }
.irc-act--view:hover { color:var(--accent);border-color:var(--accent); }
.irc-act--del:hover { color:#c0392b;border-color:#c0392b; }
.irc-act--delall:hover { color:#c0392b;border-color:#c0392b;background:rgba(192,57,43,.08); }
/* v8 desktop: tab views fill height within centered column */
@media (min-width: 900px) {
#intro-view-resumos,
#intro-view-breath,
#intro-view-medit {
flex: 1;
overflow-y: auto;
}
#intro-breath-tab-content,
#intro-medit-tab-content {
max-width: 640px;
margin: 0 auto;
width: 100%;
}
}
@media (min-width: 1280px) {
#intro-breath-tab-content,
#intro-medit-tab-content {
max-width: 680px;
}
}
/* ================================================================
v8.1.4 : BREATHING CIRCLE STATES + MEDITATION PLAYER UPGRADES
================================================================ */
/* Breathing: circle is interactive */
.ibe-circle {
cursor: pointer;
user-select: none;
}
.ibe-circle:hover { opacity: .9; }
.ibe-circle--running {
box-shadow: 0 0 64px 14px color-mix(in srgb, var(--ex-accent,var(--accent)) 45%, transparent);
}
.ibe-circle--paused {
opacity: .7;
box-shadow: 0 0 40px 6px color-mix(in srgb, var(--ex-accent,var(--accent)) 24%, transparent);
}
.ibe-circle--done {
box-shadow: 0 0 56px 12px color-mix(in srgb, var(--ex-accent,var(--accent)) 38%, transparent);
opacity: .85;
}
/* Os estilos antigos de pre-start, velocidade e segmentos foram substituidos
pelo anel navegavel (.imp-ringwrap, .imp-dot, .imp-chip, etc.) acima. */
/* ================================================================
v8.2.1 : SONS TAB (SVGs, single sound, presets, duck logic)
================================================================ */
/* Active dot on tab */
.intro-tab--sons { position: relative; }
#intro-sons-active-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
display: inline-block;
margin-left: 4px; vertical-align: middle;
animation: sonsActivePulse 2s ease-in-out infinite;
}
@keyframes sonsActivePulse {
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.4;transform:scale(.65)}
}
/* Sons view */
#intro-view-sons { flex:1; flex-direction:column; overflow-y:auto; padding:.6rem .75rem 1.5rem; }
#intro-sons-content { width:100%; }
/* -- Master controls ------------------------------------------- */
.sons-master {
background:var(--card); border:1px solid var(--border);
border-radius:14px; padding:.85rem 1rem; margin-bottom:1rem;
}
/* Preset row */
.sons-preset-row {
display:flex; gap:.4rem; margin-bottom:.7rem; flex-wrap:wrap;
}
.sons-preset {
flex:1; background:transparent; border:1px solid var(--border);
border-radius:20px; padding:5px 0;
font-size:.72rem; color:var(--muted); cursor:pointer;
font-family:inherit; transition:all .15s; text-align:center;
}
.sons-preset:hover { color:var(--text); border-color:var(--muted); }
.sons-preset--active {
background:color-mix(in srgb,var(--accent) 14%,transparent);
border-color:var(--accent); color:var(--accent); font-weight:500;
}
/* Slider row */
.sons-master-row {
display:flex; align-items:center; gap:.65rem; margin-bottom:.6rem;
}
.sons-vol-slider {
flex:1; -webkit-appearance:none; appearance:none;
height:3px; background:var(--border); border-radius:2px;
outline:none; cursor:pointer;
}
.sons-vol-slider::-webkit-slider-thumb {
-webkit-appearance:none; width:14px; height:14px;
border-radius:50%; background:var(--accent); cursor:pointer;
}
.sons-master-val { font-size:.72rem; color:var(--accent); min-width:30px; text-align:right; }
/* Sleep row */
.sons-sleep-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sons-master-label { font-size:.7rem; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.sons-sleep-btns { display:flex; gap:.35rem; flex-wrap:wrap; }
.sons-sleep {
background:transparent; border:1px solid var(--border);
border-radius:20px; padding:3px 10px;
font-size:.68rem; color:var(--muted);
cursor:pointer; font-family:inherit; transition:all .15s;
}
.sons-sleep:hover { color:var(--text); border-color:var(--muted); }
.sons-sleep--active { border-color:var(--accent); color:var(--accent); }
/* -- Categories + grid ---------------------------------------- */
.sons-category { margin-bottom:1rem; }
.sons-cat-label {
font-size:.63rem; color:var(--muted); letter-spacing:.09em;
margin-bottom:.5rem; padding-left:.1rem;
}
.sons-grid {
display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem;
}
@media(min-width:480px){ .sons-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:700px){ .sons-grid{ grid-template-columns:repeat(5,1fr); } }
/* -- Sound card ------------------------------------------------ */
.sons-card {
background:var(--card); border:1px solid var(--border);
border-radius:12px; padding:.7rem .5rem .55rem;
display:flex; flex-direction:column; align-items:center; gap:.3rem;
cursor:pointer; transition:border-color .2s, background .2s;
user-select:none;
}
.sons-card:hover { border-color:rgba(var(--accent-rgb),.35); background:rgba(var(--accent-rgb),.04); }
.sons-card--on {
border-color:var(--accent) !important;
background:color-mix(in srgb,var(--accent) 8%,transparent) !important;
}
/* SVG icon */
.sons-card-icon {
width:28px; height:28px; display:flex; align-items:center; justify-content:center;
color:var(--muted); transition:color .2s;
}
.sons-card-icon svg { width:22px; height:22px; }
.sons-card--on .sons-card-icon { color:var(--accent); }
/* Name */
.sons-name {
font-size:.64rem; color:var(--muted); text-align:center;
transition:color .2s; line-height:1.2;
}
.sons-card--on .sons-name { color:var(--text); }
/* Wave bars : visible only when active */
.sons-bars {
display:flex; align-items:flex-end; gap:1.5px; height:9px; opacity:0;
transition:opacity .3s;
}
.sons-card--on .sons-bars { opacity:1; }
.sons-bars i {
display:block; width:2px; background:var(--accent);
border-radius:1px;
animation:sonsBarAnim .65s ease-in-out infinite;
}
.sons-bars i:nth-child(1){height:30%;animation-delay:0s;animation-duration:.7s}
.sons-bars i:nth-child(2){height:90%;animation-delay:.14s;animation-duration:.55s}
.sons-bars i:nth-child(3){height:55%;animation-delay:.07s;animation-duration:.8s}
.sons-bars i:nth-child(4){height:80%;animation-delay:.21s;animation-duration:.6s}
@keyframes sonsBarAnim {
0%,100%{transform:scaleY(.25)}
50%{transform:scaleY(1.3)}
}
/* ================================================================
v8.2.3 : SETTINGS PANEL, INCOGNITO MODAL, RESUMO CARD UPDATES
================================================================ */
/* -- Shared bottom sheet --------------------------------------- */
#intro-settings-panel,
#intro-incognito-modal {
position: fixed; inset: 0; z-index: 100010;
display: none; align-items: flex-end; justify-content: center;
background: rgba(0,0,0,.55);
backdrop-filter: blur(3px);
}
#intro-settings-sheet,
#intro-incognito-sheet {
background: var(--card);
border: 1px solid var(--border);
border-radius: 20px 20px 0 0;
width: 100%; max-width: 640px;
margin-left: auto; margin-right: auto;
padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 1rem);
transform: translateY(100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
max-height: 90vh;
overflow-y: auto;
}
/* v8.25.0: reordenação da hierarquia do menu por CSS, sem mexer no HTML nem
nos id's (que o JavaScript usa). O sheet passa a flex-column e cada secção
ordena-se pelo seu data-order. Handle, título e botão Fechar ficam fixos. */
/* Créditos saíram do header para o rodapé no novo desenho. Ocultar o badge do
topo sem o remover, para não partir o JS que actualiza o valor. */
#intro-credits-btn { display: none !important; }
#intro-settings-sheet { display: flex; flex-direction: column; }
#intro-settings-sheet .isp-handle { order: -100; }
#intro-settings-sheet .isp-title { order: -99; }
#intro-settings-sheet .isp-close-btn { order: 999; }
#intro-settings-sheet .isp-section[data-order="10"] { order: 10; }
#intro-settings-sheet .isp-section[data-order="15"] { order: 15; }
#intro-settings-sheet .isp-section[data-order="20"] { order: 20; }
#intro-settings-sheet .isp-section[data-order="25"] { order: 25; }
#intro-settings-sheet .isp-section[data-order="30"] { order: 30; }
#intro-settings-sheet .isp-section[data-order="40"] { order: 40; }
#intro-settings-sheet .isp-section[data-order="50"] { order: 50; }
#intro-settings-sheet .isp-section[data-order="60"] { order: 60; }
#intro-settings-sheet .isp-section[data-order="61"] { order: 61; }
#intro-settings-sheet .isp-section[data-order="62"] { order: 62; }
#intro-settings-sheet .isp-section[data-order="70"] { order: 70; }
#intro-settings-sheet .isp-section[data-order="80"] { order: 80; }
#intro-settings-sheet .isp-section[data-order="90"] { order: 90; }
#intro-settings-sheet .isp-section[data-order="95"] { order: 95; }
#intro-settings-sheet .isp-section[data-order="100"] { order: 100; }
.intro-panel--open #intro-settings-sheet,
.intro-panel--open #intro-incognito-sheet {
transform: translateY(0);
}
.isp-handle {
width: 44px; height: 5px; border-radius: 3px;
background: var(--muted);
opacity: .55;
margin: .75rem auto .5rem;
flex-shrink: 0;
}
#intro-settings-sheet .isp-handle {
position: sticky; top: 0; z-index: 5;
padding: 0; margin-top: .75rem;
}
.isp-title, .iim-title {
font-family: 'Bricolage Grotesque', serif;
font-size: 1.25rem; font-weight: 300;
text-align: center;
padding: .4rem 1.5rem .8rem;
color: var(--text);
}
/* Settings sections */
.isp-section {
border-top: 1px solid var(--border);
padding: .5rem 0;
}
.isp-section-label {
font-size: .62rem; letter-spacing: .1em;
color: var(--muted); padding: .5rem 1.2rem .3rem;
}
.isp-row {
display: flex; align-items: center; gap: .9rem;
width: 100%; background: none; border: none;
padding: .75rem 1.2rem;
color: var(--text); font-size: .88rem;
cursor: pointer; font-family: inherit;
text-align: left; transition: background .15s;
}
.isp-row svg { flex-shrink: 0; color: var(--muted); }
.isp-row:hover { background: rgba(255,255,255,.04); }
.isp-row--danger { color: #c0392b; }
.isp-row--danger svg { color: #c0392b; }
.isp-info-row {
display: flex; justify-content: space-between; align-items: center;
padding: .55rem 1.2rem;
font-size: .8rem; color: var(--muted);
}
.isp-link { color: var(--accent); text-decoration: none; font-size: .8rem; }
.isp-link:hover { text-decoration: underline; }
/* Campos de pagamento */
.isp-payment-field {
padding: .4rem 1.2rem .2rem;
display: flex;
flex-direction: column;
gap: .25rem;
}
.isp-field-label {
font-size: .75rem;
color: var(--muted);
letter-spacing: .04em;
text-transform: uppercase;
}
.isp-field-input {
background: rgba(255,255,255,.05);
border: 1px solid var(--border);
border-radius: 8px;
padding: .55rem .8rem;
color: var(--text);
font-size: .92rem;
font-family: inherit;
width: 100%;
box-sizing: border-box;
}
.isp-field-input:focus {
outline: none;
border-color: var(--accent);
}
.isp-action-btn {
display: block;
width: calc(100% - 2.4rem);
margin: 0 1.2rem .35rem;
padding: .65rem .8rem;
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 8px;
cursor: pointer;
font-size: .92rem;
font-family: inherit;
transition: background .15s, opacity .15s;
}
.isp-action-btn:hover { background: rgba(143, 179, 160, .08); }
.isp-action-btn:disabled { opacity: .55; cursor: default; }
.isp-action-btn + .isp-info-sub { margin-bottom: .8rem; }
.isp-info-sub {
color: var(--muted);
font-size: .78rem;
line-height: 1.4;
padding: 0 1.2rem;
margin-bottom: .4rem;
}
/* OS MEUS DADOS : listas e captcha */
.ids-list {
margin: .4rem 0 1rem 1.2rem;
padding-left: 1rem;
color: var(--text);
font-size: .9rem;
line-height: 1.55;
}
.ids-list li {
margin-bottom: .25rem;
}
.ids-math {
display: flex;
align-items: center;
gap: 1rem;
margin: 1rem 0;
font-size: 1.4rem;
font-weight: 300;
}
.ids-math span {
color: var(--text);
letter-spacing: .04em;
}
.ids-math input {
flex: 1;
max-width: 140px;
text-align: center;
font-size: 1.4rem;
}
.ids-check-row {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: 1rem 0;
cursor: pointer;
color: var(--text);
font-size: .92rem;
line-height: 1.5;
}
.ids-check-row input[type="checkbox"] {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 1px;
accent-color: #c0392b;
cursor: pointer;
}
.ids-nuclear-btn {
background: #c0392b !important;
color: #fff !important;
border-color: #c0392b !important;
}
.ids-nuclear-btn:disabled {
background: #6e6e6e !important;
border-color: #6e6e6e !important;
cursor: not-allowed;
opacity: .6;
}
/* OS MEUS FEEDBACKS : cartões de histórico */
.myfb-item {
border: 1px solid var(--border);
border-radius: 8px;
padding: .7rem .8rem;
margin-bottom: .5rem;
background: rgba(255,255,255,.02);
}
.myfb-item-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: .78rem;
color: var(--muted);
margin-bottom: .4rem;
}
.myfb-status {
padding: 2px 8px;
border-radius: 100px;
font-size: .72rem;
font-weight: 500;
letter-spacing: .03em;
}
.myfb-status--pending { background: rgba(212, 176, 96, .15); color: #d4b060; }
.myfb-status--accepted { background: rgba(143, 179, 160, .15); color: var(--accent); }
.myfb-status--rejected { background: rgba(180, 180, 180, .12); color: var(--muted); }
.myfb-status--flagged { background: rgba(200, 130, 80, .15); color: #c88250; }
.myfb-preview {
color: var(--text);
font-size: .9rem;
line-height: 1.5;
margin-bottom: .4rem;
}
.myfb-meta {
font-size: .75rem;
color: var(--muted);
display: flex;
justify-content: space-between;
align-items: center;
}
.myfb-bonus {
color: var(--accent);
font-weight: 500;
}
.myfb-delete {
background: transparent;
border: none;
color: var(--muted);
font-size: .75rem;
cursor: pointer;
text-decoration: underline;
}
.myfb-delete:hover { color: #c0392b; }
.isp-close-btn {
display: block; width: calc(100% - 2.4rem);
margin: .8rem 1.2rem 0;
background: transparent; border: 1px solid var(--border);
border-radius: 20px; padding: .65rem;
color: var(--muted); font-size: .85rem;
cursor: pointer; font-family: inherit;
transition: all .15s;
}
.isp-close-btn:hover { border-color: var(--muted); color: var(--text); }
/* -- Incognito modal ------------------------------------------- */
.iim-desc {
font-size: .8rem; color: var(--muted);
text-align: center; padding: 0 1.5rem .8rem;
line-height: 1.5;
}
.iim-options { padding: .3rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.iim-opt {
display: flex; align-items: flex-start; gap: .85rem;
background: var(--bg2); border: 1px solid var(--border);
border-radius: 14px; padding: .9rem 1rem;
cursor: pointer; text-align: left; font-family: inherit;
transition: border-color .18s, background .18s;
color: var(--text);
}
.iim-opt svg { flex-shrink: 0; color: var(--muted); margin-top: 2px; }
.iim-opt:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),.05); }
.iim-opt:hover svg { color: var(--accent); }
.iim-opt-name { font-size: .88rem; font-weight: 500; margin-bottom: .25rem; }
.iim-opt-desc { font-size: .75rem; color: var(--muted); line-height: 1.45; }
/* -- Resumo card: time + new action layout --------------------- */
.intro-resumo-card__actions {
display: flex; gap: .4rem; margin-top: .65rem;
justify-content: flex-end; /* right-aligned */
}
.irc-act--view {
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-color: var(--accent) !important;
color: var(--accent) !important;
font-weight: 500;
}
.irc-act--view:hover {
background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
}
/* Inline confirmation */
.irc-confirm {
display: flex; align-items: center; gap: .5rem;
margin-top: .6rem; padding-top: .6rem;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.irc-confirm-msg { font-size: .72rem; color: var(--muted); flex: 1; min-width: 150px; }
.irc-confirm-yes, .irc-confirm-no {
background: none; border: 1px solid var(--border);
border-radius: 20px; padding: 3px 12px;
font-size: .72rem; cursor: pointer; font-family: inherit;
transition: all .15s;
}
.irc-confirm-yes { color: #c0392b; border-color: #c0392b; }
.irc-confirm-yes:hover { background: rgba(192,57,43,.1); }
.irc-confirm-no:hover { border-color: var(--muted); color: var(--text); }
/* ================================================================
v8.2.4 : SESSION WARNING BANNER
================================================================ */
.intro-session-warn {
display: flex; align-items: center; gap: .55rem;
padding: .48rem .85rem;
background: rgba(60, 110, 175, .11);
border-bottom: 1px solid rgba(60, 110, 175, .22);
font-size: .74rem; color: #85acd4;
flex-shrink: 0;
max-width: 640px; margin: 0 auto; width: 100%;
box-sizing: border-box;
flex-wrap: nowrap;
}
.intro-session-warn svg { flex-shrink:0; opacity:.75; width:14px; height:14px; }
.intro-session-warn span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.isw-btn {
background: none; border: 1px solid rgba(60,110,175,.4);
border-radius: 12px; padding: 2px 9px;
color: #85acd4; font-size: .68rem; cursor: pointer;
font-family: inherit; transition: background .15s; white-space: nowrap;
flex-shrink: 0;
}
.isw-btn:hover { background: rgba(60,110,175,.15); }
.isw-btn--close { border: none; padding: 2px 6px; font-size: .85rem; opacity: .55; flex-shrink: 0; }
.intro-session-readonly #intro-input { opacity: .5; }
/* v8.8.7: botão "Assumir aqui" inline, próximo do input.
Aparece quando a sessão está bloqueada por outro dispositivo/separador,
garantindo que o utilizador vê a acção mesmo sem fazer scroll ao topo. */
.intro-session-take-inline {
position: absolute;
right: 56px; /* à esquerda do botão enviar */
bottom: 50%;
transform: translateY(50%);
background: rgba(60,110,175,.18);
border: 1px solid rgba(60,110,175,.5);
color: #85acd4;
padding: 5px 11px;
border-radius: 14px;
font-size: .72rem;
font-weight: 500;
cursor: pointer;
font-family: inherit;
z-index: 10;
animation: takeInlinePulse 2.4s ease-in-out infinite;
}
.intro-session-take-inline:hover { background: rgba(60,110,175,.32); }
@keyframes takeInlinePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(60,110,175,.4); }
50% { box-shadow: 0 0 0 5px rgba(60,110,175,0); }
}
/* ================================================================
v8.2.6 : SETTINGS PANEL: A11Y, ACCORDIONS, CREDITS, GUIDE
================================================================ */
/* Row with sub-hint */
.isp-row-text { display:flex; flex-direction:column; }
.isp-row-hint { font-size:.68rem; color:var(--muted); margin-top:2px; }
/* Accessibility grid */
.isp-a11y-grid { padding:.2rem 1.2rem .4rem; display:flex; flex-direction:column; gap:.2rem; }
.isp-a11y-row, .isp-toggle-row {
display:flex; align-items:center; justify-content:space-between;
padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.isp-a11y-label { font-size:.85rem; color:var(--text); }
/* Font size buttons */
.isp-font-btns { display:flex; gap:.35rem; }
.isp-font-btn {
background:transparent; border:1px solid var(--border);
border-radius:8px; cursor:pointer; font-family:inherit;
color:var(--muted); transition:all .15s; line-height:1;
}
.isp-font-btn:nth-child(1){ font-size:.68rem; padding:4px 10px; letter-spacing:0; }
.isp-font-btn:nth-child(2){ font-size:.82rem; padding:4px 9px; letter-spacing:0; }
.isp-font-btn:nth-child(3){ font-size:.96rem; padding:4px 8px; letter-spacing:0; font-weight:500; }
.isp-font-btn--active { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); }
/* Toggle switch */
.isp-toggle-input { display:none; }
.isp-toggle-track {
width:38px; height:20px; border-radius:10px;
background:var(--border); cursor:pointer;
position:relative; flex-shrink:0; transition:background .2s;
}
.isp-toggle-track::after {
content:''; position:absolute;
width:14px; height:14px; border-radius:50%;
background:#fff; top:3px; left:3px;
transition:transform .2s;
}
.isp-toggle-input:checked + .isp-toggle-track { background:var(--accent); }
.isp-toggle-input:checked + .isp-toggle-track::after { transform:translateX(18px); }
/* Accordion */
.isp-accordion {
display:flex; align-items:center; justify-content:space-between;
width:100%; background:none; border:none;
padding:.75rem 1.2rem;
color:var(--text); font-size:.88rem;
cursor:pointer; font-family:inherit; text-align:left;
transition:background .15s;
}
.isp-accordion:hover { background:rgba(255,255,255,.03); }
.isp-acc-arrow { transition:transform .2s; color:var(--muted); flex-shrink:0; }
.isp-accordion--open .isp-acc-arrow { transform:rotate(180deg); }
.isp-acc-body { padding:.2rem 1.2rem .8rem; }
/* Credits section */
.isp-credits-item {
display:flex; align-items:flex-start; gap:.55rem;
padding:.45rem 0; font-size:.78rem; color:var(--muted); line-height:1.45;
}
.isp-credits-item svg { flex-shrink:0; margin-top:2px; }
.isp-credits-paid svg { color:#d4b060; }
.isp-credits-free svg { color:var(--accent); }
.isp-credits-divider {
font-size:.65rem; letter-spacing:.08em; color:var(--muted);
padding:.5rem 0 .3rem; text-transform:uppercase;
border-top:1px solid var(--border); margin-top:.3rem;
}
.isp-credits-note {
font-size:.72rem; color:var(--muted); font-style:italic;
padding:.6rem 0 0; border-top:1px solid var(--border); margin-top:.3rem;
line-height:1.5;
}
/* Guide section */
.isp-guide-section { margin-bottom:.9rem; }
.isp-guide-title { font-size:.72rem; letter-spacing:.08em; color:var(--accent); text-transform:uppercase; margin-bottom:.3rem; }
.isp-guide-item { font-size:.78rem; color:var(--muted); padding:.2rem 0; line-height:1.5; }
.isp-guide-item strong { color:var(--text); }
/* Accessibility applied classes */
.intro-a11y-contrast { filter:contrast(1.15); }
.intro-a11y-reading .intro-msg { line-height:1.9; letter-spacing:.01em; }
.intro-a11y-sm { font-size:13px; }
.intro-a11y-lg { font-size:17px; }
/* ================================================================
v8.2.7 : FONT SIZE FIX, AUTH-CONDITIONAL SETTINGS, CHIPS
================================================================ */
/* Font size: targeted text scaling */
/* Reading support : default ON : increased line-height and letter-spacing */
#metabolia-app .intro-msg { line-height: 1.75; }
#metabolia-app.intro-a11y-reading .intro-msg { line-height: 2.0; letter-spacing: 0.015em; }
/* Settings: auth-conditional accent button */
.isp-row--accent {
color: var(--accent);
}
.isp-row--accent svg { color: var(--accent); }
/* Settings/incognito panels always above fixed UI elements */
#intro-settings-v8-panel,
#intro-incognito-modal {
z-index: 100020 !important;
}
/* Tabs: show horizontal scroll hint on mobile */
@media (max-width: 500px) {
#intro-tabs::after {
content: '';
position: absolute; right: 0; top: 0; bottom: 0;
width: 24px;
background: linear-gradient(to right, transparent, var(--bg));
pointer-events: none;
}
#intro-tabs { position: relative; }
}
/* ================================================================
v8.2.9 : COMPACT TABS, ANON BAR, A11Y ICON HIDDEN
================================================================ */
/* Compact tabs so all 5 fit on mobile */
.intro-tab {
padding: .55rem .6rem !important;
font-size: .72rem !important;
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 400px) {
.intro-tab { padding: .55rem .45rem !important; font-size: .68rem !important; }
}
/* Accessibility icon: hidden (accessible via settings) */
#intro-a11y-btn { display: none !important; }
/* Anonymous bar: full-width single button */
#intro-v8-bar-anon {
padding: .5rem .75rem;
justify-content: center;
}
.intro-v8-btn--login-full {
flex-direction: row !important;
gap: .5rem !important;
font-size: .85rem !important;
font-weight: 500 !important;
border: 1.5px solid var(--accent) !important;
border-radius: 24px !important;
padding: .6rem 1.5rem !important;
color: var(--accent) !important;
min-width: auto !important;
background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}
.intro-v8-btn--login-full svg { width: 18px; height: 18px; }
.intro-v8-btn--login-full:hover {
background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
}
/* Remove old login button styles that may conflict */
.intro-v8-btn--login { display: none !important; }
/* Font size handled by dynamic