.chat-main, .admin-main { width: min(100% - 1.5rem, 54rem); padding-bottom: 2rem; }
.chat-heading { padding: 1.7rem .1rem 1rem; }
.chat-heading h1 { margin: .45rem 0 .6rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 10vw, 4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.chat-heading > p:last-child { max-width: 45rem; color: var(--muted); }
.chat-card { border: 1px solid var(--line); border-radius: 1.15rem; background: var(--surface); box-shadow: var(--shadow); }
.chat-availability { display: flex; align-items: center; gap: .8rem; margin-bottom: .85rem; padding: .85rem 1rem; }
.availability-dot { width: .7rem; height: .7rem; flex: 0 0 auto; border-radius: 50%; background: var(--muted); }
.chat-availability[data-state="open"] .availability-dot { background: #17a673; box-shadow: 0 0 0 4px color-mix(in srgb, #17a673 16%, transparent); }
.chat-availability[data-state="closed"] .availability-dot { background: #d77b36; }
.availability-copy p { margin: 0; font-size: .9rem; font-weight: 700; }
.availability-copy .job-search-status { margin-top: .12rem; color: var(--muted); font-size: .8rem; font-weight: 450; }
.chat-panel { padding: 1rem; }
.chat-owner { display: flex; align-items: center; gap: .85rem; }
.chat-owner img { width: 3.9rem; height: 3.9rem; flex: 0 0 auto; border: 2px solid var(--line); border-radius: 50%; object-fit: cover; }
.chat-owner h2, .admin-signin h2, .admin-controls h2, .inbox-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 500; }
.chat-owner p { margin: .2rem 0 0; color: var(--muted); font-size: .83rem; line-height: 1.35; }
.chat-explanation { margin: 1rem 0; color: var(--muted); font-size: .9rem; }
.chat-signin-button { width: 100%; gap: .7rem; }
.google-mark { display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: white; color: #4285f4; font-family: Arial, sans-serif; font-size: 1rem; font-weight: 800; }
.chat-error:not([hidden]) { margin: .85rem 0 0; padding: .7rem .8rem; border: 1px solid #d77b36; border-radius: .7rem; color: var(--ink); background: color-mix(in srgb, #d77b36 12%, var(--surface)); font-size: .84rem; }
.chat-session-bar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .7rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.visitor-account { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: .82rem; }
.visitor-account strong { display: block; color: var(--ink); font-size: .9rem; }
.text-button { min-height: 42px; flex: 0 0 auto; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--background); color: var(--accent); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.chat-inline-notice:not([hidden]) { margin: .75rem 0; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--soft); color: var(--muted); font-size: .84rem; }
.chat-transcript { display: flex; min-height: 12rem; max-height: 52dvh; flex-direction: column; gap: .6rem; overflow-y: auto; padding: .9rem .1rem; overscroll-behavior: contain; }
.empty-chat { align-self: center; max-width: 24rem; margin: auto; padding: 1.5rem .5rem; color: var(--muted); font-size: .88rem; text-align: center; }
.message-bubble { max-width: min(87%, 36rem); padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .9rem .9rem .9rem .2rem; background: var(--background); overflow-wrap: anywhere; }
.message-bubble[data-from="owner"] { align-self: flex-end; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: .9rem .9rem .2rem .9rem; background: var(--soft); }
.message-meta { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .2rem; color: var(--muted); font-size: .68rem; }
.message-meta strong { color: var(--accent); font-size: .72rem; }
.message-text { margin: 0; white-space: pre-wrap; font-size: .9rem; line-height: 1.5; }
.chat-compose { display: grid; gap: .55rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.chat-compose textarea { width: 100%; min-height: 3.5rem; max-height: 8rem; resize: vertical; padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--background); color: var(--ink); font: inherit; font-size: .94rem; line-height: 1.45; }
.chat-compose textarea:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.compose-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.compose-footer .button { min-height: 44px; padding: .6rem .85rem; }
.message-count { color: var(--muted); font-size: .72rem; }
.chat-consent { margin: .8rem 0; padding: .8rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--background); }
.chat-consent label { display: flex; align-items: flex-start; gap: .55rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.chat-consent input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; margin-top: .08rem; accent-color: var(--accent); }
.chat-status { min-height: 1.3rem; margin: .55rem 0 0; color: var(--muted); font-size: .76rem; }
.chat-safety { padding: 1rem .1rem; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.chat-safety a, .chat-fallback a { color: var(--accent); font-weight: 650; }
.chat-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .85rem 1rem; color: var(--muted); font-size: .82rem; }
.chat-fallback p { width: 100%; margin: 0; color: var(--ink); font-weight: 700; }
.chat-fallback a { min-height: 40px; display: inline-flex; align-items: center; }
.admin-main { width: min(100% - 1.5rem, 68rem); }
.admin-signin { max-width: 34rem; padding: 1.2rem; }
.admin-signin > p { color: var(--muted); font-size: .9rem; }
.admin-workspace { display: grid; gap: 1rem; }
.admin-controls { padding: 1rem; }
.admin-controls h2 { margin-top: 1rem; }
.toggle-row { display: flex; gap: .65rem; align-items: flex-start; margin: .9rem 0; padding: .8rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--background); }
.toggle-row input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: .15rem; accent-color: var(--accent); }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: .88rem; }
.toggle-row small { margin-top: .12rem; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.admin-field { display: block; margin: .85rem 0 .4rem; font-size: .82rem; font-weight: 650; }
.admin-controls select { width: 100%; min-height: 46px; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--background); color: var(--ink); font: inherit; }
.admin-controls > .button { width: 100%; margin-top: .8rem; }
.admin-inbox-layout { display: grid; min-height: 34rem; gap: .9rem; }
.inbox-list-card, .owner-thread-card { min-width: 0; overflow: hidden; }
.inbox-list-card { padding: .9rem; }
.inbox-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .1rem .1rem .7rem; border-bottom: 1px solid var(--line); }
.inbox-count { min-width: 1.65rem; min-height: 1.65rem; display: inline-grid; place-items: center; padding: 0 .35rem; border-radius: 999px; background: var(--soft); color: var(--accent); font-size: .73rem; font-weight: 750; }
.inbox-list { display: grid; gap: .45rem; max-height: 19rem; overflow-y: auto; padding-top: .55rem; }
.inbox-item { width: 100%; min-height: 64px; padding: .65rem .7rem; border: 1px solid transparent; border-radius: .7rem; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.inbox-item:hover, .inbox-item[aria-current="true"] { border-color: var(--line); background: var(--background); }
.inbox-item-name { display: flex; justify-content: space-between; gap: .4rem; font-size: .84rem; font-weight: 750; }
.inbox-item-name span:last-child { color: var(--muted); font-size: .66rem; font-weight: 450; }
.inbox-item-preview { display: block; overflow: hidden; margin-top: .2rem; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item[data-unread="true"] .inbox-item-name::after { width: .5rem; height: .5rem; align-self: center; border-radius: 50%; background: var(--accent); content: ""; }
.empty-inbox { padding: 1rem .3rem; color: var(--muted); font-size: .84rem; }
.owner-thread-card { min-height: 27rem; padding: .9rem; }
.owner-thread-empty { display: grid; min-height: 26rem; align-content: center; justify-items: center; padding: 1rem; text-align: center; }
.owner-thread-empty h2 { margin: .4rem 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 500; }
.owner-thread-empty p:last-child { color: var(--muted); font-size: .84rem; }
.owner-thread-heading { min-height: 3.7rem; }
.owner-thread-heading .visitor-account { font-size: .74rem; }
.owner-transcript { min-height: 19rem; max-height: 47dvh; }
.owner-thread .text-button { padding-inline: .55rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (min-width: 760px) {
  .chat-main { width: min(100% - 3rem, 50rem); padding-top: 1rem; }
  .chat-panel { padding: 1.35rem; }
  .admin-main { width: min(100% - 3rem, 72rem); padding-top: 1rem; }
  .admin-workspace { grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.8fr); align-items: start; }
  .admin-controls { grid-column: 1 / -1; }
  .admin-controls > .button { width: auto; min-width: 10rem; }
  .admin-inbox-layout { display: contents; }
  .inbox-list-card { min-height: 34rem; }
  .inbox-list { max-height: 30rem; }
  .owner-thread-card { min-height: 34rem; }
  .owner-thread-empty { min-height: 32rem; }
  .owner-transcript { max-height: 54vh; }
}

.chat-app-page { width: 100%; }
.chat-app { display: grid; min-width: 0; gap: .75rem; }
.chat-privacy-note, .chat-app-footer { margin: .75rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.chat-app-footer a { color: var(--accent); font-weight: 650; }
.chat-app [hidden] { display: none !important; }
.admin-controls summary { min-height: 44px; display: flex; align-items: center; color: var(--accent); font-size: .9rem; font-weight: 750; cursor: pointer; }
.admin-controls[open] summary { margin-bottom: .65rem; }

.chat-widget {
  position: fixed;
  z-index: 20;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.chat-widget-launcher {
  position: relative;
  display: inline-flex;
  min-width: 6rem;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .65rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 78%, transparent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.chat-widget-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .29); }
.chat-widget-launcher svg { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; }
.chat-widget.is-open .chat-widget-launcher { box-shadow: 0 5px 18px rgba(0, 0, 0, .2); }
.chat-widget-unread:not([hidden]) {
  position: absolute;
  top: -.35rem;
  right: -.35rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  display: grid;
  place-items: center;
  padding: 0 .25rem;
  border: 2px solid var(--background);
  border-radius: 999px;
  background: #c33c32;
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  line-height: 1;
}
.chat-widget-panel {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  width: min(26rem, calc(100vw - 2rem));
  height: min(43rem, calc(82dvh - env(safe-area-inset-bottom, 0px)));
  max-height: calc(100dvh - 6.5rem - env(safe-area-inset-bottom, 0px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background: var(--background);
  box-shadow: 0 22px 62px rgba(0, 0, 0, .3);
}
.chat-widget-panel[hidden] { display: none; }
.chat-widget-header {
  display: flex;
  min-height: 4.15rem;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .65rem .8rem .65rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.chat-widget-heading { display: grid; min-width: 0; }
.chat-widget-heading strong { overflow: hidden; color: var(--ink); font-size: .93rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-widget-heading span { color: var(--muted); font-size: .72rem; }
.chat-widget-collapse {
  width: 2.65rem;
  min-height: 2.65rem;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--background);
  color: var(--accent);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.chat-widget-app { min-height: 0; flex: 1; overflow-y: auto; padding: .65rem; overscroll-behavior: contain; }
.chat-widget-app .chat-app { gap: .55rem; }
.chat-widget-app .chat-card { border-radius: .8rem; box-shadow: none; }
.chat-widget-app .chat-availability { margin: 0; padding: .6rem .7rem; }
.chat-widget-app .chat-panel { padding: .8rem; }
.chat-widget-app .chat-owner img { width: 3.1rem; height: 3.1rem; }
.chat-widget-app .chat-owner h2 { font-size: 1.2rem; }
.chat-widget-app .chat-owner p { font-size: .75rem; }
.chat-widget-app .chat-explanation { margin: .75rem 0; font-size: .83rem; }
.chat-widget-app .chat-transcript { min-height: 7rem; max-height: 28dvh; padding: .65rem .1rem; }
.chat-widget-app .chat-consent { margin: .55rem 0; padding: .65rem; }
.chat-widget-app .chat-consent label { font-size: .7rem; }
.chat-widget-app .chat-compose textarea { min-height: 3rem; padding: .65rem; font-size: .88rem; }
.chat-widget-app .compose-footer .button { min-height: 42px; }
.chat-widget-app .chat-status { font-size: .72rem; }
.chat-widget-app .chat-privacy-note, .chat-widget-app .chat-app-footer { font-size: .7rem; }
.chat-widget-app .admin-workspace { gap: .55rem; }
.chat-widget-app .admin-controls { padding: .65rem .8rem; }
.chat-widget-app .admin-inbox-layout { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.chat-widget-app .inbox-list-card { padding: .65rem; }
.chat-widget-app .inbox-list { max-height: 8rem; }
.chat-widget-app .owner-thread-card { min-height: 10rem; padding: .65rem; }
.chat-widget-app .owner-thread-empty { min-height: 8rem; }
.chat-widget-app .owner-thread-empty h2 { font-size: 1.25rem; }
.chat-widget-app .owner-transcript { min-height: 6rem; max-height: 20dvh; }
.chat-widget-app .owner-thread-heading .text-button { white-space: nowrap; }

@media (max-width: 480px) {
  .chat-widget { right: calc(.75rem + env(safe-area-inset-right, 0px)); bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
  .chat-widget-launcher { min-width: 3.5rem; min-height: 3.5rem; padding: .8rem; }
  .chat-widget-launcher-label { display: none; }
  .chat-widget-panel {
    right: calc(.5rem + env(safe-area-inset-right, 0px));
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 2rem - env(safe-area-inset-right, 0px) - env(safe-area-inset-left, 0px));
    height: min(40rem, calc(100dvh - 14rem - env(safe-area-inset-bottom, 0px)));
    max-height: calc(100dvh - 5.75rem - env(safe-area-inset-bottom, 0px));
    border-radius: 1rem;
  }
}

@media (prefers-color-scheme: dark) {
  .chat-widget-launcher { color: #0c121b; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-widget-launcher { transition: none; }
}