/* ShellForm.mt Properties assistant (js/assistant.js). Terracotta sparkle button bottom-right; the home and
   back buttons own bottom-left. Panel: a right-hand card on desktop, a full-height sheet on phones. */
.sfa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 950; display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--terracotta); color: #fff;
  font: 700 .95rem/1 var(--f-body); cursor: pointer; box-shadow: 0 12px 32px -4px rgba(27,31,36,.3); transition: background .2s, transform .2s; }
.sfa-fab:hover { background: var(--terracotta-d); transform: translateY(-2px); }
.sfa-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sfa-fab svg { width: 20px; height: 20px; fill: currentColor; }
.sfa-open .sfa-fab { display: none; }

.sfa { position: fixed; right: 18px; bottom: 18px; z-index: 1001; width: min(420px, calc(100vw - 36px)); height: min(680px, calc(100vh - 36px));
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(27,31,36,.45); overflow: hidden; font-size: 15px; line-height: 1.5; }
.sfa[hidden] { display: none; }
.sfa-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 16px; background: var(--ink); color: #fff; }
.sfa-h > div { flex: 1; display: flex; align-items: baseline; gap: 10px; }
.sfa-h strong { font: 600 1.15rem/1.2 var(--f-head); letter-spacing: .01em; }
.sfa-ai { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terracotta-l); }
.sfa-h button { border: 0; background: transparent; color: #fff; cursor: pointer; font: 600 .85rem var(--f-body); padding: 6px 8px; border-radius: 6px; }
.sfa-h .sfa-x { font-size: 1.5rem; line-height: 1; padding: 2px 8px; }
.sfa-h button:hover { background: rgba(255,255,255,.12); }
.sfa-disc { margin: 0; padding: 8px 16px; font-size: .78rem; color: var(--concrete-d); background: var(--limestone); border-bottom: 1px solid var(--line); }
.sfa-disc a { color: inherit; }
.sfa-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; overscroll-behavior: contain; }
.sfa-hi p { margin: 0 0 10px; color: var(--ink-2); }
.sfa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sfa-chip { border: 1px solid var(--sand); background: var(--limestone); color: var(--ink); border-radius: 999px; padding: 7px 12px;
  font: 600 .85rem var(--f-body); cursor: pointer; text-align: left; }
.sfa-chip:hover { border-color: var(--terracotta); color: var(--terracotta-d); }
.sfa-m { margin: 0 0 12px; }
.sfa-t p { margin: 0 0 6px; }
.sfa-user .sfa-t { margin-left: 15%; background: var(--ink); color: #fff; padding: 9px 12px; border-radius: 12px 12px 2px 12px; }
.sfa-user .sfa-t p:last-child, .sfa-assistant .sfa-t p:last-child { margin-bottom: 0; }
.sfa-assistant .sfa-t { background: var(--limestone); padding: 9px 12px; border-radius: 12px 12px 12px 2px; margin-right: 6%; }
.sfa-assistant .sfa-t:empty { display: none; }
.sfa-dots { display: inline-flex; gap: 4px; margin: 4px 0 !important; }
.sfa-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--concrete); animation: sfa-b 1s infinite ease-in-out; }
.sfa-dots i:nth-child(2) { animation-delay: .15s; } .sfa-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sfa-b { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sfa-dots i { animation: none; opacity: .7; } }
.sfa-lbl { margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--concrete-d); }
.sfa-note { margin: 8px 0 6px; font-size: .85rem; color: var(--warn); background: var(--warn-bg); padding: 6px 10px; border-radius: 6px; }
.sfa-fine { margin: 6px 0 0; font-size: .74rem; color: var(--concrete-d); }
.sfa-ls { margin-top: 8px; }
.sfa-card { display: flex; gap: 10px; align-items: center; padding: 8px; margin: 0 0 6px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); text-decoration: none; background: var(--paper); }
.sfa-card:hover { border-color: var(--terracotta); }
.sfa-card img { width: 96px; height: 72px; object-fit: cover; border-radius: 5px; flex: none; background: var(--sand); }
.sfa-card > span { display: flex; flex-direction: column; min-width: 0; font-size: .84rem; color: var(--ink-2); }
.sfa-card b { font-size: .9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfa-p { font-weight: 700; color: var(--terracotta-d) !important; }
.sfa-p small { font-weight: 400; color: var(--concrete-d); }
.sfa-more { display: inline-block; margin-top: 2px; font-weight: 700; font-size: .88rem; color: var(--terracotta-d); }
.sfa-cost { margin-top: 8px; padding: 12px; border-radius: 8px; background: var(--ink); color: #fff; }
.sfa-cost .sfa-lbl { color: var(--terracotta-l); }
.sfa-big { margin: 0 0 8px; font: 600 1.6rem/1.15 var(--f-head); }
.sfa-cost table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.sfa-cost td { padding: 4px 0; border-top: 1px solid rgba(255,255,255,.14); vertical-align: top; }
.sfa-cost td:last-child { text-align: right; white-space: nowrap; padding-left: 10px; }
.sfa-cost .sfa-fine { color: #C9C4BA; } .sfa-cost a { color: #fff; }
.sfa-read { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sfa-read a { font-size: .88rem; font-weight: 600; color: var(--terracotta-d); }
.sfa-err { margin: 8px 0 0; font-size: .85rem; color: #8A1C1C; }
.sfa-f { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: var(--paper); }
.sfa-f textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; padding: 10px 12px; border: 1px solid var(--sand); border-radius: 10px;
  font: 16px/1.35 var(--f-body); color: var(--ink); background: var(--paper); }
.sfa-f textarea:focus { outline: 2px solid var(--terracotta); outline-offset: 0; border-color: transparent; }
.sfa-send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--terracotta); color: #fff; font-size: 1.2rem; cursor: pointer; }
.sfa-f.busy .sfa-send { opacity: .45; cursor: wait; }
.sfa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 700px) {
  .sfa-fab { right: 12px; bottom: 12px; height: 44px; }
  .sfa { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; }
  .sfa-open body { overflow: hidden; }
}