.connection-error-toast{z-index:1000;align-items:center;gap:var(--space-md);padding-inline:var(--space-md);padding-block:var(--space-sm);background:var(--color-danger);min-inline-size:320px;max-inline-size:600px;color:var(--color-text-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border:var(--border-width-thin) solid var(--color-danger);opacity:0;transition:transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);display:flex;position:fixed;inset-block-start:var(--space-lg);inset-inline-start:50%;transform:translate(-50%)translateY(-100%)}.connection-error-toast--visible{opacity:1;transform:translate(-50%)translateY(0)}.connection-error-toast__content{align-items:center;gap:var(--space-sm);flex:1;display:flex}.connection-error-toast__icon{color:var(--color-text-primary);flex-shrink:0}.connection-error-toast__message{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-primary)}.connection-error-toast__close{padding:var(--space-xs);cursor:pointer;color:var(--color-text-primary);border-radius:var(--radius-sm);transition:background-color var(--duration-fast) var(--ease-out);min-inline-size:var(--touch-target-min);min-block-size:var(--touch-target-min);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.connection-error-toast__close:hover{background-color:#0000001a}.connection-error-toast__close:focus-visible{outline:var(--border-width-thick) solid var(--color-text-primary);outline-offset:2px}.connection-error-toast__close:active{transform:scale(.95)}@media (width<=768px){.connection-error-toast{min-inline-size:auto;inset-inline-start:var(--space-md);inset-inline-end:var(--space-md);transform:translate(0)translateY(-100%)}.connection-error-toast--visible{transform:translate(0)translateY(0)}}