/* ── 覆蓋 Chainlit 預設的圖片容器限制 ── */

/* 所有圖片容器改為 inline-block，讓小圖可以排在行間 */
.message-content div:has(> [data-radix-aspect-ratio-wrapper]),
.message-content div:has(> img) {
  display: inline-block !important;
  max-width: 100% !important;
  vertical-align: middle;
}

/* 移除強制 16:9 的 aspect-ratio 容器，改為自適應 */
/* 移除 bg-muted 灰色背景 */
.message-content [data-radix-aspect-ratio-wrapper],
.message-content [data-radix-aspect-ratio-wrapper] > * {
  aspect-ratio: unset !important;
  padding-bottom: 0 !important;
  position: relative !important;
  background: transparent !important;
}

.message-content [data-radix-aspect-ratio-wrapper] > [style] {
  position: relative !important;
}

/* 圖片本身：自適應原始比例，小圖隨文字排列 */
.message-content img {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 600px;
  object-fit: contain !important;
  border-radius: 8px;
  margin: 4px 4px;
  vertical-align: middle;
  cursor: pointer;
}

/* ── 一律淺色主題：隱藏右上角的主題切換按鈕 ── */
#theme-toggle {
  display: none !important;
}

/* ── 選擇角色前鎖住輸入框（class 由 custom.js 加在 <html> 上） ── */
html.role-locked #message-composer {
  opacity: 0.5;
  cursor: not-allowed;
}

html.role-locked #message-composer * {
  pointer-events: none;
}