:root {
  color-scheme: light;
  --line: #06c755;
  --ink: #182536;
  --muted: #6f7f91;
  --soft: #f6f8fa;
  --panel: #ffffff;
  --border: #dce3ea;
  --blue: #2f80ed;
  --warning: #ffb020;
  --danger: #e5483f;
  --shadow: 0 10px 30px rgba(24, 37, 54, 0.08);
  font-family: "Segoe UI", "Microsoft JhengHei", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: #f3f6f9;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  --sidebar-width: 270px;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: 58px 1fr;
  overflow: auto;
}

.app-shell.sidebar-collapsed {
  --sidebar-width: 72px;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 260px;
}

.line-wordmark {
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  color: #050505;
}

.brand-lockup strong,
.brand-lockup span {
  display: block;
}

.brand-lockup span {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.environment-switch {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.env-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
}

.env-pill.demo {
  color: #056d30;
  background: #ecfff4;
  border-color: #b8efcb;
}

.account-area {
  display: flex;
  align-items: center;
  gap: 9px;
}

.top-action,
.primary-button,
.secondary-button {
  border: 0;
  border-radius: 6px;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 700;
}

.top-action,
.primary-button {
  color: #fff;
  background: var(--blue);
}

.primary-button.active {
  background: #16a34a;
}

.secondary-button {
  color: var(--ink);
  border: 1px solid var(--border);
  background: #fff;
}

.full {
  width: 100%;
}

.sidebar {
  background: #f7f9fb;
  border-right: 1px solid var(--border);
  padding: 18px 0;
  overflow-y: auto;
}

.sidebar-control {
  padding: 0 14px 12px;
}

.sidebar-toggle {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: #40546a;
  font-weight: 800;
  text-align: left;
  padding: 0 2px;
}

.sidebar-toggle-icon {
  width: 32px;
  height: 32px;
  display: block;
  position: relative;
  color: #40546a;
  border: 1px solid #d8e0e8;
  border-radius: 7px;
  background: #fff;
}

.sidebar-toggle-chevrons {
  width: 16px;
  height: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.sidebar-toggle-chevrons::before,
.sidebar-toggle-chevrons::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(135deg);
}

.sidebar-toggle-chevrons::before {
  left: 1px;
}

.sidebar-toggle-chevrons::after {
  left: 7px;
}

.app-shell.sidebar-collapsed .sidebar-toggle-chevrons {
  transform: translate(-50%, -50%) scaleX(-1);
}

.app-shell.sidebar-collapsed .sidebar-control {
  padding: 0 10px 12px;
}

.app-shell.sidebar-collapsed .sidebar-toggle {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
}

.app-shell.sidebar-collapsed .sidebar-toggle-text {
  display: none;
}

.sidebar nav {
  display: grid;
  gap: 4px;
  padding: 0 14px 16px;
}

.nav-item {
  min-height: 44px;
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #2b3b4d;
  border-radius: 6px;
  padding: 0 10px;
  text-align: left;
}

.app-shell.sidebar-collapsed .sidebar nav {
  padding: 0 10px 16px;
}

.app-shell.sidebar-collapsed .nav-item {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0;
  padding: 0;
}

.app-shell.sidebar-collapsed .nav-item > span:not(.nav-symbol) {
  display: none;
}

.app-shell.sidebar-collapsed .nav-item b {
  position: absolute;
  top: 3px;
  right: 3px;
}

.nav-item.active {
  color: var(--line);
  background: #effbf3;
  font-weight: 800;
}

.nav-item b {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--line);
  border-radius: 9px;
  font-size: 11px;
}

.nav-symbol {
  width: 34px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  font-weight: 900;
  line-height: 1;
}

.nav-symbol.emoji,
.nav-symbol.chat {
  font-size: 21px;
}

.nav-symbol.tag {
  width: 40px;
  height: 22px;
  color: #fff;
  background: #2b3b4d;
  border-radius: 5px 6px 6px 5px;
  font-size: 9px;
  letter-spacing: 0;
  position: relative;
  padding-left: 9px;
}

.nav-item.active .nav-symbol.tag {
  background: var(--line);
}

.nav-symbol.tag::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
}

.nav-symbol.line-word {
  font-size: 12px;
  letter-spacing: 0;
}

.nav-icon {
  width: 22px;
  height: 22px;
  position: relative;
}

.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.nav-icon.chat::after {
  width: 8px;
  height: 8px;
  inset: auto auto 0 4px;
  border-top: 0;
  border-right: 0;
  transform: rotate(-20deg);
}

.nav-icon.service::after {
  inset: 8px 5px 5px;
  border-top: 0;
}

.nav-icon.pin::before {
  border-radius: 50%;
}

.nav-icon.pin::after {
  inset: 7px;
  border-radius: 50%;
}

.nav-icon.gear::before {
  border-radius: 50%;
}

.nav-icon.broadcast::before {
  border-radius: 50%;
  inset: 5px 12px 5px 2px;
}

.nav-icon.broadcast::after {
  inset: 4px 3px 4px 8px;
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

.nav-icon.users::before {
  border-radius: 50%;
  inset: 2px 7px 9px;
}

.nav-icon.users::after {
  inset: 12px 4px 4px;
  border-radius: 8px 8px 4px 4px;
}

.nav-icon.line::before {
  border-radius: 50%;
}

.nav-icon.line::after {
  inset: 7px 4px 5px;
  border-top: 0;
  border-left: 0;
  transform: rotate(35deg);
}

.side-section {
  padding: 18px 18px 0;
}

.side-section h2 {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}

.tag-filter-list {
  display: grid;
  gap: 6px;
}

.tag-filter-list button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 8px 10px;
  color: #304154;
}

.tag-filter-list button.selected,
.tag-filter-list button:hover {
  background: #fff;
  border-color: var(--border);
}

.branch-note {
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

.branch-note p {
  margin: 8px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.65fr) minmax(280px, 0.9fr);
  overflow: hidden;
}

.workspace.module-only-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.workspace.module-only-workspace .conversation-column,
.workspace.module-only-workspace .inspector {
  display: none;
}

.no-access-card {
  min-height: 320px;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.no-access-card h2,
.no-access-card p {
  margin: 0;
}

.no-access-card p {
  max-width: 460px;
  color: var(--muted);
  line-height: 1.6;
}

.no-access-icon {
  font-size: 38px;
}

.conversation-column,
.chat-column,
.inspector {
  min-width: 0;
  min-height: 0;
}

.conversation-column {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.list-toolbar {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  background: #fff;
  border-radius: 6px;
  display: grid;
  place-items: center;
}

.icon-button.active,
.icon-button:hover {
  background: #eef3f7;
}

.icon-button span,
.icon-button span::before,
.icon-button span::after {
  width: 16px;
  height: 2px;
  display: block;
  background: #6b7785;
  border-radius: 1px;
  content: "";
}

.icon-button span {
  position: relative;
}

.icon-button span::before,
.icon-button span::after {
  position: absolute;
  left: 0;
}

.icon-button span::before {
  top: -6px;
}

.icon-button span::after {
  top: 6px;
}

.conversation-menu {
  position: absolute;
  z-index: 20;
  top: 48px;
  left: 10px;
  width: 334px;
  max-width: calc(100% - 20px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.conversation-menu button,
.conversation-menu-footer {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #eef1f4;
  background: #fff;
  color: #273543;
  text-align: left;
  padding: 0 24px;
  font-size: 20px;
}

.conversation-menu button.active,
.conversation-menu button:hover {
  background: #eef2f4;
}

.conversation-menu b {
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--line);
  border-radius: 15px;
  font-size: 14px;
}

.conversation-menu-footer {
  min-height: 72px;
  border-bottom: 0;
  cursor: default;
}

.conversation-menu-footer small {
  color: #fff;
  background: var(--blue);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 800;
}

.menu-icon {
  width: 22px;
  height: 22px;
  position: relative;
  color: #70777d;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  border: 2px solid currentColor;
}

.menu-icon.bubble::before {
  inset: 4px 2px 5px;
  border-radius: 9px;
}

.menu-icon.bubble::after {
  left: 4px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-top: 0;
  border-right: 0;
  transform: rotate(-20deg);
}

.menu-icon.inbox::before {
  inset: 6px 1px 4px;
  border-radius: 3px;
}

.menu-icon.inbox::after {
  left: 4px;
  right: 4px;
  top: 8px;
  height: 8px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.menu-icon.mail::before {
  inset: 4px 1px;
  border-radius: 2px;
}

.menu-icon.mail::after {
  inset: 6px 3px 8px;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
}

.menu-icon.pending::before,
.menu-icon.done::before {
  inset: 2px;
  border-radius: 50%;
}

.menu-icon.pending::after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 9px;
  border-left: 0;
  border-top: 0;
}

.menu-icon.done::after {
  left: 7px;
  top: 6px;
  width: 7px;
  height: 11px;
  border-left: 0;
  border-top: 0;
  transform: rotate(42deg);
}

.menu-icon.filter::before {
  left: 2px;
  right: 2px;
  top: 4px;
  height: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.menu-icon.filter::after {
  left: 7px;
  top: 7px;
  width: 8px;
  height: 10px;
  border-top: 0;
  clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
}

.menu-icon::before,
.menu-icon::after {
  border: 0;
  background: currentColor;
}

.menu-icon.bubble::before {
  inset: 4px 3px 6px 2px;
  border-radius: 8px;
}

.menu-icon.bubble::after {
  left: 5px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: none;
}

.menu-icon.inbox::before {
  left: 2px;
  right: 2px;
  bottom: 4px;
  height: 13px;
  border-radius: 2px 2px 4px 4px;
  clip-path: polygon(8% 30%, 30% 30%, 38% 6%, 62% 6%, 70% 30%, 92% 30%, 100% 100%, 0 100%);
}

.menu-icon.inbox::after {
  display: none;
}

.menu-icon.mail::before {
  inset: 4px 2px;
  border-radius: 2px;
}

.menu-icon.mail::after {
  left: 4px;
  right: 4px;
  top: 7px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 0, 50% 66%, 100% 0, 100% 28%, 50% 96%, 0 28%);
  transform: none;
}

.menu-icon.pending::before {
  left: 2px;
  top: 5px;
  width: 13px;
  height: 11px;
  border-radius: 8px;
}

.menu-icon.pending::after {
  right: 2px;
  left: auto;
  top: 8px;
  width: 13px;
  height: 11px;
  border-radius: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 74% 75%, 82% 100%, 52% 75%, 0 75%);
}

.menu-icon.done::before {
  inset: 4px 3px 5px;
  border-radius: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 68% 76%, 78% 100%, 44% 76%, 0 76%);
}

.menu-icon.done::after {
  left: 8px;
  top: 7px;
  width: 6px;
  height: 10px;
  background: #fff;
  clip-path: polygon(36% 74%, 90% 12%, 100% 28%, 38% 100%, 0 66%, 12% 52%);
  transform: none;
}

.list-toolbar input {
  min-width: 0;
  width: 100%;
  height: 36px;
  border: 1px solid #ccd6e0;
  border-radius: 2px;
  padding: 0 12px;
  color: var(--ink);
}

.conversation-list {
  min-height: 0;
  overflow-y: auto;
}

/* 虛擬滾動模式：卡片絕對定位於 sizer 內、固定列高、超出裁切 */
.conversation-list.vlist .conversation-item {
  overflow: hidden;
}

.conversation-list.vlist .conversation-copy small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-item {
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #f0f2f4;
  background: #fff;
  text-align: left;
  padding: 12px 18px;
}

.conversation-item.active,
.conversation-item:hover {
  background: #f6f8fa;
}

.avatar {
  --avatar-color: #7a8ca0;
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--avatar-color);
  border-radius: 50%;
  font-weight: 800;
  flex: 0 0 auto;
}

.avatar.tiny {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.avatar.large {
  width: 58px;
  height: 58px;
  font-size: 20px;
}

.conversation-copy {
  min-width: 0;
}

.conversation-copy strong,
.conversation-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-copy small,
.conversation-meta time {
  color: #91a0af;
  font-size: 13px;
}

.conversation-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.conversation-meta i {
  width: 12px;
  height: 12px;
  display: block;
  overflow: hidden;
  color: transparent;
  background: var(--line);
  border-radius: 50%;
}

.no-results {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.chat-column {
  position: relative;
  background: #f8fafc;
  display: grid;
  min-height: 0;
}

.empty-state {
  align-self: center;
  justify-self: center;
  text-align: center;
  color: #a6b2bf;
}

.line-bubble {
  width: 152px;
  height: 112px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #d2d8df;
  border-radius: 54px;
  font-size: 34px;
  font-weight: 900;
  position: relative;
}

.line-bubble::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: -14px;
  width: 34px;
  height: 34px;
  background: #d2d8df;
  clip-path: polygon(0 0, 100% 20%, 20% 100%);
}

.chat-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.chat-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.chat-header h1 {
  margin: 0;
  font-size: 20px;
}

.chat-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* B3：已認領時「1對1聊天」（primary）反灰、「處理完畢」（secondary，他人處理中）淡化，皆不可點 */
.header-actions .primary-button:disabled {
  background: #c7cfd8;
  border-color: #c7cfd8;
  color: #fff;
  cursor: not-allowed;
}
.header-actions .secondary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quick-routing {
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.quick-routing button {
  border: 1px solid #c9d7e4;
  color: #24537a;
  background: #f4f9fd;
  min-height: 32px;
  border-radius: 6px;
  padding: 0 12px;
  font-weight: 700;
}

.timeline-wrap {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr;
}

.message-timeline {
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
}

/* Phase 4：看歷史訊息時有新訊息進來的浮動提示，點擊捲到底 */
.new-message-notice {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: none;
  border-radius: 999px;
  background: var(--blue, #2b6cb0);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.new-message-notice:hover {
  filter: brightness(1.05);
}

.new-message-notice.hidden {
  display: none;
}

.message-row {
  display: flex;
  margin: 10px 0;
}

.message-row.user {
  justify-content: flex-start;
}

.message-row.agent {
  justify-content: flex-end;
}

.message-row.system {
  justify-content: center;
}

.message-bubble {
  max-width: min(520px, 82%);
  border-radius: 8px;
  padding: 10px 12px 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 37, 54, 0.08);
}

.message-row.agent .message-bubble {
  color: #fff;
  background: var(--line);
}

.message-row.system .message-bubble {
  color: #5d6b7a;
  background: #e9eef3;
}

.message-bubble p {
  margin: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-line; /* 保留訊息中的換行（\n），與 LINE App 呈現一致 */
}

/* 訊息內連結（檔案下載連結等）；客服綠底氣泡上需維持可讀 */
.message-bubble p a {
  color: inherit;
  text-decoration: underline;
}

.message-image {
  display: block;
  max-width: min(260px, 60vw);
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.message-bubble time {
  display: block;
  margin-top: 4px;
  text-align: right;
  color: rgba(91, 106, 122, 0.72);
  font-size: 11px;
}

.message-row.agent time {
  color: rgba(255, 255, 255, 0.82);
}

.composer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-top: 1px solid var(--border);
}

/* 傳圖片/檔案按鈕（隱藏的 file input 由按鈕代為觸發） */
.composer .attach-button {
  height: 40px;
  padding: 0 12px;
  font-size: 16px;
  line-height: 1;
}

.composer input {
  min-width: 0;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 12px;
}

/* 1對1 輸入框改 textarea（支援 Shift+Enter 換行）：外觀比照原輸入框，單行高 40px、可長到 120px 後內部捲動、不可手動拉伸 */
.composer textarea {
  min-width: 0;
  min-height: 40px;
  max-height: 120px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
  line-height: 1.4;
  font: inherit;
  resize: none;
  align-self: center;
  overflow-y: auto;
}

.composer input:disabled,
.composer textarea:disabled,
.composer button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.inspector {
  background: #fff;
  border-left: 1px solid var(--border);
  min-height: 0;
  overflow-y: auto;
}

.inspector-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 48px;
  border-bottom: 1px solid var(--border);
}

.inspector-tabs button {
  border: 0;
  background: #fff;
  color: var(--muted);
  font-weight: 800;
}

.inspector-tabs button.active {
  color: var(--line);
  box-shadow: inset 0 -3px 0 var(--line);
}

.inspector-panel {
  padding: 18px;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.profile-head h2 {
  margin: 0;
  font-size: 20px;
}

.profile-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.contact-name-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.contact-name-form label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.contact-name-form input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 9px;
  color: var(--ink);
  font-weight: 800;
}

.contact-name-form button {
  min-height: 34px;
  padding: 0 10px;
}

.contact-name-form p {
  grid-column: 1 / -1;
}

.profile-facts {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.profile-facts div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.profile-facts dt {
  color: var(--muted);
}

.profile-facts dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}

.customer-summary {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}

.customer-summary h3 {
  margin: 0;
  font-size: 14px;
}

.customer-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}

.customer-table th,
.customer-table td {
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.customer-table th {
  width: 116px;
  color: var(--muted);
  background: #f7f9fb;
  text-align: left;
  font-weight: 800;
}

.customer-table tr:last-child th,
.customer-table tr:last-child td {
  border-bottom: 0;
}

.panel-block {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.panel-block h2 {
  margin: 0 0 12px;
  font-size: 15px;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-cloud button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #bae8ca;
  background: #effbf3;
  color: #056d30;
  border-radius: 6px;
  padding: 0 10px;
  font-weight: 700;
}

.tag-cloud button i {
  min-width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  line-height: 1;
}

.tag-cloud button i:hover {
  color: #fff;
  background: rgba(5, 109, 48, 0.7);
}

.panel-block select,
.panel-block textarea,
.rule-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  resize: vertical;
}

.rule-list,
.notification-list {
  display: grid;
  gap: 10px;
}

.rule-item {
  display: grid;
  grid-template-columns: 1fr auto 26px;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.rule-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rule-item strong {
  color: #056d30;
  white-space: nowrap;
}

.rule-item button {
  width: 26px;
  height: 26px;
  border: 0;
  background: #f3f6f9;
  border-radius: 5px;
  color: var(--muted);
}

.rule-form {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.rule-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.notification-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fbfcfd;
}

.notification-item strong,
.notification-item span {
  display: block;
}

.notification-item p {
  margin: 8px 0;
  color: #405063;
  line-height: 1.5;
}

.notification-item span {
  color: var(--muted);
  font-size: 12px;
}

.notification-management-stack {
  display: grid;
  gap: 20px;
}

/* 標題與副標灰字之間不留空列：.settings-card 的 grid gap 會在 h2 與 p 之間產生
   明顯間距，故把兩者包進 .settings-card-intro 自成一格，副標僅留 6px。 */
.settings-card-intro h2 {
  margin: 0;
}

.settings-card-intro p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.business-hours-weekly {
  display: grid;
  gap: 8px;
}

.business-hours-day,
.business-hours-exception {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.business-hours-day .toggle-line {
  min-width: 72px;
}

.business-hours-exceptions {
  display: grid;
  gap: 10px;
}

.business-hours-exceptions h3 {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.business-hours-exception-list {
  display: grid;
  gap: 8px;
}

.notification-history-list {
  align-content: start;
  max-height: calc(100dvh - 250px);
  overflow-y: auto;
}

.notification-history-list .notification-item {
  background: #fff;
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f3f6f9;
}

.auth-panel {
  width: min(420px, 100%);
  padding: 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.auth-panel h1 {
  margin: 0 0 8px;
  font-size: 24px;
}

.auth-panel p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.5;
}

.auth-panel form,
.auth-panel label {
  display: grid;
  gap: 8px;
}

.auth-panel form {
  gap: 14px;
}

.auth-panel input,
.rule-form select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
}

.auth-error {
  min-height: 20px;
  color: var(--danger);
  font-size: 13px;
}

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

.user-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fbfcfd;
}

.user-item strong,
.user-item span {
  display: block;
}

.user-item span {
  color: var(--muted);
  font-size: 12px;
}

.user-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.user-actions button,
.user-actions select {
  min-height: 30px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  padding: 0 8px;
}

.module-panel {
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}

.module-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.module-header h1 {
  margin: 0;
  font-size: 22px;
}

.module-header p {
  margin: 5px 0 0;
  color: var(--muted);
}

.module-view {
  padding: 22px;
}

.module-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(280px, 360px);
  gap: 20px;
  align-items: start;
}

.module-grid.wide-left {
  grid-template-columns: minmax(360px, 1fr) minmax(300px, 380px);
}

.settings-form,
.settings-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fbfcfd;
}

.settings-form h2,
.settings-card h2,
.module-grid h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.settings-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
}

.settings-form textarea {
  resize: vertical;
  line-height: 1.5;
}

/* 預計推播時間：日期 + 時間(24HR) 兩欄同列 + 確認鈕，下一列灰字備註 */
/* 推播模式（立即／預約）兩列 radio 設定 */
.push-mode-field {
  display: grid;
  gap: 10px;
}
/* 提高特異性蓋過 .settings-form label{display:grid}（否則圓點會疊在文字上方） */
.push-mode-field .push-mode-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.push-mode-field .push-mode-radio {
  display: flex;
  align-items: center;
  gap: 8px; /* 與第一列 .push-mode-row 的 gap 一致，使兩列文字左緣對齊 */
  color: var(--ink);
  font-weight: 600;
}
.push-mode-row input[type="date"] {
  width: auto;
  flex: 0 0 132px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  background: #fff;
}
.push-mode-row input[type="date"]:disabled,
.push-time-display:disabled {
  background: #f1f4f7;
  color: #aab4c0;
  cursor: not-allowed;
}

/* 自訂 24HR 時間 spinner（時/分同一欄；點顯示欄開 popup） */
.push-time-field {
  position: relative;
  flex: 0 0 96px;
}
.push-time-display {
  width: 100%;
  min-height: 40px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 0 8px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 1px;
}
.push-time-display.has-value {
  color: var(--ink);
}
.push-time-popup {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 30, 45, 0.16);
}
.push-time-popup.hidden {
  display: none;
}
.push-time-cols {
  display: flex;
  gap: 14px;
}
.push-time-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 52px;
}
.push-time-step {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  padding: 6px 4px;
  cursor: pointer;
}
.push-time-step:hover {
  color: var(--ink);
}
.push-time-values {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.push-time-values [data-slot="prev"],
.push-time-values [data-slot="next"] {
  color: #b8c2cd;
  font-size: 15px;
}
.push-time-values [data-slot="cur"] {
  color: var(--ink);
  font-weight: 700;
  font-size: 19px;
}
/* radio 選中呈綠色、稍大 */
.push-mode-row input[type="radio"] {
  accent-color: #1f8a4c;
  width: 16px;
  height: 16px;
  margin: 0;
}
/* 重設／確認鈕：最適大小、靠左（縮小、不撐滿整列） */
.push-mode-row > button {
  flex: 0 0 auto;
  width: auto;
  min-width: 60px;
  padding: 0 12px;
}
/* 確認後於下方顯示的預計推播時間摘要 */
.push-schedule-summary {
  margin: 0;
  color: #1f8a4c;
  font-size: 14px;
  line-height: 1.5;
}
/* 加入推播：最適大小、置中於區塊（不撐滿整列） */
.push-submit-button {
  width: auto;
  justify-self: center;
  min-width: 120px;
}

.settings-card p {
  margin: 0;
  color: #405063;
  line-height: 1.6;
}

.line-groups-card {
  margin-top: 20px;
}

/* LINE 串接頁：左欄（可編輯設定）＋右欄（唯讀狀態/紀錄），各區塊間距一致 */
/* 右欄取 420px：已互動群組紀錄需 388px（時間 112／群組名 112／Group ID 108／筆數 56）。
   左欄吃剩餘寬度。 */
.line-settings-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 420px);
  gap: 20px;
  align-items: start;
}

.line-settings-col {
  display: grid;
  gap: 20px;
  align-content: start;
}

/* 區塊標題列：標題靠左、動作（新增功能群組 / 據點篩選）靠右 */
.settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-card-head h2 {
  margin: 0;
}

/* 「據點」標籤字級比照區塊標題（h2） */
.sa-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--muted);
}

/* 下拉選單 UI 一律比照推播管理頁（.settings-form select） */
.line-settings-grid select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}

/* 儲存按鈕靠左、寬度依內容；儲存結果訊息顯示於按鈕右方同一列 */
.settings-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.line-table-wrap {
  overflow-x: auto;
}

/* 左欄設定表格：內容字級與區塊標題（h2）一致 */
.line-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

/* 右欄三個唯讀區塊（LINE Channel 設定／最近 Webhook 事件／已互動群組紀錄）統一 14 號字 */
.line-settings-col .settings-facts,
#webhookEventList .line-group-item strong,
#webhookEventList .line-group-item span,
#webhookEventList .line-group-item small,
#lineGroupList .line-table {
  font-size: 14px;
}

/* 右欄允許折行，但只在空格處折（overflow-wrap: normal），讓「2026/07/16 17:54」
   折成日期一行、時分一行，而不是把日期本身折斷成「2026/07」+「/16」。 */
#lineGroupList .line-table th,
#lineGroupList .line-table td {
  white-space: normal;
  overflow-wrap: normal;
}

/* Group ID 無空格可折，需強制斷字才能折成多行 */
#lineGroupList .line-table th:nth-child(3),
#lineGroupList .line-table td:nth-child(3) {
  overflow-wrap: anywhere;
}

/* 欄寬以實測值固定（合計 388px＝右欄 420px 扣掉卡片內距）：
   時間 112（標題「最新訊息時間」一行；資料「2026/07/16」不折斷、時分折次行）／
   群組名 112（標題「LINE 群組名稱」一行）／Group ID 108（標題折兩行，把寬度讓給
   前兩欄；資料 33 字元折行）／互動筆數 56（標題折兩行，過窄會變一字一行的直排）。 */
#lineGroupList .line-table th:nth-child(1),
#lineGroupList .line-table td:nth-child(1) {
  width: 112px;
}

#lineGroupList .line-table th:nth-child(2),
#lineGroupList .line-table td:nth-child(2) {
  width: 112px;
}

#lineGroupList .line-table th:nth-child(3),
#lineGroupList .line-table td:nth-child(3) {
  width: 108px;
}

#lineGroupList .line-table th:nth-child(4),
#lineGroupList .line-table td:nth-child(4) {
  width: 56px;
}

.line-table th,
.line-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.line-table th {
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* Group ID 下拉需完整呈現 LINE Group ID：33 字元於 16px 字級實測 275px，
   加內距（20px）與下拉箭頭／留白（約 40px）＝ 335px。 */
.line-table select {
  width: 100%;
  min-width: 335px;
}

/* 據點通知設定的「LINE 群組名稱」與 SA 綁定的「LINE 名稱」欄寬一致。
   用 min-width：table auto layout 下 width 僅為建議值，Group ID 下拉佔寬時會被壓縮。
   （功能群組表格多一個「操作」欄，第 2 欄不設限以免整列被擠出容器。） */
#notificationSettingsList .line-table th:nth-child(2),
#notificationSettingsList .line-table td:nth-child(2),
#saLineBindingList .line-table th:nth-child(2),
#saLineBindingList .line-table td:nth-child(2) {
  min-width: 210px;
  max-width: 210px;
}

/* 功能群組多一個「操作」欄，其「功能群組名稱」與「LINE 群組名稱」欄收窄以容納整列；
   收窄後標題放不下，需允許折行（.line-table th 預設 nowrap 會溢出蓋到隔壁欄）。 */
#functionGroupList .line-table th {
  white-space: normal;
}

#functionGroupList .line-table th:nth-child(1),
#functionGroupList .line-table td:nth-child(1) {
  max-width: 104px;
}

#functionGroupList .line-table th:nth-child(2),
#functionGroupList .line-table td:nth-child(2) {
  max-width: 92px;
}

/* 「備註」欄（兩表皆為第 4 欄）吸收剩餘寬度，其餘欄才會收斂到各自指定寬度，
   兩表的第 2 欄才會真正一致（否則 auto layout 會把餘寬平均分掉）。
   欄內輸入框撐滿該欄寬度（.line-table input 已設 width:100%，此處不另設上限）。 */
#notificationSettingsList .line-table th:nth-child(4),
#notificationSettingsList .line-table td:nth-child(4),
#saLineBindingList .line-table th:nth-child(4),
#saLineBindingList .line-table td:nth-child(4) {
  width: 100%;
}

.line-table input[data-target-input] {
  margin-top: 6px;
}

/* min-width 取較小值：空間有餘裕時「備註」欄（width:100%）會吸收餘寬自動變寬；
   空間吃緊時才收斂到此下限，避免整列被擠出容器。 */
.line-table input[type="text"] {
  width: 100%;
  min-width: 70px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}

/* 功能群組表格多一欄「操作」，移除鈕改用圖示以免整列被擠出容器 */
.line-table td .secondary-button {
  padding: 6px 10px;
  white-space: nowrap;
}

.line-icon-button {
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
  font-size: 16px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.line-icon-button:hover {
  color: #b91c1c;
  border-color: #b91c1c;
}

.line-cell-fixed {
  white-space: nowrap;
}

.line-cell-center {
  text-align: center;
}

.line-cell-empty {
  color: var(--muted);
}

/* 「功能群組」「已互動群組紀錄」等次標題字級比照區塊標題（h2） */
.line-settings-subhead {
  margin: 18px 0 8px;
  font-size: 16px;
}

/* 串接說明：備註文字形式、維持灰色字 */
.line-settings-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.line-group-list {
  display: grid;
  gap: 10px;
}

.line-group-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

.line-group-item strong,
.line-group-item span,
.line-group-item small {
  display: block;
}

.line-group-item span,
.line-group-item small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.readonly-composer {
  grid-template-columns: 1fr;
  color: var(--muted);
  font-size: 13px;
}

.tag-management-list,

.tag-category {
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.tag-category:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.tag-category h3 {
  margin: 0;
  font-size: 14px;
}

.tag-cloud button small {
  margin-left: 6px;
  color: inherit;
  opacity: 0.72;
}

.tag-cloud button.selected {
  color: #fff;
  background: var(--line);
  border-color: var(--line);
}

.role-permission-card {
  margin-top: 20px;
}

.permission-card-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.permission-card-header p {
  margin: 5px 0 0;
  color: var(--muted);
}

.permission-matrix {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}

.permission-grid {
  min-width: 920px;
  display: grid;
  grid-template-columns: 150px repeat(var(--permission-columns), minmax(96px, 1fr));
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

.permission-grid:last-child {
  border-bottom: 0;
}

.permission-grid > strong,
.permission-grid > label {
  min-height: 48px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 8px;
  border-right: 1px solid var(--border);
  text-align: center;
}

.permission-grid > strong:first-child {
  justify-items: start;
  text-align: left;
}

.permission-grid > :last-child {
  border-right: 0;
}

.permission-grid-head {
  color: #405063;
  background: #f1f5f8;
  font-size: 12px;
}

.permission-grid input {
  width: 18px;
  height: 18px;
  accent-color: var(--line);
}

.permission-mobile-label {
  display: none;
}

.customer-management-grid {
  display: grid;
  grid-template-columns: minmax(270px, 0.75fr) minmax(360px, 1.35fr);
  gap: 20px;
  align-items: start;
}

.customer-search-card,
.customer-result-card,
.quotation-card {
  min-height: 100%;
}

.customer-search-card p,
.quotation-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.section-kicker {
  color: var(--line);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.inline-field-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.demo-hint {
  color: var(--muted);
  line-height: 1.5;
}

.customer-lookup-result {
  min-height: 286px;
}

/* 統計報表 */
.statistics-report { display: grid; gap: 16px; }
.report-subtabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid #e2e8f0; padding-bottom: 0; }
.report-subtab { font-weight: 600; border: 1px solid #e2e8f0; border-bottom: none; background: #eef2f7; color: #475569; padding: 8px 16px; border-radius: 10px 10px 0 0; cursor: pointer; }
.report-subtab.active { background: var(--line, #06c755); color: #fff; border-color: var(--line, #06c755); }
.report-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.report-filters label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.report-filters select, .report-filters input { padding: 6px 8px; border: 1px solid #d3dce6; border-radius: 8px; }
.report-block { margin-top: 8px; }
.report-block h3 { margin: 0 0 8px; font-size: 15px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.report-table th, .report-table td { border: 1px solid #e2e8f0; padding: 6px 10px; text-align: center; }
.report-table th { background: #f1f5f9; }
.report-table td:first-child, .report-table th:first-child { text-align: left; white-space: nowrap; }
.report-table tr.report-total td { font-weight: 700; background: #f8fafc; }
.report-push-section { margin-top: 8px; }
.report-push-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.report-push-head h3 { margin: 0; }
.report-push-note { color: var(--muted); font-size: 13px; }
.report-push-head button { margin-left: auto; }

.customer-result-empty {
  min-height: 286px;
  display: grid;
  place-content: center;
  gap: 5px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed #c8d3de;
  border-radius: 8px;
  background: #fff;
}

.customer-result-empty.not-found strong {
  color: var(--ink);
}

.customer-result-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.customer-result-heading strong,
.customer-result-heading span {
  display: block;
}

.customer-result-heading strong {
  font-size: 18px;
}

.customer-result-heading div > span {
  margin-top: 4px;
  color: var(--muted);
}

.customer-result-facts {
  display: grid;
  gap: 0;
  margin: 10px 0 0;
}

.customer-result-facts > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.customer-result-facts > div:last-child {
  border-bottom: 0;
}

.customer-result-facts dt {
  color: var(--muted);
}

.customer-result-facts dd {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.customer-result-facts dd span {
  display: block;
  margin-bottom: 5px;
}

.quotation-card {
  grid-column: 1 / -1;
  position: relative;
}

.excel-dropzone {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 20px;
  border: 2px dashed #b8c8d8;
  border-radius: 8px;
  color: var(--ink) !important;
  background: #fff;
  cursor: pointer;
  text-align: center;
}

.excel-dropzone:hover {
  border-color: var(--line);
  background: #f7fcf9;
}

.excel-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.excel-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 44px;
  border-radius: 7px;
  color: #fff;
  background: #168255;
  font-size: 12px;
  font-weight: 900;
}

.file-status {
  padding: 10px 12px;
  color: var(--muted);
  background: #f2f5f8;
  border-radius: 6px;
}

.file-status.selected {
  color: #086b42;
  background: #eaf8f1;
}

.construction-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #8b5d00;
  background: #fff1bd;
  font-size: 12px;
  font-weight: 800;
}

.tag-cloud button.selected i:hover {
  color: var(--line);
  background: #fff;
}

.rule-item {
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) 26px;
}

.rule-item b {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px;
}

.toggle-line {
  display: inline-flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--ink) !important;
}

.toggle-line input {
  width: auto;
}

.settings-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

.settings-facts div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  align-items: start;
}

.settings-facts dt {
  color: var(--muted);
}

.settings-facts dd {
  margin: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.hidden {
  display: none !important;
}

@media (max-width: 1480px) {
  .app-shell {
    --sidebar-width: 240px;
  }

  .workspace {
    grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1.55fr) minmax(260px, 0.85fr);
  }

  .brand-lockup {
    min-width: 240px;
  }

  .topbar {
    gap: 14px;
  }
}

@media (max-width: 1280px) {
  .app-shell {
    --sidebar-width: 220px;
  }

  .workspace {
    grid-template-columns: minmax(220px, 0.85fr) minmax(300px, 1.45fr) minmax(220px, 0.8fr);
  }

  .brand-lockup {
    min-width: 210px;
  }
}

@media (max-width: 980px) {
  .app-shell {
    --sidebar-width: 190px;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .topbar {
    min-height: 58px;
    flex-wrap: wrap;
    padding: 12px;
  }

  .brand-lockup {
    min-width: 0;
  }

  .environment-switch,
  .account-area {
    width: 100%;
    margin-left: 0;
  }

  .sidebar nav {
    grid-template-columns: 1fr;
  }

  .workspace {
    grid-template-columns: minmax(190px, 0.8fr) minmax(260px, 1.35fr) minmax(190px, 0.75fr);
  }

  .conversation-column {
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }

  .conversation-list {
    max-height: none;
  }

  .chat-panel {
    min-height: min(620px, 100dvh);
  }

  .chat-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-actions {
    justify-content: flex-start;
  }

  .header-actions,
  .quick-routing,
  .composer {
    width: 100%;
  }

  .composer {
    grid-template-columns: 1fr;
  }

  .module-grid,
  .module-grid.wide-left,
  .customer-management-grid,
  .line-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .app-shell {
    --sidebar-width: 170px;
  }

  .workspace {
    grid-template-columns: minmax(170px, 0.8fr) minmax(240px, 1.3fr) minmax(170px, 0.75fr);
  }

  .sidebar nav {
    padding: 0 10px 16px;
  }

  .side-section {
    display: none;
  }

  .conversation-column {
    max-height: none;
  }

  .customer-table th {
    width: 88px;
  }
}

@media (max-width: 720px) {
  .app-shell {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    overflow: visible;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sidebar nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 0;
  }

  .workspace {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .conversation-column {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .conversation-list {
    max-height: 360px;
  }
}

@media (max-width: 520px) {
  .sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversation-menu {
    left: 8px;
    width: calc(100vw - 16px);
  }

  .conversation-item {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .conversation-meta {
    grid-column: 2;
    justify-items: start;
    grid-auto-flow: column;
    align-items: center;
  }

  .chat-header,
  .quick-routing,
  .message-timeline,
  .composer,
  .inspector-panel,
  .module-view {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ───── 使用者管理：表格 + 編輯／新增彈窗 ───── */
.user-management-card {
  gap: 16px;
}

.user-management-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.user-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.user-table thead th {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--soft);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.user-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f6;
  font-size: 14px;
  vertical-align: middle;
}

.user-table tbody tr:last-child td {
  border-bottom: 0;
}

.user-table tbody tr:hover {
  background: #f9fbfd;
}

.user-cell-account {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.user-account-name {
  overflow-wrap: anywhere;
}

.user-cell-login {
  color: var(--muted);
  white-space: nowrap;
}

.user-table-actions-col,
.user-cell-actions {
  text-align: center;
  white-space: nowrap;
}

.user-table-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 14px;
}

.self-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #0b8a43;
  background: rgba(6, 199, 85, 0.14);
}

.role-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.role-badge--system_admin {
  color: #9a6a00;
  background: rgba(255, 176, 32, 0.18);
}
/* 系統管理員以外，皆沿用 SA 接待主管的徽章配色 */
.role-badge--factory_manager,
.role-badge--sa_manager,
.role-badge--sa_staff,
.role-badge--marketing {
  color: #1f5fb8;
  background: rgba(47, 128, 237, 0.14);
}

.status-badge.on {
  color: #0b8a43;
  background: rgba(6, 199, 85, 0.16);
}
.status-badge.off {
  color: #8a96a3;
  background: rgba(154, 166, 178, 0.2);
}

.table-action {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  margin-left: 8px;
}

.user-cell-actions .table-action:first-child {
  margin-left: 0;
}

.table-action.edit {
  color: var(--blue);
  border-color: rgba(47, 128, 237, 0.4);
}
.table-action.edit:hover {
  background: rgba(47, 128, 237, 0.08);
}
.table-action.delete {
  color: var(--danger);
  border-color: rgba(229, 72, 63, 0.4);
}
.table-action.delete:hover {
  background: rgba(229, 72, 63, 0.08);
}

.user-actions-empty {
  color: var(--muted);
}

.user-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.user-dialog.hidden {
  display: none;
}

.user-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 37, 54, 0.45);
}

.user-dialog-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.user-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.user-dialog-head h2 {
  margin: 0;
  font-size: 18px;
}

.user-dialog-close {
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
}

.user-dialog-body {
  padding: 18px 20px;
  overflow-y: auto;
  display: grid;
  gap: 14px;
}

/* 確認視窗訊息保留換行（showConfirm 的 message 以 \n 分行） */
.user-dialog-body p {
  white-space: pre-line;
}

.user-dialog-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.user-dialog-field input,
.user-dialog-field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  color: var(--ink);
  font-weight: 500;
}

.user-dialog-field input[readonly] {
  background: var(--soft);
  color: var(--muted);
}

.user-dialog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.user-dialog-permissions h3 {
  margin: 4px 0 10px;
  font-size: 14px;
}

.dialog-permission-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 14px;
}

.dialog-permission-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.dialog-permission-note {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}

.user-dialog-error {
  color: var(--danger);
  font-size: 13px;
}

.user-dialog-error:empty {
  display: none;
}

.user-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* 訊息篩選選單圖示改用內嵌 SVG：待處理＝三角驚嘆號、處理完畢＝打勾、訊息盒＝兩層抽屜櫃。
   停用原 CSS pseudo-element 繪製，改由 SVG 呈現。 */
.menu-icon.inbox > svg,
.menu-icon.pending > svg,
.menu-icon.done > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.menu-icon.inbox::before,
.menu-icon.inbox::after,
.menu-icon.pending::before,
.menu-icon.pending::after,
.menu-icon.done::before,
.menu-icon.done::after {
  content: none;
  display: none;
}

/* B3：對話由某客服處理中 → 聊天列表時間左側顯示「{客服} 處理中」徽章 */
.claim-badge {
  display: inline-block;
  padding: 1px 7px 0;
  margin-right: 6px;
  border-radius: 6px;
  background: #fff4e5;
  color: #b56a00;
  border: 1px solid #ffd8a8;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: middle;
}

/* B1b：使用者已綁定 LINE → 顯示名稱後綠色「LINE」徽章 */
.line-badge {
  display: inline-block;
  padding: 1px 8px 0;
  margin-left: 6px;
  border-radius: 6px;
  background: #06c755;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* B1a 進廠服務頁籤：維修顧問 / 中途回報 兩區塊，各含下拉+確認鈕(右)+確認後綠字(下) */
.in-shop-service {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.in-shop-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.in-shop-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.in-shop-row label {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
}
.in-shop-row select {
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  font-size: 14px;
}
.in-shop-row .secondary-button {
  flex: 0 0 auto;
  height: 38px;
}
.in-shop-service .in-shop-status {
  margin: 0;
  color: #1f8a4c;
  font-size: 14px;
  line-height: 1.5;
}

/* 通知 log（子專案 A）：類別徽章紅色變體（逾時處理）、log 內容多行、分頁列。
   badge 基礎樣式在 maintenance-core.css；.overdue 特異度 0,2,0 高於基礎 .notification-status-badge 0,1,0，故此處可勝出。 */
.notification-status-badge.overdue {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
.notification-card-head {
  margin-bottom: 4px;
}
.notification-log-body {
  white-space: pre-line;
  margin: 4px 0 6px;
  color: var(--ink);
}
.notification-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.notification-pager-button {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 16px;
  background: #fff;
  color: #405063;
  font-weight: 800;
  cursor: pointer;
}
.notification-pager-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.notification-pager-info {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
/* 儲存結果訊息：比照推播預約推播的綠字格式（純文字、無底色框）。
   用雙 id 勝過各表單 > p 的灰字，確保綠字生效。 */
#notificationSettingsForm #notificationSaveStatus,
#saLineBindingForm #saLineBindingSaveStatus,
#businessHoursForm #businessHoursSaveStatus {
  color: #1f8a4c;
  font-size: 14px;
  line-height: 1.5;
}
/* LINE 串接頁：訊息與按鈕同列（.settings-card-actions），不需上方間距 */
#notificationSettingsForm #notificationSaveStatus,
#saLineBindingForm #saLineBindingSaveStatus {
  margin: 0;
}
/* 通知管理頁：訊息與按鈕同列（.settings-card-actions），不需上方間距 */
#businessHoursForm #businessHoursSaveStatus {
  margin: 0;
}
#notificationSettingsForm #notificationSaveStatus.is-error,
#saLineBindingForm #saLineBindingSaveStatus.is-error,
#businessHoursForm #businessHoursSaveStatus.is-error {
  color: #b91c1c;
}

/* 推播多媒體：多區塊編輯器 */
.push-blocks-field { display: grid; gap: 8px; }
.push-blocks-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.push-blocks { display: grid; gap: 12px; }
.push-block { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.push-block-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.push-block textarea, .push-block input[type="text"] { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.push-block-thumb { max-width: 160px; max-height: 120px; border-radius: 6px; border: 1px solid var(--border); }
.push-blocks-actions { display: flex; gap: 8px; align-items: center; }
.push-blocks-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* 人工建立標籤 */
.manual-tag-list { display: grid; gap: 12px; }
.manual-tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; }
.manual-tag-chip i { cursor: pointer; color: var(--muted); font-style: normal; }
.manual-tag-chip i:hover { color: #b91c1c; }
.manual-tag-apply { margin-top: 10px; }
.manual-tag-apply-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.manual-tag-apply-row select { border: 1px solid var(--border); border-radius: 6px; padding: 8px; background: #fff; }