/*
===============================================================================
文件: rightpanel.css (最新修订版)

【主要功能 & 注意事项】:
1) 当 #analysisPluginFormContainer 为空 => 隐藏，不显示任何表单配置区域
2) 拖拽进入右侧面板时 => 显示蓝红呼吸渐变的高亮边框(.analysis-content.drop-target-hover)
3) 当只有 1 个拖拽区时，该区填满右侧面板；多个区则纵向排列
4) 变量卡片与中间面板保持同样布局/卡片风格
5) 移除覆盖布局的 flex:1，改由 layout.css 控制宽度
===============================================================================
*/

.right-panel.analysis-area {
  /* 原先的 flex:1 去掉 */
  display: flex;
  flex-direction: column;
  padding: 5px;
  background: #f9f9f9;
}

/* 顶部工具栏 */
.analysis-toolbar {
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px;
  margin-bottom: 8px;
  gap: 4px;
}

/* 通用按钮 */
.btn {
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s, transform 0.2s;
}
.btn i {
  margin-right: 4px;
}

/* 分析按钮 - 默认蓝色渐变 */
.btn-lively {
  color: #fff;
  background-color: #2b6cf6;
  border: none;
  transition: background 0.4s, transform 0.3s;
}
.btn-lively:hover {
  animation: livelyGradient 4s ease infinite;
  background: linear-gradient(
    270deg,
    #ff6b6b,#ffa36c,
    #ffd56c,#53d6af,
    #6bfff4,#6bd9ff
  );
  background-size: 600% 600%;
  transform: scale(1.05);
}
.btn-lively:active {
  transform: scale(0.95);
}
@keyframes livelyGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 白色按钮 */
.btn-white {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
}
.btn-white:hover {
  background: #f7f7f7;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-white:active {
  transform: scale(0.96);
}

/* 帮助按钮 */
.btn-help-doc {
  color: #666;
  font-size: 16px;
  margin-left: 4px;
  cursor: pointer;
}
.btn-help-doc:hover {
  color: #333;
  transform: translateY(-1px);
}

/* 当 #analysisPluginFormContainer 为空 => 隐藏表单 */
.analysis-plugin-form {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  white-space: nowrap;
}
#analysisPluginFormContainer:empty {
  display: none !important;
}

/* plugin fields => inline布局 + 间距 */
.plugin-form-fields {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.plugin-form-fields .form-group {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0 !important;
  gap: 6px;
}
.plugin-form-fields label {
  font-size: 14px;
  white-space: nowrap;
  margin: 0 !important;
}
.plugin-form-fields .form-select,
.plugin-form-fields .form-control {
  font-size: 14px;
  line-height: 1.3;
  height: 34px;
  padding: 2px 8px 2px 8px;
  padding-right: 28px; /* 下拉箭头预留 */
}

/* 主内容区(右侧面板内部) */
.analysis-content {
  flex: 1;
  display: flex;    /* 让其子元素(.drag-zone-container)可按flex分配高度 */
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* 鼠标拖拽变量进入右侧面板 => 蓝红呼吸高亮 */
.analysis-content.drop-target-hover {
  border: 2px dashed #4fa3f7;
  animation: colorPulse 1.5s infinite;
}
@keyframes colorPulse {
  0%   { box-shadow: 0 0 10px #4fa3f7; border-color: #4fa3f7; }
  50%  { box-shadow: 0 0 10px #ff4f4f; border-color: #ff4f4f; }
  100% { box-shadow: 0 0 10px #4fa3f7; border-color: #4fa3f7; }
}

.analysis-placeholder {
  color: #999;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}

/* 拖拽区容器 => 单区则填满，多区则纵向排列 */
.drag-zone-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 8px;
}
.drag-zone-container:last-child {
  margin-bottom: 0;
}
/* 若只有一个区 => 填满 */
.analysis-content > .drag-zone-container:nth-of-type(1):nth-last-of-type(1) {
  flex: 1;
  margin-bottom: 0;
}

/* 拖拽容器 => 网格布局 */
.drag-zone-droplist {
  flex: 1;
  border: 1px dashed #ccc;
  border-radius: 4px;
  padding: 6px;
  position: relative;
  overflow-y: auto;
  transition: max-height 0.3s;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-items: start;
  align-content: flex-start;
}
.drag-zone-droplist.drop-target-hover {
  border-color: #4fa3f7;
  background: #f0f8ff;
  animation: colorPulse 1.5s infinite;
}

/* 变量卡片 => 保持与中间面板一致 */
.analysis-var-card {
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fafafa;
  position: relative;
  cursor: default;
  transition: transform 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
  min-height: 80px;
  padding: 6px 10px;
}
.analysis-var-card:hover {
  animation: jelly 0.4s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  background: #f5f5f5;
}
@keyframes jelly {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.03); }
  50%  { transform: scale(0.98); }
  75%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* 删除按钮(右上角) */
.analysis-var-card .remove-var-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: #999;
  font-size: 16px;
  cursor: pointer;
}
.analysis-var-card .remove-var-btn:hover {
  color: #666;
}

/* 变量名 - 多行截断 */
.var-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  min-height: 4.2em;
  margin-bottom: 6px;
}

.drag-zone-placeholder {
  grid-column: 1 / -1;
  width: 100%;
}