/* SITE-MAIN-HOME-REDESIGN-01 — owner-approved Home design (2026-10-14, design canvas
   "LOTBI 메인 대화 홈 시안 01"). Loaded last so it can restyle the Home without
   touching each feature owner's sheet:
   - no Home title; the existing 3D LOTBI character sits on a round stage;
   - the composer lives at the bottom of the Home (above the footer on desktop,
     at the bottom of the screen on phones) with a clear focus / send state;
   - the attachment choices open inside the composer (nothing is covered);
   - the safety line is readable (13px) and the footer is centred;
   - the left menu categories get colour tiles (order, names, icons unchanged);
   - on phones the profile menu rises from the bottom as a sheet.
   Colours follow the Life Wallet 02 design tokens. Dark mode changes colours only. */

body.chat-home-page {
  /* CHAT-WHITE-SURFACE-01 (소유자 10-29 「왜 우리는 바탕색이 회색이야?」 → 권장안): the conversation is white, the menu drawer a very light
     grey (ChatGPT). Card-heavy menu screens keep the grey ground under white cards (site-workspace-open below). */
  --hr-bg: #FFFFFF;
  --hr-ws-bg: #F6F7F9;
  --hr-side: #F9F9FA;
  --hr-card: #FFFFFF;
  --hr-subtle: #F2F4F7;
  --hr-hover: #EEF1F5;
  --hr-line: #E4E7EC;
  --hr-line2: #C9CED6;
  --hr-tx: #1E2228;
  --hr-tx2: #4E5663;
  --hr-tx3: #667085;
  --hr-acc: #2563EB;
  --hr-acc-press: #1D4ED8;
  --hr-acc-tx: #1D4ED8;
  --hr-acc-soft: #EAF1FF;
  --hr-ring: rgba(37, 99, 235, .2);
  --hr-err: #B42318;
  --hr-err-bg: #FEF3F2;
  --hr-err-line: #FDD3CF;
  --hr-off-bg: #E4E7EC;
  --hr-off-ic: #98A2B3;
  --hr-user-bg: #E8ECF2;
  --hr-stage: #EBF0F8;
  --hr-stage-shadow: rgba(16, 24, 40, .12);
  --hr-col: min(clamp(640px, 54vw, 840px), 100%);
  --hr-stage-size: clamp(260px, 22vw, 340px);
  --hr-tile-new-bg: #2563EB; --hr-tile-new-fg: #FFFFFF;
  --hr-tile-cal-bg: #EAF1FF; --hr-tile-cal-fg: #2563EB;
  --hr-tile-wallet-bg: #E4F5EA; --hr-tile-wallet-fg: #15803D;
  --hr-tile-scam-bg: #FFEFE3; --hr-tile-scam-fg: #C2410C;
  --hr-tile-trouble-bg: #F0EAFF; --hr-tile-trouble-fg: #6D28D9;
  --hr-tile-care-bg: #FFEBF2; --hr-tile-care-fg: #BE185D;
  --hr-tile-life-bg: #E1F4F4; --hr-tile-life-fg: #0F766E;
  --hr-tile-tour-bg: #E6F4FB; --hr-tile-tour-fg: #0369A1;
  --hr-tile-invest-bg: #ECEBFF; --hr-tile-invest-fg: #4338CA;
  --hr-tile-mall-bg: #FEF3C7; --hr-tile-mall-fg: #B45309;
  --hr-tile-feedback-bg: #ECFCCB; --hr-tile-feedback-fg: #4D7C0F;
  --hr-tile-other-bg: #F2F4F7; --hr-tile-other-fg: #4E5663;
}

body.chat-home-page[data-site-theme="dark"],
html[data-site-theme-bootstrap="dark"] body.chat-home-page:not([data-site-theme]) {
  --hr-bg: #212121;
  --hr-ws-bg: #212121;
  --hr-side: #181818; /* CHAT-WHITE-SURFACE-01: one step darker than the conversation (#212121) */
  --hr-card: #2A2A2A;
  --hr-subtle: #333333;
  --hr-hover: #383838;
  --hr-line: #424242;
  --hr-line2: #5B5B5B;
  --hr-tx: #F5F5F5;
  --hr-tx2: #C7C7C7;
  --hr-tx3: #A3A3A3;
  --hr-acc-tx: #8AB4FF;
  --hr-acc-soft: #1E2A44;
  --hr-ring: rgba(138, 180, 255, .3);
  --hr-err: #FCA5A5;
  --hr-err-bg: #3A1B1D;
  --hr-err-line: #6B2B2F;
  --hr-off-bg: #3A3A3A;
  --hr-off-ic: #7A7A7A;
  --hr-user-bg: #333333;
  --hr-stage: #2A2F38;
  --hr-stage-shadow: rgba(0, 0, 0, .45);
  --hr-tile-cal-bg: #1E2A44; --hr-tile-cal-fg: #8AB4FF;
  --hr-tile-wallet-bg: #183225; --hr-tile-wallet-fg: #6EE7A0;
  --hr-tile-scam-bg: #3A2416; --hr-tile-scam-fg: #FDBA74;
  --hr-tile-trouble-bg: #2C2342; --hr-tile-trouble-fg: #C4B5FD;
  --hr-tile-care-bg: #3A1E2A; --hr-tile-care-fg: #F9A8C8;
  --hr-tile-life-bg: #163234; --hr-tile-life-fg: #7DD3D0;
  --hr-tile-tour-bg: #15303D; --hr-tile-tour-fg: #7DD3FC;
  --hr-tile-invest-bg: #25264A; --hr-tile-invest-fg: #A5B4FC;
  --hr-tile-mall-bg: #3A2E14; --hr-tile-mall-fg: #FCD34D;
  --hr-tile-feedback-bg: #26331A; --hr-tile-feedback-fg: #BEF264;
  --hr-tile-other-bg: #333333; --hr-tile-other-fg: #C7C7C7;
}

/* "System" follows the device: on a Dark device the Home takes the same Dark colours.
   Both Dark blocks also cover the moment before site-conversation.js sets
   body[data-site-theme] (the head bootstrap already knows the saved theme). */
@media (prefers-color-scheme: dark) {
  body.chat-home-page[data-site-theme="system"],
  html[data-site-theme-bootstrap="system"] body.chat-home-page:not([data-site-theme]) {
    --hr-bg: #212121;
    --hr-ws-bg: #212121;
    --hr-side: #181818; /* CHAT-WHITE-SURFACE-01: one step darker than the conversation (#212121) */
    --hr-card: #2A2A2A;
    --hr-subtle: #333333;
    --hr-hover: #383838;
    --hr-line: #424242;
    --hr-line2: #5B5B5B;
    --hr-tx: #F5F5F5;
    --hr-tx2: #C7C7C7;
    --hr-tx3: #A3A3A3;
    --hr-acc-tx: #8AB4FF;
    --hr-acc-soft: #1E2A44;
    --hr-ring: rgba(138, 180, 255, .3);
    --hr-err: #FCA5A5;
    --hr-err-bg: #3A1B1D;
    --hr-err-line: #6B2B2F;
    --hr-off-bg: #3A3A3A;
    --hr-off-ic: #7A7A7A;
  --hr-user-bg: #333333;
    --hr-stage: #2A2F38;
    --hr-stage-shadow: rgba(0, 0, 0, .45);
    --hr-tile-cal-bg: #1E2A44; --hr-tile-cal-fg: #8AB4FF;
    --hr-tile-wallet-bg: #183225; --hr-tile-wallet-fg: #6EE7A0;
    --hr-tile-scam-bg: #3A2416; --hr-tile-scam-fg: #FDBA74;
    --hr-tile-trouble-bg: #2C2342; --hr-tile-trouble-fg: #C4B5FD;
    --hr-tile-care-bg: #3A1E2A; --hr-tile-care-fg: #F9A8C8;
    --hr-tile-life-bg: #163234; --hr-tile-life-fg: #7DD3D0;
    --hr-tile-tour-bg: #15303D; --hr-tile-tour-fg: #7DD3FC;
    --hr-tile-invest-bg: #25264A; --hr-tile-invest-fg: #A5B4FC;
    --hr-tile-mall-bg: #3A2E14; --hr-tile-mall-fg: #FCD34D;
    --hr-tile-feedback-bg: #26331A; --hr-tile-feedback-fg: #BEF264;
    --hr-tile-other-bg: #333333; --hr-tile-other-fg: #C7C7C7;
  }
}

/* ---------- canvas colours ---------- */
body.chat-home-page:not(.conversation-active),
body.chat-home-page:not(.conversation-active) .chat-app-shell,
body.chat-home-page:not(.conversation-active) .chat-home-shell,
body.chat-home-page:not(.conversation-active) .chat-topbar { background: var(--hr-bg) !important; }
body.chat-home-page .chat-sidebar-desktop,
body.chat-home-page .mobile-nav-drawer { background: var(--hr-side) !important; }
body.chat-home-page .chat-sidebar-desktop { border-right: 1px solid var(--hr-line); }

/* ---------- left menu: colour tile behind each category icon ---------- */
body.chat-home-page .consumer-primary-nav .nav-item { gap: 12px; min-height: 46px; padding: 8px 10px; border-radius: var(--lotbi-radius-button, 12px); font-size: 14.5px; font-weight: 500; color: var(--hr-tx); }
body.chat-home-page .consumer-primary-nav .nav-item:hover { background: var(--hr-hover); }
body.chat-home-page .consumer-primary-nav .nav-item-primary { background: var(--hr-subtle); font-weight: 600; }
body.chat-home-page .consumer-primary-nav .nav-icon {
  box-sizing: border-box;
  width: 30px; height: 30px; padding: 6px;
  flex: 0 0 30px;
  border-radius: 9px;
  opacity: 1;
  background: var(--hr-tile-other-bg);
  color: var(--hr-tile-other-fg);
}
body.chat-home-page .consumer-primary-nav [data-new-conversation] .nav-icon { background: var(--hr-tile-new-bg); color: var(--hr-tile-new-fg); }
body.chat-home-page .consumer-primary-nav [data-calendar-view] .nav-icon { background: var(--hr-tile-cal-bg); color: var(--hr-tile-cal-fg); }
body.chat-home-page .consumer-primary-nav [data-consumer-section="wallet"] .nav-icon { background: var(--hr-tile-wallet-bg); color: var(--hr-tile-wallet-fg); }
body.chat-home-page .consumer-primary-nav [data-scam-open] .nav-icon { background: var(--hr-tile-scam-bg); color: var(--hr-tile-scam-fg); }
body.chat-home-page .consumer-primary-nav [data-trouble-open] .nav-icon { background: var(--hr-tile-trouble-bg); color: var(--hr-tile-trouble-fg); }
body.chat-home-page .consumer-primary-nav [data-consumer-section="care"] .nav-icon { background: var(--hr-tile-care-bg); color: var(--hr-tile-care-fg); }
body.chat-home-page .consumer-primary-nav [data-consumer-section="life"] .nav-icon { background: var(--hr-tile-life-bg); color: var(--hr-tile-life-fg); }
/* MAIN-HOME-DESIGN-02: 투어 and 투자 토론방 get their own colour tiles (confirmed mockup 2026-10-17). */
body.chat-home-page .consumer-primary-nav [data-consumer-section="tour"] .nav-icon { background: var(--hr-tile-tour-bg); color: var(--hr-tile-tour-fg); }
body.chat-home-page .consumer-primary-nav [data-consumer-section="investment"] .nav-icon { background: var(--hr-tile-invest-bg); color: var(--hr-tile-invest-fg); }
/* MAIN-HOME 연결 서비스 (owner 2026-10-18): an amber tile like the other categories. Open (aria-current) it keeps
   the tile colour; only the row changes, as for every other menu entry. */
body.chat-home-page .consumer-primary-nav [data-consumer-section="mall"] .nav-icon,
body.chat-home-page .consumer-primary-nav [data-consumer-section="mall"][aria-current="page"] .nav-icon { background: var(--hr-tile-mall-bg); color: var(--hr-tile-mall-fg); }
/* FEEDBACK-MENU-01 (owner 2026-10-25): 의견 보내기 sits right after 연결 서비스, a lime tile like the others. */
body.chat-home-page .consumer-primary-nav [data-consumer-section="feedback"] .nav-icon { background: var(--hr-tile-feedback-bg); color: var(--hr-tile-feedback-fg); }

/* ---------- account row + profile menu (SITE-MAIN-HOME-POLISH-03, owner-approved mockup D1 / D2 / D11 / M11) ----------
   Account row: two lines — name, then the plan (or "LOTBI 계정 연결" signed out) in regular grey.
   Profile menu: header (photo, name, plan, ×), rows with a plain 18px icon and a '>' on
   프로필 관리 · 설정, a line above the red 로그아웃. */
body.chat-home-page .sidebar-account-entry .sidebar-account-name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--hr-tx); }
body.chat-home-page .sidebar-account-entry .sidebar-account-handle,
body.chat-home-page .sidebar-account-entry .sidebar-account-plan { font-size: var(--lotbi-fs-12, 12px); font-weight: 400; line-height: 1.3; color: var(--hr-tx3); }
body.chat-home-page .sidebar-account-entry .sidebar-account-plan { flex-basis: 100%; }
body.chat-home-page .sidebar-account-entry .sidebar-account-plan::before { content: none; }
/* A line above the account row (mockup D1 / D2 / M10); in the phone drawer the row's arrow points up
   (the menu rises from below there). */
body.chat-home-page .chat-sidebar-desktop [data-sidebar-account],
body.chat-home-page .mobile-nav-drawer [data-sidebar-account] { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hr-line); }
body.chat-home-page .mobile-nav-drawer .sidebar-profile-trigger { width: 100%; }
body.chat-home-page .mobile-nav-drawer .sidebar-profile-trigger .sidebar-profile-chevron { margin-left: auto; transform: rotate(180deg); }
/* With a plan shown the @handle stays in the row for screen readers only. */
body.chat-home-page .sidebar-profile-trigger .sidebar-account-plan ~ .sidebar-account-handle {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body.chat-home-page .profile-popover {
  left: 12px;
  bottom: 80px;
  width: 276px;
  padding: 8px;
  display: block;
  border: 1px solid var(--hr-line);
  border-radius: var(--lotbi-radius-card, 16px);
  background: var(--hr-card);
  color: var(--hr-tx);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
}
body.chat-home-page .profile-sheet-grab { display: none; }
body.chat-home-page .profile-popover-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 10px 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hr-line);
}
body.chat-home-page .profile-popover-avatar {
  box-sizing: border-box;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--hr-line);
  border-radius: 50%;
  background: var(--hr-subtle);
  color: var(--hr-tx2);
  font-size: var(--lotbi-fs-15, 15px);
  font-weight: 700;
  object-fit: cover;
}
body.chat-home-page .profile-popover-head-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; overflow: hidden; line-height: 1.3; }
body.chat-home-page .profile-popover-head-name { overflow: hidden; font-size: 14px; font-weight: 600; color: var(--hr-tx); text-overflow: ellipsis; white-space: nowrap; }
body.chat-home-page .profile-popover-head-plan { overflow: hidden; font-size: var(--lotbi-fs-12, 12px); font-weight: 400; color: var(--hr-tx3); text-overflow: ellipsis; white-space: nowrap; }
body.chat-home-page .profile-popover-x {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hr-tx2);
  cursor: pointer;
}
body.chat-home-page .profile-popover-x::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.chat-home-page .profile-popover-x:hover { background: var(--hr-hover); }
body.chat-home-page .profile-popover-x:focus-visible { outline: 2px solid var(--hr-acc); outline-offset: -2px; }
body.chat-home-page .profile-popover-menu { display: grid; gap: 0; }
body.chat-home-page .profile-popover .profile-menu-item { gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--hr-tx); }
body.chat-home-page .profile-popover .profile-menu-item:not(:disabled):hover { background: var(--hr-hover); }
body.chat-home-page .profile-popover .profile-menu-icon { flex: 0 0 18px; width: 18px; height: 18px; padding: 0; border-radius: 0; background: transparent; color: var(--hr-tx2); }
body.chat-home-page .profile-popover .profile-menu-go {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-left: auto;
  background: var(--hr-tx3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.chat-home-page .profile-popover-divider { height: 1px; margin: 6px 4px; background: var(--hr-line); }
body.chat-home-page .profile-popover .profile-menu-logout { color: var(--hr-err); }
body.chat-home-page .profile-popover .profile-menu-logout:not(:disabled):hover { background: var(--hr-err-bg); }
body.chat-home-page .profile-popover .profile-menu-logout .profile-menu-icon { color: inherit; }

/* Empty recent list says what will appear there (once the restore has run). */
body.chat-home-page[data-conversation-restore="ready"] .nav-history-list[data-recent-conversations]:empty::before {
  content: "대화를 시작하면 여기에 보여요.";
  display: block;
  padding: 6px 12px;
  font-size: var(--lotbi-fs-13, 13px);
  line-height: 20px;
  color: var(--hr-tx3);
}

/* ---------- Home: character stage in the open area ---------- */
body.chat-home-page:not(.conversation-active) .chat-hero {
  flex: 1 0 auto;
  justify-content: flex-start;
  min-height: 0;
  padding: 0 0 20px;
}
body.chat-home-page:not([data-conversation-restore="pending"]):not(.conversation-active) .home-avatar-anchor {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--hr-stage-size) + 24px);
  order: 0;
}
/* SITE-MAIN-HOME-POLISH-02 (owner 2026-10-16: "원형 보호막 같은 거 없애"): no round disc behind the character;
   only the soft floor shadow stays under it. */
body.chat-home-page:not([data-conversation-restore="pending"]):not(.conversation-active) .home-avatar-anchor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + var(--hr-stage-size) * .32);
  width: calc(var(--hr-stage-size) * .3);
  height: calc(var(--hr-stage-size) * .05);
  border-radius: 50%;
  background: var(--hr-stage-shadow);
  filter: blur(4px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body.chat-home-page:not([data-conversation-restore="pending"]):not(.conversation-active) .chat-character-wrap {
  position: relative;
  z-index: 1;
  width: calc(var(--hr-stage-size) * .6);
  height: calc(var(--hr-stage-size) * .72);
  margin: 0 0 calc(var(--hr-stage-size) * .06);
}
body.chat-home-page:not([data-conversation-restore="pending"]):not(.conversation-active) .chat-character-logo {
  width: calc(var(--hr-stage-size) * .6);
  height: calc(var(--hr-stage-size) * .6);
  object-fit: contain;
}
/* With the keyboard up and very little room left, the character leaves (as before). */
body.chat-home-page.mobile-keyboard-tight:not(.conversation-active) .home-avatar-anchor { display: none !important; }
/* Before the conversation restore finishes the static mark stands on the same stage. */
body.chat-home-page[data-conversation-restore="pending"]:not(.conversation-active) .consumer-brand-fallback {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--hr-stage-size);
  height: var(--hr-stage-size);
  margin: auto;
  padding: calc(var(--hr-stage-size) * .18);
  object-fit: contain;
}

/* ---------- Home composer: bottom of the Home, clear states ---------- */
body.chat-home-page .chat-composer-stack,
body.chat-home-page:not(.conversation-active) .chat-composer-stack { width: var(--hr-col); }
body.chat-home-page:not(.conversation-active) .chat-composer-stack { order: 5; margin-top: 0; }

body.chat-home-page .chat-composer,
body.chat-home-page:not(.conversation-active) .chat-composer {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 0;
  min-height: 0;
  padding: 6px 10px 10px;
  border: 1px solid var(--hr-line2);
  border-radius: var(--lotbi-radius-card, 16px);
  background: var(--hr-card);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
body.chat-home-page .chat-composer:focus-within {
  border-color: var(--hr-acc) !important;
  box-shadow: 0 0 0 3px var(--hr-ring) !important;
}
/* SITE-MAIN-HOME-POLISH-03: owner 2026-10-16 approved the mockup's blue focus edge in Dark (mockup dark D4):
   the composer edge turns #2563EB (3.1:1 on the #212121 page) with the soft light-blue ring. */
body.chat-home-page[data-site-theme="dark"] .chat-composer:focus-within,
html[data-site-theme-bootstrap="dark"] body.chat-home-page:not([data-site-theme]) .chat-composer:focus-within {
  border-color: var(--hr-acc) !important;
  box-shadow: 0 0 0 3px var(--hr-ring) !important;
}
@media (prefers-color-scheme: dark) {
  body.chat-home-page[data-site-theme="system"] .chat-composer:focus-within,
  html[data-site-theme-bootstrap="system"] body.chat-home-page:not([data-site-theme]) .chat-composer:focus-within {
    border-color: var(--hr-acc) !important;
    box-shadow: 0 0 0 3px var(--hr-ring) !important;
  }
}
body.chat-home-page .chat-input,
body.chat-home-page:not(.conversation-active) .chat-input {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 52px;
  padding: 12px 10px 4px;
  color: var(--hr-tx);
}
/* SITE-MAIN-HOME-POLISH-03 (mockup D2 / M2): the hint inside the composer is the mockup's grey. */
body.chat-home-page .chat-input::placeholder,
body.chat-home-page:not(.conversation-active) .chat-input::placeholder { color: var(--hr-tx3); opacity: 1; }
body.chat-home-page .composer-actions .attachment-control { display: contents; }
body.chat-home-page .composer-actions [data-attachment-trigger] { grid-column: 1; grid-row: 3; justify-self: start; }
body.chat-home-page .composer-actions .response-grade-control { grid-column: 3; grid-row: 3; }
body.chat-home-page .composer-actions .send-button { grid-column: 4; grid-row: 3; }

/* Attach: a labelled button on wide screens. */
body.chat-home-page .composer-button.attachment-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 14px 0 10px;
  border-radius: var(--lotbi-radius-button, 12px);
  color: var(--hr-tx2);
  font-size: 14px;
  font-weight: 500;
}
body.chat-home-page .composer-button.attachment-button svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* SITE-MAIN-HOME-POLISH-03 (mockup D2): at rest '＋ 첨부' is text only; the chip shows on hover and while the menu is open (D6). */
body.chat-home-page .composer-button.attachment-button[aria-expanded="false"] { background: transparent; box-shadow: none; }
body.chat-home-page .composer-button.attachment-button[aria-expanded="false"]:hover { background: var(--hr-hover); }
body.chat-home-page .composer-button.attachment-button[aria-expanded="true"] { background: var(--hr-acc-soft); color: var(--hr-acc-tx); }
body.chat-home-page .attachment-button-label { line-height: 1; }

/* Send: 44px rounded square; grey when there is nothing to send, blue when ready. */
body.chat-home-page .composer-button.send-button,
body.chat-home-page:not(.conversation-active) .composer-button.send-button:disabled,
body.chat-home-page:not(.conversation-active) .composer-button.send-button:not(:disabled) {
  width: 44px;
  height: 44px;
  border-radius: var(--lotbi-radius-button, 12px);
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
}
body.chat-home-page .composer-button.send-button:disabled,
body.chat-home-page:not(.conversation-active) .composer-button.send-button:disabled { background: var(--hr-off-bg); color: var(--hr-off-ic); }
body.chat-home-page .composer-button.send-button:not(:disabled),
body.chat-home-page:not(.conversation-active) .composer-button.send-button:not(:disabled) { background: var(--hr-acc); color: #FFFFFF; }
body.chat-home-page .composer-button.send-button:not(:disabled):hover { background: var(--hr-acc-press); }

/* Attachment choices open inside the composer, below the buttons: nothing is covered. */
body.chat-home-page .attachment-menu {
  position: static;
  inset: auto;
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  min-width: 0;
  margin: 8px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--hr-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
body.chat-home-page .attachment-menu[hidden] { display: none; }
body.chat-home-page .attachment-menu [role="menuitem"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--hr-line);
  border-radius: var(--lotbi-radius-button, 12px);
  background: var(--hr-card);
  color: var(--hr-tx);
  font-size: 14px;
  font-weight: 500;
}
body.chat-home-page .attachment-menu [role="menuitem"]:hover,
body.chat-home-page .attachment-menu [role="menuitem"]:focus-visible { background: var(--hr-hover); }
body.chat-home-page .attachment-menu [role="menuitem"]::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--hr-tx2);
  -webkit-mask: var(--hr-menu-icon) center / contain no-repeat;
  mask: var(--hr-menu-icon) center / contain no-repeat;
}
body.chat-home-page .attachment-menu [data-attachment-action="camera"] { --hr-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5h3.2L8.7 6h6.6l1.5 2.5H20v10.5H4Z'/%3E%3Ccircle cx='12' cy='13.5' r='3.3'/%3E%3C/svg%3E"); }
body.chat-home-page .attachment-menu [data-attachment-action="photos"] { --hr-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m20.5 16-5-5-8 8'/%3E%3C/svg%3E"); }
body.chat-home-page .attachment-menu [data-attachment-action="files"] { --hr-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4.5 4.5v12.5H7Z'/%3E%3Cpath d='M14 3.5V8h4.5M9.5 13h6M9.5 16.5h6'/%3E%3C/svg%3E"); }
body.chat-home-page .attachment-menu [data-attachment-action="qr"] { --hr-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Cpath d='M14 14h2.5v2.5H14zM17.5 17.5H20V20h-2.5zM14 20h2M20 14v1.5'/%3E%3C/svg%3E"); }
/* A camera only exists on touch devices; on a mouse-driven computer the choice opens a file picker. */
@media (hover: hover) and (pointer: fine) {
  body.chat-home-page .attachment-menu [data-attachment-action="camera"] { display: none; }
}

/* SITE-MAIN-HOME-POLISH-03 (mockup D6 / M5): an open attachment menu does not light the composer edge. */
body.chat-home-page .chat-composer:has(.attachment-menu:not([hidden])) { border-color: var(--hr-line2) !important; box-shadow: none !important; }

/* Attachment problems were only announced to screen readers; now they are shown too. */
body.chat-home-page .chat-attachment-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--hr-err-line);
  border-radius: var(--lotbi-radius-button, 12px);
  background: var(--hr-err-bg);
  color: var(--hr-err);
  font-size: 13.5px;
  line-height: 20px;
}
body.chat-home-page .chat-attachment-error[hidden] { display: none; }
body.chat-home-page .chat-attachment-error::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Safety line: readable, with an info icon. */
body.chat-home-page .chat-safety-copy,
body.chat-home-page:not(.conversation-active) .chat-safety-copy {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  margin: 12px auto 0;
  font-size: var(--lotbi-fs-13, 13px);
  font-weight: 400;
  line-height: 20px;
  color: var(--hr-tx2);
  text-align: center;
}
body.chat-home-page .chat-safety-copy::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  background: var(--hr-tx3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5M12 7.9v.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5M12 7.9v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- footer: centred, lighter ---------- */
body.chat-home-page .chat-home-footer { border-top: 1px solid var(--hr-line); padding: 14px 24px max(18px, env(safe-area-inset-bottom)); text-align: center; }
body.chat-home-page .chat-home-footer .footer-links { justify-content: center; gap: 4px 18px; font-size: 12.5px; font-weight: 500; color: var(--hr-tx3); }
body.chat-home-page .chat-home-footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hr-tx3); } /* DESIGN-VALUES-01: 44 px tap rows (실측 36) */
body.chat-home-page .chat-home-footer .footer-links a[href="/privacy"] { font-weight: 700; color: var(--hr-tx2); }
body.chat-home-page .chat-home-footer .company-legal { align-items: center; text-align: center; }
body.chat-home-page .chat-home-footer .company-legal-row { justify-content: center; font-size: 11.5px; line-height: 18px; color: var(--hr-tx3); }
body.chat-home-page .chat-home-footer .company-separator { color: var(--hr-line2); }
/* SITE-MAIN-HOME-POLISH-03 (mockup D2): 사업자정보확인 · phone · e-mail read as links. */
body.chat-home-page .chat-home-footer .company-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 901px) {
  body.chat-home-page .chat-home-footer .company-legal { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0; font-size: 11px; }
  body.chat-home-page .chat-home-footer .company-legal-row { font-size: 10.5px; }
  body.chat-home-page .chat-home-footer .company-legal-row:first-child { flex-basis: 100%; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(2),
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(3) { display: contents; }
  body.chat-home-page .chat-home-footer .company-legal-row > * { white-space: nowrap; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(3) > :first-child::before { content: "|"; margin: 0 6px; color: var(--hr-line2); }
}

/* SITE-MAIN-HOME-POLISH-03 (mockup D2 / D4): the text row is 72px (18px above the text, room for two
   lines) and the '＋ 첨부' / send row sits 6px below it, so the composer is 134px tall like the mockup. */
@media (min-width: 601px) {
  body.chat-home-page .chat-composer,
  body.chat-home-page:not(.conversation-active) .chat-composer { padding: 0 10px 10px; }
  body.chat-home-page .chat-input,
  body.chat-home-page:not(.conversation-active) .chat-input { min-height: 72px; margin: 0 -10px; padding: 18px 20px 6px; }
  body.chat-home-page .composer-actions [data-attachment-trigger],
  body.chat-home-page .composer-actions .response-grade-control,
  body.chat-home-page .composer-actions .send-button { margin-top: 6px; }
  /* Open choices (mockup D6): a full-width line 10px under the buttons, 12px around the choices. */
  body.chat-home-page .attachment-menu { margin: 10px -10px -10px; padding: 12px; }
  /* Footer rhythm of the mockup: 20px link row, 10px gap, 18px business rows. */
  body.chat-home-page .chat-home-footer .footer-links { margin-bottom: 10px; line-height: 20px; }
  body.chat-home-page .chat-home-footer .company-legal-row { line-height: 18px; }
  body.chat-home-page .chat-home-footer .company-legal-row + .company-legal-row { margin-top: 0; }
}

/* ---------- phones and narrow windows ---------- */
@media (max-width: 900px) {
  body.chat-home-page { --hr-stage-size: 236px; --hr-col: 100%; }
  /* The Home fills the visible screen: character in the middle, composer at the bottom. */
  body.chat-home-page:not(.conversation-active) .chat-hero {
    min-height: calc(var(--lotbi-visible-viewport-height, 100svh) - 64px);
    justify-content: flex-end;
    padding: 0;
  }
  /* On a phone the open area gives way when the composer grows (attachments, long text). */
  body.chat-home-page:not([data-conversation-restore="pending"]):not(.conversation-active) .home-avatar-anchor { min-height: 0; overflow: hidden; }
  body.chat-home-page:not(.conversation-active) .chat-composer-stack {
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 10px 0 max(14px, env(safe-area-inset-bottom));
    background: var(--hr-bg);
  }
  /* SITE-MAIN-HOME-POLISH-03 (mockup M2): 로그인 / 회원가입 in the phone header are 44px rounded squares. */
  body.chat-home-page .account-action { min-height: 44px; padding: 0 14px; border-radius: var(--lotbi-radius-button, 12px); border-color: var(--hr-line2); font-size: 14px; font-weight: 600; }
  body.chat-home-page .account-action.account-login { background: var(--hr-card); color: var(--hr-tx); }
  /* Profile menu rises from the bottom as a sheet. */
  body.chat-home-page .profile-popover-layer { background: rgba(16, 24, 40, .42); }
  body.chat-home-page[data-site-theme="dark"] .profile-popover-layer,
  html[data-site-theme-bootstrap="dark"] body.chat-home-page:not([data-site-theme]) .profile-popover-layer { background: rgba(0, 0, 0, .62); }
  body.chat-home-page .profile-popover {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: 80svh;
    padding: 4px 12px max(30px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    border-width: 1px 0 0;
    box-shadow: none;
  }
  /* SITE-MAIN-HOME-POLISH-03 (owner-approved mockup M11): grab handle, header, 52px rows. */
  body.chat-home-page .profile-sheet-grab { display: block; width: 40px; height: 4px; margin: 8px auto 12px; border-radius: 2px; background: var(--hr-line2); }
  body.chat-home-page .profile-popover-head { padding: 2px 0 12px 8px; }
  body.chat-home-page .profile-popover .profile-menu-item { min-height: 52px; font-size: var(--lotbi-fs-15, 15px); }
}
@media (max-width: 600px) {
  /* One row: [+][text][send]; the choices open above it. */
  body.chat-home-page .chat-composer,
  body.chat-home-page:not(.conversation-active) .chat-composer { padding: 3px; align-items: end; }
  body.chat-home-page .chat-input,
  body.chat-home-page:not(.conversation-active) .chat-input { grid-column: 2; grid-row: 4; min-height: 44px; margin: 0 8px; padding: 10px 4px; }
  body.chat-home-page .composer-actions [data-attachment-trigger] { grid-column: 1; grid-row: 4; }
  body.chat-home-page .composer-actions .response-grade-control { grid-column: 3; grid-row: 4; }
  body.chat-home-page .composer-actions .send-button { grid-column: 4; grid-row: 4; }
  body.chat-home-page .composer-button.attachment-button { width: 44px; padding: 0; justify-content: center; }
  body.chat-home-page .composer-button.attachment-button svg { width: 22px; height: 22px; }
  body.chat-home-page .attachment-button-label { display: none; }
  /* SITE-MAIN-HOME-POLISH-03 (owner-approved mockup M5): the choices are their own card 8px above
     the composer; the composer stays where it is at the bottom and nothing below it moves. */
  body.chat-home-page .attachment-menu {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: calc(100% + 9px);
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--hr-line);
    border-radius: var(--lotbi-radius-card, 16px);
    background: var(--hr-card);
  }
  body.chat-home-page .attachment-menu[hidden] { display: none; }
  body.chat-home-page .attachment-menu [role="menuitem"] {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 72px;
    padding: 6px 4px;
    border-radius: var(--lotbi-radius-button, 12px);
    background: var(--hr-subtle);
    font-size: var(--lotbi-fs-13, 13px);
    text-align: center;
  }
  body.chat-home-page .attachment-menu [role="menuitem"]::before { width: 22px; height: 22px; }
  /* SITE-MAIN-HOME-POLISH-03 (mockup M1 / M2 / M9): the line spans the composer width, left aligned. */
  body.chat-home-page:not(.conversation-active) .chat-safety-copy { align-self: stretch; max-width: none; justify-content: flex-start; margin: 8px 4px 0; line-height: 19px; text-align: left; }
  /* The bottom dock of the mockup (M1 / M2 / M5 / M9): a full-width line above it, 26px under the
     safety line (room for the phone's home bar), 8px while the keyboard is up (M3). */
  body.chat-home-page .chat-composer-stack,
  body.chat-home-page:not(.conversation-active) .chat-composer-stack { padding-top: 10px; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
  body.chat-home-page.mobile-keyboard-open .chat-composer-stack,
  body.chat-home-page.mobile-keyboard-open:not(.conversation-active) .chat-composer-stack { padding-bottom: 8px; }
  /* Mockup M3 / M4: with the keyboard up the safety line stays under the composer. */
  body.chat-home-page.mobile-keyboard-open:not(.conversation-active) .chat-composer-stack { display: flex; flex-direction: column; }
  body.chat-home-page.mobile-keyboard-open:not(.conversation-active) .chat-composer-stack > .chat-safety-copy { order: 6; margin: 8px 4px 0; }
  /* Mockup M8: the dock stays at the bottom of the screen while the footer scrolls under it
     (keyboard up: it stays in the page as before). */
  body.chat-home-page:not(.conversation-active):not(.mobile-keyboard-open) .chat-composer-stack {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
  body.chat-home-page:not(.conversation-active):not(.mobile-keyboard-open) .chat-hero { min-height: calc(var(--lotbi-visible-viewport-height, 100svh) - 64px - var(--hr-dock-h, 0px)); padding-bottom: 0; }
  body.chat-home-page:not(.conversation-active):not(.mobile-keyboard-open) .chat-home-footer { margin-bottom: var(--hr-dock-h, 0px); }
  body.chat-home-page .chat-composer-stack::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    height: 1px;
    background: var(--hr-line);
    pointer-events: none;
  }
  /* SITE-MAIN-HOME-POLISH-03 (owner-approved mockup M8): links as in the mockup, then the business
     information as 7 centred lines joined with '·':
     회사 · 대표자 / 등록번호 · 사업자정보확인 / 통신판매업 / 주소 / 전화 · 이메일 / 호스팅 / LOTBI ©. */
  body.chat-home-page .chat-home-footer { padding: 24px 0 max(28px, env(safe-area-inset-bottom)); }
  body.chat-home-page .chat-home-footer .footer-links { gap: 2px 16px; margin-bottom: 14px; }
  body.chat-home-page .chat-home-footer .footer-links a { display: inline-flex; align-items: center; min-height: 36px; }
  body.chat-home-page .chat-home-footer .company-legal-row { display: flex; flex-flow: row wrap; justify-content: center; align-items: baseline; row-gap: 0; font-size: var(--lotbi-fs-12, 12px); line-height: 20px; }
  body.chat-home-page .chat-home-footer .company-legal-row > * { margin-block: 1.5px; }
  body.chat-home-page .chat-home-footer .company-legal-row + .company-legal-row { margin-top: 0; }
  body.chat-home-page .chat-home-footer .company-legal-row::before,
  body.chat-home-page .chat-home-footer .company-legal-row::after { content: ""; flex-basis: 100%; height: 0; }
  body.chat-home-page .chat-home-footer .company-separator { margin: 0; font-size: 0; color: var(--hr-tx3); }
  body.chat-home-page .chat-home-footer .company-separator::before { content: "·"; margin: 0 6px; font-size: var(--lotbi-fs-12, 12px); }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(1) { order: 1; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(2) { order: 2; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(3) { order: 3; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1)::before { order: 4; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(4) { display: none; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(5) { order: 5; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(8) { order: 6; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(9) { order: 7; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1)::after { order: 8; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(6) { display: none; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(1) > :nth-child(7) { order: 9; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(2) > :nth-child(1) { order: 1; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(2)::before { order: 2; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(2) > :nth-child(2) { display: none; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(2) > :nth-child(n+3) { order: 3; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(2)::after { order: 9; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(3) > :nth-child(3) { order: 1; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(3)::before { order: 2; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(3) > :nth-child(2) { display: none; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(3) > :nth-child(1) { order: 3; }
  body.chat-home-page .chat-home-footer .company-legal-row:nth-child(3)::after { order: 9; }
}

@media (max-width: 900px) and (prefers-color-scheme: dark) {
  body.chat-home-page[data-site-theme="system"] .profile-popover-layer,
  html[data-site-theme-bootstrap="system"] body.chat-home-page:not([data-site-theme]) .profile-popover-layer { background: rgba(0, 0, 0, .62); }
}

/* ---------- conversation (SITE-MAIN-HOME-POLISH-03, owner-approved mockup D7 / D8 / M6 / M7) ----------
   One page colour (no white band on top), the question in a grey bubble, a 3-dot waiting line
   instead of the character bubble, a mockup error card, the safety line under the composer and
   a busy composer (blue send with a spinner) while LOTBI answers. */
body.chat-home-page.conversation-active,
body.chat-home-page.conversation-active .chat-app-shell,
body.chat-home-page.conversation-active .chat-home-shell,
body.chat-home-page.conversation-active .chat-topbar { background: var(--hr-bg) !important; box-shadow: none; }
body.chat-home-page.conversation-active .conversation-thread { width: var(--hr-col); max-width: var(--hr-col); padding-inline: 0; }
/* On a computer the empty top bar goes away and the thread starts 40px from the top like the mockup;
   the first time stamp (it sat under that bar) stays for screen readers only. */
@media (min-width: 901px) {
  body.chat-home-page.conversation-active .chat-topbar { display: none; }
  body.chat-home-page.conversation-active .chat-hero { min-height: var(--lotbi-visible-viewport-height, 100svh); padding-top: 16px; }
  body.chat-home-page.conversation-active .conversation-thread { padding-top: 26px; }
  /* Mockup D7 / D8 dock: one-line text row (124px composer), 20px under the safety line. */
  body.chat-home-page.conversation-active .chat-composer-stack { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  body.chat-home-page.conversation-active .chat-input { min-height: 62px; }
  body.chat-home-page.conversation-active .conversation-thread > .conversation-time-separator:first-child {
    position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
body.chat-home-page.conversation-active .chat-assistant-row { max-width: none; }
/* The character waits off the conversation (mockup D8 / M7 show none above the thread). */
body.chat-home-page.conversation-active .home-avatar-anchor { display: none; }
body.chat-home-page .chat-message-user {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 18px 18px 6px 18px;
  background: var(--hr-user-bg);
  color: var(--hr-tx);
}
body.chat-home-page .chat-message-user .chat-message-body { font-size: var(--lotbi-fs-16, 16px); line-height: 24px; }
/* Waiting: three dots and the copy, no character bubble. */
/* The thread already keeps 12px between turns: 12 + 16 = the mockup's 28px (phones 12 + 10 = 22px). */
body.chat-home-page .chat-assistant-row:has(.chat-message-loading) { display: block; margin-top: 16px; }
body.chat-home-page .chat-assistant-row:has(.chat-message-loading) .assistant-avatar-slot { display: none; }
body.chat-home-page .chat-message-loading { min-height: 22px; padding: 0; }
body.chat-home-page .chat-message-loading .chat-message-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--hr-tx2);
}
body.chat-home-page .chat-message-loading .chat-message-body::before {
  content: "";
  flex: 0 0 29px;
  height: 7px;
  background:
    radial-gradient(circle at 3.5px 50%, var(--hr-tx3) 3.5px, transparent 3.6px),
    radial-gradient(circle at 14.5px 50%, color-mix(in srgb, var(--hr-tx3) 65%, transparent) 3.5px, transparent 3.6px),
    radial-gradient(circle at 25.5px 50%, color-mix(in srgb, var(--hr-tx3) 35%, transparent) 3.5px, transparent 3.6px);
}
body.chat-home-page .chat-message-loading .chat-message-paragraph { font-size: var(--lotbi-fs-15, 15px); line-height: 22px; color: var(--hr-tx2); }
/* CHAT-PHOTO-COMMON-INDICATOR-03: a photo being read shows the shared 사진 인식 표시 (site-photo-recognizing.css) alone:
   no three dots before it. */
body.chat-home-page .chat-message-loading[data-thinking-kind="ANALYZING_IMAGE"] .chat-message-body::before { content: none; display: none; }
/* Error card: icon, bold title, what to do, a white 다시 시도 with its icon. */
body.chat-home-page .chat-message-error {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  justify-self: start;
  width: min(640px, 100%);
  max-width: 640px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--hr-err-line);
  border-radius: var(--lotbi-radius-card, 16px);
  background: var(--hr-err-bg);
  color: var(--hr-err);
}
body.chat-home-page .chat-message-error::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.chat-home-page .chat-message-error > * { grid-column: 2; }
body.chat-home-page .chat-message-error .chat-message-body { font-size: var(--lotbi-fs-15, 15px); font-weight: 600; line-height: 22px; color: var(--hr-err); }
body.chat-home-page .chat-message-error .chat-error-hint { margin: 2px 0 0; font-size: 14px; line-height: 21px; color: var(--hr-tx2); }
body.chat-home-page .chat-message-error .chat-error-evidence { margin-top: 6px; font-size: var(--lotbi-fs-12, 12px); color: var(--hr-tx3); }
body.chat-home-page .chat-message-error .chat-retry-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 12px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--hr-line2);
  border-radius: var(--lotbi-radius-button, 12px);
  background: var(--hr-card);
  color: var(--hr-tx);
  font-size: 14px;
  font-weight: 600;
}
body.chat-home-page .chat-message-error .chat-retry-button:not(.chat-upgrade-link)::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4h-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4h-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.chat-home-page .chat-message-error .chat-retry-button:hover { background: var(--hr-hover); }
/* The composer in the conversation is the same box as on the Home. */
body.chat-home-page.conversation-active .chat-composer-stack { background: var(--hr-bg); }
body.chat-home-page.conversation-active .chat-composer-stack .chat-composer { border-color: var(--hr-line2); background: var(--hr-card); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
/* Safety line under the composer in the conversation too. */
body.chat-home-page.conversation-active .chat-composer-stack { display: flex; flex-direction: column; }
body.chat-home-page.conversation-active .chat-composer-stack > .chat-composer { order: 5; }
body.chat-home-page.conversation-active .chat-composer-stack > .chat-safety-copy { order: 6; align-self: center; max-width: none; margin: 12px auto 0; }
/* Busy composer while LOTBI answers: quiet edge, 첨부 dimmed.
   MAIN-HOME-DESIGN-02 (confirmed mockup P07 / M07): the send button turns into a dark round 멈춤
   with a small square instead of a spinner; pressing it ends the turn on this screen. */
body.chat-home-page .chat-composer:has(.send-button[data-send-mode="stop"]),
body.chat-home-page .chat-composer:has(.send-button[aria-label="전송 중"]) { border-color: var(--hr-line) !important; box-shadow: none !important; }
body.chat-home-page .chat-composer:has(.send-button[data-send-mode="stop"]) .attachment-button,
body.chat-home-page .chat-composer:has(.send-button[aria-label="전송 중"]) .attachment-button { opacity: .45; }
body.chat-home-page .composer-button.send-button[data-send-mode="stop"],
body.chat-home-page:not(.conversation-active) .composer-button.send-button[data-send-mode="stop"] { position: relative; background: var(--hr-tx) !important; color: var(--hr-bg) !important; cursor: pointer; }
body.chat-home-page .composer-button.send-button[data-send-mode="stop"] svg { visibility: hidden; }
body.chat-home-page .composer-button.send-button[data-send-mode="stop"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: currentColor;
}
/* The note left where the answer would have been. */
body.chat-home-page .chat-message.chat-message-stopped { justify-self: start; margin: 4px 0 0; padding: 0; border: 0; background: transparent; font-size: 13.5px; line-height: 20px; color: var(--hr-tx3); }
@media (max-width: 600px) {
  /* DENSITY-01 (민원 mrep_8267065dc3f14ed8a3c9, 10-28 아이폰 「문장마다 간격이 너무 커 한 화면에 정보가 조금밖에 안 들어와」): the
     answer's lines were 1.75 apart and its paragraphs 14px; on a phone 1.55 and 10px keep it easy to read and show more. */
  /* DENSITY-02 (운영 375폭 실측 10-28: 1.75 그대로) -- body.chat-home-page.conversation-active .chat-message-assistant >
     .chat-message-body (site-conversation.css, loaded after this file) set 1.75 with more classes; this one carries one more.
     DENSITY-03: 1.66, not 1.55 -- the answer design keeps lines at least 1.65 apart (validate_conversation_design_01). */
  body.chat-home-page.conversation-active .chat-message.chat-message-assistant > .chat-message-body { line-height: 1.66; }
  body.chat-home-page.conversation-active .chat-message-assistant .chat-message-body > :is(p, ul, .chat-table-scroll, pre) + :is(p, ul, .chat-table-scroll, pre) { margin-top: 10px; }
  body.chat-home-page .chat-message-user { max-width: 84%; }
  body.chat-home-page .chat-message-user .chat-message-body { font-size: var(--lotbi-fs-15, 15px); line-height: 23px; }
  body.chat-home-page .chat-assistant-row:has(.chat-message-loading) { margin-top: 10px; }
  body.chat-home-page .chat-message-loading .chat-message-paragraph { font-size: 14px; }
  body.chat-home-page .chat-message-error { justify-self: stretch; width: auto; max-width: none; margin-top: 10px; padding: 14px; }
  body.chat-home-page .chat-message-error .chat-message-body { font-size: 14.5px; }
  body.chat-home-page .chat-message-error .chat-error-hint { font-size: 13.5px; }
  body.chat-home-page.conversation-active .chat-composer-stack > .chat-safety-copy { align-self: stretch; justify-content: flex-start; margin: 8px 4px 0; line-height: 19px; text-align: left; }
}

/* ---------- chosen files (SITE-MAIN-HOME-POLISH-03, owner-approved mockup D5 / D9 / M4) ----------
   Cards inside the composer on a computer (above the text), a row just above the composer on a
   phone; the attachment error sits inside the composer under the text. */
body.chat-home-page .chat-composer > .attachment-preview-strip {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 14px 4px 0;
  border: 0;
  background: transparent;
}
body.chat-home-page .chat-composer > .attachment-preview-strip[hidden] { display: none; }
body.chat-home-page .attachment-chip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 280px;
  height: 52px;
  padding: 0 4px 0 8px;
  border: 1px solid var(--hr-line);
  border-radius: var(--lotbi-radius-button, 12px);
  background: var(--hr-subtle);
  color: var(--hr-tx);
}
body.chat-home-page .attachment-chip-tile {
  box-sizing: border-box;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hr-line);
  border-radius: 8px;
  background: var(--hr-card);
  color: var(--hr-tx2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
body.chat-home-page .attachment-chip-tile-image::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m20.5 16-5-5-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='m20.5 16-5-5-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.chat-home-page .attachment-chip-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; text-align: left; }
body.chat-home-page .attachment-chip .attachment-chip-name { max-width: 150px; overflow: hidden; font-size: var(--lotbi-fs-13, 13px); font-weight: 500; color: var(--hr-tx); text-overflow: ellipsis; white-space: nowrap; }
body.chat-home-page .attachment-chip .attachment-chip-meta { margin: 0; font-size: var(--lotbi-fs-12, 12px); font-weight: 400; color: var(--hr-tx3); white-space: nowrap; }
body.chat-home-page .attachment-chip .attachment-chip-remove {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hr-tx2);
  font-size: 0;
}
body.chat-home-page .attachment-chip .attachment-chip-remove::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.chat-home-page .attachment-chip .attachment-chip-remove:hover { background: var(--hr-hover); }
body.chat-home-page .attachment-uploading { align-self: center; font-size: var(--lotbi-fs-12, 12px); color: var(--hr-tx3); }
@media (min-width: 601px) {
  body.chat-home-page .chat-input,
  body.chat-home-page:not(.conversation-active) .chat-input { grid-row: 2; }
  body.chat-home-page .chat-composer > .chat-attachment-error { grid-column: 1 / -1; grid-row: 3; margin: 10px 2px 0; }
  body.chat-home-page .composer-actions [data-attachment-trigger],
  body.chat-home-page .composer-actions .response-grade-control,
  body.chat-home-page .composer-actions .send-button { grid-row: 4; }
  body.chat-home-page .attachment-menu { grid-row: 5; }
  body.chat-home-page .chat-composer .attachment-menu { border-radius: 0 0 15px 15px; background: transparent; box-shadow: none; }
  /* Mockup D5: a question longer than one line gets a roomier text area (126px). */
  body.chat-home-page:not(.conversation-active) .chat-input[data-multiline] { min-height: 126px; }
}
@media (max-width: 600px) {
  body.chat-home-page .chat-composer > .attachment-preview-strip {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: calc(100% + 9px);
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0;
  }
  body.chat-home-page .chat-composer-stack:has(.attachment-preview-strip:not([hidden])) { padding-top: 70px; }
  body.chat-home-page .chat-composer:has(.attachment-preview-strip:not([hidden])) .attachment-menu { bottom: calc(100% + 69px); }
  body.chat-home-page .attachment-chip { flex: 0 1 auto; max-width: 180px; background: var(--hr-card); }
  body.chat-home-page .attachment-chip .attachment-chip-name { max-width: 96px; }
  body.chat-home-page .attachment-chip .attachment-chip-meta { white-space: normal; }
  body.chat-home-page .chat-composer > .chat-attachment-error { grid-column: 1 / -1; grid-row: 2; margin: 6px 6px 4px; }
}

/* ---------- phone menu drawer (SITE-MAIN-HOME-POLISH-03, owner-approved mockup M10 / M11) ----------
   56px header with the 40px logo and a quiet ×, rows 2px apart from the top, recent list 12px
   below, the account row at the bottom over a line. */
body.chat-home-page .mobile-nav-drawer { padding: 6px 12px max(14px, env(safe-area-inset-bottom)); }
body.chat-home-page .mobile-nav-drawer .mobile-drawer-header { height: 56px; margin: 0; padding: 0 0 0 8px; }
body.chat-home-page .mobile-nav-drawer .mobile-drawer-brand-logo { width: auto; height: 40px; }
body.chat-home-page .mobile-nav-drawer .mobile-drawer-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--hr-tx2);
  font-size: 0;
}
body.chat-home-page .mobile-nav-drawer .mobile-drawer-close::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.chat-home-page .mobile-nav-drawer.pointer-opened .mobile-drawer-close:focus-visible,
body.chat-home-page .profile-popover-layer.pointer-opened .profile-popover .profile-menu-item:first-of-type:focus-visible {
  outline: none;
}
body.chat-home-page.site-workspace-open.nav-drawer-open .mobile-nav-backdrop { z-index: 90; }
body.chat-home-page.site-workspace-open.nav-drawer-open .mobile-nav-drawer { z-index: 100; }
body.chat-home-page .mobile-nav-drawer .consumer-primary-nav { gap: 2px; margin-top: 4px; }
body.chat-home-page .mobile-nav-drawer .consumer-primary-nav .nav-item-primary { margin: 0; }
body.chat-home-page .mobile-nav-drawer .sidebar-history-shell { margin-top: 12px; }
body.chat-home-page .mobile-nav-drawer .sidebar-account-footer { padding: 0; }
body.chat-home-page .mobile-nav-drawer .sidebar-profile-trigger { min-height: 52px; padding: 6px 8px; border-radius: var(--lotbi-radius-button, 12px); }
/* Recent list header as the mockup (D1 / M10): 36px row, 14px in, 13px label. */
body.chat-home-page .sidebar-history-section .nav-section-title { min-height: 36px; margin: 0; padding: 0 12px 0 14px; font-size: var(--lotbi-fs-13, 13px); font-weight: 500; color: var(--hr-tx2); }
body.chat-home-page .nav-history-list li { min-height: 44px; padding: 0; }
body.chat-home-page .chat-sidebar-desktop .sidebar-history-shell { margin-top: 8px; } /* + the 14px nav gap = the mockup 22px */
/* Phone header as the mockup (M1 / M2 / M6): controls in a 56px row, the menu button 4px from the edge and the
   account circle 15px from the right edge (the buttons keep their 48px tap areas). */
@media (max-width: 600px) {
  /* The bar keeps its 64px reading-area edge (the conversation anchors questions under it); its
     controls sit in the top 56px like the mockup. */
  body.chat-home-page .chat-topbar { box-sizing: border-box; min-height: 64px; height: 64px; margin: 0 -4px 0 -11px; padding-bottom: 8px; }
}

/* MAIN-HOME-DESIGN-02 (confirmed mockup 2026-10-17): guest account area at the bottom of the
   computer sidebar and the phone drawer — 로그인 filled with the action colour, 회원가입 outlined. */
body.chat-home-page .sidebar-guest-actions { gap: 8px; }
body.chat-home-page .sidebar-guest-actions .sidebar-account-entry {
  min-height: 44px;
  border-radius: var(--lotbi-radius-button, 12px);
  font-weight: 600;
}
body.chat-home-page .sidebar-guest-actions .sidebar-guest-login {
  background: var(--hr-acc);
  border-color: var(--hr-acc);
  color: #FFFFFF;
}
body.chat-home-page .sidebar-guest-actions .sidebar-guest-login .sidebar-account-name { color: #FFFFFF; }

/* MAIN-HOME-DESIGN-02 (confirmed mockup 2026-10-17): composer details shared by computer and phone. */
/* Send: a round ↑ button (44px so a thumb still hits it); grey with nothing to send, blue when ready. */
body.chat-home-page .composer-button.send-button,
body.chat-home-page:not(.conversation-active) .composer-button.send-button:disabled,
body.chat-home-page:not(.conversation-active) .composer-button.send-button:not(:disabled) { border-radius: 50%; }
body.chat-home-page .composer-button.send-button svg { width: 20px; height: 20px; }
/* The + turns into × while the choices are open. */
body.chat-home-page .composer-button.attachment-button svg { transition: transform .16s ease; }
body.chat-home-page .composer-button.attachment-button[aria-expanded="true"] svg { transform: rotate(45deg); }
/* The camera button exists for phones only; the computer keeps [첨부]. */
body.chat-home-page .composer-camera-button { display: none; }
/* The safety line: the full sentence on the computer, one short line on phones. */
body.chat-home-page .chat-safety-short { display: none; }

@media (max-width: 600px) {
  body.chat-home-page .chat-composer,
  body.chat-home-page:not(.conversation-active) .chat-composer { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
  body.chat-home-page .chat-input,
  body.chat-home-page:not(.conversation-active) .chat-input { grid-column: 3; margin: 0 6px 0 4px; }
  body.chat-home-page .composer-actions .response-grade-control { grid-column: 4; }
  body.chat-home-page .composer-actions .send-button { grid-column: 5; }
  body.chat-home-page .composer-camera-button {
    display: inline-flex;
    grid-column: 2;
    grid-row: 4;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hr-tx2);
  }
  body.chat-home-page .composer-camera-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  body.chat-home-page .composer-camera-button:disabled { opacity: .45; }
  body.chat-home-page .composer-button.attachment-button { border-radius: 50%; }
  /* The choices sit inside the composer, above the input row: 사진·스크린샷 and 파일
     (카메라 is its own button now, so the menu's 카메라 choice is not shown on phones). */
  body.chat-home-page .attachment-menu {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 6px;
    padding: 4px 4px 8px;
    border: 0;
    border-bottom: 1px solid var(--hr-line2);
    border-radius: 0;
    background: transparent;
  }
  body.chat-home-page .attachment-menu [data-attachment-action="camera"] { display: none; }
  body.chat-home-page .attachment-menu [role="menuitem"] {
    flex-direction: row;
    gap: 8px;
    min-height: 48px;
    padding: 0 10px;
    border-radius: var(--lotbi-radius-card, 16px);
    font-size: 14.5px;
    font-weight: 500;
  }
  body.chat-home-page .attachment-menu [role="menuitem"]::before { width: 19px; height: 19px; }
  body.chat-home-page .chat-safety-long { display: none; }
  body.chat-home-page .chat-safety-short { display: inline; }
  body.chat-home-page .chat-safety-copy,
  body.chat-home-page:not(.conversation-active) .chat-safety-copy { font-size: 11.5px; line-height: 17px; color: var(--hr-tx3); }
  body.chat-home-page:not(.conversation-active) .chat-safety-copy,
  body.chat-home-page.conversation-active .chat-composer-stack > .chat-safety-copy { justify-content: center; text-align: center; }
  body.chat-home-page .chat-safety-copy::before { width: 12px; height: 12px; margin-top: 2.5px; }
}

/* MAIN-HOME-DESIGN-02 (confirmed mockup 2026-10-17, P08 / M08): a failed send is one line under the
   question, right aligned — red icon + 「보내지 못했어요」 + a small 다시 시도 — not a pink card. */
body.chat-home-page .chat-message-error.chat-message-error-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 8px 10px;
  width: auto;
  max-width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.chat-home-page .chat-message-error.chat-message-error-compact::before { width: 17px; height: 17px; margin: 0; }
body.chat-home-page .chat-message-error.chat-message-error-compact .chat-message-body { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
body.chat-home-page .chat-message-error.chat-message-error-compact .chat-error-evidence { flex-basis: 100%; margin: 0; text-align: right; }
body.chat-home-page .chat-message-error.chat-message-error-compact .chat-retry-button {
  min-height: 36px;
  margin: 0;
  padding: 0 12px 0 10px;
  border-radius: 18px;
  font-size: 13.5px;
}
body.chat-home-page .chat-message-error.chat-message-error-compact .chat-retry-button::before { width: 15px; height: 15px; }
@media (max-width: 600px) {
  body.chat-home-page .chat-message-error.chat-message-error-compact { justify-self: end; width: auto; margin-top: 8px; padding: 0; }
  body.chat-home-page .chat-message-error.chat-message-error-compact .chat-retry-button { min-height: 44px; }
}

/* MAIN-HOME-DESIGN-02 (confirmed mockup 2026-10-17) — shape pass after side-by-side comparison. */
body.chat-home-page .consumer-primary-nav .nav-item { min-height: 42px; padding: 6px 10px; }
body.chat-home-page .chat-composer,
body.chat-home-page:not(.conversation-active) .chat-composer,
body.chat-home-page.conversation-active .chat-composer-stack .chat-composer {
  border-color: var(--hr-line);
  border-radius: 24px;
  box-shadow: 0 6px 24px rgba(17, 24, 39, .07), 0 1px 2px rgba(17, 24, 39, .04);
}
body.chat-home-page[data-site-theme="dark"] .chat-composer,
html[data-site-theme-bootstrap="dark"] body.chat-home-page:not([data-site-theme]) .chat-composer { box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
@media (min-width: 601px) {
  body.chat-home-page .chat-composer,
  body.chat-home-page:not(.conversation-active) .chat-composer { padding: 8px 12px 10px 14px; }
  body.chat-home-page .chat-input,
  body.chat-home-page:not(.conversation-active) .chat-input { min-height: 46px; padding: 8px 4px 2px; font-size: 15.5px; }
  body.chat-home-page .composer-button.attachment-button { height: 36px; border-radius: 18px; }
}
@media (max-width: 600px) {
  body.chat-home-page .chat-composer,
  body.chat-home-page:not(.conversation-active) .chat-composer { border-radius: 26px; padding: 4px; }
  body.chat-home-page .composer-actions .composer-button.attachment-button:not([aria-expanded="true"]),
  body.chat-home-page .composer-actions .composer-camera-button { background: transparent; border-color: transparent; color: var(--hr-tx2); }
  body.chat-home-page .chat-composer-stack::before { display: none; }
  body.chat-home-page .account-action { min-height: 36px; padding: 0 16px; border-radius: 18px; }
  body.chat-home-page { --hr-stage-size: 300px; }
}
@media (min-width: 601px) {
  body.chat-home-page .composer-actions .composer-button.attachment-button:not([aria-expanded="true"]) { background: var(--hr-subtle); border-color: transparent; color: var(--hr-tx2); }
}

/* MAIN-HOME-DESIGN-02 (confirmed mockup P05 / M05): chosen photos are photo tiles with a round × on the corner. */
body.chat-home-page .attachment-chip.attachment-chip-photo {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--hr-subtle);
}
body.chat-home-page .attachment-chip-photo .attachment-chip-photo-image { width: 100%; height: 100%; object-fit: cover; display: block; }
body.chat-home-page .attachment-chip-photo .attachment-chip-photo-meta { position: absolute; inset: auto 0 0; padding: 2px 0; background: rgba(17, 24, 39, .55); color: #FFFFFF; font-size: 10.5px; text-align: center; }
body.chat-home-page .attachment-chip.attachment-chip-photo .attachment-chip-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, .72);
  color: #FFFFFF;
}
body.chat-home-page .attachment-chip.attachment-chip-photo .attachment-chip-remove::after { content: ""; position: absolute; inset: -11px; }
@media (max-width: 600px) {
  body.chat-home-page .attachment-chip.attachment-chip-photo { width: 72px; height: 72px; }
}
/* MAIN-HOME-DESIGN-02 (confirmed mockup P06 / M06): LOTBI's answer is plain text beside the small mark — no card around it. */
body.chat-home-page .chat-message-assistant:not(.chat-message-error):not(.chat-message-loading) { border-color: transparent; background: transparent; box-shadow: none; }
body.chat-home-page.conversation-active .chat-message-assistant > .chat-message-body { padding: 0; border: 0; border-radius: 0; background: transparent; }
html body.chat-home-page.conversation-active .chat-message-assistant > .chat-message-body { font-size: 15.5px; }
@media (max-width: 600px) {
  /* MAIN-HOME-DESIGN-02 (M05): chosen photos sit inside the composer, above the input row. */
  body.chat-home-page .chat-composer > .attachment-preview-strip {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 6px 8px;
  }
  body.chat-home-page .chat-composer-stack:has(.attachment-preview-strip:not([hidden])) { padding-top: 10px; }
}
html body.chat-home-page.conversation-active .chat-thread-shell .chat-message-assistant > .chat-message-body,
html body.chat-home-page.conversation-active .chat-message.chat-message-assistant > .chat-message-body { padding: 0; border: 0; border-radius: 0; background: transparent; }
@media (min-width: 601px) {
  /* MAIN-HOME-DESIGN-02 (P05): a long question grows with its lines instead of jumping to 126px. */
  body.chat-home-page:not(.conversation-active) .chat-input[data-multiline] { min-height: 46px; }
}
/* MAIN-HOME-DESIGN-02 (confirmed mockup P06 / M06 / I08): the conversation starts with its small date line
   (「오늘 오전 9:41」) on computer and phone — polish-03 had hidden the first one. */
body.chat-home-page.conversation-active .conversation-thread > .conversation-time-separator:first-child {
  position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; white-space: normal;
}
@media (max-width: 900px) {
  /* MAIN-HOME-DESIGN-02 (M06 / M07 / M08): in a conversation the phone header sits on a hairline. */
  body.chat-home-page.conversation-active .chat-topbar { border-bottom: 1px solid var(--hr-line2); }
}
@media (max-width: 600px) {
  /* Touch floor: the header 로그인 keeps a 44px tap height (pill look, mockup M01). */
  body.chat-home-page .account-action { min-height: 44px; border-radius: 22px; }
  /* The one-line safety copy keeps the 19px line the keyboard layout is measured against. */
  body.chat-home-page .chat-safety-copy,
  body.chat-home-page:not(.conversation-active) .chat-safety-copy { line-height: 19px; }
}
@media (max-width: 900px) {
  /* MAIN-HOME-DESIGN-02 (M01 / M01d): the header 로그인 pill has the light card edge of the mockup. */
  body.chat-home-page .account-action.account-login { border-color: var(--hr-line); }
}
@media (min-width: 601px) {
  /* The 첨부 chip sits 11px from the composer's left edge (1px border + 10px). */
  body.chat-home-page .chat-composer,
  body.chat-home-page:not(.conversation-active) .chat-composer { padding-left: 10px; }
  body.chat-home-page .chat-input,
  body.chat-home-page:not(.conversation-active) .chat-input { padding-left: 8px; }
}
@media (min-width: 601px) {
  /* The send button sits 11px from the composer's right edge, like 첨부 on the left. */
  body.chat-home-page .chat-composer,
  body.chat-home-page:not(.conversation-active) .chat-composer { padding-right: 10px; }
}
/* LOTBI-BOX-ACCOUNT-MENU-04 — owner-confirmed design 04 #01 (계정 설정·LOTBI함,
   2026-10-17). The account row opens a small menu right above it, as wide as
   the row, on a PC and inside the phone drawer alike (no bottom sheet, no dim):
   프로필 관리 · LOTBI함 (blue unread count) · 설정, a line, 로그아웃 in red.
   Rows are 48px with 16px labels and plain 22px line icons. A blue dot on the
   account row says LOTBI함 has unread mail. The menu's place comes from the
   row (--profile-anchor-*, set when it opens). The account row itself is a
   grey card: light-blue initial, the name, then the plan in grey. */
/* CHAT-WHITE-SURFACE-01: the drawer went light grey (--hr-side #F9F9FA); the menu stays white as board #01 measured. */
body.chat-home-page { --lb-menu-bg: #FFFFFF; --lb-menu-hover: var(--hr-subtle); --lb-account-card: var(--hr-subtle); --lb-avatar-bg: #DBE4FE; --lb-avatar-fg: var(--hr-acc-tx); }
body.chat-home-page[data-site-theme="dark"],
html[data-site-theme-bootstrap="dark"] body.chat-home-page:not([data-site-theme]) { --lb-menu-bg: #27282C; --lb-menu-hover: #2F2F2F; --lb-account-card: #2D2D2D; --lb-avatar-bg: #1F3660; }
@media (prefers-color-scheme: dark) {
  body.chat-home-page[data-site-theme="system"],
  html[data-site-theme-bootstrap="system"] body.chat-home-page:not([data-site-theme]) { --lb-menu-bg: #27282C; --lb-menu-hover: #2F2F2F; --lb-account-card: #2D2D2D; --lb-avatar-bg: #1F3660; }
}
body.chat-home-page .profile-popover-layer,
body.chat-home-page[data-site-theme] .profile-popover-layer,
html[data-site-theme-bootstrap] body.chat-home-page:not([data-site-theme]) .profile-popover-layer { background: transparent; }
body.chat-home-page .profile-popover {
  position: fixed;
  inset: auto auto var(--profile-anchor-bottom, 84px) var(--profile-anchor-left, 12px);
  width: var(--profile-anchor-width, 250px);
  max-width: calc(100vw - 24px);
  min-height: 0;
  max-height: calc(100svh - 24px);
  overflow-y: auto;
  padding: 8px;
  gap: 2px;
  border-width: 1px;
  border-radius: var(--lotbi-radius-card, 16px);
}
/* site-conversation.css is loaded again after this file, so its Dark popover rule needs one more attribute to lose. */
body.chat-home-page .profile-popover,
body.chat-home-page[data-site-theme] .profile-popover { background: var(--lb-menu-bg); }
body.chat-home-page .profile-popover .profile-menu-item:not(:disabled):hover,
body.chat-home-page[data-site-theme] .profile-popover .profile-menu-item:not(:disabled):hover { background: var(--lb-menu-hover); }
body.chat-home-page .profile-popover .profile-menu-item { gap: 14px; min-height: 48px; padding: 10px 12px; border-radius: var(--lotbi-radius-button, 12px); font-size: var(--lotbi-fs-16, 16px); font-weight: 600; }
body.chat-home-page .profile-popover .profile-menu-icon { flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border-radius: 0; background: transparent; color: var(--hr-tx2); stroke-width: 1.7; }
body.chat-home-page .profile-popover .profile-menu-logout .profile-menu-icon { color: inherit; }
body.chat-home-page .profile-popover .profile-menu-count {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lotbi-radius-button, 12px);
  background: var(--hr-acc);
  color: #fff;
  font-size: var(--lotbi-fs-13, 13px);
  font-weight: 700;
  line-height: 1;
}
body.chat-home-page .profile-popover .profile-menu-separator { margin: 4px 12px; border: 0; border-top: 1px solid var(--hr-line); }
body.chat-home-page .sidebar-profile-trigger .sidebar-profile-unread-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hr-acc);
}
body.chat-home-page .sidebar-profile-trigger,
body.chat-home-page[data-site-theme] .sidebar-profile-trigger { min-height: 64px; padding: 12px; gap: 10px; border-radius: var(--lotbi-radius-card, 16px); background: var(--lb-account-card); }
body.chat-home-page .sidebar-profile-trigger:hover,
body.chat-home-page[data-site-theme] .sidebar-profile-trigger:hover { background: var(--hr-hover); }
body.chat-home-page .sidebar-profile-trigger .sidebar-profile-copy { flex: 1 1 auto; min-width: 0; }
body.chat-home-page .sidebar-profile-trigger .sidebar-profile-avatar:not(img) { width: 36px; height: 36px; flex-basis: 36px; min-width: 36px; border: 0; background: var(--lb-avatar-bg); color: var(--lb-avatar-fg); font-size: var(--lotbi-fs-15, 15px); font-weight: 700; }
body.chat-home-page .sidebar-profile-trigger .sidebar-profile-avatar-default:not(img) { color: var(--lb-avatar-fg); }
body.chat-home-page .sidebar-profile-trigger img.sidebar-profile-avatar { width: 36px; height: 36px; flex-basis: 36px; min-width: 36px; }
body.chat-home-page .sidebar-profile-trigger .sidebar-account-name { font-size: var(--lotbi-fs-16, 16px); font-weight: 700; color: var(--hr-tx); }
body.chat-home-page .sidebar-profile-trigger .sidebar-account-plan,
body.chat-home-page[data-site-theme] .sidebar-profile-trigger .sidebar-account-plan { flex-basis: 100%; font-size: 14px; font-weight: 400; color: var(--hr-tx3); }
body.chat-home-page .sidebar-profile-trigger .sidebar-account-plan::before { content: none; }

/* MAIN-HOME (owner 2026-10-18): in Dark the open conversation in 최근 대화 keeps a dark row — the grey
   --lotbi-selected-bg / dark text pair is a Light pair and showed as a white box. The blue edge stays. */
body.chat-home-page[data-site-theme="dark"].conversation-active .nav-history-list .conversation-history-open[aria-current="true"],
html[data-site-theme-bootstrap="dark"] body.chat-home-page:not([data-site-theme]).conversation-active .nav-history-list .conversation-history-open[aria-current="true"] {
  background: var(--hr-subtle);
  color: var(--hr-tx);
}
@media (prefers-color-scheme: dark) {
  body.chat-home-page[data-site-theme="system"].conversation-active .nav-history-list .conversation-history-open[aria-current="true"],
  html[data-site-theme-bootstrap="system"] body.chat-home-page:not([data-site-theme]).conversation-active .nav-history-list .conversation-history-open[aria-current="true"] {
    background: var(--hr-subtle);
    color: var(--hr-tx);
  }
}

/* LOTBI-BOX-ACCOUNT-SHEET-04 — owner decision 2026-10-18: on a phone the account menu
   (Home and LOTBI함 alike) rises from the bottom of the screen as a sheet instead of a
   popover inside the drawer (mockup M10 / design 04 #01 rows): a dimmed backdrop, a grab
   handle, the account header (photo, name, "plan · e-mail"), 프로필 관리 · LOTBI함 (blue
   count) · 설정 with '>' , a line, 로그아웃 in red. A PC keeps the compact popover above. */
@media (min-width: 901px) {
  body.chat-home-page .profile-popover .profile-sheet-grab,
  body.chat-home-page .profile-popover .profile-popover-head,
  body.chat-home-page .profile-popover .profile-menu-go { display: none; }
}
@media (max-width: 900px) {
  body.chat-home-page .profile-popover-layer,
  body.chat-home-page[data-site-theme] .profile-popover-layer,
  html[data-site-theme-bootstrap] body.chat-home-page:not([data-site-theme]) .profile-popover-layer { background: rgba(16, 24, 40, .42); }
  body.chat-home-page[data-site-theme="dark"] .profile-popover-layer,
  html[data-site-theme-bootstrap="dark"] body.chat-home-page:not([data-site-theme]) .profile-popover-layer { background: rgba(0, 0, 0, .62); }
  body.chat-home-page .profile-popover {
    inset: auto 0 0 0;
    width: auto;
    max-width: none;
    max-height: 84svh;
    padding: 0 8px max(24px, env(safe-area-inset-bottom));
    gap: 0;
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 32px rgba(16, 24, 40, .18);
    animation: lotbi-account-sheet-rise .22s ease-out;
  }
  body.chat-home-page .profile-popover .profile-sheet-grab { display: block; width: 38px; height: 5px; margin: 14px auto 14px; border-radius: 3px; background: var(--hr-line2); }
  body.chat-home-page .profile-popover .profile-popover-head { gap: 16px; margin: 0 0 6px; padding: 4px 12px 16px; border-bottom: 1px solid var(--hr-line); }
  body.chat-home-page .profile-popover .profile-popover-avatar { flex-basis: 46px; width: 46px; height: 46px; border: 0; background: var(--lb-avatar-bg); color: var(--lb-avatar-fg); font-size: 18px; }
  body.chat-home-page .profile-popover .profile-popover-head-name { font-size: 18px; font-weight: 700; }
  body.chat-home-page .profile-popover .profile-popover-head-plan { margin-top: 2px; font-size: 14px; }
  body.chat-home-page .profile-popover .profile-menu-item { gap: 16px; min-height: 56px; padding: 0 15px; font-size: var(--lotbi-fs-17, 17px); }
  body.chat-home-page .profile-popover .profile-menu-icon { flex-basis: 22px; width: 22px; height: 22px; }
  body.chat-home-page .profile-popover .profile-menu-go { display: block; }
  body.chat-home-page .profile-popover .profile-menu-separator { margin: 6px 8px; }
  /* ACCOUNT-SHEET-SETTLE-01: 로그아웃 sits well apart from 설정 so a slip of the finger does not reach it. */
  body.chat-home-page .profile-popover .profile-menu-separator.profile-menu-logout-gap { margin: 22px 8px 14px; }
}
@keyframes lotbi-account-sheet-rise { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.chat-home-page .profile-popover { animation: none; } }
/* MAIN-HOME drawer grid (owner decision 2026-10-18, option A): the ten menu entries took the whole phone drawer and
   left one or two 최근 대화. On a phone they sit in a grid of five per row — icon over the same name, same order — and
   the recent conversations use the height that is left and scroll on their own. The PC sidebar is unchanged. */
@media (max-width: 900px) {
  body.chat-home-page .mobile-nav-drawer .consumer-primary-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px 2px;
    margin-top: 4px;
  }
  body.chat-home-page .mobile-nav-drawer .consumer-primary-nav .nav-item {
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    min-height: 66px;
    padding: 7px 2px 5px;
    border-radius: var(--lotbi-radius-button, 12px);
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
  }
  body.chat-home-page .mobile-nav-drawer .consumer-primary-nav .nav-item[hidden] { display: none; }
  body.chat-home-page .mobile-nav-drawer .consumer-primary-nav .nav-item-label {
    display: block;
    max-width: 100%;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    letter-spacing: -.2px;
  }
  body.chat-home-page .mobile-nav-drawer .consumer-primary-nav .nav-icon { width: 32px; height: 32px; flex: 0 0 32px; padding: 7px; }
  /* A calendar count or reminder sits on the icon's corner instead of taking a row cell. */
  body.chat-home-page .mobile-nav-drawer .consumer-primary-nav .nav-item-status {
    position: absolute;
    top: 3px;
    right: 3px;
  }
  body.chat-home-page .mobile-nav-drawer .sidebar-history-shell { margin-top: 8px; }
}

/* MAIN-HOME menu editing (owner exception 2026-10-18; site-main-menu.js). 더보기 folds the entries that are not
   pinned (and the hidden ones, dimmed); 메뉴 편집 opens a list editor in place of the menu. */
body.chat-home-page .consumer-primary-nav .nav-item[data-menu-state="folded"],
body.chat-home-page .consumer-primary-nav .nav-item[data-menu-state="hidden"] { display: none; }
body.chat-home-page .consumer-primary-nav.menu-more-open .nav-item[data-menu-state="folded"],
body.chat-home-page .consumer-primary-nav.menu-more-open .nav-item[data-menu-state="hidden"] { display: flex; }
body.chat-home-page .consumer-primary-nav.menu-more-open .nav-item[data-menu-state="hidden"] { opacity: .62; }
body.chat-home-page .consumer-primary-nav.menu-more-open .nav-item[hidden] { display: none; }
body.chat-home-page .consumer-primary-nav .menu-more-button {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--lotbi-radius-button, 12px);
  background: transparent; color: var(--hr-tx); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; text-align: left;
}
body.chat-home-page .consumer-primary-nav .menu-more-button[hidden] { display: none; }
body.chat-home-page .consumer-primary-nav .menu-more-button:hover { background: var(--hr-hover); }
body.chat-home-page .consumer-primary-nav .menu-more-icon { box-sizing: border-box; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: var(--hr-tile-other-bg); color: var(--hr-tile-other-fg); }
body.chat-home-page .consumer-primary-nav .menu-more-icon svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  body.chat-home-page .mobile-nav-drawer .consumer-primary-nav .menu-more-button {
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px; min-height: 66px; padding: 7px 2px 5px; font-size: 11px; line-height: 1.2; text-align: center;
  }
  body.chat-home-page .mobile-nav-drawer .consumer-primary-nav .menu-more-icon { width: 32px; height: 32px; flex: 0 0 32px; }
}
body.chat-home-page .consumer-primary-nav.menu-edit-hidden { display: none !important; }
body.chat-home-page .menu-edit-open {
  min-height: 32px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--hr-tx3); font: inherit; font-size: 12.5px; cursor: pointer;
}
body.chat-home-page .menu-edit-open[hidden] { display: none; }
body.chat-home-page .menu-edit-open:hover { background: var(--hr-hover); color: var(--hr-tx); }
/* Drawer: left of the ×. PC: at the right end of the logo row. Neither takes height from the menu. */
body.chat-home-page .mobile-nav-drawer .mobile-drawer-header { position: relative; }
body.chat-home-page .menu-edit-open-drawer { position: absolute; top: 50%; right: 56px; transform: translateY(-50%); min-height: 44px; padding: 0 10px; }
body.chat-home-page .chat-sidebar-desktop { position: sticky; }
body.chat-home-page .menu-edit-open-desktop { position: absolute; top: 28px; right: 12px; z-index: 1; }
body.chat-home-page .menu-editor { display: block; margin: 4px 0 0; }
body.chat-home-page .menu-editor-hint { margin: 0 4px 8px; font-size: var(--lotbi-fs-12, 12px); line-height: 1.45; color: var(--hr-tx3); }
body.chat-home-page .menu-editor-list { margin: 0; padding: 0; list-style: none; }
body.chat-home-page .menu-editor-row {
  display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 2px 2px 2px 0; border-radius: var(--lotbi-radius-button, 12px); touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
body.chat-home-page .menu-editor-row.is-dragging { background: var(--hr-subtle); box-shadow: 0 4px 14px rgba(16, 24, 40, .16); position: relative; z-index: 1; touch-action: none; }
body.chat-home-page .menu-editor-row.is-hidden .menu-editor-name,
body.chat-home-page .menu-editor-row.is-hidden .menu-editor-tile { opacity: .5; }
body.chat-home-page .menu-editor-grip { flex: 0 0 14px; text-align: center; color: var(--hr-tx3); font-size: 14px; letter-spacing: -2px; cursor: grab; touch-action: none; }
body.chat-home-page .menu-editor-tile { box-sizing: border-box; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; padding: 6px; border-radius: 9px; background: var(--hr-tile-other-bg); color: var(--hr-tile-other-fg); }
body.chat-home-page .menu-editor-tile svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.chat-home-page .menu-editor-tile[data-tile="new"] { background: var(--hr-tile-new-bg); color: var(--hr-tile-new-fg); }
body.chat-home-page .menu-editor-tile[data-tile="calendar"] { background: var(--hr-tile-cal-bg); color: var(--hr-tile-cal-fg); }
body.chat-home-page .menu-editor-tile[data-tile="wallet"] { background: var(--hr-tile-wallet-bg); color: var(--hr-tile-wallet-fg); }
body.chat-home-page .menu-editor-tile[data-tile="scam"] { background: var(--hr-tile-scam-bg); color: var(--hr-tile-scam-fg); }
body.chat-home-page .menu-editor-tile[data-tile="trouble"] { background: var(--hr-tile-trouble-bg); color: var(--hr-tile-trouble-fg); }
body.chat-home-page .menu-editor-tile[data-tile="care"] { background: var(--hr-tile-care-bg); color: var(--hr-tile-care-fg); }
body.chat-home-page .menu-editor-tile[data-tile="life"] { background: var(--hr-tile-life-bg); color: var(--hr-tile-life-fg); }
body.chat-home-page .menu-editor-tile[data-tile="tour"] { background: var(--hr-tile-tour-bg); color: var(--hr-tile-tour-fg); }
body.chat-home-page .menu-editor-tile[data-tile="investment"] { background: var(--hr-tile-invest-bg); color: var(--hr-tile-invest-fg); }
body.chat-home-page .menu-editor-name { flex: 1 1 auto; min-width: 0; font-size: var(--lotbi-fs-13, 13px); font-weight: 500; color: var(--hr-tx); line-height: 1.2; word-break: keep-all; }
body.chat-home-page .menu-editor-button {
  flex: 0 0 auto; min-width: 28px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--hr-tx); font: inherit; font-size: var(--lotbi-fs-12, 12px); cursor: pointer; white-space: nowrap;
}
body.chat-home-page .menu-editor-button[hidden] { display: none; }
body.chat-home-page .menu-editor-button:disabled { opacity: .3; cursor: default; }
body.chat-home-page .menu-editor-button:not(:disabled):hover { background: var(--hr-hover); }
body.chat-home-page .menu-editor-button[aria-pressed="true"] { background: var(--hr-subtle); color: var(--hr-tx); font-weight: 700; }
body.chat-home-page .menu-editor-note { min-height: 0; margin: 6px 4px 0; font-size: var(--lotbi-fs-12, 12px); color: var(--hr-tx3); }
body.chat-home-page .menu-editor-note:empty { display: none; }
body.chat-home-page .menu-editor-footer { display: flex; gap: 8px; margin: 10px 0 4px; }
body.chat-home-page .menu-editor-reset,
body.chat-home-page .menu-editor-done { flex: 1 1 0; min-height: 44px; border-radius: var(--lotbi-radius-button, 12px); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
body.chat-home-page .menu-editor-reset { border: 1px solid var(--hr-line2, var(--hr-line)); background: transparent; color: var(--hr-tx); }
body.chat-home-page .menu-editor-done { border: 0; background: var(--hr-tile-new-bg, #2563eb); color: #fff; }
body.chat-home-page .menu-editor-footer { padding: 0 3px; }
body.chat-home-page .menu-editor-reset:focus-visible,
body.chat-home-page .menu-editor-done:focus-visible { outline-offset: 1px; }
/* The PC sidebar is narrower than the drawer: the controls drop under the name. */
body.chat-home-page .chat-sidebar-desktop .menu-editor-row { flex-wrap: wrap; row-gap: 0; padding-bottom: 4px; }
body.chat-home-page .chat-sidebar-desktop .menu-editor-name { flex: 1 1 calc(100% - 60px); }
body.chat-home-page .chat-sidebar-desktop .menu-editor-up { margin-left: 44px; }
body.chat-home-page .chat-sidebar-desktop .menu-editor-button { min-height: 36px; padding: 0 8px; }
/* While editing, the editor takes the menu's height and the recent conversations step aside. */
body.chat-home-page.menu-editing .sidebar-history-shell { display: none; }
body.chat-home-page.menu-editing .sidebar-nav { overflow-y: auto; }
/* PERSONA-SENIOR t2-02: the photo's remove X is seen at 30px (pressed at 44px), not 22px. */
body.chat-home-page .attachment-chip.attachment-chip-photo .attachment-chip-remove { top: 3px; right: 3px; width: 30px; height: 30px; }
body.chat-home-page .attachment-chip.attachment-chip-photo .attachment-chip-remove::before { width: 18px; height: 18px; }
body.chat-home-page .attachment-chip.attachment-chip-photo .attachment-chip-remove::after { inset: -7px; }
/* LOTBI-BOX-BELL-01 — the LOTBI함 bell at the header's top right, signed in only: the end of the
   home's header on a PC, beside the account avatar on a phone (the 지역정보 bar too). It goes to the
   account page's LOTBI함; the blue count is the account row's unread mail, none at 0. */
.lotbi-inbox-bell { display: none; }
body.chat-home-page[data-site-authenticated="true"] .chat-topbar .chat-topbar-inbox-bell,
body.chat-home-page[data-site-authenticated="true"] .consumer-workspace[data-workspace="life"] .ri-topbar .ri-topbar-inbox-bell,
body.chat-home-page[data-site-authenticated="true"] .consumer-workspace .ws-logo-topbar .ri-topbar-inbox-bell {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 48px; box-sizing: border-box; width: 48px; height: 48px; padding: 0;
  border-radius: var(--lotbi-radius-pill, 999px); color: var(--hr-tx2); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
body.chat-home-page .lotbi-inbox-bell:hover { background: var(--hr-hover); }
body.chat-home-page .lotbi-inbox-bell:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
body.chat-home-page .lotbi-inbox-bell .lotbi-inbox-bell-icon { width: 24px; height: 24px; }
body.chat-home-page .lotbi-inbox-bell .lotbi-inbox-bell-count {
  position: absolute; top: 6px; left: 25px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 9px;
  background: var(--hr-acc); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; pointer-events: none;
}

/* WALK-COMMON-01: 로그아웃 sits apart from the rows above and asks once (M33 10-29 tapped it under 설정 by mistake). */
body.chat-home-page .profile-popover .profile-menu-logout-gap { margin-top: 20px; }
.profile-popover .profile-logout-confirm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px 4px; }
.profile-popover .profile-logout-confirm[hidden] { display: none; }
.profile-popover .profile-logout-confirm p { grid-column: 1 / -1; margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--hr-ink, inherit); }
.profile-popover .profile-logout-confirm button { min-height: 44px; border-radius: 12px; font-size: 15px; font-weight: 600; border: 1px solid var(--hr-line, #d1d5db); background: var(--hr-surface, #fff); color: inherit; }
.profile-popover .profile-logout-confirm .profile-logout-confirm-yes { border-color: transparent; background: var(--hr-err-bg, #fdecec); color: var(--hr-err, #b42318); }

/* WALK-COMMON-01 (375 걷기 10-29: 긴 글이 ＋·카메라와 보내기 사이 좁은 칸에서만 줄바꿈됨): on a phone a draft longer than
   one line gets the whole width above the buttons. */
@media (max-width: 600px) {
  body.chat-home-page .chat-input[data-multiline],
  body.chat-home-page:not(.conversation-active) .chat-input[data-multiline] { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 10px 12px 4px; }
}

/* CHAT-WHITE-SURFACE-01: menu screens (a workspace open over the Home) keep their ground under white cards -- grey in
   Light, the Dark surface in Dark (--hr-ws-bg follows the theme blocks above). */
body.chat-home-page.site-workspace-open { --hr-bg: var(--hr-ws-bg) !important; }

/* HOME-CLAUDE-LOOK-01 (소유자 승인 10-29, 첫화면시안3): the business line above the composer and its
   short sheet; the safety line and the long footer leave the empty Home (a conversation keeps its safety line). */
.lotbi-home-business { display: block; max-width: 100%; margin: 0 auto 10px; padding: 2px 6px; border: 0; background: none; color: var(--hr-tx3); font: inherit; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
body.chat-home-page.conversation-active .lotbi-home-business,
body.chat-home-page.mobile-keyboard-open .lotbi-home-business,
body.chat-home-page:not(.conversation-active) .chat-safety-copy { display: none !important; }
/* HOME-BUSINESS-FULL-P0-01 (소유자 10-29 「카드 심사 중이니 사이트는 건들지 말고 앱만」): a web browser shows the full business
   information (상호·대표자·사업자등록번호·통신판매업·주소·연락처) open on the empty Home again, as before; the one-line fold is not
   drawn. The LOTBI app draws its own business line; its web view hides this footer only while that line is really there
   (HOME-BUSINESS-APP-LINE-P0-02: the signed-in app Home did not draw it, and the company name showed nowhere). */
/* HOME-BUSINESS-APP-FALLBACK-P0-03 (애플방 아이폰 s293 뒤 0줄): in the app web view the footer sits below the composer, off the
   screen and out of reach, so a missing app line still left 0 company names. The app web view now shows the one-line business
   line above the composer instead of the footer, and hides it while the app's own line is there: exactly one either way.
   A web browser never shows the one line and keeps the full footer. */
.lotbi-home-business { display: none; }
/* HOME-BUSINESS-NO-PHONE-LINK-01 (아이폰 s296 캡처): iOS read the 사업자등록번호 583-88-03679 as a phone number and drew it as a
   blue link; on the one line a tap opens the business sheet, never a call. */
.lotbi-home-business a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; pointer-events: none; }
html[data-lotbi-app="1"] body.chat-home-page:not(.conversation-active):not(.mobile-keyboard-open) .lotbi-home-business { display: block; }
html[data-lotbi-app="1"] body.chat-home-page.lotbi-app-biz-home:has(.chat-composer-stack > .lotbi-app-biz) .lotbi-home-business,
html[data-lotbi-app="1"] body.chat-home-page:not(.conversation-active) .chat-home-footer { display: none !important; }
.lotbi-home-business-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .35); }
.lotbi-home-business-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-width: 720px; margin: 0 auto; padding: 36px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: var(--hr-card); color: var(--hr-tx3); text-align: center; font-size: 12px; line-height: 1.55; word-break: keep-all; }
.lotbi-home-business-sheet p { margin: 0; }
.lotbi-home-business-sheet a { color: inherit; text-decoration: underline; }
.lotbi-home-business-sheet i { margin: 0 4px; font-style: normal; opacity: .6; }
.lotbi-home-business-keep { white-space: nowrap; }
.lotbi-home-business-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; background: none; color: var(--hr-tx3); font-size: 17px; cursor: pointer; }
.lotbi-home-business-backdrop[hidden], .lotbi-home-business-sheet[hidden] { display: none; }

/* CHAT-WHITE-SURFACE-01: the PC drawer's account row takes the drawer ground too (home-bare-white still paints it #212121 in Dark). */
@media (min-width: 901px) { body.chat-home-page .chat-sidebar-desktop .sidebar-account-footer { background: var(--hr-side) !important; } }