/* Private workbench integration layer. The product shell lives in the three
   platform stylesheets copied unchanged from teaching-agent-platform. */

* { letter-spacing: 0 !important; }
body { overflow: hidden; }

/* 只剩登录页顶上这一枚。侧栏和首屏原先各挂着一枚同样的符号记号，都删了——
   旁边就是「AI 工作台」五个字，标题也是一句完整的话，两处都立得住，记号只是
   替它们撑场子；而一个抽象符号摆在最显眼的位置上，读者第一眼花掉的注意力是
   在猜它什么意思。登录页上没有别的东西，所以这一枚留着。 */
.auth-brand-mark {
  flex: 0 0 auto;
  place-items: center;
  color: var(--crimson);
  font-family: var(--serif);
  line-height: 1;
}

.rail-brand .rail-brand-copy { display: grid; }

.rail-account-menu > button {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: #a83c43;
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  text-align: left;
  cursor: pointer;
}

.rail-account-menu > button:hover { background: rgb(184 41 52 / 6%); color: #7e282f; }
.rail-account-menu > button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.desk-session-list:empty::before {
  content: "还没有对话";
  margin: 6px 10px;
  color: #a8a29f;
  font-size: var(--t-label);
}

.desk-pane-title { display: grid; gap: 2px; }
.desk-menu:not([hidden]) { display: block; }

/* message-list 是 display: contents：每条消息因此是 .desk-messages 这张网格的
   直接子项，跟首屏那块共用同一条 --column 和同一次居中。中间隔一层普通的 div
   的话，居中的是那层 div，消息自己仍然贴着它的左边界。 */
.message-list { display: contents; }
.desk-message-body { min-width: 0; }
.desk-message.is-user > .desk-message-body {
  max-width: 88%;
  padding: 11px 16px;
  border-radius: var(--r-lg);
  background: #eeeae7;
}

.message-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.message-attachments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 8px;
  margin-bottom: 10px;
}

.message-attachments img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border: 1px solid #e2e0dd;
  border-radius: var(--r-sm);
  background: #f3f2ef;
  object-fit: cover;
}

.tool-stage,
.artifact-frame {
  width: min(640px, 100%);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--canvas);
}

.tool-stage { position: relative; }
.tool-stage canvas,
.tool-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tool-status {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: var(--r-sm);
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 4px 16px rgb(34 33 32 / 8%);
  color: #57544f;
  font-size: var(--t-label);
}

.tool-status > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-progress-track {
  width: 120px;
  height: 3px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: #dedbd7;
}

.tool-progress-bar {
  width: var(--progress, 8%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--crimson);
  transition: width 240ms ease;
}

.artifact-frame { position: relative; margin: 0; }
.artifact-frame > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.artifact-toolbar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: var(--r-sm);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 5px 18px rgb(34 33 32 / 12%);
}

.artifact-action {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: #5e5b57;
  cursor: pointer;
}

.artifact-action:hover { background: #f0efec; color: var(--ink); }
.artifact-action img { width: 16px; height: 16px; }

.turn-error {
  padding: 10px 12px;
  border: 1px solid rgb(184 41 52 / 28%);
  border-radius: var(--r-sm);
  background: rgb(184 41 52 / 5%);
  color: var(--crimson-deep);
  font-size: var(--t-label);
}

.typing-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--crimson);
  animation: desk-pulse 1s ease-in-out infinite;
}

.desk-composer.is-dragging {
  border-color: rgb(184 41 52 / 42%);
  background: rgb(184 41 52 / 3%);
}

.attachment-strip {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  overflow-x: auto;
}

.attachment-chip {
  width: 58px;
  height: 58px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
}

.attachment-chip > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.attachment-chip.is-uploading { opacity: 0.5; }
.attachment-remove {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(37 36 35 / 82%);
  cursor: pointer;
}
.attachment-remove img { width: 12px; height: 12px; filter: invert(1); }

.desk-composer-foot > button[type="submit"][hidden] { display: none; }
.desk-composer input[type="file"] { display: none; }

.desk-files { grid-template-rows: auto minmax(0, 1fr) auto; }
.desk-files > header { grid-row: 1; }
.desk-side-files { grid-row: 2; }
.desk-files > footer { grid-row: 3; }
.desk-file-list img.desk-file-icon { object-fit: cover; }
.desk-file-kind { color: #a8a5a1; font-size: var(--t-meta); }

.desk-file-list:empty::before,
.desk-file-empty {
  content: "当前对话还没有图片";
  margin: 6px 9px;
  color: #a8a5a1;
  font-size: var(--t-label);
  line-height: 1.7;
}

.desk-files > footer { align-content: end; }
.desk-files > footer .desk-formats { font-size: var(--t-meta); }

.image-dialog {
  width: min(92vw, 1120px);
  height: min(90vh, 900px);
  position: fixed;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d8d5d1;
  border-radius: var(--r-md);
  background: #f4f2ef;
}
.image-dialog::backdrop { background: rgb(25 24 23 / 65%); }
.image-dialog > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.dialog-close {
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #dfdeda;
  border-radius: var(--r-sm);
  background: rgb(255 255 255 / 92%);
  cursor: pointer;
}
.dialog-close img { width: 16px; height: 16px; }

.toast-region {
  position: fixed;
  z-index: 300;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast {
  max-width: min(420px, calc(100vw - 36px));
  padding: 9px 14px;
  border: 1px solid #dfdeda;
  border-radius: var(--r-sm);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 10px 30px rgb(34 33 32 / 12%);
  color: #55524f;
  font-size: var(--t-label);
  line-height: 1.6;
}
.toast.is-error { border-color: rgb(184 41 52 / 28%); color: var(--crimson-deep); }

.auth-state {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 28px;
  text-align: center;
}
.auth-brand-mark { display: grid; font-size: 26px; }
.auth-state h1 { margin: 16px 0 26px; font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); font-weight: var(--w-medium); }
.auth-state p { margin: 14px 0 0; color: var(--muted); font-size: var(--t-label); }
.auth-actions {
  width: min(280px, calc(100vw - 56px));
  display: grid;
  gap: 10px;
}
.auth-button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-medium);
  background: #fff;
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-size: var(--t-ui);
  text-decoration: none;
}
.auth-button:hover { border-color: var(--line-strong); }
.feishu-button { border-color: #3370ff; background: #3370ff; color: #fff; }
.feishu-button:hover { border-color: #245bdb; background: #245bdb; }
.feishu-button > span { font-size: 16px; font-weight: var(--w-strong); }
.google-button > span { color: #3568c7; font-size: 17px; font-weight: var(--w-strong); }

@media (max-width: 760px) {
  .desk-workbench { height: 100dvh; }
  .desk-rail { top: 0; border-right: 1px solid var(--line); background: var(--paper); }
  .desk-files { top: 0; }
  .desk-scrim { inset: 0; }
  /* 手机上没有常驻页头，抽屉顶上这一行是页面上唯一的身份标识，所以它在这里
     反而要露出来——desk.css 的手机段把 .rail-head 整块藏了，那是给有页头的
     版面写的。折叠扣子仍然不给：抽屉靠遮罩和滑动关，不靠一颗扣子。 */
  .desk-rail .rail-head { display: flex; align-items: center; min-height: 44px; margin-bottom: 6px; }
  .desk-rail .rail-brand { display: flex; flex: 1 1 auto; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
  .desk-rail .rail-brand strong { font-family: var(--serif); font-size: 16px; font-weight: var(--w-strong); }
  .desk-rail .rail-fold { display: none; }
  .desk-messages { padding-top: 16px; }
  .tool-status { align-items: flex-start; flex-direction: column; }
  .tool-progress-track { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dot::after { animation: none; }
  .tool-progress-bar { transition: none; }
}