.web-toast {
position: fixed; z-index: 100000; right: 22px; top: 88px; width: 340px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 40px 13px 14px; background: #f3faf6; color: #24523b; border: 1px solid #bddcc9; border-radius: 0; box-shadow: 0 4px 12px #0f172a14; font-family:var(--ui-font-family); font-size:var(--ui-text-help-size); line-height:var(--ui-text-help-line); pointer-events: none; overflow: hidden; animation: none;
}
.web-toast[data-tone="error"] {
background: #fdf5f5; color: #7a3039; border-color: #e4c1c5;
}
.web-toast[data-tone="warning"] {
background: #fffaf1; color: #76551f; border-color: #e9d6af;
}
.web-toast strong {
display: block; font-size:var(--ui-text-body-size); font-weight:var(--ui-font-emphasis); line-height:var(--ui-text-body-line); overflow-wrap: anywhere;
}
.web-toast-detail {
margin-top: 4px; font-size:var(--ui-text-help-size); white-space: pre-line; overflow-wrap: anywhere;
}
.web-toast-detail:empty {
display: none;
}
.web-toast-close {
position: absolute; right: 7px; top: 7px; width: var(--ui-mini-icon-size); height: var(--ui-mini-icon-size); --ui-control-padding: 0; --ui-control-background: transparent; --ui-control-border: 0; --ui-control-color: inherit; font-family: inherit; font-size:var(--ui-text-glyph-size); line-height:var(--ui-text-glyph-line); pointer-events: auto;
}
.web-toast-progress {
position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #359565; transform-origin: left; animation: web-toast-progress var(--toast-duration,3600ms) linear both;
}
.web-toast[data-tone="error"] .web-toast-progress {
background: #c05a65;
}
.web-toast[data-tone="warning"] .web-toast-progress {
background: #bb8933;
}
@keyframes web-toast-progress {
from{transform:scaleX(0)}to{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce) {
.web-toast-progress {
animation: none;
}
}
@media (max-width: 600px) {
.web-toast {
right: 12px; top: 16px; max-width: calc(100vw - 24px);
}
}
.toast {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 14px; border-radius: 0; box-shadow: 0 4px 12px #172b4314; background: #1d354a; color: #fff; font-family:var(--ui-font-family); font-size:var(--ui-text-help-size); line-height:var(--ui-text-help-line); z-index: 100; overflow-wrap: anywhere;
}
#connection-message {
position: fixed; z-index: 300000; top: 10px; left: 50%; transform: translateX(-50%); box-sizing: border-box; padding: 9px 12px; color: #76551f; background: #fffaf1; border: 1px solid #e9d6af; box-shadow: 0 4px 12px #11182714; font-family:var(--ui-font-family);font-size:var(--ui-text-help-size);font-weight:var(--ui-font-regular);line-height:var(--ui-text-help-line); max-width: calc(100vw - 24px); overflow-wrap: anywhere;
}
#connection-message[hidden] {
display: none;
}
@media print {
#connection-message {
display: none;
}
}
#browser-session-panel {
position: fixed; z-index: 299000; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 10px 12px; max-width: calc(100vw - 24px); width: max-content; background: #fffaf1; color: #76551f; border: 1px solid #e9d6af; box-shadow: 0 4px 12px #11182714; font-family:var(--ui-font-family);font-size:var(--ui-text-help-size);font-weight:var(--ui-font-regular);line-height:var(--ui-text-help-line); flex-wrap: wrap;
}
#browser-session-panel[hidden] {
display: none;
}
#browser-session-panel button[hidden] {
display: none;
}
#browser-session-panel button {
flex: none; --ui-control-border: 1px solid #d8e0ea; --ui-control-background: #fff; font: inherit;
}
#browser-session-panel .session-notice-close {
--ui-control-padding: 3px 7px; font-size:var(--ui-text-glyph-size); line-height:var(--ui-text-glyph-line); --ui-control-background: transparent; --ui-control-border: var(--ui-border-width) solid transparent;
}
#browser-session-panel[data-blocked="true"] {
inset: 0; transform: none; width: 100%; max-width: none; height: 100%; justify-content: center; padding: 24px; background: #eef2f6;
}