<template>
  <section class="model-context-bar" aria-label="全局模型上下文">
    <div class="model-context-main">
      <button class="model-context-trigger" type="button" aria-haspopup="dialog" :aria-expanded="switcherOpen" @click="toggleSwitcher">
        <span class="model-context-trigger-meta">当前模型</span>
        <span class="model-context-trigger-name">{{ store.activeModelName }}</span>
        <span class="model-context-trigger-caret" aria-hidden="true">▾</span>
      </button>
      <button class="model-add-icon-btn" type="button" aria-label="添加模型" title="添加模型" @click="openDrawer">
        <svg class="model-add-icon" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 6v12M6 12h12" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round" />
        </svg>
      </button>
    </div>

    <div v-if="switcherOpen" class="model-switcher-panel">
      <div v-if="store.models.length" class="model-switcher-list" role="list">
        <button
          v-for="model in store.models"
          :key="model.id"
          class="model-switcher-option"
          :class="{ 'is-active': model.id === store.activeId }"
          type="button"
          @click="selectModel(model.id)"
        >
          <span class="model-switcher-option-name">{{ model.name }}</span>
          <span v-if="model.id === store.activeId" class="model-switcher-option-current">当前</span>
        </button>
      </div>
      <div v-else class="model-switcher-empty">暂无可切换模型</div>
    </div>
  </section>

  <section v-if="!store.models.length" class="model-empty-state" aria-label="无模型状态">
    <div class="model-empty-title">当前项目暂无可用模型</div>
    <div class="model-empty-text">上传 BIM 模型后，才可查看首页详细数据、业务联动卡片与模型明细。当前项目已在外部选定，无需再次选择项目。</div>
    <div class="model-empty-actions">
      <button class="model-btn model-btn-accent model-empty-btn" type="button" @click="openDrawer">添加模型</button>
    </div>
  </section>

  <div v-if="drawerOpen" class="model-drawer-backdrop" @click="closeDrawer"></div>
  <aside v-if="drawerOpen" class="model-drawer" aria-label="模型上传与管理">
    <header class="model-drawer-header">
      <div class="model-drawer-title">模型中心</div>
      <button class="model-drawer-close" type="button" aria-label="关闭" @click="closeDrawer">×</button>
    </header>

    <div class="model-drawer-body">
      <section class="model-drawer-panel">
        <div class="model-upload-title">上传模型</div>
        <div class="model-upload-drop" :class="{ 'is-dragging': dragging }" @click="pickFile" @dragover.prevent="dragging = true" @dragleave.prevent="dragging = false" @drop.prevent="onDrop">
          <div>
            <div class="model-upload-drop-title">上传模型文件</div>
            <div class="model-upload-drop-sub">点击选择文件，支持 IFC / RVT / NWD / FBX</div>
          </div>
          <button class="model-btn model-btn-ghost model-upload-drop-btn" type="button" @click.stop="pickFile">选择文件</button>
          <input ref="fileInputRef" type="file" accept=".ifc,.rvt,.nwd,.fbx" hidden @change="onFileChange" />
        </div>

        <div v-if="form.file" class="model-upload-file">
          <div class="model-upload-file-name">{{ form.file.name }}</div>
          <button class="model-upload-file-remove" type="button" aria-label="删除" @click="clearFile">×</button>
        </div>

        <div class="model-upload-fields">
          <label class="model-upload-field">
            <span class="k">模型名称</span>
            <input v-model.trim="form.name" class="model-input" placeholder="例如：特大桥主体模型 V1" />
          </label>
          <label class="model-upload-field model-upload-type-field">
            <span class="k">模型类型</span>
            <select v-model="form.type" class="model-input">
              <option value="bridge">桥梁主体</option>
              <option value="building">建筑主体</option>
              <option value="structure">结构模型</option>
              <option value="mechanical">机电模型</option>
            </select>
          </label>
        </div>

        <div class="model-drawer-footer">
          <button class="model-btn model-btn-accent model-upload-submit-btn" type="button" :disabled="!canUpload" @click="submitUpload">{{ uploading ? "上传中..." : "上传模型" }}</button>
        </div>
      </section>

      <section class="model-drawer-panel model-center-list-section">
        <div class="model-manage-title">已上传模型</div>
        <div v-if="errorText" class="model-manage-error">{{ errorText }}</div>
        <div v-if="loading" class="model-manage-empty">正在加载模型列表...</div>
        <div v-if="store.models.length" class="model-manage-list">
          <div class="model-manage-row is-head">
            <div>模型名称</div>
            <div>类型</div>
            <div>文件</div>
            <div>状态</div>
            <div>操作</div>
          </div>
          <div v-for="model in store.models" :key="model.id" class="model-manage-row" :class="{ 'is-editing': editingId === model.id }">
            <div class="model-manage-row-name">
              <input v-if="editingId === model.id" v-model.trim="editForm.name" class="model-row-input" placeholder="请输入模型名称" />
              <span v-else>{{ model.name }}</span>
            </div>
            <div class="model-manage-row-cell">
              <select v-if="editingId === model.id" v-model="editForm.type" class="model-row-select">
                <option v-for="option in modelTypeOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
              </select>
              <span v-else>{{ typeLabel(model.type) }}</span>
            </div>
            <div class="model-manage-row-cell model-manage-row-file">
              <span>{{ model.fileName }}</span>
              <small>{{ model.uploadedAt }} · {{ formatFileSize(model.fileSize) }}</small>
            </div>
            <div><span class="model-manage-row-status">{{ model.id === store.activeId ? "当前" : "可用" }}</span></div>
            <div class="model-manage-row-actions">
              <template v-if="editingId === model.id">
                <button class="model-btn model-manage-row-btn" type="button" :disabled="operatingId === model.id || !editForm.name" @click="saveModelEdit(model.id)">保存</button>
                <button class="model-manage-row-btn model-manage-row-cancel" type="button" :disabled="operatingId === model.id" @click="cancelModelEdit">取消</button>
              </template>
              <template v-else>
                <button class="model-btn model-manage-row-btn" type="button" :disabled="operatingId === model.id" @click="selectModel(model.id)">切换</button>
                <button class="model-btn model-manage-row-btn" type="button" :disabled="operatingId === model.id" @click="startModelEdit(model)">编辑</button>
                <button class="model-manage-row-btn model-manage-row-delete" type="button" :disabled="operatingId === model.id" @click="removeModel(model.id)">删除</button>
              </template>
            </div>
          </div>
        </div>
        <div v-else-if="!loading" class="model-manage-empty">暂无已上传模型，请先在上方添加模型。</div>
      </section>
    </div>
  </aside>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useModelCenterStore } from "../../stores/modelCenter.js";
import { modelManagementApi } from "../../service/api/modelManagement.js";

const store = useModelCenterStore();
const drawerOpen = ref(false);
const switcherOpen = ref(false);
const dragging = ref(false);
const fileInputRef = ref(null);
const form = reactive({ file: null, name: "", type: "bridge" });
const loading = ref(false);
const uploading = ref(false);
const operatingId = ref("");
const editingId = ref("");
const errorText = ref("");
const editForm = reactive({ name: "", type: "bridge" });

const modelTypeOptions = [
  { value: "bridge", label: "桥梁主体" },
  { value: "building", label: "建筑主体" },
  { value: "structure", label: "结构模型" },
  { value: "mechanical", label: "机电模型" },
];

const canUpload = computed(() => !!form.file && !!form.name && !uploading.value);

onMounted(() => {
  loadModels();
});

function openDrawer() {
  switcherOpen.value = false;
  drawerOpen.value = true;
  loadModels();
}

function closeDrawer() {
  cancelModelEdit();
  drawerOpen.value = false;
}

function toggleSwitcher() {
  switcherOpen.value = !switcherOpen.value;
}

async function loadModels() {
  loading.value = true;
  errorText.value = "";
  try {
    await store.loadModels();
  } catch (e) {
    console.error("加载模型列表失败:", e);
    errorText.value = e?.message || "加载模型列表失败";
  } finally {
    loading.value = false;
  }
}

async function selectModel(id) {
  if (editingId.value) return;
  operatingId.value = id;
  errorText.value = "";
  try {
    await store.setActiveModel(id);
    switcherOpen.value = false;
  } catch (e) {
    console.error("设置当前模型失败:", e);
    errorText.value = e?.message || "设置当前模型失败";
  } finally {
    operatingId.value = "";
  }
}

function resolveModelType(type) {
  const text = String(type || "");
  return modelTypeOptions.find((item) => item.value === text || item.label === text)?.value || "bridge";
}

function startModelEdit(model) {
  editingId.value = model.id;
  editForm.name = model.name;
  editForm.type = resolveModelType(model.type);
  errorText.value = "";
}

function cancelModelEdit() {
  editingId.value = "";
  editForm.name = "";
  editForm.type = "bridge";
}

async function saveModelEdit(id) {
  if (!editForm.name) return;
  operatingId.value = id;
  errorText.value = "";
  try {
    await saveModelUpdate(id);
    cancelModelEdit();
  } catch (e) {
    console.error("更新模型失败:", e);
    errorText.value = e?.message || "更新模型失败";
  } finally {
    operatingId.value = "";
  }
}

async function saveModelUpdate(id) {
  const payload = {
    name: editForm.name,
    type: editForm.type,
  };
  if (typeof store.updateModel === "function") {
    await store.updateModel(id, payload);
    return;
  }
  await modelManagementApi.update(id, {
    modelName: payload.name,
    modelType: payload.type,
  });
  await loadModels();
}

function pickFile() {
  fileInputRef.value?.click();
}

function applyFile(file) {
  if (!file) return;
  form.file = file;
  if (!form.name) form.name = file.name.replace(/\.[^.]+$/, "");
}

function onFileChange(event) {
  applyFile(event.target.files?.[0]);
}

function onDrop(event) {
  dragging.value = false;
  applyFile(event.dataTransfer?.files?.[0]);
}

function clearFile() {
  form.file = null;
  if (fileInputRef.value) fileInputRef.value.value = "";
}

async function submitUpload() {
  if (!canUpload.value) return;
  uploading.value = true;
  errorText.value = "";
  try {
    await store.addModel({
      name: form.name,
      type: form.type,
      file: form.file,
    });
    form.name = "";
    form.type = "bridge";
    clearFile();
  } catch (e) {
    console.error("上传模型失败:", e);
    errorText.value = e?.message || "上传模型失败";
  } finally {
    uploading.value = false;
  }
}

async function removeModel(id) {
  if (editingId.value) return;
  operatingId.value = id;
  errorText.value = "";
  try {
    await store.removeModel(id);
  } catch (e) {
    console.error("删除模型失败:", e);
    errorText.value = e?.message || "删除模型失败";
  } finally {
    operatingId.value = "";
  }
}

function typeLabel(type) {
  const text = String(type || "");
  return modelTypeOptions.find((item) => item.value === text || item.label === text)?.label || text || "模型";
}

function formatFileSize(size) {
  const value = Number(size || 0);
  if (!value) return "--";
  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
  return `${(value / 1024 / 1024).toFixed(1)} MB`;
}
</script>

<style scoped>
.model-context-bar {
  position: absolute;
  left: 184px;
  top: 40px;
  z-index: 80;
}

.model-context-main {
  width: 236px;
  min-width: 0;
  max-width: calc(100vw - 56px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 187, 92, 0.18);
  background: linear-gradient(180deg, rgba(16, 28, 42, 0.74), rgba(10, 18, 30, 0.62));
  box-shadow: 0 14px 34px rgba(4, 10, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
}

.model-context-trigger {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 196, 118, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  color: rgba(247, 249, 252, 0.96);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.model-context-trigger:hover {
  border-color: rgba(255, 196, 118, 0.34);
  box-shadow: 0 0 0 3px rgba(255, 196, 118, 0.08);
}

.model-context-trigger-meta {
  flex: none;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 214, 156, 0.82);
}

.model-context-trigger-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
}

.model-context-trigger-caret {
  flex: none;
  font-size: 12px;
  color: rgba(255, 214, 156, 0.88);
}

.model-add-icon-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(83, 214, 206, 0.28);
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 42%), linear-gradient(180deg, rgba(83, 214, 206, 0.30), rgba(43, 191, 178, 0.16));
  color: rgba(230, 255, 252, 0.98);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.model-add-icon-btn:hover {
  border-color: rgba(83, 214, 206, 0.48);
  box-shadow: 0 0 0 3px rgba(83, 214, 206, 0.12);
}

.model-add-icon {
  width: 18px;
  height: 18px;
}

.model-switcher-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 64px));
  max-height: min(360px, calc(100vh - 150px));
  overflow: auto;
  z-index: 86;
  border-radius: 16px;
  border: 1px solid rgba(255, 196, 118, 0.22);
  background: linear-gradient(180deg, rgba(10, 18, 30, 0.96), rgba(8, 14, 23, 0.94));
  box-shadow: 0 22px 54px rgba(4, 10, 20, 0.52);
  padding: 10px;
}

.model-switcher-list {
  display: grid;
  gap: 4px;
}

.model-switcher-option {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(238, 244, 249, 0.90);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.model-switcher-option:hover,
.model-switcher-option.is-active {
  background: rgba(255, 196, 118, 0.12);
  color: rgba(255, 246, 232, 0.98);
}

.model-switcher-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

.model-switcher-option-current {
  flex: none;
  color: rgba(255, 220, 164, 0.86);
  font-size: 12px;
  font-weight: 900;
}

.model-switcher-empty,
.model-manage-empty {
  padding: 18px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 196, 118, 0.22);
  text-align: center;
  color: rgba(210, 220, 233, 0.72);
  font-size: 13px;
}

.model-manage-error {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 120, 120, 0.20);
  background: rgba(255, 120, 120, 0.08);
  color: rgba(255, 200, 200, 0.94);
  font-size: 12px;
  font-weight: 800;
}

.model-empty-state {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 16;
  width: min(640px, calc(100% - 40px));
  text-align: center;
}

.model-empty-title {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 900;
  color: rgba(17, 30, 46, 0.94);
  text-shadow: 0 8px 28px rgba(255, 255, 255, 0.78);
}

.model-empty-text {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(73, 88, 111, 0.78);
}

.model-empty-actions {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.model-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 189;
  background: rgba(3, 8, 16, 0.52);
  backdrop-filter: blur(4px);
}

.model-drawer {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(940px, calc(100% - 48px));
  height: min(760px, calc(100% - 80px));
  z-index: 190;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 196, 118, 0.18);
  border-radius: 24px;
  background: radial-gradient(circle at top right, rgba(255, 196, 118, 0.10), transparent 28%), linear-gradient(180deg, rgba(8, 14, 24, 0.98), rgba(9, 14, 22, 0.96));
  box-shadow: 0 28px 74px rgba(4, 10, 20, 0.54);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.model-drawer-header {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid rgba(255, 196, 118, 0.10);
}

.model-drawer-title {
  font-size: 22px;
  font-weight: 900;
  color: rgba(245, 248, 252, 0.96);
}

.model-drawer-close {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 118, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(247, 249, 252, 0.88);
  cursor: pointer;
}

.model-drawer-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 22px 22px;
}

.model-drawer-panel {
  display: grid;
  gap: 10px;
}

.model-upload-title,
.model-manage-title {
  color: rgba(245, 248, 252, 0.95);
  font-size: 15px;
  font-weight: 900;
}

.model-upload-drop {
  min-height: 76px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 196, 118, 0.22);
  background: rgba(255, 255, 255, 0.035);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.model-upload-drop.is-dragging {
  border-color: rgba(83, 214, 206, 0.48);
  background: rgba(83, 214, 206, 0.08);
}

.model-upload-drop-title {
  font-size: 15px;
  font-weight: 900;
  color: rgba(245, 248, 252, 0.94);
}

.model-upload-drop-sub {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(205, 217, 229, 0.68);
}

.model-upload-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 196, 118, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.model-upload-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  color: rgba(241, 246, 251, 0.92);
}

.model-upload-file-remove {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 196, 118, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 220, 164, 0.92);
  cursor: pointer;
}

.model-upload-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 14px;
}

.model-upload-field {
  display: grid;
  gap: 6px;
}

.model-upload-field .k {
  color: rgba(215, 224, 232, 0.78);
  font-size: 12px;
  font-weight: 900;
}

.model-input {
  height: 38px;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 118, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 248, 252, 0.94);
  padding: 0 10px;
  outline: none;
}

.model-input option {
  color: #111e2e;
}

.model-drawer-footer {
  display: flex;
  justify-content: flex-end;
}

.model-btn {
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 196, 118, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(247, 249, 252, 0.9);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.model-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.model-btn-accent {
  border-color: rgba(83, 214, 206, 0.34);
  background: linear-gradient(180deg, rgba(83, 214, 206, 0.34), rgba(43, 191, 178, 0.20));
  color: rgba(230, 255, 252, 0.98);
}

.model-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
}

.model-center-list-section {
  min-height: 0;
  border-top: 1px solid rgba(255, 196, 118, 0.12);
  padding-top: 12px;
}

.model-manage-list {
  display: grid;
  align-content: start;
  height: 332px;
  max-height: 332px;
  border: 1px solid rgba(255, 196, 118, 0.12);
  border-radius: 16px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.025);
}

.model-manage-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.15fr) 116px minmax(190px, 1fr) 72px 190px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 196, 118, 0.10);
}

.model-manage-row:first-child {
  border-top: 0;
}

.model-manage-row.is-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 40px;
  background: rgba(255, 196, 118, 0.08);
  color: rgba(255, 220, 164, 0.86);
  font-size: 12px;
  font-weight: 900;
}

.model-manage-row-name,
.model-manage-row-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-manage-row.is-editing {
  background: rgba(83, 214, 206, 0.08);
}

.model-manage-row-name {
  color: rgba(245, 248, 252, 0.94);
  font-size: 13px;
  font-weight: 900;
}

.model-manage-row-cell {
  color: rgba(203, 217, 231, 0.72);
  font-size: 12px;
}

.model-row-input,
.model-row-select {
  width: 100%;
  min-width: 0;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(83, 214, 206, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 249, 252, 0.94);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.model-row-select {
  cursor: pointer;
}

.model-row-select option {
  color: #12212a;
}

.model-manage-row-file {
  display: grid;
  gap: 3px;
}

.model-manage-row-file span,
.model-manage-row-file small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-manage-row-file small {
  color: rgba(203, 217, 231, 0.52);
  font-size: 11px;
}

.model-manage-row-status {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(106, 230, 196, 0.10);
  color: rgba(166, 255, 225, 0.92);
  font-size: 11px;
  font-weight: 900;
}

.model-manage-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.model-manage-row-btn {
  min-width: 52px;
  height: 30px;
}

.model-manage-row-delete {
  border: 1px solid rgba(255, 120, 120, 0.18);
  background: rgba(255, 120, 120, 0.08);
  color: rgba(255, 190, 190, 0.92);
  cursor: pointer;
}

.model-manage-row-cancel {
  border: 1px solid rgba(255, 120, 120, 0.18);
  background: rgba(255, 120, 120, 0.08);
  color: rgba(255, 190, 190, 0.92);
  cursor: pointer;
}

@media (max-width: 760px) {
  .model-context-bar {
    left: 156px;
    top: 38px;
  }

  .model-context-main {
    width: calc(100vw - 180px);
    max-width: 236px;
  }

  .model-context-trigger {
    min-width: 0;
  }

  .model-drawer {
    width: calc(100% - 24px);
    height: calc(100% - 48px);
  }

  .model-drawer-body {
    overflow: auto;
    grid-template-rows: auto auto;
    padding: 14px;
  }

  .model-upload-fields,
  .model-upload-drop,
  .model-manage-row {
    grid-template-columns: 1fr;
  }

  .model-manage-row.is-head {
    display: none;
  }

  .model-manage-list {
    height: auto;
    max-height: none;
  }

  .model-manage-row-actions {
    justify-content: flex-start;
  }
}
</style>
