.error-display{border-radius:8px;margin:16px 0;box-shadow:0 2px 8px #0000001a;animation:slideIn .3s ease-out;max-width:800px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.error-content{padding:16px}.error-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.error-icon{font-size:24px;flex-shrink:0;margin-top:2px}.error-main{flex:1;min-width:0}.error-title{margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.4}.error-suggestion{margin:0;font-size:14px;opacity:.9;line-height:1.4}.error-dismiss{background:none;border:none;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s;flex-shrink:0}.error-timestamp{font-size:12px;opacity:.7;margin-bottom:12px;font-family:monospace}.error-actions{display:flex;gap:8px;flex-wrap:wrap}.error-button{padding:8px 12px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;display:flex;align-items:center;gap:4px}.retry-button{background:#fff3;color:inherit;border:1px solid rgba(255,255,255,.3)}.retry-button:hover{background:#ffffff4d;transform:translateY(-1px)}.details-button{background:#0000001a;color:inherit;border:1px solid rgba(0,0,0,.2)}.details-button:hover{background:#0003}.error-technical-details{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}.error-technical-details h5{margin:0 0 8px;font-size:14px;font-weight:600}.error-detail-section{margin-bottom:12px;font-size:13px}.error-detail-section strong{display:block;margin-bottom:4px}.error-detail-section pre{background:#0000001a;padding:8px;border-radius:4px;font-size:12px;overflow-x:auto;white-space:pre-wrap;margin:0;border:1px solid rgba(0,0,0,.1)}.error-display.critical{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff}.error-display.critical .error-dismiss:hover{background:#ffffff1a}.error-display.error{background:linear-gradient(135deg,#fd7e14,#e85d04);color:#fff}.error-display.error .error-dismiss:hover{background:#ffffff1a}.error-display.warning{background:linear-gradient(135deg,#ffc107,#e0a800);color:#000}.error-display.warning .error-dismiss:hover{background:#0000001a}.error-display.warning .error-detail-section pre{background:#0000000d;border:1px solid rgba(0,0,0,.1)}.error-display.info{background:linear-gradient(135deg,#17a2b8,#138496);color:#fff}.error-display.info .error-dismiss:hover{background:#ffffff1a}@media (max-width: 768px){.error-display{margin:8px;border-radius:6px}.error-content{padding:12px}.error-header{gap:8px}.error-title{font-size:15px}.error-suggestion{font-size:13px}.error-actions{margin-top:12px}.error-button{padding:6px 10px;font-size:13px}}@media (prefers-color-scheme: dark){.error-display.warning{color:#fff}.error-display.warning .details-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff}.error-display.warning .details-button:hover{background:#fff3}.error-display.warning .error-detail-section pre{background:#0003;border:1px solid rgba(255,255,255,.1)}}.error-display.dismissing{animation:slideOut .3s ease-in forwards}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.connection-monitor{width:100%;height:100%}.connection-status-bar{position:sticky;top:0;z-index:1000;padding:8px 16px;font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000001a;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.status-content{display:flex;align-items:center;gap:8px}.status-icon{font-size:16px}.status-text{margin-right:8px}.retry-connection-button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:inherit;padding:4px 8px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;display:flex;align-items:center;gap:4px}.retry-connection-button:hover:not(:disabled){background:#ffffff4d;transform:translateY(-1px)}.retry-connection-button:disabled{opacity:.6;cursor:not-allowed}.connection-status-bar.connected{background:linear-gradient(135deg,#28a745,#20c997);color:#fff}.connection-status-bar.connecting{background:linear-gradient(135deg,#ffc107,#fd7e14);color:#000}.connection-status-bar.connecting .retry-connection-button{background:#0000001a;border:1px solid rgba(0,0,0,.2);color:#000}.connection-status-bar.connecting .retry-connection-button:hover:not(:disabled){background:#0003}.connection-status-bar.disconnected{background:linear-gradient(135deg,#6c757d,#495057);color:#fff}.connection-status-bar.error{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff}.connection-content{width:100%;height:100%;transition:all .3s ease}.connection-content.connection-error{opacity:.7;pointer-events:none;filter:grayscale(.3)}.connection-status-bar.connecting .status-icon{animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 768px){.connection-status-bar{padding:6px 12px;font-size:13px}.status-content{gap:6px}.retry-connection-button{padding:3px 6px;font-size:11px}.status-icon{font-size:14px}}@media print{.connection-status-bar{display:none}.connection-content.connection-error{opacity:1;pointer-events:all;filter:none}}@media (prefers-reduced-motion: reduce){.connection-status-bar,.connection-status-bar.connecting .status-icon{animation:none}.connection-content{transition:none}}@media (prefers-contrast: high){.connection-status-bar,.retry-connection-button{border:2px solid}}