/*
 * 2026-10-03 smartphone UI polish.
 * Scope: adopted light-theme mobile surfaces only. Desktop and non-light themes stay unchanged.
 */
@media (max-width: 760px) {
  /* Today: emphasize counts and keep every reservation detail readable. */
  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-day-summary {
    color: #c23d55;
    font-weight: 400;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-day-heading {
    width: calc(100% - 20px);
    min-height: 62px;
    margin: 9px 10px 0;
    padding-block: 10px;
    border-radius: 12px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-reservation-day:first-child .today-adopted-day-heading {
    background: #e8f9fa;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-reservation-day + .today-adopted-reservation-day .today-adopted-day-heading {
    background: #edf5fd;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-reservation-row {
    min-height: 0;
    align-items: start;
    padding-block: 12px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-reservation-copy > strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-reservation-copy > small {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    gap: 3px 9px;
    white-space: normal;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-reservation-copy > small > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-reservation-copy > small > span:nth-child(-n + 2) {
    grid-column: 1 / -1;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="today"] .today-adopted-reservation-copy > small > span + span::before {
    margin: 0;
    content: "";
  }

  /* X response: compact cards, year-free dates, and clear first-line/unreplied color cues. */
  :root .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-task-main {
    gap: 4px;
  }

  :root .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-task-identity {
    align-self: start;
    align-content: start;
    gap: 0;
    grid-template-rows: max-content max-content;
  }

  :root .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-task-identity strong,
  :root .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-task-identity small {
    line-height: 1.25;
  }

  :root .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-task-preview {
    display: block;
    padding: 7px 9px;
    border-radius: 8px;
    background: #e8f7fb;
  }

  :root .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-unreplied-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #fdebed;
    color: #c2354f;
    font-size: 11px;
    font-style: normal;
    font-weight: 750;
    line-height: 1.4;
  }

  :root .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-task-meta {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 4px;
  }

  :root .x-dm-mobile-app[data-mobile-screen="home"] .x-dm-mobile-task-action {
    min-height: 0;
    font-size: 14px;
  }

  /* Customer list: place count directly under the heading and frame the sort control. */
  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"][data-mobile-customer-screen="list"] > .sidebar > .sidebar-body {
    gap: 6px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-mobile-list-heading {
    margin-bottom: 4px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-mobile-list-meta {
    margin-bottom: 3px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-sort-controls {
    min-height: 44px;
    overflow: hidden;
    border: 1px solid var(--customer-adopted-line, #e3ebf0);
    border-radius: 10px;
    background: var(--customer-adopted-surface, #fff);
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-sort-controls select {
    padding-inline: 12px 32px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-list {
    gap: 10px;
  }

  /* Customer card: match the reference profile layout and keep long names readable. */
  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-card {
    gap: 10px;
    padding: 15px 16px 13px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-card .customer-header-top {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-avatar {
    display: grid;
    width: 64px;
    height: 64px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-id {
    width: auto;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas:
      "name actions"
      "account actions";
    column-gap: 8px;
    row-gap: 0;
    align-content: start;
    align-items: start;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-meta-row {
    grid-area: account;
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 0;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-account {
    min-width: 0;
    flex: 1 1 auto;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-meta-row .customer-header-tags {
    flex: none;
    margin: 0;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-name {
    display: block;
    overflow: visible;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .name-edit-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    align-self: start;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008f8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    color: transparent;
    font-size: 0;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .name-edit-button:hover,
  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .name-edit-button:focus-visible {
    background-color: #e8f9fa;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-header-tags .header-pill-new {
    min-height: 0;
    padding: 3px 10px;
    border-color: #f7cfd5;
    background: #fdebed;
    color: #c2354f;
    font-size: 11px;
    line-height: 1.3;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-summary-body {
    margin-top: 0;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-card-info-item .info-label,
  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-card-info-item small {
    font-size: 12px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] .customer-card-info-item strong {
    font-size: 16px;
  }

  :root[data-theme="light"] .app-shell[data-active-nav-category="customer"] #mobileCustomerOverview > .customer-mobile-overview-card:has(#mobileCustomerNextTodo) {
    display: none;
  }

  /* Shared Maru button: use the customer-page placement and UI on every mobile page. */
  #xDmMobileMaruDock,
  #salesMobileMaruDock,
  #reservationMobileMaruDock {
    display: none !important;
  }

  html body #floatingAiChatButton.floating-ai-chat-button {
    position: fixed !important;
    right: 16px !important;
    bottom: calc(var(--mobile-bottom-nav-height, 72px) + 17px + env(safe-area-inset-bottom)) !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 132px !important;
    height: auto !important;
    min-height: 52px !important;
    flex-basis: auto !important;
    gap: 8px;
    padding: 5px 13px 5px 5px !important;
    border: 1px solid #e3ebf0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #008f8b !important;
    box-shadow: 0 8px 24px rgb(56 91 111 / 12%) !important;
    transform: none !important;
  }

  html body #floatingAiChatButton .floating-ai-chat-avatar {
    position: static !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
  }

  html body #floatingAiChatButton .floating-ai-chat-label {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    align-items: center;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.25;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
  }

  html body #floatingAiChatButton .floating-ai-chat-label::before {
    content: "まるに" !important;
  }

  html body #floatingAiChatButton .floating-ai-chat-label::after {
    content: none !important;
  }

  html body #floatingAiChatButton .floating-ai-chat-tooltip {
    display: none !important;
  }
}