/* Ask Bro, one question box in the middle of the page.
   The mark lives inside the send button: it is the only logo on screen, and it is also
   the thing that shows Bro idle, thinking, and done. */

.ask-bro-page #bro-root{display:none!important}   /* the corner bubble would be a second Bro */

/* Empty page: the question box sits in the middle of the screen. As soon as there is a
   conversation the block rises to the top and the page grows downward instead. */
.ab{padding:clamp(96px,12vw,150px) 0 clamp(28px,5vw,56px);display:flex;flex-direction:column;
  justify-content:center;min-height:min(88vh,760px)}
.ab:has(.ab-log:not(:empty)){justify-content:flex-start;min-height:0}
.ab .wrap{max-width:780px;width:100%}
.ab-main{display:flex;flex-direction:column}

/* ---------- opening state: everything centred, nothing else on screen ---------- */
.ab-intro{text-align:center;padding:clamp(8px,5vh,56px) 0 0}
.ab-h1{font-size:clamp(24px,4.6vw,34px);text-transform:uppercase;letter-spacing:.01em;
  margin:0 0 10px;color:var(--black)}
.ab-lede{font-size:15px;line-height:1.5;color:#4A4A46;max-width:62ch;margin:0 auto 22px}
.ab-note{display:none}

/* Fine print, and sized like it: present for anyone who looks, invisible to anyone who does not. */
/* Left-aligned above the bar, tick first: it reads as a label on the question box. */
.ab-consent{margin:0 0 8px;padding:0 4px 0 20px;display:flex;justify-content:flex-start}
.ab-consent label{display:flex;gap:7px;align-items:center;justify-content:flex-start;
  font-size:clamp(7.6px,2.05vw,9px);line-height:1.3;color:#A5A19E;cursor:pointer;
  white-space:nowrap;max-width:100%}
/* one line, always: on a narrow screen the sentence trims rather than pushing the box off */
.ab-consent span{overflow:hidden;text-overflow:ellipsis;min-width:0}

.ab-consent input{margin:0;flex:0 0 auto;width:11px;height:11px;accent-color:var(--orange)}
/* the consent box stays visible: a man must be able to change his mind mid-chat */

.ab-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.ab-chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;
  font-family:'Garet',sans-serif;font-size:13.5px;font-weight:600;color:var(--graphite);cursor:pointer;
  transition:border-color var(--t-hover),color var(--t-hover)}
.ab-chip:hover{border-color:var(--black);color:var(--black)}

/* ---------- the composer ---------- */
.ab-composer{display:flex;gap:10px;align-items:center;width:100%;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 7px 7px 22px;
  box-shadow:0 1px 2px rgba(27,21,23,.05)}
.ab-composer:focus-within{border-color:var(--black)}
.ab-composer input{flex:1;border:0;background:transparent;padding:12px 0;
  font-family:'Garet',sans-serif;font-size:15.5px;color:var(--black);min-width:0}
.ab-composer input:focus{outline:none}
.ab-composer button{width:46px;height:46px;flex:0 0 46px;border:0;border-radius:50%;
  background:var(--orange);position:relative;overflow:hidden;cursor:pointer;padding:0;
  transition:background-color var(--t-hover),transform var(--t-hover)}
.ab-composer button:hover{background:#E32B00}
.ab-composer button:active{transform:scale(.94)}
.ab-composer button[disabled]{opacity:.55;cursor:default}
.ab-composer button:focus-visible{outline:2px solid var(--black);outline-offset:2px}

/* the fist, in white, inside the button */
.ab-mark{position:absolute;inset:0;background:#fff;
  -webkit-mask:url(../img/watermark.png) no-repeat center/24px auto;
          mask:url(../img/watermark.png) no-repeat center/24px auto}

/* ---------- once a conversation is running ---------- */
.ab-intro.is-compact{padding:0 0 16px;margin-bottom:20px;border-bottom:1.5px solid var(--line)}
.ab-intro.is-compact .ab-h1{font-size:clamp(17px,2.6vw,20px);margin:0}
.ab-intro.is-compact .ab-lede{display:none}
.ab:has(.ab-log:not(:empty)) .ab-chips{display:none}

.ab-log{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.ab-log:empty{margin:0}
.ab-row{display:flex;scroll-margin-top:100px;scroll-margin-bottom:24px}
.ab-row.me{justify-content:flex-end}
.ab-b{max-width:86%;padding:11px 16px;border-radius:18px;font-size:15px;line-height:1.55;
  background:#fff;border:1.5px solid var(--line);border-bottom-left-radius:6px;color:var(--black);word-wrap:break-word}
.ab-row.me .ab-b{background:#CFF3E6;border-color:#CFF3E6;border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.ab-row.esc .ab-b{background:#FFE6E0;border-color:#FFD3C9}
.ab-b a{color:var(--orange);font-weight:600;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.ab-b strong{font-weight:700}

.ab-dots{display:inline-flex;gap:4px;align-items:center;padding:4px 0}
.ab-dots span{width:7px;height:7px;border-radius:50%;background:#9E9B99;animation:abdot 1.2s infinite}
.ab-dots span:nth-child(2){animation-delay:.18s}
.ab-dots span:nth-child(3){animation-delay:.36s}
@keyframes abdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ab-legal{font-size:11.5px;color:var(--graphite);text-align:center;margin:14px 0 0}
.ab-legal a{color:var(--graphite)}


/* ---------- the mailing list offer, inside the conversation ----------
   Deliberately not a message bubble and deliberately not a popup: a quiet card in the
   flow, so it reads as the site offering something rather than Bro selling something.
   Shown once, never after an escalated reply, and always dismissible. */
.ab-offer{max-width:86%;background:#FFF7F2;border:1.5px solid #FFD9C6;border-bottom-left-radius:6px}
.ab-offer-p{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:var(--black)}
.ab-offer-form{display:flex;gap:8px;align-items:stretch}
.ab-offer-form input[type=email]{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--black)}
.ab-offer-form input[type=email]:focus{outline:none;border-color:var(--orange)}
.ab-offer-form button{flex:0 0 auto;font:inherit;font-weight:700;font-size:14px;padding:10px 20px;
  border:0;border-radius:999px;background:var(--orange);color:#fff;cursor:pointer;
  transition:background-color var(--t-hover,.16s) ease}
.ab-offer-form button:hover{background:#E32B00}
.ab-offer-form button:disabled{opacity:.6;cursor:default}
.ab-offer-chk{display:flex;gap:9px;align-items:flex-start;margin-top:11px;
  font-size:11.5px;line-height:1.45;color:var(--graphite);cursor:pointer;
  /* the site's global label style is an uppercase, tracked-out form label. This is fine
     print inside a conversation, so it opts out of all of that. */
  text-transform:none;letter-spacing:normal;font-weight:400}
.ab-offer-chk input{margin:2px 0 0;flex:0 0 auto}
.ab-offer-msg{margin:10px 0 0;font-size:13px;line-height:1.45}
.ab-offer-msg:empty{display:none}
.ab-offer-msg.is-ok{color:#1F7A52}
.ab-offer-msg.is-bad{color:#C0341A}
.ab-offer-no{margin-top:10px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:11.5px;color:var(--graphite);text-decoration:underline;text-underline-offset:2px}
.ab-offer-no:hover{color:var(--black)}

@media(max-width:620px){
  .ab-offer{max-width:92%}
  .ab-offer-form{flex-wrap:wrap}
  .ab-offer-form input[type=email]{flex:1 1 100%}
  .ab-offer-form button{flex:1 1 100%}
}

@media(max-width:620px){
  .ab{padding-top:clamp(88px,22vw,120px)}
  .ab-lede{font-size:14px}
  .ab-chip{font-size:12.5px;padding:8px 13px}
  .ab-b{font-size:14.5px;max-width:92%}
  .ab-composer{padding-left:18px}
}
.ab-chip,.ab-offer-no,.ab-root button{font-weight:400 !important}