/* One conversation flow. Assistance lives outside that flow. */
#goodthing-contact {
  --gt-bg:#0e1117; --gt-text:#edf0f0; --gt-muted:#a6b4ac;
  --gt-mint:#b7f7d0; --gt-line:#ffffff1c; --gt-red:#f2b4ae;
  --gt-side:240px; --gt-gap:28px;
  color:var(--gt-text); font:400 15px/1.6 'DM Sans',system-ui,sans-serif;
  color-scheme:dark; container:gt-contact / inline-size;
}
#goodthing-contact * { box-sizing:border-box }
#goodthing-contact [hidden] { display:none!important }
#goodthing-contact button,#goodthing-contact input,#goodthing-contact textarea { font:inherit }
#goodthing-contact button { color:inherit; cursor:pointer }
#goodthing-contact button:focus-visible { outline:2px solid var(--gt-mint); outline-offset:4px }
#goodthing-contact button:disabled { opacity:.35; cursor:default }
#goodthing-contact input:focus-visible,#goodthing-contact textarea:focus-visible { outline:none }
#goodthing-contact .gt-content { position:relative; anchor-name:--gt-content }
#goodthing-contact h2 { font:500 clamp(36px,6vw,54px)/1.08 'Space Grotesk',system-ui,sans-serif; letter-spacing:-2.5px; margin:14px 0 }
#goodthing-contact .gt-lead { margin:0 0 34px; color:#b7c1bb; max-width:410px }
#goodthing-contact .gt-lead.is-quiet { visibility:hidden }
#goodthing-contact .gt-field { width:calc(100% - var(--gt-side) - var(--gt-gap)); min-width:0; margin-bottom:30px }
#goodthing-contact #gt-contact-row { anchor-name:--gt-contact }
#goodthing-contact #gt-schedule-row { anchor-name:--gt-schedule }
#goodthing-contact #gt-intro-row { anchor-name:--gt-intro; margin-bottom:0 }
#goodthing-contact .gt-sentence { display:block; font:500 23px/1.5 'Space Grotesk',system-ui,sans-serif; letter-spacing:-.7px }
#goodthing-contact .gt-input-wrap { display:inline-flex; align-items:center; gap:4px; max-width:100%; border-bottom:1px dotted #71917d; margin-top:7px }
#goodthing-contact .gt-input-wrap:focus-within { border-bottom-color:var(--gt-mint) }
#goodthing-contact .gt-input-wrap.is-resolved { border-bottom-color:var(--gt-mint) }
#goodthing-contact .gt-input { field-sizing:content; flex:0 1 auto; width:28ch; max-width:100%; min-width:0; padding:3px 0 5px; background:transparent; border:0; border-radius:0; color:var(--gt-mint); font-size:20px; letter-spacing:-.4px }
@supports(field-sizing:content) { #goodthing-contact .gt-input { width:auto } }
#goodthing-contact .gt-input::placeholder,#goodthing-contact .gt-story::placeholder { color:#7e9185 }
#goodthing-contact #gt-contact-row .gt-input-wrap::after { content:','; color:#95ab9d; align-self:flex-end; padding-bottom:5px }
#goodthing-contact .gt-arrow { background:none; border:0; color:var(--gt-mint); padding:5px; font-size:19px }
#goodthing-contact .gt-hint { margin:9px 0 0; color:#90a799; font-size:12px }
#goodthing-contact .gt-hint:empty { display:none }
#goodthing-contact .gt-hint.is-resolved { color:var(--gt-mint) }
#goodthing-contact .gt-hint.is-error,#goodthing-contact .gt-input[aria-invalid=true] { color:var(--gt-red) }
#goodthing-contact .gt-continuation { font:500 22px/1.6 'Space Grotesk',system-ui,sans-serif; letter-spacing:-.5px; margin:0 0 10px }
#goodthing-contact .gt-intro { font-size:14px; color:#bcc7c0; margin:0 0 14px }
#goodthing-contact .gt-ai-link { border:0; border-bottom:1px solid #6f9880; border-radius:0; background:none; color:#d7f1e0; padding:0 }
#goodthing-contact .gt-story { width:100%; min-height:135px; resize:vertical; color:var(--gt-text); background:transparent; border:0; border-bottom:1px dotted var(--gt-line); border-radius:0; padding:9px 0; font:400 16px/1.75 'DM Sans',system-ui,sans-serif }
#goodthing-contact .gt-story:focus { border-bottom-color:var(--gt-mint) }
#goodthing-contact .gt-intro-footer { anchor-name:--gt-intro-action; min-height:58px; padding-top:12px }
#goodthing-contact .gt-starters { display:flex; flex-wrap:wrap; gap:7px }
#goodthing-contact .gt-starters button { background:none; border:1px solid #ffffff1a; border-radius:100px; padding:6px 10px; color:#98afa0; font-size:11px }
#goodthing-contact .gt-starters button:hover { color:#d3ebdc; border-color:#739e80 }
#goodthing-contact .gt-primary { display:block; width:100%; background:var(--gt-mint); color:#102219; border:1px solid transparent; border-radius:100px; padding:14px 16px; font-weight:500; font-size:14px; text-align:center; min-height:49px }
#goodthing-contact .gt-primary:hover { background:#d0ffdf }

/* Fixed manual popovers use the viewport; neither one changes a field's height. */
#goodthing-contact .gt-floating {
  position:fixed; inset:auto; margin:0; padding:0; border:0;
  width:var(--gt-side); max-width:calc(100vw - 24px);
  height:fit-content; max-height:calc(var(--gt-viewport-height,100dvh) - 24px);
  color:var(--gt-text); background:transparent; overflow:visible;
  left:auto; right:24px; top:12px;
}
#goodthing-contact .gt-floating::backdrop { background:transparent }
#goodthing-contact #gt-companion { display:flex; flex-direction:column; gap:14px; z-index:4 }
#goodthing-contact #gt-companion.is-exploring { background:#151b24; border-radius:12px; padding:16px; box-shadow:0 12px 32px #0005 }
#goodthing-contact #gt-explorer { min-height:0; overflow:auto; overscroll-behavior:contain }
#goodthing-contact #gt-explorer button:focus-visible { outline-offset:-2px }
#goodthing-contact .gt-action { flex:none }
#goodthing-contact #gt-side-clock { min-height:0; overflow:auto; overscroll-behavior:contain }
#goodthing-contact #gt-side-clock:empty { display:none }
#goodthing-contact .gt-panel-top { display:flex; justify-content:space-between; gap:8px; align-items:center; color:var(--gt-mint); font-size:11px; letter-spacing:1px }
#goodthing-contact .gt-close { background:none; border:0; padding:4px; color:#93ad9d; font-size:20px }
#goodthing-contact .gt-panel-label { font-size:12px; color:#c2d3c8; margin:8px 0 12px; overflow-wrap:anywhere }
#goodthing-contact .gt-days { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) 8px repeat(2,minmax(0,1fr)); gap:5px 2px }
#goodthing-contact .gt-day-head { font-size:11px; text-align:center; color:#8fa697; padding-bottom:4px }
#goodthing-contact .gt-day { min-height:32px; border:1px solid transparent; background:#ffffff04; border-radius:5px; padding:4px 0; color:#7e9186; font-size:12px }
#goodthing-contact .gt-day.is-match { color:#deede2; background:#b7f7d00e }
#goodthing-contact .gt-day:hover { border-color:#6e9b7d }
#goodthing-contact .gt-slots { display:grid; gap:6px; margin-top:12px }
#goodthing-contact .gt-slot { background:none; border:1px solid var(--gt-line); border-radius:6px; padding:8px 9px; display:flex; align-items:center; justify-content:space-between; gap:7px; color:#bfd1c5; font-size:11px; text-align:left }
#goodthing-contact .gt-slot strong { font-weight:500; color:var(--gt-mint); white-space:nowrap }
#goodthing-contact .gt-slot:hover { border-color:#8bb99b; background:#b7f7d00b }
#goodthing-contact .gt-options { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 }
#goodthing-contact .gt-options:empty { display:none }
#goodthing-contact .gt-options button { padding:7px 10px; border:1px solid #688873; background:transparent; border-radius:100px; font-size:12px; color:var(--gt-mint) }
#goodthing-contact .gt-panel-foot { margin:10px 0 0; color:#91a799; font-size:11px }
#goodthing-contact .gt-empty-note { font-size:12px; color:#9fb5a7; margin:12px 0 }
#goodthing-contact #gt-ai-panel { display:flex; flex-direction:column; gap:12px; padding:16px; border-left:1px solid #64856d5c; background:var(--gt-bg); z-index:2; transition:opacity .15s,filter .15s }
#goodthing-contact #gt-ai-panel .gt-panel-top,#goodthing-contact #gt-copy,#goodthing-contact .gt-ai-status { flex:none }
#goodthing-contact .gt-ai-prompt { min-height:0; overflow:auto; overscroll-behavior:contain; font-size:12px; line-height:1.8; color:#afc1b4; margin:0 }
#goodthing-contact .gt-ai-status { font-size:12px; color:var(--gt-mint); margin:0 }
#goodthing-contact .gt-ai-status:empty { display:none }
#goodthing-contact.is-scheduling #gt-ai-panel { opacity:.38; filter:blur(.65px) }
#goodthing-contact.is-scheduling #gt-copy,#goodthing-contact.has-primary #gt-copy { background:transparent; border-color:#71917d; color:#b1cdbb }
#goodthing-contact .gt-ai-wave { position:absolute; right:0; top:65%; width:var(--gt-side); color:#9bc7aa; font-size:12px; opacity:0; transition:opacity .2s; pointer-events:none }
#goodthing-contact:has(#gt-ai-open:hover) .gt-ai-wave { opacity:.8 }

@supports(position-area:right) {
  #goodthing-contact .gt-floating {
    inset:auto; position-area:right; margin:12px 0 12px var(--gt-gap);
    align-self:anchor-center; max-height:stretch; min-height:0; position-try-fallbacks:--gt-visible;
  }
  #goodthing-contact #gt-companion { position-anchor:--gt-contact }
  #goodthing-contact[data-section=schedule] #gt-companion { position-anchor:--gt-schedule }
  #goodthing-contact[data-section=intro] #gt-companion,#goodthing-contact #gt-ai-panel { position-anchor:--gt-intro }
  #goodthing-contact[data-intro-action=true] #gt-companion { position-anchor:--gt-intro-action; position-area:center; justify-self:end; align-self:center; margin:0; width:200px }
  #goodthing-contact .gt-ai-wave { position-anchor:--gt-intro; top:calc(anchor(top) + 45px) }
}

#goodthing-contact .gt-clock { border:0; background:transparent; padding:8px 0 0; margin:0 }
#goodthing-contact #gt-inline-clock .gt-clock { margin-top:12px }
#goodthing-contact .gt-clock-lead { font-size:12px; color:#9ab2a1; margin:0 0 4px }
#goodthing-contact .gt-clock-readout { font-size:12px; color:#a6bbad; margin:0 }
#goodthing-contact .gt-clock-readout strong { display:inline; font:500 26px/1.4 'Space Grotesk',sans-serif; color:var(--gt-mint); letter-spacing:-.6px; margin-right:5px; white-space:nowrap }
#goodthing-contact .gt-clock-readout .gt-link { margin-left:7px; text-decoration:underline; text-underline-offset:4px }
#goodthing-contact .gt-link { border:0; background:none; color:#b1cdbb; padding:5px 0; font-size:12px }
#goodthing-contact .gt-adjust { display:flex; align-items:center; gap:8px; margin:12px 0 }
#goodthing-contact .gt-adjust input { min-width:0; width:110px; color:var(--gt-mint); background:transparent; border:0; border-bottom:1px solid #7e9e89; font-size:16px; padding:5px }
#goodthing-contact .gt-adjust button { background:#24352a; border:0; border-radius:5px; padding:8px 10px; color:var(--gt-mint) }
#goodthing-contact .gt-clock-editor-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center }
#goodthing-contact .gt-small-primary { background:var(--gt-mint); color:#102219; border:0; border-radius:100px; padding:9px 12px; font-size:12px }
#goodthing-contact .gt-receipt { padding:0; margin:0 0 28px; color:#b9cbbf; overflow-wrap:anywhere }
#goodthing-contact .gt-receipt p { margin:0; font-size:15px; line-height:1.8 }
#goodthing-contact .gt-receipt p+p { margin-top:3px }
#goodthing-contact .gt-transport { font-size:13px; color:var(--gt-red); margin:0 0 16px }
#goodthing-contact .gt-preview { font-size:11px; color:#91a197; border-bottom:1px solid #ffffff16; padding:0 0 10px; margin:0 0 25px }
#goodthing-contact .gt-reset-row { display:flex; justify-content:flex-end; min-height:24px; margin-bottom:5px }
#goodthing-contact .gt-reset-row button { font-size:11px; color:#95ab9d }
#goodthing-contact .gt-reset-row:has(button[hidden]) { display:none }
#goodthing-contact .gt-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

/* A viewport fallback drops the vertical anchor so scrolling cannot carry it offscreen. */
@position-try --gt-visible {
  position-anchor:none; position-area:none; margin:0;
  top:calc(var(--gt-viewport-top,0px) + 12px);
  bottom:calc(100dvh - var(--gt-viewport-top,0px) - var(--gt-viewport-height,100dvh) + 12px);
  left:16px; right:16px; align-self:center; justify-self:center;
}

/* Narrow screens start with suggestions; the existing arrow expands the calendar. */
@container gt-contact (max-width:620px) {
  #goodthing-contact .gt-field { width:100% }
  #goodthing-contact .gt-floating { width:min(360px,calc(100vw - 32px)); left:16px; right:auto; border-radius:12px; padding:14px; background:var(--gt-bg); box-shadow:0 12px 32px #0005 }
  #goodthing-contact #gt-companion:not(.is-exploring) { width:fit-content; max-width:min(360px,calc(100vw - 32px)) }
  #goodthing-contact #gt-ai-panel { border:1px solid var(--gt-line) }
  #goodthing-contact #gt-ai-panel[data-inline=true] { position:static; inset:auto; width:100%; max-width:none; height:auto; max-height:none; margin:16px 0 0; padding:16px 0 0; border:0; border-top:1px solid var(--gt-line); border-radius:0; background:transparent; box-shadow:none }
  #goodthing-contact:not([data-expanded=true]) #gt-days,#goodthing-contact:not([data-expanded=true]) .gt-panel-foot,#goodthing-contact:not([data-expanded=true]) .gt-slot:nth-child(n+3) { display:none }
  #goodthing-contact .gt-day { min-height:38px }
  #goodthing-contact .gt-slot { padding:11px; font-size:12px }
  #goodthing-contact .gt-ai-wave { display:none }
  @supports(position-area:right) {
    #goodthing-contact .gt-floating { inset:auto; position-area:bottom; margin:12px 0; align-self:start; justify-self:anchor-center; position-try-fallbacks:flip-block,--gt-visible }
    #goodthing-contact #gt-ai-panel { position-area:center; align-self:center; justify-self:center; margin:12px 0 }
    #goodthing-contact[data-intro-action=true] #gt-companion { position-area:center; justify-self:end; width:200px }
    #goodthing-contact.has-keyboard .gt-floating { max-height:calc(var(--gt-viewport-height,100dvh) - 24px); position-anchor:none; position-area:none; margin:0; top:calc(var(--gt-viewport-top,0px) + 12px); bottom:calc(100dvh - var(--gt-viewport-top,0px) - var(--gt-viewport-height,100dvh) + 12px); left:16px; right:16px; align-self:end; justify-self:center }
  }
  #goodthing-contact.has-keyboard:not([data-expanded=true]) .gt-panel-label,#goodthing-contact.has-keyboard:not([data-expanded=true]) .gt-slot:nth-child(n+2) { display:none }

}
@media(prefers-reduced-motion:reduce) { #goodthing-contact .gt-ai-wave,#goodthing-contact #gt-ai-panel { transition:none } }
