:root {
  color-scheme: light;
  /* 上品で読みやすい日本語UI向けのサンセリフ統一スタック。
     Noto Sans JP を第一候補に、未読み込み時は system-ui / Yu Gothic UI / Meiryo へフォールバック。
     明朝・丸ゴシック・手書き風は使わない（混在させない）。 */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --color-bg-app: #FAF6F0;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FFF8F1;

  --color-text-primary: #2F2A25;
  --color-text-secondary: #6F665D;
  --color-text-muted: #9A9086;

  --color-border: #E6DDD2;
  --color-border-soft: #EFE7DD;
  --color-border-strong: #D6B89A;
  --color-parent-border: rgba(184, 121, 74, 0.18);
  --color-parent-surface: rgba(255, 255, 255, 0.58);

  --color-accent: #B8794A;
  --color-accent-hover: #A7663B;
  --color-accent-soft: #FFF3E8;
  --color-accent-text: #7A4828;
  --color-pin-bg: #FFF8D9;
  --color-pin-border: #E0B83F;
  --color-pin-text: #7B5600;

  --color-danger-bg: #FFF1F0;
  --color-danger-border: #F0C7C2;
  --color-danger-text: #A85B55;

  --color-success-bg: #EDF7F1;
  --color-success-border: #CFE5D6;
  --color-success-text: #5E8F70;
  --reply-assist-card-bg: #F1F7FA;
  --reply-assist-card-border: #BDD2DE;

  --reservation-status-done-bg: #DCEBFF;
  --reservation-status-done-border: #8FB6E8;
  --reservation-status-done-text: #24558A;
  --reservation-status-cancelled-bg: #F3F3F3;
  --reservation-status-cancelled-border: #C8C8C8;
  --reservation-status-cancelled-text: #646464;
  --queue-handoff-bg: var(--reservation-status-done-bg);
  --queue-handoff-border: var(--reservation-status-done-border);
  --queue-handoff-text: var(--reservation-status-done-text);
  --queue-reply-bg: var(--color-danger-bg);
  --queue-reply-border: var(--color-danger-border);
  --queue-reply-text: #9D3838;

  --shadow-card: 0 4px 12px rgba(80, 55, 35, 0.06);
  --shadow-selected: 0 4px 12px rgba(80, 55, 35, 0.08);

  --bg: var(--color-bg-app);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-soft);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-hover);
  --accent-soft: var(--color-accent-soft);
  --warning: var(--color-accent-text);
  --danger: var(--color-danger-text);
  --ok: var(--color-success-text);
  --shadow: var(--shadow-card);
  --radius-card: 14px;
  --radius-sm: 10px;
  /* 全体を上下左右に詰める（Codexの余白リズムを各-25%目安で圧縮） */
  --space-card: 18px;
  --space-card-gap: 12px;
  --space-column-gap: 6px;
  --space-small: 6px;
  --space-section: 18px;
}

html:root[data-theme="latte"] {
  color-scheme: light;
  --bg-app: #efe3d5;
  --bg-sidebar: #ead9c8;
  --surface-primary: #fffaf4;
  --surface-secondary: #f7ebdf;
  --surface-selected: #ecd5bf;
  --text-primary: #322820;
  --text-secondary: #67564a;
  --text-muted: #756255;
  --border-default: #cdb9a5;
  --border-soft: #e2d2c3;
  --accent-primary: #a96332;
  --accent-hover: #87491f;
  --accent-soft-theme: #ead0b8;
  --color-bg-app: var(--bg-app);
  --color-surface: var(--surface-primary);
  --color-surface-soft: var(--surface-secondary);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-border: var(--border-default);
  --color-border-soft: var(--border-soft);
  --color-border-strong: color-mix(in srgb, var(--accent-primary) 42%, var(--border-default));
  --color-parent-border: color-mix(in srgb, var(--border-default) 82%, transparent);
  --color-parent-surface: rgba(255, 250, 244, 0.76);
  --color-accent: var(--accent-primary);
  --color-accent-hover: var(--accent-hover);
  --color-accent-soft: var(--surface-selected);
  --color-accent-text: var(--accent-hover);
  --color-accent-deep: var(--accent-hover);
  --shadow-card: 0 1px 3px rgba(67, 46, 31, 0.08);
  --shadow-selected: 0 4px 12px rgba(67, 46, 31, 0.12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-app: #171512;
  --color-surface: #211f1b;
  --color-surface-soft: #2b2823;
  --color-text-primary: #f5efe7;
  --color-text-secondary: #b8aea1;
  --color-text-muted: #8f8578;
  --color-border: #3d3931;
  --color-border-soft: #343029;
  --color-border-strong: rgba(211, 145, 92, 0.36);
  --color-parent-border: rgba(239, 183, 127, 0.22);
  --color-parent-surface: rgba(33, 31, 27, 0.72);
  --color-accent: #d3915c;
  --color-accent-hover: #efb77f;
  --color-accent-soft: rgba(211, 145, 92, 0.18);
  --color-accent-text: #efb77f;
  --color-pin-bg: rgba(224, 184, 63, 0.16);
  --color-pin-border: #d6a936;
  --color-pin-text: #ffd36a;
  --color-danger-bg: rgba(157, 56, 56, 0.18);
  --color-danger-border: rgba(224, 122, 116, 0.36);
  --color-danger-text: #e07a74;
  --color-success-bg: rgba(76, 143, 101, 0.14);
  --color-success-border: rgba(127, 200, 153, 0.34);
  --color-success-text: #7fc899;
  --reply-assist-card-bg: rgba(70, 126, 190, 0.16);
  --reply-assist-card-border: rgba(126, 176, 232, 0.42);
  --reservation-status-done-bg: rgba(70, 126, 190, 0.28);
  --reservation-status-done-border: rgba(126, 176, 232, 0.62);
  --reservation-status-done-text: #B8D8FF;
  --reservation-status-cancelled-bg: rgba(255, 255, 255, 0.08);
  --reservation-status-cancelled-border: rgba(255, 255, 255, 0.22);
  --reservation-status-cancelled-text: #CFC3B5;
  --queue-reply-text: var(--color-danger-text);
  --bg: var(--color-bg-app);
  --surface: var(--color-surface);
  --surface-soft: var(--color-surface-soft);
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --accent-strong: var(--color-accent-hover);
  --accent-soft: var(--color-accent-soft);
  --warning: var(--color-accent-text);
  --danger: var(--color-danger-text);
  --ok: var(--color-success-text);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 28px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-selected: 0 4px 12px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  /* 本文の基準: 14px / 400 / line-height 1.6（補助12〜13px、見出し・ボタンは各コンポーネントで指定） */
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* pre/code はUA既定の monospace になり混在するため、UIと同じサンセリフに統一する */
pre,
code,
kbd,
samp {
  font-family: var(--font-sans);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 100vh;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.sidebar {
  border-right: 1px solid var(--line);
  background: #fbfcfa;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.sidebar-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  min-width: 0;
}

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

.brand-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-toggle-button {
  display: none;
  width: 44px;
  min-width: 44px;
  font-weight: 900;
}

.app-shell.sidebar-collapsed .sidebar-toggle-button {
  display: inline-flex;
  border-color: rgba(191, 123, 73, 0.42);
  color: var(--color-accent);
}

.app-shell.sidebar-collapsed .sidebar {
  position: relative;
  align-items: stretch;
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}

.app-shell.sidebar-collapsed .brand {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 80;
  justify-content: space-between;
  width: auto;
  gap: 8px;
  pointer-events: auto;
}

.app-shell.sidebar-collapsed .sidebar > .brand {
  padding: 0;
}

.app-shell.sidebar-collapsed #newCustomerButton,
.app-shell.sidebar-collapsed .sidebar-body {
  display: none;
}

.app-shell.sidebar-collapsed .brand-title {
  display: block;
  min-width: 0;
}

.app-shell.sidebar-collapsed .brand-title .eyebrow {
  display: none;
}

.app-shell.sidebar-collapsed .brand-home-button {
  max-width: none;
  gap: 7px;
}

.app-shell.sidebar-collapsed .logo-mascot {
  width: 51px;
  height: 51px;
}

.app-shell.sidebar-collapsed .logo-wordmark {
  overflow: visible;
  font-size: 36px;
  text-overflow: clip;
  white-space: nowrap;
}

.brand,
.topbar,
.panel-header,
.button-row,
.export-box,
.top-actions,
.calendar-controls,
.list-mode-switch,
.profile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-controls > strong {
  white-space: nowrap;
}

@media (max-width: 620px) {
  #globalCalendarView > .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  #globalCalendarView .calendar-controls {
    width: 100%;
  }
}

.brand h1,
.topbar h2,
.panel h3,
.empty-state h2 {
  margin: 0;
  letter-spacing: 0;
}

.brand h1 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 22px;
}

/* maTOmaru ロゴのワードマークだけに適用（本文・ボタン・入力・カードには影響させない）。
   Manrope はローカル自己ホスト（/assets/fonts/manrope-latin-800.woff2）。未読込時は Noto Sans JP→system へフォールバック。 */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-800.woff2") format("woff2");
}
.brand-home-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.brand-home-button:hover .logo-wordmark,
.brand-home-button:focus-visible .logo-wordmark {
  color: var(--accent);
}

.brand-home-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 10px;
}

.logo-wordmark {
  font-family: "Manrope", "Noto Sans JP", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: #2F2A25;
}
.logo-accent {
  color: #B8794A;
}

:root[data-theme="dark"] .logo-wordmark {
  color: #F5EFE7;
}

:root[data-theme="dark"] .logo-accent {
  color: #EFAD73;
}

.logo-mascot {
  width: 51px;
  height: 51px;
  flex: none;
  object-fit: contain;
  object-position: center;
}

.topbar h2 {
  font-size: 24px;
}

.panel h3,
.empty-state h2 {
  font-size: 18px;
}

/* カラム上の英語補助ラベルは表示しない方針。 */
.eyebrow {
  display: none !important;
}

.search {
  display: grid;
  gap: 6px;
}

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

label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  outline: none;
}

input,
select {
  min-height: 38px;
  padding: 8px 10px;
}

textarea {
  min-height: 92px;
  padding: 10px;
  line-height: 1.55;
  resize: vertical;
}

.field-note-input {
  margin-top: 8px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 135, 82, 0.14);
}

.customer-list {
  display: grid;
  gap: 6px;
  align-content: start;
  grid-auto-rows: max-content;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.list-mode-switch {
  justify-content: stretch;
  gap: 8px;
}

.list-mode-switch button {
  flex: 1;
}

.customer-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-filter-button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.customer-filter-button.active {
  border-color: var(--accent);
  background: #fbeede;
  color: var(--accent-strong);
}

/* spec(参考UI seg): 見出し直下の件数チップ「全顧客 / 今日対応 / 未返信」 */
.customer-seg-bar {
  display: flex;
  gap: 7px;
}

.customer-seg-chip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.customer-seg-chip b {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}

.customer-seg-chip span {
  font-size: 11px;
  color: var(--muted);
}

.customer-seg-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.customer-seg-chip.active b,
.customer-seg-chip.active span {
  color: var(--accent-strong);
}

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

.sort-filter select {
  min-height: 34px;
  font-size: 13px;
}

/* spec(参考UI sortrow): 並び替えを1行にまとめる（顧客リスト直上）。 */
.sort-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-sort-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.customer-sort-controls .sort-filter-row {
  align-self: stretch;
  width: 100%;
}

.sort-filter-label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.sort-filter-row select {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  font-size: 13px;
}

/* spec(参考UI sortrow): 並び替えを1行にまとめ、顧客リスト直上に置く。 */
.sort-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-filter-label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.sort-filter-row select {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  font-size: 13px;
}

.sort-view-toggle {
  flex: none;
  width: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.sort-view-toggle:hover {
  background: var(--surface-soft);
  color: var(--accent-strong);
}

/* spec(左カラム整理 第一段階): 並び替え「基準」「順」の2セレクトを横並びにする */
.sort-filter-split {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}

.sort-filter-split label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sort-filter-split label span {
  margin-bottom: 0;
}

.customer-label-panel {
  position: relative;
  display: grid;
  gap: 8px;
}

.customer-label-toolbar {
  display: flex;
  align-items: center;
  min-height: 30px;
}

/* spec(左カラム整理): ☆を廃止して直接表示する「新規ラベルを追加」ボタン */
.add-label-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  font-size: 13px;
}

.label-menu-button {
  width: 32px;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.label-menu-button:hover,
.label-menu-button.active {
  background: var(--surface-soft);
  color: var(--accent-strong);
}

.customer-label-menu {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 20;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(28, 43, 36, 0.16);
}

.customer-label-menu button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 10px 12px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-weight: 800;
}

.customer-label-menu button:hover {
  background: var(--surface-soft);
}

.customer-label-list {
  display: grid;
  gap: 12px;
}

.customer-label-axis {
  display: grid;
  gap: 6px;
}

.customer-label-axis + .customer-label-axis {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.customer-label-axis-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.customer-label-axis-heading b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
}

.customer-label-axis-groups {
  display: grid;
  gap: 5px;
}

.customer-label-row,
.customer-label-view-button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-weight: 800;
}

.customer-label-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 5px 7px;
}

.customer-label-row:hover,
.customer-label-view-button:hover {
  background: var(--surface-soft);
}

.customer-label-arrow {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.customer-label-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-label-count {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

/* spec: ラベル見出し = 開閉ボタン ＋ × 削除ボタン。タッチ端末でも押せるよう常時うっすら表示。 */
.customer-label-head {
  display: flex;
  align-items: center;
  gap: 2px;
}

.customer-label-head .customer-label-row {
  flex: 1;
  width: auto;
  min-width: 0;
}

.customer-label-delete {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  opacity: 0.55;
}

.customer-label-delete:hover {
  background: #f6e7e7;
  color: var(--danger);
  opacity: 1;
}

.customer-label-group {
  display: grid;
  gap: 5px;
}

.customer-label-items {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.customer-label-items-untagged {
  padding-left: 0;
}

.customer-label-empty {
  margin-left: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.customer-label-view-button {
  padding: 6px 8px;
  color: var(--accent-strong);
}

.sidebar-footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.trash-nav-button {
  width: 100%;
  text-align: center;
}

.trash-mode-toolbar {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(165, 42, 42, 0.2);
  border-radius: 8px;
  background: #fff5f3;
  padding: 10px;
}

.trash-mode-toolbar > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.trash-mode-toolbar strong {
  color: var(--danger);
  font-size: 14px;
}

.trash-mode-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.trash-mode-toolbar .secondary-button,
.trash-mode-toolbar .danger-button {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13px;
}

.trash-customer-item-wrap {
  display: grid;
  gap: 6px;
}

.trash-customer-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 4px 2px;
}

.trash-customer-purge-button {
  min-height: 30px;
  border: 1px solid rgba(157, 56, 56, 0.28);
  border-radius: 8px;
  background: #fff5f3;
  color: var(--danger);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.trash-customer-purge-button:hover {
  border-color: rgba(157, 56, 56, 0.45);
  background: #ffecec;
}

.trash-customer-purge-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.customer-list-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  padding: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.workflow-empty-state {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 18px;
  border: 1px dashed var(--color-border, var(--line));
  border-radius: var(--radius-card, 14px);
  background: var(--color-surface-soft, var(--surface-soft));
  color: var(--color-text-secondary, var(--muted));
  line-height: 1.65;
}

.workflow-empty-state strong {
  color: var(--color-text-primary, var(--ink));
  font-size: 16px;
  line-height: 1.45;
}

.workflow-empty-state.compact {
  padding: 14px;
  text-align: left;
}

.workflow-empty-state.compact strong {
  font-size: 14px;
}

.workflow-empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
}

.workflow-empty-state-actions .primary-button,
.workflow-empty-state-actions .secondary-button {
  min-height: 44px;
}

.reservation-empty-state {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .workflow-empty-state {
    padding: 16px;
  }

  .workflow-empty-state-actions,
  .workflow-empty-state-actions .primary-button,
  .workflow-empty-state-actions .secondary-button {
    width: 100%;
  }
}

.customer-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 30px 8px 9px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 5px;
}

.customer-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(200, 135, 82, 0.12);
}

/* 顧客カード: ラッパー + ⋮メニュー + ドラッグ */
.customer-item-wrap {
  position: relative;
}

.customer-item-wrap.dragging {
  opacity: 0.5;
}

.customer-item-menu-button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.customer-item-menu-button:hover {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--ink);
}

/* ラベル見出しのドロップ強調 */
.customer-label-row.label-drop-target {
  background: rgba(200, 135, 82, 0.14);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

/* ⋮メニューのポップオーバー */
.card-menu {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  max-width: 264px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(32, 37, 35, 0.18);
  padding: 6px;
  font-size: 13px;
}

.card-menu-section {
  padding: 2px 0 4px;
}

.card-menu-title {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 8px;
}

.card-menu-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px 6px;
  line-height: 1.5;
}

.card-menu-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
}

.card-menu-item:hover {
  background: var(--surface-soft);
}

.card-menu-item.checked {
  color: var(--accent-strong);
}

.card-menu-check {
  width: 18px;
  text-align: center;
  flex: none;
}

.card-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 2px;
}

.card-menu-danger {
  color: #b42318;
}

.card-menu-danger:hover {
  background: rgba(180, 35, 24, 0.08);
}

.customer-name {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.customer-name span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-name span:last-child {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.customer-meta {
  margin-top: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-x-id {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* spec §24: 顧客一覧の行に「次の行動」 */
.customer-next-action {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink, #2a3138);
  overflow: hidden;
  white-space: nowrap;
}
.customer-next-action .cna-icon { color: var(--accent, #c88752); font-weight: 800; }
.customer-next-action .cna-type {
  flex: none;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(200, 135, 82, 0.1);
  font-size: 10px;
}
.customer-next-action .cna-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
.customer-next-action .cna-due { flex: none; color: var(--muted, #8b97a0); }
.customer-next-action .cna-repeat {
  flex: none;
  color: var(--accent-strong);
  font-weight: 800;
}
.customer-next-action.priority-high .cna-icon { color: var(--accent-strong); }
.customer-next-action.priority-high .cna-type { background: var(--accent-soft); }

.customer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-height: 18px;
  margin-top: 0;
  overflow: hidden;
}

.customer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-height: 18px;
  margin-top: 0;
  overflow: hidden;
}

.customer-tag {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  border: 1px solid rgba(200, 135, 82, 0.24);
  border-radius: 999px;
  background: #fbf3ea;
  color: var(--accent-strong);
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.customer-badge,
.field-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 2px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.customer-badge {
  min-height: 17px;
  padding: 1px 5px;
  font-size: 10px;
}

/* 参考UI統合: サイドバー顧客カードのバッジは発光を抑え、中間色＋暖色アクセントに統一 */
.customer-badge.pin,
.customer-badge.warn,
.customer-badge.today {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

/* 「DM未対応」など要注意のみ、許可された暖色アクセントで控えめに強調 */
.customer-badge.urgent {
  border-color: rgba(200, 135, 82, 0.4);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* パネル内 field-pill は機能色を維持（画面端の発光ではないため） */
.field-pill.urgent {
  border-color: rgba(157, 56, 56, 0.28);
  background: #fff5f5;
  color: var(--danger);
}

.field-pill.today {
  border-color: rgba(200, 135, 82, 0.32);
  background: #fbf3ea;
  color: var(--accent-strong);
}

.field-pill.warn {
  border-color: rgba(154, 101, 20, 0.28);
  background: #fff7e9;
  color: var(--warning);
}

.workspace {
  min-width: 0;
  padding: 22px;
}

.topbar {
  min-height: 58px;
  margin-bottom: 18px;
}

.topbar > div:first-child {
  flex: 0 0 auto;
  min-width: 170px;
}

.top-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.mobile-only-nav {
  display: none;
}

.save-status {
  min-width: 90px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.pwa-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1240px;
  margin: 0 auto 12px;
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 8px;
  background: #fbf3ea;
  padding: 10px 12px;
  color: var(--ink);
}

.pwa-bar strong,
.pwa-bar span {
  display: block;
}

.pwa-bar strong {
  font-size: 13px;
}

.pwa-bar span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.pwa-bar.offline {
  border-color: rgba(154, 101, 20, 0.28);
  background: #fff7e9;
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* spec §14: ナビ5グループ（今日/X返信/顧客/予約/売上） */
.nav-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 4px;
  border-radius: 10px;
  background: rgba(200, 135, 82, 0.05);
}
.nav-group + .nav-group {
  margin-left: 2px;
}
.nav-group-label {
  font-size: 11px;
  color: var(--muted, #5b6770);
  padding: 0 2px;
  letter-spacing: 0.02em;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(430px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.detail-right-column {
  display: grid;
  gap: 16px;
}

.panel,
.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel {
  padding: 16px;
}

.empty-state {
  padding: 28px;
  max-width: 720px;
}

.empty-state p {
  max-width: 520px;
  color: var(--muted);
  line-height: 1.7;
}

.first-run-guide {
  display: grid;
  gap: 16px;
  width: min(100%, 760px);
  max-width: 760px;
}

.first-run-guide-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.first-run-guide-heading h2,
.first-run-guide-heading p,
.first-run-guide > p {
  margin: 0;
}

.first-run-runtime-badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(40, 112, 74, 0.28);
  border-radius: 999px;
  background: rgba(40, 112, 74, 0.08);
  color: #286f4a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.first-run-runtime-badge[data-mode="demo"] {
  border-color: rgba(154, 101, 20, 0.28);
  background: #fff7e9;
  color: #815210;
}

.first-run-private-note,
.first-run-save-notice {
  max-width: none !important;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-soft);
}

.first-run-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: first-run-step;
}

.first-run-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  counter-increment: first-run-step;
}

.first-run-steps li::before {
  grid-row: 1 / span 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  content: counter(first-run-step);
  font-weight: 900;
}

.first-run-steps strong,
.first-run-steps span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.first-run-steps span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.first-run-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.first-run-status {
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.first-run-status[data-state="connected"] {
  border-color: rgba(40, 112, 74, 0.28);
  background: rgba(40, 112, 74, 0.08);
  color: #286f4a;
}

.first-run-status[data-state="warning"],
.first-run-status[data-state="configured"] {
  border-color: rgba(154, 101, 20, 0.28);
  background: #fff7e9;
  color: #815210;
}

@media (max-width: 620px) {
  .first-run-guide {
    gap: 14px;
    width: 100%;
    padding: 18px;
  }

  .first-run-guide-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .first-run-runtime-badge {
    align-self: flex-start;
  }

  .first-run-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .first-run-status-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .first-run-status {
    width: 100%;
  }

  .first-run-guide .empty-state-actions,
  .first-run-guide .empty-state-actions button {
    width: 100%;
    min-height: 44px;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.profile-actions {
  justify-content: flex-end;
}

#pinCustomerButton.active {
  border-color: rgba(154, 101, 20, 0.35);
  background: #fff8ed;
  color: var(--warning);
}

.profile-danger-zone {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.profile-danger-zone .danger-button {
  min-width: 96px;
}

.wide {
  grid-column: 1 / -1;
}

.large-textarea {
  min-height: 138px;
}

.dm-panel {
  display: grid;
  gap: 14px;
}

.therapist-style-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
}

.style-box-header,
.memo-box-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.style-box-header div:first-child,
.memo-box-header div:first-child {
  display: grid;
  gap: 3px;
}

.style-box-header span,
.memo-box-header span,
.ai-meta-line {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.style-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.ai-status-box {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(157, 56, 56, 0.25);
  border-radius: 999px;
  background: #fff5f5;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.ai-status-box.enabled {
  border-color: rgba(45, 111, 72, 0.3);
  background: #fbf3ea;
  color: var(--accent-strong);
}

.post-session-memo-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 8px;
  background: #f6fbf8;
}

.post-session-memo-card {
  display: grid;
  gap: 12px;
}

.post-session-memo-card .post-session-memo-box {
  margin-top: 12px;
  align-content: start;
}

.post-session-memo-card textarea {
  min-height: 156px;
}

.today-plan-panel,
.customer-ai-panel {
  display: grid;
  gap: 12px;
}

.today-plan-lead,
.customer-ai-lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.today-plan-actions,
.customer-ai-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.today-plan-actions .primary-button {
  min-height: 52px;
  font-size: 16px;
}

/* spec §11: AI送信プレビュー */
.ai-preview-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border, #d8dee3);
  border-radius: 10px;
  background: var(--surface-muted, #f4f3ef);
  display: grid;
  gap: 8px;
}
.ai-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ai-preview-head .ok { color: #1f6f59; font-weight: 800; }
.ai-preview-head .danger { color: #b34a4a; font-weight: 800; }
.ai-preview-note { font-size: 12px; color: var(--muted, #5b6770); margin: 0; }
.ai-preview-payload {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: #1f2730;
  color: #e6edf3;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-send-confirm-dialog {
  width: min(920px, calc(100vw - 28px));
}

.ai-send-confirm-body {
  display: grid;
  gap: 12px;
}

.ai-send-confirm-status,
.ai-send-safe-note {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(115, 127, 120, 0.18);
  border-radius: 8px;
  background: #f7fbf8;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ai-send-confirm-status strong,
.ai-send-safe-note strong {
  color: var(--ink);
}

.ai-send-confirm-status.warn {
  border-color: rgba(200, 135, 82, 0.35);
  background: #fff8ee;
}

.ai-send-confirm-status.danger {
  border-color: rgba(165, 42, 42, 0.25);
  background: #fff0ef;
  color: var(--danger);
}

.ai-send-confirm-notice {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

/* spec §2: 全活動タイムライン */
.history-mode-switch { display: flex; gap: 6px; }
.history-mode-switch .secondary-button { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.full-timeline { display: grid; gap: 8px; }
.timeline-loading { color: var(--muted, #8b97a0); font-size: 13px; padding: 8px; }
.timeline-event {
  border-left: 3px solid var(--border, #d8dee3);
  padding: 6px 10px;
  background: var(--surface-muted, #f4f3ef);
  border-radius: 0 8px 8px 0;
}
.timeline-event.source-ai { border-left-color: #8a6fd0; }
.timeline-event.source-rule { border-left-color: #d39a3a; }
.timeline-event.source-user { border-left-color: #c88752; }
.timeline-event.source-data { border-left-color: #6a93c0; }
.timeline-event-head {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.timeline-event-title { font-weight: 800; font-size: 13px; }
.timeline-event-meta { font-size: 11px; color: var(--muted, #8b97a0); white-space: nowrap; }
.timeline-event-detail { font-size: 12px; color: var(--ink, #2a3138); margin-top: 2px; white-space: pre-wrap; word-break: break-word; }

/* spec §8: 重複統合UI */
.duplicate-result { display: grid; gap: 8px; margin-top: 8px; }
.duplicate-note { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: #eef3f1; }
.duplicate-note.warn { background: #fff4e0; }
.duplicate-note.ok { background: #e8f4ef; }
.duplicate-matches { display: grid; gap: 6px; }
.duplicate-match {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border, #d8dee3); border-radius: 8px;
}
.duplicate-match span { color: var(--muted, #5b6770); font-size: 12px; }
.duplicate-reasons { font-size: 11px; color: var(--muted, #8b97a0); margin-top: 2px; }

.customer-ai-result,
.customer-ai-card {
  display: grid;
  gap: 10px;
}

.customer-ai-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfc;
  padding: 12px;
}

.customer-ai-card-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.customer-ai-card-header div {
  display: grid;
  gap: 3px;
}

.customer-ai-card-header span,
.customer-ai-summary,
.customer-ai-section li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.customer-ai-summary {
  margin: 0;
}

.customer-ai-safety-note {
  border: 1px solid rgba(196, 108, 42, 0.28);
  border-radius: 8px;
  background: rgba(196, 108, 42, 0.08);
  color: #8c562e;
  font-size: 13px;
  line-height: 1.6;
  padding: 9px 10px;
}

.customer-ai-section {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.customer-ai-section-facts strong { color: #2f6f56; }
.customer-ai-section-suggestions strong { color: #9a6514; }
.customer-ai-section-review strong { color: #9a3d3d; }

.customer-ai-section ul {
  margin: 0;
  padding-left: 18px;
}

.session-record-list {
  display: grid;
  gap: 8px;
}

.session-record-list-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.session-record-item,
.session-record-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.session-record-item.latest {
  border-color: rgba(200, 135, 82, 0.35);
  background: rgba(200, 135, 82, 0.07);
}

.session-record-item div {
  display: grid;
  gap: 2px;
  margin-bottom: 6px;
}

.session-record-item strong {
  color: var(--ink);
  font-size: 13px;
}

.session-record-item span,
.session-record-empty {
  color: var(--muted);
  font-size: 12px;
}

.session-record-item p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.session-record-latest-actions {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(200, 135, 82, 0.28);
  border-radius: 8px;
  background: rgba(200, 135, 82, 0.06);
}

.session-record-latest-actions:empty {
  display: none;
}

.session-record-latest-meta {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

.session-record-latest-meta span:first-child {
  color: var(--ink);
  font-weight: 800;
}

.session-record-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 10px 0 0 !important;
}

.session-record-actions button {
  min-width: 88px;
  min-height: 44px;
}

.session-record-edit-dialog {
  width: min(560px, calc(100vw - 28px));
}

.session-record-edit-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.session-record-edit-body label {
  display: grid;
  gap: 6px;
}

.session-record-edit-body textarea {
  min-height: 180px;
  resize: vertical;
}

.session-record-edit-meta,
.session-record-edit-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.session-record-edit-status {
  min-height: 21px;
}

.session-record-edit-dialog .icon-button,
.session-record-edit-dialog .text-button,
.session-record-edit-dialog .primary-button {
  min-height: 44px;
}

.session-record-edit-dialog .icon-button {
  min-width: 44px;
}

@media (max-width: 520px) {
  .session-record-actions button,
  .session-record-edit-buttons button {
    flex: 1 1 120px;
  }

  .session-record-edit-dialog {
    padding: 14px;
  }
}

.detox-panel {
  display: grid;
  gap: 10px;
  border-color: rgba(154, 101, 20, 0.26);
}

.detox-lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.detox-dialog-body {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.detox-dialog #detoxBadMoment {
  min-height: clamp(300px, 46vh, 460px);
}

.detox-dialog #detoxCloseButton,
.detox-dialog #detoxPurgeButton {
  min-width: 44px;
  min-height: 44px;
}

.detox-dialog[aria-busy="true"] #detoxBadMoment {
  opacity: 1;
  cursor: wait;
}

.detox-dialog #detoxBadMoment.detox-text-flowing {
  transform-origin: 50% 100%;
  animation: detoxTextFlowAway 2200ms ease-in forwards;
}

.detox-maru-message {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 12px 16px;
  border: 1px solid rgba(214, 184, 154, 0.72);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 250, 244, 0.98), rgba(249, 242, 234, 0.94));
  box-shadow: 0 10px 26px rgba(80, 55, 35, 0.08);
  animation: detoxMaruQuietAppear 420ms ease-out both;
}

.detox-maru-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 1px solid rgba(214, 184, 154, 0.82);
  border-radius: 999px;
  background: #fff;
}

.detox-maru-avatar img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.detox-maru-message p {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.detox-maru-message p > span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.detox-maru-message strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
}

:root[data-theme="dark"] .detox-maru-message {
  border-color: rgba(203, 157, 116, 0.5);
  background: linear-gradient(135deg, rgba(64, 52, 43, 0.98), rgba(48, 42, 37, 0.96));
}

:root[data-theme="dark"] .detox-maru-avatar {
  border-color: rgba(203, 157, 116, 0.52);
  background: rgba(255, 250, 244, 0.92);
}

.detox-dialog.settling {
  pointer-events: none;
  animation: detoxDialogSettle 3000ms ease-in-out forwards;
}

.detox-dialog.settling::backdrop {
  animation: detoxBackdropSettle 3000ms ease-in-out forwards;
}

.detox-dialog.settling .detox-complete {
  animation: detoxCompleteFloat 3000ms ease-in-out forwards;
}

.detox-water-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.detox-water-overlay.running {
  opacity: 1;
}

.detox-water-sheet {
  position: absolute;
  inset: -35% -20%;
  background:
    linear-gradient(170deg, rgba(223, 248, 250, 0) 0%, rgba(182, 224, 228, 0.48) 34%, rgba(255, 255, 255, 0.72) 48%, rgba(113, 166, 170, 0.4) 64%, rgba(223, 248, 250, 0) 100%);
  filter: blur(0.2px);
  transform: translateY(-116%) skewY(-5deg);
  animation: detoxWaterSweep 2200ms cubic-bezier(0.22, 0.84, 0.22, 1) forwards;
}

.detox-water-foam {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 86px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 255, 255, 0.78) 0 12px, transparent 13px),
    radial-gradient(circle at 26% 52%, rgba(255, 255, 255, 0.62) 0 9px, transparent 10px),
    radial-gradient(circle at 44% 48%, rgba(255, 255, 255, 0.72) 0 14px, transparent 15px),
    radial-gradient(circle at 66% 50%, rgba(255, 255, 255, 0.6) 0 10px, transparent 11px),
    radial-gradient(circle at 84% 48%, rgba(255, 255, 255, 0.76) 0 13px, transparent 14px);
  opacity: 0;
  transform: translateY(-120%);
  animation: detoxFoamDrift 2200ms ease-out forwards;
}

.detox-water-foam.foam-a {
  top: 18%;
}

.detox-water-foam.foam-b {
  top: 42%;
  animation-delay: 160ms;
  transform: translateY(-140%) scaleX(1.08);
}

.detox-water-glint {
  position: absolute;
  width: 42vw;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  opacity: 0;
  transform: translateX(-130%) rotate(-10deg);
  animation: detoxWaterGlint 1500ms ease-out forwards;
}

.detox-water-glint.glint-a {
  top: 34%;
  left: 8%;
}

.detox-water-glint.glint-b {
  top: 58%;
  left: 34%;
  animation-delay: 260ms;
}

.detox-burn-letter {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(230px, 76%);
  min-height: 126px;
  padding: 18px 22px 24px;
  border: 1px solid rgba(214, 184, 154, 0.78);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 248, 241, 0.88)),
    #fffaf0;
  box-shadow:
    0 16px 36px rgba(80, 55, 35, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  overflow: hidden;
  transform: translateX(-50%) translateY(8px) scale(0.98);
  transform-origin: 50% 100%;
  animation: burnLetterConsume 1900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.detox-burn-letter::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -18%;
  height: 72%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(47, 42, 37, 0.78) 0 18%, rgba(122, 72, 40, 0.46) 28%, transparent 58%),
    linear-gradient(0deg, rgba(47, 42, 37, 0.7), rgba(184, 121, 74, 0.18), transparent);
  opacity: 0;
  filter: blur(1px);
  animation: burnScorchRise 1900ms ease-in forwards;
}

.detox-letter-date {
  align-self: center;
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 800;
}

.detox-letter-line {
  display: block;
  width: var(--line-width);
  height: 8px;
  border-radius: 999px;
  background: rgba(111, 102, 93, 0.2);
}

.detox-burn-edge {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -7px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 18% 70%, rgba(255, 231, 145, 0.95), transparent 32%),
    radial-gradient(ellipse at 48% 48%, rgba(255, 146, 54, 0.95), transparent 36%),
    radial-gradient(ellipse at 76% 68%, rgba(255, 210, 110, 0.9), transparent 30%),
    linear-gradient(90deg, transparent, rgba(255, 116, 42, 0.95), transparent);
  box-shadow:
    0 0 18px rgba(255, 128, 45, 0.54),
    0 -5px 16px rgba(255, 202, 108, 0.42);
  filter: blur(0.3px);
  animation: burnEdgeRise 1900ms ease-in forwards;
}

.detox-flame {
  position: absolute;
  bottom: 20px;
  left: var(--x);
  width: 13px;
  height: var(--height);
  border-radius: 999px 999px 999px 2px;
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 249, 196, 0.95) 0 20%, rgba(255, 151, 55, 0.92) 38%, rgba(168, 91, 85, 0.66) 70%, transparent 72%);
  box-shadow: 0 0 18px rgba(255, 132, 45, 0.46);
  filter: blur(0.2px);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: detoxFlameRise 1150ms ease-out forwards;
  animation-delay: var(--delay);
}

.detox-ember {
  position: absolute;
  bottom: 34px;
  left: var(--x);
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 180, 90, 0.82);
  box-shadow: 0 0 14px rgba(255, 145, 58, 0.58);
  opacity: 0;
  animation: detoxEmberFloat 1280ms ease-out forwards;
  animation-delay: var(--delay);
}

.detox-ash {
  position: absolute;
  top: 54px;
  left: var(--x);
  width: 11px;
  height: 4px;
  border-radius: 999px;
  background: rgba(111, 102, 93, 0.36);
  opacity: 0;
  animation: detoxAshDrift 1400ms ease-in forwards;
  animation-delay: var(--delay);
}

.detox-complete {
  border: 1px solid var(--color-success-border);
  border-radius: 8px;
  background: var(--color-success-bg);
  color: var(--color-success-text);
  padding: 10px;
  font-size: 13px;
  font-weight: 800;
}

@keyframes detoxWaterSweep {
  0% {
    opacity: 0;
    transform: translateY(-116%) skewY(-5deg);
  }

  16% {
    opacity: 1;
  }

  62% {
    opacity: 0.92;
    transform: translateY(8%) skewY(-3deg);
  }

  100% {
    opacity: 0;
    transform: translateY(118%) skewY(-2deg);
  }
}

@keyframes detoxFoamDrift {
  0% {
    opacity: 0;
    transform: translateY(-120%) translateX(-3%);
  }

  18% {
    opacity: 0.86;
  }

  72% {
    opacity: 0.58;
  }

  100% {
    opacity: 0;
    transform: translateY(118vh) translateX(4%);
  }
}

@keyframes detoxWaterGlint {
  0% {
    opacity: 0;
    transform: translateX(-130%) rotate(-10deg);
  }

  18% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: translateX(180vw) rotate(-10deg);
  }
}

@keyframes detoxMaruQuietAppear {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes detoxTextFlowAway {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  48% {
    opacity: 0.58;
    filter: blur(0.6px);
    transform: translateY(4px);
  }

  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(18px);
  }
}

@keyframes burnLetterConsume {
  0% {
    opacity: 0;
    clip-path: inset(0 0 0 0 round 10px);
    filter: brightness(1) saturate(1);
    transform: translateX(-50%) translateY(10px) scale(0.98) rotate(0deg);
  }

  12% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
  }

  34% {
    clip-path: inset(0 0 18% 0 round 10px);
    filter: brightness(0.98) saturate(0.96);
  }

  62% {
    clip-path: inset(0 0 62% 0 round 10px);
    filter: brightness(0.82) saturate(0.74);
  }

  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 10px);
    filter: brightness(0.68) saturate(0.34);
    transform: translateX(-50%) translateY(10px) scale(0.94) rotate(-0.8deg);
  }
}

@keyframes burnScorchRise {
  0% {
    opacity: 0;
    transform: translateY(42%);
  }

  24% {
    opacity: 0.6;
  }

  100% {
    opacity: 0.95;
    transform: translateY(-92%);
  }
}

@keyframes burnEdgeRise {
  0% {
    opacity: 0;
    transform: translateY(12px) scaleX(0.72);
  }

  16% {
    opacity: 1;
    transform: translateY(0) scaleX(1);
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-118px) scaleX(0.82);
  }
}

@keyframes detoxFlameRise {
  0% {
    opacity: 0;
    transform: translateY(18px) translateX(0) scale(0.64) rotate(-8deg);
  }

  18% {
    opacity: 1;
  }

  74% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translateY(-104px) translateX(var(--drift)) scale(1.18) rotate(12deg);
  }
}

@keyframes detoxEmberFloat {
  0% {
    opacity: 0;
    transform: translateY(8px) translateX(0) scale(0.72);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-94px) translateX(var(--drift)) scale(0.38);
  }
}

@keyframes detoxAshDrift {
  0% {
    opacity: 0;
    transform: translateY(-8px) rotate(0deg);
  }

  20% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translateY(82px) translateX(22px) rotate(var(--rotate));
  }
}

@keyframes detoxBurnShadow {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.72);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.04);
  }
}

@keyframes detoxCompleteFloat {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  58% {
    opacity: 0.82;
    transform: translateY(-2px);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes detoxDialogSettle {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  62% {
    opacity: 0.72;
    transform: translateY(-2px) scale(0.995);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
}

@keyframes detoxBackdropSettle {
  0% {
    background: rgba(20, 28, 24, 0.28);
  }

  100% {
    background: rgba(20, 28, 24, 0);
  }
}

.ai-meta-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8faf9;
}

.ai-meta-title {
  font-weight: 800;
}

.ai-safe-preview {
  margin-top: 8px;
}

.ai-safe-preview summary {
  cursor: pointer;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.ai-safe-preview pre {
  max-height: 160px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  white-space: pre-wrap;
}

.history-panel {
  grid-column: 1 / -1;
}

.mobile-home-view,
.queue-view {
  max-width: 1180px;
}

.mobile-home-panel {
  display: grid;
  gap: 14px;
}

.mobile-home-lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.mobile-home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mobile-home-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
}

.mobile-home-stat.primary {
  border-color: rgba(200, 135, 82, 0.32);
  background: #f3fbf7;
}

.mobile-home-stat.urgent {
  border-color: rgba(157, 56, 56, 0.28);
  background: #fff6f4;
}

.mobile-home-stat strong {
  font-size: 24px;
}

.mobile-home-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mobile-home-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.mobile-home-action {
  min-width: 0;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px;
  text-align: left;
  cursor: pointer;
  display: grid;
  align-content: center;
  gap: 4px;
}

.mobile-home-action strong {
  font-size: 14px;
}

.mobile-home-action span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.mobile-home-action:focus-visible,
.mobile-home-action:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 135, 82, 0.12);
}

.mobile-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 12px;
  align-items: start;
}

.mobile-home-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.mobile-home-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

.mobile-home-section-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.mobile-home-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.mobile-next-card,
.mobile-reservation-card,
.mobile-home-empty {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.mobile-next-card.reply,
.mobile-next-card.handoff {
  border-left: 5px solid var(--danger);
}

.mobile-next-card.pre_booking,
.mobile-next-card.booking {
  border-left: 5px solid #4b79a1;
}

.mobile-next-card.daily {
  border-left: 5px solid var(--accent);
}

.mobile-card-top,
.mobile-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-card-top {
  justify-content: space-between;
}

.mobile-card-top strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mobile-chip {
  border-radius: 999px;
  background: #edf2f7;
  color: #344861;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.mobile-chip.today {
  background: #e9f5ef;
  color: var(--accent-strong);
}

.mobile-card-title {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
}

.mobile-card-note,
.mobile-home-empty span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.mobile-card-warning {
  border: 1px solid rgba(154, 101, 20, 0.24);
  border-radius: 6px;
  background: #fff8ed;
  color: var(--warning);
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 800;
}

.mobile-card-actions {
  flex-wrap: wrap;
}

.mobile-card-actions button {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.mobile-home-guard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mobile-home-guard div {
  border: 1px solid rgba(200, 135, 82, 0.2);
  border-radius: 8px;
  background: #f6fbf8;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.mobile-home-guard strong {
  font-size: 12px;
}

.mobile-home-guard span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.mobile-home-guard a {
  color: var(--accent-strong);
  font-weight: 900;
}

.growth-loop-view {
  max-width: 1180px;
}

.validation-lab-view {
  max-width: 1180px;
}

.field-mode-view {
  max-width: 1180px;
}

.field-mode-panel {
  display: grid;
  gap: 14px;
}

.field-mode-lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.field-mode-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.field-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.field-stat strong {
  font-size: 22px;
}

.field-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.field-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field-mode-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.field-mode-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
}

.field-mode-section-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.field-card-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.field-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.field-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.field-card-title {
  font-weight: 900;
}

.field-card-time {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.field-card-meta,
.field-card-note,
.field-card-line,
.field-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.field-card-line strong {
  color: var(--ink);
}

.field-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.field-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.field-card-actions button {
  min-height: 32px;
  padding: 6px 9px;
}

/* spec §21: 当日進行ステップ＋操作 */
.field-progress-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 2px;
  font-size: 12px;
}
.field-progress-step {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f3;
  color: var(--muted, #8b97a0);
}
.field-progress-step.on {
  background: #e9f4f0;
  color: #1f6f59;
  font-weight: 800;
}
.field-progress-sep { color: var(--muted, #b6bec4); }
.field-progress-actions .field-progress.active {
  background: #e9f4f0;
  border-color: #a9d6c6;
  color: #1f6f59;
  font-weight: 800;
}

.sales-dashboard-view {
  max-width: 1180px;
}

.sales-panel {
  display: grid;
  gap: 14px;
}

.target-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.sales-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.sales-dashboard-view .sales-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sales-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
  display: grid;
  gap: 5px;
}

.sales-stat.primary {
  border-color: rgba(200, 135, 82, 0.35);
  background: #f2fbf7;
}

.sales-stat.new-frame {
  border-color: rgba(75, 121, 161, 0.28);
  background: #f3f8fb;
}

.sales-stat.repeat-frame {
  border-color: rgba(154, 101, 20, 0.26);
  background: #fff8ed;
}

.sales-stat span,
.sales-stat small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.sales-stat strong {
  font-size: 25px;
}

.sales-dashboard-view .sales-stat {
  min-width: 0;
  padding: 10px;
  gap: 4px;
}

.sales-dashboard-view .sales-stat span,
.sales-dashboard-view .sales-stat small {
  font-size: 11px;
}

.sales-dashboard-view .sales-stat strong {
  font-size: 23px;
}

.sales-rate-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}

.sales-rate-denominator {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

@media (min-width: 1280px) {
  .sales-dashboard-view .sales-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.sales-comment {
  border: 1px solid rgba(200, 135, 82, 0.24);
  border-radius: 8px;
  background: #f6fbf8;
  padding: 12px;
  display: grid;
  gap: 5px;
}

.sales-comment p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.sales-ranking,
.area-sales-breakdown {
  display: grid;
  gap: 10px;
}

.sales-rank-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.sales-rank-item.is-clickable {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.sales-rank-item.is-clickable:hover {
  border-color: rgba(211, 145, 92, 0.38);
  box-shadow: 0 8px 20px rgba(94, 64, 35, 0.12);
  transform: translateY(-1px);
}

.sales-rank-item.is-clickable:focus-visible {
  outline: 3px solid rgba(211, 145, 92, 0.32);
  outline-offset: 3px;
}

.sales-rank-item.top {
  border-left-color: var(--accent);
}

.rank-number {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface-soft);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.rank-number.medal {
  background: transparent;
  font-size: 28px;
  line-height: 1;
}

.rank-medal {
  display: block;
  filter: drop-shadow(0 2px 2px rgba(94, 64, 35, 0.16));
}

.rank-main,
.rank-metrics {
  display: grid;
  gap: 4px;
}

.rank-main span,
.rank-metrics span,
.rank-comment {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.rank-metrics {
  min-width: 116px;
  text-align: right;
}

.rank-comment {
  grid-column: 2 / -1;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.area-sales-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.area-sales-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 5px;
}

.area-sales-item span {
  font-size: 21px;
  font-weight: 900;
}

.area-sales-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-history-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.reservation-history-header {
  margin: 0;
}

.reservation-history-header > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.reservation-history-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.reservation-history-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.reservation-history-table th,
.reservation-history-table td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 9px 10px;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}

.reservation-history-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #edf8f2;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.reservation-history-table td {
  color: var(--text);
  background: #fff;
}

.reservation-history-table tbody tr:nth-child(even) td {
  background: #fffaf3;
}

.reservation-history-row {
  cursor: pointer;
}

.reservation-history-row:hover td,
.reservation-history-row:focus-visible td {
  background: #fff4e8;
}

.reservation-history-row:focus-visible {
  outline: 2px solid rgba(189, 124, 73, 0.45);
  outline-offset: -2px;
}

.reservation-history-customer-link {
  color: var(--accent);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reservation-history-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.reservation-history-table .total,
.reservation-history-table .cumulative {
  font-weight: 900;
}

.reservation-history-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.reservation-history-range {
  margin-right: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-history-page-button {
  min-width: 116px;
  min-height: 44px;
}

.reservation-history-pagination .reservation-history-page-button {
  min-height: 44px;
}

.reservation-history-page-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (max-width: 760px) {
  .reservation-history-pagination {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    padding-right: 68px;
  }

  .reservation-history-range {
    grid-column: 1 / -1;
    margin-right: 0;
    text-align: center;
  }

  .reservation-history-page-button {
    width: 100%;
    min-width: 0;
  }
}

.sales-trend-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.sales-trend-head,
.sales-trend-title,
.sales-trend-toggle,
.sales-trend-nav,
.sales-trend-legend {
  display: flex;
  align-items: center;
}

.sales-trend-head {
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sales-trend-title {
  gap: 14px;
}

.sales-trend-title h3 {
  margin: 0;
  font-size: 19px;
}

.sales-trend-title select {
  min-height: 36px;
  padding: 6px 34px 6px 12px;
}

.sales-trend-toggle {
  gap: 8px;
  color: var(--ink);
  font-weight: 800;
}

.sales-trend-forecast-control {
  display: grid;
  gap: 2px;
  justify-items: end;
  max-width: 360px;
}

.sales-trend-forecast-control small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.sales-trend-toggle input {
  width: 38px;
  min-height: 22px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #d6d2cc;
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.sales-trend-toggle input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(47, 42, 37, 0.18);
  transition: transform 0.15s ease;
}

.sales-trend-toggle input:checked {
  background: var(--accent);
}

.sales-trend-toggle input:checked::after {
  transform: translateX(16px);
}

.sales-trend-toggle input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 3px;
}

:root[data-theme="dark"] .sales-trend-toggle input {
  background: #0f0e0c;
  box-shadow: inset 0 0 0 1px rgba(245, 239, 231, 0.12);
}

:root[data-theme="dark"] .sales-trend-toggle input:checked {
  background: #fffaf4;
  box-shadow:
    inset 0 0 0 1px rgba(239, 183, 127, 0.42),
    0 0 0 3px rgba(239, 183, 127, 0.16);
}

:root[data-theme="dark"] .sales-trend-toggle input:checked::after {
  background: var(--color-accent, #d3915c);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.34);
}

@media (max-width: 620px) {
  .sales-trend-forecast-control {
    width: 100%;
    justify-items: start;
  }

  .sales-trend-forecast-control small {
    text-align: left;
  }
}

.sales-trend-range {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-trend-chart {
  min-height: 330px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.sales-trend-chart svg {
  display: block;
  width: 100%;
  height: 330px;
}

.sales-chart-plot {
  fill: #f7f6f4;
}

.sales-chart-grid-line {
  stroke: rgba(47, 42, 37, 0.16);
  stroke-width: 1;
}

.sales-chart-axis {
  stroke: rgba(47, 42, 37, 0.28);
  stroke-width: 1;
}

.sales-chart-y-label,
.sales-chart-x-label {
  fill: var(--ink);
  font-size: 13px;
}

.sales-chart-y-label {
  text-anchor: end;
}

.sales-chart-x-label {
  text-anchor: middle;
  font-weight: 800;
}

.sales-chart-x-label-day {
  font-size: 11px;
}

.sales-chart-bar.actual {
  fill: var(--accent);
}

.sales-chart-bar.forecast {
  fill: rgba(184, 121, 74, 0.2);
}

.sales-trend-nav {
  justify-content: center;
  gap: 30px;
}

.sales-trend-nav .icon-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 25px;
}

.sales-trend-nav .text-button {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.sales-trend-legend {
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sales-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sales-trend-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.sales-trend-legend i.actual {
  background: var(--accent);
}

.sales-trend-legend i.forecast {
  background: rgba(184, 121, 74, 0.24);
}

.queue-panel {
  display: grid;
  gap: 14px;
}

.calendar-panel {
  grid-column: auto;
}

.body-map-panel {
  grid-column: 1 / -1;
}

.button-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.primary-button,
.secondary-button,
.danger-button,
.icon-button {
  border: 1px solid transparent;
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
}

.primary-button {
  background: var(--accent);
  color: #fff;
}

.primary-button:hover {
  background: var(--accent-strong);
}

.secondary-button,
.icon-button {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--line);
}

.danger-button {
  background: #fff2f2;
  color: var(--danger);
  border-color: rgba(157, 56, 56, 0.32);
}

.danger-button:hover {
  background: #ffe7e7;
}

.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.secondary-button.active {
  background: #fbeede;
  border-color: var(--accent);
  color: var(--accent-strong);
}

.icon-button {
  width: 38px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.export-box {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.export-box a,
.export-box .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
.export-box .link-button {
  cursor: pointer;
}

.sidebar-footer .export-box a {
  flex: 1 1 100%;
  justify-content: center;
  min-height: 42px;
}

.inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  text-decoration: none;
  white-space: nowrap;
}

.inline-link.disabled {
  color: var(--muted);
  opacity: 0.55;
  pointer-events: none;
}

.suggestion-box,
.check-list {
  display: grid;
  gap: 8px;
}

.suggestion-item,
.check-item,
.message-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.suggestion-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
/* spec §18: 除外した項目は淡色＋取り消し線で確認しやすく */
.suggestion-item.excluded { opacity: 0.5; }
.suggestion-item.excluded .suggestion-title,
.suggestion-item.excluded .suggestion-body > div { text-decoration: line-through; }
.suggestion-item.applied { opacity: 0.7; }
.suggestion-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.customer-fact-candidates-panel {
  gap: 12px;
}
.customer-fact-candidates-panel .suggestion-item {
  background: var(--color-surface-soft);
}
.suggestion-lead {
  font-size: 12px;
  color: var(--muted, #5b6770);
  margin: 0 0 6px;
}

.transfer-booking-button {
  white-space: nowrap;
}

@media (max-width: 620px) {
  .customer-fact-candidates-panel .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .suggestion-item {
    grid-template-columns: 1fr;
  }
  .suggestion-actions {
    flex-flow: row wrap;
    align-items: stretch;
  }
  .suggestion-actions .secondary-button {
    min-height: 44px;
  }
}

.suggestion-title,
.check-title {
  font-weight: 800;
}

.suggestion-detail,
.check-detail,
.message-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.check-item.ok {
  border-color: rgba(45, 111, 72, 0.35);
  background: #f4fbf6;
}

.check-item.warn {
  border-color: rgba(154, 101, 20, 0.35);
  background: #fff8ec;
}

.check-item.danger {
  border-color: rgba(157, 56, 56, 0.35);
  background: #fff2f2;
}

.message-history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.queue-lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.today-page-heading {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  gap: 18px;
}

.today-page-heading > div:first-child {
  flex: 0 0 auto;
}

.today-page-heading .queue-lead {
  min-width: 0;
  padding-bottom: 2px;
}

.queue-refresh-button {
  min-width: 124px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
}

.queue-refresh-wrap {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.queue-refresh-status {
  min-height: 18px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.queue-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.queue-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 122px;
}

.queue-stat strong {
  font-size: 28px;
  line-height: 1;
}

.queue-stat span,
.queue-stat-title,
.queue-stat-description {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.queue-stat-title {
  color: var(--ink);
  font-size: 14px;
}

.queue-stat-description {
  font-weight: 700;
  line-height: 1.5;
}

.queue-stat.urgent {
  border-color: rgba(157, 56, 56, 0.28);
  background: #fff6f4;
}

.queue-stat.records {
  border-color: rgba(75, 121, 161, 0.24);
  background: #f5f9fc;
}

.queue-list {
  display: grid;
  gap: 18px;
}

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

.queue-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 0 2px 8px;
}

.queue-group-header strong {
  font-size: 16px;
}

.queue-group-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.queue-item,
.empty-queue {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.queue-item {
  display: grid;
  gap: 10px;
  border-left: 5px solid var(--line);
}

.queue-item.clickable {
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.queue-item.clickable:hover {
  border-color: var(--border-strong);
  box-shadow: 0 10px 24px rgba(83, 60, 38, 0.08);
  transform: translateY(-1px);
}

.queue-item.clickable:focus-visible {
  outline: 3px solid rgba(184, 121, 74, 0.28);
  outline-offset: 3px;
}

.queue-item.reply {
  border-left-color: var(--queue-reply-text);
}

.queue-item.handoff {
  border-left-color: var(--queue-handoff-text);
}

.queue-item.pre_booking,
.queue-item.booking,
.queue-item.reservation_gap,
.queue-item.reservation_candidate {
  border-left-color: #4b79a1;
}

.queue-item.daily,
.queue-item.post_session_dm,
.queue-item.conversation_followup,
.queue-item.slow_reply {
  border-left-color: var(--accent);
}

.queue-item.post_session_memo,
.queue-item.profile_gap,
.queue-item.manual_followup {
  border-left-color: #779884;
}

.queue-primary-action {
  min-width: 132px;
  min-height: 44px;
}

.queue-other-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-top: 1px dashed var(--line);
  padding-top: 9px;
}

.queue-other-actions span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.queue-other-actions small {
  border-radius: 999px;
  background: var(--surface-strong, #f5efe8);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.queue-followup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.queue-followup-actions button {
  min-height: 44px;
  padding-inline: 12px;
}

.queue-panel {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.queue-stats {
  display: block;
}

.today-overview-section {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.today-overview-section + .today-overview-section {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.today-section-heading {
  display: flex;
  min-width: 0;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.today-section-heading > div {
  min-width: 0;
}

.today-section-heading span {
  display: block;
  margin-bottom: 2px;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.today-section-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.35;
}

.today-section-heading > strong {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}

.today-overview-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.today-overview-stat-grid .queue-stat {
  min-width: 0;
  min-height: 96px;
  padding: 10px 12px;
  gap: 4px;
}

.today-overview-stat-grid .queue-stat-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.today-overview-stat-grid .queue-stat-icon {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
}

.today-overview-stat-grid .queue-stat-summary {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.today-overview-stat-grid .queue-stat-details {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.today-overview-stat-grid .queue-stat strong {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 22px;
}

.today-overview-stat-grid .queue-stat strong small,
.today-x-summary-grid strong small {
  font-size: 12px;
}

.today-overview-stat-grid .queue-stat-subdescription {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.today-overview-stat-grid .queue-stat.reservations {
  border-color: rgba(75, 121, 161, 0.24);
  background: #f5f9fc;
}

.today-overview-stat-grid .queue-stat.reservations .queue-stat-icon {
  background: #f9ebe3;
}

.today-overview-stat-grid .queue-stat.tasks {
  border-color: rgba(119, 152, 132, 0.28);
  background: #f6faf7;
}

.today-overview-stat-grid .queue-stat.tasks .queue-stat-icon {
  background: #fff0dc;
}

.today-overview-stat-grid .queue-stat.x-summary {
  border-color: rgba(200, 135, 82, 0.3);
  background: #fff8f1;
}

.today-overview-stat-grid .queue-stat.x-summary .queue-stat-icon {
  background: #e8f3f8;
  color: #355b6b;
  font-family: Arial, sans-serif;
  font-size: 18px;
}

.today-overview-stat-grid .queue-stat.records .queue-stat-icon {
  background: #eaf5e9;
}

.today-reservation-timeline,
.today-task-list,
.today-tomorrow-list {
  display: grid;
  gap: 10px;
}

.today-reservation-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.today-reservation-time {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
  text-align: center;
}

.today-reservation-time time {
  color: var(--ink);
  font-size: 23px;
  font-weight: 900;
}

.today-reservation-time span {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.today-reservation-body {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 14px 16px;
}

.today-reservation-title {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 10px;
}

.today-reservation-title strong {
  overflow-wrap: anywhere;
  font-size: 18px;
}

.today-reservation-title span,
.today-reservation-place,
.today-reservation-notes span,
.today-task-main p,
.today-tomorrow-main span,
.today-tomorrow-main small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.today-reservation-place {
  display: flex;
  min-width: 0;
  gap: 8px;
}

.today-reservation-place b {
  flex: 0 0 auto;
  color: var(--ink);
}

.today-reservation-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.today-reservation-notes > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--surface-soft);
}

.today-reservation-notes b {
  font-size: 12px;
}

.today-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.today-card-actions button,
.today-task-card > button,
.today-tomorrow-card > button,
.today-x-open-button {
  min-height: 44px;
}

.today-task-card {
  display: grid;
  grid-template-columns: minmax(128px, 0.36fr) minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 5px solid #779884;
  border-radius: 10px;
  background: var(--surface);
}

.today-task-card.reservation_gap,
.today-task-card.reservation_candidate {
  border-left-color: #4b79a1;
}

.today-task-type {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.today-task-type span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.today-task-type time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.today-task-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.today-task-main strong {
  overflow-wrap: anywhere;
}

.today-task-main p {
  margin: 0;
}

.today-x-summary-section {
  padding: 16px;
  border: 1px solid rgba(200, 135, 82, 0.28);
  border-radius: 12px;
  background: #fffaf5;
}

.today-x-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.today-x-summary-grid > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 9px;
  background: var(--surface);
}

.today-x-summary-grid > div.total {
  background: #fff1e5;
}

.today-x-summary-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.today-x-summary-grid strong {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--ink);
  font-size: 22px;
}

.today-x-open-button {
  justify-self: start;
  min-width: 180px;
}

.today-tomorrow-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.today-tomorrow-card > time {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.today-tomorrow-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.today-tomorrow-main strong {
  overflow-wrap: anywhere;
}

.today-empty-state {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

:root[data-theme="dark"] .today-overview-stat-grid .queue-stat.reservations,
:root[data-theme="dark"] .today-overview-stat-grid .queue-stat.tasks,
:root[data-theme="dark"] .today-overview-stat-grid .queue-stat.x-summary,
:root[data-theme="dark"] .today-x-summary-section,
:root[data-theme="dark"] .today-x-summary-grid > div.total {
  background: var(--surface-soft);
}

@media (max-width: 760px), (display-mode: standalone) {
  .queue-panel {
    width: 100%;
    padding-bottom: calc(var(--mobile-bottom-nav-height, 72px) + 18px);
  }

  .queue-panel > .panel-header {
    align-items: flex-start;
  }

  .queue-panel > .today-page-header,
  .today-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .today-page-heading {
    gap: 6px;
  }

  .today-page-heading .queue-lead {
    padding-bottom: 0;
  }

  .queue-refresh-button {
    min-width: 0;
  }

  .today-overview-stat-grid,
  .today-reservation-notes,
  .today-x-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-overview-stat-grid .queue-stat {
    min-height: 0;
  }

  .today-reservation-card,
  .today-task-card,
  .today-tomorrow-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-reservation-time {
    align-items: baseline;
    flex-direction: row;
    justify-content: space-between;
    padding: 11px 13px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }

  .today-reservation-time time {
    font-size: 20px;
  }

  .today-card-actions,
  .today-card-actions button,
  .today-task-card > button,
  .today-tomorrow-card > button,
  .today-x-open-button {
    width: 100%;
  }

  .today-tomorrow-card > time {
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
  }

  .today-section-heading {
    align-items: baseline;
  }
}

.daily-report-panel {
  display: grid;
  gap: 14px;
}

.daily-report-lead {
  color: var(--muted);
  line-height: 1.7;
}

.daily-report-settings {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) 150px auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 8px;
  background: #fbf3ea;
  padding: 12px;
}

.daily-report-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  font-weight: 800;
}

.daily-report-toggle input {
  width: 18px;
  min-height: 18px;
}

.daily-report-toggle span {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
}

.daily-report-status {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.daily-report-status:empty {
  display: none;
}

.daily-report-preview {
  display: grid;
  gap: 12px;
}

.daily-report-card,
.daily-report-mini-card,
.daily-report-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.daily-report-encouragement {
  display: grid;
  gap: 5px;
  border-left: 4px solid var(--accent);
  border-top: 1px solid rgba(200, 135, 82, 0.24);
  border-right: 1px solid rgba(200, 135, 82, 0.24);
  border-bottom: 1px solid rgba(200, 135, 82, 0.24);
  background: #fff7ef;
  border-radius: 8px;
  padding: 14px 16px;
}

.daily-report-encouragement span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.daily-report-encouragement strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
}

.daily-report-maru-card {
  border: 1px solid rgba(200, 135, 82, 0.28);
  border-radius: 8px;
  background: #fff7ef;
  padding: 14px;
}

.daily-report-maru-card span {
  display: block;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.daily-report-maru-card strong {
  display: block;
  margin-top: 2px;
  font-size: 17px;
}

.daily-report-maru-card p {
  margin: 8px 0 0;
  color: var(--ink);
  line-height: 1.7;
}

.daily-report-maru-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}

.daily-report-maru-card em {
  display: block;
  margin-top: 8px;
  color: var(--accent-strong);
  font-style: normal;
  font-weight: 900;
}

.daily-report-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.daily-report-focus-card {
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.daily-report-focus-card strong {
  display: block;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.daily-report-focus-card span {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.7;
}

.daily-report-focus-card.first-step {
  background: #fff7ef;
  border-color: rgba(200, 135, 82, 0.38);
}

@media (max-width: 760px) {
  .daily-report-focus-grid {
    grid-template-columns: 1fr;
  }
}

.daily-report-section {
  display: grid;
  gap: 10px;
}

.daily-report-section h4 {
  margin: 0;
  font-size: 16px;
}

.daily-report-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.daily-report-customer-link,
.daily-report-inline-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}

.daily-report-inline-link {
  color: var(--accent-strong);
}

.daily-report-customer-link:hover,
.daily-report-inline-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.daily-report-customer-link:focus-visible,
.daily-report-inline-link:focus-visible {
  outline: 2px solid rgba(184, 121, 74, 0.35);
  outline-offset: 3px;
  border-radius: 6px;
}

.daily-report-card-top span {
  color: var(--accent-strong);
  font-weight: 800;
  white-space: nowrap;
}

.daily-report-card-meta,
.daily-report-mini-card span,
.daily-report-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.daily-report-opening {
  margin-top: 10px;
  border: 1px solid rgba(200, 135, 82, 0.34);
  border-radius: 8px;
  background: #fff7ef;
  padding: 10px 12px;
}

.daily-report-opening b {
  display: block;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 3px;
}

.daily-report-opening span {
  display: block;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.7;
}

.daily-report-card-body {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  line-height: 1.6;
}

.daily-report-card-body b {
  display: inline-block;
  min-width: 84px;
  color: var(--muted);
}

.daily-report-section ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

:root[data-theme="dark"] .daily-report-maru-card {
  background: #261f18;
  border-color: rgba(239, 183, 127, 0.28);
}

:root[data-theme="dark"] .daily-report-encouragement {
  background: #261f18;
  border-color: rgba(239, 183, 127, 0.28);
}

:root[data-theme="dark"] .daily-report-focus-card,
:root[data-theme="dark"] .daily-report-opening {
  background: #1f1a15;
  border-color: rgba(239, 183, 127, 0.28);
}

:root[data-theme="dark"] .daily-report-focus-card.first-step {
  background: #261f18;
}

.queue-item-main,
.queue-title-row,
.queue-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.queue-item-main {
  justify-content: space-between;
}

.queue-title-row {
  align-items: baseline;
  flex-wrap: wrap;
}

.queue-title-row h4 {
  margin: 0;
  font-size: 17px;
}

.queue-type {
  border-radius: 999px;
  background: #edf2f7;
  color: #344861;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.queue-reason,
.queue-meta,
.queue-snippet,
.empty-queue span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.queue-customer {
  margin-top: 4px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
}

.queue-meta,
.queue-snippet {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.queue-reservation-candidate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  border: 1px solid #c8d8e6;
  border-radius: 8px;
  background: #f4f8fb;
  padding: 10px 12px;
  min-width: 0;
}

.queue-reservation-candidate > span {
  color: #486981;
  font-size: 11px;
  font-weight: 900;
}

.queue-reservation-candidate > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.55;
}

.queue-reservation-candidate > small {
  grid-column: 2;
  color: var(--danger);
  font-weight: 800;
  line-height: 1.5;
}

.queue-reservation-candidate.needs-review {
  border-color: #e3c49e;
  background: #fff8ee;
}

:root[data-theme="dark"] .queue-reservation-candidate {
  border-color: #3e586c;
  background: #17232d;
}

:root[data-theme="dark"] .queue-reservation-candidate.needs-review {
  border-color: #755b3f;
  background: #2b2319;
}

@media (max-width: 760px) {
  .queue-reservation-candidate {
    grid-template-columns: 1fr;
  }

  .queue-reservation-candidate > small {
    grid-column: 1;
  }
}

.empty-queue {
  display: grid;
  gap: 4px;
}

.growth-loop-panel {
  display: grid;
  gap: 14px;
}

.growth-loop-lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.growth-loop-rule-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.growth-loop-rule,
.growth-cost-grid > div,
.growth-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 10px;
  display: grid;
  gap: 4px;
}

.growth-loop-rule strong,
.growth-cost-grid strong {
  font-size: 12px;
}

.growth-loop-rule span,
.growth-cost-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.growth-loop-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.growth-stat.primary {
  border-color: rgba(200, 135, 82, 0.32);
  background: #f3fbf7;
}

.growth-stat.urgent {
  border-color: rgba(157, 56, 56, 0.28);
  background: #fff6f4;
}

.growth-stat strong {
  font-size: 23px;
}

.growth-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.growth-loop-cost {
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 8px;
  background: #f6fbf8;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.growth-cost-title {
  font-weight: 900;
}

.growth-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

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

.growth-loop-item {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.growth-loop-item.urgent {
  border-left-color: var(--danger);
}

.growth-loop-item.warn {
  border-left-color: var(--warning);
}

.growth-loop-item.info {
  border-left-color: #4b79a1;
}

.growth-loop-item.ok {
  border-left-color: var(--accent);
}

.growth-loop-main,
.growth-loop-title-row,
.growth-loop-actions,
.growth-loop-meta,
.growth-loop-badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.growth-loop-main {
  justify-content: space-between;
}

.growth-loop-title-row {
  align-items: baseline;
  flex-wrap: wrap;
}

.growth-loop-title-row h4 {
  margin: 0;
  font-size: 17px;
}

.growth-loop-type,
.growth-badge {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.growth-loop-type {
  background: #edf2f7;
  color: #344861;
}

.growth-badge.urgent {
  background: #fff0ef;
  color: var(--danger);
}

.growth-badge.warn {
  background: #fff6df;
  color: #7b5315;
}

.growth-badge.info {
  background: #eef5fb;
  color: #315d82;
}

.growth-loop-customer,
.growth-loop-reason,
.growth-loop-meta,
.growth-loop-next,
.growth-loop-snippet {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.growth-loop-meta,
.growth-loop-badges {
  flex-wrap: wrap;
}

.growth-loop-meter {
  height: 7px;
  border-radius: 999px;
  background: #eef1ee;
  overflow: hidden;
}

.growth-loop-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.growth-loop-next,
.growth-loop-snippet {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.validation-lab-panel {
  display: grid;
  gap: 14px;
}

.validation-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.validation-brief-item,
.validation-stat,
.validation-scenario {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.validation-brief-item {
  display: grid;
  gap: 5px;
  background: #fbfcfa;
}

.validation-brief-item span,
.validation-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.validation-brief-item strong {
  font-size: 13px;
  line-height: 1.5;
}

.validation-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.validation-stat {
  display: grid;
  gap: 4px;
  background: #fbfcfa;
}

.validation-stat.primary {
  border-color: rgba(200, 135, 82, 0.32);
  background: #f3fbf7;
}

.validation-stat.warn {
  border-color: rgba(154, 101, 20, 0.28);
  background: #fff8ed;
}

.validation-stat.block {
  border-color: rgba(157, 56, 56, 0.28);
  background: #fff6f4;
}

.validation-stat strong {
  font-size: 23px;
}

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

.validation-scenario {
  display: grid;
  gap: 10px;
  border-left: 5px solid var(--line);
}

.validation-scenario.pass {
  border-left-color: var(--accent);
}

.validation-scenario.warn {
  border-left-color: var(--warning);
}

.validation-scenario.block {
  border-left-color: var(--danger);
}

.validation-scenario-main,
.validation-title-row,
.validation-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.validation-scenario-main {
  justify-content: space-between;
}

.validation-title-row {
  align-items: baseline;
  flex-wrap: wrap;
}

.validation-title-row h4 {
  margin: 0;
  font-size: 17px;
}

.validation-status {
  border-radius: 999px;
  background: #edf2f7;
  color: #344861;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.validation-scenario.pass .validation-status {
  background: #e9f5ef;
  color: var(--accent-strong);
}

.validation-scenario.warn .validation-status {
  background: #fff4d7;
  color: #765114;
}

.validation-scenario.block .validation-status {
  background: #fff0ef;
  color: var(--danger);
}

.validation-customer,
.validation-reason,
.validation-evidence,
.validation-next {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.validation-evidence,
.validation-next {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.validation-next {
  color: var(--ink);
  font-weight: 800;
}

.validation-workflow {
  border: 1px solid rgba(200, 135, 82, 0.24);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #f6fbf8;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.validation-workflow.warn {
  border-left-color: var(--warning);
  background: #fffaf0;
}

.validation-workflow.block {
  border-left-color: var(--danger);
  background: #fff7f6;
}

.validation-workflow-header,
.validation-task,
.validation-task-title-row,
.validation-task-meta,
.validation-task-actions,
.validation-principles {
  display: flex;
  align-items: center;
  gap: 10px;
}

.validation-workflow-header {
  justify-content: space-between;
}

.validation-workflow h4,
.validation-task h5,
.validation-workflow p {
  margin: 0;
}

.validation-workflow p,
.validation-task-reason {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.validation-task-list {
  display: grid;
  gap: 8px;
}

.validation-task {
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.validation-task-number {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--surface-soft);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.validation-task-main {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}

.validation-task-title-row {
  align-items: baseline;
  flex-wrap: wrap;
}

.validation-task-type {
  border-radius: 999px;
  background: #edf2f7;
  color: #344861;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.validation-task-meta,
.validation-principles {
  flex-wrap: wrap;
}

.validation-task-meta span,
.validation-principles span {
  border-radius: 999px;
  background: #f3f5f2;
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.validation-task-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.validation-task-actions button,
.validation-workflow-header button {
  min-height: 34px;
  padding: 6px 9px;
}

.dm-workspace-view {
  display: grid;
  max-width: 1240px;
  gap: 12px;
}

.dm-workspace-view.hidden {
  display: none !important;
}

.dm-page-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-soft));
  padding: 8px;
  scrollbar-width: thin;
}

.dm-page-tabs .secondary-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 14px;
  white-space: nowrap;
}

.dm-page-tabs .secondary-button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: 0 8px 18px rgba(189, 116, 62, 0.12);
}

.dm-workspace-view .x-reply-view,
.dm-workspace-view .x-dm-import-view,
.dm-workspace-view .dm-sent-history-view {
  max-width: none;
}

.x-reply-view {
  max-width: 1240px;
}

.x-reply-panel {
  display: grid;
  gap: 14px;
}

.external-links-view {
  max-width: 1180px;
}

.external-links-panel {
  display: grid;
  gap: 14px;
}

.external-links-lead,
.external-link-status {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.external-links-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.4fr);
  gap: 14px;
  align-items: start;
}

.external-links-shortcuts,
.external-link-settings {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px;
}

.external-links-shortcuts h4,
.external-link-settings h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.external-link-form {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
}

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

.external-link-card,
.external-links-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 14px;
}

.external-link-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.external-link-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.external-link-main strong {
  color: var(--ink);
  font-size: 15px;
}

.external-link-main span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-link-title-button {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-link-title-button:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.external-link-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.external-links-empty {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.external-links-empty strong {
  color: var(--ink);
}

.x-dm-import-view {
  max-width: 1240px;
}

.x-dm-import-panel {
  display: grid;
  gap: 10px;
}

.x-dm-resync-button {
  min-height: 36px;
  padding: 6px 9px;
  font-size: 13px;
}

.x-dm-status-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title actions"
    "statuses statuses"
    "message message";
  align-items: start;
  gap: 12px 16px;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.x-dm-status-bar > h3 {
  grid-area: title;
  align-self: center;
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.2;
}

.x-dm-status-bar.has-error {
  background: transparent;
}

.x-dm-status-items {
  grid-area: statuses;
  display: grid;
  grid-template-columns: minmax(210px, 1.05fr) minmax(170px, 0.9fr) minmax(360px, 1.8fr);
  gap: 12px;
  width: min(100%, 940px);
  min-width: 0;
}

.x-dm-header-status-card {
  display: flex;
  min-width: 0;
  min-height: 82px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 13px 18px;
  box-shadow: var(--shadow-card);
}

.x-dm-status-bar.has-error .x-dm-header-connection-card {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.x-dm-connection-status,
.x-dm-status-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

.x-dm-status-item {
  border-left: 1px solid var(--line);
  padding-left: 14px;
}

.x-dm-connection-status strong,
.x-dm-status-item strong {
  color: var(--ink);
  font-size: inherit;
  font-weight: 800;
}

.x-dm-header-connection-card .x-dm-connection-status {
  width: 100%;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
}

.x-dm-header-connection-card .x-dm-connection-status strong {
  margin-left: auto;
  color: var(--muted);
  font-size: 15px;
}

.x-dm-header-sync-card {
  display: grid;
  align-content: center;
  gap: 3px;
}

.x-dm-header-sync-card > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.x-dm-header-sync-card > strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.15;
}

.x-dm-header-pin-card {
  justify-content: space-between;
  gap: 16px;
}

.x-dm-header-pin-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.x-dm-header-pin-copy > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.x-dm-header-pin-copy > div > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.x-dm-header-pin-copy > div > span {
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 850;
}

.x-dm-header-pin-copy > div > span.is-unset {
  color: var(--color-warning-text);
}

.x-dm-header-pin-copy > div > span.is-ready {
  color: var(--color-success-text);
}

.x-dm-header-pin-copy > small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.x-dm-status-note {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.x-dm-connection-dot {
  flex: 0 0 auto;
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-text-muted);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.x-dm-connection-status.connected {
  color: var(--color-success-text);
}

.x-dm-connection-status.connected .x-dm-connection-dot {
  background: var(--color-success-text);
}

.x-dm-connection-status.connected .x-dm-connection-dot::after {
  content: "✓";
}

.x-dm-header-connection-card .x-dm-connection-status.connected strong {
  color: var(--color-success-text);
}

.x-dm-connection-status.error,
.x-dm-connection-status.error strong {
  color: var(--color-danger-text);
}

.x-dm-connection-status.error .x-dm-connection-dot {
  background: var(--color-danger-text);
}

.x-dm-status-actions {
  grid-area: actions;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-self: end;
  gap: 12px;
}

.x-dm-status-bar .x-chat-unlock-button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 13px;
  border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
  color: var(--accent-text);
  white-space: nowrap;
}

.x-dm-status-bar .x-dm-resync-button.primary-button {
  min-height: 44px;
  padding: 9px 16px;
  white-space: nowrap;
}

.x-dm-status-bar .x-dm-resync-button.primary-button::after {
  content: "↗";
  margin-left: 8px;
  font-size: 15px;
}

.x-dm-status-bar .x-dm-help-details {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.x-dm-status-bar .x-dm-help-details > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--ink);
  line-height: 20px;
  white-space: nowrap;
}

.x-dm-status-bar .x-dm-help-details > summary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.x-dm-status-bar .x-dm-help-details > summary:hover,
.x-dm-status-bar .x-dm-help-details > summary:focus-visible {
  background: var(--accent-soft);
}

.x-dm-status-bar .x-dm-help-details > summary::after {
  content: none;
}

.x-dm-help-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: min(560px, calc(100vw - 56px));
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-card);
}

.x-dm-help-popover > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.x-dm-status-bar .x-dm-help-details .dm-workflow-guide {
  margin: 0;
}

.x-dm-lead {
  max-width: 860px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.x-dm-import-controls {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(140px, 0.4fr) minmax(260px, 1fr);
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 12px;
}

.x-dm-import-controls label {
  display: grid;
  gap: 5px;
}

.x-dm-import-controls label span,
.x-dm-import-controls p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.x-dm-import-controls p {
  margin: 0;
}

.x-dm-developer-fetch-status {
  display: block;
  margin-top: 6px;
  color: var(--color-text-secondary);
  font-weight: 700;
}

.x-dm-import-controls select,
.x-dm-import-controls input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 8px 11px;
}

.x-dm-help-details,
.x-dm-developer-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 0;
}

.x-dm-help-details > summary,
.x-dm-developer-details > summary {
  cursor: pointer;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  list-style: none;
  padding: 12px 14px;
}

.x-dm-help-details > summary::-webkit-details-marker,
.x-dm-developer-details > summary::-webkit-details-marker {
  display: none;
}

.x-dm-help-details > summary::after,
.x-dm-developer-details > summary::after {
  content: "＋";
  float: right;
  color: var(--muted);
}

.x-dm-help-details[open] > summary::after,
.x-dm-developer-details[open] > summary::after {
  content: "−";
}

.x-dm-help-details .dm-workflow-guide,
.x-dm-developer-details .x-dm-import-controls,
.x-dm-developer-actions {
  margin: 0 12px 12px;
}

.x-dm-developer-details {
  background: var(--surface-soft);
}

.x-dm-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 10px;
}

.x-dm-status-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfa;
  padding: 12px;
}

.x-dm-status-card span,
.x-dm-status-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.x-dm-status-card strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
}

.x-dm-status-message {
  grid-area: message;
  min-height: 0;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}

.x-dm-status-message:empty {
  display: none;
}

.x-dm-status-bar.has-error .x-dm-status-message {
  color: var(--color-danger-text);
}

@media (min-width: 761px) and (max-width: 980px) {
  .x-dm-status-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .x-dm-header-pin-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 981px) and (max-width: 1199px) {
  .x-dm-status-bar {
    width: calc(100vw - 310px);
    max-width: 100%;
  }

  .x-dm-status-items {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 1.8fr);
    width: 100%;
  }

  .x-dm-header-status-card {
    padding-inline: 14px;
  }

  .x-dm-header-pin-card {
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .x-dm-status-bar {
    align-items: flex-start;
  }

  .x-dm-status-items {
    flex-basis: 100%;
  }

  .x-dm-status-actions {
    margin-left: auto;
  }

  .x-dm-help-popover {
    width: min(520px, calc(100vw - 48px));
  }
}

.x-dm-status-message.busy::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border: 2px solid rgba(184, 121, 74, 0.24);
  border-top-color: var(--accent);
  border-radius: 999px;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}

.x-dm-work-summary {
  display: none;
}

@media (min-width: 981px) {
  .x-dm-work-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    min-width: 0;
  }

  .x-dm-work-summary-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    padding: 8px 12px;
    text-align: left;
  }

  .x-dm-work-summary-card:hover,
  .x-dm-work-summary-card:focus-visible,
  .x-dm-work-summary-card.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-text);
    outline: none;
  }

  .x-dm-work-summary-icon {
    width: 20px;
    height: 20px;
    justify-self: center;
  }

  .x-dm-work-summary-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .x-dm-work-summary-copy strong,
  .x-dm-work-summary-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-work-summary-copy strong {
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
  }

  .x-dm-work-summary-copy small {
    color: var(--muted);
    font-size: 11px;
  }

  .x-dm-work-summary-card > em {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: var(--ink);
    font-size: 22px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
  }

  .x-dm-work-summary-card > em small {
    font-size: 11px;
  }

  .x-dm-work-summary-card.is-active .x-dm-work-summary-copy strong,
  .x-dm-work-summary-card.is-active > em {
    color: var(--accent-text);
  }
}

/* PC parity with the current smartphone Today workspace. */
@media (min-width: 761px) {
  .today-overview-stat-grid .queue-stat.reservations .queue-stat-icon,
  .today-overview-stat-grid .queue-stat.tasks .queue-stat-icon,
  .today-reservations-section .today-dashboard-heading-icon.calendar-days,
  .today-reservations-section .today-dashboard-heading-icon.calendar-clock {
    font-size: 0;
  }

  .today-overview-stat-grid .queue-stat.reservations .queue-stat-icon::before,
  .today-overview-stat-grid .queue-stat.tasks .queue-stat-icon::before,
  .today-reservations-section .today-dashboard-heading-icon.calendar-days::before,
  .today-reservations-section .today-dashboard-heading-icon.calendar-clock::before {
    display: block;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
  }

  .today-overview-stat-grid .queue-stat.reservations .queue-stat-icon::before,
  .today-reservations-section .today-dashboard-heading-icon.calendar-days::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c45745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 13h.01'/%3E%3Cpath d='M12 13h.01'/%3E%3Cpath d='M16 13h.01'/%3E%3Cpath d='M8 17h.01'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M16 17h.01'/%3E%3C/svg%3E");
  }

  .today-overview-stat-grid .queue-stat.tasks .queue-stat-icon::before,
  .today-reservations-section .today-dashboard-heading-icon.calendar-clock::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e8d78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14v2.2l1.6 1'/%3E%3Cpath d='M16 2v3'/%3E%3Cpath d='M21 7.338V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h2.338'/%3E%3Cpath d='M3 9h5.859'/%3E%3Cpath d='M8 2v3'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E");
  }

  .today-overview-stat-grid .queue-stat.x-summary .queue-stat-x-icon {
    color: #1f1f1f;
  }

  .today-reservation-row-course-summary,
  .today-tomorrow-row-course-summary {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 12px;
  }

  .today-reservation-row-course-summary .today-reservation-row-course {
    min-width: 0;
    padding-left: 0;
  }

  .today-reservation-row-course-summary .today-reservation-row-course::before {
    display: none;
  }

  .today-reservation-row-amount {
    flex: 0 0 auto;
    color: var(--ink);
    font-weight: 900;
    white-space: nowrap;
  }

  .today-tomorrow-card .today-tomorrow-row-place {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .today-tomorrow-card .today-tomorrow-row-course-summary {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  .today-mobile-daily-sales-total {
    min-height: 42px;
    display: grid;
    place-items: center;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
    padding: 9px 14px;
  }

  .today-mobile-daily-sales-total p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .today-mobile-daily-sales-total strong {
    color: var(--ink);
    font-size: 14px;
  }

  .today-task-card {
    grid-template-columns: 24px minmax(150px, 1fr) minmax(86px, auto) 54px;
  }
}

.x-dm-layout {
  display: grid;
  grid-template-columns: minmax(200px, 0.65fr) minmax(530px, 1.87fr) minmax(210px, 0.7fr);
  gap: 12px;
  align-items: start;
}

@media (max-width: 1180px) and (min-width: 961px) {
  .x-dm-layout {
    grid-template-columns: minmax(140px, 0.65fr) minmax(425px, 2.12fr) minmax(145px, 0.72fr);
    gap: 8px;
  }
}

.x-dm-column,
.x-dm-unlinked-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.x-dm-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.x-dm-section-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

.x-dm-section-heading span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.x-dm-conversation-list,
.x-dm-message-list,
.x-dm-conversation-detail {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.x-dm-inbox-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.x-dm-queue-filter-tabs {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.x-dm-history-switch {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.x-dm-history-switch > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.x-dm-history-switch > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.x-dm-history-tab {
  min-width: 0;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 7px;
}

.x-dm-history-tab em {
  font-size: 10px;
  font-style: normal;
}

.x-dm-history-tab:hover,
.x-dm-history-tab:focus-visible,
.x-dm-history-tab.is-active {
  border-color: var(--line);
  background: var(--surface);
  color: var(--accent-text);
  outline: none;
}

.x-dm-tabs-slot {
  min-width: 0;
  margin: 0 0 10px;
}

.x-dm-inbox-tab {
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  padding: 7px 5px;
  text-align: center;
}

.x-dm-inbox-tab span {
  overflow-wrap: anywhere;
}

.x-dm-inbox-tab em {
  color: inherit;
  font-size: 11px;
  font-style: normal;
}

.x-dm-inbox-tab:hover,
.x-dm-inbox-tab:focus-visible,
.x-dm-inbox-tab.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  outline: none;
}

.x-dm-queue-card {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 11px;
  text-align: left;
}

.x-dm-queue-card-wrap {
  position: relative;
  min-width: 0;
}

.x-dm-queue-card-wrap.has-profile-link .x-dm-queue-card {
  padding-right: 36px;
}

.x-dm-queue-card-wrap.has-card-action .x-dm-queue-card {
  padding-right: 11px;
}

.x-dm-queue-card-wrap.has-profile-link .x-dm-queue-card-top {
  gap: 3px;
}

.x-dm-queue-card-wrap.has-card-action .x-dm-queue-card-top {
  gap: 3px;
  padding-right: 25px;
}

.x-dm-queue-profile-button {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 6px;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.x-dm-queue-profile-button > svg {
  width: 13px;
  height: 13px;
  flex: none;
  fill: currentColor;
}

.x-dm-queue-profile-button:hover,
.x-dm-queue-profile-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 2px;
  text-decoration: none;
}

.x-dm-all-history-menu-button {
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  padding: 0;
}

.x-dm-all-history-card .x-dm-queue-card-top em.is-completed {
  background: var(--surface-soft);
  color: var(--muted);
}

.x-dm-all-history-card .x-dm-queue-card-top em {
  flex: none;
}

.x-dm-all-history-card .x-dm-queue-card-top b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x-dm-all-history-card .x-dm-queue-card-identity > strong {
  flex: 0 1 auto;
}

.x-dm-all-history-card .x-dm-queue-meta time {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x-dm-queue-card:hover,
.x-dm-queue-card:focus-visible,
.x-dm-queue-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.x-dm-queue-card.is-active {
  border-left-width: 4px;
}

.x-dm-queue-card-top,
.x-dm-queue-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.x-dm-queue-card-top em,
.x-dm-queue-card-top b {
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.3;
  padding: 3px 7px;
  white-space: nowrap;
}

.x-dm-queue-card-top em {
  background: color-mix(in srgb, var(--accent-soft) 88%, var(--surface));
  color: var(--accent-text);
}

.x-dm-queue-card-top b {
  background: var(--surface-soft);
  color: var(--muted);
}

.x-dm-queue-card-identity,
.x-dm-queue-card-identity > strong,
.x-dm-queue-handle,
.x-dm-queue-excerpt,
.x-dm-queue-meta small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.x-dm-queue-card-identity {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.x-dm-queue-card-identity > strong,
.x-dm-queue-card-identity > .x-dm-queue-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-dm-queue-card-identity > strong {
  flex: 0 0 auto;
}

.x-dm-queue-card-identity > .x-dm-queue-handle {
  flex: 1 1 auto;
}

.x-dm-queue-handle,
.x-dm-queue-meta {
  color: var(--muted);
  font-size: 11px;
}

.x-dm-queue-excerpt {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.x-dm-queue-meta {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.x-dm-queue-meta time {
  white-space: nowrap;
}

.x-dm-queue-notice {
  display: grid;
  gap: 4px;
  border: 1px solid var(--color-danger-border);
  border-radius: 10px;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  font-size: 11px;
  padding: 9px;
}

.x-dm-queue-notice .text-button {
  justify-self: start;
}

.x-dm-queue-empty-count {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.x-dm-relationship-account {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 12px;
  text-align: left;
}

.x-dm-relationship-account:hover,
.x-dm-relationship-account:focus-visible,
.x-dm-relationship-account.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.x-dm-relationship-account.is-active {
  border-left-width: 4px;
}

.x-dm-relationship-account-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.x-dm-relationship-account-top strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.x-dm-relationship-account-top em {
  flex: none;
  color: var(--accent-text);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.x-dm-relationship-account > span,
.x-dm-relationship-account small {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.x-dm-conversation {
  display: grid;
  width: 100%;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  cursor: pointer;
  text-align: left;
}

.x-dm-conversation-wrap {
  position: relative;
  min-width: 0;
}

.x-dm-conversation-wrap .x-dm-conversation {
  padding-right: 56px;
}

.x-dm-conversation-menu-button {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--color-border-strong, #d6b89a);
  border-radius: 9px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(80, 55, 35, 0.08);
}

.x-dm-conversation-menu-button:hover,
.x-dm-conversation-menu-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: none;
}

.x-dm-conversation:hover {
  border-color: var(--border-strong);
  background: var(--surface-soft);
}

.x-dm-conversation.active {
  border-color: var(--accent);
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
}

.x-dm-conversation.unreplied:not(.active) {
  border-left: 4px solid var(--danger);
}

.x-dm-conversation.pinned:not(.active) {
  border-color: var(--color-pin-border);
  border-left-color: var(--color-pin-border);
  background: var(--color-pin-bg);
  box-shadow: 0 10px 22px rgba(150, 112, 22, 0.12);
}

.x-dm-conversation.pinned.active {
  border-color: var(--color-pin-border);
  border-left-color: var(--color-pin-border);
  background: var(--color-pin-bg);
  box-shadow: 0 10px 24px rgba(150, 112, 22, 0.16);
}

.x-dm-conversation span,
.x-dm-conversation small {
  min-width: 0;
}

.x-dm-conversation small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.x-dm-conversation-top,
.x-dm-conversation-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.x-dm-conversation-identity {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
}

.x-dm-conversation-identity strong,
.x-dm-conversation-identity > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-dm-conversation-identity strong {
  flex: 0 1 auto;
}

.x-dm-conversation-identity > span {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 12px;
}

.x-dm-conversation-badges {
  display: inline-flex;
  flex: none;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.x-dm-conversation-top strong,
.x-dm-detail-head strong,
.x-dm-unlinked-item strong {
  color: var(--ink);
  font-weight: 800;
}

.x-dm-conversation em {
  color: var(--danger);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.x-dm-conversation em.muted {
  color: var(--muted);
}

.x-dm-conversation em.pin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border: 1px solid var(--color-pin-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-pin-bg) 82%, var(--surface));
  color: var(--color-pin-text);
  line-height: 1.2;
}

.x-dm-conversation em.pin span {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
}

.x-dm-detail-head,
.x-dm-detail-actions,
.x-dm-link-row,
.x-dm-unlinked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.x-dm-detail-actions button {
  min-height: 44px;
}

.x-dm-detail-actions .x-dm-complete-button {
  margin-left: auto;
  white-space: normal;
}

.x-dm-detail-actions.x-dm-history-completion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 12px;
}

.x-dm-history-completion .x-dm-complete-button {
  width: 100%;
  min-height: 48px;
  margin-left: 0;
}

.x-dm-relationship-status {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.x-dm-relationship-status strong {
  color: var(--ink);
}

.x-dm-relationship-status span,
.x-dm-relationship-status small {
  color: var(--muted);
  line-height: 1.5;
}

.x-dm-relationship-initial-dm {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.x-dm-mobile-reply-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.x-dm-reply-draft-composer {
  min-width: 0;
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.x-dm-reply-draft-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.x-dm-reply-draft-heading > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.x-dm-reply-draft-heading h5 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.x-dm-reply-draft-heading small,
.x-dm-reply-draft-actions small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.x-dm-reply-draft-heading > span {
  flex: 0 0 auto;
  max-width: 44%;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.x-dm-reply-draft-composer textarea {
  width: 100%;
  min-width: 0;
  min-height: 132px;
  resize: vertical;
}

.x-dm-reply-draft-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.x-dm-reply-draft-actions .secondary-button {
  flex: 0 0 auto;
  min-height: 44px;
}

.x-dm-reply-draft-status {
  min-height: 1.55em;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.x-dm-reply-draft-status.is-success {
  color: var(--ok);
}

.x-dm-reply-draft-status.is-error {
  color: var(--danger);
}

.x-dm-mobile-reply-panel .today-reply-variant-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.x-dm-mobile-reply-panel .today-reply-variant {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.x-dm-mobile-reply-panel .today-reply-variant > .secondary-button {
  width: 100%;
  min-height: 44px;
  align-self: end;
  white-space: normal;
}

.x-dm-relationship-initial-dm .today-reply-variant-list {
  grid-template-columns: 1fr;
}

.x-dm-relationship-initial-dm .today-reply-loading {
  min-height: 84px;
}

.x-dm-detail-head {
  justify-content: space-between;
  margin-bottom: 4px;
}

.x-dm-detail-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.x-dm-detail-head > div.x-dm-detail-identity {
  display: flex;
  flex: 1 1 190px;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
}

.x-dm-detail-identity strong,
.x-dm-detail-identity span {
  white-space: nowrap;
}

.x-dm-detail-identity span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x-dm-detail-head span,
.x-dm-unlinked-item span,
.x-dm-unlinked-item small {
  color: var(--muted);
}

.x-dm-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.badge.danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.badge.success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.x-dm-link-row {
  align-items: flex-end;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 12px;
}

.x-dm-link-disclosure {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.x-dm-link-disclosure > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
  align-items: center;
  gap: 2px 12px;
  padding: 9px 12px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.x-dm-link-disclosure > summary::-webkit-details-marker {
  display: none;
}

.x-dm-link-disclosure > summary strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x-dm-link-disclosure > summary small {
  grid-column: 1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.x-dm-link-disclosure > summary::after {
  content: "開く";
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
}

.x-dm-link-disclosure[open] > summary {
  border-bottom: 1px solid var(--line);
}

.x-dm-link-disclosure[open] > summary::after {
  content: "閉じる";
}

.x-dm-link-disclosure .x-dm-link-row {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.x-dm-customer-link {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.x-dm-customer-link-slot:not(:empty) {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.x-dm-recent-posts-slot:not(:empty) {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.x-dm-recent-posts-slot > .x-dm-recent-posts {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.x-dm-recent-posts-slot .x-dm-recent-posts-heading {
  align-items: flex-start;
  flex-direction: column;
}

.x-dm-recent-posts-slot .x-dm-recent-post-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.x-dm-recent-posts-slot .x-dm-recent-post-actions > * {
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.x-dm-customer-link:has(.x-dm-link-disclosure[open]) > .x-dm-auto-link-note:not(.danger, .candidate) {
  display: none;
}

.x-dm-customer-info-column .x-dm-link-disclosure > summary strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.x-dm-auto-link-note {
  display: grid;
  gap: 3px;
  border: 1px solid var(--color-success-border);
  border-radius: 12px;
  background: var(--color-success-bg);
  color: var(--ink);
  padding: 10px 12px;
  line-height: 1.5;
}

.x-dm-auto-link-note strong {
  font-weight: 800;
}

.x-dm-auto-link-note.candidate {
  border-color: var(--color-pin-border);
  background: color-mix(in srgb, var(--color-pin-bg) 72%, var(--surface));
  color: var(--ink);
}

.x-dm-auto-link-note.danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--ink);
}

.x-dm-link-hint {
  color: var(--color-accent-deep) !important;
  font-weight: 700;
}

.x-dm-link-hint.danger {
  color: var(--color-danger-text) !important;
}

.x-dm-link-row label {
  flex: 1 1 220px;
}

.x-dm-link-row select,
.x-dm-unlinked-actions select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
}

.x-dm-link-row button,
.x-dm-unlinked-actions button {
  min-height: 44px;
}

.x-dm-message {
  display: grid;
  gap: 5px;
  justify-self: start;
  width: min(82%, 720px);
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 12px;
  line-height: 1.6;
}

.x-dm-message.outgoing {
  justify-self: end;
  border-color: var(--color-success-border);
  border-radius: 14px 14px 5px 14px;
  background: var(--color-success-bg);
}

.x-dm-message-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 12px;
}

.x-dm-message-body {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.x-dm-date-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.x-dm-date-separator::before,
.x-dm-date-separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.x-dm-latest-unreplied {
  justify-self: start;
  border-radius: 999px;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  padding: 4px 9px;
}

.x-dm-empty {
  display: grid;
  gap: 4px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  padding: 16px;
  line-height: 1.6;
}

.x-dm-empty strong {
  color: var(--ink);
}

.x-dm-empty.small {
  padding: 12px;
}

.x-dm-customer-info-list {
  display: grid;
  margin: 0;
}

.x-dm-customer-identity {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--line);
}

.x-dm-customer-identity strong {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.x-dm-customer-identity span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.x-dm-customer-identity span.is-empty {
  font-weight: 600;
}

.x-dm-customer-info-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.x-dm-customer-info-item:first-child {
  padding-top: 11px;
}

.x-dm-customer-info-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.x-dm-customer-info-item dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.x-dm-customer-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.x-dm-customer-profile-head dt {
  min-width: 0;
}

.x-dm-customer-profile-edit {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 8px;
  font-size: 12px;
  white-space: nowrap;
}

.x-dm-customer-info-item dd {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.x-dm-customer-info-item dd small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.x-dm-customer-info-item.is-empty dd,
.x-dm-customer-info-item dd small.is-empty {
  color: var(--muted);
  font-weight: 600;
}

.x-dm-customer-profile-editor {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.x-dm-customer-profile-editor textarea {
  width: 100%;
  min-width: 0;
  min-height: 96px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  resize: vertical;
}

.x-dm-customer-profile-editor textarea:focus-visible {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 1px;
}

.x-dm-customer-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.x-dm-customer-profile-actions button {
  min-height: 44px;
  padding: 7px 10px;
}

.x-dm-customer-profile-editor > small {
  min-height: 1.4em;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.x-dm-customer-profile-item.is-editing > dd > [data-xdm-customer-profile-value] {
  display: none;
}

.x-dm-customer-response-status {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.x-dm-customer-response-status h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.x-dm-customer-response-row {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.x-dm-customer-response-row > span,
.x-dm-customer-response-row > label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.x-dm-customer-response-row > strong {
  font-size: 14px;
  line-height: 1.5;
}

.x-dm-customer-response-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.x-dm-next-response-date-button {
  display: grid;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  padding: 9px 11px;
  cursor: pointer;
  text-align: left;
}

.x-dm-customer-response-controls .x-dm-next-response-date-button {
  flex: 1 1 150px;
}

.x-dm-next-response-date-button:hover,
.x-dm-next-response-date-button:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: 3px solid color-mix(in srgb, var(--accent) 26%, transparent);
  outline-offset: 2px;
}

.x-dm-next-response-date-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.x-dm-next-response-date-button > strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.x-dm-next-response-date-button > small {
  grid-column: auto;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.x-dm-next-response-date-picker {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.x-dm-customer-response-controls button {
  min-height: 38px;
  padding: 7px 10px;
  white-space: nowrap;
}

.x-dm-customer-response-row > small {
  min-height: 1.4em;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .x-dm-next-response-date-button {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .x-dm-next-response-date-button > strong {
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .x-dm-next-response-date-button > small {
    justify-self: start;
  }
}

.x-dm-recent-posts {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.x-dm-recent-posts-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.x-dm-recent-posts-heading h5 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.x-dm-recent-posts-heading span,
.x-dm-recent-post-status span,
.x-dm-recent-post time,
.x-dm-recent-post-link-unavailable {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.x-dm-recent-post-status {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.x-dm-recent-post-status strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.x-dm-recent-post-status.is-error {
  border: 1px solid rgba(180, 71, 61, 0.24);
  background: rgba(180, 71, 61, 0.06);
}

.x-dm-recent-post-status .secondary-button {
  width: fit-content;
  min-height: 40px;
  margin-top: 4px;
}

.x-dm-recent-post-list {
  display: grid;
  gap: 9px;
}

.x-dm-recent-post {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.x-dm-recent-post.is-reference-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.x-dm-recent-post-text,
.x-dm-recent-post-details p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.x-dm-recent-post-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.x-dm-recent-post-details {
  min-width: 0;
}

.x-dm-recent-post-details summary,
.x-dm-recent-post-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.x-dm-recent-post-details p {
  margin-top: 7px;
}

.text-button.x-dm-recent-post-link {
  min-height: 44px;
  padding: 7px 0;
}

.x-dm-recent-post-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.x-dm-recent-post-actions .secondary-button {
  min-height: 44px;
}

.x-dm-post-reply-results {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.x-dm-post-reply-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.x-dm-post-reply-heading h6 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.x-dm-post-reply-heading span,
.x-dm-post-reply-note,
.x-dm-post-reply-status span,
.x-dm-post-reply-editor small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.x-dm-post-reply-note {
  margin: 0;
}

.x-dm-post-reply-status {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.x-dm-post-reply-status.is-error {
  border: 1px solid rgba(180, 71, 61, 0.24);
  background: rgba(180, 71, 61, 0.06);
}

.x-dm-post-reply-status .secondary-button {
  width: fit-content;
  min-height: 40px;
}

.x-dm-post-reply-variant-list {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.x-dm-post-reply-editor {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.x-dm-post-reply-editor label {
  display: grid;
  gap: 3px;
}

.x-dm-post-reply-editor textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
}

.x-dm-post-reply-editor .secondary-button {
  width: fit-content;
}

.x-dm-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 960px) and (min-width: 761px) {
  .x-dm-layout {
    grid-template-columns: minmax(240px, 0.8fr) minmax(360px, 1.2fr);
  }

  .x-dm-customer-info-column {
    grid-column: 2;
  }
}

.x-dm-unreplied-mode .panel-header .button-row,
.x-dm-unreplied-mode .x-dm-import-controls,
.x-dm-unreplied-mode .dm-workflow-guide,
.x-dm-unreplied-mode .x-dm-status-grid,
.x-dm-unreplied-mode .x-dm-status-message:empty,
.x-dm-unreplied-mode .x-dm-unlinked-panel {
  display: none;
}

.x-dm-unreplied-mode .x-dm-layout {
  margin-top: 4px;
}

.x-dm-unreplied-mode .x-dm-conversation-list {
  max-height: 620px;
}

.x-dm-unlinked-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.x-dm-unlinked-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.x-dm-unlinked-item > div:first-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.x-dm-unlinked-actions {
  justify-content: flex-end;
  min-width: 220px;
}

.dm-sent-history-view {
  max-width: 1240px;
}

.dm-sent-history-panel,
.dm-sent-history-list {
  display: grid;
  gap: 12px;
}

.dm-sent-history-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.dm-sent-history-tabs-slot,
.dm-sent-history-content {
  min-width: 0;
}

.dm-sent-history-tabs-slot {
  margin-bottom: 0;
}

.dm-sent-history-content {
  display: grid;
  align-content: start;
  gap: 12px;
}

.dm-sent-history-lead {
  max-width: 760px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.dm-sent-history-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(160px, 0.8fr) minmax(180px, 0.9fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.dm-sent-history-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dm-sent-history-filters span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .dm-sent-history-filters {
    grid-template-columns: 1fr;
  }
}

.dm-sent-history-empty {
  display: grid;
  gap: 4px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--muted);
  line-height: 1.6;
  padding: 16px;
}

.dm-sent-history-empty strong {
  color: var(--ink);
}

.dm-sent-history-empty.error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.dm-sent-history-item {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.dm-sent-history-head,
.dm-sent-history-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dm-sent-history-head > div {
  display: grid;
  gap: 2px;
}

.dm-sent-history-head strong {
  color: var(--ink);
  font-weight: 800;
}

.dm-sent-history-head span,
.dm-sent-history-head time,
.dm-sent-history-foot span,
.dm-sent-history-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.dm-sent-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dm-sent-history-grid > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 10px;
}

.dm-sent-history-grid p {
  margin: 4px 0 0;
  color: var(--ink);
  line-height: 1.65;
  white-space: pre-wrap;
}

.dm-settings-note {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
}

.dm-settings-note strong {
  color: var(--ink);
  font-weight: 800;
}

.x-reply-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.x-reply-lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.x-reply-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.x-reply-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.x-reply-stat.primary {
  border-color: rgba(200, 135, 82, 0.32);
  background: #f3fbf7;
}

.x-reply-stat.urgent {
  border-color: rgba(157, 56, 56, 0.28);
  background: #fff6f4;
}

.x-reply-stat strong {
  font-size: 23px;
}

.x-reply-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.x-reply-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.x-reply-flow > div,
.x-reply-column,
.x-reply-meta-card,
.x-reply-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.x-reply-flow > div {
  padding: 10px;
  display: grid;
  gap: 4px;
}

.x-reply-flow strong {
  font-size: 12px;
}

.x-reply-flow span,
.x-reply-column-header span,
.x-reply-meta-card,
.x-reply-empty span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.x-reply-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.x-reply-context-column[hidden],
.x-reply-draft-column[hidden] {
  display: none;
}

.x-reply-column {
  min-width: 0;
  padding: 12px;
  display: grid;
  gap: 12px;
}

.x-reply-column-header,
.x-reply-item-top,
.x-reply-meta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.x-reply-list {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow: auto;
  padding-right: 2px;
}

.x-reply-item {
  width: 100%;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  text-align: left;
  display: grid;
  gap: 6px;
  cursor: pointer;
}

.x-reply-item.active {
  border-color: var(--accent);
  border-left-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(200, 135, 82, 0.12);
}

.x-reply-item.candidate {
  border-left-color: #4b79a1;
}

.x-reply-item.drafted {
  border-left-color: var(--warning);
}

.x-reply-item.sent {
  border-left-color: var(--accent);
}

.x-reply-item.hold {
  border-left-color: #777d87;
}

.x-reply-item-sub,
.x-reply-item-body,
.x-reply-item-date {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.x-reply-priority {
  border-radius: 999px;
  background: #edf2f7;
  color: #344861;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.x-reply-priority.high {
  background: #fff0ef;
  color: var(--danger);
}

.x-reply-priority.low {
  background: #eef5fb;
  color: #315d82;
}

.x-reply-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.x-reply-selected-meta,
.x-reply-checks {
  display: grid;
  gap: 8px;
}

/* spec §19: X返信3案カード */
.x-reply-variants {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}
.x-reply-variant {
  border: 1px solid var(--border, #d8dee3);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  background: var(--surface, #fff);
}
.x-reply-variant.selected {
  border-color: var(--accent, #c88752);
  box-shadow: 0 0 0 2px rgba(200, 135, 82, 0.18);
}
.x-reply-variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.x-reply-variant-sales {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef3f1;
}
.x-reply-variant-sales.warn { background: #fff4e0; }
.x-reply-variant-sales.danger { background: #fde7e7; }
.x-reply-variant-aim {
  font-size: 12px;
  color: var(--muted, #5b6770);
}
.x-reply-variant-draft {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-muted, #f4f3ef);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.x-reply-variant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--muted, #5b6770);
}
.x-reply-variant-actions {
  display: flex;
  gap: 8px;
}

/* spec §20: X接点→簡易登録 */
.x-reply-lead-tools {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.x-reply-lead-result {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.x-reply-lead-note {
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eef3f1;
}
.x-reply-lead-note.warn { background: #fff4e0; }
.x-reply-lead-note.ok { background: #e8f4ef; }
.x-reply-lead-matches {
  display: grid;
  gap: 6px;
}
.x-reply-lead-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border, #d8dee3);
  border-radius: 8px;
}
.x-reply-lead-match span {
  color: var(--muted, #5b6770);
  font-size: 12px;
}
.secondary-button.danger {
  border-color: #d98b8b;
  color: #b34a4a;
}

/* spec §25: タグ チップ式入力 */
.tag-field { display: block; }
.tag-chip-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border, #d8dee3);
  border-radius: 8px;
  background: var(--surface, #fff);
}
.tag-chips {
  display: contents;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: #e8f0ee;
  font-size: 13px;
  white-space: nowrap;
}
.tag-chip-remove {
  border: none;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  width: 18px;
  height: 18px;
  line-height: 1;
  cursor: pointer;
  color: #444;
}
.tag-chip-remove:hover { background: rgba(0,0,0,0.18); }
.tag-chip-empty { font-size: 13px; color: var(--muted, #8b97a0); }
.tag-chip-input {
  flex: 1;
  min-width: 140px;
  border: none;
  outline: none;
  padding: 4px 2px;
  font: inherit;
  background: transparent;
}
.tag-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.tag-popular-label { font-size: 12px; color: var(--muted, #5b6770); }
.tag-suggest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px dashed var(--border, #c7d0d6);
  border-radius: 999px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: var(--text, #2a3138);
}
.tag-suggest:hover { background: #eef3f1; }
.tag-suggest span {
  font-size: 11px;
  color: var(--muted, #8b97a0);
}

.x-reply-meta-card,
.x-reply-empty {
  padding: 10px;
  display: grid;
  gap: 5px;
}

.x-reply-meta-card strong,
.x-reply-empty strong {
  color: var(--ink);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.calendar-weekday {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.calendar-day {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 5px;
  cursor: pointer;
}

.calendar-day.muted {
  visibility: hidden;
  cursor: default;
}

.calendar-day.has-reservation {
  border-color: rgba(200, 135, 82, 0.45);
  background: #f5fbf8;
}

.calendar-number {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-badge {
  width: 100%;
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 6px;
  background: #e9f4f0;
  color: var(--accent-strong);
  padding: 4px 6px;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.reservation-badge .badge-status-icon { margin-right: 3px; }

/* spec §22: 予約状態の色分け（アイコン＋文字と併用＝色だけに依存しない） */
.reservation-badge.status-done { background: var(--reservation-status-done-bg); border-color: var(--reservation-status-done-border); color: var(--reservation-status-done-text); }
.reservation-badge.status-confirmed { background: #e9f4f0; border-color: #a9d6c6; color: #1f6f59; }
.reservation-badge.status-tentative { background: #fff6e3; border-color: #ecd49a; color: #8a6a1d; }
.reservation-badge.status-cancelled { background: var(--reservation-status-cancelled-bg); border-color: var(--reservation-status-cancelled-border); color: var(--reservation-status-cancelled-text); text-decoration: line-through; }
.reservation-badge.status-noshow { background: #fdeaea; border-color: #eab4b4; color: #9a3838; }

.reservation-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #eef3f1;
}
.reservation-status-tag.status-done { background: #e8f0ff; color: #2b4f86; }
.reservation-status-tag.status-confirmed { background: #e9f4f0; color: #1f6f59; }
.reservation-status-tag.status-tentative { background: #fff6e3; color: #8a6a1d; }
.reservation-status-tag.status-cancelled { background: #f1f1f3; color: #6a7077; }
.reservation-status-tag.status-noshow { background: #fdeaea; color: #9a3838; }

.calendar-more {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 10px;
  margin-top: 0;
}

.reservation-list-wrap {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.reservation-list-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.reservation-list-toggle small {
  margin-left: auto;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.reservation-list-toggle-label {
  min-width: 44px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  text-align: right;
}

.reservation-list-toggle:hover {
  border-color: rgba(200, 135, 82, 0.45);
  background: var(--accent-soft);
}

.reservation-list-wrap.collapsed {
  gap: 0;
}

.global-calendar-sales-summary {
  margin-top: 2px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.global-calendar-sales-ranking {
  margin-top: 8px;
}

.calendar-view-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.day-timeline {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.day-timeline-header,
.timeline-row,
.timeline-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.day-timeline-header {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.timeline-rows {
  display: grid;
  gap: 10px;
}

.timeline-row {
  width: 100%;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.timeline-time {
  min-width: 112px;
  color: var(--accent-strong);
  font-size: 18px;
  font-weight: 900;
}

.timeline-card {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.timeline-sub,
.timeline-notes,
.empty-timeline {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.empty-timeline {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.day-schedule-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.day-schedule-title h3 {
  margin: 0;
  font-size: 16px;
}

.day-date-badge {
  display: grid;
  justify-items: center;
  min-width: 44px;
}

.day-date-badge span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.day-date-badge strong {
  color: var(--muted);
  font-size: 32px;
  line-height: 1;
}

.day-schedule-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(320px, 1fr);
  gap: 8px;
  max-height: 680px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eee7ef;
  padding: 10px 10px 16px 0;
}

.day-hour-labels {
  position: relative;
  min-width: 0;
}

.day-hour-label {
  position: absolute;
  right: 8px;
  transform: translateY(-8px);
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.day-hour-grid {
  position: relative;
  min-width: 0;
}

.day-hour-slot {
  border-top: 1px solid rgba(114, 119, 111, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.day-hour-slot + .day-hour-slot {
  margin-top: 0;
}

.day-schedule-event {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow: hidden;
  border: 1px solid rgba(169, 108, 60, 0.22);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 8px 58px 8px 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(139, 81, 42, 0.18);
}

.day-schedule-event strong,
.day-schedule-event span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-schedule-event strong {
  font-size: 14px;
}

.day-schedule-event span {
  font-size: 12px;
  opacity: 0.9;
}

.day-event-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--danger);
  padding: 3px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(69, 46, 30, 0.16);
}

.day-event-delete:hover {
  background: #ffe7e7;
}

.day-schedule-event.status-confirmed {
  background: #2f9f82;
  border-color: rgba(47, 159, 130, 0.32);
  box-shadow: 0 10px 22px rgba(47, 159, 130, 0.18);
}

.day-schedule-event.status-tentative {
  background: #d3915c;
}

.day-schedule-event.status-done {
  background: #5f7fb9;
}

.day-schedule-event.status-cancelled,
.day-schedule-event.status-noshow {
  background: #8c8f8a;
  text-decoration: line-through;
}

.day-now-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  border-radius: 999px;
  background: var(--danger);
}

.day-empty-on-grid {
  position: absolute;
  top: 12px;
  left: 8px;
  right: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  padding: 12px;
  font-size: 13px;
  font-weight: 800;
}

.day-add-floating {
  position: sticky;
  grid-column: 2;
  justify-self: end;
  bottom: 14px;
  z-index: 4;
  width: 56px;
  min-height: 56px;
  margin: -70px 14px 0 0;
  align-self: end;
  border: 0;
  border-radius: 16px;
  background: #efd7ff;
  color: #2b2332;
  cursor: pointer;
  font-size: 30px;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(59, 45, 68, 0.22);
}

.day-unscheduled {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px;
}

.day-unscheduled > strong {
  color: var(--muted);
  font-size: 12px;
}

.day-unscheduled > div {
  display: grid;
  gap: 8px;
}

.day-unscheduled-item {
  position: relative;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 58px 8px 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

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

.body-mode-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.body-marker-size-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 320px) auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.body-marker-size-panel label {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.body-marker-size-panel strong {
  color: var(--ink);
  font-size: 13px;
}

.body-marker-size-panel input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: var(--accent);
}

.body-marker-size-panel .secondary-button {
  min-height: 44px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}

@media (min-width: 981px) and (max-width: 1099px) {
  .body-marker-size-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

.body-map-help {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.body-map-mobile-edit-control {
  display: none;
}

.body-map-canvas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 66.666%;
  margin-top: 14px;
  margin-right: auto;
  margin-left: auto;
}

/* 部位マップを右カラム(380px)に置いたとき: 表面/裏面を縦積み・全幅にして窮屈さを解消 */
.detail-right-column .body-map-canvas {
  grid-template-columns: 1fr;
  width: 100%;
}

.body-figure-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.body-side-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.body-figure {
  --body-map-zoom: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 560 / 1220;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.body-figure-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  contain: layout paint;
  transform: scale(var(--body-map-zoom));
  transform-origin: center center;
}

.body-figure.dragging {
  cursor: grabbing;
}

.body-figure-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.body-line-layer,
.body-drag-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.body-line-marker {
  cursor: pointer;
}

.body-line-hit {
  stroke: transparent;
  stroke-width: calc(9px * var(--body-marker-size, 1));
  stroke-linecap: round;
  pointer-events: stroke;
}

.body-line-stroke,
.body-drag-preview {
  fill: none;
  stroke-width: calc(2.8px * var(--body-marker-size, 1));
  stroke-linecap: round;
  filter: drop-shadow(0 2px 4px rgba(32, 37, 35, 0.22));
  pointer-events: none;
}

.body-line-marker.sensitive .body-line-stroke,
.body-drag-preview.sensitive {
  stroke: rgba(45, 111, 72, 0.92);
}

.body-line-marker.ng .body-line-stroke,
.body-drag-preview.ng {
  stroke: rgba(157, 56, 56, 0.92);
}

.body-drag-preview {
  opacity: 0.35;
  stroke-dasharray: 3 3;
}

.body-drag-preview.active {
  opacity: 0.85;
  stroke-dasharray: none;
}

.body-marker {
  position: absolute;
  width: calc(13px * var(--body-marker-size, 1));
  height: calc(13px * var(--body-marker-size, 1));
  border: 0;
  border-radius: 999px;
  padding: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
}

.body-marker.sensitive {
  background: transparent;
}

.body-marker.ng {
  background: transparent;
}

.body-marker.note {
  width: auto;
  height: auto;
  max-width: min(160px, calc(100% - 16px));
  border-radius: 6px;
  cursor: grab;
  z-index: 2;
  transform: translate(var(--body-note-transform-x, -50%), -50%);
}

.body-marker.note.dragging {
  cursor: grabbing;
  opacity: 0.85;
}

/* メモのその場入力欄（クリックした位置に出る） */
.body-note-input {
  position: absolute;
  transform: translate(var(--body-note-transform-x, -50%), -50%);
  z-index: 5;
  width: 132px;
  max-width: min(150px, calc(100% - 16px));
  box-sizing: border-box;
  padding: 4px 7px;
  border: 1px solid rgba(154, 101, 20, 0.55);
  border-radius: 6px;
  background: rgba(255, 248, 236, 0.98);
  color: #4d3a1b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 2px 12px rgba(32, 37, 35, 0.22);
  outline: none;
}

.body-note-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(200, 135, 82, 0.18);
}

/* 予約フォーム: 終了時刻の自動ヒント */
.reservation-end-hint {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

/* 売上: 予測売上カードの色分け */
.sales-stat.forecast strong {
  color: var(--accent-strong);
}

/* 売上: 未収金は注意色、返金は控えめ色 */
.sales-stat.unpaid strong {
  color: #9d3838;
}
.sales-stat.refund strong {
  color: var(--muted);
}

/* 顧客サマリー / 接客前ブリーフ */
.customer-summary-panel { grid-column: 1 / -1; }
.customer-today-plan-panel { grid-column: 1 / -1; }
.customer-history-panel { grid-column: 1 / -1; }
.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.summary-grid .wide { grid-column: 1 / -1; }
.summary-grid > div { display: flex; flex-direction: column; gap: 2px; }
.summary-grid span { font-size: 11px; color: var(--muted); }
.summary-grid strong { font-size: 13px; }
.summary-missing strong { color: #9d3838; }
.brief-block { display: flex; flex-direction: column; gap: 8px; }
.brief-block > div span { font-size: 11px; color: var(--muted); }
.brief-block > div p { margin: 2px 0 0; font-size: 13px; }

/* 対応リスト（follow-ups） */
.follow-ups-lead { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.follow-ups-list { display: flex; flex-direction: column; gap: 8px; }
.follow-up-item {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 8px; padding: 10px 12px; background: var(--surface);
}
.follow-up-item.priority-high { border-left-color: #9d3838; }
.follow-up-item.priority-medium { border-left-color: var(--accent); }
.follow-up-item.priority-low { border-left-color: var(--line); }
.follow-up-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.follow-up-type { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--surface-soft); color: var(--accent-strong); }
.follow-up-priority { font-size: 11px; color: var(--muted); }
.follow-up-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.follow-up-actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.follow-up-actions .secondary-button { padding: 4px 8px; font-size: 12px; }

.body-note-label {
  display: block;
  max-width: 160px;
  padding: 4px 7px;
  border: 1px solid rgba(154, 101, 20, 0.28);
  border-radius: 6px;
  background: rgba(255, 248, 236, 0.94);
  color: #4d3a1b;
  box-shadow: 0 2px 8px rgba(32, 37, 35, 0.14);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.body-marker-core {
  position: relative;
  width: calc(13px * var(--body-marker-size, 1));
  height: calc(13px * var(--body-marker-size, 1));
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(32, 37, 35, 0.22);
}

.body-marker.sensitive .body-marker-core {
  background: rgba(45, 111, 72, 0.9);
}

.body-marker.ng .body-marker-core {
  background: rgba(157, 56, 56, 0.9);
}

.body-marker-core::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.9;
}

.body-marker.selected,
.body-marker.resizing {
  z-index: 4;
}

.body-marker.selected {
  cursor: grab;
}

.body-marker.moving {
  cursor: grabbing;
  opacity: 0.9;
}

.body-resize-handle {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 2px 7px rgba(32, 37, 35, 0.24);
  box-sizing: border-box;
  pointer-events: auto;
  touch-action: none;
}

.body-marker.ng .body-resize-handle {
  background: #9d3838;
}

.body-resize-handle.nw {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.body-resize-handle.ne {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.body-resize-handle.sw {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}

.body-resize-handle.se {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.body-marker.selected .body-marker-core,
.body-line-marker.selected .body-line-stroke {
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 5px rgba(200, 135, 82, 0.9));
}

@media (max-width: 760px) {
  .body-map-inline > .panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }

  .body-map-inline > .panel-header > div:first-child {
    min-width: 0;
  }

  .body-map-inline > .panel-header h3 {
    white-space: nowrap;
  }

  .body-map-inline > .panel-header .body-mode-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .body-map-inline > .panel-header .body-mode-toggle .secondary-button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 6px;
    white-space: nowrap;
  }

  .body-marker-size-panel {
    grid-template-columns: 1fr;
  }

  .body-map-inline .body-map-help {
    display: none;
  }

  .body-map-mobile-edit-control {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

  .body-map-mobile-edit-control .secondary-button {
    width: 100%;
    min-height: 44px;
  }

  .body-map-mobile-edit-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
  }

  .body-map-mobile-edit-status:empty {
    display: none;
  }

  .body-map-panel:not(.body-map-mobile-editing) .body-figure {
    cursor: default;
    touch-action: pan-y;
  }

  .body-map-panel:not(.body-map-mobile-editing) .body-figure-stage {
    pointer-events: none;
  }

  .body-map-panel.body-map-mobile-editing .body-figure {
    cursor: crosshair;
    touch-action: none;
  }
}

.body-map-summary {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.body-summary-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: #fff;
  display: grid;
  gap: 4px;
  font-size: 13px;
}

.body-summary-column span {
  color: var(--muted);
  line-height: 1.5;
}

.reservation-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  text-align: left;
  display: grid;
  gap: 8px;
}

.reservation-main {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.reservation-sub,
.reservation-notes {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.reservation-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
}

.reservation-actions .secondary-button,
.reservation-actions .text-button,
.reservation-actions .danger-button {
  width: 58px;
  min-width: 58px;
  height: 34px;
  min-height: 34px;
  flex: 0 0 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 6px;
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
}

.reservation-actions .reservation-open {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.reservation-actions .reservation-calendar-link {
  width: auto;
  min-width: 132px;
  flex-basis: 132px;
  padding-inline: 8px;
}

.global-calendar-view {
  max-width: 1240px;
}

.privacy-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(20, 28, 24, 0.32);
  padding: 18px;
}

.privacy-lock-card {
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(20, 28, 24, 0.22);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.privacy-lock-card h2,
.privacy-lock-card p {
  margin: 0;
}

.privacy-lock-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.privacy-lock-message {
  min-height: 18px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

.privacy-lock-actions {
  width: 100%;
}

.privacy-reset-button {
  justify-self: start;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.privacy-blurred {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

.privacy-hidden {
  display: none !important;
}

.reservation-dialog {
  width: min(760px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.reservation-dialog::backdrop {
  background: rgba(20, 28, 24, 0.28);
}

.reservation-footer-close-button {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
}

.reservation-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.reservation-form-grid .reservation-date-field {
  grid-column: 1 / -1;
}

.reservation-form-grid .reservation-start-time-field {
  grid-column: 1;
}

.reservation-form-grid .reservation-end-time-field {
  grid-column: 2;
}

@media (max-width: 980px) {
  .reservation-form-grid .reservation-start-time-field,
  .reservation-form-grid .reservation-end-time-field {
    grid-column: 1 / -1;
  }
}

.app-confirm-dialog {
  max-width: min(520px, calc(100vw - 28px));
}

.app-confirm-body {
  display: grid;
  gap: 18px;
}

.app-confirm-body p {
  margin: 0;
  color: var(--color-text-primary, var(--ink));
  font-size: 16px;
  line-height: 1.8;
  white-space: pre-line;
}

.app-confirm-field {
  display: grid;
  gap: 8px;
}

.app-confirm-field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.app-confirm-field input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.app-confirm-field input:focus {
  outline: 3px solid rgba(194, 124, 69, 0.22);
  border-color: var(--accent);
}

.app-confirm-dialog .button-row {
  justify-content: flex-end;
}

.app-confirm-dialog .button-row button,
.app-confirm-dialog .icon-button {
  min-height: 44px;
}

.app-confirm-dialog .icon-button {
  min-width: 44px;
}

.app-confirm-dialog.danger #appConfirmOk {
  border-color: #a84b42;
  background: #a84b42;
  color: #fff;
}

@media (max-width: 640px) {
  .app-confirm-dialog .button-row {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .app-confirm-dialog .button-row button {
    width: 100%;
  }
}

.post-session-prompt-dialog {
  width: min(620px, calc(100vw - 28px));
  padding: 20px;
}

.post-session-prompt-body {
  display: grid;
  gap: 16px;
}

.post-session-maru-message {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.post-session-maru-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(214, 184, 154, 0.82);
  border-radius: 999px;
  background: #fff;
}

.post-session-maru-avatar img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.post-session-maru-bubble {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(214, 184, 154, 0.72);
  border-radius: 16px;
  padding: 11px 14px;
  background: linear-gradient(135deg, rgba(255, 250, 244, 0.98), rgba(249, 242, 234, 0.94));
  box-shadow: 0 8px 22px rgba(80, 55, 35, 0.08);
}

.post-session-maru-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 12px;
  height: 12px;
  border-bottom: 1px solid rgba(214, 184, 154, 0.72);
  border-left: 1px solid rgba(214, 184, 154, 0.72);
  background: rgba(255, 250, 244, 0.98);
  transform: translateY(-50%) rotate(45deg);
}

.post-session-maru-bubble > span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.post-session-maru-bubble strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
}

.post-session-prompt-meta {
  margin: 0;
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
}

.post-session-prompt-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.post-session-prompt-guide span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.post-session-prompt-guide strong {
  display: inline-grid;
  flex: 0 0 26px;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
}

.post-session-prompt-extension {
  display: grid;
  gap: 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
}

.post-session-prompt-extension legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.post-session-prompt-extension label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.post-session-prompt-extension label > span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.post-session-prompt-extension select,
.post-session-prompt-extension input {
  width: 100%;
  min-height: 44px;
}

.post-session-prompt-extension-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.post-session-prompt-extension > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.post-session-prompt-field {
  display: grid;
  gap: 8px;
}

.post-session-prompt-field > span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.post-session-prompt-field textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.7;
}

.post-session-prompt-field textarea:focus-visible {
  border-color: var(--accent);
  outline: 3px solid rgba(194, 124, 69, 0.22);
  outline-offset: 2px;
}

.post-session-prompt-note,
.post-session-prompt-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.post-session-prompt-status:not(:empty) {
  color: var(--danger);
  font-weight: 800;
}

.post-session-prompt-actions {
  justify-content: flex-end;
}

.post-session-prompt-actions button,
.post-session-prompt-dialog .icon-button {
  min-height: 44px;
}

.post-session-prompt-dialog .icon-button {
  min-width: 44px;
}

@media (max-width: 640px) {
  .post-session-prompt-dialog {
    padding: 16px;
  }

  .post-session-maru-message {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .post-session-maru-avatar {
    width: 48px;
    height: 48px;
  }

  .post-session-maru-avatar img {
    width: 45px;
    height: 45px;
  }

  .post-session-prompt-guide {
    grid-template-columns: 1fr;
  }

  .post-session-prompt-guide span {
    min-height: 44px;
  }

  .post-session-prompt-extension-fields {
    grid-template-columns: 1fr;
  }

  .post-session-prompt-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .post-session-prompt-actions button {
    width: 100%;
  }
}

:root[data-theme="dark"] .app-confirm-body p {
  color: var(--color-text-primary, #f7f1e9);
}

:root[data-theme="dark"] .post-session-prompt-guide span {
  background: #25221d;
  border-color: rgba(239, 183, 127, 0.28);
}

:root[data-theme="dark"] .post-session-maru-avatar {
  border-color: rgba(203, 157, 116, 0.52);
  background: rgba(255, 250, 244, 0.92);
}

:root[data-theme="dark"] .post-session-maru-bubble {
  border-color: rgba(203, 157, 116, 0.5);
  background: linear-gradient(135deg, rgba(64, 52, 43, 0.98), rgba(48, 42, 37, 0.96));
}

:root[data-theme="dark"] .post-session-maru-bubble::before {
  border-color: rgba(203, 157, 116, 0.5);
  background: rgba(64, 52, 43, 0.98);
}

.message-item.incoming {
  border-left: 4px solid #4b79a1;
}

.message-item.sent {
  border-left: 4px solid var(--accent);
}

.message-item.post_session {
  border-left: 4px solid var(--warning);
}

.message-body {
  white-space: pre-wrap;
  line-height: 1.6;
}

.hidden {
  display: none !important;
}

/* spec(左カラム整理 第一段階): UI上で非表示にするが要素・データはDOMに残すための恒久非表示クラス。
   .hidden はJSが trashモードで付け外しするため、JSが触らない別クラスで確実に隠す。 */
.feature-disabled {
  display: none !important;
}

/* =========================================================================
   参考UI統合: 上品なSaaS風CRMリファイン（見た目のみ／機能・レイアウト構造・データは不変）
   白〜薄グレー基調 / 角丸カード / やわらかい影 / 余白を整える / 選択中を明快に
   ========================================================================= */

/* パネル(中央・右カラムのカード)を上品な角丸カードに */
.panel,
.empty-state {
  border-radius: var(--radius-card);
  border-color: var(--line);
}
.panel {
  padding: 18px 20px;
}

/* ボタン・入力の角丸を統一 */
.primary-button,
.secondary-button,
.danger-button,
.icon-button {
  border-radius: var(--radius-sm);
}
input,
textarea,
select {
  border-radius: var(--radius-sm);
  border-color: var(--line);
}

/* サイドバー: 余白とタイトルの余裕 */
.sidebar {
  padding: 20px 18px;
}
.brand h1 {
  font-size: 18px;
  line-height: 1.35;
}

/* 新規ラベルを追加: やわらかいグリーン地のフル幅ボタン */
.add-label-button {
  background: var(--accent-soft);
  border: 1px solid rgba(200, 135, 82, 0.18);
  color: var(--accent-strong);
  border-radius: var(--radius-sm);
  min-height: 38px;
  font-weight: 700;
}
.add-label-button:hover {
  background: #fbeede;
}

/* 並び替え: ドロップダウンの高さを整える・無効時の見え方 */
.sort-filter-split select {
  min-height: 38px;
}
.sort-filter-split select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-soft);
}

/* 地域グループ見出し: 余白と件数バッジを上品に */
.customer-label-group {
  gap: 6px;
  margin-bottom: 2px;
}
.customer-label-row {
  min-height: 32px;
  font-size: 13px;
}
.customer-label-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
}
.customer-label-items {
  gap: 7px;
}

/* 顧客カード: 白地・薄枠・大きめ角丸・余白・微かな影。選択中はやわらかいグリーン地で明快に */
.customer-item {
  border-radius: 12px;
  border-color: var(--line);
  padding: 11px 32px 11px 12px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.customer-item:hover {
  border-color: rgba(200, 135, 82, 0.35);
}
.customer-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(200, 135, 82, 0.25), var(--shadow-card);
}
.customer-name {
  font-size: 14px;
}

/* =========================================================================
   参考UI統合・3カラム再設計（顧客詳細画面）
   サイドバー(顧客選択) | 中央(ヘッダー+カルテグリッド) | 右(支援カード縦積み)
   ========================================================================= */

/* サイドバーを340〜370pxへ（顧客選択カラム） */
.app-shell {
  grid-template-columns: 285px minmax(0, 1fr);
}

/* 上部ナビをコンパクトに（機能は維持・高さと余白を圧縮） */
/* ワークスペースの上下左右をさらに詰める（左=サイドバー↔中央はカード間と同じ密度にする） */
.workspace { padding: 12px 16px 12px 6px; }
.topbar { min-height: 0; margin-bottom: 14px; }
.topbar h2 { font-size: 19px; }
.topbar > div:first-child,
.topbar > div:first-child .eyebrow,
.topbar #pageTitle {
  display: none !important;
}
.topbar.hide-context-title > div:first-child {
  display: none;
}
.topbar,
.topbar.hide-context-title {
  justify-content: flex-end;
  margin-bottom: 8px;
}
.top-actions { gap: 6px; }
.nav-group { gap: 2px; padding: 2px 5px; }
.nav-group .secondary-button,
.top-actions > .secondary-button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
  border-radius: 8px;
}

.top-actions.nav-shell {
  display: grid;
  flex: 1 1 auto;
  justify-items: end;
  align-items: start;
  gap: 8px;
  min-width: min(100%, 620px);
}

.nav-primary-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
}

.nav-primary {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(200, 135, 82, 0.14);
  border-radius: 12px;
  background: rgba(200, 135, 82, 0.06);
}

.nav-category-button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 14px;
  white-space: nowrap;
}

.nav-category-button.active {
  border-color: var(--accent);
  background: #fff;
  color: var(--accent-strong);
  box-shadow: 0 8px 18px rgba(28, 43, 36, 0.08);
}

.settings-view {
  display: grid;
  gap: 16px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.settings-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 18px;
}

.settings-card-head h4 {
  margin: 2px 0 0;
  font-size: 20px;
}

.settings-card-body {
  display: grid;
  gap: 12px;
}

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

.daily-report-toggle,
.settings-card-body label.daily-report-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
}

.daily-report-toggle span {
  order: 1;
}

.daily-report-toggle input {
  order: 2;
  flex: none;
  margin: 0;
}

.settings-card-body input,
.settings-card-body select,
.settings-card-body textarea {
  width: 100%;
}

.settings-card-body textarea {
  min-height: 110px;
  line-height: 1.7;
  resize: vertical;
}

.therapist-profile-settings-card {
  grid-column: 1 / -1;
  grid-row: 2;
}

.therapist-profile-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.therapist-profile-summary::-webkit-details-marker {
  display: none;
}

.therapist-profile-summary > span {
  display: grid;
  gap: 2px;
}

.therapist-profile-summary::after {
  content: "開く";
  margin-left: auto;
  min-width: 3em;
  text-align: right;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.therapist-profile-disclosure[open] > .therapist-profile-summary::after {
  content: "閉じる";
}

.therapist-profile-summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 4px;
  border-radius: 6px;
}

.therapist-profile-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.therapist-profile-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.therapist-profile-form .wide {
  grid-column: span 3;
}

.therapist-profile-status {
  min-height: 20px;
  color: var(--ok);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.therapist-profile-status:empty {
  display: none;
}

.daily-report-settings-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.daily-report-toggle,
.settings-card-body label.daily-report-toggle {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
}

.daily-report-toggle input[type="checkbox"],
.settings-card-body label.daily-report-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
}

.notification-toggle-grid {
  display: grid;
  gap: 2px;
}

.settings-card-body .notification-toggle-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13px;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}

.settings-card-body .notification-toggle-grid label > span {
  margin: 0;
  line-height: 1.5;
}

.settings-card-body .notification-toggle-grid input[type="checkbox"] {
  justify-self: end;
  width: 13px;
  min-width: 13px;
  height: 13px;
  min-height: 13px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

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

.appearance-settings-card {
  grid-column: 1;
  grid-row: 1;
  grid-template-rows: max-content 1fr;
}

.daily-report-settings-card {
  grid-column: 2;
  grid-row: 1;
}

.appearance-settings-card .settings-card-body {
  min-height: 0;
}

.appearance-settings-card .appearance-toggle {
  height: 100%;
  min-height: 180px;
}

.appearance-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.appearance-button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: 0 8px 18px rgba(28, 43, 36, 0.08);
}

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

.settings-link-grid .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 760px) {
  .dm-sent-history-layout {
    grid-template-columns: 1fr;
  }

  .x-dm-inbox-tabs {
    grid-template-columns: 1fr;
  }

  .x-dm-inbox-tab {
    grid-template-columns: 1fr auto;
    justify-items: start;
    min-height: 44px;
    padding-inline: 12px;
  }

  .external-links-layout,
  .external-link-form,
  .external-link-card,
  .x-dm-layout,
  .x-dm-status-grid,
  .x-dm-import-controls,
  .x-dm-unlinked-list {
    grid-template-columns: 1fr;
  }

  .x-dm-unlinked-item,
  .x-dm-detail-head {
    flex-direction: column;
    align-items: stretch;
  }

  .x-dm-unlinked-actions {
    min-width: 0;
    justify-content: stretch;
  }

  .external-link-actions {
    justify-content: stretch;
  }

  .external-link-actions .primary-button,
  .external-link-actions .text-button {
    flex: 1 1 auto;
  }

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

  .appearance-settings-card,
  .daily-report-settings-card,
  .therapist-profile-settings-card {
    grid-column: auto;
    grid-row: auto;
  }

  .appearance-settings-card {
    grid-template-rows: auto;
  }

  .appearance-settings-card .appearance-toggle {
    height: auto;
    min-height: 0;
  }

  .therapist-profile-form .wide {
    grid-column: auto;
  }

  .therapist-profile-form {
    grid-template-columns: 1fr;
  }
}

.nav-secondary-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-height: 36px;
}

.nav-secondary-row:has(.nav-panel.feature-disabled:not(.hidden)) {
  display: none;
}

.nav-panel {
  display: inline-flex;
}

.nav-panel.hidden {
  display: none !important;
}

.nav-panel .secondary-button {
  min-height: 34px;
  padding: 6px 12px;
}

.save-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 92px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.save-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 135, 82, 0.12);
}

.save-status.warn::before {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(165, 42, 42, 0.12);
}

.save-status.busy::before {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(154, 101, 20, 0.12);
}

@media (min-width: 981px) {
  .topbar.hide-context-title {
    align-items: flex-start;
    min-height: 0;
  }

  .topbar.hide-context-title .top-actions.nav-shell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
  }

  .topbar.hide-context-title .nav-primary-row,
  .topbar.hide-context-title .nav-secondary-row {
    width: auto;
  }

  .topbar.hide-context-title .nav-primary-row {
    flex: 0 1 auto;
    gap: 10px;
  }

  .topbar.hide-context-title .nav-secondary-row {
    flex: 0 0 auto;
    min-height: 0;
  }
}

/* Dark mode final contrast fixes for calendar sales area. */
:root[data-theme="dark"] .reservation-item,
:root[data-theme="dark"] .sales-stat,
:root[data-theme="dark"] .sales-rank-item {
  background: #25221d;
  border-color: rgba(239, 183, 127, 0.28);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .sales-stat.primary {
  background: rgba(76, 143, 101, 0.16);
  border-color: rgba(127, 200, 153, 0.34);
}

:root[data-theme="dark"] .sales-stat.new-frame {
  background: rgba(75, 121, 161, 0.16);
  border-color: rgba(127, 176, 215, 0.34);
}

:root[data-theme="dark"] .sales-stat.repeat-frame {
  background: rgba(211, 145, 92, 0.16);
  border-color: rgba(239, 183, 127, 0.34);
}

:root[data-theme="dark"] .reservation-main strong,
:root[data-theme="dark"] .sales-stat strong,
:root[data-theme="dark"] .rank-main strong,
:root[data-theme="dark"] .rank-metrics strong {
  color: #f5efe7;
}

:root[data-theme="dark"] .sales-stat.forecast strong {
  color: #f3bf86;
}

:root[data-theme="dark"] .sales-stat span,
:root[data-theme="dark"] .sales-stat small,
:root[data-theme="dark"] .reservation-sub,
:root[data-theme="dark"] .reservation-notes,
:root[data-theme="dark"] .rank-main span,
:root[data-theme="dark"] .rank-metrics span,
:root[data-theme="dark"] .rank-comment {
  color: #cfc3b5;
}

:root[data-theme="dark"] .rank-number {
  background: #1b1915;
  color: #f5efe7;
  border: 1px solid rgba(239, 183, 127, 0.18);
}

:root[data-theme="dark"] .rank-comment {
  border-top-color: rgba(239, 183, 127, 0.18);
}

:root[data-theme="dark"] .reservation-status-tag.status-confirmed {
  background: rgba(76, 143, 101, 0.2);
  color: #98d2aa;
}

:root[data-theme="dark"] .reservation-status-tag.status-tentative {
  background: rgba(211, 145, 92, 0.2);
  color: #f3bf86;
}

:root[data-theme="dark"] .reservation-status-tag.status-done {
  background: rgba(75, 121, 161, 0.2);
  color: #aacbe6;
}

:root[data-theme="dark"] .reservation-status-tag.status-cancelled {
  background: rgba(255, 255, 255, 0.08);
  color: #cfc3b5;
}

:root[data-theme="dark"] .reservation-status-tag.status-noshow {
  background: rgba(157, 56, 56, 0.2);
  color: #f09a95;
}

/* detailView は全幅を使い、カルテカード内で3カラムに整理する */
.detail-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.detail-center {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
  min-width: 0;
  width: 100%;
  grid-column: 1;
  grid-row: 1;
}
.detail-right-column {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
  width: 100%;
  grid-column: 3;
  grid-row: 1;
}

.detail-right-column .customer-top-calendar { order: -1; }

/* 中央のカルテカードグリッド（PCは好み・NG・メモの3列、wideは全幅） */
.detail-card-grid,
.customer-session-card-grid {
  display: grid;
  gap: 16px;
  align-items: start;
  justify-self: stretch;
  width: 100%;
  grid-column: 1 / -1;
}
.detail-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.customer-session-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.detail-card-grid > .panel,
.customer-session-card-grid > .panel {
  min-width: 0;
  width: 100%;
}
.detail-card-grid > .editable-profile-card,
.detail-card-grid > .customer-memo-card {
  align-self: stretch;
}
.detail-card-grid > .wide { grid-column: 1 / -1; }
.detail-card-grid .form-grid,
.customer-session-card-grid .form-grid { margin-top: 12px; }
.detail-card-grid .form-grid.one-col,
.customer-session-card-grid .form-grid.one-col { grid-template-columns: 1fr; }

#detailView .eyebrow {
  display: none;
}

#detailView .detail-card-grid .form-grid label > span,
#detailView .customer-session-card-grid .form-grid label > span,
#detailView .post-session-memo-box label > span,
#detailView .post-session-memo-box .memo-box-header {
  display: none;
}

/* 顧客ヘッダーカード（名前・更新項目・利用状況・予約/連絡を一覧化） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.customer-header-card {
  grid-column: 1 / -1;
  position: relative;
  min-height: 190px;
  border-width: 2px;
  /* 右の余白(144px)は絶対配置の保存ボタン用。上段だけに付け替え、下の情報・次にやることは全幅で使う */
  padding: 24px 36px;
}
.customer-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px 24px;
  flex-wrap: wrap;
  padding-right: 0;
}
.customer-header-id {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}
.customer-header-name { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.18; }
.customer-header-actions {
  display: flex;
  flex: 0 1 430px;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
}
.customer-header-actions .secondary-button,
.customer-header-actions .primary-button,
.customer-header-actions .danger-button,
.customer-header-actions .toc-jump-link {
  min-height: 42px;
  padding: 8px 12px;
  font-size: 14px;
}
.customer-header-card .customer-summary-body { margin-top: 18px; }
.customer-header-card .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }

/* 顧客カルテ上部「次にやること」バンド（既存データから導出。ある時だけ表示） */
.customer-next-todo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
}
.customer-next-todo.hidden { display: none; }
.customer-next-todo .cnt-head {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  white-space: nowrap;
}
.customer-next-todo .cnt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.customer-next-todo .cnt-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.customer-next-todo .cnt-chip small { font-size: 11px; font-weight: 600; color: var(--muted); }
.customer-next-todo .cnt-chip.cnt-urgent {
  background: rgba(157, 56, 56, 0.12);
  border-color: rgba(157, 56, 56, 0.32);
  color: var(--danger);
}
.customer-next-todo .cnt-chip.cnt-todo {
  border-color: rgba(200, 135, 82, 0.34);
  color: var(--accent-strong);
}
.customer-next-todo .cnt-chip.cnt-calm {
  background: transparent;
  color: var(--muted);
}

/* === 参考画像のプロフィール風ヘッダー === */
.customer-name-row {
  display: flex;
  align-items: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  width: 100%;
}
.customer-header-name-input {
  width: min(100%, 420px);
  min-height: 44px;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.18;
}
.name-edit-button {
  min-height: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.name-edit-button:hover { background: var(--surface-soft); color: var(--accent-strong); }
.name-edit-button.is-confirming {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.name-edit-cancel-button {
  min-height: 44px;
  flex: none;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}
.name-edit-cancel-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.customer-header-actions .primary-button {
  flex: 1 1 150px;
  width: auto;
}

.customer-header-actions > .secondary-button {
  flex: 0 1 92px;
  width: auto;
}

.toc-jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(200, 135, 82, 0.28);
  border-radius: 8px;
  background: #fbf3ea;
  color: var(--accent-strong);
  font-weight: 900;
  text-decoration: none;
}

.toc-jump-link::before {
  content: "#";
  color: var(--muted);
  font-weight: 900;
}

.toc-jump-link:hover {
  border-color: rgba(200, 135, 82, 0.5);
  background: #fff7ec;
}

.profile-auto-save-status {
  position: static;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  min-height: 34px;
  margin-right: auto;
  padding: 5px 10px;
  border: 1px solid rgba(200, 135, 82, 0.24);
  border-radius: 999px;
  background: rgba(255, 248, 240, 0.96);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(83, 58, 38, 0.08);
}

.profile-auto-save-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 135, 82, 0.12);
}

.profile-auto-save-status[data-state="dirty"] {
  border-color: rgba(154, 101, 20, 0.28);
  color: #8a5b18;
}

.profile-auto-save-status[data-state="dirty"]::before,
.profile-auto-save-status[data-state="saving"]::before {
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(154, 101, 20, 0.12);
}

.profile-auto-save-status[data-state="saving"]::before {
  animation: profile-auto-save-pulse 1s ease-in-out infinite;
}

.profile-auto-save-status[data-state="error"] {
  border-color: rgba(157, 56, 56, 0.28);
  background: rgba(255, 246, 242, 0.98);
  color: var(--danger);
}

.profile-auto-save-status[data-state="error"]::before {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(157, 56, 56, 0.12);
}

:root[data-theme="dark"] .profile-auto-save-status {
  background: rgba(43, 40, 35, 0.96);
  border-color: rgba(211, 145, 92, 0.24);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .profile-auto-save-status[data-state="dirty"] {
  color: var(--warning);
}

:root[data-theme="dark"] .profile-auto-save-status[data-state="error"] {
  background: rgba(64, 38, 34, 0.96);
}

@keyframes profile-auto-save-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ピル: 関係段階 / 区分 / タグ */
.customer-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: min(100%, 520px);
  margin-top: 0;
  margin-left: 2px;
}
.customer-header-tags:empty { display: none; }
.header-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
}
.header-pill-stage { background: var(--surface-soft); color: var(--ink); }
.header-pill-repeat { background: #e8f1ea; color: #4d7a5e; border-color: #d4e3dc; }
.header-pill-new {
  padding: 4px 15px;
  background: #e8eef3;
  color: #5b7fa0;
  border-color: #d6e0e9;
  font-size: 16px;
}
.header-pill-vip { background: linear-gradient(135deg, #c89a44, #a9772a); color: #fff; border-color: transparent; }
.header-pill-tag { background: #fbf3ea; color: var(--accent-strong); border-color: rgba(200, 135, 82, 0.24); }

/* リーンなメタ行（📅次回予約 ・ 📞最終連絡 ・ 📌次の対応） */
.summary-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.summary-meta .meta-item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; min-width: 0; }
.summary-meta .meta-ic { font-size: 13px; }
.summary-meta .meta-label { color: var(--muted); font-size: 11px; }
.summary-meta strong { font-weight: 700; }
.summary-missing-line { display: none; }

.customer-card-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 16px;
}

.customer-next-plan-inset {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border-soft);
}

.customer-next-plan-inset h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.4;
}

.customer-next-plan-inset label {
  display: block;
}

.customer-next-plan-inset textarea {
  min-height: 116px;
}

.customer-card-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.customer-card-info-item .info-label {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.customer-card-info-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.customer-card-info-item small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.customer-birthday-info-item.is-editor-expanded {
  grid-column: 1 / -1;
}

.customer-birthday-summary-trigger {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  column-gap: 8px;
  row-gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.customer-birthday-summary-trigger .info-label {
  grid-column: 1;
  grid-row: 1;
}

.customer-birthday-summary-trigger strong {
  grid-column: 1;
  grid-row: 2;
}

.customer-birthday-hover-hint {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--color-accent-text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 120ms ease;
}

.customer-birthday-summary-trigger:hover .customer-birthday-hover-hint,
.customer-birthday-summary-trigger:focus-visible .customer-birthday-hover-hint,
.customer-birthday-info-item.is-editor-expanded .customer-birthday-hover-hint {
  opacity: 1;
}

.customer-birthday-summary-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
  outline-offset: 4px;
}

.customer-birthday-editor {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.customer-birthday-editor input[data-field="birthday"] {
  min-height: 44px;
  width: 100%;
}

.customer-birthday-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-birthday-editor-actions .secondary-button {
  min-height: 40px;
  padding: 8px 12px;
}

.customer-birthday-editor-actions .secondary-button.is-disabled,
.customer-birthday-editor-actions .secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.birthday-calendar-status {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 761px) and (max-width: 1279px) {
  .customer-card-info-grid {
    column-gap: 4px;
  }

  .customer-card-info-item .info-label {
    font-size: 11px;
  }

  .customer-card-info-item strong {
    font-size: 13px;
  }

  .customer-birthday-summary-trigger {
    column-gap: 4px;
  }

  .customer-birthday-hover-hint {
    font-size: 11px;
  }
}

/* ⋯ オーバーフローメニュー */
.header-overflow { position: relative; }
.header-menu-button {
  width: 48px; min-height: 46px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1;
}
.header-menu-button:hover { background: var(--surface-soft); }
.header-menu {
  position: absolute; top: 38px; right: 0; z-index: 30;
  display: grid; min-width: 180px; padding: 6px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: 0 14px 34px rgba(28, 43, 36, 0.16);
}
.header-menu-item {
  border: 0; border-radius: 6px; background: transparent;
  padding: 9px 12px; color: var(--ink); text-align: left; cursor: pointer;
  font-weight: 700; font-size: 13px;
}
.header-menu-item:hover { background: var(--surface-soft); }
.header-menu-item.danger { color: var(--danger); }

/* カルテカードの見出しを密に */
.karte-card .panel-header { margin-bottom: 2px; }
.karte-card h3 { font-size: 15px; }

.reservation-paste-card .panel-header {
  align-items: flex-start;
}

.reservation-paste-card .primary-button {
  flex: none;
}

.reservation-paste-text {
  min-height: 112px;
}

.reservation-image-actions {
  display: flex;
  justify-content: flex-start;
}

.reservation-image-actions .secondary-button {
  min-height: 38px;
  padding: 8px 14px;
}

.reservation-paste-preview {
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 8px;
  background: #fbf3ea;
  color: var(--accent-strong);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.reservation-review {
  display: grid;
  gap: 12px;
}

.reservation-review-head {
  display: grid;
  gap: 3px;
}

.reservation-review-head strong {
  color: var(--ink);
  font-size: 15px;
}

.reservation-review-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.reservation-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.reservation-review-field {
  display: grid;
  gap: 5px;
}

.reservation-review-field.wide {
  grid-column: 1 / -1;
}

.reservation-review-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.reservation-review-field input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 7px 9px;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.reservation-review-summary {
  display: grid;
  gap: 8px;
}

.review-alert {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(115, 127, 120, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
}

.review-alert strong {
  color: var(--ink);
  font-size: 12px;
}

.review-alert span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.review-alert.warn {
  border-color: rgba(200, 135, 82, 0.36);
  background: #fff8ee;
}

.review-alert.danger {
  border-color: rgba(165, 42, 42, 0.24);
  background: #fff0ef;
}

.review-alert.danger span {
  color: var(--danger);
}

.review-alert.ok {
  border-color: rgba(52, 128, 89, 0.24);
  background: #f2faf5;
}

.reservation-duplicate-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--danger);
  font-size: 13px;
  font-weight: 900;
}

.reservation-duplicate-confirm input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.reservation-paste-preview.warn {
  border-color: rgba(165, 42, 42, 0.22);
  background: #fff0ef;
  color: var(--danger);
}

@media (max-width: 760px) {
  .reservation-review-grid {
    grid-template-columns: 1fr;
  }
}

.x-profile-panel .panel-header {
  align-items: flex-start;
}

.x-profile-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 12px;
}

.x-profile-grid label {
  display: grid;
  gap: 8px;
  align-content: start;
}

.x-profile-grid label > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.x-profile-slider {
  min-height: 210px;
  overflow: hidden;
  border: 1px solid rgba(200, 135, 82, 0.2);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #fffaf4, #f7fbf8);
}

.x-profile-slider.empty {
  display: grid;
  place-items: center;
  min-height: 112px;
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 800;
}

.x-profile-slide {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
  min-height: 210px;
  padding: 12px;
}

.x-profile-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 14px;
}

.x-profile-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.x-profile-card strong {
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 1.25;
}

.x-profile-card .inline-link {
  justify-content: center;
}

.x-profile-embed {
  min-width: 0;
  min-height: 186px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 8px;
}

.x-profile-embed > .twitter-timeline {
  display: none;
}

.x-profile-embed iframe {
  display: block;
  width: 100% !important;
  min-height: 186px;
}

.x-profile-embed .twitter-timeline-rendered,
.x-profile-embed iframe[id^="twitter-widget-"] {
  max-width: 100% !important;
  min-width: 0 !important;
}

.x-profile-embed iframe[id^="twitter-widget-"] {
  position: static !important;
  width: 100% !important;
}

.x-profile-embed.loading::before {
  display: block;
  color: var(--muted);
  content: "Xを読み込み中...";
  font-size: 13px;
  font-weight: 800;
  padding: 12px;
}

.x-profile-fallback {
  display: grid;
  gap: 10px;
  min-height: 170px;
  align-content: center;
  border: 1px dashed rgba(200, 135, 82, 0.34);
  border-radius: var(--radius-sm);
  background: #fffaf4;
  padding: 18px;
}

.x-profile-fallback strong {
  font-size: 15px;
}

.x-profile-fallback span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.x-profile-fallback .button-row {
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .x-profile-grid,
  .x-profile-slide {
    grid-template-columns: 1fr;
  }
}

.reservation-alert {
  margin-top: 6px;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
}

.detail-card-grid > .detox-panel,
.customer-session-card-grid > .post-session-memo-card,
.customer-session-card-grid > .session-note-card {
  align-self: stretch;
}

.post-session-memo-card {
  min-height: 292px;
}

.post-session-memo-card,
.session-note-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 24px;
}

.post-session-memo-card .panel-header,
.session-note-card .panel-header {
  align-items: flex-start;
  margin-bottom: 0;
  min-height: 24px;
}

.post-session-memo-card .post-session-memo-box,
.session-note-card .form-grid.one-col {
  margin-top: 0;
  padding: 12px;
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 8px;
  background: #f6fbf8;
  height: auto;
  min-height: 0;
  align-self: stretch;
  grid-template-rows: minmax(0, 1fr) auto;
}

.post-session-memo-box {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  height: auto;
}

.post-session-memo-box label,
.session-note-card .form-grid.one-col label {
  display: grid;
  min-height: 0;
}

.post-session-memo-card textarea,
.session-note-card textarea {
  height: 100%;
  min-height: 156px;
}

.detail-card-grid > .detox-panel {
  min-height: 0;
}

.body-map-inline .panel-header {
  align-items: flex-start;
}

.body-map-inline .body-map-canvas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 780px);
}

.counseling-sheet-box {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.counseling-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.counseling-sheet-head h4 {
  margin: 0;
  font-size: 16px;
}

.pdf-upload-drop {
  display: grid;
  gap: 8px;
  border: 1px dashed rgba(200, 135, 82, 0.34);
  border-radius: 8px;
  background: #fbf3ea;
  padding: 12px;
}

.pdf-upload-drop span {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
}

.pdf-upload-drop input {
  width: 100%;
  background: #fff;
}

.pdf-storage-note {
  border: 1px solid rgba(196, 108, 42, 0.2);
  border-radius: 8px;
  background: rgba(196, 108, 42, 0.07);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  padding: 9px 10px;
}

.counseling-sheet-list {
  display: grid;
  gap: 8px;
}

.counseling-sheet-item,
.counseling-sheet-empty {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  text-decoration: none;
}

.counseling-sheet-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.counseling-sheet-item strong {
  color: var(--ink);
  font-size: 13px;
}

.counseling-sheet-item span,
.counseling-sheet-empty {
  color: var(--muted);
  font-size: 12px;
}

.counseling-sheet-extract {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 4px;
  border: 1px solid rgba(111, 102, 93, 0.18);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.counseling-sheet-extract.ok {
  border-color: rgba(64, 135, 94, 0.24);
  background: #edf8f1;
  color: #2d6f48;
}

.counseling-sheet-extract.warn {
  border-color: rgba(157, 56, 56, 0.24);
  background: #fff1ed;
  color: #9d3838;
}

.counseling-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.counseling-sheet-actions .secondary-button,
.counseling-sheet-actions .danger-button {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}

.google-calendar-sync {
  display: grid;
  gap: 14px;
  margin: 12px 0 14px;
  border: 1px solid rgba(200, 135, 82, 0.22);
  border-radius: 8px;
  background: #fbf3ea;
  padding: 12px;
}

.google-calendar-action-group {
  display: grid;
  gap: 8px;
}

.google-calendar-connection-panel {
  display: grid;
  gap: 10px;
  max-width: 760px;
  padding: 12px;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 8px;
  background: var(--color-surface, #fff);
}

.google-calendar-connection-panel.hidden {
  display: none;
}

.google-calendar-sync label {
  display: grid;
  gap: 6px;
}

.google-calendar-sync label span,
.google-calendar-sync-status {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.google-calendar-private-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.google-calendar-sync .button-row {
  justify-content: flex-start;
  margin-top: 0;
}

.google-calendar-disconnect-button {
  border-color: rgba(157, 56, 56, 0.22);
  color: var(--color-danger-text, #9d3838);
}

.google-calendar-disconnect-button:hover,
.google-calendar-disconnect-button:focus-visible {
  background: var(--color-danger-bg, rgba(157, 56, 56, 0.08));
  color: var(--color-danger-text, #9d3838);
}

.google-calendar-settings-card {
  grid-column: 1 / -1;
}

.google-privacy-settings {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 14px;
}

.settings-checkbox-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.settings-checkbox-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

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

.settings-check-grid label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 8px 10px;
  color: var(--ink);
}

.settings-check-grid label input {
  flex: 0 0 auto;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}

.google-calendar-connection-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.google-calendar-connection-details > div {
  min-width: 0;
  border: 1px solid var(--color-border-soft, var(--line));
  border-radius: 10px;
  background: var(--color-surface-soft, var(--surface-soft));
  padding: 10px 12px;
}

.google-calendar-connection-details dt,
.google-calendar-connection-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.google-calendar-connection-details dt {
  color: var(--color-text-muted, var(--muted));
  font-size: 11px;
  font-weight: 800;
}

.google-calendar-connection-details dd {
  margin-top: 3px;
  color: var(--color-text-primary, var(--ink));
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.google-calendar-settings-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 0;
}

.google-calendar-settings-actions button,
.google-auto-sync-settings button,
.reservation-google-sync-actions .secondary-button,
.google-reconcile-candidate button {
  min-height: 44px;
}

.google-calendar-settings-actions #settingsGoogleDeleteAndDisconnectButton {
  border-color: transparent;
  background: transparent;
  color: var(--color-danger-text, #9d3838);
  box-shadow: none;
  font-size: 12px;
}

.google-calendar-settings-actions #settingsGoogleDeleteAndDisconnectButton:hover,
.google-calendar-settings-actions #settingsGoogleDeleteAndDisconnectButton:focus-visible {
  border-color: var(--color-danger-border, rgba(157, 56, 56, 0.28));
  background: var(--color-danger-bg, rgba(157, 56, 56, 0.08));
}

.google-auto-sync-settings {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--color-border-soft, var(--line));
  border-radius: 10px;
  background: var(--color-surface-soft, var(--surface-soft));
  padding: 10px 12px;
}

.google-auto-sync-settings > span {
  margin-right: auto;
  color: var(--color-text-primary, var(--ink));
  font-size: 13px;
  font-weight: 900;
}

.google-calendar-notification-help {
  margin: 0;
  border-left: 3px solid var(--color-accent, var(--accent));
  padding-left: 10px;
  color: var(--color-text-secondary, var(--muted));
  font-size: 12px;
  line-height: 1.7;
}

.reservation-google-sync-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--color-border-soft, var(--line));
  border-radius: 10px;
  background: var(--color-surface-soft, var(--surface-soft));
  padding: 10px 12px;
}

.reservation-google-sync-status:empty,
.reservation-google-sync-status.hidden {
  display: none;
}

.reservation-google-sync-status.is-synced {
  border-color: var(--color-success-border, rgba(64, 135, 94, 0.28));
  background: var(--color-success-bg, #edf8f1);
}

.reservation-google-sync-status.is-error,
.reservation-google-sync-status.is-reconnect-required {
  border-color: var(--color-danger-border, rgba(157, 56, 56, 0.28));
  background: var(--color-danger-bg, #fff1ed);
}

.reservation-google-sync-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.reservation-google-sync-copy strong {
  color: var(--color-text-primary, var(--ink));
  font-size: 13px;
  line-height: 1.5;
}

.reservation-google-sync-copy span {
  color: var(--color-text-secondary, var(--muted));
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.reservation-google-sync-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.reservation-google-sync-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.google-auto-sync-dialog,
.google-reconcile-dialog {
  max-height: calc(100dvh - 28px);
  overflow: auto;
  overscroll-behavior: contain;
}

.google-auto-sync-dialog {
  width: min(620px, calc(100vw - 28px));
}

.google-auto-sync-body {
  display: grid;
  gap: 14px;
}

.google-auto-sync-body > p,
.google-auto-sync-body section p,
.google-reconcile-candidate p {
  margin: 0;
  color: var(--color-text-secondary, var(--muted));
  line-height: 1.7;
}

.google-auto-sync-body section {
  display: grid;
  gap: 4px;
}

.google-auto-sync-body h4 {
  margin: 0;
  color: var(--color-text-primary, var(--ink));
  font-size: 14px;
}

.google-auto-sync-destination {
  border: 1px solid var(--color-border-soft, var(--line));
  border-radius: 10px;
  background: var(--color-surface-soft, var(--surface-soft));
  padding: 12px;
}

.google-auto-sync-destination p {
  overflow-wrap: anywhere;
  font-weight: 800;
}

.google-auto-sync-dialog .button-row {
  align-items: stretch;
  justify-content: flex-end;
}

.google-auto-sync-dialog .button-row button {
  min-height: 44px;
}

.google-reconcile-dialog {
  width: min(760px, calc(100vw - 28px));
}

.google-reconcile-candidates {
  display: grid;
  gap: 10px;
  max-height: min(55vh, 520px);
  margin-top: 14px;
  overflow: auto;
}

.google-reconcile-candidate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-border-soft, var(--line));
  border-radius: 10px;
  background: var(--color-surface-soft, var(--surface-soft));
  padding: 12px;
}

.google-reconcile-candidate > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.google-reconcile-candidate strong,
.google-reconcile-candidate p {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .google-calendar-connection-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .settings-check-grid {
    grid-template-columns: 1fr;
  }

  .google-calendar-connection-details {
    grid-template-columns: 1fr;
  }

  .google-calendar-settings-actions,
  .google-auto-sync-settings,
  .reservation-google-sync-status,
  .reservation-google-sync-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .google-calendar-settings-actions button,
  .google-auto-sync-settings button,
  .reservation-google-sync-actions .secondary-button {
    width: 100%;
  }

  .google-auto-sync-settings > span {
    margin-right: 0;
  }

  .google-auto-sync-dialog,
  .google-reconcile-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }

  .google-auto-sync-dialog .button-row {
    flex-direction: column;
  }

  .google-auto-sync-dialog .button-row button {
    width: 100%;
  }

  .google-reconcile-candidate {
    grid-template-columns: 1fr;
  }

  .google-reconcile-candidate button {
    width: 100%;
  }
}

/* 削除（danger-zone）は中央下に控えめに右寄せ */
.detail-center .profile-danger-zone { display: flex; justify-content: flex-end; margin-top: 0; }
.detail-card-grid,
.customer-session-card-grid,
.detail-center .profile-danger-zone {
  grid-column: 1 / -1;
}

.customer-top-calendar {
  min-width: 0;
}

.customer-top-calendar .panel-header {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 10px;
}

.customer-top-calendar h3 {
  font-size: 17px;
  line-height: 1.35;
}

.customer-top-calendar .calendar-controls {
  width: 100%;
  justify-content: space-between;
}

.customer-top-calendar .calendar-controls strong {
  flex: 1;
  text-align: center;
}

.reservation-timeline-panel {
  display: grid;
  gap: 14px;
}

.reservation-timeline {
  display: grid;
  gap: 16px;
}

.reservation-timeline-section {
  display: grid;
  gap: 8px;
}

.reservation-timeline-label {
  font-size: 12px;
  font-weight: 900;
  color: var(--color-text-secondary, var(--muted));
  letter-spacing: 0;
}

.reservation-timeline-list {
  display: grid;
  gap: 8px;
}

.reservation-timeline-list.compact {
  gap: 6px;
}

.reservation-timeline-item {
  width: 100%;
  border: 1px solid var(--color-border, var(--line));
  border-radius: 8px;
  background: var(--color-surface, var(--surface));
  color: var(--color-text-primary, var(--ink));
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 4px;
  box-shadow: none;
}

.reservation-timeline-item:hover {
  background: #FFFDF9;
  border-color: var(--color-border-strong, var(--accent));
  box-shadow: 0 3px 10px rgba(80, 55, 35, 0.05);
}

.reservation-timeline-item.upcoming {
  background: var(--color-surface-soft, var(--surface-soft));
  border-left: 4px solid var(--color-accent, var(--accent));
  padding-left: 10px;
}

.reservation-timeline-item.past {
  background: var(--color-surface, var(--surface));
  color: var(--color-text-secondary, var(--muted));
}

.reservation-timeline-kicker {
  color: var(--color-accent-text, var(--accent-strong));
  font-size: 12px;
  font-weight: 900;
}

.reservation-timeline-date {
  color: var(--color-text-primary, var(--ink));
  font-size: 16px;
  line-height: 1.35;
}

.reservation-timeline-memory-title {
  color: var(--color-text-primary, var(--ink));
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.reservation-timeline-item.past .reservation-timeline-date {
  color: var(--color-text-secondary, var(--muted));
  font-size: 13px;
  font-weight: 700;
}

.reservation-timeline-meta,
.reservation-timeline-dm,
.reservation-timeline-empty {
  color: var(--color-text-secondary, var(--muted));
  font-size: 13px;
  line-height: 1.5;
}

.reservation-timeline-dm {
  color: var(--color-accent-text, var(--accent-strong));
  font-weight: 800;
}

.reservation-timeline-empty {
  border: 1px dashed var(--color-border, var(--line));
  border-radius: 8px;
  padding: 12px;
  background: var(--color-surface, var(--surface));
}

.customer-memory-graph-panel {
  display: grid;
  gap: 12px;
}

.customer-memory-graph {
  display: grid;
  gap: 12px;
}

.memory-graph-canvas {
  border: 1px solid var(--color-border, var(--line));
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 48%, rgba(184, 121, 74, 0.10), transparent 34%),
    linear-gradient(180deg, var(--color-surface-soft, var(--surface-soft)), var(--color-surface, var(--surface)));
  overflow: hidden;
}

.memory-graph-svg {
  display: block;
  width: 100%;
  min-height: 260px;
}

.memory-graph-link {
  stroke: rgba(111, 102, 93, 0.28);
  stroke-width: 1.5;
}

.memory-graph-link.time {
  stroke-dasharray: 5 5;
}

.memory-graph-link.keyword.strong {
  stroke-width: 2.4;
  stroke: rgba(184, 121, 74, 0.42);
}

.memory-graph-node {
  --memory-color: var(--color-accent);
  cursor: pointer;
  outline: none;
}

.memory-graph-node.type-incoming-dm,
.memory-graph-node.type-sent-dm,
.memory-graph-legend-item.type-incoming-dm,
.memory-graph-detail.type-incoming-dm,
.memory-graph-detail.type-sent-dm {
  --memory-color: #4A90B8;
}

.memory-graph-node.type-reservation,
.memory-graph-legend-item.type-reservation,
.memory-graph-detail.type-reservation {
  --memory-color: #5E8F70;
}

.memory-graph-node.type-previous-session,
.memory-graph-node.type-post-session,
.memory-graph-legend-item.type-post-session,
.memory-graph-detail.type-previous-session,
.memory-graph-detail.type-post-session {
  --memory-color: #9A6A45;
}

.memory-graph-node.type-caution,
.memory-graph-legend-item.type-caution,
.memory-graph-detail.type-caution {
  --memory-color: var(--color-danger-text);
}

.memory-graph-node.type-preference,
.memory-graph-legend-item.type-preference,
.memory-graph-detail.type-preference {
  --memory-color: #C69A36;
}

.memory-graph-node.type-next-handoff,
.memory-graph-legend-item.type-next-handoff,
.memory-graph-detail.type-next-handoff {
  --memory-color: #8367B8;
}

.memory-graph-node-ring {
  fill: var(--color-surface, #fff);
  stroke: var(--memory-color);
  stroke-width: 2;
  opacity: 0.72;
}

.memory-graph-node-dot {
  fill: var(--memory-color);
  opacity: 0.92;
}

.memory-graph-node.center .memory-graph-node-dot {
  fill: var(--color-accent, #B8794A);
}

.memory-graph-node.selected .memory-graph-node-ring,
.memory-graph-node:hover .memory-graph-node-ring,
.memory-graph-node:focus-visible .memory-graph-node-ring {
  stroke-width: 4;
  opacity: 1;
}

.memory-graph-node-label {
  fill: var(--color-text-primary, #2F2A25);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.memory-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.memory-graph-legend-item {
  --memory-color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-secondary, var(--muted));
  font-size: 12px;
  font-weight: 800;
}

.memory-graph-legend-item i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--memory-color);
}

.memory-graph-detail,
.memory-graph-empty {
  border: 1px solid var(--color-border, var(--line));
  border-left: 4px solid var(--memory-color, var(--color-accent));
  border-radius: 10px;
  background: var(--color-surface, var(--surface));
  padding: 12px;
}

.memory-graph-detail {
  --memory-color: var(--color-accent);
  display: grid;
  gap: 7px;
}

.memory-graph-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-text-muted, var(--muted));
  font-size: 12px;
}

.memory-graph-pill {
  border: 1px solid color-mix(in srgb, var(--memory-color) 42%, var(--color-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--memory-color) 10%, var(--color-surface));
  color: var(--memory-color);
  padding: 2px 8px;
  font-weight: 900;
}

.memory-graph-detail strong {
  color: var(--color-text-primary, var(--ink));
  font-size: 14px;
}

.memory-graph-detail p,
.memory-graph-empty {
  margin: 0;
  color: var(--color-text-secondary, var(--muted));
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
}

:root[data-theme="dark"] .memory-graph-canvas {
  background:
    radial-gradient(circle at 50% 48%, rgba(211, 145, 92, 0.16), transparent 36%),
    linear-gradient(180deg, #24211c, #1a1815);
}

:root[data-theme="dark"] .memory-graph-link {
  stroke: rgba(245, 239, 231, 0.2);
}

:root[data-theme="dark"] .memory-graph-link.keyword.strong {
  stroke: rgba(239, 183, 127, 0.48);
}

:root[data-theme="dark"] .memory-graph-node-ring {
  fill: #211f1b;
}

:root[data-theme="dark"] .memory-graph-node-label {
  fill: var(--color-text-primary);
}

:root[data-theme="dark"] .memory-graph-detail,
:root[data-theme="dark"] .memory-graph-empty {
  background: #211f1b;
}

/* サイドバー顧客カードをコンパクトに（一覧性UP） */
.customer-item { padding: 9px 30px 9px 11px; gap: 4px; }
.customer-item .customer-tags,
.customer-item .customer-badges { max-height: 16px; }

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 42vh;
  }

  .app-shell.sidebar-collapsed .sidebar {
    align-items: stretch;
    max-height: 0;
    padding: 0;
  }

  .detail-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .detail-center {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .customer-header-card {
    grid-column: 1;
    padding: 24px;
  }

  .profile-auto-save-status {
    position: static;
    order: -1;
    margin-right: auto;
    box-shadow: none;
  }

  .detail-card-grid,
  .customer-session-card-grid,
  .detail-center .profile-danger-zone,
  .customer-top-calendar,
  .detail-right-column {
    grid-column: 1;
  }

  .detail-card-grid,
  .customer-session-card-grid {
    grid-template-columns: 1fr;
    grid-row: auto;
  }

  .customer-top-calendar {
    grid-row: auto;
  }

  .detail-right-column {
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
  }

  .detail-right-column > .panel {
    width: 100%;
  }

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

  .mobile-home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-home-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-home-grid,
  .mobile-home-guard {
    grid-template-columns: 1fr;
  }

  .detail-right-column,
  .calendar-panel,
  .body-map-panel {
    grid-column: 1;
  }

  .queue-stats,
  .growth-loop-stats,
  .growth-loop-rule-box,
  .growth-cost-grid,
  .validation-brief,
  .validation-stats,
  .x-reply-stats,
  .x-reply-flow,
  .x-reply-workbench,
  .x-reply-form-grid,
  .field-mode-grid,
  .sales-summary-grid,
  .target-form {
    grid-template-columns: 1fr;
  }

  .sales-dashboard-view .sales-summary-grid {
    grid-template-columns: 1fr;
  }

  .body-map-canvas {
    width: 100%;
  }
}

@media (max-width: 760px), (display-mode: standalone) {
  .mobile-only-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* X投稿からDM: 候補確認・編集・人間による最終承認 */
.dm-page-tabs .secondary-button {
  min-height: 44px;
}

.x-post-dm-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.x-post-dm-lead {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.x-post-dm-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.x-post-dm-status-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.x-post-dm-status-grid span,
.x-post-dm-status-message {
  color: var(--color-text-secondary);
}

.x-post-dm-status-grid strong {
  overflow-wrap: anywhere;
}

.x-post-dm-status-message {
  min-height: 24px;
  line-height: 1.6;
}

.x-post-dm-safety-note,
.x-post-dm-unknown {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(200, 135, 82, 0.34);
  border-radius: 14px;
  background: rgba(255, 248, 241, 0.72);
  line-height: 1.6;
}

.x-post-dm-safety-note span,
.x-post-dm-unknown span {
  color: var(--color-text-secondary);
}

.x-post-dm-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.4fr);
  gap: 16px;
  min-width: 0;
}

.x-post-dm-column,
.x-post-dm-candidate-detail {
  min-width: 0;
}

.x-post-dm-candidate-list {
  display: grid;
  gap: 10px;
  max-height: 72vh;
  overflow: auto;
  padding: 2px;
}

.x-post-dm-candidate {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.x-post-dm-candidate:hover,
.x-post-dm-candidate.active {
  border-color: var(--color-accent);
  background: rgba(255, 248, 241, 0.82);
}

.x-post-dm-candidate.warning {
  border-color: #b56a53;
}

.x-post-dm-candidate:focus-visible,
.x-post-dm-post:has(input:focus-visible),
.x-post-dm-editor textarea:focus-visible,
.x-post-dm-link-box select:focus-visible {
  outline: 3px solid rgba(194, 117, 62, 0.35);
  outline-offset: 2px;
}

.x-post-dm-candidate-top,
.x-post-dm-post > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.x-post-dm-candidate-top small,
.x-post-dm-candidate-trigger,
.x-post-dm-badges span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(200, 135, 82, 0.12);
  color: #87502f;
  font-size: 0.78rem;
  font-weight: 800;
}

.x-post-dm-candidate-meta,
.x-post-dm-candidate-quote {
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.x-post-dm-candidate-trigger {
  justify-self: start;
}

.x-post-dm-candidate-detail {
  display: grid;
  gap: 14px;
}

.x-post-dm-person {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.x-post-dm-person > div:first-child {
  display: grid;
  gap: 4px;
}

.x-post-dm-person span {
  color: var(--color-text-secondary);
}

.x-post-dm-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.x-post-dm-link-box,
.x-post-dm-template {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(200, 135, 82, 0.32);
  border-radius: 14px;
  background: rgba(255, 248, 241, 0.6);
}

.x-post-dm-link-box label,
.x-post-dm-editor {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.x-post-dm-link-box select,
.x-post-dm-link-box .button-row button,
.x-post-dm-detail-actions button,
#refreshXPostDmButton,
.x-dm-send-confirm-actions button {
  min-height: 44px;
}

.x-post-dm-posts {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.x-post-dm-posts legend {
  margin-bottom: 8px;
  font-weight: 800;
}

.x-post-dm-post {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px 10px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
}

.x-post-dm-post.selected {
  border-color: var(--color-accent);
  background: rgba(255, 248, 241, 0.72);
}

.x-post-dm-post input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
}

.x-post-dm-post > span,
.x-post-dm-post p {
  grid-column: 2;
  min-width: 0;
}

.x-post-dm-post p,
.x-post-dm-template p {
  margin: 0;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.x-post-dm-post small,
.x-post-dm-template > span {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}

.x-post-dm-editor textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.x-post-dm-error {
  padding: 11px 13px;
  border: 1px solid rgba(181, 82, 70, 0.45);
  border-radius: 12px;
  color: #a33f35;
  background: rgba(181, 82, 70, 0.08);
}

.x-post-dm-empty {
  display: grid;
  gap: 6px;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--color-text-secondary);
}

.x-post-dm-sent-label {
  color: #497d5b;
  font-weight: 800;
}

.x-dm-send-confirm-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
}

.x-dm-send-confirm-dialog .icon-button {
  min-width: 44px;
  min-height: 44px;
}

.x-dm-send-confirm-body {
  display: grid;
  gap: 14px;
}

.x-dm-send-confirm-section {
  display: grid;
  gap: 6px;
}

.x-dm-send-confirm-section > span {
  color: var(--color-text-secondary);
  font-size: 0.86rem;
  font-weight: 800;
}

.x-dm-send-confirm-section blockquote,
.x-dm-send-confirm-section pre {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: inherit;
  background: var(--surface);
  font: inherit;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.x-dm-send-confirm-question {
  margin: 2px 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.x-dm-send-confirm-status {
  min-height: 24px;
  color: #a33f35;
  line-height: 1.6;
}

#xPostDmPrepareButton,
#xDmSendConfirmSend {
  border-color: #9b5c32;
  color: #fff;
  background: #9b5c32;
}

#xPostDmPrepareButton:hover,
#xDmSendConfirmSend:hover {
  border-color: #824821;
  background: #824821;
}

@media (max-width: 1100px) {
  .x-post-dm-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .x-post-dm-layout {
    grid-template-columns: minmax(250px, 0.8fr) minmax(360px, 1.2fr);
  }
}

@media (max-width: 760px), (display-mode: standalone) {
  .x-post-dm-panel > .panel-header,
  .x-post-dm-person,
  .x-post-dm-safety-note,
  .x-post-dm-unknown {
    align-items: stretch;
    flex-direction: column;
  }

  .x-post-dm-status-grid,
  .x-post-dm-layout {
    grid-template-columns: 1fr;
  }

  .x-post-dm-candidate-list {
    max-height: none;
  }

  .x-post-dm-badges {
    justify-content: flex-start;
  }

  #refreshXPostDmButton,
  .x-post-dm-link-box .button-row button,
  .x-post-dm-detail-actions button,
  .x-dm-send-confirm-actions button {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .workspace,
  .sidebar {
    padding: 14px;
  }

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

  .top-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .top-actions.nav-shell {
    justify-items: stretch;
  }

  .nav-primary-row {
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
  }

  .nav-primary {
    width: 100%;
    overflow-x: auto;
  }

  .nav-category-button {
    flex: 1 0 auto;
  }

  .nav-secondary-row {
    justify-content: stretch;
  }

  .top-actions .secondary-button {
    flex: 1 1 calc(50% - 6px);
  }

  .nav-group,
  .nav-panel {
    width: 100%;
    flex-wrap: wrap;
  }

  .nav-panel .secondary-button {
    flex: 1 1 calc(50% - 6px);
  }

  .save-status {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }

  .pwa-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .mobile-home-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-home-action {
    min-height: 68px;
  }

  .mobile-card-top,
  .mobile-card-actions {
    align-items: flex-start;
  }

  .mobile-card-actions button {
    flex: 1 1 calc(50% - 4px);
  }

  .panel {
    padding: 12px;
  }

  .customer-header-card {
    min-height: 0;
    padding: 20px 18px;
  }

  .customer-header-name {
    font-size: 18px;
  }

  .customer-header-actions {
    width: 100%;
  }

  .customer-header-actions .primary-button,
  .customer-header-actions .secondary-button,
  .customer-header-actions .toc-jump-link {
    flex: 1 1 100%;
    width: 100%;
  }

  .customer-card-info-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .customer-card-info-item {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .body-map-inline .body-map-canvas {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 16px;
  }

  .body-map-inline .body-figure-card {
    width: 100%;
    min-width: 0;
  }

  .timeline-row,
  .timeline-main,
  .queue-item-main,
  .queue-actions,
  .growth-loop-main,
  .growth-loop-actions,
  .x-reply-column-header,
  .x-reply-item-top,
  .x-reply-meta-head,
  .validation-workflow-header,
  .validation-task,
  .validation-task-actions,
  .validation-scenario-main,
  .validation-actions,
  .sales-rank-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .queue-actions,
  .queue-actions button,
  .growth-loop-actions,
  .growth-loop-actions button,
  .x-reply-header-actions,
  .x-reply-header-actions button,
  .validation-task-actions,
  .validation-task-actions button,
  .validation-workflow-header button,
  .validation-actions,
  .validation-actions button,
  .field-card-actions,
  .field-card-actions button,
  .target-form button,
  .today-plan-actions,
  .customer-ai-actions {
    width: 100%;
  }

  .today-plan-actions,
  .customer-ai-actions {
    grid-template-columns: 1fr;
  }

  .sales-rank-item {
    display: flex;
  }

  .rank-metrics {
    text-align: left;
  }

  .rank-comment {
    width: 100%;
  }

  .timeline-time {
    min-width: 0;
  }
}

/* 保存した絞り込み条件 */
.saved-filters { display: flex; gap: 6px; margin: 6px 0; }
.saved-filters select { flex: 1; min-width: 0; }
.saved-filters .secondary-button { padding: 4px 8px; font-size: 12px; white-space: nowrap; }

/* 空状態のCTA */
.empty-state-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .calendar-day,
:root[data-theme="dark"] .reservation-list-item,
:root[data-theme="dark"] .field-card,
:root[data-theme="dark"] .sales-card,
:root[data-theme="dark"] .queue-item,
:root[data-theme="dark"] .growth-loop-card,
:root[data-theme="dark"] .validation-card,
:root[data-theme="dark"] .x-reply-item,
:root[data-theme="dark"] .x-reply-meta-card,
:root[data-theme="dark"] .mobile-home-section,
:root[data-theme="dark"] .header-menu,
:root[data-theme="dark"] .privacy-lock-card,
:root[data-theme="dark"] .reservation-dialog,
:root[data-theme="dark"] .body-marker-size-panel {
  background: var(--surface);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: #181613;
  color: var(--ink);
  border-color: var(--line);
}

:root[data-theme="dark"] .sales-trend-toggle input[type="checkbox"] {
  background: #0f0e0c;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(245, 239, 231, 0.12);
}

:root[data-theme="dark"] .sales-trend-toggle input[type="checkbox"]:checked {
  background: #fffaf4;
  box-shadow:
    inset 0 0 0 1px rgba(239, 183, 127, 0.42),
    0 0 0 3px rgba(239, 183, 127, 0.16);
}

:root[data-theme="dark"] .sales-trend-toggle input[type="checkbox"]:checked::after {
  background: var(--color-accent, #d3915c);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #8f8578;
}

:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .appearance-button,
:root[data-theme="dark"] .header-menu-button,
:root[data-theme="dark"] .calendar-nav-button,
:root[data-theme="dark"] .reservation-list-toggle,
:root[data-theme="dark"] .toc-jump-link {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--line);
}

:root[data-theme="dark"] .secondary-button.active,
:root[data-theme="dark"] .appearance-button.active,
:root[data-theme="dark"] .nav-category-button.active,
:root[data-theme="dark"] .customer-seg-chip.active,
:root[data-theme="dark"] .customer-filter-button.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: none;
}

:root[data-theme="dark"] .pwa-bar,
:root[data-theme="dark"] .nav-group,
:root[data-theme="dark"] .daily-report-settings,
:root[data-theme="dark"] .google-calendar-sync-card,
:root[data-theme="dark"] .growth-loop-rule,
:root[data-theme="dark"] .mobile-home-guard,
:root[data-theme="dark"] .customer-summary-card,
:root[data-theme="dark"] .reservation-paste-card,
:root[data-theme="dark"] .counseling-sheet-card,
:root[data-theme="dark"] .follow-up-rule-box {
  background: rgba(211, 145, 92, 0.08);
  border-color: rgba(211, 145, 92, 0.24);
}

:root[data-theme="dark"] .calendar-day.has-reservation,
:root[data-theme="dark"] .field-card.today,
:root[data-theme="dark"] .sales-stat-card.positive {
  background: rgba(76, 143, 101, 0.14);
}

:root[data-theme="dark"] .danger-button {
  background: rgba(157, 56, 56, 0.18);
  color: var(--danger);
  border-color: rgba(224, 122, 116, 0.36);
}

:root[data-theme="dark"] .header-pill,
:root[data-theme="dark"] .header-menu-item:hover,
:root[data-theme="dark"] .empty-queue,
:root[data-theme="dark"] .empty-state {
  background: var(--surface-soft);
}

:root[data-theme="dark"] .queue-stat {
  background: #25221d;
  border-color: rgba(239, 183, 127, 0.28);
  color: var(--ink);
}

:root[data-theme="dark"] .queue-stat span {
  color: #cfc3b5;
}

:root[data-theme="dark"] .queue-stat strong {
  color: #f3bf86;
}

:root[data-theme="dark"] .queue-stat.urgent {
  background: rgba(157, 56, 56, 0.16);
  border-color: rgba(224, 122, 116, 0.46);
}

:root[data-theme="dark"] .queue-stat.urgent strong {
  color: #f09a95;
}

:root[data-theme="dark"] .day-schedule-card {
  background: #191714;
}

:root[data-theme="dark"] .day-hour-slot {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

:root[data-theme="dark"] .day-empty-on-grid {
  background: rgba(43, 40, 35, 0.88);
}

:root[data-theme="dark"] .day-add-floating {
  background: #4c385b;
  color: #f5efe7;
}

/* =========================================================================
   ChatGPTレビュー反映（2026-06-25）: カレンダー凡例 / PDF・デトックス折りたたみ /
   次にやること(ダーク) / PDFファイル選択 / 3カラムの中間ブレークポイント
   ========================================================================= */

/* (G) 予約カレンダーの色凡例 */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 6px 0 10px;
  font-size: 11px;
}
.calendar-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.calendar-legend .legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.calendar-legend .legend-dot.status-confirmed { background: #e9f4f0; border-color: #a9d6c6; }
.calendar-legend .legend-dot.status-tentative { background: #fff6e3; border-color: #ecd49a; }
.calendar-legend .legend-dot.status-done { background: var(--reservation-status-done-bg); border-color: var(--reservation-status-done-border); }
.calendar-legend .legend-dot.status-cancelled { background: var(--reservation-status-cancelled-bg); border-color: var(--reservation-status-cancelled-border); }

/* (C) PDF・デトックスの折りたたみ（低頻度の補助機能をたたんでおく） */
.pdf-detox-details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.pdf-detox-details > summary.pdf-detox-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  user-select: none;
}
.pdf-detox-details > summary.pdf-detox-summary::-webkit-details-marker { display: none; }
.pdf-detox-details > summary.pdf-detox-summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 33px;
  line-height: 1;
}
.pdf-detox-details[open] > summary.pdf-detox-summary::before { content: "▾"; }
.pdf-detox-details > summary.pdf-detox-summary strong { font-size: 14px; color: var(--ink); }
.pdf-detox-details > summary.pdf-detox-summary span { font-size: 12px; color: var(--muted); }
.pdf-detox-details[open] > summary.pdf-detox-summary { margin-bottom: 8px; }
.detox-panel .pdf-detox-details { margin-top: 0; border-top: 0; padding-top: 0; }

/* (H) ダークモードの「次にやること」可視性 */
:root[data-theme="dark"] .customer-next-todo {
  background: rgba(224, 122, 116, 0.10);
  border-color: rgba(224, 122, 116, 0.24);
}
:root[data-theme="dark"] .customer-next-todo .cnt-chip.cnt-urgent {
  background: rgba(224, 122, 116, 0.22);
  border-color: rgba(224, 122, 116, 0.42);
  color: var(--danger);
}
:root[data-theme="dark"] .customer-next-todo .cnt-chip.cnt-todo {
  border-color: rgba(211, 145, 92, 0.42);
  color: var(--accent-strong);
}

/* (I) PDFファイル選択をブラウザ標準から控えめに整える */
.pdf-upload-drop input[type="file"] {
  width: 100%;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 6px 8px;
  cursor: pointer;
}
.pdf-upload-drop input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.pdf-upload-drop input[type="file"]::file-selector-button:hover {
  background: var(--accent-soft);
}
:root[data-theme="dark"] .pdf-upload-drop input[type="file"] {
  background: #181613;
}
:root[data-theme="dark"] .pdf-upload-drop input[type="file"]::file-selector-button {
  color: var(--accent);
}

/* (J) 中間幅(981〜1279px = 1366px@125%スケール等)では右カレンダーを下へ回し、
   中央カルテを全幅にして潰れを防ぐ */
@media (min-width: 981px) and (max-width: 1279px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-center {
    grid-template-columns: 1fr;
    grid-column: 1;
    grid-row: auto;
  }
  .detail-right-column {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
}

/* =========================================================================
   DM返信アシスト（MVP）
   ========================================================================= */
.dm-assist-lead {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 6px;
}
.dm-assist-lead strong { color: var(--accent-strong); font-weight: 800; }
.dm-workflow-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}
.dm-workflow-guide > div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}
.dm-workflow-guide strong,
.dm-workflow-guide span {
  display: block;
}
.dm-workflow-guide strong {
  color: var(--color-accent-text);
  font-size: 13px;
  line-height: 1.35;
}
.dm-workflow-guide span {
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.dm-assist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.dm-assist-line-import {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--color-surface-soft);
}
.dm-assist-line-import > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.dm-assist-line-import strong {
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.4;
}
.dm-assist-line-import span {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.dm-assist-line-import .button-row {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
}
.official-line-manual-import {
  position: relative;
  margin-top: 0;
  padding-bottom: 34px;
}
.official-line-manual-import-target {
  color: var(--color-accent) !important;
  font-weight: 800;
}
.official-line-manual-import-status {
  position: absolute;
  right: 14px;
  bottom: 10px;
  left: 14px;
  min-height: 18px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.official-line-manual-import button {
  min-height: 44px;
}
.dm-assist-incoming-source {
  display: block;
  margin: 5px 0 7px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.dm-assist-panel button {
  min-height: 44px;
}
.dm-assist-panel button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.dm-assist-unanswered { margin-top: 12px; }
.dm-assist-unanswered-head,
.dm-assist-empty {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.dm-assist-incoming {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  margin-bottom: 6px;
}
.dm-assist-incoming-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.dm-assist-incoming-body { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.dm-assist-variants { display: grid; gap: 12px; margin-top: 14px; }
.reply-assist-recovery {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-danger-border);
  border-radius: 10px;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}
.reply-assist-recovery.is-neutral {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}
.reply-assist-recovery > p { margin: 0; line-height: 1.6; }
.reply-assist-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-assist-intent { font-size: 12px; color: var(--muted); }
.dm-assist-variant {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface);
}
.dm-assist-variant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dm-assist-variant-head strong { font-size: 14px; color: var(--ink); }
.dm-assist-variant-aim { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.dm-assist-variant-draft {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dm-assist-check { font-size: 12px; margin-top: 6px; }
.dm-assist-check.warn { color: var(--warning); }
.dm-assist-check.danger { color: var(--danger); }
.dm-assist-selected-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}
.dm-assist-selected-box label > span { font-size: 12px; color: var(--muted); }
.dm-assist-auto-note {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.dm-assist-status { font-size: 12px; color: var(--muted); margin-top: 10px; min-height: 1em; }
.dm-assist-status.generating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent-text);
  font-weight: 700;
}
.dm-assist-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 999px;
  animation: dm-assist-spin 0.8s linear infinite;
}
@keyframes dm-assist-spin {
  to { transform: rotate(360deg); }
}
.dm-assist-variant.selected {
  border-left-color: var(--color-accent);
  background: var(--color-surface-soft);
}

.detail-grid.dm-focus-mode {
  grid-template-columns: minmax(0, 1fr);
}

.detail-grid.dm-focus-mode .detail-center {
  grid-column: 1;
  grid-template-columns: 1fr;
}

.detail-grid.dm-focus-mode .detail-right-column {
  display: none;
}

.detail-grid.dm-focus-mode .detail-card-grid,
.detail-grid.dm-focus-mode .customer-session-card-grid {
  grid-template-columns: 1fr;
}

.detail-grid.dm-focus-mode .detail-card-grid > .panel,
.detail-grid.dm-focus-mode .customer-session-card-grid > .panel {
  display: none;
}

.detail-grid.dm-focus-mode #replyStyleMemoryPanel,
.detail-grid.dm-focus-assist #dmAssistPanel {
  display: block;
}

.detail-grid.dm-focus-records #dmAssistPanel {
  display: none;
}

.detail-grid.dm-focus-records .dm-history-panel.feature-disabled {
  display: block !important;
}

.dm-history-lead {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

.detail-grid.dm-focus-mode #replyStyleMemoryPanel,
.detail-grid.dm-focus-mode #dmAssistPanel,
.detail-grid.dm-focus-mode .dm-history-panel {
  max-width: 960px;
}

@media (max-width: 980px) {
  .dm-workflow-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .dm-workflow-guide {
    grid-template-columns: 1fr;
  }
}

.dm-assist-variant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.x-manual-reply-panel .panel-header p {
  max-width: 760px;
}
.x-manual-steps {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.x-manual-steps span {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  white-space: nowrap;
}
.x-manual-customer-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.x-manual-customer-info > div {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}
.x-manual-customer-info span {
  display: block;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
}
.x-manual-customer-info strong {
  display: block;
  margin-top: 2px;
  color: var(--color-text-primary);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.x-manual-call-name-card {
  display: grid;
  gap: 4px;
}
.x-manual-call-name-input {
  width: 100%;
  min-width: 0;
  margin-top: 1px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}
.x-manual-call-name-input:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(184, 121, 74, 0.16);
}
.x-manual-call-name-card small {
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.x-manual-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.x-manual-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  gap: 12px;
}
.required-mark {
  margin-left: 6px;
  color: var(--color-danger-text);
  font-size: 11px;
}
.communication-profile-panel .panel-header p,
.dm-response-profile-panel .panel-header p,
.reply-style-memory-panel .panel-header p {
  max-width: 760px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.65;
  margin: 4px 0 0;
}
.reply-style-memory-description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.reply-style-settings-card {
  grid-column: 1 / -1;
}
.communication-profile-confidence {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 800;
}
.communication-profile-body {
  margin-top: 16px;
}
.dm-response-profile-body {
  margin-top: 16px;
}
.dm-response-profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dm-response-style-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.dm-response-style-summary strong {
  color: var(--color-text-primary);
}
.dm-response-waiting-alert {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--color-accent);
  border-radius: 10px;
  background: rgba(200, 135, 82, 0.1);
  color: var(--color-accent-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}
.dm-response-profile-policy {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.communication-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.communication-profile-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-soft);
}
.communication-profile-item span,
.communication-profile-avoid > span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.communication-profile-item strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.45;
}
.communication-profile-note,
.communication-profile-empty {
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(200, 135, 82, 0.1);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.65;
}
.communication-profile-note {
  margin-top: 12px;
  color: var(--color-accent-text);
  font-weight: 700;
}
.communication-profile-avoid {
  margin-top: 14px;
}
.communication-profile-avoid > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.communication-profile-avoid > div > span {
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 980px) {
  .communication-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .communication-profile-panel .panel-header,
  .dm-response-profile-panel .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .communication-profile-grid {
    grid-template-columns: 1fr 1fr;
  }
  .communication-profile-item {
    padding: 11px;
  }
  .dm-response-style-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}
.reply-style-memory-input {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.reply-style-memory-input > span {
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
}
.reply-style-memory-input textarea {
  min-height: 130px;
}
.reply-style-memory-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.reply-style-memory-status {
  color: var(--color-text-muted);
  font-size: 12px;
}
.reply-style-memory-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.reply-style-memory-head,
.reply-style-memory-empty {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
  font-size: 13px;
}
.reply-style-memory-head strong,
.reply-style-memory-empty strong {
  color: var(--color-text-primary);
}
.reply-style-memory-item {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.6;
}
.reply-style-memory-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.reply-style-memory-meta {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 700;
}
.reply-style-memory-delete-button {
  min-height: 28px;
  padding: 3px 8px;
  color: var(--color-danger-text);
  font-size: 12px;
  white-space: nowrap;
}

.reply-style-memory-delete-button:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

@media (max-width: 900px) {
  .x-manual-customer-info,
  .x-manual-form-row {
    grid-template-columns: 1fr;
  }
  .dm-assist-variant-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .dm-assist-variant-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .dm-assist-line-import {
    align-items: stretch;
    flex-direction: column;
  }

  .dm-assist-line-import .button-row {
    align-items: stretch;
    flex-direction: column-reverse;
    width: 100%;
  }

  .dm-assist-line-import button {
    width: 100%;
  }

  .official-line-manual-import {
    padding-bottom: 38px;
  }
}

/* カード見出しはDM返信アシストと同じサイズに統一。顧客名(h2)には影響させない。 */
.panel-header h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
}

/* =========================================================================
   maTOmaru 配色調整: 静かなAI顧客カルテ
   ========================================================================= */
body {
  background: var(--color-bg-app);
  color: var(--color-text-primary);
}

.sidebar,
.workspace,
.topbar {
  background: var(--color-bg-app);
}

.panel,
.empty-state,
.settings-card,
.calendar-day,
.reservation-list-item,
.field-card,
.sales-card,
.queue-item,
.growth-loop-card,
.validation-card,
.x-reply-item,
.x-reply-meta-card,
.mobile-home-section,
.header-menu,
.privacy-lock-card,
.reservation-dialog,
.body-marker-size-panel,
.customer-summary-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}

input,
textarea,
select {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

label span,
.panel-header p,
.today-plan-lead,
.customer-ai-lead,
.daily-report-lead,
.queue-lead,
.growth-loop-lead,
.x-reply-lead,
.google-calendar-private-note,
.calendar-weekday,
.calendar-number,
.nav-group-label,
.save-status,
.dm-assist-status,
.dm-assist-intent,
.dm-assist-empty,
.dm-assist-unanswered-head {
  color: var(--color-text-secondary);
}

.muted,
small,
.customer-meta,
.customer-label-count,
.customer-card-info-item .info-label,
.customer-card-info-item small,
.dm-assist-incoming-time {
  color: var(--color-text-muted);
}

.primary-button,
.button-primary,
.btn-primary {
  background: var(--color-accent);
  color: var(--color-surface);
  border: 1px solid var(--color-accent);
  box-shadow: none;
}

.primary-button:hover,
.button-primary:hover,
.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.secondary-button,
.button-secondary,
.btn-secondary,
.icon-button,
.calendar-nav-button,
.reservation-list-toggle,
.toc-jump-link,
.appearance-button,
.header-menu-button,
.sort-view-toggle {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  box-shadow: none;
}

.secondary-button:hover,
.button-secondary:hover,
.btn-secondary:hover,
.icon-button:hover,
.calendar-nav-button:hover,
.reservation-list-toggle:hover,
.toc-jump-link:hover,
.appearance-button:hover,
.header-menu-button:hover,
.sort-view-toggle:hover {
  background: var(--color-surface-soft);
  border-color: var(--color-border-strong);
  color: var(--color-accent-text);
}

.secondary-button.active,
.appearance-button.active,
.nav-category-button.active,
.nav-item.is-active,
.tab.is-active,
.customer-seg-chip.active,
.customer-filter-button.active,
#pinCustomerButton.active {
  background: var(--color-surface-soft);
  color: var(--color-accent-text);
  border-color: var(--color-accent);
  box-shadow: none;
}

.nav-shell,
.nav-primary,
.nav-group {
  background: var(--color-surface-soft);
  border-color: var(--color-border-soft);
  box-shadow: none;
}

.nav-category-button {
  color: var(--color-text-secondary);
}

.customer-card,
.customer-item {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.customer-card:hover,
.customer-item:hover {
  background: #FFFDF9;
  border-color: var(--color-border-strong);
  box-shadow: 0 3px 10px rgba(80, 55, 35, 0.05);
}

:root[data-theme="dark"] .customer-card:hover,
:root[data-theme="dark"] .customer-item:hover {
  background: #2a261f;
  color: var(--color-text-primary);
  border-color: rgba(239, 183, 127, 0.58);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .customer-item:hover .customer-name,
:root[data-theme="dark"] .customer-item:hover .customer-name span:first-child {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .customer-item:hover .customer-name span:last-child,
:root[data-theme="dark"] .customer-item:hover .customer-meta,
:root[data-theme="dark"] .customer-item:hover .customer-item-menu-button {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .customer-card.active:hover,
:root[data-theme="dark"] .customer-item.active:hover,
:root[data-theme="dark"] .customer-card.selected:hover,
:root[data-theme="dark"] .customer-item.selected:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-border-strong);
}

.customer-card.is-selected,
.customer-item.is-selected,
.customer-card.selected,
.customer-item.selected,
.customer-card.active,
.customer-item.active {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-accent);
  box-shadow: var(--shadow-selected);
}

.customer-seg-chip,
.customer-filter-button,
.customer-tag,
.customer-badge,
.badge,
.tag,
.header-pill,
.tag-chip,
.reservation-status-tag,
.growth-badge {
  background: var(--color-surface-soft);
  color: var(--color-accent-text);
  border-color: var(--color-border);
  box-shadow: none;
}

.header-pill-stage,
.header-pill-tag,
.header-pill-vip {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  border-color: var(--color-border-soft);
}

.header-pill-repeat,
.reservation-badge.status-confirmed,
.reservation-status-tag.status-confirmed,
.growth-badge.ok,
.ai-status-box.enabled,
.sales-stat-card.positive,
.field-progress.active {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.danger-button,
.secondary-button.danger,
.customer-badge.urgent,
.reservation-badge.status-noshow,
.reservation-status-tag.status-noshow,
.growth-badge.urgent,
.dm-assist-check.danger,
.ai-status-box,
.trash-mode-toolbar,
.trash-customer-purge-button {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.danger-button:hover,
.secondary-button.danger:hover,
.trash-customer-purge-button:hover {
  background: #FFE7E4;
  border-color: var(--color-danger-border);
}

.reservation-paste-card,
.counseling-sheet-card,
.follow-up-rule-box,
.growth-loop-rule,
.daily-report-settings,
.google-calendar-sync,
.post-session-memo-box,
.session-note-card .form-grid.one-col,
.dm-assist-incoming,
.dm-assist-selected-box,
.detox-lead,
.customer-next-action,
.customer-summary-card {
  background: var(--color-surface-soft);
  border-color: var(--color-border-soft);
}

.customer-action-band,
.reservation-badge,
.dm-assist-variant,
.x-reply-variant.selected {
  border-color: var(--color-border-strong);
}

.customer-action-band {
  background: var(--color-accent-soft);
  border-left-color: var(--color-accent);
}

.reservation-badge,
.calendar-day.has-reservation {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}

.reservation-badge.status-tentative,
.reservation-status-tag.status-tentative,
.customer-badge.warn,
.growth-badge.warn,
.dm-assist-check.warn {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  border-color: var(--color-border-strong);
}

.reservation-badge.status-done,
.reservation-status-tag.status-done {
  background: var(--reservation-status-done-bg);
  color: var(--reservation-status-done-text);
  border-color: var(--reservation-status-done-border);
}

.reservation-badge.status-cancelled,
.reservation-status-tag.status-cancelled {
  background: var(--reservation-status-cancelled-bg);
  color: var(--reservation-status-cancelled-text);
  border-color: var(--reservation-status-cancelled-border);
}

.editable-profile-card {
  display: grid;
  gap: 12px;
}

.editable-profile-card .panel-header {
  align-items: flex-start;
}

.profile-card-edit-button {
  min-height: 32px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
}

.profile-card-display {
  min-height: 88px;
  padding: 2px 2px 0;
}

.profile-card-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-card-list.is-collapsed {
  max-height: calc((14px * 1.65 * 3) + (var(--space-small) * 2) + 2px);
  overflow: hidden;
}

.profile-card-list li {
  position: relative;
  padding-left: 16px;
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.profile-card-list li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 3px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-accent);
  transform: translateY(-50%);
}

.profile-card-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.profile-card-more-button {
  justify-self: start;
  margin: 6px 0 0;
  padding: 0;
  min-height: auto;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  cursor: pointer;
}

.profile-card-more-button:hover,
.profile-card-more-button:focus-visible {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.profile-card-more-button.is-hidden {
  display: none;
}

.profile-card-editor {
  margin-top: 0;
}

.customer-memo-card {
  display: grid;
  gap: 12px;
}

.customer-memo-card .panel-header {
  align-items: flex-start;
}

.customer-memo-field {
  display: grid;
  min-width: 0;
}

.customer-memo-field textarea {
  min-height: 88px;
  width: 100%;
  resize: vertical;
}

@media (max-width: 720px) {
  .customer-birthday-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-birthday-editor-actions .secondary-button {
    width: 100%;
  }
}

/* =========================================================================
   maTOmaru spacing rhythm
   カード内=24px / カード間=16px / 小要素間=8px / セクション間=24px
   ========================================================================= */
.panel,
.empty-state,
.settings-card,
.mobile-home-section,
.customer-summary-card {
  padding: var(--space-card);
}

.detail-grid,
.detail-center,
.detail-card-grid,
.customer-session-card-grid,
.detail-right-column,
.queue-panel,
.mobile-home-grid,
.field-grid,
.sales-grid,
.validation-grid,
.x-reply-layout {
  gap: var(--space-card-gap);
}

/* 顧客カルテ画面のカード間は上下左右を同じ密度にする。 */
.detail-grid,
.detail-center,
.detail-card-grid,
.customer-session-card-grid,
.detail-right-column {
  column-gap: var(--space-column-gap);
  row-gap: var(--space-column-gap);
}

.panel-header,
.button-row,
.profile-actions,
.customer-header-actions,
.customer-header-tags,
.customer-next-todo .cnt-chips,
.dm-assist-actions,
.history-mode-switch,
.reservation-image-actions,
.counseling-sheet-actions,
.top-actions,
.calendar-controls {
  gap: var(--space-small);
}

.form-grid,
.summary-grid,
.reservation-timeline-list,
.profile-card-list,
.dm-assist-variants,
.dm-assist-unanswered,
.follow-ups-list,
.full-timeline {
  gap: var(--space-small);
}

.customer-header-card {
  padding: var(--space-card);
}

.customer-header-top {
  gap: var(--space-small) var(--space-section);
}

.customer-header-card .customer-summary-body,
.customer-next-todo,
.dm-assist-actions,
.dm-assist-unanswered,
.dm-assist-variants,
.reservation-paste-card .form-grid,
.x-profile-panel .x-profile-layout,
.body-map-content,
.google-calendar-sync {
  margin-top: var(--space-section);
}

.editable-profile-card,
.post-session-memo-card,
.session-note-card,
.reservation-timeline-panel,
.reservation-timeline {
  gap: var(--space-section);
}

.reservation-timeline-section {
  gap: var(--space-small);
}

.reservation-timeline-item {
  padding: 12px;
  gap: var(--space-small);
}

.post-session-memo-card .post-session-memo-box,
.session-note-card .form-grid.one-col {
  padding: var(--space-card);
}

.detail-card-grid .form-grid,
.customer-session-card-grid .form-grid,
.profile-card-editor {
  margin-top: var(--space-small);
}

/* =========================================================================
   maTOmaru button hierarchy
   主ボタン=登録/生成/記録、 副ボタン=抽出/確認/編集、 テキスト=詳細/キャンセル
   ========================================================================= */
.primary-button,
.button-primary,
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  box-shadow: none;
  font-weight: 900;
}

.primary-button:hover,
.button-primary:hover,
.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}

.secondary-button,
.button-secondary,
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: none;
  font-weight: 800;
}

.secondary-button:hover,
.button-secondary:hover,
.btn-secondary:hover {
  background: var(--color-surface-soft);
  border-color: var(--color-border-strong);
  color: var(--color-accent-text);
}

.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
}

.text-button:hover {
  background: var(--color-surface-soft);
  color: var(--color-accent-text);
}

.text-button.x-dm-resync-button {
  min-height: 44px;
}

.primary-button:disabled,
.secondary-button:disabled,
.text-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.follow-up-actions .primary-button,
.follow-up-actions .secondary-button,
.follow-up-actions .text-button,
.reservation-actions .primary-button,
.reservation-actions .secondary-button,
.reservation-actions .danger-button,
.reservation-actions .text-button {
  width: 58px;
  min-width: 58px;
  height: 34px;
  min-height: 34px;
  flex: 0 0 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 6px;
  font-size: 11px;
}

.reservation-actions .text-button {
  padding-inline: 6px;
}

.reservation-actions .reservation-open {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.reservation-actions .reservation-calendar-link {
  width: auto;
  min-width: 132px;
  flex-basis: 132px;
  padding-inline: 8px;
}

/* 施術メモ系カードを「好み・NG」カードの見た目に統一する */
.post-session-memo-card,
.session-note-card,
.detox-panel {
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--space-section);
}

.post-session-memo-card .post-session-memo-box,
.session-note-card .form-grid.one-col {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-self: start;
  height: auto;
  display: grid;
  grid-template-rows: auto;
  gap: var(--space-section);
}

.post-session-memo-box .memo-box-header,
.post-session-memo-box label > span,
.session-note-card .form-grid.one-col label > span {
  display: none;
}

.post-session-memo-box label,
.session-note-card .form-grid.one-col label {
  display: grid;
  min-height: 0;
  width: 100%;
}

.post-session-memo-card textarea,
.session-note-card textarea {
  height: auto;
  min-height: 156px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: none;
  font-size: 15px;
  line-height: 1.75;
  width: 100%;
}

.session-note-card textarea[readonly] {
  min-height: 156px;
  padding: 18px 20px;
  border-color: var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  resize: none;
  cursor: default;
}

.previous-session-card textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.session-note-card textarea[readonly]:focus {
  border-color: var(--color-border);
  box-shadow: none;
}

.session-note-card .form-grid.one-col {
  width: 100%;
}

.detail-right-column .session-note-card .form-grid.one-col,
.detail-right-column .session-note-card .form-grid.one-col label,
.detail-right-column .session-note-card textarea {
  width: 100%;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
  align-self: stretch;
}

.detail-right-column .session-note-card .form-grid.one-col {
  grid-template-columns: minmax(0, 1fr);
}

.detail-right-column .session-note-card textarea {
  display: block;
}

.session-note-card .session-record-list:empty {
  display: none;
}

.post-session-memo-card .button-row,
.detox-panel .button-row {
  justify-content: flex-start;
}

.detox-panel .detox-lead {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: none;
  font-size: 15px;
  line-height: 1.75;
}

.detox-panel #openDetoxButton {
  min-height: 44px;
  padding: 10px 22px;
}

/* maTOmaruは枠外に出し、顧客リスト部分だけをカード状の外枠で囲う */
@media (min-width: 981px) {
  .sidebar {
    align-self: start;
    margin: 0;
    height: auto;
    max-height: none;
    padding: 12px 0 12px 6px;
    gap: 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .sidebar > .brand {
    flex: none;
    min-height: 34px;
    padding: 0 14px 0 12px;
  }

  .sidebar > .sidebar-body {
    position: relative;
    flex: none;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: visible;
  }

  .sidebar > .sidebar-body .customer-list {
    flex: none;
    overflow: visible;
    padding-bottom: 0;
  }

  .sidebar > .sidebar-body .sidebar-footer {
    position: static;
    padding-top: 0;
    background: var(--color-surface);
  }

  .app-shell.sidebar-collapsed .sidebar {
    margin: 0;
    width: 0;
    min-width: 0;
    height: 0;
    max-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
}

/* Dark mode final override: sales and calendar cards must not keep light surfaces. */
:root[data-theme="dark"] .sales-dashboard-view .sales-stat,
:root[data-theme="dark"] .global-calendar-view .sales-stat,
:root[data-theme="dark"] .sales-dashboard-view .sales-comment,
:root[data-theme="dark"] .global-calendar-view .sales-comment,
:root[data-theme="dark"] .sales-dashboard-view .sales-rank-item,
:root[data-theme="dark"] .global-calendar-view .sales-rank-item,
:root[data-theme="dark"] .sales-dashboard-view .area-sales-item,
:root[data-theme="dark"] .global-calendar-view .reservation-item {
  background: #25221d !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: var(--color-text-primary) !important;
}

:root[data-theme="dark"] .sales-dashboard-view .sales-stat.primary,
:root[data-theme="dark"] .global-calendar-view .sales-stat.primary,
:root[data-theme="dark"] .sales-dashboard-view .sales-comment,
:root[data-theme="dark"] .global-calendar-view .sales-comment {
  background: rgba(76, 143, 101, 0.16) !important;
  border-color: rgba(127, 200, 153, 0.34) !important;
}

:root[data-theme="dark"] .sales-dashboard-view .sales-rank-item.is-clickable:hover,
:root[data-theme="dark"] .global-calendar-view .sales-rank-item.is-clickable:hover {
  background: #2d2923 !important;
  border-color: rgba(239, 183, 127, 0.52) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .sales-dashboard-view .sales-stat.new-frame,
:root[data-theme="dark"] .global-calendar-view .sales-stat.new-frame {
  background: rgba(75, 121, 161, 0.16) !important;
  border-color: rgba(127, 176, 215, 0.34) !important;
}

:root[data-theme="dark"] .sales-dashboard-view .sales-stat.repeat-frame,
:root[data-theme="dark"] .global-calendar-view .sales-stat.repeat-frame {
  background: rgba(211, 145, 92, 0.16) !important;
  border-color: rgba(239, 183, 127, 0.34) !important;
}

:root[data-theme="dark"] .sales-dashboard-view .sales-stat strong,
:root[data-theme="dark"] .global-calendar-view .sales-stat strong,
:root[data-theme="dark"] .sales-dashboard-view .rank-main strong,
:root[data-theme="dark"] .global-calendar-view .rank-main strong,
:root[data-theme="dark"] .sales-dashboard-view .rank-metrics strong,
:root[data-theme="dark"] .global-calendar-view .rank-metrics strong,
:root[data-theme="dark"] .sales-dashboard-view .area-sales-item strong,
:root[data-theme="dark"] .sales-dashboard-view .area-sales-item span,
:root[data-theme="dark"] .global-calendar-view .reservation-main strong {
  color: #f5efe7 !important;
}

:root[data-theme="dark"] .sales-dashboard-view .sales-stat.forecast strong,
:root[data-theme="dark"] .global-calendar-view .sales-stat.forecast strong {
  color: #f3bf86 !important;
}

:root[data-theme="dark"] .sales-dashboard-view .sales-stat span,
:root[data-theme="dark"] .global-calendar-view .sales-stat span,
:root[data-theme="dark"] .sales-dashboard-view .sales-stat small,
:root[data-theme="dark"] .global-calendar-view .sales-stat small,
:root[data-theme="dark"] .sales-dashboard-view .sales-comment p,
:root[data-theme="dark"] .global-calendar-view .sales-comment p,
:root[data-theme="dark"] .sales-dashboard-view .rank-main span,
:root[data-theme="dark"] .global-calendar-view .rank-main span,
:root[data-theme="dark"] .sales-dashboard-view .rank-metrics span,
:root[data-theme="dark"] .global-calendar-view .rank-metrics span,
:root[data-theme="dark"] .sales-dashboard-view .rank-comment,
:root[data-theme="dark"] .global-calendar-view .rank-comment,
:root[data-theme="dark"] .sales-dashboard-view .area-sales-item small,
:root[data-theme="dark"] .global-calendar-view .reservation-sub,
:root[data-theme="dark"] .global-calendar-view .reservation-notes {
  color: #cfc3b5 !important;
}

:root[data-theme="dark"] .sales-dashboard-view .rank-number,
:root[data-theme="dark"] .global-calendar-view .rank-number {
  background: #1b1915 !important;
  color: #f5efe7 !important;
  border: 1px solid rgba(239, 183, 127, 0.18) !important;
}

:root[data-theme="dark"] .sales-dashboard-view .rank-comment,
:root[data-theme="dark"] .global-calendar-view .rank-comment {
  border-top-color: rgba(239, 183, 127, 0.18) !important;
}

/* Dark mode final override: X reply page cards must not keep light surfaces. */
:root[data-theme="dark"] .x-reply-view .therapist-style-box,
:root[data-theme="dark"] .x-reply-view .x-reply-column,
:root[data-theme="dark"] .x-reply-view .x-reply-empty,
:root[data-theme="dark"] .x-reply-view .x-reply-item,
:root[data-theme="dark"] .x-reply-view .x-reply-meta-card,
:root[data-theme="dark"] .x-reply-view .x-reply-variant,
:root[data-theme="dark"] .x-reply-view .x-reply-selected-meta,
:root[data-theme="dark"] .x-reply-view .x-reply-checks {
  background: #25221d !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: var(--color-text-primary) !important;
}

:root[data-theme="dark"] .x-reply-view .style-box-header strong,
:root[data-theme="dark"] .x-reply-view .x-reply-column-header strong,
:root[data-theme="dark"] .x-reply-view .x-reply-empty strong,
:root[data-theme="dark"] .x-reply-view .x-reply-item strong,
:root[data-theme="dark"] .x-reply-view .x-reply-variant strong {
  color: #f5efe7 !important;
}

:root[data-theme="dark"] .x-reply-view .x-reply-lead,
:root[data-theme="dark"] .x-reply-view .style-box-header span,
:root[data-theme="dark"] .x-reply-view .x-reply-column-header span,
:root[data-theme="dark"] .x-reply-view .x-reply-empty span,
:root[data-theme="dark"] .x-reply-view .x-reply-item-sub,
:root[data-theme="dark"] .x-reply-view .x-reply-item-body,
:root[data-theme="dark"] .x-reply-view .x-reply-item-date,
:root[data-theme="dark"] .x-reply-view .x-reply-variant-aim,
:root[data-theme="dark"] .x-reply-view .x-reply-variant-meta {
  color: #cfc3b5 !important;
}

:root[data-theme="dark"] .x-reply-view textarea {
  background: #181613 !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: #f5efe7 !important;
}

:root[data-theme="dark"] .x-reply-view textarea::placeholder {
  color: #9f9387 !important;
}

:root[data-theme="dark"] .x-reply-view .ai-status-box {
  background: rgba(239, 183, 127, 0.12) !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: #f3bf86 !important;
}

:root[data-theme="dark"] .x-reply-view .ai-status-box.enabled {
  background: rgba(76, 143, 101, 0.18) !important;
  border-color: rgba(127, 200, 153, 0.34) !important;
  color: #98d2aa !important;
}

:root[data-theme="dark"] .x-reply-view .x-reply-priority {
  background: rgba(239, 183, 127, 0.14) !important;
  border-color: rgba(239, 183, 127, 0.24) !important;
  color: #f3bf86 !important;
}

:root[data-theme="dark"] .x-reply-view .x-reply-item.active,
:root[data-theme="dark"] .x-reply-view .x-reply-variant.selected {
  background: rgba(211, 145, 92, 0.16) !important;
  border-color: rgba(239, 183, 127, 0.45) !important;
}

/* Dark mode final override: external links cards must not keep light surfaces. */
:root[data-theme="dark"] .external-links-view .external-links-shortcuts,
:root[data-theme="dark"] .external-links-view .external-link-settings,
:root[data-theme="dark"] .external-links-view .external-link-card,
:root[data-theme="dark"] .external-links-view .external-links-empty {
  background: #25221d !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: var(--color-text-primary) !important;
}

:root[data-theme="dark"] .external-links-view h3,
:root[data-theme="dark"] .external-links-view h4,
:root[data-theme="dark"] .external-links-view .external-links-empty strong,
:root[data-theme="dark"] .external-links-view .external-link-main strong,
:root[data-theme="dark"] .external-links-view .external-link-title-button {
  color: #f5efe7 !important;
}

:root[data-theme="dark"] .external-links-view .external-links-lead,
:root[data-theme="dark"] .external-links-view .external-link-status,
:root[data-theme="dark"] .external-links-view .external-links-empty,
:root[data-theme="dark"] .external-links-view .external-links-empty span,
:root[data-theme="dark"] .external-links-view .external-link-main span,
:root[data-theme="dark"] .external-links-view label > span {
  color: #cfc3b5 !important;
}

:root[data-theme="dark"] .external-links-view input {
  background: #181613 !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: #f5efe7 !important;
}

:root[data-theme="dark"] .external-links-view input::placeholder {
  color: #9f9387 !important;
}

:root[data-theme="dark"] .external-links-view .external-link-title-button:hover {
  color: #f3bf86 !important;
}

/* Dark mode final override: X DM import keeps the same warm surface hierarchy. */
:root[data-theme="dark"] .x-dm-import-view .x-dm-column,
:root[data-theme="dark"] .x-dm-import-view .x-dm-unlinked-panel,
:root[data-theme="dark"] .x-dm-import-view .x-dm-import-controls,
:root[data-theme="dark"] .x-dm-import-view .x-dm-status-card,
:root[data-theme="dark"] .x-dm-import-view .x-dm-conversation,
:root[data-theme="dark"] .x-dm-import-view .x-dm-inbox-tab,
:root[data-theme="dark"] .x-dm-import-view .x-dm-relationship-account,
:root[data-theme="dark"] .x-dm-import-view .x-dm-relationship-status,
:root[data-theme="dark"] .x-dm-import-view .x-dm-unlinked-item,
:root[data-theme="dark"] .x-dm-import-view .x-dm-empty,
:root[data-theme="dark"] .x-dm-import-view .x-dm-link-row,
:root[data-theme="dark"] .x-dm-import-view .x-dm-message {
  background: #25221d !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: #f5efe7 !important;
}

:root[data-theme="dark"] .x-dm-import-view .x-dm-message.outgoing {
  background: rgba(76, 143, 101, 0.16) !important;
  border-color: rgba(127, 200, 153, 0.34) !important;
}

:root[data-theme="dark"] .x-dm-import-view .x-dm-conversation.active {
  background: rgba(211, 145, 92, 0.18) !important;
  border-color: rgba(239, 183, 127, 0.52) !important;
}

:root[data-theme="dark"] .x-dm-import-view h3,
:root[data-theme="dark"] .x-dm-import-view h4,
:root[data-theme="dark"] .x-dm-import-view .x-dm-status-card strong,
:root[data-theme="dark"] .x-dm-import-view .x-dm-conversation-top strong,
:root[data-theme="dark"] .x-dm-import-view .x-dm-detail-head strong,
:root[data-theme="dark"] .x-dm-import-view .x-dm-unlinked-item strong,
:root[data-theme="dark"] .x-dm-import-view .x-dm-empty strong {
  color: #f5efe7 !important;
}

:root[data-theme="dark"] .x-dm-import-view .x-dm-lead,
:root[data-theme="dark"] .x-dm-import-view .x-dm-section-heading span,
:root[data-theme="dark"] .x-dm-import-view .x-dm-status-card span,
:root[data-theme="dark"] .x-dm-import-view .x-dm-status-card small,
:root[data-theme="dark"] .x-dm-import-view .x-dm-conversation small,
:root[data-theme="dark"] .x-dm-import-view .x-dm-message-meta,
:root[data-theme="dark"] .x-dm-import-view .x-dm-detail-head span,
:root[data-theme="dark"] .x-dm-import-view .x-dm-unlinked-item span,
:root[data-theme="dark"] .x-dm-import-view .x-dm-unlinked-item small,
:root[data-theme="dark"] .x-dm-import-view .x-dm-empty {
  color: #cfc3b5 !important;
}

:root[data-theme="dark"] .x-dm-import-view select,
:root[data-theme="dark"] .x-dm-import-view input {
  background: #181613 !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: #f5efe7 !important;
}

:root[data-theme="dark"] .dm-sent-history-item,
:root[data-theme="dark"] .dm-sent-history-grid > div,
:root[data-theme="dark"] .dm-sent-history-empty,
:root[data-theme="dark"] .dm-sent-history-filters,
:root[data-theme="dark"] .dm-settings-note {
  background: #25221d !important;
  border-color: rgba(239, 183, 127, 0.28) !important;
  color: #cfc3b5 !important;
}

:root[data-theme="dark"] .dm-sent-history-head strong,
:root[data-theme="dark"] .dm-sent-history-grid p,
:root[data-theme="dark"] .dm-sent-history-empty strong,
:root[data-theme="dark"] .dm-settings-note strong {
  color: #f5efe7 !important;
}

@media (max-width: 720px) {
  .dm-sent-history-grid {
    grid-template-columns: 1fr;
  }

  .dm-sent-history-filters {
    grid-template-columns: 1fr;
  }

  .dm-sent-history-foot {
    align-items: stretch;
  }

  .dm-sent-history-foot .secondary-button {
    width: 100%;
  }
}

/* Desktop customer layout: keep the customer selector available while the record uses page scroll. */
@media (min-width: 981px) {
  :root {
    --sticky-sidebar-top: 12px;
    --sticky-column-bottom-gap: 16px;
  }

  .sidebar {
    position: sticky;
    top: var(--sticky-sidebar-top);
    align-self: start;
    max-height: calc(100vh - var(--sticky-sidebar-top) - var(--sticky-column-bottom-gap));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .app-shell.sidebar-collapsed .sidebar {
    top: 0;
    max-height: calc(100vh - var(--sticky-sidebar-top) - var(--sticky-column-bottom-gap));
    overflow-y: auto;
  }

}

.x-chat-unlock-dialog {
  width: min(520px, calc(100vw - 28px));
  max-height: min(88vh, 720px);
}

.x-chat-unlock-form {
  display: grid;
  gap: 16px;
}

.x-chat-unlock-form > p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.x-chat-unlock-field {
  display: grid;
  gap: 7px;
}

.x-chat-unlock-field > span {
  font-weight: 800;
}

.x-chat-unlock-field input {
  min-height: 48px;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
}

.x-chat-unlock-status {
  min-height: 24px;
  color: var(--color-danger-text);
}

.x-chat-unlock-actions {
  justify-content: flex-end;
}

@media (max-width: 620px) {
  .x-chat-unlock-dialog {
    width: calc(100vw - 20px);
    padding: 14px;
  }

  .x-chat-unlock-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .x-chat-unlock-actions button {
    width: 100%;
  }
}

:root[data-theme="dark"] .x-dm-import-view .x-dm-inbox-tab.is-active,
:root[data-theme="dark"] .x-dm-import-view .x-dm-relationship-account.is-active {
  background: rgba(211, 145, 92, 0.18) !important;
  border-color: rgba(239, 183, 127, 0.52) !important;
}

/* Customer page: align the visible top edge of the left, center, and right columns. */
@media (min-width: 981px) {
  #detailView:not(.hidden) {
    align-items: start;
  }

  #detailView:not(.hidden) .detail-center,
  #detailView:not(.hidden) .detail-right-column {
    margin-top: 0;
    padding-top: 0;
  }

  #detailView:not(.hidden) .detail-right-column > .panel:first-child {
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  .sidebar,
  #detailView .detail-right-column {
    position: static;
    top: auto;
    max-height: none;
    overflow-y: visible;
    overscroll-behavior: auto;
  }
}

/* Floating AI chat */
.floating-ai-chat-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong, #d6b89a);
  background: var(--color-surface-soft, #fff8f1);
  color: var(--color-accent-text, #7a4828);
  box-shadow: 0 10px 28px rgba(80, 55, 35, 0.18);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.floating-ai-chat-button:hover,
.floating-ai-chat-button:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-accent, #b8794a);
  background: var(--color-surface, #fff);
  box-shadow: 0 14px 34px rgba(80, 55, 35, 0.24);
}

.floating-ai-chat-button:focus-visible {
  outline: 3px solid rgba(184, 121, 74, 0.28);
  outline-offset: 4px;
}

.floating-ai-chat-button.is-open {
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  border-color: var(--color-accent-hover, #a7663b);
  background: #fffaf4;
  box-shadow: 0 12px 34px rgba(80, 55, 35, 0.26);
}

.floating-ai-chat-button.is-loading {
  transform: translateY(0);
}

@keyframes floating-ai-chat-avatar-puka {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(-1.4deg);
  }
}

@keyframes floating-ai-chat-label-puka {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-ai-chat-avatar,
  .floating-ai-chat-label {
    animation: none;
  }

  .detox-maru-message,
  .detox-dialog #detoxBadMoment.detox-text-flowing,
  .detox-water-sheet,
  .detox-water-foam,
  .detox-water-glint {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}

.floating-ai-chat-avatar {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid rgba(214, 184, 154, 0.9);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  animation: floating-ai-chat-avatar-puka 3.8s ease-in-out infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}

.floating-ai-chat-avatar img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.floating-ai-chat-label {
  position: absolute;
  right: -6px;
  bottom: 0;
  z-index: 2;
  min-width: 42px;
  padding: 4px 10px 5px;
  border: 1px solid var(--color-border-strong, #d6b89a);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-accent-text, #7a4828);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 4px 12px rgba(80, 55, 35, 0.12);
  animation: floating-ai-chat-label-puka 3.8s ease-in-out infinite;
  will-change: transform;
}

.floating-ai-chat-button.is-open .floating-ai-chat-avatar,
.floating-ai-chat-button.is-open .floating-ai-chat-label,
.floating-ai-chat-button.is-loading .floating-ai-chat-avatar,
.floating-ai-chat-button.is-loading .floating-ai-chat-label {
  animation: none;
}

.floating-ai-chat-tooltip {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  z-index: 3;
  width: max-content;
  max-width: 180px;
  padding: 7px 10px;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #2f2a25);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 8px 22px rgba(80, 55, 35, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 140ms ease, transform 140ms ease;
}

.floating-ai-chat-button:hover .floating-ai-chat-tooltip,
.floating-ai-chat-button:focus-visible .floating-ai-chat-tooltip {
  opacity: 1;
  transform: translate(0, -50%);
}

.floating-ai-encouragement-bubble {
  position: fixed;
  right: 24px;
  bottom: 134px;
  z-index: 1198;
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  padding: 10px 13px;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 16px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #2f2a25);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  box-shadow: 0 12px 30px rgba(80, 55, 35, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.floating-ai-encouragement-bubble::after {
  content: "";
  position: absolute;
  right: 34px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--color-border, #e6ddd2);
  border-bottom: 1px solid var(--color-border, #e6ddd2);
  background: inherit;
  transform: rotate(45deg);
}

.floating-ai-encouragement-bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.floating-ai-encouragement-bubble.hidden {
  display: none;
}

.floating-ai-chat-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--color-surface, #fff);
  border-radius: 999px;
  background: var(--color-danger-text, #a85b55);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.floating-ai-chat-badge.hidden {
  display: none;
}

.floating-ai-chat-loading-ring {
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(184, 121, 74, 0.18);
  border-top-color: var(--color-accent, #b8794a);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.floating-ai-chat-button.is-loading .floating-ai-chat-loading-ring {
  opacity: 1;
  animation: floating-ai-chat-spin 1.2s linear infinite;
}

@keyframes floating-ai-chat-spin {
  to {
    transform: rotate(360deg);
  }
}

.floating-ai-chat-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1201;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: min(430px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 18px;
  background: var(--color-surface, #fff);
  box-shadow: 0 16px 40px rgba(80, 55, 35, 0.18);
}

.floating-ai-chat-panel.hidden {
  display: none;
}

.floating-ai-chat-backdrop {
  display: none;
}

.floating-ai-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}

.floating-ai-chat-header-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.floating-ai-chat-header-avatar {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong, #d6b89a);
  border-radius: 999px;
  background: var(--color-surface-soft, #fff8f1);
  object-fit: contain;
}

.floating-ai-chat-header h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
}

.floating-ai-chat-subtitle {
  margin: 3px 0 0;
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
  line-height: 1.45;
}

.floating-ai-chat-customer {
  display: inline-flex;
  margin-top: 7px;
  padding: 2px 8px;
  border: 1px solid var(--color-border-soft, #efe7dd);
  border-radius: 999px;
  background: var(--color-surface-soft, #fff8f1);
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
  line-height: 1.45;
}

.floating-ai-chat-notice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border-soft, #efe7dd);
  border-radius: 12px;
  background: var(--color-accent-soft, #fff3e8);
  color: var(--color-accent-text, #7a4828);
  font-size: 13px;
  line-height: 1.6;
}

.floating-ai-chat-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  max-height: min(440px, calc(100vh - 270px));
  overflow-y: auto;
  padding: 2px 4px 2px 0;
  scrollbar-gutter: stable;
}

.floating-ai-chat-empty {
  padding: 16px;
  border: 1px dashed var(--color-border, #e6ddd2);
  border-radius: 14px;
  background: var(--color-surface-soft, #fff8f1);
  color: var(--color-text-secondary, #6f665d);
  line-height: 1.7;
}

.floating-ai-chat-empty p {
  margin: 0 0 10px;
}

.floating-ai-chat-empty p:last-child {
  margin-bottom: 0;
}

.floating-ai-chat-message {
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #2f2a25);
  line-height: 1.65;
}

.floating-ai-chat-message.user {
  align-self: flex-end;
  max-width: 78%;
  border-color: var(--color-border-strong, #d6b89a);
  background: var(--color-accent-soft, #fff3e8);
}

.floating-ai-chat-message.assistant {
  align-self: flex-start;
  max-width: 88%;
  background: var(--color-surface-soft, #fff8f1);
}

.floating-ai-chat-message-label {
  margin-bottom: 4px;
  color: var(--color-text-muted, #9a9086);
  font-size: 12px;
  font-weight: 700;
}

.floating-ai-chat-message-body {
  display: grid;
  gap: 6px;
  overflow-wrap: anywhere;
}

.floating-ai-chat-message-body p {
  margin: 0;
}

.floating-ai-chat-copy {
  margin-top: 6px;
  padding-inline: 0;
  color: var(--color-accent, #b8794a);
}

.floating-ai-chat-status {
  flex: 0 0 auto;
  min-height: 0;
  color: var(--color-text-secondary, #6f665d);
  font-size: 13px;
  line-height: 1.5;
}

.floating-ai-chat-status:empty {
  display: none;
}

.floating-ai-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  flex: 0 0 auto;
}

.floating-ai-chat-form textarea {
  min-height: 64px;
  max-height: 150px;
  resize: vertical;
}

.floating-ai-chat-form button {
  min-width: 72px;
  min-height: 48px;
  border-radius: 14px;
}

:root[data-theme="dark"] .floating-ai-chat-button {
  border-color: rgba(239, 183, 127, 0.36);
  background: #28231e;
  color: #efb77f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .floating-ai-chat-button:hover,
:root[data-theme="dark"] .floating-ai-chat-button:focus-visible,
:root[data-theme="dark"] .floating-ai-chat-button.is-open {
  border-color: #efaa72;
  background: #312820;
}

:root[data-theme="dark"] .floating-ai-chat-avatar,
:root[data-theme="dark"] .floating-ai-chat-header-avatar,
:root[data-theme="dark"] .floating-ai-chat-label,
:root[data-theme="dark"] .floating-ai-chat-tooltip {
  border-color: rgba(239, 183, 127, 0.32);
  background: #211f1b;
  color: #f5efe7;
}

:root[data-theme="dark"] .floating-ai-encouragement-bubble {
  border-color: rgba(239, 183, 127, 0.26);
  background: #28231e;
  color: #f7f1e9;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .floating-ai-chat-panel {
  border-color: rgba(239, 183, 127, 0.24);
  background: var(--color-surface, #1f1d19);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .floating-ai-chat-subtitle,
:root[data-theme="dark"] .floating-ai-chat-customer,
:root[data-theme="dark"] .floating-ai-chat-status {
  color: #d7cec4;
}

:root[data-theme="dark"] .floating-ai-chat-customer {
  border-color: rgba(239, 183, 127, 0.18);
  background: #28231e;
}

:root[data-theme="dark"] .floating-ai-chat-notice {
  border-color: rgba(239, 183, 127, 0.24);
  background: #2f261f;
  color: #f1c094;
}

:root[data-theme="dark"] .floating-ai-chat-empty,
:root[data-theme="dark"] .floating-ai-chat-message {
  border-color: rgba(239, 183, 127, 0.18);
  background: #201d19;
  color: #f7f1e9;
}

:root[data-theme="dark"] .floating-ai-chat-message.user {
  border-color: #d8955d;
  background: #3a2a20;
}

:root[data-theme="dark"] .floating-ai-chat-message.assistant {
  background: #28231e;
}

@media (max-width: 760px) {
  .floating-ai-chat-backdrop:not(.hidden) {
    position: fixed;
    inset: 0;
    z-index: 1199;
    display: block;
    background: rgba(47, 42, 37, 0.28);
  }

  .floating-ai-chat-button {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 70px;
    height: 70px;
  }

  .floating-ai-chat-avatar {
    width: 58px;
    height: 58px;
  }

  .floating-ai-chat-avatar img {
    width: 56px;
    height: 56px;
  }

  .floating-ai-chat-label {
    right: -6px;
    bottom: -2px;
    min-width: 36px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .floating-ai-chat-tooltip {
    display: none;
  }

  .floating-ai-encouragement-bubble {
    right: calc(16px + 70px + 12px);
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    max-width: min(300px, calc(100vw - 118px));
    font-size: 12px;
  }

  .floating-ai-encouragement-bubble::after {
    right: -7px;
    bottom: 18px;
    transform: rotate(-45deg);
  }

  .floating-ai-chat-panel {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px;
    width: auto;
    max-height: min(78vh, calc(100vh - 72px));
    min-height: 0;
    padding: 14px;
    border-radius: 18px 18px 14px 14px;
  }

  .floating-ai-chat-messages {
    max-height: none;
    min-height: 120px;
  }

  .floating-ai-chat-header-main {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  .floating-ai-chat-header-avatar {
    width: 42px;
    height: 42px;
  }

  .floating-ai-chat-subtitle {
    font-size: 11px;
  }

  .floating-ai-chat-form {
    grid-template-columns: 1fr auto;
  }

  .floating-ai-chat-form button {
    min-width: 68px;
  }
}

.position-map-view {
  width: 100%;
}

.position-map-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-card-gap, 12px);
}

.position-map-header {
  align-items: flex-start;
}

.position-map-lead {
  margin: 6px 0 0;
  color: var(--color-text-secondary, #6f665d);
  line-height: 1.7;
}

.position-map-summary {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: var(--space-small, 6px);
}

.position-map-summary-card {
  padding: 12px;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 12px;
  background: var(--color-surface-soft, #fff8f1);
}

.position-map-summary-card strong {
  display: block;
  color: var(--color-text-primary, #2f2a25);
  font-size: 24px;
  line-height: 1.2;
}

.position-map-summary-card span {
  display: block;
  margin-top: 4px;
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
  line-height: 1.4;
}

.position-map-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.position-map-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
  font-weight: 700;
}

.position-map-filters select {
  min-width: 132px;
}

.position-map-check {
  flex-direction: row !important;
  align-items: center;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 12px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #2f2a25) !important;
  cursor: pointer;
}

.position-map-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.position-map-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-section, 18px);
  align-items: start;
}

.position-map-chart-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.position-map-axis-title {
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.position-map-axis-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
  font-weight: 700;
}

.position-map-axis-row span:last-child {
  text-align: right;
}

.position-map-canvas {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), var(--color-border-soft, #efe7dd) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), var(--color-border-soft, #efe7dd) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(135deg, rgba(184, 121, 74, 0.08), rgba(255, 255, 255, 0.88));
}

.position-map-quadrants {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none;
}

.position-map-quadrant {
  padding: 14px;
  color: var(--color-text-secondary, #6f665d);
}

.position-map-quadrant strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-primary, #2f2a25);
  font-size: 15px;
  line-height: 1.4;
}

.position-map-quadrant span {
  display: block;
  max-width: 300px;
  font-size: 12px;
  line-height: 1.55;
}

.position-map-point {
  position: absolute;
  z-index: 3;
  left: var(--point-x);
  top: var(--point-y);
  display: grid;
  place-items: center;
  width: var(--point-size);
  height: var(--point-size);
  border: 2px solid color-mix(in srgb, var(--point-color), white 28%);
  border-radius: 999px;
  background: var(--point-color);
  color: #fff;
  box-shadow: 0 6px 16px rgba(80, 55, 35, 0.16);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.position-map-point span {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  max-width: 108px;
  padding: 2px 7px;
  overflow: hidden;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary, #2f2a25);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.position-map-point:hover,
.position-map-point.selected {
  outline: 3px solid var(--color-accent-soft, #fff3e8);
  box-shadow: 0 8px 22px rgba(80, 55, 35, 0.22);
}

.position-map-side {
  position: sticky;
  top: calc(var(--topbar-height, 72px) + 12px);
  display: flex;
  flex-direction: column;
  gap: var(--space-card-gap, 12px);
}

.position-map-detail-card,
.position-map-today-card {
  padding: var(--space-card, 18px);
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: var(--radius-card, 14px);
  background: var(--color-surface, #fff);
}

.position-map-detail-empty,
.position-map-empty,
.position-map-empty-text {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--color-border, #e6ddd2);
  border-radius: 12px;
  color: var(--color-text-secondary, #6f665d);
  line-height: 1.7;
}

.position-map-detail-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.position-map-stage-dot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--point-color);
}

.position-map-detail-head strong {
  display: block;
  font-size: 18px;
  line-height: 1.35;
}

.position-map-detail-head span {
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
}

.position-map-detail-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.position-map-detail-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-border-soft, #efe7dd);
}

.position-map-detail-list dt {
  color: var(--color-text-secondary, #6f665d);
}

.position-map-detail-list dd {
  margin: 0;
  color: var(--color-text-primary, #2f2a25);
  font-weight: 700;
  text-align: right;
}

.position-map-recent-memo {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--color-border-soft, #efe7dd);
  border-radius: 10px;
  background: var(--color-surface-soft, #fff8f1);
  color: var(--color-text-secondary, #6f665d);
  line-height: 1.6;
}

.position-map-today-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.position-map-today-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--color-border, #e6ddd2);
  border-radius: 12px;
  background: var(--color-surface, #fff);
}

.position-map-today-item strong,
.position-map-today-item span {
  display: block;
}

.position-map-today-item span {
  margin-top: 3px;
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
  line-height: 1.5;
}

.customer-score-card .score-help {
  margin: 4px 0 0;
  color: var(--color-text-secondary, #6f665d);
  font-size: 12px;
  line-height: 1.5;
}

.position-score-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card-gap, 12px);
}

.position-score-editor label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-text-secondary, #6f665d);
  font-size: 13px;
  font-weight: 700;
}

:root[data-theme="dark"] .position-map-summary-card,
:root[data-theme="dark"] .position-map-check,
:root[data-theme="dark"] .position-map-detail-card,
:root[data-theme="dark"] .position-map-today-card,
:root[data-theme="dark"] .position-map-today-item {
  border-color: rgba(239, 183, 127, 0.2);
  background: var(--color-surface, #1f1d19);
  color: var(--color-text-primary, #f7f1e9);
}

:root[data-theme="dark"] .position-map-canvas {
  border-color: rgba(239, 183, 127, 0.22);
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(239, 183, 127, 0.18) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(239, 183, 127, 0.18) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(135deg, rgba(216, 149, 93, 0.12), rgba(31, 29, 25, 0.92));
}

:root[data-theme="dark"] .position-map-point span {
  border-color: rgba(239, 183, 127, 0.2);
  background: #2a241e;
  color: #f7f1e9;
}

:root[data-theme="dark"] .position-map-detail-empty,
:root[data-theme="dark"] .position-map-empty,
:root[data-theme="dark"] .position-map-empty-text {
  border-color: rgba(239, 183, 127, 0.24);
  color: #d7cec4;
}

:root[data-theme="dark"] .position-map-detail-list div {
  border-bottom-color: rgba(239, 183, 127, 0.14);
}

:root[data-theme="dark"] .position-map-recent-memo {
  border-color: rgba(239, 183, 127, 0.2);
  background: #2f261f;
  color: #d7cec4;
}

@media (max-width: 1180px) {
  .position-map-summary {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .position-map-workbench {
    grid-template-columns: 1fr;
  }

  .position-map-side {
    position: static;
  }
}

@media (max-width: 760px) {
  .position-map-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .position-map-filters {
    display: grid;
    grid-template-columns: 1fr;
  }

  .position-map-filters select {
    width: 100%;
  }

  .position-map-canvas {
    min-height: 460px;
  }

  .position-map-quadrant {
    padding: 10px;
  }

  .position-map-quadrant span {
    display: none;
  }

  .position-score-editor {
    grid-template-columns: 1fr;
  }
}

/* Use the full canvas when the sidebar is collapsed. */
.app-shell.sidebar-collapsed .sidebar-toggle-button {
  display: none !important;
}

.workspace,
.topbar,
.pwa-bar,
.mobile-home-view,
.queue-view,
.growth-loop-view,
.validation-lab-view,
.field-mode-view,
.sales-dashboard-view,
.dm-workspace-view,
.x-reply-view,
.x-dm-import-view,
.official-line-inbox-view,
.dm-sent-history-view,
.external-links-view,
.global-calendar-view,
.settings-view {
  width: 100%;
  max-width: none;
}

.workspace > :not(.hidden) {
  max-width: none;
}

/* Top navigation: flat icon row like the maTOmaru header reference. */
.top-actions.nav-shell {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  gap: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.top-actions.nav-shell .nav-primary-row {
  width: 100%;
  justify-content: flex-end;
  gap: 0;
}

.top-actions.nav-shell .nav-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.top-actions.nav-shell .nav-category-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: 900;
  box-shadow: none;
}

.top-actions.nav-shell .nav-category-button:hover {
  background: rgba(200, 135, 82, 0.08);
  color: var(--color-accent-text);
}

.top-actions.nav-shell .nav-category-button.active {
  border-color: transparent;
  background: rgba(200, 135, 82, 0.12);
  color: var(--color-accent-text);
  box-shadow: none;
}

.top-actions.nav-shell .nav-category-button.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -7px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-accent);
}

.top-actions.nav-shell .nav-category-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 760px), (display-mode: standalone) {
  .app-shell.sidebar-collapsed .topbar {
    margin-top: 52px;
  }

  .top-actions.nav-shell {
    width: 100%;
    justify-content: stretch;
  }

  .top-actions.nav-shell .nav-primary-row {
    width: 100%;
  }

  .top-actions.nav-shell .nav-primary {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .top-actions.nav-shell .nav-category-button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
  }

  .queue-actions button {
    min-height: 44px;
  }
}

@media (max-width: 620px) {
  .x-dm-import-panel > .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .x-dm-import-panel > .panel-header .button-row {
    width: 100%;
  }
}

.official-line-inbox-panel {
  display: grid;
  gap: 16px;
}

.official-line-lead {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--color-text-secondary);
}

.official-line-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.official-line-status-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.official-line-status-card span,
.official-line-detail-head span,
.official-line-linked-customer > span {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.official-line-status-card strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.official-line-status-message {
  min-height: 22px;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.official-line-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(112, 157, 128, 0.35);
  border-radius: 14px;
  background: rgba(221, 241, 228, 0.4);
}

.official-line-safety-note strong {
  flex: 0 0 auto;
  color: #3c7350;
}

.official-line-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.4fr);
  gap: 16px;
  min-width: 0;
}

.official-line-column {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.official-line-conversation-list,
.official-line-conversation-detail,
.official-line-message-list {
  display: grid;
  gap: 10px;
}

.official-line-conversation-card {
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--color-text);
  text-align: left;
}

.official-line-conversation-card:hover,
.official-line-conversation-card.active {
  border-color: var(--color-accent);
  background: rgba(200, 135, 82, 0.08);
}

.official-line-conversation-card:focus-visible {
  outline: 3px solid rgba(200, 135, 82, 0.35);
  outline-offset: 2px;
}

.official-line-conversation-head,
.official-line-detail-head,
.official-line-message > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.official-line-conversation-head small,
.official-line-detail-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(200, 135, 82, 0.14);
  color: var(--color-accent-text);
  font-size: 11px;
  font-weight: 800;
}

.official-line-conversation-preview {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-secondary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.official-line-conversation-card time,
.official-line-message time {
  color: var(--color-text-secondary);
  font-size: 11px;
}

.official-line-detail-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.official-line-detail-head > div,
.official-line-linked-customer {
  display: grid;
  gap: 3px;
}

.official-line-link-box,
.official-line-linked-customer {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(200, 135, 82, 0.35);
  border-radius: 14px;
  background: rgba(255, 248, 241, 0.72);
}

.official-line-link-box p {
  margin: 0;
  color: var(--color-text-secondary);
}

.official-line-link-box label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.official-line-link-box select {
  width: 100%;
  min-height: 44px;
}

.official-line-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.official-line-link-actions button,
.official-line-linked-customer button,
#refreshOfficialLineInboxButton {
  min-height: 44px;
}

.official-line-message {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.official-line-message.incoming {
  border-left: 4px solid #74a985;
}

.official-line-message.sent {
  border-left: 4px solid var(--color-accent);
}

.official-line-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.official-line-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--color-text-secondary);
}

@media (max-width: 1100px) {
  .official-line-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .official-line-layout {
    grid-template-columns: minmax(250px, 0.8fr) minmax(360px, 1.2fr);
  }
}

@media (max-width: 760px), (display-mode: standalone) {
  .official-line-inbox-panel > .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .official-line-status-grid,
  .official-line-layout {
    grid-template-columns: 1fr;
  }

  .official-line-safety-note,
  .official-line-link-actions {
    flex-direction: column;
  }

  .official-line-link-actions button,
  .official-line-linked-customer button,
  #refreshOfficialLineInboxButton {
    width: 100%;
  }
}

.today-reply-workspace {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 16px;
  display: grid;
  gap: 14px;
  cursor: default;
}

.today-reply-workspace:focus-visible {
  outline: 3px solid rgba(184, 121, 74, 0.32);
  outline-offset: 3px;
}

.today-reply-workspace button {
  min-height: 44px;
}

.today-reply-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.today-reply-workspace-head h4 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.45;
}

.today-reply-eyebrow {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.today-reply-steps {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  list-style: none;
}

.today-reply-steps li {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.today-reply-steps li.is-current {
  border-color: var(--color-accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.today-reply-status {
  min-height: 22px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.today-reply-status:empty {
  display: none;
}

.today-reply-status.is-error {
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  padding: 8px 10px;
}

.today-reply-status.is-success {
  border: 1px solid var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  padding: 8px 10px;
}

.today-reply-context-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.today-reply-context-card,
.today-reply-posts,
.today-reply-variants,
.today-reply-editor,
.today-reply-selected-source {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.today-reply-context-card {
  display: grid;
  align-content: start;
  gap: 10px;
}

.today-reply-context-heading,
.today-reply-section-heading,
.today-reply-post-meta,
.today-reply-variant-head,
.today-reply-editor label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 12px;
}

.today-reply-context-heading strong,
.today-reply-section-heading strong,
.today-reply-editor label > span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.today-reply-context-heading span,
.today-reply-section-heading span,
.today-reply-post-meta,
.today-reply-editor label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.today-reply-latest p,
.today-reply-message p,
.today-reply-post p,
.today-reply-variant p,
.today-reply-selected-source p {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.today-reply-latest p {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.today-reply-conversation {
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 8px;
  scrollbar-gutter: stable;
}

.today-reply-message {
  border-left: 3px solid var(--queue-reply-border);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 8px 9px;
  display: grid;
  gap: 4px;
}

.today-reply-message.is-sent {
  border-left-color: var(--color-accent);
}

.today-reply-message > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.today-reply-message p {
  font-size: 12px;
  line-height: 1.6;
}

.today-reply-carte {
  margin: 0;
  display: grid;
  gap: 7px;
}

.today-reply-carte > div {
  border-bottom: 1px dashed var(--line);
  padding-bottom: 7px;
  display: grid;
  gap: 2px;
}

.today-reply-carte > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.today-reply-carte dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.today-reply-carte dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.55;
}

.today-reply-empty,
.today-reply-source-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.today-reply-source-actions,
.today-reply-editor-actions,
.today-reply-post-actions,
.today-reply-outcomes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.today-reply-source-note {
  margin-top: -8px;
}

.today-reply-posts,
.today-reply-variants,
.today-reply-editor,
.today-reply-selected-source {
  display: grid;
  gap: 10px;
}

.today-reply-post-list,
.today-reply-variant-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.today-reply-post,
.today-reply-variant {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  padding: 11px;
  display: grid;
  align-content: start;
  gap: 9px;
}

.x-dm-mobile-reply-panel .today-reply-variant {
  border-color: var(--reply-assist-card-border);
  background: var(--reply-assist-card-bg);
}

.today-reply-post.is-selected,
.today-reply-variant.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.today-reply-post.is-sensitive {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.today-reply-post-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.today-reply-post-meta small {
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
}

.today-reply-post p,
.today-reply-variant p,
.today-reply-selected-source p {
  font-size: 13px;
  line-height: 1.65;
}

.today-reply-post-actions {
  align-self: end;
}

.today-reply-variant-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.today-reply-variant-head strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.today-reply-variant-head span,
.today-reply-selected-source > span,
.today-reply-selected-source small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.today-reply-selected-source {
  border-color: var(--color-accent);
  background: var(--accent-soft);
}

.today-reply-editor label {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.today-reply-editor textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  font: inherit;
  line-height: 1.7;
}

.today-reply-editor-actions {
  justify-content: flex-end;
}

.today-reply-outcomes {
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}

.today-reply-outcomes > span {
  margin-right: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.today-reply-next {
  margin-left: auto;
}

.today-reply-loading {
  display: grid;
  gap: 8px;
}

.today-reply-loading span {
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface) 20%, var(--accent-soft) 50%, var(--surface) 80%);
  background-size: 220% 100%;
  animation: today-reply-loading 1.4s ease-in-out infinite;
}

.today-reply-loading span:nth-child(2) {
  width: 82%;
}

.today-reply-loading span:nth-child(3) {
  width: 64%;
}

.today-reply-error {
  border: 1px solid var(--color-danger-border);
  border-radius: 10px;
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  padding: 12px;
  display: grid;
  gap: 8px;
}

.today-reply-error > span {
  font-size: 12px;
  line-height: 1.55;
}

.today-initial-dm-workspace {
  border-color: #c9c0df;
  background: linear-gradient(180deg, #fbf9ff 0%, var(--surface-soft) 100%);
}

.today-initial-dm-workspace .today-reply-eyebrow {
  color: #5c4c83;
}

.today-initial-dm-state-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.today-initial-dm-state-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.today-initial-dm-state-chip.is-complete {
  border-color: #9b8abf;
  background: #eee9f8;
  color: #49396e;
}

.today-initial-dm-recipient {
  min-width: 0;
  border: 1px solid #d8d1e8;
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.today-initial-dm-recipient > div {
  min-width: 0;
  flex: 1 1 260px;
  display: grid;
  gap: 3px;
}

.today-initial-dm-recipient > div span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.today-initial-dm-recipient strong,
.today-initial-dm-waiting,
.today-initial-dm-draft,
.today-initial-dm-grounding dd {
  overflow-wrap: anywhere;
}

.today-initial-dm-relationship {
  border: 1px solid #c9c0df;
  border-radius: 999px;
  background: #f0edf8;
  color: #4f426f;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
}

.today-initial-dm-waiting {
  border: 1px dashed #c9c0df;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  padding: 12px;
  display: grid;
  gap: 4px;
}

.today-initial-dm-waiting strong {
  color: var(--ink);
  font-size: 13px;
}

.today-initial-dm-waiting span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.today-initial-dm-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.today-initial-dm-elements span {
  border: 1px solid #d8d1e8;
  border-radius: 999px;
  background: #f7f4fc;
  color: #4f426f;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.today-initial-dm-grounding {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.today-initial-dm-grounding > div {
  min-width: 0;
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 9px;
  display: grid;
  gap: 3px;
}

.today-initial-dm-grounding dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.today-initial-dm-grounding dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.today-initial-dm-external-actions,
.today-initial-dm-recovery-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.today-initial-dm-recovery-actions {
  margin-top: 2px;
}
.today-reply-selected-source > button {
  justify-self: start;
}

.today-reply-editor .today-reply-post-used-check {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  padding: 9px 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
}

.today-reply-post-used-check input {
  width: 20px;
  min-height: 20px;
  grid-row: 1 / span 2;
  margin: 0;
}

.today-reply-editor .today-reply-post-used-check > span {
  font-size: 12px;
}

.today-reply-post-used-check small {
  line-height: 1.45;
}

@keyframes today-reply-loading {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (max-width: 1100px) {
  .today-reply-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-reply-latest {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px), (display-mode: standalone) {
  .today-reply-workspace {
    margin-inline: -4px;
    padding: 12px;
  }

  .today-reply-workspace-head,
  .today-reply-context-heading,
  .today-reply-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .today-reply-steps {
    width: 100%;
    justify-content: flex-start;
  }

  .today-reply-context-grid,
  .today-reply-post-list,
  .today-reply-variant-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-reply-latest {
    grid-column: auto;
  }

  .today-reply-source-actions,
  .today-reply-editor-actions,
  .today-reply-post-actions,
  .today-initial-dm-external-actions,
  .today-initial-dm-recovery-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .today-reply-source-actions button,
  .today-reply-editor-actions button,
  .today-reply-post-actions button,
  .today-initial-dm-external-actions button,
  .today-initial-dm-recovery-actions button {
    width: 100%;
  }

  .today-initial-dm-recipient {
    align-items: stretch;
    flex-direction: column;
  }

  .today-initial-dm-recipient > div {
    flex-basis: auto;
  }

  .today-initial-dm-recipient button {
    width: 100%;
  }

  .today-initial-dm-relationship {
    align-self: flex-start;
  }

  .today-initial-dm-grounding {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-reply-outcomes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-reply-outcomes > span,
  .today-reply-next {
    grid-column: 1 / -1;
    margin-left: 0;
  }

  .today-reply-outcomes button {
    width: 100%;
  }
}

/* Phase 5C: shared CRM interface refinements. */
.global-calendar-view {
  --calendar-font-legend: 11px;
  --calendar-font-small: 12px;
  --calendar-font-body: 13px;
  --calendar-font-medium: 14px;
  --calendar-font-title: 16px;
  --calendar-font-date: 32px;
}

:root[data-calendar-font-size="small"] .global-calendar-view {
  --calendar-font-legend: 11px;
  --calendar-font-small: 11px;
  --calendar-font-body: 12px;
  --calendar-font-medium: 13px;
  --calendar-font-title: 15px;
  --calendar-font-date: 28px;
}

:root[data-calendar-font-size="large"] .global-calendar-view {
  --calendar-font-legend: 12px;
  --calendar-font-small: 14px;
  --calendar-font-body: 15px;
  --calendar-font-medium: 16px;
  --calendar-font-title: 18px;
  --calendar-font-date: 36px;
}

.global-calendar-view .calendar-legend {
  font-size: var(--calendar-font-legend);
}

.global-calendar-view .calendar-weekday,
.global-calendar-view .calendar-number,
.global-calendar-view .reservation-badge,
.global-calendar-view .calendar-more,
.global-calendar-view .day-schedule-event span,
.global-calendar-view .day-unscheduled > strong,
.global-calendar-view .day-unscheduled-item span,
.global-calendar-view .reservation-sub,
.global-calendar-view .reservation-notes {
  font-size: var(--calendar-font-small);
}

.global-calendar-view .day-date-badge span,
.global-calendar-view .day-empty-on-grid {
  font-size: var(--calendar-font-body);
}

.global-calendar-view .day-hour-label,
.global-calendar-view .day-schedule-event strong,
.global-calendar-view .day-unscheduled-item strong,
.global-calendar-view .reservation-main {
  font-size: var(--calendar-font-medium);
}

.global-calendar-view .day-schedule-title h3 {
  font-size: var(--calendar-font-title);
}

.global-calendar-view .day-date-badge strong {
  font-size: var(--calendar-font-date);
}

.reservation-badge.calendar-draggable {
  cursor: grab;
}

.reservation-badge.calendar-draggable:active,
.reservation-badge.calendar-draggable.dragging {
  cursor: grabbing;
}

.reservation-badge.dragging {
  opacity: 0.48;
  transform: scale(0.98);
}

.calendar-day.calendar-drop-target {
  border-color: var(--color-accent, #c88752);
  background: var(--color-accent-soft, #fff6ea);
  box-shadow: 0 0 0 3px rgba(200, 135, 82, 0.2);
}

.reservation-context-menu {
  position: fixed;
  z-index: 1400;
  display: grid;
  min-width: 190px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid var(--color-border, #e2d7ca);
  border-radius: 10px;
  background: var(--color-surface, #fff);
  box-shadow: 0 14px 34px rgba(54, 38, 27, 0.2);
}

.reservation-context-menu.hidden {
  display: none !important;
}

.reservation-context-delete {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-danger-text, #9d3838);
  padding: 10px 12px;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.reservation-context-delete:hover {
  background: var(--color-danger-bg, #fff0ef);
}

.calendar-font-size-toggle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.appearance-button:focus-visible {
  outline: 3px solid rgba(200, 135, 82, 0.34);
  outline-offset: 2px;
}

.settings-top-feature-slot {
  grid-template-columns: 1fr;
}

.settings-top-feature-slot .daily-report-settings-card {
  grid-column: 1 / -1;
  grid-row: auto;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
  box-shadow: 0 12px 28px rgba(28, 43, 36, 0.09);
}

.settings-top-feature-slot button {
  min-height: 44px;
}

.settings-accordion {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.settings-section {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.settings-section > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}

.settings-section > summary::-webkit-details-marker {
  display: none;
}

.settings-section > summary::after {
  content: "開く";
  margin-left: auto;
  min-width: 3em;
  text-align: right;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.settings-section[open] > summary::after {
  content: "閉じる";
}

.settings-section > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: -3px;
}

.settings-section > summary > span:not(.settings-section-number) {
  display: grid;
  gap: 2px;
}

.settings-section > summary strong {
  font-size: 16px;
}

.settings-section > summary small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-section-number {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--accent-strong);
  font-weight: 900;
}

.settings-section-grid {
  margin: 0;
  padding: 0 16px 16px;
}

#appearanceSettingsSlot .appearance-settings-card {
  grid-column: 1 / -1;
}

.settings-card-body input.visually-hidden {
  width: 1px;
  height: 1px;
  min-height: 1px;
}

.settings-section button,
.settings-section .profile-icon-file-label,
.settings-top-feature-slot button,
.queue-actions button {
  min-height: 44px;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 44px;
}

.profile-auto-save-status.profile-context-hidden {
  display: none;
}

.top-actions.nav-shell {
  width: 100%;
}

.top-actions.nav-shell .nav-primary-row {
  width: 100%;
}

.dm-assist-profile-tools {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.dm-assist-profile-tools > #xOpenProfileButton {
  flex: 0 0 auto;
  height: 44px;
  min-height: 44px;
  margin-top: 30px;
}

.x-manual-customer-info {
  flex: 0 1 320px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
  min-width: 240px;
  max-width: 320px;
}

.x-manual-call-name-input {
  height: 44px;
  min-height: 44px;
}

.queue-item.handoff .queue-type {
  background: var(--queue-handoff-bg);
  box-shadow: inset 0 0 0 1px var(--queue-handoff-border);
  color: var(--queue-handoff-text);
}

.queue-item.reply .queue-type {
  background: var(--queue-reply-bg);
  box-shadow: inset 0 0 0 1px var(--queue-reply-border);
  color: var(--queue-reply-text);
}

@media (max-width: 720px) {
  .settings-section-grid,
  .settings-top-feature-slot {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dm-assist-profile-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .dm-assist-profile-tools > #xOpenProfileButton {
    width: 100%;
    margin-top: 0;
  }

  .x-manual-customer-info {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

/* カード見出し以下は既存の視覚体系を維持する。 */
@media (max-width: 620px) {
  .top-actions.nav-shell .nav-primary-row {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .top-actions.nav-shell .profile-auto-save-status {
    align-self: center;
    flex: 0 0 auto;
  }

  .top-actions.nav-shell .nav-primary {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* PC primary navigation: keep the maTOmaru logo and main destinations in one fixed-height rail. */
.sidebar-primary-nav {
  display: none;
}

.sidebar-status {
  display: none;
}

@media (min-width: 981px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 285px minmax(0, 1fr);
  }

  .sidebar,
  .app-shell.sidebar-collapsed .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    width: auto;
    min-width: 0;
    height: 100vh;
    max-height: 100vh;
    padding: 12px 10px;
    gap: 12px;
    border: 0;
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-bg-app);
    box-shadow: none;
    overflow: hidden;
    pointer-events: auto;
  }

  .sidebar > .brand,
  .app-shell.sidebar-collapsed .sidebar > .brand {
    position: static;
    display: flex;
    flex: none;
    width: auto;
    min-height: 44px;
    padding: 0;
    gap: 8px;
  }

  .sidebar > .brand .brand-title,
  .app-shell.sidebar-collapsed .sidebar > .brand .brand-title {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sidebar > .brand .brand-home-button,
  .app-shell.sidebar-collapsed .sidebar > .brand .brand-home-button {
    max-width: 100%;
    min-width: 0;
    gap: 5px;
  }

  .sidebar > .brand .logo-mascot,
  .app-shell.sidebar-collapsed .sidebar > .brand .logo-mascot {
    width: 42px;
    height: 42px;
  }

  .sidebar > .brand .logo-wordmark,
  .app-shell.sidebar-collapsed .sidebar > .brand .logo-wordmark {
    display: block;
    overflow: visible;
    font-size: 28.5px;
    text-overflow: clip;
    white-space: nowrap;
  }

  .sidebar > .brand .brand-actions,
  .app-shell.sidebar-collapsed .sidebar > .brand .brand-actions {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .sidebar > .brand #newCustomerButton {
    width: 44px;
    min-width: 44px;
    padding-inline: 10px;
  }

  .app-shell.sidebar-collapsed .brand-title,
  .app-shell.sidebar-collapsed .brand-title .eyebrow {
    display: block;
  }

  .app-shell.sidebar-collapsed .logo-mascot {
    width: 42px;
    height: 42px;
  }

  .app-shell.sidebar-collapsed .logo-wordmark {
    font-size: 28.5px;
  }

  .sidebar-primary-nav {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    gap: 4px;
    padding: 4px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .x-dm-inbox-tab span {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    word-break: keep-all;
  }

  .x-dm-inbox-tab em {
    white-space: nowrap;
  }

  .sidebar-status {
    display: grid;
    flex: none;
    gap: 7px;
    margin-top: auto;
    padding: 12px 12px 4px;
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.35;
  }

  .sidebar-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .sidebar-status-row strong {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }

  .sidebar-x-status {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--color-text-muted);
    font-weight: 800;
  }

  .sidebar-x-status-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-text-muted);
  }

  .sidebar-x-status.connected {
    color: var(--color-success-text);
  }

  .sidebar-x-status.connected .sidebar-x-status-dot {
    background: var(--color-success-text);
  }

  .sidebar-primary-nav .nav-category-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    text-align: left;
  }

  .sidebar-primary-nav .sidebar-nav-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sidebar-primary-nav .nav-category-button > span {
    min-width: 0;
  }

  .sidebar-primary-nav .nav-category-button:hover,
  .sidebar-primary-nav .nav-category-button:focus-visible {
    border-color: var(--color-border-strong);
    background: var(--color-surface-soft);
    color: var(--color-accent-text);
    outline: none;
  }

  .sidebar-primary-nav .nav-category-button.active {
    border-color: var(--color-accent);
    background: var(--color-surface-soft);
    color: var(--color-accent-text);
    box-shadow: inset 4px 0 0 var(--color-accent);
  }

  .sidebar > .sidebar-body,
  .app-shell.sidebar-collapsed .sidebar > .sidebar-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .app-shell:not([data-active-nav-category="customer"]) .sidebar > .sidebar-body {
    display: none;
  }

  .top-actions.nav-shell .nav-primary-mobile {
    display: none;
  }
}

@media (max-width: 980px) {
  .sidebar-primary-nav {
    display: none;
  }

  .top-actions.nav-shell .nav-primary-mobile {
    display: inline-flex;
  }
}

/* Keep the shared primary navigation available when page toolbars take over. */
@media (min-width: 761px) and (max-width: 980px) {
  .app-shell:is(
    [data-active-nav-category="booking"],
    [data-active-nav-category="sales"],
    [data-active-nav-category="external"],
    [data-active-nav-category="settings"]
  ) > .workspace > .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .app-shell:is(
    [data-active-nav-category="booking"],
    [data-active-nav-category="sales"],
    [data-active-nav-category="external"],
    [data-active-nav-category="settings"]
  ) > .workspace > .topbar > .top-actions.nav-shell {
    display: flex !important;
    order: -1;
  }
}

/* All customers on PC: common navigation | customer list | customer record. */
@media (min-width: 981px) {
  .app-shell[data-active-nav-category="customer"],
  .app-shell.sidebar-collapsed[data-active-nav-category="customer"] {
    grid-template-columns: 288px clamp(280px, 23vw, 320px) minmax(0, 1fr);
  }

  .app-shell[data-active-nav-category="customer"] > .sidebar,
  .app-shell.sidebar-collapsed[data-active-nav-category="customer"] > .sidebar {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px 0;
    background: linear-gradient(
      to right,
      var(--color-bg-app) 0,
      var(--color-bg-app) 288px,
      transparent 288px
    );
  }

  .app-shell[data-active-nav-category="customer"] > .sidebar > .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .app-shell[data-active-nav-category="customer"] > .sidebar > .sidebar-primary-nav {
    grid-column: 1;
    grid-row: 2;
    align-content: start;
    width: 252px;
  }

  .app-shell[data-active-nav-category="customer"] > .sidebar > .sidebar-status {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
  }

  .app-shell[data-active-nav-category="customer"] > .sidebar > .sidebar-body,
  .app-shell.sidebar-collapsed[data-active-nav-category="customer"] > .sidebar > .sidebar-body {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    height: 100%;
    margin-left: 10px;
  }

  .app-shell[data-active-nav-category="customer"] > .workspace {
    grid-column: 3;
  }

  .app-shell[data-active-nav-category="customer"] .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell[data-active-nav-category="customer"] .detail-center {
    grid-column: 1;
    grid-row: 1;
  }

  .app-shell[data-active-nav-category="customer"] .detail-right-column {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell[data-active-nav-category="customer"] .detail-right-column > .customer-top-calendar {
    grid-column: 1 / -1;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .app-shell[data-active-nav-category="customer"] .detail-center,
  .app-shell[data-active-nav-category="customer"] .detail-card-grid,
  .app-shell[data-active-nav-category="customer"] .customer-session-card-grid,
  .app-shell[data-active-nav-category="customer"] .detail-right-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell[data-active-nav-category="customer"] .detail-card-grid > .wide,
  .app-shell[data-active-nav-category="customer"] .detail-right-column > .customer-top-calendar {
    grid-column: 1;
  }
}

/* PC major-area frames: clarify only the outer regions without adding inner card borders. */
@media (min-width: 981px) {
  .ui-parent-frame {
    border: 1px solid var(--color-parent-border);
    border-radius: var(--radius-card);
    background-color: var(--color-parent-surface);
    box-shadow: none;
  }

  .ui-parent-sidebar {
    border-left: 0;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background-color: var(--color-bg-app);
  }

  .ui-parent-customer-list,
  .ui-parent-today,
  .ui-parent-dm-column {
    min-width: 0;
  }

  .sidebar > .ui-parent-customer-list,
  .panel.ui-parent-today,
  .x-dm-column.ui-parent-dm-column {
    border-color: var(--color-parent-border);
    background-color: var(--color-parent-surface);
    box-shadow: none;
  }

  .app-shell[data-active-nav-category="customer"] > .ui-parent-sidebar {
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .app-shell[data-active-nav-category="customer"] > .ui-parent-sidebar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 288px;
    border: 1px solid var(--color-parent-border);
    border-left: 0;
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    pointer-events: none;
  }
}

/* PC DM workspace: keep the customer cards, conversation, and customer record readable. */
@media (min-width: 981px) {
  .app-shell[data-active-nav-category="dm"],
  .app-shell.sidebar-collapsed[data-active-nav-category="dm"] {
    grid-template-columns: 288px minmax(0, 1fr);
  }

  .dm-workspace-view,
  .dm-workspace-view .x-dm-import-view {
    width: 100%;
    max-width: none;
  }

  .x-dm-import-panel {
    min-width: 0;
  }

  .x-dm-layout {
    grid-template-columns: minmax(210px, 260px) minmax(550px, 1fr) minmax(220px, 260px);
    gap: 12px;
    align-items: start;
  }

  .x-dm-layout > .x-dm-column {
    align-self: start;
    max-height: calc(100dvh - 164px);
    overflow-y: auto;
    overflow-x: clip;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .x-dm-message-thread {
    max-height: none;
    overflow: visible;
    padding: 2px 6px 2px 2px;
  }

  .x-dm-conversation-badges,
  .x-dm-conversation-badges em,
  .x-dm-detail-badges .badge,
  .x-dm-conversation-foot > span:last-child {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: keep-all;
  }

  .x-dm-detail-column > .x-dm-section-heading {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: end;
  }

  .x-dm-detail-column > .x-dm-section-heading h4 {
    white-space: nowrap;
    word-break: keep-all;
  }

  .x-dm-detail-column > .x-dm-section-heading span {
    justify-self: end;
    line-height: 1.4;
    text-align: right;
  }

  .x-dm-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .x-dm-detail-actions button {
    width: 100%;
  }

  .x-dm-customer-info-column .x-dm-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .x-dm-customer-info-column .x-dm-link-row label {
    min-width: 0;
    flex: none;
  }

  .x-dm-customer-info-column .x-dm-link-row label > span,
  .x-dm-customer-info-column .x-dm-link-row button {
    white-space: normal;
    word-break: normal;
  }

  .x-dm-conversation-top strong {
    min-width: 0;
  }

  .x-dm-customer-info-column .x-dm-link-row button {
    width: 100%;
    min-width: 0;
  }
}

@media (min-width: 981px) and (max-width: 1279px) {
  .x-dm-import-panel {
    padding: 14px;
  }

  .x-dm-layout {
    grid-template-columns: minmax(120px, 18fr) minmax(300px, 54fr) minmax(170px, 28fr);
    gap: 8px;
  }

  .x-dm-layout > .x-dm-column {
    padding: 12px;
  }

  .x-dm-customer-info-column {
    scroll-padding-bottom: 116px;
  }

  .x-dm-customer-info-column .x-dm-customer-profile-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .x-dm-customer-info-column .x-dm-customer-profile-actions button {
    width: 100%;
    min-width: 0;
  }

  .x-dm-inbox-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .x-dm-inbox-tab {
    font-size: 11px;
  }

  .x-dm-detail-column > .x-dm-section-heading,
  .x-dm-detail-actions,
  .x-dm-customer-info-column .x-dm-link-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .x-dm-detail-column > .x-dm-section-heading span {
    justify-self: start;
    font-size: 11px;
    text-align: left;
  }

  .x-dm-customer-info-column .x-dm-link-row button {
    min-width: 0;
    width: 100%;
  }
}

/* PC DM workspace density cleanup: one compact status area and a clear 3-column hierarchy. */
.x-dm-page-header {
  display: none;
}

@media (min-width: 981px) {
  .x-dm-import-panel {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .x-dm-page-header {
    display: flex;
    min-height: 42px;
    align-items: end;
    justify-content: space-between;
    padding: 0 2px 2px;
  }

  .x-dm-page-header .eyebrow {
    margin: 0 0 1px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .x-dm-page-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }

  .x-dm-page-title-row h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .x-dm-page-title-row span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
  }

  .x-dm-status-bar {
    min-height: 0;
    gap: 12px 16px;
    padding: 10px 14px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .x-dm-status-items {
    gap: 12px;
  }

  .x-dm-header-status-card {
    min-height: 44px;
    padding: 2px 10px;
  }

  .x-dm-header-sync-card {
    gap: 0;
  }

  .x-dm-header-sync-card > span {
    font-size: 10px;
    line-height: 1;
  }

  .x-dm-header-sync-card > strong {
    font-size: 17px;
    line-height: 1;
  }

  .x-dm-header-pin-copy {
    gap: 0;
  }

  .x-dm-header-pin-copy > small {
    line-height: 1.2;
  }

  .x-dm-status-item,
  .x-dm-connection-status {
    min-height: 0;
    padding-block: 0;
  }

  .x-dm-status-actions {
    align-self: center;
    margin-left: 0;
    gap: 12px;
  }

  .x-dm-status-actions .text-button,
  .x-dm-status-actions summary {
    min-height: 44px;
    font-size: 13px;
  }

  .x-dm-status-message {
    grid-area: message;
    max-width: 940px;
    padding-top: 0;
    border-top: 0;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-status-message:empty {
    display: none;
  }

  .x-dm-work-summary {
    gap: 6px;
  }

  .x-dm-work-summary-card {
    min-height: 50px;
    padding: 8px 10px;
    border-color: color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 11px;
    box-shadow: none;
  }

  .x-dm-work-summary-copy strong {
    overflow: visible;
    font-size: 16px;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
  }

  .x-dm-work-summary-card small {
    font-size: 10px;
  }

  .x-dm-queue-card:not(.x-dm-all-history-card) .x-dm-queue-card-top > b {
    display: none;
  }

  .x-dm-queue-profile-button > svg {
    fill: #000;
  }

  .x-dm-layout {
    gap: 10px;
    align-items: start;
  }

  .x-dm-layout > .x-dm-column {
    max-height: calc(100dvh - 226px);
    overflow-y: auto;
    overflow-x: clip;
    padding: 12px;
    border-color: color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: none;
  }

  .x-dm-section-heading {
    gap: 6px;
    margin-bottom: 9px;
  }

  .x-dm-section-heading h4 {
    font-size: 16px;
  }

  .x-dm-section-heading span {
    font-size: 11px;
  }

  .x-dm-tabs-slot {
    margin-bottom: 8px;
  }

  .x-dm-inbox-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
  }

  .x-dm-inbox-tab {
    min-height: 38px;
    padding: 5px 4px;
    border-color: transparent;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
  }

  .x-dm-inbox-tab:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
  }

  .x-dm-inbox-tab.active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: var(--accent-soft);
    box-shadow: none;
  }

  .x-dm-inbox-tab span {
    line-height: 1.2;
  }

  .x-dm-inbox-tab em {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    font-size: 10px;
    line-height: 1.4;
  }

  .x-dm-conversation-list {
    gap: 6px;
  }

  .x-dm-conversation {
    padding: 10px;
    border-radius: 10px;
    box-shadow: none;
  }

  .x-dm-conversation-wrap .x-dm-conversation {
    padding-right: 44px;
  }

  .x-dm-conversation-menu-button {
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    box-shadow: none;
  }

  .x-dm-detail-actions {
    gap: 6px;
  }

  .x-dm-detail-actions button {
    min-height: 40px;
  }

  .x-dm-link-row {
    gap: 6px;
    padding: 10px;
    border-radius: 10px;
  }

  .x-dm-message-thread {
    gap: 10px;
  }

  .x-dm-customer-info-item {
    padding: 9px 0;
  }

  .x-dm-customer-info .x-dm-empty.small {
    padding: 12px;
    border-style: solid;
    background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  }

  [data-xdm-legacy-sent-history],
  [data-xdm-empty-tab="sent_history"],
  .x-dm-sent-history-tools {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .x-dm-layout {
    grid-template-columns: minmax(190px, 19fr) minmax(520px, 60fr) minmax(240px, 21fr);
  }
}

@media (min-width: 981px) and (max-width: 1279px) {
  .x-dm-layout {
    grid-template-columns: minmax(120px, 18fr) minmax(300px, 54fr) minmax(170px, 28fr);
  }

  .x-dm-customer-identity {
    gap: 6px;
  }

  .x-dm-customer-identity strong {
    font-size: 14px;
  }

  .x-dm-customer-identity span {
    font-size: 11px;
  }

  .x-dm-conversation-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    overflow: hidden;
  }

  .x-dm-conversation-foot > span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-inbox-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .x-dm-page-title-row span {
    display: none;
  }
}

/* Smartphone X support: dedicated one-column screens that do not alter the PC workspace. */
.x-dm-mobile-app,
.x-dm-mobile-header,
.x-dm-mobile-only,
.mobile-bottom-nav,
.mobile-bottom-more-menu {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --mobile-bottom-nav-height: 72px;
  }

  .app-shell[data-active-nav-category="customer"] .sidebar > .sidebar-body > .search {
    display: none;
  }

  .app-shell[data-active-nav-category="customer"] .sidebar > .sidebar-body > .customer-seg-bar {
    display: none;
  }

  body {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
  }

  /* Keep the mobile wordmark in normal document flow so it never covers scrolled content. */
  .app-shell.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.sidebar-collapsed .sidebar {
    position: static;
    display: block;
    width: 100%;
    height: 74px;
    max-height: 74px;
    padding: 14px 16px 4px;
    border: 0;
    background: var(--color-bg-app);
    overflow: hidden;
    pointer-events: none;
  }

  .app-shell.sidebar-collapsed .sidebar > :not(.brand) {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .brand,
  .app-shell.sidebar-collapsed .sidebar > .brand {
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    min-height: 51px;
    padding: 0;
    pointer-events: auto;
  }

  .top-actions.nav-shell .nav-primary-mobile {
    display: none !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 1200;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--mobile-bottom-nav-height);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 -8px 24px rgb(58 44 34 / 8%);
    backdrop-filter: blur(14px);
  }

  .mobile-bottom-nav button {
    display: flex;
    min-width: 0;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 5px 2px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-bottom-nav button svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-bottom-nav button.active {
    background: var(--accent-soft);
    color: var(--accent-strong, var(--accent));
  }

  .mobile-bottom-more-menu {
    position: fixed;
    z-index: 1210;
    right: 10px;
    bottom: calc(var(--mobile-bottom-nav-height) + 10px + env(safe-area-inset-bottom));
    display: grid;
    width: min(220px, calc(100vw - 20px));
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 16px 44px rgb(47 35 27 / 18%);
  }

  .mobile-bottom-more-menu.hidden {
    display: none;
  }

  .mobile-bottom-more-menu button {
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-align: left;
  }

  .mobile-bottom-more-menu button:hover,
  .mobile-bottom-more-menu button:focus-visible {
    background: var(--surface-soft);
  }

  .floating-ai-chat-button {
    bottom: calc(var(--mobile-bottom-nav-height) + 14px + env(safe-area-inset-bottom));
  }

  .app-shell[data-active-nav-category="dm"],
  .app-shell.sidebar-collapsed[data-active-nav-category="dm"] {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .app-shell[data-active-nav-category="dm"] > .sidebar,
  .app-shell[data-active-nav-category="dm"] > .workspace > .topbar {
    display: none !important;
  }

  .app-shell[data-active-nav-category="dm"] > .workspace {
    width: 100%;
    min-width: 0;
    padding: 0 0 calc(var(--mobile-bottom-nav-height) + 12px);
  }

  .app-shell[data-active-nav-category="dm"] .dm-workspace-view,
  .app-shell[data-active-nav-category="dm"] .x-dm-import-view {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }

  .app-shell[data-active-nav-category="dm"] .x-dm-import-panel {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px 18px;
    border: 0;
    border-radius: 0;
    background: var(--bg, var(--color-bg-app));
    box-shadow: none;
  }

  .x-dm-page-header {
    display: none !important;
  }

  .x-dm-mobile-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 62px;
    align-items: center;
    gap: 10px;
    margin: 0 -12px;
    padding: 8px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(12px);
  }

  .x-dm-mobile-header h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
  }

  .x-dm-mobile-header span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
  }

  .x-dm-mobile-back {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    font-size: 30px;
    line-height: 1;
  }

  .x-dm-mobile-back.hidden {
    display: none;
  }

  .x-dm-status-bar {
    min-width: 0;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 13px;
  }

  .x-dm-status-items {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px 0;
  }

  .x-dm-status-item,
  .x-dm-connection-status {
    min-height: 24px;
    padding: 2px 8px;
    font-size: 11px;
  }

  .x-dm-status-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .x-dm-status-actions .text-button,
  .x-dm-status-actions summary {
    min-height: 38px;
    padding: 7px 9px;
    font-size: 12px;
  }

  .x-dm-status-message {
    width: 100%;
    max-width: 100%;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .x-dm-developer-details {
    display: none !important;
  }

  .x-dm-work-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .x-dm-work-summary-card {
    min-width: 0;
    min-height: 72px;
    gap: 7px;
    padding: 9px;
    border-radius: 13px;
  }

  .x-dm-work-summary-icon {
    width: 22px;
    height: 22px;
  }

  .x-dm-work-summary-copy strong {
    font-size: 12px;
  }

  .x-dm-work-summary-copy small {
    display: none;
  }

  .x-dm-work-summary-card > em {
    margin-left: auto;
    font-size: 20px;
  }

  .x-dm-layout {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .x-dm-layout > .x-dm-column {
    width: 100%;
    min-width: 0;
    max-height: none;
    padding: 12px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 15px;
    background: var(--surface);
  }

  .x-dm-section-heading {
    margin-bottom: 10px;
  }

  .x-dm-section-heading h4 {
    font-size: 17px;
  }

  .x-dm-section-heading span {
    font-size: 11px;
  }

  .x-dm-import-view[data-mobile-screen="home"] .x-dm-detail-column,
  .x-dm-import-view[data-mobile-screen="home"] .x-dm-customer-info-column,
  .x-dm-import-view[data-mobile-screen="detail"] .x-dm-layout > .x-dm-column:first-child,
  .x-dm-import-view[data-mobile-screen="detail"] .x-dm-customer-info-column,
  .x-dm-import-view[data-mobile-screen="customer"] .x-dm-layout > .x-dm-column:first-child,
  .x-dm-import-view[data-mobile-screen="customer"] .x-dm-detail-column,
  .x-dm-import-view[data-mobile-screen="posts"] .x-dm-layout > .x-dm-column:first-child,
  .x-dm-import-view[data-mobile-screen="posts"] .x-dm-customer-info-column {
    display: none !important;
  }

  .x-dm-import-view[data-mobile-screen="customer"] .x-dm-customer-info-column,
  .x-dm-import-view[data-mobile-screen="posts"] .x-dm-detail-column {
    display: block !important;
  }

  .x-dm-import-view:not([data-mobile-screen="home"]) .x-dm-status-bar,
  .x-dm-import-view:not([data-mobile-screen="home"]) .x-dm-work-summary {
    display: none;
  }

  .x-dm-import-view[data-mobile-screen="home"] .x-dm-tabs-slot {
    display: none;
  }

  .x-dm-import-view[data-mobile-screen="posts"] .x-dm-conversation-detail > :not(.x-dm-recent-posts) {
    display: none !important;
  }

  .x-dm-import-view[data-mobile-screen="detail"][data-mobile-kind="conversation"] .x-dm-conversation-detail > .x-dm-recent-posts {
    display: none;
  }

  .x-dm-mobile-only {
    display: block;
  }

  .x-dm-desktop-action {
    display: none !important;
  }

  .x-dm-mobile-detail-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .x-dm-mobile-detail-links:has(button:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  .x-dm-mobile-detail-links button,
  .x-dm-detail-actions button,
  .x-dm-post-reply-editor button {
    min-height: 44px;
    white-space: normal;
  }

  .x-dm-detail-head {
    align-items: flex-start;
    gap: 8px;
  }

  .x-dm-detail-identity {
    min-width: 0;
  }

  .x-dm-detail-identity strong,
  .x-dm-detail-identity span {
    overflow-wrap: anywhere;
  }

  .x-dm-detail-badges {
    max-width: 46%;
  }

  .x-dm-detail-actions,
  .x-dm-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .x-dm-link-row label,
  .x-dm-link-row button {
    width: 100%;
    min-width: 0;
  }

  .x-dm-message-thread {
    max-height: min(48dvh, 500px);
    padding-right: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .x-dm-message,
  .x-dm-message-body,
  .x-dm-message p,
  .x-dm-recent-post,
  .today-reply-variant {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .x-dm-mobile-reply-panel,
  .x-dm-recent-posts,
  .x-dm-relationship-initial-dm {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  .x-dm-mobile-reply-panel .today-reply-variant-list,
  .x-dm-relationship-initial-dm .today-reply-variant-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .x-dm-post-reply-editor textarea,
  .x-dm-mobile-reply-panel textarea {
    width: 100%;
    min-width: 0;
    resize: vertical;
  }

  .x-dm-recent-post-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .x-dm-recent-post-actions > * {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .x-dm-conversation-list,
  .x-dm-recent-post-list {
    gap: 8px;
  }

  .x-dm-queue-card {
    gap: 5px;
    padding: 11px;
    border-radius: 13px;
  }

  .x-dm-queue-card > strong {
    font-size: 15px;
  }

  .x-dm-queue-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .x-dm-customer-info-column .x-dm-section-heading {
    position: static;
  }

  .x-dm-customer-info-item,
  .x-dm-customer-response-status {
    padding-inline: 2px;
  }

  .x-dm-customer-response-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }

  .x-dm-customer-response-controls .text-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .x-dm-import-view[data-mobile-screen="posts"] .x-dm-recent-posts {
    margin: 0;
    padding: 0;
    border: 0;
  }
}

/* Smartphone X support v2: a self-contained five-screen application. */
@media (max-width: 760px) {
  .app-shell[data-active-nav-category="dm"] {
    overflow-x: clip;
    background: #f8f4ed;
  }

  .app-shell[data-active-nav-category="dm"] .x-dm-import-panel {
    display: block;
    padding: 0 0 calc(var(--mobile-bottom-nav-height) + 18px);
    overflow: visible;
    background: #f8f4ed;
  }

  .app-shell[data-active-nav-category="dm"] .x-dm-import-panel > :not(.x-dm-mobile-app) {
    display: none !important;
  }

  .app-shell[data-active-nav-category="dm"] .x-dm-mobile-app {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: calc(100dvh - var(--mobile-bottom-nav-height));
    color: #2d2926;
    background: #f8f4ed;
  }

  .x-dm-mobile-app .x-dm-mobile-header {
    position: sticky;
    z-index: 30;
    top: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 64px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid #e7ddd1;
    background: rgb(255 253 249 / 96%);
    box-shadow: 0 3px 16px rgb(57 46 36 / 5%);
    backdrop-filter: blur(14px);
  }

  .x-dm-mobile-app .x-dm-mobile-heading {
    min-width: 0;
    text-align: center;
  }

  .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-heading {
    text-align: left;
  }

  .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-back.hidden {
    display: none !important;
  }

  .x-dm-mobile-app .x-dm-mobile-heading h3 {
    margin: 0;
    color: #28231f;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    outline: none;
  }

  .x-dm-mobile-app .x-dm-mobile-heading span {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    color: #7b7066;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-mobile-app .x-dm-mobile-back,
  .x-dm-mobile-app .x-dm-mobile-sync {
    display: inline-grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3e3731;
  }

  .x-dm-mobile-app .x-dm-mobile-back:hover,
  .x-dm-mobile-app .x-dm-mobile-back:focus-visible,
  .x-dm-mobile-app .x-dm-mobile-sync:hover,
  .x-dm-mobile-app .x-dm-mobile-sync:focus-visible {
    background: #efe4d7;
    outline: 2px solid #b96532;
    outline-offset: -2px;
  }

  .x-dm-mobile-app .x-dm-mobile-back.hidden {
    visibility: hidden;
    display: inline-grid !important;
  }

  .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-sync {
    width: auto;
    padding-inline: 4px;
    border-radius: 8px;
    color: #1769aa;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  .x-dm-mobile-app:not([data-mobile-screen="home"]) .x-dm-mobile-sync {
    visibility: hidden;
    pointer-events: none;
  }

  .x-dm-mobile-app .x-dm-mobile-back svg,
  .x-dm-mobile-app .x-dm-mobile-sync svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .x-dm-mobile-connection {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid #eadfd4;
    background: #fffdf9;
  }

  .x-dm-mobile-connection.hidden {
    display: none;
  }

  .x-dm-mobile-connection > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    font-size: 12px;
  }

  .x-dm-mobile-connection i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #9a8f85;
    box-shadow: 0 0 0 3px rgb(154 143 133 / 12%);
  }

  .x-dm-mobile-connection .connected i {
    background: #5d8b70;
    box-shadow: 0 0 0 3px rgb(93 139 112 / 13%);
  }

  .x-dm-mobile-connection .error i {
    background: #b94f43;
    box-shadow: 0 0 0 3px rgb(185 79 67 / 13%);
  }

  .x-dm-mobile-connection small {
    color: #8b8076;
    font-size: 10px;
    white-space: nowrap;
  }

  .x-dm-mobile-content {
    width: 100%;
    min-width: 0;
    padding: 14px 12px 22px;
    overflow-x: clip;
  }

  .x-dm-mobile-screen {
    display: grid;
    min-width: 0;
    gap: 14px;
  }

  .x-dm-mobile-section-title {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .x-dm-mobile-section-title h4 {
    margin: 0;
    color: #302924;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
  }

  .x-dm-mobile-section-title span {
    color: #897d73;
    font-size: 10px;
    line-height: 1.35;
  }

  .x-dm-mobile-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .x-dm-mobile-summary-card {
    display: flex;
    min-width: 0;
    min-height: 74px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    border: 1px solid #eadfd4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(68 51 38 / 4%);
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .x-dm-mobile-summary-card:hover,
  .x-dm-mobile-summary-card:focus-visible {
    border-color: #c87c47;
    background: #fff8f1;
    outline: 3px solid rgb(200 124 71 / 18%);
    outline-offset: 1px;
  }

  .x-dm-mobile-summary-card > span {
    color: #655b53;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
  }

  .x-dm-mobile-summary-card strong {
    align-self: flex-end;
    color: #b65f2e;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
  }

  .x-dm-mobile-summary-card strong small {
    margin-left: 2px;
    color: #8a7d72;
    font-size: 10px;
  }

  .x-dm-mobile-summary-card[data-xdm-mobile-summary="completed_today"] {
    grid-column: 1 / -1;
  }

  .x-dm-mobile-task-list {
    display: grid;
    gap: 9px;
  }

  .x-dm-mobile-task-card {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #eadfd4;
    border-radius: 15px;
    background: #fff;
    color: #302924;
    box-shadow: 0 6px 20px rgb(68 51 38 / 5%);
    font: inherit;
    text-align: left;
  }

  .x-dm-mobile-task-card:hover,
  .x-dm-mobile-task-card:focus-visible {
    border-color: #c78155;
    outline: 2px solid rgb(185 101 50 / 32%);
    outline-offset: 1px;
  }

  .x-dm-mobile-task-avatar,
  .x-dm-mobile-avatar {
    display: grid;
    overflow: hidden;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #efdfce;
    border-radius: 50%;
    background: #fbefe2;
  }

  .x-dm-mobile-task-avatar {
    width: 42px;
    height: 42px;
  }

  .x-dm-mobile-task-avatar img,
  .x-dm-mobile-avatar img {
    width: 86%;
    height: 86%;
    object-fit: contain;
  }

  .x-dm-mobile-task-body {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .x-dm-mobile-task-top {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .x-dm-mobile-task-top em {
    padding: 2px 7px;
    border-radius: 999px;
    background: #fbe4de;
    color: #a94c40;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
  }

  .x-dm-mobile-task-top em[data-queue-type="new_follow"] {
    background: #e7f2f5;
    color: #377487;
  }

  .x-dm-mobile-task-top em[data-queue-type="follow_back"] {
    background: #f9ead8;
    color: #9a6423;
  }

  .x-dm-mobile-task-top time {
    color: #968a80;
    font-size: 13.5px;
    white-space: nowrap;
  }

  .x-dm-mobile-task-body > strong {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-mobile-task-body > small {
    overflow: hidden;
    color: #8a7d72;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-mobile-task-body > span:last-child {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: #62584f;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .x-dm-mobile-task-card > svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #aa9c90;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .x-dm-mobile-person {
    display: grid;
    min-width: 0;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 2px 0 12px;
    border-bottom: 1px solid #e9ded3;
  }

  .x-dm-mobile-avatar {
    width: 50px;
    height: 50px;
  }

  .x-dm-mobile-person-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .x-dm-mobile-person-copy strong {
    overflow: hidden;
    color: #2e2925;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-mobile-person-copy small {
    overflow: hidden;
    color: #82766c;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-mobile-person > em {
    max-width: 118px;
    padding: 4px 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #f3e4d7;
    color: #8d532d;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .x-dm-mobile-thread-section,
  .x-dm-mobile-reply-panel,
  .x-dm-mobile-link-panel,
  .x-dm-mobile-response-card,
  .x-dm-mobile-follow-status,
  .x-dm-mobile-follow-posts,
  .x-dm-mobile-posts-screen > .x-dm-recent-posts,
  .x-dm-mobile-follow-screen > .x-dm-relationship-initial-dm {
    min-width: 0;
    padding: 13px;
    border: 1px solid #eadfd4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(68 51 38 / 4%);
  }

  .x-dm-mobile-message-thread {
    display: flex;
    max-height: min(42dvh, 380px);
    min-height: 150px;
    flex-direction: column;
    gap: 9px;
    margin-top: 11px;
    padding: 10px 4px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .x-dm-mobile-message-thread .x-dm-message {
    width: fit-content;
    min-width: 0;
    max-width: 86%;
    padding: 9px 10px;
    border: 1px solid #ece2d8;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    box-shadow: 0 3px 10px rgb(62 48 37 / 4%);
  }

  .x-dm-mobile-message-thread .x-dm-message.incoming {
    align-self: flex-start;
  }

  .x-dm-mobile-message-thread .x-dm-message.outgoing {
    align-self: flex-end;
    border-color: #ead8c7;
    border-radius: 14px 14px 4px 14px;
    background: #f8ecdf;
  }

  .x-dm-mobile-message-thread .x-dm-message-meta {
    gap: 5px;
    color: #95887d;
    font-size: 8px;
  }

  .x-dm-mobile-message-thread .x-dm-message-body {
    margin-top: 3px;
    color: #3b342e;
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .x-dm-mobile-message-thread .x-dm-date-separator {
    width: 100%;
    align-self: stretch;
  }

  .x-dm-mobile-app .x-dm-mobile-only {
    display: block;
  }

  .x-dm-mobile-app .x-dm-mobile-reply-panel,
  .x-dm-mobile-app .x-dm-recent-posts,
  .x-dm-mobile-app .x-dm-relationship-initial-dm {
    margin: 0;
    padding-top: 13px;
    border-top: 1px solid #eadfd4;
  }

  .x-dm-mobile-app .x-dm-mobile-reply-panel {
    padding: 13px;
    border: 1px solid #eadfd4;
  }

  .x-dm-mobile-app .x-dm-reply-draft-composer {
    margin: 0;
    padding: 13px;
    border: 1px solid #eadfd4;
  }

  .x-dm-mobile-app .x-dm-reply-draft-heading,
  .x-dm-mobile-app .x-dm-reply-draft-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .x-dm-mobile-app .x-dm-reply-draft-heading > span {
    width: fit-content;
    max-width: 100%;
  }

  .x-dm-mobile-app .x-dm-reply-draft-actions .secondary-button {
    width: 100%;
  }

  .x-dm-mobile-app .today-reply-variant-list,
  .x-dm-mobile-app .x-dm-post-reply-variant-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .x-dm-mobile-app .today-reply-variant {
    min-width: 0;
    padding: 11px;
    border-radius: 12px;
    overflow-wrap: anywhere;
  }

  .x-dm-mobile-app textarea,
  .x-dm-mobile-app select,
  .x-dm-mobile-app input {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  .x-dm-mobile-app button,
  .x-dm-mobile-app a.text-button {
    min-height: 44px;
  }

  .x-dm-mobile-related-grid,
  .x-dm-mobile-action-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .x-dm-mobile-related-grid button,
  .x-dm-mobile-action-bar button {
    width: 100%;
    min-width: 0;
    height: auto;
    white-space: normal;
  }

  .x-dm-mobile-action-bar .x-dm-complete-button {
    border-color: #b96532;
    background: #b96532;
    color: #fff;
  }

  .x-dm-mobile-action-bar.is-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .x-dm-mobile-link-panel {
    display: grid;
    gap: 9px;
  }

  .x-dm-mobile-link-panel > strong {
    color: #493f37;
    font-size: 13px;
  }

  .x-dm-mobile-link-panel > span,
  .x-dm-mobile-link-panel label > span {
    color: #766a61;
    font-size: 11px;
    line-height: 1.5;
  }

  .x-dm-mobile-link-panel label {
    display: grid;
    gap: 5px;
  }

  .x-dm-mobile-link-panel > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .x-dm-mobile-customer-list {
    display: grid;
    margin: 0;
    border: 1px solid #eadfd4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(68 51 38 / 4%);
  }

  .x-dm-mobile-customer-list > div {
    display: grid;
    gap: 7px;
    padding: 14px;
    border-bottom: 1px solid #eee5dc;
  }

  .x-dm-mobile-customer-list > div:last-child {
    border-bottom: 0;
  }

  .x-dm-mobile-customer-list dt {
    color: #7b6f65;
    font-size: 10px;
    font-weight: 800;
  }

  .x-dm-mobile-customer-list dd {
    margin: 0;
    color: #332d28;
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .x-dm-mobile-customer-list .is-empty dd {
    color: #9a8e84;
  }

  .x-dm-mobile-customer-list .x-dm-customer-profile-head {
    align-items: center;
  }

  .x-dm-mobile-customer-list .x-dm-customer-profile-edit,
  .x-dm-mobile-customer-list .x-dm-customer-profile-actions button {
    min-height: 44px;
  }

  .x-dm-mobile-customer-list .x-dm-customer-profile-editor textarea {
    min-height: 120px;
    font-size: 16px;
  }

  .x-dm-mobile-response-card {
    display: grid;
    gap: 10px;
  }

  .x-dm-mobile-response-card h4 {
    margin: 0;
    font-size: 14px;
  }

  .x-dm-mobile-response-card > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid #eee5dc;
  }

  .x-dm-mobile-response-card span,
  .x-dm-mobile-response-card label {
    color: #756960;
    font-size: 10px;
  }

  .x-dm-mobile-response-card strong {
    color: #3d352f;
    font-size: 11px;
  }

  .x-dm-mobile-response-card .x-dm-mobile-next-response {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .x-dm-mobile-next-response label,
  .x-dm-mobile-next-response input,
  .x-dm-mobile-next-response button,
  .x-dm-mobile-next-response small {
    grid-column: 1 / -1;
  }

  .x-dm-mobile-follow-status {
    display: grid;
    gap: 5px;
  }

  .x-dm-mobile-follow-status span {
    color: #7d7167;
    font-size: 10px;
    font-weight: 800;
  }

  .x-dm-mobile-follow-status strong {
    color: #342e29;
    font-size: 13px;
  }

  .x-dm-mobile-follow-status small {
    color: #887b71;
    font-size: 10px;
    line-height: 1.5;
  }

  .x-dm-mobile-follow-status .x-dm-mobile-profile-button {
    width: 100%;
    margin-top: 5px;
  }

  .x-dm-mobile-app .x-dm-recent-post-list {
    display: grid;
    gap: 9px;
    margin-top: 10px;
  }

  .x-dm-mobile-app .x-dm-recent-post {
    min-width: 0;
    padding: 11px;
    border: 1px solid #ece2d8;
    border-radius: 12px;
    background: #fffdf9;
    overflow-wrap: anywhere;
  }

  .x-dm-mobile-app .x-dm-recent-post-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .x-dm-mobile-app .x-dm-recent-post-actions > * {
    width: 100%;
    min-width: 0;
    text-align: center;
    white-space: normal;
  }

  .x-dm-mobile-empty {
    display: grid;
    gap: 8px;
    padding: 22px 16px;
    border: 1px dashed #d9c9ba;
    border-radius: 15px;
    background: #fffdf9;
    color: #786c62;
    text-align: center;
  }

  .x-dm-mobile-empty strong {
    color: #473f38;
    font-size: 13px;
  }

  .x-dm-mobile-empty span {
    font-size: 11px;
    line-height: 1.6;
  }

  .x-dm-mobile-empty button {
    margin-top: 4px;
  }

  .mobile-bottom-nav {
    padding-inline: 5px;
    border-color: #e5d8cb;
    background: rgb(255 253 249 / 97%);
  }

  .mobile-bottom-nav button {
    min-height: 58px;
    border-radius: 10px;
    color: #756a61;
    font-size: 10px;
  }

  .mobile-bottom-nav button.active {
    background: transparent;
    color: #b65f2e;
  }

  .mobile-bottom-nav button.active::before {
    position: absolute;
    top: 2px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
  }

  .mobile-bottom-nav button {
    position: relative;
  }

  body:has(.app-shell[data-active-nav-category="dm"]) .floating-ai-chat-button,
  body:has(.app-shell[data-active-nav-category="dm"]) .floating-ai-encouragement-bubble {
    display: none;
  }
}

@media (max-width: 380px) {
  .x-dm-mobile-content {
    padding-inline: 10px;
  }

  .x-dm-mobile-app .x-dm-mobile-header {
    padding-inline: 8px;
  }

  .x-dm-mobile-summary-card,
  .x-dm-mobile-task-card,
  .x-dm-mobile-thread-section,
  .x-dm-mobile-reply-panel,
  .x-dm-mobile-link-panel,
  .x-dm-mobile-response-card,
  .x-dm-mobile-follow-status,
  .x-dm-mobile-follow-posts,
  .x-dm-mobile-posts-screen > .x-dm-recent-posts,
  .x-dm-mobile-follow-screen > .x-dm-relationship-initial-dm {
    padding: 11px;
  }

  .x-dm-mobile-related-grid,
  .x-dm-mobile-action-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .x-dm-mobile-person > em {
    max-width: 92px;
  }
}

/* Smartphone booking calendar: use the available width like a native month view. */
@media (max-width: 760px) {
  .app-shell.sidebar-collapsed[data-active-nav-category="booking"] > .sidebar > .brand {
    position: absolute;
  }

  .app-shell[data-active-nav-category="booking"] > .workspace {
    padding-inline: 4px;
  }

  .app-shell[data-active-nav-category="booking"] #globalCalendarView > .panel {
    padding-inline: 6px;
  }

  .app-shell[data-active-nav-category="booking"] #globalCalendar {
    column-gap: 2px;
    row-gap: 4px;
  }

  .app-shell[data-active-nav-category="booking"] #globalCalendar .calendar-weekday,
  .app-shell[data-active-nav-category="booking"] #globalCalendar .calendar-day,
  .app-shell[data-active-nav-category="booking"] #globalCalendar .reservation-badge {
    min-width: 0;
  }

  .app-shell[data-active-nav-category="booking"] #globalCalendar .calendar-day {
    padding: 7px 3px;
    overflow: hidden;
    border-radius: 6px;
  }

  .app-shell[data-active-nav-category="booking"] #globalCalendar .reservation-badge {
    padding-inline: 2px;
  }
}

/* PC X support: fill the remaining viewport while each column scrolls independently. */
@media (min-width: 981px) {
  .app-shell[data-active-nav-category="dm"] > .workspace {
    display: flex;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .app-shell[data-active-nav-category="dm"] > .workspace > .topbar {
    flex: 0 0 auto;
  }

  .app-shell[data-active-nav-category="dm"] .dm-workspace-view {
    flex: 1 1 auto;
    min-height: 0;
  }

  .app-shell[data-active-nav-category="dm"] .x-dm-import-view,
  .app-shell[data-active-nav-category="dm"] .x-dm-import-panel {
    height: 100%;
    min-height: 0;
  }

  .app-shell[data-active-nav-category="dm"] .x-dm-import-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .app-shell[data-active-nav-category="dm"] .x-dm-layout {
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .app-shell[data-active-nav-category="dm"] .x-dm-layout > .x-dm-column {
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: none;
  }
}

/* Today dashboard workspace */
.today-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
  min-width: 0;
  align-items: start;
  gap: 12px;
}

.today-workspace-column {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.today-workspace-column .today-overview-section + .today-overview-section {
  padding-top: 0;
  border-top: 0;
}

.today-dashboard-card {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 7px 20px rgba(83, 60, 38, 0.055);
}

.today-dashboard-card-heading {
  display: flex;
  min-width: 0;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.today-dashboard-card-heading > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.today-dashboard-card-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.today-dashboard-heading-icon {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.today-required-task-icon {
  color: var(--muted);
}

.today-overview-stat-grid .queue-stat.records .today-required-task-glyph {
  width: 18px;
  height: 18px;
}

.today-tasks-section .today-required-task-glyph {
  width: 20px;
  height: 20px;
}

.today-dashboard-x-icon {
  font-family: Arial, sans-serif;
}

.today-dashboard-item-icon {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}

.today-dashboard-text-button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  padding: 7px 4px 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.today-dashboard-text-button:hover,
.today-dashboard-footer-button:hover {
  background: var(--surface-soft);
}

.today-dashboard-text-button span,
.today-dashboard-footer-button span {
  font-size: 20px;
  line-height: 0.8;
}

.today-reservation-timeline,
.today-task-list,
.today-tomorrow-list {
  gap: 0;
}

.today-reservation-timeline {
  position: relative;
  padding: 4px 14px 2px;
}

.today-reservation-timeline::before {
  position: absolute;
  z-index: 0;
  top: 22px;
  bottom: 22px;
  left: 20px;
  width: 1px;
  background: rgba(180, 105, 55, 0.32);
  content: "";
}

.today-reservation-card {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: 14px 48px minmax(104px, 0.9fr) auto 45px minmax(74px, 0.75fr) minmax(120px, 1.2fr);
  min-width: 0;
  min-height: 49px;
  align-items: center;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 4px;
  text-align: left;
}

.today-reservation-card:last-child,
.today-task-card:last-child,
.today-tomorrow-card:last-child {
  border-bottom: 0;
}

.today-reservation-card:hover,
.today-tomorrow-card:hover,
.today-task-card:hover {
  background: var(--surface-soft);
}

.today-reservation-card:focus-visible,
.today-tomorrow-card:focus-visible,
.today-task-card:focus-visible,
.today-quick-action-grid button:focus-visible,
.today-dashboard-text-button:focus-visible,
.today-dashboard-footer-button:focus-visible {
  position: relative;
  z-index: 2;
  outline: 3px solid rgba(184, 121, 74, 0.25);
  outline-offset: -2px;
}

.today-timeline-dot {
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(180, 105, 55, 0.22);
}

.today-reservation-row-time,
.today-reservation-row-duration,
.today-reservation-row-place,
.today-reservation-row-course {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.today-reservation-row-time {
  font-variant-numeric: tabular-nums;
}

.today-reservation-row-customer {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.today-visit-type {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #fff0df;
  color: #a95f2c;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.today-visit-type.repeat {
  background: #eaf4fa;
  color: #3f789c;
}

.today-reservation-row-place,
.today-reservation-row-course {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-reservation-row-duration,
.today-reservation-row-place,
.today-reservation-row-course {
  position: relative;
  padding-left: 10px;
}

.today-reservation-row-duration::before,
.today-reservation-row-place::before,
.today-reservation-row-course::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 17px;
  background: var(--line);
  content: "";
  transform: translateY(-50%);
}

.today-dashboard-footer-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.today-task-list {
  padding: 3px 14px 9px;
}

.today-task-card {
  display: grid;
  grid-template-columns: 24px minmax(150px, 1fr) minmax(86px, auto) 47px 54px;
  min-width: 0;
  min-height: 49px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 4px 2px;
  text-align: left;
}

.today-task-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
}

.today-task-copy {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.today-task-copy strong {
  margin-right: 4px;
  font-size: 12px;
}

.today-task-type {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #eaf4fa;
  color: #3f789c;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.today-task-card.post_session_memo .today-task-type,
.today-task-card.profile_gap .today-task-type {
  background: #eaf5e9;
  color: #4e7c58;
}

.today-task-card.manual_followup .today-task-type {
  background: #fff0df;
  color: #a95f2c;
}

.today-task-priority {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.today-task-priority b {
  color: #c45745;
  font-size: 15px;
  line-height: 1;
}

.today-task-priority.medium b {
  color: #c88b3f;
}

.today-task-priority.low b {
  color: #6f96a9;
}

.today-task-card time {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}

.today-task-overflow.hidden {
  display: none;
}

.today-x-summary-section {
  padding: 0;
  border-color: var(--line);
  background: var(--surface);
}

.today-x-summary-list {
  display: grid;
  padding: 3px 14px 7px;
}

.today-x-summary-list > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  min-height: 43px;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 9px 1px;
}

.today-x-summary-list > div:last-child {
  border-bottom: 0;
}

.today-x-summary-list > div > span,
.today-x-summary-list > div > .today-dashboard-item-icon {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.today-x-summary-list > div > .today-dashboard-item-icon {
  justify-self: center;
}

.today-x-summary-list strong {
  color: var(--ink);
  font-size: 12px;
}

.today-x-summary-list b {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--accent-strong);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.today-x-summary-list b small {
  font-size: 10px;
}

.today-x-open-button {
  justify-self: auto;
  width: calc(100% - 28px);
  min-width: 0;
  min-height: 40px;
  margin: 0 14px 12px;
  border: 1px solid rgba(184, 121, 74, 0.46);
  border-radius: 7px;
}

.today-tomorrow-list {
  padding: 3px 14px 0;
}

.today-tomorrow-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 5px 2px;
  text-align: left;
}

.today-tomorrow-card > time,
.today-tomorrow-card > span {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.today-tomorrow-card > strong {
  min-width: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.today-tomorrow-total {
  min-height: 37px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.today-quick-actions-section .today-dashboard-card-heading {
  border-bottom: 0;
}

.today-quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0 14px 14px;
}

.today-quick-action-grid button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(184, 121, 74, 0.46);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.today-quick-action-grid button:hover {
  border-color: var(--accent-strong);
  background: var(--surface-soft);
}

.today-quick-action-grid button > span {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--accent-strong);
  font-size: 20px;
  line-height: 1;
}

.today-quick-action-grid button > .today-quick-action-icon {
  flex-basis: 22px;
  color: var(--accent-strong);
}

.today-dashboard-card .today-empty-state {
  min-height: 72px;
  margin: 12px 14px;
}

:root[data-theme="dark"] .today-dashboard-card,
:root[data-theme="dark"] .today-reservation-card,
:root[data-theme="dark"] .today-task-card,
:root[data-theme="dark"] .today-tomorrow-card,
:root[data-theme="dark"] .today-quick-action-grid button {
  background: var(--surface);
}

@media (max-width: 1180px) {
  .today-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-workspace-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .today-workspace-side .today-quick-actions-section {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px), (display-mode: standalone) {
  .today-workspace-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-workspace-side .today-quick-actions-section {
    grid-column: auto;
  }

  .today-dashboard-card-heading {
    align-items: flex-start;
  }

  .today-dashboard-text-button {
    min-height: 44px;
    max-width: 47%;
    padding-top: 4px;
    padding-bottom: 4px;
    white-space: normal;
    text-align: right;
  }

  .today-reservation-card {
    grid-template-columns: 14px 46px minmax(0, 1fr) auto;
    gap: 7px;
    padding-block: 7px;
  }

  .today-reservation-row-duration,
  .today-reservation-row-place,
  .today-reservation-row-course {
    grid-column: 3 / -1;
    padding-left: 0;
  }

  .today-reservation-row-duration {
    display: none;
  }

  .today-reservation-row-place::before,
  .today-reservation-row-course::before {
    display: none;
  }

  .today-reservation-row-place,
  .today-reservation-row-course {
    font-size: 11px;
  }

  .today-task-card {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 7px;
    padding-block: 8px;
  }

  .today-task-type {
    grid-column: 2;
    justify-self: start;
  }

  .today-task-priority {
    grid-column: 3;
    grid-row: 1;
  }

  .today-task-card time {
    grid-column: 3;
    grid-row: 2;
  }

  .today-quick-action-grid {
    gap: 8px;
  }

  .today-quick-action-grid button {
    min-height: 54px;
    padding: 8px 9px;
    font-size: 11px;
  }
}

/* X support: let customer cards use the full width of their outer column. */
@media (min-width: 981px) {
  .x-dm-layout > .x-dm-column:first-child {
    padding-inline: 0;
    scrollbar-gutter: auto;
  }

  .x-dm-layout > .x-dm-column:first-child .x-dm-queue-empty-count {
    margin-inline: 12px;
  }

  .x-dm-layout > .x-dm-column:first-child .x-dm-conversation-list,
  .x-dm-layout > .x-dm-column:first-child .x-dm-queue-card-wrap,
  .x-dm-layout > .x-dm-column:first-child .x-dm-queue-card {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 761px) {
  .today-overview-stat-grid .queue-stat[data-today-summary-target] {
    cursor: pointer;
  }

  .today-overview-stat-grid .queue-stat[data-today-summary-target]:hover,
  .today-overview-stat-grid .queue-stat[data-today-summary-target]:focus-visible {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(183, 111, 54, 0.14);
  }

  .today-overview-stat-grid .queue-stat.x-summary .queue-stat-x-icon {
    color: #1f1f1f;
  }

  .today-tasks-section .today-task-card {
    grid-template-columns: 24px minmax(150px, 1fr) minmax(86px, auto) 54px;
  }
}

/* Keep the compact PC header clear of the absolute wordmark at the 761px boundary. */
@media (min-width: 761px) and (max-width: 980px) {
  .sidebar > .brand #newCustomerButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 8px;
  }

  .app-shell.sidebar-collapsed .brand {
    top: 10px;
    left: 14px;
  }

  .app-shell.sidebar-collapsed .sidebar > .brand .logo-mascot {
    width: 28px;
    height: 28px;
  }

  .app-shell.sidebar-collapsed .sidebar > .brand .logo-wordmark {
    font-size: 18px;
  }

  .app-shell.sidebar-collapsed > .workspace > .topbar {
    box-sizing: border-box;
    min-height: 60px;
    padding-left: 190px;
  }

  .top-actions.nav-shell .nav-primary {
    gap: 2px;
  }

  .top-actions.nav-shell .nav-category-button {
    gap: 4px;
    padding-inline: 7px;
    font-size: 13px;
  }
}

@media (min-width: 761px) and (max-width: 820px) {
  .app-shell.sidebar-collapsed .sidebar > .brand .logo-wordmark {
    display: none;
  }

  .app-shell.sidebar-collapsed > .workspace > .topbar {
    padding-left: 70px;
  }
}

/* UI-002: keep the compact mobile branding while making its main actions thumb-safe. */
@media (max-width: 760px) {
  .sidebar > .brand .brand-home-button,
  .app-shell.sidebar-collapsed .sidebar > .brand .brand-home-button {
    min-height: 44px;
  }

  .sidebar > .brand #newCustomerButton {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 8px;
  }

  .today-dashboard-footer-button,
  .export-box a {
    min-height: 44px;
  }

  .sidebar-footer .export-box a {
    min-height: 44px;
  }
}