/**
 * The Concierge's corner button and panel (build Step 3, items 1 and 2).
 *
 * Tokens only, read from naples-ds.css; the button is the site's one brand color, and the panel is
 * the search filters' right-side panel (na-listings.css .na-ls-panel), the same component for the
 * same job — full screen on phones. No focus rule here: THE FOCUS RING in naples-ds.css is the
 * only one.
 */

/* ---------- the corner button ---------- */
.nacon-btn{
	position: fixed; right: 16px; bottom: 16px; z-index: 9980;
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 48px; padding: 6px 20px 6px 16px;
	/* ⚠ It floats over Mangrove (header, hero, footer) as well as paper: Mangrove on Mangrove
	   vanished (seen 2026-10-27 on the homepage hero). The white edge (the inverted button's
	   color, --na-cta-inv) is what shows it on the brand surface; on paper the fill does. */
	border: 2px solid var(--na-cta-inv); border-radius: var(--na-radius-pill);
	background: var(--na-cta); color: var(--na-cta-ink);
	font: 600 var(--na-ui)/1.2 var(--na-sans);
	box-shadow: var(--na-shadow-md); cursor: pointer;
	transition: background .15s, opacity .2s, visibility .2s;
}
/* On a phone it steps aside while it would sit on something tappable, or while a field is typed in
   (na-concierge.js, preview 2026-11-09). */
.nacon-btn.nacon-btn--aside{ opacity: 0; visibility: hidden; pointer-events: none; }
/* Steps aside while the homepage's two choices are on screen (2026-11-02). */
.nacon-btn.nacon-btn--away{ opacity: 0; visibility: hidden; pointer-events: none; }
.nacon-btn:hover{ background: var(--na-cta-hover, var(--na-brand-deep)); }
/* Arrived from an answer's link: one ring spreads from the button, once (2026-10-28). Nothing for
   anyone who asks their device for less motion. */
.nacon-btn.is-cue{ animation: nacon-cue 1.4s ease-out .6s 1; }
@keyframes nacon-cue{
	0%{ box-shadow: var(--na-shadow-md), 0 0 0 0 color-mix(in srgb, var(--na-cta) 60%, transparent); }
	100%{ box-shadow: var(--na-shadow-md), 0 0 0 18px color-mix(in srgb, var(--na-cta) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .nacon-btn.is-cue{ animation: none; } }
.nacon-btn svg{ width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* It steps aside while the cookie bar or the phone alert ask holds the foot of the screen — and while a
   search page's Filters sheet or the site menu is open (Q154, 2026-10-29: on a phone it covered most of
   the sheet's "Show results"). */
body.has-consent-bar .nacon-btn,
body.na-ls-locked .nacon-btn,
body.na-cs-locked .nacon-btn,
body.na-panel-open .nacon-btn,
body:has(.na-ask.is-fixed.is-in) .nacon-btn,
body.nacon-locked .nacon-btn{ display: none; }

/* ---------- the panel ---------- */
body.nacon-locked{ overflow: hidden; }
.nacon-scrim{ position: fixed; inset: 0; z-index: 100001; background: rgba(35,41,31,.42); opacity: 0; transition: opacity .28s; }
.nacon-scrim.is-open{ opacity: 1; }
.nacon-panel{
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 100002;
	width: min(480px, 94vw); background: var(--na-paper);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	/* ⚠ visibility, not only transform: a transform leaves a closed panel's controls in the tab
	   order (na-dialog.js). The delay holds it visible until the slide-out ends. */
	visibility: hidden;
	transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s;
	box-shadow: var(--na-shadow-lg);
	color: var(--na-ink);
}
.nacon-panel.is-open{ transform: translateX(0); visibility: visible; transition: transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s; }
@media (max-width: 640px){
	.nacon-panel{ width: 100vw; }
}

.nacon-head{ display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--na-hair); background: var(--na-card); }
.nacon-title{ flex: 1 1 auto; margin: 0; font: 600 var(--na-h4)/1.2 var(--na-serif); color: var(--na-ink); }
.nacon-new{ background: none; border: 0; padding: 4px 2px; font: 600 var(--na-eyebrow)/1.2 var(--na-sans); color: var(--na-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nacon-new:hover{ color: var(--na-ink); }
.nacon-new[hidden]{ display: none; }
.nacon-x{ flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--na-edge); border-radius: 50%; background: var(--na-card); color: var(--na-muted); cursor: pointer; }
.nacon-x svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nacon-x:hover{ border-color: var(--na-ink); color: var(--na-ink); }

.nacon-body{ flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 8px; font: 400 var(--na-body)/1.5 var(--na-sans); }
.nacon-body p{ margin: 0 0 .7em; }
/* ⚠ Lists in the opening statement and in answers only. Written as `.nacon-body li` until 2026-10-27,
   these also caught the conversation itself (an <ol> of <li>s) and outranked its own rules: 6px
   between a question and the answers around it, the answers indented 24px off the panel's one left
   edge, and the question bubble's margin lost (his note 2026-10-27: "There are inconsistencies."). */
.nacon-intro ul, .nacon-msg ul, .nacon-msg ol{ margin: 0 0 .7em; padding-left: 1.25em; }
.nacon-intro li, .nacon-msg li{ margin: 0 0 .3em; }
.nacon-body a{ color: var(--na-brand); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.nacon-body a:hover{ color: var(--na-brand-deep); }
/* ⚠ A button inside an answer is a link too: without these the link color above painted the primary
   button's words Mangrove on Mangrove ("Sign in to continue" read as a blank green pill, seen
   2026-10-27) and underlined "See these homes". The buttons keep na-cta.css's own colors. */
.nacon-body a.na-btn{ text-decoration: none; }
.nacon-body a.na-btn--primary, .nacon-body a.na-btn--primary:hover{ color: var(--na-cta-ink); }
.nacon-body a.na-btn--secondary, .nacon-body a.na-btn--secondary:hover{ color: var(--na-ink); }

.nacon-preview{ padding: 8px 12px; border-radius: var(--na-radius); background: var(--na-hair); font-size: var(--na-eyebrow); }
.nacon-intro{ padding-bottom: 6px; }

.nacon-try{ margin: 6px 0 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.nacon-try[hidden]{ display: none; }
.nacon-try__h{ margin: 0; font: 600 var(--na-ui)/1.2 var(--na-sans); color: var(--na-muted); }
.nacon-try__q{ max-width: 100%; padding: 9px 16px; border: 1px solid var(--na-edge); border-radius: var(--na-radius-pill); background: var(--na-card); color: var(--na-ink); font: 400 var(--na-ui)/1.3 var(--na-sans); text-align: left; cursor: pointer; }
/* A hover he can see (his note 2026-10-27: the border-and-color change was "not apparent enough"):
   the community page's amenity-chip hover (naples-ds.css .na-cp-chiprow a.na-amen--link:hover) —
   the brand tint filled in, a Mangrove edge. One pattern for the same job. */
.nacon-try__q:hover{ background: var(--na-brand-tint); border-color: var(--na-brand); color: var(--na-ink); }

.nacon-log{ list-style: none; margin: 0; padding: 0; }
/* The rhythm (2026-10-27): 12px from a question to its answer, 24px from an answer to the next
   question, so each exchange reads as one. The bubble keeps the width he approved (full width). */
.nacon-msg{ margin: 0 0 24px; }
.nacon-msg--q{ margin: 0 0 12px; padding: 10px 14px; border-radius: var(--na-radius); background: var(--na-hair); }
.nacon-msg--a > :last-child, .nacon-msg--a > div > :last-child{ margin-bottom: 0; }
.nacon-msg--wait{ color: var(--na-muted); font-style: italic; }
/* The buttons under an answer: the site's one rule, 24px above and 12px between (his rule 2026-10-01)
   (0,2,0): the row is a <p>, and `.nacon-body p` (0,1,1) would otherwise take its margin. Block margins
   collapse, so 24px stands after a paragraph's own .7em too. */
.nacon-msg .nacon-acts-a{ display: flex; flex-wrap: wrap; gap: var(--na-btn-gap-group); margin: var(--na-btn-gap) 0 0; }
.nacon-alt{ display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* The box takes the full width and the button sits below it (his call 2026-10-27: "This gives
   that box more room for users to type into."), on the LEFT like "Send my question" on his question
   form and the site's one left edge (his "Yes." the same day). */
.nacon-form{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--na-hair); background: var(--na-card); }
.nacon-q{ align-self: stretch; width: 100%; min-width: 0; min-height: 48px; max-height: 160px; padding: 10px 12px; box-sizing: border-box; border: 1px solid var(--na-edge); border-radius: var(--na-radius); background: var(--na-card); color: var(--na-ink); font: 400 var(--na-body)/1.4 var(--na-sans); resize: none; }
.nacon-acts{ display: flex; align-items: center; gap: 24px; }
.nacon-send{ flex: none; }
/* The agreement (2026-11-02): the site's checkbox (.na-check), under Ask; it replaced the footer line. */
.nacon-agree{ color: var(--na-ink-soft); }
.nacon-agree a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nacon-agree input:disabled{ opacity: 1; }
.nacon-agree:has(input:disabled){ cursor: default; }
.nacon-agree-msg{ margin: 0; font: 400 var(--na-ui)/1.4 var(--na-sans); color: var(--na-clay); }

.nacon-sr{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }