/* reset */
/* 初始化浏览器默认值 */
html, body, div, p, form, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6 {
	padding: 0;margin: 0;
}
html,body{
  height: 100%;
  width: 100%;
  font-size: 15px;
  overflow: hidden;
}
body {
	scroll-behavior: smooth; word-break:break-word;word-wrap:break-word;margin: 0 auto;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-overflow-scrolling: touch;
}
ul, ol {
	list-style: none;
}
input[type=number]::-webkit-inner-spin-button,  
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none; appearance: none; margin: 0; 
}
label {
	cursor: pointer;
}
input[type="radio"], input[type="checkbox"] {
	margin: 0 3px;
}
/* for modern browsers */
img {
	border: none; vertical-align: middle;
}
table {
	border-collapse: collapse;
}
td, th {
	text-align: center;
}

::-webkit-scrollbar {
  width: 3px;
  height: 8px;
  background-color: #f2f2f2;
}
::-webkit-scrollbar-thumb {
    background: #aaa; 
}
::-webkit-input-placeholder{
	color: #D8DCDC;
}

.CodeMirror-simplescroll-vertical {
  width: 3px;
}

/* 编辑器 */
#lm_container {
  height: 100%;
}
.lm-ui {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.lm-ui-col {
  height: 100%;
  overflow-y: auto;
}
.lm-ui-folder {
  width: 200px;
}
.lm-folder-manager i {
  font-size: 18px;
}
.lm-ui-editor {
  position: relative;
  width: calc((100% - 200px) / 2);
  overflow-y: auto;
}
.lm-editor-tools {
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  background-color: transparent;
  padding: 10px 5px;
  z-index: 100;
  flex-direction: column;
  opacity: 0.7;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.lm-editor-tools:hover {
  opacity: 1;
}
.lm-editor-socket {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px); /* 减去padding */
}
.lm-ui-result {
  position: relative;
  width: calc((100% - 200px) / 2);
}
.lm-ui-result-loading {
  position: absolute;
  top: 5px;
  left: 50px;
  z-index: 99;
}
.lm-ui-result-loading::before {
  transform-origin: center center;
  animation: rotater 0.5s infinite linear;
}
.lm-editor {
  height: 100%;
}
.form-label {
  color: #606266;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 3px;
}
.lm-drag-bar {
  height: 100%;
  cursor: ew-resize;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}
.lm-drag-bar2 {
  height: 100%;
  cursor: ew-resize;
  border-left: 2px solid #f7f7f7;
  border-right: 2px solid #f7f7f7;
}
@keyframes rotater {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  padding-right: 8px;
}
.custom-tree-node-label {
  display: flex;
  flex: 1;
}
.custom-tree-node-status {
  color: #409EFF;
}

/* 字体 */
.mdi {
  color: rgba(0,0,0,.54);
  font-size: 22px;
  margin-right: 6px;
}

.lm_result_progress {
  position: absolute;
  top: 0;
  left: 42px;
  width: 100%;
  z-index: 9;
  height: 5px;
}


/* overwrite */
.mdi-file-plus-outline::before {
  font-size: 20px;
}
.el-tree-node__content {
  height: 35px;
  color: rgba(0,0,0,.87);
}
.el-tree-node__expand-icon {
  color: rgba(0,0,0,.87);
}
.el-progress {
  margin-top: -5px;
}
.el-drawer__wrapper {
  left: 202px;
  width: calc((100% - 200px) / 2);
}
.el-drawer {
  width: 100%;
  overflow: auto;
  background: #F2F6FC;
  outline: none;
}
.el-icon-setting, .el-icon-notebook-2 {
  font-size: 30px;
  color: white;
  cursor: pointer;
  transform: rotate(0deg);
  transition: all 0.5s linear;
}
.el-icon-setting.active {
  transform: rotate(180deg);
}
.el-icon-setting::before {
  cursor: pointer;
}
.el-drawer__header {
  margin-bottom: 0;
}
.drawer__content {
  padding: 20px;
}
.el-collapse {
  margin-top: 20px;
}
.el-collapse-item__header {
  padding-left: 12px;
  background-color: #e4eaf3;
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #dcdfe6;
  font-weight: 500;
}
.el-collapse-item {
  margin-bottom: 10px;
}
.el-collapse-content {
  padding: 20px;
}
.el-collapse-content h3 {
  margin-bottom: 10px;
}
.el-input.warning input {
  border-color: orange;
}
.el-icon-delete {
  font-size: 24px;
}
.el-tooltip {
  outline: none;
}
.CodeMirror-wrap {
  height: 100%;
}
.websocket-client {
  display: flex;
  flex-direction: column;
  flex: 1; /* 让它占用lm-editor-socket的剩余空间 */
  min-height: 0; /* 防止内容溢出 */
  margin-top: 20px;
}

.websocket-client h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

/* WebSocket客户端样式 */
.message {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.received {
  background-color: #e3f2fd;
  border-left: 3px solid #1976d2;
}

.sent {
  background-color: #e8f5e9;
  text-align: right;
  border-right: 3px solid #43a047;
}

.connected {
  color: #4caf50;
}

.disconnected {
  color: #f44336;
}

.ws-url-input {
  margin-bottom: 15px;
}

.ws-connection-type {
  margin: 15px 0;
  padding: 8px;
  display: flex;
  align-items: center;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  background-color: #F8F9FC;
}

.ws-connection-type label {
  margin-right: 15px;
  color: #606266;
  font-size: 14px;
}

.ws-status {
  margin: 10px 0;
  font-weight: bold;
  font-size: 14px;
  padding: 5px 0;
}

/* 消息区域和清空按钮 */
.ws-message-area-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.ws-message-area {
  flex: 1;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
  overflow-y: auto;
  background-color: #fafafa;
  min-height: 0; /* 防止flex子项撑开父容器 */
  margin-bottom: 8px;
  max-height: none; /* 移除固定高度限制 */
}

.ws-clear-btn {
  position: absolute;
  bottom: 16px;
  right: 8px;
  width: auto;
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  color: #606266;
  border: none;
  transition: all 0.2s ease;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.ws-clear-btn:hover {
  color: #409EFF;
}

.ws-clear-btn i {
  margin-right: 4px;
  font-size: 14px;
}

.ws-clear-btn:focus {
  outline: none;
}

.clear-messages-btn {
  display: none;
}

.ws-message-form {
  display: flex;
  margin-top: auto;
  padding-top: 10px;
}

.ws-message-input {
  margin-right: 10px;
}

.tool-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #409EFF;
  color: white;
  cursor: pointer;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.tool-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
  background-color: #66b1ff;
}

.tool-button.active {
  background-color: #67C23A;
}

.tool-button i {
  font-size: 18px;
  color: white;
}

/* API抽屉样式 */
.api-drawer .el-drawer__header {
  margin-bottom: 0;
  padding: 15px 20px;
  background-color: #409EFF;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.drawer-header {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #EBEEF5;
}

.drawer-header h3 {
  margin-bottom: 8px;
  color: #303133;
  font-size: 16px;
}

.drawer-header p {
  color: #909399;
  font-size: 12px;
  margin: 0;
}

.drawer__content {
  padding: 15px;
}

.request-form {
  margin-bottom: 15px;
}

.form-row {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
}

.send-button-col {
  display: flex;
  align-items: flex-end;
}

.send-button-col .el-button {
  width: 100%;
}

.form-label {
  color: #606266;
  font-size: 13px;
  margin-bottom: 5px;
  padding-left: 2px;
}

.method-input input {
  background-color: #F5F7FA;
  text-align: center;
  font-weight: bold;
  color: #606266;
}

.request-collapse {
  margin-top: 10px;
  border: none;
}

.request-collapse .el-collapse-item__content {
  background-color: #f9fafc;
  border-radius: 0 0 4px 4px;
  border: 1px solid #ebeef5;
  border-top: none;
}

.collapse-content {
  padding: 15px 10px 5px;
}

.param-row {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.add-item-row {
  margin: 5px 0 10px;
  padding-left: 8px;
}

.delete-btn {
  color: #F56C6C;
  padding: 0;
}

.param-switch {
  padding: 10px 0 15px 10px;
}

.socket-emit-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.ws-emit-input {
  flex: 1;
  margin-right: 10px;
}

/* 文件树样式优化 */
#lm_folder {
  padding: 5px 0;
}
.el-tree {
  background-color: #f7f8fa;
  font-size: 13px;
}
.el-tree-node__content {
  height: 26px;
  border-left: 2px solid transparent;
}
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #e6f7ff;
  border-left: 2px solid #1890ff;
}
.custom-tree-node {
  width: 100%;
  display: flex;
  align-items: center;
}
.custom-tree-node i.mdi {
  font-size: 16px;
  margin-right: 4px;
  color: #606266;
}
.custom-tree-node i.mdi-folder {
  color: #ffc53d;
}
.custom-tree-node-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-tree-node-status {
  color: #f56c6c;
  margin-left: 5px;
  font-weight: bold;
  font-size: 12px;
}
/* 缩小树节点间距 */
.el-tree-node__children .el-tree-node__content {
  padding-left: 18px !important;
}

/* 文件树展开/折叠动画优化 */
.el-tree-node__children {
  overflow: hidden;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.el-tree-node.is-expanded > .el-tree-node__children {
  animation: node-expand 0.3s ease-in-out;
}

.el-tree-node__expand-icon {
  transition: transform 0.3s ease, color 0.2s ease;
}

.el-tree-node__expand-icon.expanded {
  transform: rotate(90deg);
}

@keyframes node-expand {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 悬停效果增强 */
.el-tree-node__content:hover {
  background-color: #f0f7ff;
  transition: background-color 0.2s ease;
}

/* 防止文件树文本被选中 */
.el-tree-node,
.custom-tree-node,
.custom-tree-node-label,
.el-tree-node__label {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 输入框清空按钮样式优化 */
.ws-emit-input .el-input__clear,
.ws-message-input .el-input__clear {
  color: #909399;
  font-size: 14px;
}

.ws-emit-input .el-input__clear:hover,
.ws-message-input .el-input__clear:hover {
  color: #409EFF;
}

.proxy-options-container {
  padding: 8px;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  background-color: #F8F9FC;
}

.proxy-options-header {
  display: flex;
  align-items: center;
}

.proxy-options-container .ws-url-input {
  margin-bottom: 15px;
  margin-top: 8px;
}

.proxy-options-label {
  font-size: 14px;
  margin-bottom: 8px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  color: #606266;
  cursor: default;
}

.ws-proxy-options {
  margin-bottom: 8px;
}

.ws-proxy-options textarea {
  font-family: monospace;
  font-size: 13px;
}