/* Work Order assistant (Millenia Home): the Tenant Portal assistant's styles (portal/assistant.css), copied with the chat.
   It pops up from the hero ask bar (bottom sheet on phones), with a Resume button while a conversation is going on. */
.asst-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; max-width:560px;}
.asst-chip{font:400 12.5px 'Jost',sans-serif; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:7px 14px; cursor:pointer;}
.asst-chip:hover,.asst-chip:focus-visible{background:rgba(255,255,255,.24); outline:none;}

#asst{z-index:1000; display:flex; flex-direction:column; background:#FAFAF8; color:#63666A; font-family:'Jost',system-ui,sans-serif; border:1px solid #D9D4C5; border-radius:20px; overflow:hidden; box-shadow:0 40px 80px rgba(8,20,40,.45); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(30px) scale(.95); transform-origin:50% 100%; transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .22s ease, visibility .22s;}
#asst.open{opacity:1; visibility:visible; pointer-events:auto; transform:none;}
#asst *{box-sizing:border-box;}
#asst .a-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:#0F2540; color:#fff; flex:none;}
#asst .a-title{font-size:13px; letter-spacing:.2em; text-transform:uppercase; font-weight:500;}
#asst .a-title em{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; text-transform:none; letter-spacing:0; color:#E7B3B0; font-size:1.5em; margin-left:6px;}
#asst .a-head button{font:inherit; font-size:12.5px; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:6px 14px; cursor:pointer;}
#asst .a-head .a-actions{display:flex; gap:8px;}
#asst .a-scroll{flex:1; min-height:0; overflow-y:auto; padding:0 14px; overscroll-behavior:contain;}
#asst .a-msgs{margin:0; display:grid; gap:12px; padding-block:16px 10px;}
#asst .a-row{display:flex; gap:10px; animation:a-in .25s ease both;}
#asst .a-row.me{justify-content:flex-end;}
#asst .a-av{flex:none; width:30px; height:30px; border-radius:50%; background:#0F2540; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600;}
#asst .a-b{background:#F1EFE9; color:#2B2E33; border-radius:16px; padding:10px 14px; font-size:14px; line-height:1.55; max-width:92%; min-width:0; overflow-wrap:anywhere;}
#asst .me .a-b{background:#0F2540; color:#fff;}
#asst .a-b p{margin:0 0 8px;} #asst .a-b p:last-child{margin-bottom:0;}
#asst .a-steps{font-size:12px; color:#63666A; display:grid; gap:2px; margin-bottom:8px;} #asst .a-steps span::before{content:"✓ "; color:#2F6B4F;}
#asst .a-src{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
#asst .a-src a{font-size:12px; color:#0F2540; border:1px solid #E4E0D6; background:#fff; border-radius:8px; padding:4px 10px; text-decoration:none;}
#asst .a-src a:hover{border-color:#0F2540;}
#asst .a-card{background:#fff; border:1px solid #E4E0D6; border-radius:12px; padding:14px 16px; margin-top:8px; display:grid; gap:8px; font-size:13.5px; color:#2B2E33;}
#asst .a-card h4{margin:0; font-weight:500; font-size:14.5px;}
#asst .a-kv{display:grid; grid-template-columns:90px 1fr; gap:4px 10px; font-size:13px;} #asst .a-kv b{font-weight:500;}
#asst .a-kv select{font:inherit; font-size:13px; padding:4px 6px; border:1px solid #E4E0D6; background:#FAFAF8; color:#2B2E33;}
#asst .a-pill{display:inline-block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; border:1px solid #E4E0D6; border-radius:999px; padding:2px 9px; margin-right:6px; color:#0F2540;}
#asst .a-dup{display:flex; gap:12px; align-items:flex-start;}
#asst .a-dup img,#asst .a-dup .a-noimg{flex:none; width:84px; height:84px; object-fit:cover; border:1px solid #E4E0D6; border-radius:8px; background:#FAFAF8;}
#asst .a-dup .a-noimg{display:grid; place-items:center; font-size:11px; text-align:center; padding:6px;}
#asst .a-meta{font-size:12.5px;}
#asst .a-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;}
#asst .a-btn{font:inherit; font-size:12.5px; letter-spacing:.05em; border-radius:8px; padding:8px 14px; cursor:pointer; border:1px solid #0F2540; background:#0F2540; color:#fff;}
#asst .a-btn.ghost{background:transparent; color:#0F2540;}
#asst .a-btn:disabled{opacity:.5; cursor:default;}
#asst .a-thumbs{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;} #asst .a-thumbs img{width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #E4E0D6;}
#asst .a-typing{display:inline-flex; gap:4px;} #asst .a-typing i{width:6px; height:6px; border-radius:50%; background:#63666A; opacity:.4; animation:a-blink 1s infinite;} #asst .a-typing i:nth-child(2){animation-delay:.15s;} #asst .a-typing i:nth-child(3){animation-delay:.3s;}
#asst .a-err a{color:#0F2540;}
#asst .a-foot{background:#FAFAF8; border-top:1px solid #E4E0D6; padding:10px 12px 12px; flex:none;}
#asst .a-foot-in{margin:0;}
#asst .a-pending{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
#asst .a-pending .a-p{position:relative;} #asst .a-pending img{width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid #E4E0D6; display:block;}
#asst .a-pending .a-p.up img{opacity:.5;}
#asst .a-pending button{position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:0; background:#0F2540; color:#fff; font-size:12px; line-height:1; cursor:pointer; padding:0;}
#asst .a-box{display:flex; align-items:center; gap:6px; background:#fff; border:1px solid #E4E0D6; border-radius:999px; padding:5px 6px 5px 8px;}
#asst .a-box:focus-within{outline:2px solid #0F2540; outline-offset:1px;}
#asst .a-box input[type=text]{flex:1; min-width:0; border:0; background:transparent; font:inherit; font-size:14.5px; color:#2B2E33; padding:10px 4px; outline:none;}
#asst .a-ib{border:0; background:transparent; color:#0F2540; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:17px;} #asst .a-ib:hover{background:#F1EFE9;}
#asst .a-send{background:#0F2540; color:#fff;} #asst .a-send:hover{background:#0F2540; opacity:.9;} #asst .a-send:disabled{opacity:.5;}
#asst .a-hint{font-size:11.5px; text-align:center; margin-top:8px;} #asst .a-hint a{color:#0F2540;}
@keyframes a-in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@keyframes a-blink{50%{opacity:1}}
@media (prefers-reduced-motion: reduce){#asst,#asst .a-row,#asst .a-typing i{animation:none; transition:none}}
@media (max-width:520px){#asst .a-kv{grid-template-columns:1fr;} #asst .a-dup img,#asst .a-dup .a-noimg{width:64px; height:64px;}}

#asst .a-case{padding-block:10px; border-top:1px solid #E4E0D6;} #asst .a-case:first-child{border-top:0; padding-top:0;}
#asst .a-assign{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; align-items:center;}
#asst .a-assign select{font:inherit; font-size:13px; padding:7px 8px; border:1px solid #E4E0D6; border-radius:8px; background:#FAFAF8; color:#2B2E33; min-width:0; max-width:100%;}
#asst .a-res{min-height:1em;} #asst .a-bad{color:#BD5C45;}

#asst .a-fb{margin-top:10px; display:grid; gap:6px;}
#asst .a-fbtn{font:inherit; font-size:11.5px; color:#63666A; background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; justify-self:start;}
#asst .a-fb label{font-size:12px; color:#2B2E33;}
#asst .a-fb textarea{font:inherit; font-size:13px; width:100%; min-height:60px; resize:vertical; border:1px solid #E4E0D6; padding:8px; border-radius:8px; background:#fff; color:#2B2E33;}

.a-pill.a-sla{background:#BD5C45;color:#fff;border-color:#BD5C45;}

.a-upd{margin-top:6px;font-size:13px}.a-upd summary{cursor:pointer;color:#0F2540}.a-upd textarea{width:100%;min-height:64px;margin:6px 0;font:inherit;font-size:13px;padding:8px;border:1px solid #E4E0D6;box-sizing:border-box}

#asst .a-quote{background:#F1EFE9;border-radius:10px;padding:8px 10px;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0;color:#2B2E33}
#asst .a-conv{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;background:#0F2540;color:#fff;border-radius:10px;padding:6px 10px;margin-bottom:8px}
#asst .a-conv[hidden]{display:none}
#asst .a-conv span{flex:1 1 auto;min-width:0}#asst .a-conv label{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
#asst .a-conv button{font:inherit;font-size:12px;background:#fff;color:#0F2540;border:0;border-radius:6px;padding:4px 10px;cursor:pointer}
.a-badge{display:inline-block;margin-left:6px;font-size:10.5px;line-height:1;background:#BD5C45;color:#fff;border-radius:999px;padding:3px 7px;vertical-align:middle}

/* Where the panel sits */
.mil-ask-wrap{position:relative;}
#asst.a-anchor{position:absolute; left:0; right:0;}
#asst.a-float{position:fixed; right:24px; bottom:24px; width:min(420px,calc(100vw - 32px)); height:min(620px,calc(100vh - 48px));}
#asst .a-head .a-actions button#a-close{display:flex; padding:6px 8px; align-items:center;}
#asst .a-hint{font-size:11px;}
/* Message box at the bottom, hint above it: the box then sits right over the search bar the chat grew from, so a second click there lands in the box, not on a link. */
#asst .a-foot-in{display:flex; flex-direction:column;}
#asst .a-hint{order:2; margin:0 0 8px;} #asst .a-box{order:3;}

/* Floating PLG button (draggable) and phone backdrop */
#asst-fab{position:fixed; left:0; top:0; z-index:900; display:flex; align-items:center; height:60px; padding:0; border:0; background:none; cursor:grab; font:500 13px 'Jost',system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;}
#asst-fab[hidden]{display:none;}
#asst-fab.snap{transition:transform .38s cubic-bezier(.34,1.4,.64,1);}
#asst-fab.drag{cursor:grabbing;}
#asst-fab .f-mark{position:relative; z-index:1; width:60px; height:60px; flex:none; border-radius:50%; background:#0F2540 url(/img/mark.svg) center/112% no-repeat; box-shadow:0 12px 28px rgba(15,37,64,.38),0 0 0 3px #fff; transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;}
#asst-fab.drag .f-mark{transform:scale(1.12); box-shadow:0 22px 40px rgba(15,37,64,.45),0 0 0 3px #fff;}
#asst-fab .f-glass{position:absolute; right:-4px; bottom:-4px; width:26px; height:26px; border-radius:50%; background:#C9A86A; color:#0F2540; display:grid; place-items:center; box-shadow:0 0 0 2.5px #fff;}
#asst-fab .b-n{position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; border-radius:10px; background:#BD5C45; color:#FAFAF8; font-size:12px; letter-spacing:0; line-height:20px; text-align:center; padding:0 5px; box-shadow:0 0 0 2px #fff;}
#asst-fab .b-n[hidden]{display:none;}
#asst-fab .f-label{position:absolute; top:7px; height:46px; display:flex; align-items:center; white-space:nowrap; background:#0F2540; color:#fff; box-shadow:0 10px 24px rgba(15,37,64,.3); max-width:0; opacity:0; overflow:hidden; pointer-events:none; transition:max-width .35s ease,opacity .25s ease;}
#asst-fab.right .f-label{right:30px; padding:0 44px 0 18px; border-radius:999px 0 0 999px;}
#asst-fab.left .f-label{left:30px; padding:0 18px 0 44px; border-radius:0 999px 999px 0;}
@media (hover:hover){#asst-fab:not(.drag):hover .f-label{max-width:240px; opacity:1;}}
#asst-fab:focus-visible{outline:none;} #asst-fab:focus-visible .f-mark{box-shadow:0 0 0 3px #fff,0 0 0 6px #E9A98F;}
#asst-fab.f-intro .f-mark::after{content:''; position:absolute; inset:0; border-radius:50%; animation:f-ring 2.4s ease-out 1s 2;}
@keyframes f-ring{from{box-shadow:0 0 0 0 rgba(201,168,106,.6)}to{box-shadow:0 0 0 18px rgba(201,168,106,0)}}
#asst-fab-reset{position:fixed; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:899; width:84px; height:84px; border-radius:50%; border:2px dashed rgba(15,37,64,.35); background:rgba(247,245,239,.9); display:grid; place-items:center; text-align:center; font:500 10px 'Jost',system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#0F2540; opacity:0; transform:scale(.8); transition:opacity .2s,transform .2s,background .2s; pointer-events:none;}
#asst-fab-reset.show{opacity:1; transform:none;}
#asst-fab-reset.hot{background:#C9A86A; border-color:#0F2540;}
#asst.a-float.a-left{left:24px; right:auto;}
/* Desktop: 70% of the phone-sized button */
@media (min-width:641px){
  #asst-fab{height:42px; font-size:12px;}
  #asst-fab .f-mark{width:42px; height:42px; box-shadow:0 9px 20px rgba(15,37,64,.34),0 0 0 2px #fff;}
  #asst-fab.drag .f-mark{box-shadow:0 16px 30px rgba(15,37,64,.42),0 0 0 2px #fff;}
  #asst-fab .f-glass{width:19px; height:19px; right:-3px; bottom:-3px; box-shadow:0 0 0 2px #fff;} #asst-fab .f-glass svg{width:10px; height:10px;}
  #asst-fab .b-n{min-width:17px; height:17px; line-height:17px; font-size:11px; padding:0 4px;}
  #asst-fab .f-label{top:4px; height:34px;}
  #asst-fab.right .f-label{right:21px; padding:0 32px 0 14px;} #asst-fab.left .f-label{left:21px; padding:0 14px 0 32px;}
}
#asst-backdrop{display:none;}
@keyframes a-pop{from{opacity:0; transform:translateY(16px) scale(.9)}to{opacity:1; transform:none}}
@media (max-width:640px){
  #asst,#asst.a-anchor,#asst.a-float{position:fixed !important; left:0 !important; right:0 !important; top:auto !important; bottom:var(--kb,0px) !important; width:auto !important; height:min(82vh,700px) !important; height:min(82dvh,700px) !important; border-radius:24px 24px 0 0; transform:translateY(105%);}
  #asst.open{transform:none;}
  #asst-backdrop{display:block; position:fixed; inset:0; z-index:20; background:rgba(8,20,40,.55); opacity:0; pointer-events:none; transition:opacity .3s ease;}
  body.asst-open #asst-backdrop{opacity:1; pointer-events:auto;}
  #asst .a-foot{padding-bottom:max(12px,env(safe-area-inset-bottom));}
  #asst .a-hint{display:none;}
  #asst-fab{height:56px;} #asst-fab .f-mark{width:56px; height:56px;} #asst-fab .f-label{top:5px;}
}
@media (prefers-reduced-motion: reduce){#asst-fab.snap{transition:none} #asst-fab .f-mark::after{animation:none}}
#asst .a-head button{white-space:nowrap;} #asst .a-title{white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; letter-spacing:.16em;}
/* Pages with their own global button style (Log a ticket) must not restyle the chat's buttons. */
#asst button{text-transform:none; letter-spacing:normal; justify-self:auto;}
#asst .a-ib{padding:0;}

/* The ask bar in the Millenia Home hero (the portal's hero search field). */
.mil-ask-wrap{max-width:620px; margin:0 auto 26px; text-align:left;}
.mil-ask{display:flex; align-items:center; gap:12px; border:1px solid rgba(247,245,239,.35); border-radius:999px; padding:14px 22px; background:rgba(247,245,239,.94); cursor:text;}
.mil-ask svg{flex:none; width:18px; height:18px; stroke:#2B2E33; opacity:.7;}
.mil-ask input{border:0 !important; background:transparent !important; outline:0 !important; width:100%; min-height:0 !important; padding:0 !important; box-shadow:none !important; font:400 15px/1.4 'Jost',sans-serif; color:#2B2E33;}
.mil-ask input::placeholder{color:#63666A;}
.mil-ask-wrap .asst-chips{max-width:none; justify-content:center;}
@media (max-width:699px){.mil-ask input{font-size:16px;}}
/* The app's in-app dropdowns (app.js enhanceSelect) open above the chat. */
body.asst-open .dd{z-index:1102;} body.asst-open .dd-backdrop{z-index:1101;}
#asst .dd-btn{min-height:34px; padding:4px 8px; font-size:13px; width:100%;}
#asst a.a-btn{display:inline-block; text-decoration:none;}
/* Inside the Millenia Home hero the chat must not take the hero's white, centred, shadowed text. */
#asst{text-align:left; text-shadow:none;}
#asst .a-b p, #asst .a-card, #asst .a-meta{color:inherit;}
#asst .a-b{color:#2B2E33;} #asst .me .a-b{color:#fff;}
/* 2026-11-03, the user: the chat button shows the Pontiac Land "P" (the top-left logo mark) instead of the Millenia M. */
#asst-fab .f-mark{background:#0F2540 url(/img/pontiac_icon_white.png) center 46%/auto 52% no-repeat;}
/* 2026-11-03, the user: no gold badge on the chat button (the P logo alone; the red unread count still shows). */
#asst-fab .f-glass{display:none;}