/**
 * IM Chat Styles - WeChat-inspired UI
 * 微信風格的即時通訊界面
 */

/* ========== 基礎配色 ========== */
:root {
  --wechat-bg: #fafafa;
  --wechat-accent: #e8f4f8;
  --wechat-accent-dark: #d4e9f0;
  --atomy-blue: rgb(0, 181, 239);
  --atomy-blue-light: #4edcff;
  --atomy-blue-deep: #009fd4;
  --wechat-white: #ffffff;
  --wechat-gray: #9ca3af;
  --wechat-dark: #374151;
  --wechat-border: #e5e7eb;
  --wechat-sidebar-bg: #f9fafb;
  --wechat-active: #f3f4f6;
  --wechat-link: #6b7280;
}

/* ========== 整體布局 ========== */
body {
  background: var(--wechat-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--wechat-dark);
  overflow: hidden;
}

#app-container {
  border: none;
  background: var(--wechat-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

#app-container > header {
  flex: 0 0 auto;
}

#desktop-container {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}

#desktop-container main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

#app-container > footer {
  flex: 0 0 auto;
}

.footer-links-right {
  text-align: right;
  padding: 4px 0;
}

#app-container > footer:has(.ios-float-nav) {
  flex: 0 0 0;
  height: 0;
  overflow: visible;
}

.ios-float-nav {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1200;
  width: min(420px, calc(100vw - 35vw));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(248, 250, 255, 0.72);
  border: 1px solid rgba(0, 181, 239, 0.22);
  box-shadow: 0 10px 24px rgba(0, 120, 160, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: saturate(165%) blur(20px);
  backdrop-filter: saturate(165%) blur(20px);
}

.ios-float-nav-item {
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(52, 66, 96, 0.88);
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.ios-float-nav-item:hover {
  color: #007ba6;
  background: rgba(0, 181, 239, 0.14);
  border-radius: 999px;
}

.ios-float-nav-item:active {
  transform: scale(0.97);
}

.ios-float-nav-item.is-active {
  color: #f4fdff;
  background: radial-gradient(circle at 30% 20%, var(--atomy-blue-light) 0%, var(--atomy-blue) 65%, var(--atomy-blue-deep) 100%);
  box-shadow: 0 6px 14px rgba(0, 181, 239, 0.45);
}

.ios-float-nav-icon {
  font-size: 1.28rem;
  line-height: 1;
  font-weight: 500;
  transform: translateY(-1px);
}

#app-container:has(.ios-float-nav) #desktop-container main {
  padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}

/* ========== 頭部導航 ========== */
#app-container > header {
  background: var(--wechat-sidebar-bg);
  border-bottom: 1px solid var(--wechat-border);
  padding: 0.8em 1em;
  font-size: 0.95em;
}

#app-container > header a {
  color: var(--wechat-dark);
  padding: 0.3em 0.6em;
  border-radius: 4px;
  transition: background 0.2s;
}

#app-container > header a.header-app-icon-link {
  align-items: center;
  line-height: 1;
}

#app-container > header img.header-app-icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
}

#app-container > header a:hover {
  background: var(--wechat-active);
  color: var(--wechat-dark);
}

/* ========== 側邊欄 (聯絡人列表風格) ========== */
#desktop-container aside {
  background: var(--wechat-sidebar-bg);
  border-right: 1px solid var(--wechat-border);
  flex: 0 0 280px !important;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Deck 列表樣式 */
.deck-list-filter {
  display: grid;
  gap: 8px;
  padding: 10px 12px 0 12px;
}

.deck-list-filter-input {
  width: 100%;
  border: 1px solid var(--wechat-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9em;
  background: #fff;
}

ul.deck-list {
  margin: 0;
  padding: 0;
}

ul.deck-list li {
  border-bottom: 1px solid var(--wechat-border);
  margin: 0;
  transition: background 0.2s;
}

ul.deck-list li > a {
  padding: 12px 15px;
  display: block;
  text-decoration: none;
  color: var(--wechat-dark);
}

ul.deck-list li:hover {
  background: #e6e6e6;
}

ul.deck-list li:active,
ul.deck-list li.active {
  background: #c6c6c6;
}

.deck-profile-pic {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--wechat-accent-dark);
  color: var(--wechat-dark);
  font-size: 1.1em;
  margin-right: 10px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== 主內容區域 ========== */
#desktop-container main {
  background: var(--wechat-bg);
  display: flex;
  flex-direction: column;
}

/* ========== 聊天氣泡卡片 ========== */
.card {
  border: none;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

/* 卡片主要內容區 - 類似對話氣泡 */
.card > .card-bubble {
  background: var(--wechat-white);
  border-radius: 4px;
  padding: 12px 15px;
  margin: 10px 15px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 綠色氣泡 (AI 回應或特殊標記) */
.card.gold .card-bubble,
.card.ai-response .card-bubble {
  background: var(--wechat-accent);
}

/* 卡片標題 */
.card-title {
  text-align: left;
  margin: 0 0 8px 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--wechat-dark);
}

/* 卡片元信息 */
.card-meta-label {
  background: transparent;
  position: static;
  margin: 0;
  padding: 0;
  font-size: 0.75em;
  color: var(--wechat-gray);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-meta-label a {
  color: var(--wechat-link) !important;
}

.card-happened-at {
  color: var(--wechat-gray);
  font-size: 0.9em;
}

/* 置頂標記 */
.card.gold {
  border: none;
}

.card.gold .card-bubble {
  background: #fefce8;
  border-left: 3px solid #fde047;
}

/* 歸檔標記 */
.archived {
  background: #e0e0e0;
  color: #666;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.75em;
}

/* ========== 評論區域 (對話串風格) ========== */
.comment-show {
  margin: 8px 15px;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

/* 評論氣泡容器 */
.comment-bubble {
  background: var(--wechat-white);
  border-radius: 4px;
  padding: 10px 12px;
  display: inline-block;
  max-width: 85%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}

/* AI 的評論 (左側) */
.comment-show.ai-comment {
  justify-content: flex-start;
}

/* 自己的評論 (右側綠色) */
.comment-show.own-comment .comment-bubble {
  background: var(--wechat-accent);
  float: right;
}

/* 評論時間 */
.comment-time {
  font-size: 0.7em;
  color: var(--wechat-gray);
  margin-bottom: 4px;
}

.comment-time a {
  color: var(--wechat-gray);
  text-decoration: none;
}

/* 評論操作按鈕 */
.comment-actions {
  display: inline-flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.2s;
}

.comment-show:hover .comment-actions {
  opacity: 1;
}

.comment-actions button,
.comment-actions form button {
  font-size: 0.7em;
  padding: 2px 8px;
  border: 1px solid var(--wechat-border);
  background: var(--wechat-white);
  border-radius: 3px;
  cursor: pointer;
  color: var(--wechat-link);
}

.comment-actions button:hover {
  background: var(--wechat-bg);
}

/* 清除浮動 */
.comment-show::after {
  content: "";
  display: table;
  clear: both;
}

/* ========== 底部輸入區域 ========== */
.send-message-footer {
  background: var(--wechat-sidebar-bg);
  border-top: 1px solid var(--wechat-border);
  padding: 12px 15px;
  position: sticky;
  bottom: 0;
  z-index: 100;
}

.send-message-footer textarea,
.send-message-footer input[type="text"] {
  border: 1px solid var(--wechat-border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 1em;
  resize: none;
  min-height: 44px;
  max-height: 120px;
  background: var(--wechat-white);
  transition: border-color 0.2s;
}

.send-message-footer textarea:focus {
  outline: none;
  border-color: var(--wechat-accent);
}

.send-message-footer input[type="submit"] {
  background: var(--wechat-accent);
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  color: var(--wechat-dark);
  font-size: 1em;
  cursor: pointer;
  min-width: 60px;
  transition: opacity 0.2s;
}

.send-message-footer input[type="submit"]:hover {
  opacity: 0.9;
}

.send-message-footer input[type="submit"]:active {
  opacity: 0.8;
}

.send-message-footer .quick-attach-rich-text {
  margin-right: 6px;
}

.send-message-footer .quick-attach-rich-text trix-toolbar {
  border: 1px solid var(--wechat-border);
  border-radius: 4px;
  background: var(--wechat-white);
  padding: 0;
}

.send-message-footer .quick-attach-rich-text trix-toolbar .trix-button-row {
  display: flex;
}

.send-message-footer .quick-attach-rich-text trix-toolbar .trix-button-group {
  margin: 0;
  border: 0;
}

.send-message-footer .quick-attach-rich-text trix-toolbar .trix-button-group:not(.trix-button-group--file-tools),
.send-message-footer .quick-attach-rich-text trix-toolbar .trix-dialogs {
  display: none;
}

.send-message-footer .quick-attach-rich-text trix-toolbar .trix-button--icon-attach {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 0;
}

.send-message-footer .quick-attach-rich-text trix-toolbar .trix-button--icon-attach::before {
  transform: scale(0.72);
  transform-origin: center;
}

.send-message-footer .quick-attach-rich-text .quick-attach-editor {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ========== 卡片預覽 (網格視圖) ========== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  padding: 10px;
}

.card-preview {
  background: var(--wechat-white);
  border: 1px solid var(--wechat-border);
  border-radius: 4px;
  padding: 12px;
  margin: 0;
  height: auto;
  min-height: 120px;
  max-height: 360px;
  overflow: hidden;
  transition: background 0.2s, box-shadow 0.2s;
}

:has(#table-view:checked) .card-preview {
  border: none;
  border-bottom: 1px solid var(--wechat-border);
  border-radius: 0;
  min-height: initial;
}

.card-preview:hover {
  background: #fafafa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-preview .card-meta-label {
  margin-bottom: 8px;
}

.card-preview-content {
  color: #666;
  font-size: 0.9em;
  line-height: 1.5;
}

/* ========== AI Responses 列表 ========== */
.ai-responses-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
}

.ai-response-card {
  display: block;
  background: var(--wechat-white);
  border: 1px solid var(--wechat-border);
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s, box-shadow 0.2s;
}

.ai-response-card:hover {
  background: var(--wechat-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ai-response-card .card-meta-label {
  margin-bottom: 10px;
  font-size: 0.85em;
}

.ai-response-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--wechat-dark);
  margin-bottom: 12px;
}

.ai-response-content {
  color: #555;
  font-size: 0.95em;
  line-height: 1.6;
}

.ai-response-content p {
  margin: 0;
}

.empty-state {
  text-align: center;
  color: var(--wechat-gray);
  padding: 40px;
  font-size: 1.1em;
}

/* ========== 按鈕組 ========== */
.button_to_group {
  margin: 10px 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.button_to_group form,
.button_to_group button {
  margin: 0;
}

.button_to_group button,
.button_to_group input[type="submit"] {
  background: var(--wechat-white);
  border: 1px solid var(--wechat-border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.85em;
  color: var(--wechat-dark);
  cursor: pointer;
  transition: all 0.2s;
}

.button_to_group button:hover:not(:disabled),
.button_to_group input[type="submit"]:hover:not(:disabled) {
  background: var(--wechat-bg);
  border-color: #ccc;
}

.button_to_group button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button_to_group strong,
.group-label {
  font-size: 0.85em;
  color: var(--wechat-gray);
  margin-right: 5px;
}

/* 卡片操作按鈕組 */
.card-actions-group {
  gap: 8px;
}

.move-card-options {
  display: block;
}

.move-card-options form {
  display: block;
  margin-bottom: 8px;
}

.move-card-options form:last-child {
  margin-bottom: 0;
}

.move-card-options button,
.move-card-options input[type="submit"] {
  display: block;
  width: 100%;
  text-align: left;
}

.action-btn-ai {
  background: var(--wechat-accent) !important;
  border-color: var(--wechat-accent-dark) !important;
}

/* Column 切換組 */
.column-switch-group {
  display: flex;
  gap: 0;
  background: var(--wechat-sidebar-bg);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--wechat-border);
}

.column-switch-group button,
.column-switch-group input[type="submit"] {
  padding: 4px 10px;
  font-size: 0.8em;
  min-width: 60px;
  border: 1px solid var(--wechat-border);
  background: var(--wechat-white);
  margin-left: -1px;
  color: var(--wechat-dark);
  transition: background 0.2s;
}

.column-switch-group button:first-of-type,
.column-switch-group input[type="submit"]:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-left: 0;
}

.column-switch-group button:last-of-type,
.column-switch-group input[type="submit"]:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.column-switch-group button:hover:not(:disabled),
.column-switch-group input[type="submit"]:hover {
  background: var(--wechat-bg);
}

.column-switch-group .btn-current {
  background: var(--wechat-accent);
  border-color: var(--wechat-accent-dark);
  font-weight: 500;
}

/* Mark 操作組 */
.mark-actions-group {
  background: var(--wechat-sidebar-bg);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--wechat-border);
}

.mark-actions-group button,
.mark-actions-group input[type="submit"] {
  padding: 4px 10px;
  font-size: 0.8em;
}

.mark-actions-group .btn-pin,
.mark-actions-group .btn-unpin {
  background: #fefce8;
  border-color: #fde047;
}

.mark-actions-group .btn-archive,
.mark-actions-group .btn-unarchive {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.mark-actions-group .btn-trash {
  background: #fee2e2;
  border-color: #fca5a5;
}

.trash-card-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trash-card-actions {
  display: flex;
  gap: 8px;
  margin: 0 15px 12px;
}

/* ========== 分組鏈接 ========== */
.grouped-links {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin: 10px 15px;
}

.grouped-links > a {
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--wechat-border);
  background: var(--wechat-white);
  margin-left: -1px;
  color: var(--wechat-dark);
  font-size: 0.9em;
  transition: background 0.2s;
}

.grouped-links > a:hover {
  background: var(--wechat-bg);
}

.grouped-links > a:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-left: 0;
}

.grouped-links > a:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* ========== 通知消息 ========== */
.notice {
  background: var(--wechat-accent);
  color: var(--wechat-dark);
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: auto;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ========== 日曆視圖 ========== */
.simple-calendar {
  background: var(--wechat-white);
  border-radius: 4px;
  margin: 10px 15px;
  padding: 15px;
}

.simple-calendar .day {
  background: var(--wechat-bg);
  border: 1px solid var(--wechat-border);
  padding: 8px;
  overflow: hidden;
}

.simple-calendar .today {
  background: var(--wechat-accent-dark);
}

/* Calendar card preview overflow fix */
.card-in-calendar {
  overflow: hidden !important;
  word-break: break-word;
  max-width: 100%;
}

.card-in-calendar .card-preview-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.card-in-calendar img {
  max-width: 100%;
  height: auto;
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  margin: 10px 15px;
  padding: 10px;
  background: var(--wechat-white);
  border-radius: 4px;
}

.calendar-nav a {
  color: var(--wechat-link);
}

/* ========== 分頁 ========== */
.pagy {
  margin: 15px;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.pagy a {
  padding: 6px 12px;
  background: var(--wechat-white);
  border: 1px solid var(--wechat-border);
  border-radius: 4px;
  color: var(--wechat-dark);
  text-decoration: none;
  transition: all 0.2s;
}

.pagy a:hover {
  background: var(--wechat-bg);
}

.pagy a.current {
  background: var(--wechat-accent-dark);
  border-color: var(--wechat-border);
}

/* ========== 響應式調整 ========== */
@media screen and (max-width: 1000px) {
  #desktop-container aside {
    display: none;
  }

  .comment-bubble {
    max-width: 90%;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    padding: 4px;
    gap: 4px;
  }

  /* 手機：減少左右空位 */
  #app-container {
    height: 100dvh;
  }

  #app-container > header {
    padding: 0.4em 0.4em;
    font-size: 0.8em;
  }

  #app-container > header a {
    padding: 0.15em 0.3em;
  }

  #desktop-container main {
    padding: 0;
  }

  .card > .card-bubble {
    margin: 4px;
    padding: 8px 10px;
    border-radius: 3px;
  }

  .comment-show {
    margin: 4px;
  }

  .button_to_group,
  .grouped-links {
    margin: 4px;
  }

  .button_to_group button,
  .button_to_group input[type="submit"] {
    padding: 4px 8px;
    font-size: 0.8em;
  }

  .send-message-footer {
    padding: 6px;
  }

  .send-message-footer textarea {
    padding: 8px;
  }

  .pagy {
    margin: 4px;
  }

  table {
    margin: 4px;
    width: calc(100% - 8px);
  }

  .simple-calendar,
  .calendar-nav,
  .switch-view-group,
  .deck-header {
    margin: 4px !important;
    padding: 8px !important;
  }

  /* Deck list 更少空位 */
  ul.deck-list li > a {
    padding: 10px 8px;
  }

  .deck-profile-pic {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 1em;
  }

  .ios-float-nav {
    width: min(420px, calc(100vw - 35vw));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 3px;
    padding: 4px;
  }

  .ios-float-nav-item {
    height: 40px;
  }

  .ios-float-nav-icon {
    font-size: 1.16rem;
  }

  #app-container:has(.ios-float-nav) #desktop-container main {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }



  /* Page header & toolbar 更緊湊 */
  .page-header {
    margin: 4px;
  }

  .page-header h1 {
    font-size: 1.1em;
  }

  .page-toolbar {
    margin: 4px;
    gap: 4px;
  }

  .page-toolbar .btn-primary,
  .page-toolbar .btn-secondary {
    padding: 4px 8px;
    font-size: 0.85em;
  }

  /* Deck header container 手機樣式 */
  .deck-header-container {
    margin: 4px;
    padding: 10px;
  }

  .deck-title-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .deck-title-row h1 {
    font-size: 1.1em;
    flex: 1 1 auto;
    min-width: 0;
  }

  .deck-header-actions {
    gap: 8px;
    flex-wrap: nowrap;
  }

  .btn-icon {
    padding: 4px 6px;
    font-size: 0.9em;
  }

  .switch-view-group.compact {
    padding: 2px 6px;
    gap: 6px;
  }

  .switch-view-group.compact label {
    font-size: 0.8em;
  }

  .switch-view-group.compact input[type="radio"] {
    width: 14px;
    height: 14px;
  }

  .deck-description {
    font-size: 0.85em;
  }

  /* Column filter 更緊湊 */
  .column-filter {
    margin: 4px;
  }

  .column-filter > a {
    padding: 4px 8px;
    font-size: 0.8em;
  }

  /* Calendar link */
  .calendar-link {
    margin: 4px;
  }

  /* Pagination */
  .pagination-top,
  .pagination-bottom {
    margin: 4px;
  }

  /* 卡片元信息更緊湊 */
  .card-meta-label {
    font-size: 0.7em;
    gap: 4px;
  }

  .card-title {
    font-size: 0.95em;
    margin-bottom: 6px;
  }

  /* AI 回應區域更緊湊 */
  .ai-response-section {
    margin-top: 10px;
    padding-top: 10px;
  }

  .ai-content {
    padding: 8px;
  }

  /* Button groups 更緊湊 */
  .column-switch-group,
  .mark-actions-group {
    padding: 6px 8px;
  }

  .column-switch-group button,
  .mark-actions-group button {
    padding: 3px 6px;
    font-size: 0.75em;
    min-width: auto;
  }
}

/* ========== 鏈接樣式統一 ========== */
a:link,
a:visited {
  color: var(--wechat-link);
  text-decoration: none;
}

a:hover {
  background: transparent;
  /* text-decoration: underline; */
}

/* 頂部導航特殊處理 */
#app-container > header a:hover {
  text-decoration: none;
}

/* ========== 輸入框樣式 ========== */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  border: 1px solid var(--wechat-border);
  border-radius: 4px;
  padding: 10px;
  font-size: 1em;
  background: var(--wechat-white);
  transition: border-color 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--wechat-accent);
}

/* ========== 表格樣式 ========== */
table {
  background: var(--wechat-white);
  border: 1px solid var(--wechat-border);
  margin: 10px 15px;
  width: calc(100% - 30px);
}

table th {
  background: var(--wechat-sidebar-bg);
  font-weight: 600;
}

table th,
table td {
  border: 1px solid var(--wechat-border);
  padding: 10px;
}

table tr:nth-child(even) {
  background: var(--wechat-bg);
}

table tr:hover {
  background: #ebebeb;
}

/* ========== 頂部操作區 ========== */
.top-right {
  position: absolute;
  top: 10px;
  right: 15px;
}

.top-right a {
  color: var(--wechat-gray);
  font-size: 0.85em;
  padding: 4px 8px;
}

.top-right a:hover {
  color: var(--wechat-dark);
}

/* ========== 加載動畫 ========== */
.loading-spinner {
  text-align: center;
  padding: 40px;
  color: var(--wechat-gray);
}

/* ========== 切換視圖按鈕 ========== */
.switch-view-group {
  margin: 10px 15px;
  padding: 10px;
  background: var(--wechat-white);
  border-radius: 4px;
  display: flex;
  gap: 15px;
}

.switch-view-group label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.switch-view-group input[type="radio"] {
  width: auto;
}

/* ========== AI 回應區域 ========== */
.ai-response-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed var(--wechat-border);
}

.ai-label {
  font-size: 0.8em;
  color: var(--wechat-gray);
  margin-bottom: 8px;
}

.ai-content {
  background: var(--wechat-accent);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
}

.ai-content h1 {
  font-size: 1.3em;
}

.ai-content h2 {
  font-size: 1.2em;
}

.ai-content h3 {
  font-size: 1.1em;
}

.ai-response-section button {
  font-size: 0.75em;
  padding: 4px 10px;
  border: 1px solid var(--wechat-border);
  background: var(--wechat-white);
  border-radius: 3px;
  cursor: pointer;
}

/* ========== 卡片內容 ========== */
.card-content {
  line-height: 1.6;
  color: var(--wechat-dark);
}

.card-content p {
  margin: 0 0 10px 0;
}

.card-content p:last-child {
  margin-bottom: 0;
}

/* ========== 評論區塊 ========== */
.comments-section {
  padding: 10px 0;
}

.comment-form-footer {
  margin-top: 10px;
}

/* ========== Reference Thread ========== */
.reference-thread-title {
  margin: 15px;
  color: var(--wechat-gray);
  font-size: 0.9em;
  font-weight: normal;
}

@media screen and (max-width: 1000px) {
  .reference-thread-title {
    margin: 10px 4px;
  }
}

/* ========== Deck 列表激活狀態 ========== */
ul.deck-list li.active-deck {
  background: #c6c6c6;
}



/* ========== Page Header & Toolbar ========== */
.page-header {
  margin: 10px 15px;
}

.page-header h1 {
  margin: 0;
  font-size: 1.3em;
}

.page-toolbar {
  margin: 10px 15px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ========== Deck Header Container (Flex Layout) ========== */
.deck-header-container {
  margin: 10px 15px;
  background: var(--wechat-white);
  border-radius: 4px;
  padding: 12px 15px;
}

.deck-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deck-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.deck-title-row h1 {
  margin: 0;
  font-size: 1.3em;
  flex: 1;
}

.deck-title-row h1 a {
  color: var(--wechat-dark);
  text-decoration: none;
}

.deck-title-row h1 a:hover {
  text-decoration: none;
  opacity: 0.8;
}

.deck-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deck-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
}

.deck-toolbar.compact {
  gap: 2px;
}

.btn-icon {
  padding: 6px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1em;
  transition: all 0.2s;
  background: transparent;
  border: 1px solid transparent;
}

.btn-icon:hover {
  background: var(--wechat-bg);
  text-decoration: none;
}

.deck-description {
  margin: 0;
  color: var(--wechat-gray);
  font-size: 0.9em;
  line-height: 1.4;
}

/* Switch view group compact version */
.switch-view-group.compact {
  margin: 0;
  padding: 4px 8px;
  gap: 10px;
}

.switch-view-group.compact label {
  font-size: 0.85em;
}

.btn-primary,
.btn-secondary {
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s;
  display: inline-block;
}

.btn-primary {
  background: var(--wechat-accent);
  color: var(--wechat-dark);
  border: 1px solid var(--wechat-accent-dark);
}

.btn-secondary {
  background: var(--wechat-bg);
  color: var(--wechat-dark);
  border: 1px solid var(--wechat-border);
}

.btn-primary:hover,
.btn-secondary:hover {
  opacity: 0.8;
  text-decoration: none;
}

.is-long-action-submitting {
  cursor: progress;
  opacity: 0.75;
}

/* Column filter */
.column-filter a.active {
  background: var(--wechat-accent);
  border-color: var(--wechat-accent-dark);
}

/* Calendar link */
.calendar-link {
  margin: 10px 15px;
}

/* Pagination */
.pagination-top,
.pagination-bottom {
  margin: 10px 15px;
}

/* ========== 滾動條樣式 ========== */
#desktop-container aside::-webkit-scrollbar,
#desktop-container main::-webkit-scrollbar {
  width: 6px;
}

#desktop-container aside::-webkit-scrollbar-track,
#desktop-container main::-webkit-scrollbar-track {
  background: transparent;
}

#desktop-container aside::-webkit-scrollbar-thumb,
#desktop-container main::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

#desktop-container aside::-webkit-scrollbar-thumb:hover,
#desktop-container main::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* ========== 空狀態 ========== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--wechat-gray);
}

.empty-state-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

/* ========== 卡片預覽圖片 ========== */
.card-preview img,
.card-bubble img {
  max-width: 100%;
  border-radius: 4px;
  margin: 10px 0;
}

/* ========== 代碼塊樣式 ========== */
.card-content pre,
.ai-content pre,
.comment-content pre {
  background: #f8f8f8;
  border: 1px solid var(--wechat-border);
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
  font-size: 0.9em;
}

.card-content code,
.ai-content code,
.comment-content code {
  background: #f0f0f0;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ========== 引用樣式 ========== */
.card-content blockquote,
.ai-content blockquote,
.comment-content blockquote {
  border-left: 3px solid var(--wechat-accent);
  margin: 10px 0;
  padding-left: 12px;
  color: #666;
}

/* ========== 列表樣式 ========== */
.card-content ul,
.card-content ol,
.comment-content ul,
.comment-content ol {
  margin: 10px 0;
  padding-left: 25px;
}

.card-content li,
.comment-content li {
  margin: 5px 0;
}

/* ========== Dashboard Settings ========== */
.dashboard-settings-page {
  margin: 12px 15px;
  display: grid;
  gap: 14px;
}

.dashboard-settings-hero {
  background: linear-gradient(160deg, #f2f8ff 0%, #ecf4ff 52%, #f6fbff 100%);
  border: 1px solid #d7e6f8;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.dashboard-settings-title-group h1 {
  margin: 0;
  font-size: 1.35em;
}

.dashboard-settings-title-group p {
  margin: 6px 0 0;
  color: #5f6d83;
  font-size: 0.95em;
}

.dashboard-space-chip {
  min-width: 170px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #d7e6f8;
  border-radius: 8px;
  padding: 9px 10px;
  display: grid;
  gap: 2px;
}

.dashboard-space-chip-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #70839c;
}

.dashboard-space-chip strong {
  color: #2f435f;
  line-height: 1.3;
}

.dashboard-kpi-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.dashboard-kpi-card {
  background: #fff;
  border: 1px solid var(--wechat-border);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.dashboard-kpi-card.is-alert {
  border-color: #f3a8a8;
  background: linear-gradient(180deg, #fff8f8 0%, #fff 100%);
}

.dashboard-kpi-label {
  color: #8190a8;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-kpi-value {
  color: #25344d;
  font-size: 1.3em;
  line-height: 1.2;
}

.dashboard-kpi-note {
  color: #8695ab;
  font-size: 0.8em;
}

.dashboard-settings-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.dashboard-panel {
  background: #fff;
  border: 1px solid var(--wechat-border);
  border-radius: 10px;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.dashboard-panel h2 {
  margin: 0;
  font-size: 1.03em;
  color: #31415a;
}

.dashboard-panel-copy {
  margin: 0;
  color: #68788f;
  font-size: 0.92em;
  line-height: 1.5;
}

.dashboard-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-feed-panel {
  border-color: #d6e2f6;
  background: linear-gradient(180deg, #f9fbff 0%, #fff 100%);
}

.dashboard-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82em;
  border: 1px solid #d8e0ed;
  background: #f3f6fa;
  color: #485a77;
}

.dashboard-status-pill.is-good {
  background: #ecfdf3;
  border-color: #b8ebc9;
  color: #166e46;
}

.dashboard-status-pill.is-warning {
  background: #fff7e8;
  border-color: #f2d4a1;
  color: #9b5c00;
}

.dashboard-status-pill.pending {
  background: #fff7e8;
  border-color: #f1d59f;
  color: #925d11;
}

.dashboard-status-pill.completed {
  background: #ecfdf3;
  border-color: #b8ebc9;
  color: #166e46;
}

.dashboard-status-pill.rejected {
  background: #f3f6fa;
  border-color: #d7dfe9;
  color: #51637f;
}

.dashboard-metric-list {
  margin: 0;
  display: grid;
  gap: 8px;
}

.dashboard-metric-item {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 8px;
  align-items: start;
}

.dashboard-metric-item dt {
  color: #8190a8;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-metric-item dd {
  margin: 0;
  color: #2f435f;
  font-weight: 500;
}

.dashboard-inline-note {
  color: #7a899f;
  font-size: 0.84em;
  font-weight: 400;
}

.dashboard-theme-form {
  display: grid;
  gap: 8px;
}

.dashboard-theme-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-theme-legend {
  width: 100%;
  margin-bottom: 2px;
  color: #7a899f;
  font-size: 0.76em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dashboard-theme-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d6deea;
  border-radius: 999px;
  background: #f7faff;
  color: #334962;
  font-size: 0.86em;
  line-height: 1.2;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}

.dashboard-theme-option input[type="radio"] {
  width: auto;
  margin: 0;
  accent-color: #2b7fc3;
}

.dashboard-theme-option:has(input[type="radio"]:checked) {
  background: #e7f0ff;
  border-color: #bdd3f2;
  color: #24456f;
  font-weight: 600;
}

.dashboard-warning {
  color: #b35a00;
  font-size: 0.9em;
}

.dashboard-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #d6deea;
  background: #f7faff;
  color: #31435f !important;
  padding: 6px 10px;
  font-size: 0.88em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.dashboard-action-link:hover {
  background: #edf4ff;
  border-color: #c3d5ed;
}

.dashboard-action-link.is-primary {
  background: #e7f0ff;
  border-color: #bdd3f2;
  color: #24456f !important;
}

.dashboard-action-link.is-warning {
  background: #fff4f4;
  border-color: #edbaba;
  color: #8e3232 !important;
}

.dashboard-danger-row .button_to {
  margin: 0;
}

.dashboard-danger-btn {
  background: #fff1f1;
  color: #8f2121;
  border: 1px solid #e9b7b7;
  border-radius: 8px;
  font-size: 0.88em;
  padding: 7px 12px;
  cursor: pointer;
}

.dashboard-danger-btn:hover {
  background: #ffe4e4;
}

@media (max-width: 720px) {
  .dashboard-settings-page {
    margin: 10px;
    gap: 10px;
  }

  .dashboard-settings-hero {
    padding: 12px;
    flex-direction: column;
  }

  .dashboard-space-chip {
    width: 100%;
  }

  .dashboard-settings-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-metric-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ========== Space Switcher ========== */
.space-switch-page {
  margin: 14px 15px;
  display: grid;
  gap: 12px;
}

.space-switch-header {
  border: 1px solid #d9e3f2;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.space-switch-header h1 {
  margin: 0;
  color: #263e5b;
  font-size: 1.3em;
}

.space-switch-header p {
  margin: 6px 0 0;
  color: #60758f;
  font-size: 0.9em;
}

.space-switch-manage-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 9px;
  border: 1px solid #c8d8ec;
  background: #edf4ff;
  color: #2a476c !important;
  font-size: 0.88em;
  font-weight: 500;
  text-decoration: none;
  padding: 7px 11px;
}

.space-switch-manage-link:hover {
  background: #e4efff;
  border-color: #b8cde7;
}

.space-switch-list {
  display: grid;
  gap: 10px;
}

.space-switch-item {
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.space-switch-item.is-current {
  border-color: #bcd2ef;
  background: #f5f9ff;
}

.space-switch-item-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.space-switch-item-main h2 {
  margin: 0;
  color: #273f5d;
  font-size: 1em;
}

.space-switch-item-main p {
  margin: 0;
  color: #657a93;
  font-size: 0.86em;
  line-height: 1.35;
}

.space-switch-current-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid #bdd3f2;
  background: #e7f1ff;
  color: #2a476d;
  font-size: 0.83em;
  font-weight: 600;
  padding: 0 10px;
  white-space: nowrap;
}

.space-switch-item .button_to {
  margin: 0;
}

.space-switch-item-button {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid #b9cee9;
  background: #e8f2ff;
  color: #24456f;
  font-size: 0.86em;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 12px;
}

.space-switch-item-button:hover {
  background: #dfecff;
  border-color: #aac3e4;
}

.space-switch-empty {
  border: 1px dashed #ccd9ec;
  border-radius: 10px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
  color: #5f738f;
}

.space-switch-empty p {
  margin: 0;
}

/* ========== Spaces Hub ========== */
.spaces-hub-page {
  margin: 14px 15px;
  display: grid;
  gap: 12px;
}

.spaces-hub-hero {
  border: 1px solid #d6e4f5;
  border-radius: 12px;
  background: linear-gradient(148deg, #f1f7ff 0%, #edf5ff 50%, #f9fcff 100%);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.spaces-hub-title-group h1 {
  margin: 0;
  color: #273e5a;
  font-size: 1.35em;
}

.spaces-hub-title-group p {
  margin: 6px 0 0;
  color: #667a96;
  font-size: 0.92em;
  line-height: 1.45;
}

.spaces-hub-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.spaces-hub-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid #c9d9ee;
  border-radius: 9px;
  background: #f4f9ff;
  color: #2d4a6d !important;
  font-size: 0.9em;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  transition: background 0.2s, border-color 0.2s;
}

.spaces-hub-action:hover {
  background: #e9f2ff;
  border-color: #b8cce6;
}

.spaces-hub-action.is-primary {
  background: #e6f0ff;
  border-color: #b4caea;
  color: #24456f !important;
}

.spaces-current-panel {
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.spaces-current-label {
  color: #7b8ea9;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spaces-current-panel strong {
  color: #273e5a;
  font-size: 1.12em;
  line-height: 1.3;
}

.spaces-current-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.spaces-current-pill {
  border: 1px solid #d8e2ef;
  border-radius: 999px;
  background: #f5f8fc;
  color: #50637f;
  font-size: 0.82em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
}

.spaces-current-pill strong {
  color: #2e425f;
  font-size: 1em;
}

.spaces-index-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.spaces-empty-state {
  border: 1px dashed #ccd9ec;
  border-radius: 10px;
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 10px;
  color: #5f738f;
}

.spaces-empty-state p {
  margin: 0;
}

.space-overview-card {
  border: 1px solid #dce6f4;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.space-overview-card.is-current {
  border-color: #bdd3f2;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  box-shadow: inset 0 0 0 1px rgba(189, 211, 242, 0.2);
}

.space-overview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.space-overview-header h2 {
  margin: 0;
  font-size: 1.05em;
}

.space-overview-title-link {
  color: #2a425f !important;
  text-decoration: none;
}

.space-overview-title-link:hover {
  color: #1b365b !important;
  background: transparent;
}

.space-overview-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #bad3f4;
  background: #eaf2ff;
  color: #27466f;
  padding: 3px 8px;
  font-size: 0.78em;
  white-space: nowrap;
}

.space-overview-description {
  margin: 0;
  color: #5b6f8b;
  font-size: 0.9em;
  line-height: 1.45;
}

.space-overview-stats {
  margin: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.space-overview-stats div {
  border: 1px solid #e1e8f4;
  border-radius: 8px;
  background: #f8fbff;
  padding: 8px;
  display: grid;
  gap: 2px;
}

.space-overview-stats dt {
  font-size: 0.75em;
  color: #7a8ca5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.space-overview-stats dd {
  margin: 0;
  font-size: 1.12em;
  color: #2f435f;
  line-height: 1.2;
}

.space-overview-updated-at {
  margin: 0;
  color: #7a8aa0;
  font-size: 0.82em;
}

.space-overview-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.space-overview-actions .button_to {
  margin: 0;
  grid-column: 1 / -1;
}

.space-switch-button,
.space-overview-link {
  width: 100%;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid #ccd8eb;
  background: #f8fbff;
  color: #30435f !important;
  font-size: 0.87em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 8px 10px;
  transition: background 0.2s, border-color 0.2s;
}

.space-switch-button {
  background: #e7f1ff;
  border-color: #b8ceee;
  color: #24456f;
  cursor: pointer;
}

.space-switch-button:hover,
.space-overview-link:hover {
  background: #ecf4ff;
  border-color: #bfd0e7;
}

.space-overview-current-pill {
  grid-column: 1 / -1;
  border-radius: 999px;
  border: 1px solid #c2d7f4;
  background: #ebf3ff;
  color: #2c4a73;
  font-size: 0.82em;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1000px) {
  .space-switch-page {
    margin: 10px;
    gap: 10px;
  }

  .space-switch-header {
    padding: 12px;
  }

  .spaces-hub-page {
    margin: 10px;
    gap: 10px;
  }

  .spaces-hub-hero {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  .spaces-index-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 640px) {
  .space-switch-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .space-switch-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .space-switch-current-badge,
  .space-switch-item .button_to,
  .space-switch-item-button {
    width: 100%;
  }

  .spaces-index-grid {
    grid-template-columns: 1fr;
  }

  .spaces-current-metrics,
  .space-overview-stats,
  .space-overview-actions {
    grid-template-columns: 1fr;
  }

  .space-overview-actions .button_to {
    grid-column: auto;
  }
}

@media (horizontal-viewport-segments: 2) {
  .spaces-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.is-folded .spaces-hub-page {
  margin: 10px;
  gap: 10px;
}

body.is-folded .space-switch-page {
  margin: 10px;
  gap: 10px;
}

body.is-folded .space-switch-header,
body.is-folded .space-switch-item {
  padding: 10px;
}

body.is-folded .spaces-hub-hero,
body.is-folded .spaces-current-panel,
body.is-folded .space-overview-card {
  padding: 12px;
}

body.is-folded .spaces-index-grid,
body.is-folded .spaces-current-metrics,
body.is-folded .space-overview-stats,
body.is-folded .space-overview-actions {
  grid-template-columns: 1fr;
}

body.is-folded .space-overview-actions .button_to {
  grid-column: auto;
}

/* ========== Search Hub ========== */
.search-hub-page {
  margin: 16px;
  display: grid;
  gap: 14px;
}

.search-hub-hero {
  border: 1px solid #d4deed;
  background: linear-gradient(125deg, #eff5ff 0%, #f8fbff 55%, #ffffff 100%);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-hub-hero h1 {
  margin: 0;
  color: #203451;
  font-size: 1.35em;
}

.search-hub-hero p {
  margin: 6px 0 0;
  color: #63748d;
  font-size: 0.92em;
  line-height: 1.45;
}

.search-hub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid #cbdaf0;
  background: #ffffff;
  color: #42556f;
  font-size: 0.83em;
  padding: 6px 10px;
}

.search-hub-pill strong {
  color: #1f3653;
}

.search-hub-panel {
  border: 1px solid #dce4ef;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.search-hub-search-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.search-hub-form {
  display: grid;
  gap: 8px;
}

.search-hub-label {
  font-size: 0.82em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #74839a;
  font-weight: 600;
}

.search-hub-form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.search-hub-form-row input[type="text"] {
  border: 1px solid #cdd8e9;
  border-radius: 10px;
  background: #ffffff;
  padding: 11px 13px;
  font-size: 1rem;
  box-shadow: inset 0 1px 2px rgba(25, 34, 52, 0.04);
}

.search-hub-form-row input[type="text"]:focus {
  border-color: #8eaedb;
  box-shadow: 0 0 0 3px rgba(110, 148, 209, 0.2);
  outline: none;
}

.search-hub-submit {
  border: 1px solid #aac2e7;
  border-radius: 10px;
  background: #e8f1ff;
  color: #1e3d66;
  font-weight: 600;
  font-size: 0.94em;
  padding: 0 16px;
  cursor: pointer;
}

.search-hub-submit:hover {
  background: #dceaff;
}

.search-hub-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px;
}

.search-hub-meta-card {
  border: 1px solid #e2e8f2;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.search-hub-meta-card h2 {
  margin: 0;
  color: #2a3e5b;
  font-size: 1em;
}

.search-hub-meta-card ul {
  margin: 0;
  padding-left: 18px;
  color: #5e6f87;
  font-size: 0.9em;
  line-height: 1.45;
}

.search-hub-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 8px;
}

.search-hub-shortcut {
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  background: #f7faff;
  color: #304561 !important;
  text-decoration: none;
  text-align: center;
  padding: 8px 10px;
  font-size: 0.88em;
}

.search-hub-shortcut:hover {
  background: #edf3fe;
  border-color: #c5d5ec;
}

.search-hub-section-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.search-hub-section-header h2 {
  margin: 0;
  color: #2c3e59;
  font-size: 1.08em;
}

.search-hub-section-header p {
  margin: 0;
  color: #718097;
  font-size: 0.85em;
}

.search-hub-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-hub-chip {
  border: 1px solid #cfd8e5;
  background: #f6f9ff;
  border-radius: 999px;
  color: #334c6e !important;
  font-size: 0.84em;
  line-height: 1.35;
  padding: 6px 11px;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-hub-chip:hover {
  border-color: #b8c9e2;
  background: #e9f1ff;
}

.search-hub-actions {
  display: flex;
  gap: 8px;
}

.search-hub-action-btn {
  border: 1px solid #d5dfeb;
  background: #f8fbff;
  color: #30425d !important;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85em;
  padding: 6px 10px;
}

.search-hub-action-btn:hover {
  background: #edf4ff;
  border-color: #c4d4ea;
}

.search-hub-saved-list {
  display: grid;
  gap: 8px;
}

.search-hub-saved-item {
  border: 1px solid #e2e8f2;
  border-radius: 10px;
  background: #fcfdff;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.search-hub-saved-content {
  min-width: 0;
}

.search-hub-saved-query {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #224066 !important;
  font-weight: 600;
  text-decoration: none;
}

.search-hub-saved-meta {
  margin: 3px 0 0;
  color: #7c8ca2;
  font-size: 0.8em;
}

.search-hub-saved-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.search-hub-inline-link {
  color: #466891 !important;
  font-size: 0.84em;
  text-decoration: none;
}

.search-hub-empty-state {
  border: 1px dashed #d5deea;
  border-radius: 10px;
  background: #f9fbff;
  padding: 16px;
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.search-hub-empty-state p {
  margin: 0;
  color: #74849b;
}

@media (max-width: 1000px) {
  .search-hub-page {
    margin: 10px;
    gap: 10px;
  }

  .search-hub-panel,
  .search-hub-hero {
    padding: 12px;
  }

  .search-hub-meta-grid {
    grid-template-columns: 1fr;
  }

  .search-hub-form-row {
    grid-template-columns: 1fr;
  }

  .search-hub-submit {
    width: 100%;
    min-height: 42px;
  }

  .search-hub-actions {
    width: 100%;
  }

  .search-hub-action-btn {
    flex: 1;
    text-align: center;
  }

  .search-hub-saved-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-hub-saved-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Folded outer displays can report wider CSS widths than expected. */
body.is-folded .search-hub-page {
  margin: 10px;
  gap: 10px;
}

body.is-folded .search-hub-panel,
body.is-folded .search-hub-hero {
  padding: 12px;
}

body.is-folded .search-hub-meta-grid,
body.is-folded .search-hub-form-row {
  grid-template-columns: 1fr;
}

body.is-folded .search-hub-submit {
  width: 100%;
  min-height: 42px;
}

body.is-folded .search-hub-actions {
  width: 100%;
}

body.is-folded .search-hub-action-btn {
  flex: 1;
  text-align: center;
}

body.is-folded .search-hub-saved-item {
  align-items: flex-start;
  flex-direction: column;
}

body.is-folded .search-hub-saved-actions {
  width: 100%;
  justify-content: flex-end;
}

/* ========== Theme: Dark ========== */
:root[data-theme="dark"] {
  --wechat-bg: #0b131b;
  --wechat-accent: #1a2735;
  --wechat-accent-dark: #223447;
  --atomy-blue: #2fb3e4;
  --atomy-blue-light: #6ddfff;
  --atomy-blue-deep: #1789bc;
  --wechat-white: #111a24;
  --wechat-gray: #8fa0b5;
  --wechat-dark: #e2ebf6;
  --wechat-border: #2b3f53;
  --wechat-sidebar-bg: #0f1821;
  --wechat-active: #1a2734;
  --wechat-link: #8caed8;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--wechat-bg);
  color: var(--wechat-dark);
}

html[data-theme="dark"] #app-container {
  background: var(--wechat-white);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] #app-container > header {
  background: var(--wechat-sidebar-bg);
  border-bottom-color: var(--wechat-border);
}

html[data-theme="dark"] #desktop-container aside {
  background: var(--wechat-sidebar-bg);
  border-right-color: var(--wechat-border);
}

html[data-theme="dark"] #app-container > header a,
html[data-theme="dark"] ul.deck-list li > a {
  color: var(--wechat-dark);
}

html[data-theme="dark"] #app-container > header a:hover {
  background: var(--wechat-active);
}

html[data-theme="dark"] .deck-list-filter-input,
html[data-theme="dark"] input:not([type]),
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="week"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #131f2b;
  color: var(--wechat-dark);
  border: 1px solid #30465b;
}

html[data-theme="dark"] ul.deck-list li:hover {
  background: #1a2734;
}

html[data-theme="dark"] ul.deck-list li:active,
html[data-theme="dark"] ul.deck-list li.active {
  background: #243444;
}

html[data-theme="dark"] .ios-float-nav {
  background: rgba(15, 24, 33, 0.82);
  border-color: rgba(102, 150, 198, 0.35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .ios-float-nav-item {
  color: rgba(209, 223, 241, 0.92);
}

html[data-theme="dark"] .ios-float-nav-item:hover {
  color: #c8e8ff;
  background: rgba(47, 179, 228, 0.2);
}

html[data-theme="dark"] a:link,
html[data-theme="dark"] a:visited {
  color: #8cc0f2;
}

html[data-theme="dark"] a:hover {
  background: rgba(100, 151, 198, 0.2);
}

html[data-theme="dark"] table,
html[data-theme="dark"] table th,
html[data-theme="dark"] table td {
  border-color: #32485e;
}

html[data-theme="dark"] table {
  background: #141f2a;
}

html[data-theme="dark"] table th {
  background: #1c2a37;
  color: var(--wechat-dark);
}

html[data-theme="dark"] table tr:nth-child(even) {
  background: #182532;
}

html[data-theme="dark"] table tr:hover {
  background: #223446;
}

html[data-theme="dark"] trix-toolbar {
  background: #141f2a;
}

html[data-theme="dark"] .notice {
  color: #9bf0be;
  background: #11281d;
  border-color: #2e5d44;
}

html[data-theme="dark"] .dashboard-settings-hero {
  background: linear-gradient(160deg, #1b2a3a 0%, #182433 52%, #1e2f41 100%);
  border-color: #31485f;
}

html[data-theme="dark"] .dashboard-settings-title-group p,
html[data-theme="dark"] .dashboard-space-chip-label,
html[data-theme="dark"] .dashboard-kpi-label,
html[data-theme="dark"] .dashboard-kpi-note,
html[data-theme="dark"] .dashboard-metric-item dt,
html[data-theme="dark"] .dashboard-inline-note {
  color: #93a8c0;
}

html[data-theme="dark"] .dashboard-space-chip {
  background: rgba(17, 26, 36, 0.8);
  border-color: #3a536c;
}

html[data-theme="dark"] .dashboard-space-chip strong,
html[data-theme="dark"] .dashboard-kpi-value,
html[data-theme="dark"] .dashboard-panel h2,
html[data-theme="dark"] .dashboard-metric-item dd {
  color: #dde8f6;
}

html[data-theme="dark"] .dashboard-kpi-card,
html[data-theme="dark"] .dashboard-panel {
  background: #141f2a;
  border-color: #30465c;
}

html[data-theme="dark"] .dashboard-kpi-card.is-alert {
  border-color: #8c4e4e;
  background: linear-gradient(180deg, #2a1b1b 0%, #1a1f27 100%);
}

html[data-theme="dark"] .dashboard-panel-copy {
  color: #9cafc5;
}

html[data-theme="dark"] .dashboard-feed-panel {
  border-color: #35506a;
  background: linear-gradient(180deg, #182434 0%, #141f2a 100%);
}

html[data-theme="dark"] .dashboard-status-pill {
  border-color: #3a5168;
  background: #1f3042;
  color: #b7c9de;
}

html[data-theme="dark"] .dashboard-status-pill.is-good,
html[data-theme="dark"] .dashboard-status-pill.completed {
  background: #1e3b30;
  border-color: #3f7c62;
  color: #9be2bf;
}

html[data-theme="dark"] .dashboard-status-pill.is-warning,
html[data-theme="dark"] .dashboard-status-pill.pending {
  background: #3a2e1a;
  border-color: #7a5f31;
  color: #f0d397;
}

html[data-theme="dark"] .dashboard-status-pill.rejected {
  background: #202e3d;
  border-color: #41556a;
  color: #aec0d5;
}

html[data-theme="dark"] .dashboard-theme-legend {
  color: #8ea4bc;
}

html[data-theme="dark"] .dashboard-theme-option {
  background: #1d2c3b;
  border-color: #41586f;
  color: #c4d7ec;
}

html[data-theme="dark"] .dashboard-theme-option:has(input[type="radio"]:checked) {
  background: #25435f;
  border-color: #4d7497;
  color: #d6ebff;
}

html[data-theme="dark"] .dashboard-warning {
  color: #ffbf78;
}

html[data-theme="dark"] .dashboard-action-link {
  border-color: #3e566d;
  background: #1f2f40;
  color: #c4d9f1 !important;
}

html[data-theme="dark"] .dashboard-action-link:hover {
  background: #294158;
  border-color: #4d6b88;
}

html[data-theme="dark"] .dashboard-action-link.is-primary {
  background: #224264;
  border-color: #4b7398;
  color: #d8ecff !important;
}

html[data-theme="dark"] .dashboard-action-link.is-warning {
  background: #3a2525;
  border-color: #8f4e4e;
  color: #ffc7c7 !important;
}

html[data-theme="dark"] .dashboard-danger-btn {
  background: #3a2323;
  border-color: #8f4e4e;
  color: #ffc3c3;
}

html[data-theme="dark"] .dashboard-danger-btn:hover {
  background: #4a2a2a;
}