.connection-notification{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;justify-content:center;pointer-events:none}.connection-notification-content{background-color:#000c;color:#fff;padding:10px 20px;border-radius:0 0 8px 8px;box-shadow:0 2px 10px #0003;display:flex;align-items:center;gap:15px;max-width:90%;animation:slideDown .3s ease-out;pointer-events:auto}.connection-notification p{margin:0;font-size:14px}.connection-notification-button{background-color:#fff;color:#000;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:background-color .2s}.connection-notification-button:hover{background-color:#f0f0f0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.connection-notification.offline .connection-notification-content{background-color:#dc3545e6}.connection-notification.reconnecting .connection-notification-content{background-color:#ffc107e6}.connection-notification.restored .connection-notification-content{background-color:#28a745e6}