/* Ask Arlo: the chat helper in the bottom corner. Uses the tokens in styles.css. Built by _build/arlo.py. */
.arlo{position:fixed; right:16px; bottom:16px; z-index:50; font-family:var(--body); color:var(--ink)}
.arlo *{box-sizing:border-box}
.arlo-launch{display:flex; align-items:center; gap:.55rem; padding:6px 16px 6px 6px; border-radius:999px; border:1.5px solid var(--accent); background:#fff; color:var(--ink); font:600 .95rem/1 var(--body); cursor:pointer; box-shadow:0 2px 6px rgba(14,19,48,.08),0 14px 34px rgba(43,89,255,.18); transition:transform 160ms var(--ease), box-shadow 160ms var(--ease)}
.arlo-launch img{width:44px; height:44px; border-radius:50%; background:var(--tint); display:block}
.arlo-launch:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.arlo-launch:hover{transform:translateY(-2px); box-shadow:0 2px 6px rgba(14,19,48,.08),0 18px 40px rgba(43,89,255,.26)}}
.arlo.open .arlo-launch{display:none}

.arlo-tease{position:absolute; right:0; bottom:66px; width:max-content; max-width:min(260px,calc(100vw - 32px)); background:var(--ink); color:#fff; font-size:.92rem; line-height:1.35; padding:.7rem 2.1rem .7rem .9rem; border-radius:14px 14px 4px 14px; box-shadow:var(--shadow); cursor:pointer; animation:arlo-in 260ms var(--ease) both}
.arlo-tease button{position:absolute; top:4px; right:4px; width:26px; height:26px; border:0; border-radius:50%; background:transparent; color:#fff; font-size:1.1rem; line-height:1; cursor:pointer; opacity:.7}
.arlo-tease button:hover{opacity:1}

.arlo-panel{position:absolute; right:0; bottom:0; width:380px; height:min(600px,calc(100vh - 32px)); height:min(600px,calc(100dvh - 32px)); display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 2px 8px rgba(14,19,48,.06),0 24px 60px rgba(14,19,48,.18); overflow:hidden; animation:arlo-in 220ms var(--ease) both}
.arlo-panel[hidden]{display:none}
@keyframes arlo-in{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.arlo-panel,.arlo-tease,.arlo-msg{animation:none!important}}

.arlo-head{display:flex; align-items:center; gap:.7rem; padding:.8rem .8rem .8rem 1rem; background:var(--accent); color:#fff}
.arlo-head img{width:40px; height:40px; border-radius:50%; background:#fff}
.arlo-head b{display:block; font-family:var(--head); font-size:1.1rem; letter-spacing:-.02em; line-height:1.1}
.arlo-head span{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; opacity:.85}
.arlo-head .x{margin-left:auto; width:36px; height:36px; border:0; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer}
.arlo-head .x:hover{background:rgba(255,255,255,.26)}
.arlo-head .back{width:36px; height:36px; border:0; border-radius:10px; background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; margin-left:auto}
.arlo-head .back:hover{background:rgba(255,255,255,.14)}
.arlo-head .back + .x{margin-left:.2rem}

.arlo-log{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--bg-2)}
.arlo-msg{max-width:88%; padding:.65rem .85rem; border-radius:14px; font-size:.95rem; line-height:1.45; animation:arlo-in 200ms var(--ease) both}
.arlo-msg p{margin:0 0 .5em} .arlo-msg p:last-child{margin:0}
.arlo-msg a{color:var(--accent-deep); font-weight:600}
.arlo-msg.bot{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px}
.arlo-msg.me{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px}
.arlo-typing{align-self:flex-start; display:flex; gap:4px; padding:.75rem .9rem; background:#fff; border:1px solid var(--line); border-radius:14px; border-bottom-left-radius:4px}
.arlo-typing i{width:6px; height:6px; border-radius:50%; background:var(--soft); animation:arlo-dot 1s infinite ease-in-out}
.arlo-typing i:nth-child(2){animation-delay:.15s} .arlo-typing i:nth-child(3){animation-delay:.3s}
@keyframes arlo-dot{0%,80%,100%{opacity:.3; transform:none} 40%{opacity:1; transform:translateY(-3px)}}

.arlo-chips{display:flex; flex-wrap:wrap; gap:.4rem; align-self:stretch}
.arlo-chip{font:500 .88rem/1.2 var(--body); padding:.5rem .8rem; border-radius:999px; border:1.5px solid var(--line-strong); background:#fff; color:var(--ink); cursor:pointer; text-align:left; text-decoration:none; transition:border-color 140ms var(--ease), background-color 140ms var(--ease)}
.arlo-chip.main{border-color:var(--accent); color:var(--accent-deep); font-weight:600}
@media (hover:hover) and (pointer:fine){.arlo-chip:hover{border-color:var(--accent); background:var(--tint)}}
.arlo-chip:disabled{opacity:.45; cursor:default}

.arlo-cards{display:flex; flex-direction:column; gap:.45rem; align-self:stretch}
.arlo-card{display:block; padding:.65rem .8rem; background:#fff; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink)}
.arlo-card b{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.15rem}
.arlo-card span{display:block; font-weight:600; font-size:.93rem; line-height:1.3}
.arlo-card small{display:block; color:var(--muted); font-size:.83rem; line-height:1.35; margin-top:.2rem}
@media (hover:hover) and (pointer:fine){.arlo-card:hover{border-color:var(--accent)}}

.arlo-form{display:flex; gap:.4rem; padding:.7rem; border-top:1px solid var(--line); background:#fff}
.arlo-form input,.arlo-form select,.arlo-form textarea{flex:1; min-width:0; font:400 16px/1.3 var(--body); color:var(--ink); padding:.7rem .8rem; border:1.5px solid var(--line-strong); border-radius:11px; background:#fff; resize:none}
.arlo-form textarea{height:4.6rem}
.arlo-form input:focus,.arlo-form select:focus,.arlo-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--tint)}
.arlo-form button{flex:none; width:46px; border:0; border-radius:11px; background:var(--accent); color:#fff; cursor:pointer; display:grid; place-items:center}
.arlo-form button:hover{background:var(--accent-deep)}
.arlo-form button:disabled{opacity:.5; cursor:default}
.arlo-foot{padding:0 .8rem .55rem; background:#fff; font-size:.72rem; color:var(--soft); text-align:center}
.arlo-foot a{color:var(--soft)}

@media (max-width:520px){
  .arlo{right:12px; bottom:12px}
  .arlo-launch span{display:none}
  .arlo-launch{padding:5px}
  .arlo.open{left:0; right:0; bottom:0}
  .arlo-panel{position:fixed; left:0; right:0; bottom:0; width:100%; height:88vh; height:88dvh; border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0}
}
@media print{.arlo{display:none}}