html {font-size: 14px;}

body {overflow: hidden;}

pre {font-family: monospace}

.monospace {font-family: monospace;white-space: pre-line;line-height: 1.5;}

.inline-flex {display: inline-flex !important}

.card-body {min-height: 90vh}

.slide-fade-enter-active {transition: all .3s ease}

.slide-fade-leave-active {transition: all .8s cubic-bezier(1, .5, .8, 1)}

.slide-fade-enter, .slide-fade-leave-to {opacity: 0;transform: translateX(10px)}

.ws-alert {position: absolute;top: 2px;right: 0;left: 0;z-index: 65535;margin: auto;max-width: 550px;text-align: center}

.divider {clear: both;overflow: hidden;margin: 1rem auto;height: 0}

.divider-dashed {border-top: 1px dashed #ccc}

::-webkit-scrollbar-track-piece {background-color: #f8f8f8}

::-webkit-scrollbar {width: 9px;height: 9px}

::-webkit-scrollbar-thumb {min-height: 28px;background-color: #ddd;background-clip: padding-box}

::-webkit-scrollbar-thumb:hover {background-color: #bbb}

.message-box {max-height: calc(100vh - 220px)}

.console-box, .message-box {display: block;overflow: auto;padding: 1rem}

.console-box {max-height: calc(100vh - 640px)}

/* WebSocket 协议类型显示样式 */
.protocol-indicator {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-left: 8px;
}

.protocol-wss {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.protocol-ws {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.alert-success .fa-lock {
    color: #155724;
    margin-right: 5px;
}

.alert-warning .fa-unlock-alt {
    color: #856404;
    margin-right: 5px;
}

/* 连接状态指示器 */
.connection-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.connection-status.secure {
    background-color: #28a745;
    color: white;
}

.connection-status.insecure {
    background-color: #ffc107;
    color: #212529;
}