/* ==========================================================================
   Corporate LP Design System v4 — Component styles
   ──────────────────────────────────────────────────────────────────────────
   Buttons, inputs, selects, segmented, checkbox/radio, chip (badge), card,
   alert. Consumes tokens from `colors_and_type.css`.

   Naming convention
   -----------------
   Class names follow shadcn/ui's variant vocabulary:
     • Button variants:   primary / secondary / outline / ghost / destructive / link
     • Chip variants:     primary / secondary / outline / destructive
                          + content-category accents (sale / rental / purchase)
                          + semantic (success / warning / destructive)
     • Card variants:     default / elevated / interactive (data-clickable)
     • Sizes:             sm / md (default) / lg / xl
                          ※ v4: all four sizes share height 44px (mobile
                            tap-target). They differ only in horizontal
                            padding (12 / 16 / 20 / 28) and font size.

   v4 changes (from v3)
   --------------------
   • All control heights now resolve to 44px (the `--control-h-*` tokens
     are unified). Component code is unchanged — it still references the
     size-suffixed tokens, so the size names continue to work as labels
     for padding/typography differentiation.
   • `.button--xl` no longer sets `font-weight: bold` overriding the base
     semibold; the wireframe treats xl identically to lg/md in weight.
   • `.alert` padding tokenised onto `--sp-*` (was hard-coded 14px/16px).
   • `.chip` height 24px is kept as a small, content-relative dimension
     (would need `--height-chip` to be tokenised; not added since no other
      consumer needs it).
   • No hard-coded hex / px values introduced; change a token in
     colors_and_type.css and every component re-bases itself.
   ========================================================================== */

/* ============================================================ */
/*  Button                                                      */
/* ============================================================ */
/* Base: shadcn `secondary`-equivalent (white + neutral border).
   Modifiers add a variant on top. v4: all sizes share height (44px) but
   differ in horizontal padding and font size. */
.button {
  --_h: var(--control-h-md);
  --_px: var(--control-px-md);
  --_fs: var(--text-body-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--_h);
  padding: 0 var(--_px);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--_fs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--duration-base) var(--easing),
    border-color var(--duration-base) var(--easing),
    box-shadow var(--duration-base) var(--easing),
    transform var(--duration-fast) var(--easing),
    color var(--duration-base) var(--easing);
}
.button:hover {
  background: var(--muted);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.button:active {
  transform: translateY(1px);
  box-shadow: none;
}
.button:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-color: var(--primary);
}

/* sizes — v4: heights are unified, only padding & type differ */
.button--sm { --_h: var(--control-h-sm); --_px: var(--control-px-sm); --_fs: var(--text-body-sm); }
.button--md { --_h: var(--control-h-md); --_px: var(--control-px-md); --_fs: var(--text-body-md); }
.button--lg { --_h: var(--control-h-lg); --_px: var(--control-px-lg); --_fs: var(--text-body-lg); border-radius: var(--radius-lg); }
.button--xl { --_h: var(--control-h-xl); --_px: var(--control-px-xl); --_fs: var(--text-body-lg); border-radius: var(--radius-lg); }

/* variants — shadcn vocabulary */

/* primary — solid corporate navy. shadcn's `default` variant. */
.button--primary {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.button--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: var(--shadow-md);
}
.button--primary:active {
  background: var(--primary-active);
  border-color: var(--primary-active);
}

/* secondary — white with neutral border. Same as base, given an explicit
   modifier so HTML reads symmetrically with other variants. */
.button--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}
.button--secondary:hover {
  background: var(--muted);
  border-color: var(--border-strong);
}

/* outline — transparent + primary stroke. Pairs with primary in hero. */
.button--outline {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.button--outline:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}

/* ghost — text-only with subtle hover bg. Used for nav-style triggers. */
.button--ghost {
  background: transparent;
  color: var(--foreground);
  border-color: transparent;
}
.button--ghost:hover {
  background: var(--accent);
  border-color: transparent;
  box-shadow: none;
}

/* destructive — for irreversible/dangerous actions. shadcn renames the
   former `danger` variant to `destructive` (matches token name). */
.button--destructive {
  background: var(--destructive-muted);
  color: var(--destructive);
  border-color: var(--destructive-border);
}
.button--destructive:hover {
  /* destructive の hover は muted bg よりやや濃く。alpha で表現すると
     destructive-border と同列の安定感になる。 */
  background: rgb(184 38 38 / 0.10);
  border-color: var(--destructive);
}

/* link — text that looks like a link but lives in a <button>. No border,
   no padding visually, primary color, underline on hover. */
.button--link {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
  padding: 0;
  height: auto;
  text-decoration: none;
}
.button--link:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* disabled */
.button[disabled],
.button--disabled {
  color: var(--foreground-subtle);
  background: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* full width */
.button--block { width: 100%; }


/* ============================================================ */
/*  Input (text / email / number / date / tel / url / search)   */
/* ============================================================ */
.input {
  --_h: var(--control-h-md);
  --_px: var(--control-px-md);

  width: 100%;
  height: var(--_h);
  padding: 0 var(--_px);
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background: var(--card);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  line-height: 1.5;
  color: var(--foreground);
  outline: none;
  transition:
    border-color var(--duration-base) var(--easing),
    box-shadow var(--duration-base) var(--easing),
    background var(--duration-base) var(--easing);
}
.input::placeholder { color: var(--foreground-subtle); }
.input:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); }
.input:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--ring-focus);
}
.input:disabled {
  background: var(--muted);
  color: var(--foreground-subtle);
  cursor: not-allowed;
}
.input.is-invalid {
  border-color: var(--destructive);
}
.input.is-invalid:focus-visible {
  box-shadow: 0 0 0 3px rgb(184 38 38 / 0.18);
}

/* input sizes — v4: heights unified, only padding/type differ */
.input--sm { --_h: var(--control-h-sm); --_px: var(--control-px-sm); font-size: var(--text-body-sm); }
.input--lg { --_h: var(--control-h-lg); --_px: var(--control-px-lg); font-size: var(--text-body-lg); border-radius: var(--radius-lg); }

/* multi-line */
textarea.input {
  height: auto;
  padding: var(--sp-3) var(--control-px-md);
  resize: vertical;
  min-height: calc(var(--control-h-md) * 2);
  line-height: 1.6;
}


/* ============================================================ */
/*  Affix input (prefix/suffix, e.g. ¥ ... 円)                  */
/* ============================================================ */
.input-affix {
  display: flex;
  width: 100%;
  height: var(--control-h-md);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
  transition:
    border-color var(--duration-base) var(--easing),
    box-shadow var(--duration-base) var(--easing);
}
.input-affix:hover:not(:focus-within) { border-color: var(--border-strong); }
.input-affix:focus-within {
  border-color: var(--primary);
  box-shadow: var(--ring-focus);
}
.input-affix > input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 var(--control-px-md);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  color: var(--foreground);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.input-affix__prefix,
.input-affix__suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-3);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--text-body-md);
}
.input-affix__prefix { border-right: 1px solid var(--border); }
.input-affix__suffix { border-left: 1px solid var(--border); }


/* ============================================================ */
/*  Select (native, restyled)                                   */
/* ============================================================ */
.select {
  --_h: var(--control-h-md);
  --_px: var(--control-px-md);

  width: 100%;
  height: var(--_h);
  padding: 0 calc(var(--_px) + 18px) 0 var(--_px);
  border-radius: var(--radius-md);
  border: 1px solid var(--input);
  background-color: var(--card);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 1px),
    calc(100% - 13px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  color: var(--foreground);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color var(--duration-base) var(--easing), box-shadow var(--duration-base) var(--easing);
}
.select:hover { border-color: var(--border-strong); }
.select:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--ring-focus);
}
.select--sm { --_h: var(--control-h-sm); --_px: var(--control-px-sm); font-size: var(--text-body-sm); }
.select--lg { --_h: var(--control-h-lg); --_px: var(--control-px-lg); font-size: var(--text-body-lg); border-radius: var(--radius-lg); }


/* ============================================================ */
/*  Segmented control                                           */
/* ============================================================ */
.segmented {
  display: inline-flex;
  height: var(--control-h-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
}
.segmented__btn {
  padding: 0 var(--sp-5);
  background: transparent;
  color: var(--foreground);
  border: none;
  border-left: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--duration-base) var(--easing), color var(--duration-base) var(--easing);
}
.segmented__btn:first-child { border-left: none; }
.segmented__btn:hover:not([aria-pressed="true"]) { background: var(--muted); }
.segmented__btn[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: var(--font-weight-semibold);
}


/* ============================================================ */
/*  Checkbox / Radio                                            */
/* ============================================================ */
.check,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--text-body-md);
  color: var(--foreground);
  user-select: none;
}
.check input,
.radio input { position: absolute; opacity: 0; pointer-events: none; }

.check__box,
.radio__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--input);
  background: var(--card);
  flex-shrink: 0;
  transition: background var(--duration-base) var(--easing), border-color var(--duration-base) var(--easing);
}
.check__box  { border-radius: var(--radius-sm); }
.radio__box  { border-radius: 50%; }

.check input:hover + .check__box,
.radio input:hover + .radio__box { border-color: var(--border-strong); }

.check input:checked + .check__box {
  background: var(--primary);
  border-color: var(--primary);
}
.check input:checked + .check__box::after {
  content: '';
  width: 5px; height: 9px;
  border-right: 2px solid var(--primary-foreground);
  border-bottom: 2px solid var(--primary-foreground);
  transform: rotate(45deg) translate(-1px, -1px);
}

.radio input:checked + .radio__box {
  border-color: var(--primary);
}
.radio input:checked + .radio__box::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--primary);
}

.check input:focus-visible + .check__box,
.radio input:focus-visible + .radio__box {
  box-shadow: var(--ring-focus);
  border-color: var(--primary);
}


/* ============================================================ */
/*  Field — label + control + hint container                    */
/* ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.field__label {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  letter-spacing: var(--tracking-normal);
}
.field__label .req {
  color: var(--destructive);
  margin-left: 4px;
  font-weight: var(--font-weight-bold);
}
.field__hint {
  font-size: var(--text-body-sm);
  color: var(--muted-foreground);
  line-height: 1.5;
}
.field__hint--error { color: var(--destructive); }


/* ============================================================ */
/*  Chip (Badge)                                                */
/* ------------------------------------------------------------ */
/*  Small inline label: status, tag, category. Variants follow  */
/*  shadcn naming (default/secondary/outline/destructive)       */
/*  plus content-category accents (deal-sale/rental/purchase)   */
/*  and semantic (success/warning/destructive).                 */
/* ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--border);
  white-space: nowrap;
  letter-spacing: var(--tracking-normal);
}

/* shadcn-style core variants */
.chip--primary     { background: var(--primary);            color: var(--primary-foreground);     border-color: var(--primary); }
.chip--secondary   { background: var(--muted);              color: var(--muted-foreground);       border-color: var(--border); }
.chip--outline     { background: transparent;               color: var(--foreground);             border-color: var(--border-strong); }
.chip--destructive { background: var(--destructive-muted);  color: var(--destructive);            border-color: var(--destructive-border); }

/* semantic variants */
.chip--success     { background: var(--success-muted);      color: var(--success);                border-color: var(--success-border); }
.chip--warning     { background: var(--warning-muted);      color: var(--warning);                border-color: var(--warning-border); }

/* deal-type accents — for content categorization (PRESS/PRODUCT news,
   sale/rental property labels). Not for semantic state. */
.chip--sale        { background: var(--deal-sale-muted);    color: var(--deal-sale);              border-color: var(--deal-sale-border); }
.chip--purchase    { background: var(--deal-purchase-muted);color: var(--deal-purchase);          border-color: var(--deal-purchase-border); }
.chip--rental      { background: var(--deal-rental-muted);  color: var(--deal-rental);            border-color: var(--deal-rental-border); }

/* shape modifier — pill (rounded) for tags */
.chip--pill        { border-radius: var(--radius-full); padding: 0 var(--sp-3); }


/* ============================================================ */
/*  Card                                                        */
/* ------------------------------------------------------------ */
/*  Container for content blocks. Three variants:               */
/*   • default      — flat: border + radius-lg, no shadow       */
/*   • elevated     — adds shadow-sm; for above-fold emphasis   */
/*   • interactive  — clickable affordance: shadow + arrow icon */
/*                    + hover transitions. Pair with [data-goto]*/
/*                    or wrap in <a>.                            */
/* ============================================================ */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.card--elevated {
  box-shadow: var(--shadow-sm);
}

/* interactive card — clickable affordance with corner-arrow icon.
   On mobile (no hover) the persistent arrow + shadow + tap feedback
   communicate "this is clickable". Use `data-goto="…"` (or any
   click handler) on the same element. */
.card--interactive {
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--duration-base) var(--easing),
    box-shadow var(--duration-base) var(--easing),
    transform var(--duration-base) var(--easing),
    background var(--duration-fast) var(--easing);
}
.card--interactive::after {
  content: '';
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 20px;
  height: 20px;
  background-color: var(--muted-foreground);
  /* Lucide-style ArrowUpRight (corner-out arrow) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 16px 16px;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: 16px 16px;
  pointer-events: none;
  transition:
    background-color var(--duration-base) var(--easing),
    transform var(--duration-base) var(--easing);
}
.card--interactive:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.card--interactive:hover::after {
  background-color: var(--primary);
  transform: translate(2px, -2px);
}
.card--interactive:active {
  background: var(--muted);
  transform: scale(0.995);
}

/* arrow placement modifier — for cards where the top-right corner is
   occupied (e.g. product card with image at top), move arrow to bottom. */
.card--interactive.card--arrow-bottom::after {
  top: auto;
  bottom: var(--sp-4);
}
.card--interactive.card--arrow-bottom:hover::after {
  transform: translate(2px, 2px);   /* extend toward the bottom-right */
}


/* ============================================================ */
/*  Alert                                                       */
/* ------------------------------------------------------------ */
/*  Inline notice / message. Variants follow semantic tokens:   */
/*    info / success / warning / destructive.                   */
/* ============================================================ */
.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  align-items: flex-start;
  line-height: 1.6;
  font-size: var(--text-body-md);
}
.alert__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  margin-top: 2px;
}
.alert__title { font-weight: var(--font-weight-bold); margin-right: 4px; }

.alert--info {
  background: var(--muted);
  border-color: var(--border);
  color: var(--foreground);
}
.alert--info .alert__icon {
  background: var(--foreground-subtle);
  font-style: italic;
}
.alert--warning {
  background: var(--warning-muted);
  border-color: var(--warning-border);
  color: var(--warning);
}
.alert--warning .alert__icon { background: var(--warning); }
.alert--success {
  background: var(--success-muted);
  border-color: var(--success-border);
  color: var(--success);
}
.alert--success .alert__icon { background: var(--success); }
.alert--destructive {
  background: var(--destructive-muted);
  border-color: var(--destructive-border);
  color: var(--destructive);
}
.alert--destructive .alert__icon { background: var(--destructive); }

/* ==========================================================================
   Release Notice — リリース予定の赤バナー (NEW in v4.1)
   --------------------------------------------------------------------------
   LP共通の重要告知バナー。hero直下、または product-hero 直下に配置する。
   トークン: --notice-* (colors_and_type.css)
   ========================================================================== */
.release-notice {
  width: 100%;
  background: var(--notice-bg);
  border-top: var(--notice-border-w) solid var(--notice-accent);
  border-bottom: var(--notice-border-w) solid var(--notice-accent);
  color: var(--notice-fg);
  padding: var(--sp-5) var(--page-padding-x);
}
.release-notice-inner {
  max-width: var(--container-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.release-notice-label {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-2);
  background: var(--notice-accent);
  color: var(--notice-accent-fg);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
}
.release-notice-text {
  margin: 0;
  font-size: var(--text-body-md);
  line-height: 1.7;
  font-weight: var(--font-weight-semibold);
  color: var(--notice-fg);
  flex: 1;
  min-width: 240px;
}
.release-notice-text strong {
  color: var(--notice-fg-strong);
  font-weight: var(--font-weight-bold);
}

/* トップページ(navy hero)上に配置されたときも背景を維持 */
body.is-top-page .release-notice {
  background: var(--notice-bg);
  border-color: var(--notice-accent);
}

@media (max-width: 600px) {
  .release-notice { padding: var(--sp-4) var(--page-padding-x); }
  .release-notice-inner { gap: var(--sp-3); }
  .release-notice-text  { font-size: var(--text-body-sm); min-width: 0; width: 100%; }
}

/* ==========================================================================
   Chat Dock — 常駐営業チャット (NEW in v4.1)
   --------------------------------------------------------------------------
   全ページの画面下部に固定表示するチャット起動バー。デスクトップは中央寄せ
   フローティング、モバイルは画面幅一杯に展開し border-radius を上端のみに
   制限する。トークン: --chat-dock-* (colors_and_type.css)
   ========================================================================== */
.chat-dock {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  padding: 0 var(--sp-4);
  z-index: 200;
  pointer-events: none;
}
.chat-dock-inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--chat-dock-shadow-desktop);
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  transition: max-height var(--duration-slow) var(--easing);
}
.chat-dock-prompt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-caption);
  color: var(--muted-foreground);
}
.chat-dock-prompt::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--success);
  flex-shrink: 0;
}
.chat-dock-prompt-label {
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
}
.chat-dock-prompt-sub { color: var(--muted-foreground); }
.chat-dock-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--card);
}
.chat-dock-input {
  flex: 1;
  height: var(--control-h-lg);
  border: none;
  background: transparent;
  font-size: var(--text-body-md);
  color: var(--foreground);
  outline: none;
  font-family: var(--font-sans);
}
.chat-dock-input::placeholder { color: var(--foreground-subtle); }
.chat-dock-send {
  height: var(--control-h-md);
  padding: 0 var(--sp-4);
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  font-size: var(--text-body-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--duration-base) var(--easing);
  flex-shrink: 0;
}
.chat-dock-send:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* sales-mode はチャットがセールス担当に切り替わったとき */
.chat-dock.is-sales-mode .chat-dock-prompt {
  background: var(--primary);
  color: var(--primary-foreground);
  border-bottom-color: var(--primary);
}
.chat-dock.is-sales-mode .chat-dock-prompt-label { color: var(--primary-foreground); }
.chat-dock.is-sales-mode .chat-dock-prompt-sub   { color: rgb(255 255 255 / 0.80); }
.chat-dock.is-sales-mode .chat-dock-prompt::before { background: rgb(255 255 255 / 0.80); }

/* チャットがモバイル(<=768px)の時のみ強調表示 */
@media (max-width: 768px) {
  .chat-dock {
    bottom: 0;
    padding: 0;
  }
  .chat-dock-inner {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: var(--notice-border-w) solid var(--primary);
    border-bottom: none;
    box-shadow: var(--chat-dock-shadow-mobile);
  }
  .chat-dock-prompt {
    background: var(--primary);
    border-bottom: none;
    padding: var(--sp-3) var(--sp-4);
  }
  .chat-dock-prompt::before {
    background: var(--chat-dock-indicator-bg);
    box-shadow: 0 0 0 3px var(--chat-dock-indicator-ring);
    width: 8px;
    height: 8px;
  }
  .chat-dock-prompt-label { color: var(--primary-foreground); }
  .chat-dock-prompt-sub   { color: rgb(255 255 255 / 0.85); }
  .chat-dock-input-row {
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
    background: var(--chat-dock-input-bg);
    border-top: 1px solid var(--border);
  }
  .chat-dock-input {
    font-size: var(--text-body-md);
    color: var(--foreground);
    min-width: 0;
  }
  .chat-dock-input::placeholder { color: var(--chat-dock-placeholder); }
  .chat-dock-send {
    background: var(--primary);
    color: var(--primary-foreground);
    border: 1px solid var(--primary);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--chat-dock-send-shadow);
    padding: 0 var(--sp-3);
    font-size: var(--text-body-sm);
    flex-shrink: 0;
    white-space: nowrap;
  }
}