Logo
Secure Access
Esqueceu?
TLS 1.3
AES-256 SSO
MFA Ready
Suporte Akkino
Resposta em até 24h
✓
Reporte enviado.
A equipa irá contactá-lo em breve.
position:fixed;bottom:10px;right:-5px;z-index:200; /* Botão vertical semi-retrátil com glassmorphism */ writing-mode:vertical-rl; text-orientation:mixed; padding:16px 11px; border-radius:12px 0 0 12px; background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 85%, #000) 100%); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-right:none; cursor:pointer; display:flex;align-items:center;justify-content:center;gap:10px; box-shadow:-4px 0 20px color-mix(in srgb, var(--accent) 25%, transparent); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, background .25s; animation:fabIn .7s 6.5s cubic-bezier(.22,1,.36,1) both; /* Semi-retrátil: mostra 45% */ transform:translateX(55%); backdrop-filter:blur(8px); } @keyframes fabIn{ from{opacity:0;transform:translateX(100%) rotate(5deg)} to{opacity:1;transform:translateX(55%)} } .chat-fab:hover{ transform:translateX(0); box-shadow:-6px 0 32px color-mix(in srgb, var(--accent) 40%, transparent); background:linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 92%, #000) 100%); } .chat-fab:active{ transform:translateX(0) scale(.98); } /* Ícone aparece no hover */ .fab-icon{ color:#0d0d0f; opacity:0; max-height:0; overflow:hidden; transition:opacity .3s .08s, max-height .3s .08s; display:flex;align-items:center; } .chat-fab:hover .fab-icon{ opacity:1; max-height:22px; } /* Texto vertical */ .fab-text{ font-size:11px;font-weight:800;letter-spacing:.18em; text-transform:uppercase;color:#0d0d0f; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.1); } /* Pulso sutil quando idle */ @keyframes fabPulse{ 0%,100%{ box-shadow:-4px 0 20px color-mix(in srgb, var(--accent) 25%, transparent); } 50% { box-shadow:-4px 0 28px color-mix(in srgb, var(--accent) 35%, transparent); } } .chat-fab{ animation:fabIn .7s 6.5s cubic-bezier(.22,1,.36,1) both, fabPulse 3s 7.5s ease-in-out infinite; } .chat-panel{ position:fixed;bottom:10px;right:44px;z-index:200; width:340px; background:var(--bg-surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04); overflow:hidden; display:none; transform-origin:bottom right; } .chat-panel.open{ display:block; animation:panelOpen .3s cubic-bezier(.22,1,.36,1); } @keyframes panelOpen{ from{opacity:0;transform:scale(.92) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} } /* Header com gradiente sutil */ .chat-header{ padding:16px 18px; background:linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%); border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between; position:relative; } .chat-header::after{ content:'';position:absolute;bottom:0;left:18px;right:18px;height:1px; background:linear-gradient(90deg,transparent,var(--accent-dim),transparent); } .chat-header-left{display:flex;align-items:center;gap:12px} .chat-header-icon{ width:36px;height:36px;border-radius:10px; background:var(--accent-dim); border:1px solid color-mix(in srgb, var(--accent) 20%, transparent); display:flex;align-items:center;justify-content:center; color:var(--accent); flex-shrink:0; } .chat-header-title{font-size:14px;font-weight:600;color:var(--text-hi);letter-spacing:-.01em} .chat-header-sub{ font-size:11px;color:var(--text-lo);margin-top:2px; display:flex;align-items:center;gap:5px; } .chat-header-sub::before{ content:'';width:6px;height:6px;border-radius:50%; background:var(--success); box-shadow:0 0 6px var(--success); flex-shrink:0; } .chat-close{ width:30px;height:30px;border-radius:8px;border:1px solid var(--line); background:var(--bg-input);cursor:pointer;color:var(--text-lo); display:flex;align-items:center;justify-content:center; transition:all .15s; } .chat-close:hover{background:var(--accent-dim);border-color:var(--line-focus);color:var(--accent)} /* Body */ .chat-body{padding:18px} .chat-field{margin-bottom:14px} .chat-label{ font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--text-lo);display:block;margin-bottom:6px; } .chat-select,.chat-textarea,.chat-input{ width:100%;padding:10px 13px; background:var(--bg-input); border:1px solid var(--line); border-radius:10px; color:var(--text-hi); font-size:13.5px; font-family:inherit; transition:border-color .2s,box-shadow .2s,background .2s; resize:none; outline:none; } .chat-select:focus,.chat-textarea:focus,.chat-input:focus{ border-color:var(--line-focus); background:var(--bg-elevated); box-shadow:0 0 0 3px var(--accent-dim); } .chat-select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a8aaa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center; padding-right:32px; } .chat-select option{background:var(--bg-elevated)} /* Botão enviar */ .chat-btn{ width:100%;padding:11px; background:var(--accent); color:#0d0d0f; border:none;border-radius:10px; font-size:13.5px;font-weight:700; font-family:inherit;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:8px; transition:opacity .15s,transform .15s,box-shadow .15s; box-shadow:0 4px 16px var(--accent-glow); position:relative;overflow:hidden; } .chat-btn::before{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%); pointer-events:none; } .chat-btn:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 6px 24px var(--accent-glow)} .chat-btn:active{transform:translateY(0) scale(.98)} .chat-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none} /* Sucesso */ .chat-success{ padding:28px 18px;text-align:center; display:none; } .chat-success-icon{ width:52px;height:52px;border-radius:50%; background:color-mix(in srgb, var(--success) 12%, transparent); border:1px solid color-mix(in srgb, var(--success) 25%, transparent); display:flex;align-items:center;justify-content:center; margin:0 auto 14px; color:var(--success); font-size:1.4rem; } .chat-success-title{font-size:15px;font-weight:600;color:var(--text-hi);margin-bottom:6px} .chat-success-text{font-size:13px;color:var(--text-md);line-height:1.5} /* Mobile */ @media(max-width:520px){ .chat-panel{width:calc(100vw - 60px);right:50px;bottom:8px} }
Reportar Problema
Akkino Suporte
✓
Reporte enviado.
A equipa irá contactá-lo em breve.