/* lc-concierge.css — Lowcountry Concierge. Editorial left-drawer, hard corners, light "paper".
   NO hardcoded accent color. The accent comes straight from YOOtheme's own utility classes
   applied in the markup (uk-background-default, uk-text-primary, uk-button-primary) — so the
   drawer is painted with the live theme colors and repaints when you change them in the styler.
   This file only owns layout / shape / neutral structure.

   The voice control's own styling (.lc-cc-mic, .lc-voice-*) lives in lc-voice.js, which injects
   it at mount time — i.e. AFTER this stylesheet loads, so it would win any tie here. Anything
   this file needs to say about the mic is written against that, not around it. */
:root{
  --cc-surface:#f4f4f2;             /* raised surfaces: cards, bot bubbles, input */
  --cc-line:rgba(30,32,38,.14);     /* hairlines */
  --cc-text:#20232a;                /* body text (near-ink) */
  --cc-muted:#6c6d74;               /* secondary text */
  --cc-serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --cc-sans:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---- trigger buttons (desktop top nav + mobile bottom bar) ----
   The nav button reuses .uk-button-primary for its color; we only override geometry here.
   Repeated under .uk-navbar so the geometry actually lands: theme.css sets
   `.uk-button{padding:0 20px}` at the same specificity but loads AFTER this file, so the
   bare selector loses on order and the button inherits the theme's button padding.
   align-self matters too — the navbar cell is `align-items:stretch`, so without it the
   button grows to the full 80px navbar height and reads as a white slab, not a button.
   Spacing to its neighbours comes from the cell's own flex `gap`, so no margin here. */
.lc-cc-navbtn,
.uk-navbar .lc-cc-navbtn{
  display:inline-flex; align-items:center; align-self:center; gap:.4rem; cursor:pointer;
  white-space:nowrap; border-radius:0; padding:.5rem .85rem;
  min-height:0; height:auto; line-height:1;
  font:700 12px/1 var(--cc-sans); letter-spacing:.08em; text-transform:uppercase;
}
.lc-cc-navbtn svg{ width:16px; height:16px; }
#lc-bottombar .lc-cc-barbtn svg{ width:22px; height:22px; }

/* ---- fallback floating pill (only if a page has no nav/bar) ---- */
.lc-cc-pill{
  position:fixed; left:0; bottom:22px; z-index:2147482000;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.7rem 1.05rem; border-radius:0; min-height:0; line-height:1;
  font:700 12px/1 var(--cc-sans); letter-spacing:.08em; text-transform:uppercase;
  box-shadow:6px 6px 0 rgba(0,0,0,.16);
}
.lc-cc-pill svg{ width:18px; height:18px; }
.lc-cc-pill.lc-cc-hidden{ display:none; }

/* ---- the drawer ---- */
.lc-cc-panel{
  position:fixed; top:0; left:0; height:100vh; height:100dvh;
  width:min(392px, 90vw);
  transform:translateX(-100%); visibility:hidden;
  transition:transform .34s cubic-bezier(.4,0,.1,1), visibility 0s linear .34s;
  display:flex; flex-direction:column; overflow:hidden;
  color:var(--cc-text);                 /* background comes from .uk-background-default in markup */
  border-right:1px solid var(--cc-line);
  box-shadow:24px 0 70px rgba(20,22,28,.22);
  z-index:2147483000; font-family:var(--cc-sans);
}
.lc-cc-panel.lc-cc-on{ transform:translateX(0); visibility:visible; transition-delay:0s; }

/* The dimmer and the drag grip only exist for the phone sheet below; on desktop the drawer
   is a nav flyout that deliberately leaves the page live behind it, and there is nothing to
   drag because it does not come up from the bottom edge. */
.lc-cc-scrim{ display:none; }
.lc-cc-grip{ display:none; }

/* The slide is state, not choreography, so it is the first thing to go when motion is
   unwelcome. The sheet still arrives; it simply arrives already there. */
@media (prefers-reduced-motion: reduce){
  .lc-cc-panel, .lc-cc-scrim{ transition:none; }
}

/* ---- header ---- */
.lc-cc-head{
  display:flex; align-items:center; gap:.7rem; padding:1.15rem 1.1rem 1rem;
  border-bottom:1px solid var(--cc-line);
}
.lc-cc-ico{ flex:0 0 auto; display:inline-flex; }        /* carries .uk-text-primary in markup */
.lc-cc-ico svg{ width:20px; height:20px; }
.lc-cc-head > div{ flex:1 1 auto; min-width:0; }
.lc-cc-head b{ font-family:var(--cc-serif); font-weight:600; font-size:1.18rem; color:var(--cc-text); }
.lc-cc-head small{ display:block; margin-top:.2rem;       /* carries .uk-text-primary in markup */
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
/* Square rather than glyph-sized: this is the one control a phone user reaches for by aim
   alone, and the drawn X keeps one stroke vocabulary with the mic and the bubble. */
.lc-cc-head .lc-cc-x{
  flex:0 0 auto; margin-left:auto; margin-right:-.35rem; align-self:flex-start;
  width:44px; height:44px; margin-top:-.35rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:0; color:var(--cc-muted); cursor:pointer;
  padding:0; transition:color .15s; }
.lc-cc-head .lc-cc-x svg{ width:20px; height:20px; }
.lc-cc-head .lc-cc-x:hover{ color:var(--cc-text); }

/* ---- transcript ---- */
.lc-cc-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:1.1rem; }
.lc-cc-intro{ font-family:var(--cc-serif); font-style:italic; color:var(--cc-muted);
  font-size:15px; line-height:1.55; margin:0 0 1rem; text-wrap:balance; }
/* With nothing said yet the intro IS the transcript, so it must not leave a trailing
   gap above the composer. */
.lc-cc-intro:last-child{ margin-bottom:0; }

/* Two openings, one per viewport — see the note in renderTranscript(). The wide drawer keeps
   the roll-call of what is covered above its example questions; the phone sheet takes the
   short line, because there the composer directly below it is the thing to understand first. */
.lc-cc-intro--phone{ display:none; }

/* ---- example questions -------------------------------------------------------------
   A row of openers on the desktop drawer, where the column has height to spare and they
   show the range of what can be asked. Rendered but hidden on the phone: there they were
   the whole first screen, pushing the box you actually type in below the fold. Hidden in
   CSS rather than branched in JS so crossing the breakpoint needs no re-render. */
.lc-cc-chips{ display:flex; flex-direction:column; gap:.4rem; margin-top:.9rem; }
.lc-cc-chip{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:.6rem .75rem;
  background:transparent; border:1px solid var(--cc-line); border-radius:0;
  color:var(--cc-text); font-family:var(--cc-sans); font-size:13.5px; line-height:1.35;
  transition:background-color .15s, border-color .15s;
}
.lc-cc-chip:hover{ background:var(--cc-surface); border-color:rgba(30,32,38,.28); }
.lc-cc-chip:active{ background:var(--cc-surface); }
.lc-cc-chip:focus-visible{ outline:2px solid currentColor; outline-offset:-2px; }

/* ---- live catalog results, between the transcript and the composer -------------------
   One band, two shapes.

   WITH HITS it is not a tray under the transcript — it IS the drawer's body. The example
   questions above it are written for somebody who has not started; once there is a query
   and an answer they are stale and compete with it. Collapsing the transcript area hands
   the whole column to the results, which is also what removes the dead space that used to
   sit between those openers and an answer pinned to the bottom edge: the transcript area
   is flex:1, so holding only an intro it ate the free height and pushed the results down.

   WITH NOTHING FOUND the band stays a quiet note and the openers stay on screen, because
   a query that matched nothing is exactly when a menu of what CAN be asked earns its place.

   Which shape applies is selected off a class the render sets, so re-rendering or crossing
   the breakpoint cannot leave layout and content out of step.

   The band must stay OUTSIDE .lc-cc-scroll in the DOM: renderTranscript() rewrites that
   element wholesale on every streamed token and would destroy anything living inside it. */
.lc-cc-live{
  flex:0 0 auto; max-height:38vh; overflow-y:auto;
  border-top:1px solid var(--cc-line); background:var(--cc-surface);
}
.lc-cc-live[hidden]{ display:none; }
/* The same hairline bar the transcript uses. Deliberately NOT `scrollbar-width`: setting the
   standard property makes the browser ignore the ::-webkit- pseudo-elements altogether, and
   what lands instead is the platform default, stepper arrows and all. */
.lc-cc-live::-webkit-scrollbar{ width:8px; }
.lc-cc-live::-webkit-scrollbar-thumb{ background:var(--cc-line); }

/* Neither of these may be squeezed by a long list of results: the box being typed into has
   to stay exactly where it was when the typing started. */
.lc-cc-head,
.lc-cc-form{ flex:0 0 auto; }
/* A flex column parks its free space after the LAST child, so a transcript area that merely
   stops growing pulls the composer up the panel and leaves white underneath it. Claiming
   that space above the composer is what keeps it on the bottom edge. */
.lc-cc-panel:has(.lc-cc-live:not([hidden])) .lc-cc-scroll{ flex:0 1 auto; }
.lc-cc-panel:has(.lc-cc-live:not([hidden])) .lc-cc-form{ margin-top:auto; }

.lc-cc-panel:has(.lc-cc-live--hits:not([hidden])) .lc-cc-scroll{ display:none; }
.lc-cc-live--hits{
  flex:1 1 auto; min-height:0; max-height:none;
  border-top:0; background:transparent;   /* it is the paper now, not a tray sitting on it */
  padding-bottom:.8rem;
}
.lc-cc-live__head{
  margin:0; padding:.8rem 1.1rem .55rem;
  font:600 10px/1 var(--cc-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--cc-text);
}

/* ---- the first hit, given the photograph ----
   Every result carries a real photograph, and a directory whose subject is places to go
   cannot render them as a stack of strings. The top hit gets that photograph at full width:
   it differs the list by shape rather than repeating one card five times, and it fills the
   height the void used to occupy with the one thing worth spending it on.

   16:9 rather than the 4:3 the site's own grid cards use. In a 392px column a taller ratio
   spends the band on one result out of five: 4:3 pushed the list clear off the bottom, and
   3:2 still gave the lead 362px of a 710px band and sliced the fifth row through its own
   photograph at a 900px viewport. At 16:9 the whole set fits with nothing cut, and it is
   the ratio the site's own heroes already use. */
.lc-cc-live__lead{
  display:block; text-decoration:none; color:inherit;
  transition:background-color .16s;
}
.lc-cc-live__shot{
  display:block; position:relative; overflow:hidden;
  /* A declared ratio plus a filling image means the row is its final height before the
     photograph decodes, so nothing below it moves as the list loads. The surface tone stands
     in during the decode instead of a white flash. */
  aspect-ratio:16/9; background:var(--cc-surface);
}
.lc-cc-live__shot img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.lc-cc-live__lead .lc-cc-live__tx{ display:block; padding:.6rem 1.1rem .8rem; }
.lc-cc-live__lead .lc-cc-live__meta{ font-size:10px; margin-bottom:.3rem; }
.lc-cc-live__lead .lc-cc-live__title{
  font-family:var(--cc-serif); font-weight:600; font-size:18px; line-height:1.28;
  /* Three lines at this width carries a whole headline; two cut most of them mid-clause. */
  -webkit-line-clamp:3;
}
.lc-cc-live__lead:hover,
.lc-cc-live__lead:active{ background:rgba(0,0,0,.04); }
.lc-cc-live__lead:hover img{ transform:scale(1.035); }

/* ---- the rest of the list ----
   Photograph, category, name — the same three parts and the same order as the story cards
   on the site itself, which is why these read as native rather than as a widget's own idea
   of a result. No border and no fill: the site's cards do not carry one either, and five
   bordered boxes in a 392px column is the generic shape this is escaping. */
.lc-cc-live__hit{
  display:flex; gap:.8rem; align-items:center;
  padding:.62rem 1.1rem; text-decoration:none; color:inherit;
  border-top:1px solid var(--cc-line);
  transition:background-color .16s;
}
.lc-cc-live__hit:hover,
.lc-cc-live__hit:active{ background:rgba(0,0,0,.04); }
/* ---- the parts a result row is made of ----
   Two placements, one component. These same parts build the typeahead rows above and the
   result rows the answer renders inside the transcript (.lc-cc-card, further down): a place
   on this site is one kind of object, and it was reading as two design systems when each
   placement owned its own sizes and type. The declarations are shared rather than copied so
   the two cannot drift apart again — what differs between the placements is only the row's
   own padding and rules, which is written where each row is defined.

   A fixed flex-basis with no padding or border of its own — `a` and `span` are content-box
   here (there is no global border-box reset), so anything added inside the box would render
   the tile wider than the number says and knock the text column out of line row to row. */
.lc-cc-live__thumb,
.lc-cc-card__img{
  flex:0 0 88px; height:66px; position:relative; overflow:hidden;
  background:var(--cc-surface);
}
.lc-cc-live__thumb img,
.lc-cc-card__img img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Some entries genuinely have no photograph on file. A flat grey rectangle reads as an image
   that failed to load; the initial set large in the drawer's serif reads as a plate that was
   drawn on purpose, keeps the text column aligned, and stays quieter than the photographs it
   sits among rather than drawing the eye to the thinnest row in the list. */
.lc-cc-live__thumb--none::after,
.lc-cc-card__img--none::after{
  content:attr(data-initial); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--cc-serif); font-size:40px; color:var(--cc-text); opacity:.22;
}
.lc-cc-live__tx,
.lc-cc-card__body{ min-width:0; }
.lc-cc-live__hit .lc-cc-live__title,
.lc-cc-card__title{
  font-family:var(--cc-serif); font-weight:600; font-size:14.5px; line-height:1.32;
}
.lc-cc-live__title,
.lc-cc-card__title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--cc-text);
}
/* Above the name, not below it: the category is the kicker in the site's own card, and it
   tells you what kind of thing you are looking at before you have read which one. */
.lc-cc-live__meta,
.lc-cc-card__meta{
  display:block; margin:0 0 .25rem; color:var(--cc-muted);
  font:600 9.5px/1 var(--cc-sans); letter-spacing:.13em; text-transform:uppercase;
}
/* Inset, because a result runs the full width of the drawer and an offset ring would be
   clipped by the edge it sits against. */
.lc-cc-panel .lc-cc-live__lead:focus-visible,
.lc-cc-panel .lc-cc-live__hit:focus-visible{
  outline:2px solid var(--cc-text); outline-offset:-2px;
}
@media (prefers-reduced-motion: reduce){
  .lc-cc-live__shot img{ transition:none; }
}

/* ---- nothing good enough ----
   Set in the same italic serif as the intro rather than as a result row: this is the
   drawer speaking, not a thing that was found, and giving it the row treatment would
   make an absence look like the first hit. */
.lc-cc-live__none{
  margin:0; padding:.7rem .9rem .1rem;
  font-family:var(--cc-serif); font-style:italic; color:var(--cc-muted);
  font-size:13.5px; line-height:1.45;
}
/* The weaker engine, so it is offered as a line of text rather than as a button — it
   must not out-argue the composer directly below it, which is still the better answer. */
.lc-cc-live__wp{
  display:block; padding:.35rem .9rem .75rem;
  color:var(--cc-text); font-family:var(--cc-sans); font-size:13px; line-height:1.35;
  text-decoration:underline; text-underline-offset:2px;
}
.lc-cc-live__wp:hover{ color:var(--cc-text); background:rgba(0,0,0,.04); }

.lc-cc-msg{ margin:.5rem 0; display:flex; }
.lc-cc-msg .lc-cc-bubble{ max-width:86%; padding:.6rem .8rem; border-radius:0;
  white-space:pre-wrap; word-wrap:break-word; font-size:14.5px; line-height:1.5; }
.lc-cc-msg.lc-cc-user{ justify-content:flex-end; }
/* user bubble carries .uk-background-primary .uk-light in markup for theme fill + readable text */

/* ---- reading the answer ----
   The reply is a paragraph of prose, not a chat quip, and a bordered grey capsule at 86% is
   the wrong vessel for one: it narrows the measure, boxes running text, and fills the column
   with grey. Only the question stays a bubble — it is short, and being able to see at a
   glance which side said what is the whole job of the treatment.

   It matters more than it looks: the places found below are set as the site's own story
   rows, and a boxed reply directly above them puts a second, weaker design system in the
   same drawer as the one they belong to. */
.lc-cc-msg.lc-cc-bot .lc-cc-bubble{
  background:transparent; border:0; padding:.15rem 0; max-width:100%;
  font-size:15px; line-height:1.6;
}
.lc-cc-msg.lc-cc-bot{ margin:.35rem 0 .8rem; }

/* ---- waiting for the answer ----
   Three ragged bars in the shape of the paragraph that is coming, rather than an ellipsis
   that only reported that something, somewhere, was happening. */
.lc-cc-skel{ display:flex; flex-direction:column; gap:.5rem; margin:.75rem 0 .4rem; }
.lc-cc-skel i{ display:block; height:11px; background:var(--cc-line); }
.lc-cc-skel i:nth-child(1){ width:93%; }
.lc-cc-skel i:nth-child(2){ width:100%; }
.lc-cc-skel i:nth-child(3){ width:62%; }
@media (prefers-reduced-motion: no-preference){
  .lc-cc-skel i{ animation:lc-cc-breathe 1.25s ease-in-out infinite; }
  .lc-cc-skel i:nth-child(2){ animation-delay:.13s; }
  .lc-cc-skel i:nth-child(3){ animation-delay:.26s; }
}
@keyframes lc-cc-breathe{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

/* ---- the places an answer found -------------------------------------------------------
   The same row as the typeahead list above, built from the shared parts near the top of this
   file. It had been a 52px thumbnail in a bordered grey box with a sans-serif name: a
   thumbnail at that size cannot be read as a photograph of anywhere, and the boxes stacked
   into the generic shape the rest of the drawer has already left behind. The weaker
   treatment was also attached to the more valuable moment — a list you get by typing looked
   considered, and the answer to a question looked like a widget's output.

   What the rows differ in is what the two placements genuinely differ in. The typeahead band
   is the drawer's whole body, so its rows run edge to edge and the first one leads with a
   16:9 photograph. These sit inside a transcript, under the paragraph that introduced them:
   there is already something leading, and a full-width photograph directly beneath prose
   reads as illustrating the prose rather than as the first result. A search commonly returns
   a dozen of these, which a hero would push out of sight anyway.

   No description line, though the payload carries one: the answer above quotes it verbatim,
   and repeating a sentence three inches below itself is the reader's time spent twice.

   The set runs half a rem wider than the paragraph, so its rule and its hover band read as a
   list running under the prose rather than as more prose. Half a rem is inside the narrower
   of the transcript's two gutters, so it cannot reach the edge and start a sideways scroll.

   The opening rule is drawn in the same hairline as the ones between the rows, so what has
   to distinguish it is air: given the same spacing the rows get, it read as one more row
   separator rather than as the end of the answer. Roughly double on both sides is what makes
   it a boundary, and the weight stays honest to a stylesheet that has no heavier rule. */
.lc-cc-cards{
  display:flex; flex-direction:column;
  margin:1.6rem -.5rem .5rem; padding-top:1.4rem;
  border-top:1px solid var(--cc-line);
}
/* Every card can be dropped for an unusable link, so the container can end up holding
   nothing — in which case the rule above would be all that rendered. */
.lc-cc-cards:empty{ display:none; }
.lc-cc-card{
  display:flex; gap:.8rem; align-items:center;
  padding:.62rem .5rem; text-decoration:none; color:inherit;
  transition:background-color .16s;
}
.lc-cc-card + .lc-cc-card{ border-top:1px solid var(--cc-line); }
.lc-cc-card:hover,
.lc-cc-card:active{ background:rgba(0,0,0,.04); }

/* ---- feedback ----
   Named actions rather than thumb glyphs: the emoji rendered from the platform's own font at
   a size and colour nothing here set, and it was the only pictogram in the drawer that did
   not come from the icon set. */
.lc-cc-fb{ display:flex; align-items:center; gap:.4rem; margin:.35rem 0 .5rem; }
.lc-cc-fb__b{ border:1px solid var(--cc-line); background:transparent; border-radius:0; cursor:pointer;
  color:var(--cc-muted); padding:.4rem .6rem;
  font:700 10px/1 var(--cc-sans); letter-spacing:.1em; text-transform:uppercase;
  transition:color .15s, border-color .15s; }
.lc-cc-fb__b:hover{ color:var(--cc-text); border-color:var(--cc-text); }
.lc-cc-fb__thanks{ color:var(--cc-muted); font-size:12px; }

/* ---- composer ---- */
.lc-cc-form{ display:flex; gap:.5rem; padding:.75rem; border-top:1px solid var(--cc-line); }
/* 160px matches the autogrow ceiling in lc-concierge.js; a lower cap here silently clipped
   the tail of a long dictated sentence at the moment it needed reading. */
.lc-cc-form textarea{ flex:1 1 auto; resize:none; border:1px solid var(--cc-line); border-radius:0;
  background:var(--cc-surface); color:var(--cc-text); padding:.6rem .7rem;
  font:14.5px/1.4 var(--cc-sans); max-height:160px; }
.lc-cc-form textarea::placeholder{ color:var(--cc-muted); }
.lc-cc-form textarea:focus{ outline:none; border-color:var(--cc-text); }
/* send button reuses .uk-button-primary for color; we only set geometry */
.lc-cc-send{ flex:0 0 auto; border-radius:0; padding:0 1rem; min-height:0; cursor:pointer;
  font:700 12px/1 var(--cc-sans); letter-spacing:.06em; text-transform:uppercase;
  transition:background-color .15s, color .15s, border-color .15s; }
.lc-cc-send:disabled{ opacity:.5; cursor:default; }

/* Submitting an empty box is a no-op, so Send stops claiming to be the primary action and
   the voice control carries the opening moment. The first typed character hands it back.
   It applies while dictating too: two filled dark slabs side by side would have buried the
   one that changed. Prefixed with .lc-cc-panel purely to outrank .uk-button-primary's fill. */
.lc-cc-panel .lc-cc-form:has(textarea:placeholder-shown) .lc-cc-send,
.lc-cc-panel .lc-cc-form.is-listening .lc-cc-send{
  background:transparent; color:var(--cc-muted); border:1px solid var(--cc-line);
}
.lc-cc-panel .lc-cc-form:has(textarea:placeholder-shown) .lc-cc-send:hover,
.lc-cc-panel .lc-cc-form.is-listening .lc-cc-send:hover{
  color:var(--cc-text); border-color:var(--cc-text);
}

/* Keyboard focus has to be visible on every control, including the ones the theme paints.
   The textarea is deliberately absent: its own border already goes to ink on focus, and an
   offset ring on top of that drew a second rectangle around the first. */
.lc-cc-panel .lc-cc-send:focus-visible,
.lc-cc-panel .lc-cc-x:focus-visible,
.lc-cc-panel .lc-cc-fb__b:focus-visible,
.lc-cc-panel .lc-cc-card:focus-visible{
  outline:2px solid var(--cc-text); outline-offset:2px;
}

/* scrollbar */
.lc-cc-scroll::-webkit-scrollbar{ width:8px; }
.lc-cc-scroll::-webkit-scrollbar-thumb{ background:var(--cc-line); }

/* ============================================================================
   PHONE — the drawer becomes a bottom sheet.

   As a full-height side panel it opened as a sheet of white: a conversation that has not
   started yet cannot fill 724px, so the intro floated at the top and half a screen of void
   sat between it and the input. Height that follows the content removes the void by
   construction rather than decorating around it, and the bottom edge is where both the
   thumb and the composer already are — the transcript now grows up out of the box you type
   into. Full width also settles the two smaller faults at once: no page bleeding down the
   right edge, and the fixed bottom bar is covered rather than peeking out from under.
   ============================================================================ */
@media (max-width: 959px){

  /* No example questions on the phone. Four buttons nobody asked for filled the opening
     screen and pushed the input below the fold, which is the opposite of what a sheet
     that exists to be typed or spoken into should do. They stay on desktop, where the
     column has the height to carry them. */
  .lc-cc-chips{ display:none; }

  /* Hold the page still behind the sheet. `overflow:hidden` alone does not bind on iOS,
     which scrolls the body anyway; pinning the body is what actually holds it. The offset
     that keeps the page from jumping to the top is set in JS, which is the only place the
     current scroll position is known. */
  html.lc-cc-locked,
  html.lc-cc-locked body{ overflow:hidden; }
  html.lc-cc-locked body{ position:fixed; left:0; right:0; width:100%; }

  .lc-cc-scrim{
    position:fixed; inset:0; display:block; z-index:2147482999;
    /* Weighted for the page it actually covers: the hero photographs behind it are already
       dark, and a lighter wash left them looking merely un-dimmed. */
    background:rgba(16,18,23,.6);
    opacity:0; visibility:hidden;
    transition:opacity .34s cubic-bezier(.4,0,.1,1), visibility 0s linear .34s;
  }
  .lc-cc-scrim.lc-cc-on{ opacity:1; visibility:visible; transition-delay:0s; }

  .lc-cc-panel{
    top:auto; left:0; right:0; width:100%;
    /* --cc-lift is the height the on-screen keyboard is covering, measured against the visual
       viewport in lc-concierge.js. iOS overlays the keyboard rather than shrinking the layout
       viewport, so without this the composer sits underneath the keys while being typed into.
       The ceiling drops by the same amount, or a long transcript would run off the top. */
    bottom:var(--cc-lift, 0px);
    /* auto + a cap: short when there is little to show, capped before it becomes the page */
    height:auto;
    max-height:min(88dvh, calc(100dvh - var(--cc-lift, 0px) - 1.25rem));
    transform:translateY(100%);
    border-right:0; border-top:1px solid var(--cc-line);
    box-shadow:none;                     /* the scrim does the separating */
  }
  .lc-cc-panel.lc-cc-on{ transform:translateY(0); }

  /* The affordance for the swipe bound in bindDismissGesture(). Sized as a target, not as a
     3px line: the whole strip is draggable, and the bar is only what says so. */
  .lc-cc-grip{
    display:block; flex:0 0 auto; padding:.7rem 0 .15rem;
    touch-action:none; cursor:grab;
  }
  .lc-cc-grip::before{
    content:''; display:block; width:42px; height:3px; margin:0 auto;
    background:var(--cc-line);
  }
  .lc-cc-head{ touch-action:none; }

  /* Only the transcript may absorb or give up space; the header and composer keep theirs. */
  .lc-cc-head,
  .lc-cc-form{ flex:0 0 auto; }
  .lc-cc-scroll{ flex:0 1 auto; padding:1rem; }

  .lc-cc-head{ padding:.5rem 1rem .75rem; }
  /* The line under the title repeats what the intro says with more space and less detail. */
  .lc-cc-head small{ display:none; }
  .lc-cc-head b{ font-size:1.22rem; }

  .lc-cc-intro--wide{ display:none; }
  .lc-cc-intro--phone{ display:block; }

  /* ---- reading the answer ----
     Unboxed at every width now; the sheet only asks for the larger size, having the screen's
     full width to set it across rather than a 392px column. */
  .lc-cc-msg.lc-cc-bot .lc-cc-bubble{ font-size:15.5px; line-height:1.62; }
  .lc-cc-msg.lc-cc-user .lc-cc-bubble{ max-width:88%; font-size:15px; }

  /* ---- result places ----
     The row needs no restating here — it is the shared one, and it is already sized around a
     photograph rather than around a viewport. All that changes is the target: a thumb aims
     where a cursor points, so the row takes a little more height to be hit in. */
  .lc-cc-card{ padding:.7rem .5rem; }

  /* ---- live results on the phone ----
     No lead photograph here. At this width a 3:2 shot is over half the room above the
     composer, which bought one result a hero and pushed the other four out of sight — on a
     sheet that is already the tallest thing on the screen. Every result becomes a row
     instead, so all five are visible at once and each still arrives with its photograph.

     Restyled rather than branched in the render, so rotating across the breakpoint needs no
     re-render to correct itself. */
  .lc-cc-live__head{ padding:.75rem 1rem .5rem; }
  .lc-cc-live__hit{ padding:.65rem 1rem; }
  .lc-cc-live__lead{ display:flex; gap:.8rem; align-items:center; padding:.65rem 1rem; }
  .lc-cc-live__shot{ flex:0 0 88px; height:66px; aspect-ratio:auto; }
  .lc-cc-live__lead .lc-cc-live__tx{ padding:0; min-width:0; }
  .lc-cc-live__lead .lc-cc-live__meta{ font-size:9.5px; margin-bottom:.25rem; }
  .lc-cc-live__lead .lc-cc-live__title,
  .lc-cc-live__hit .lc-cc-live__title,
  .lc-cc-card__title{ font-size:15px; line-height:1.32; -webkit-line-clamp:2; }

  .lc-cc-fb__b{ min-height:44px; padding:0 .8rem; }

  /* Two rows. A dictated sentence needs the full width to be read back before it is sent,
     and the voice and send controls each need a real target under it. */
  .lc-cc-form{
    flex-wrap:wrap; gap:.6rem .5rem;
    /* A little more below than beside: the row ends at the edge of the screen, where a
       thumb and the home indicator both arrive. */
    padding:.8rem .8rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  }
  .lc-cc-form textarea{ flex:1 1 100%; font-size:16px; padding:.65rem .75rem; }
  /* The two finishing controls split the row rather than huddling at the left edge, which
     left a third of the composer as unexplained white. Equal width, unequal weight: which
     one is live is said in fill and border, not in size. Prefixed to outrank .uk-button. */
  .lc-cc-panel .lc-cc-form .lc-cc-send{
    order:2; flex:1 1 0; min-height:54px; padding:0 1rem; font-size:12.5px;
  }
}