/* Abi-Ruu vestlusvidin. Sisestusväljad on 16px: iOS Safari zoomib alla
   16px väljale fookuse ajal sisse (Urbo märkas telefonis 07.09).
   Värvid pealehe muutujatest, varuväärtused kaasas,
   sest vidin võib jõuda ka lehele, kus neid ei ole. */
.abiruu{position:fixed;right:16px;bottom:16px;z-index:9000;font-family:inherit;
  --ar-red:var(--red,#B75A52);--ar-red-dark:var(--red-dark,#A04C45);--ar-ink:var(--ink,#4A3A31);
  --ar-cocoa:var(--cocoa,#7A5B49);--ar-cream:var(--cream,#F5F0E8);--ar-paper:var(--paper,#FCFAF7);--ar-beige:var(--beige,#D8CABC)}
.abiruu-nupp{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 8px;border:0;border-radius:999px;
  background:var(--ar-red);color:#fff;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;
  box-shadow:0 2px 8px rgba(74,58,49,.22);transition:transform .15s,background .15s}
.abiruu-nupp:hover{background:var(--ar-red-dark);transform:translateY(-1px)}
.abiruu-nupp img{width:44px;height:44px;border-radius:50%;background:var(--ar-paper);object-fit:cover}
.abiruu-nupp-peidus{display:none}

.abiruu-paneel{width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 32px));display:flex;flex-direction:column;
  background:var(--ar-paper);color:var(--ar-ink);border-radius:18px;overflow:hidden;
  box-shadow:0 16px 48px rgba(74,58,49,.28);border:1px solid var(--ar-beige)}
.abiruu-paneel[hidden]{display:none}
/* Desktopil saab akent vasakust ülanurgast suuremaks venitada (Urbo 08.09).
   Sang on nurgas, mis liigub — paneel on kinni all paremal. */
.abiruu-venita{display:none;position:absolute;left:0;top:0;width:22px;height:22px;cursor:nwse-resize;z-index:2;
  border-top-left-radius:18px;touch-action:none}
/* Kaar järgib paneeli 18px raadiust: sama keskpunkt (18,18), 5px seespool
   → raadius 12px, 2px joon, ümarad otsad (SVG, sest CSS-lõige jätab otsad
   teravaks). Värv on cocoa #7A5B49 otse SVG-s, data-URI ei näe muutujaid. */
.abiruu-venita::before{content:"";position:absolute;left:5px;top:5px;width:14px;height:14px;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M13 1A12 12 0 0 0 1 13' fill='none' stroke='%237A5B49' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat}
.abiruu-venita:hover::before{opacity:1}
@media (min-width:900px){.abiruu-paneel{position:relative}.abiruu-venita{display:block}}
.abiruu-pais{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--ar-cream);border-bottom:1px solid var(--ar-beige)}
.abiruu-pais img{width:36px;height:36px;border-radius:50%;background:var(--ar-paper)}
.abiruu-pais div{flex:1;min-width:0;line-height:1.25}
.abiruu-pais b{display:block;color:var(--ar-cocoa);font-size:1rem}
.abiruu-pais small{display:block;font-size:.72rem;opacity:.75}
.abiruu-sulge{border:0;background:transparent;font-size:1rem;color:var(--ar-cocoa);cursor:pointer;padding:6px 8px;border-radius:8px}
.abiruu-sulge:hover{background:rgba(0,0,0,.06)}

.abiruu-sonumid{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 12px 6px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.abiruu-s{display:flex}
.abiruu-s-ruu{justify-content:flex-start}
.abiruu-s-kasutaja{justify-content:flex-end}
.abiruu-mull{max-width:85%;padding:9px 12px;border-radius:14px;font-size:.92rem;line-height:1.45;white-space:normal;word-wrap:break-word}
.abiruu-s-ruu .abiruu-mull{background:var(--ar-cream);border-bottom-left-radius:4px}
.abiruu-s-kasutaja .abiruu-mull{background:var(--ar-red);color:#fff;border-bottom-right-radius:4px}
.abiruu-s-enely{justify-content:flex-start}
.abiruu-s-enely .abiruu-mull{background:#E4EFE0;border-bottom-left-radius:4px}
.abiruu-kes{display:block;font-size:.68rem;font-weight:700;color:#33503A;margin-bottom:2px;letter-spacing:.02em}
.abiruu-s-teade{justify-content:center}
.abiruu-s-teade .abiruu-mull{background:transparent;color:var(--ar-cocoa);opacity:.7;font-size:.78rem;text-align:center;padding:2px 8px;max-width:95%}
.abiruu-kirjutab .abiruu-mull{letter-spacing:.2em;animation:abiruu-pulss 1s infinite}
@keyframes abiruu-pulss{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.abiruu-kirjutab .abiruu-mull{animation:none}.abiruu-nupp{transition:none}}

.abiruu-kiired{display:flex;flex-wrap:wrap;gap:6px;padding:4px 12px 8px}
.abiruu-kiired:empty{display:none}
.abiruu-kiired button{border:1px solid var(--ar-beige);background:var(--ar-paper);color:var(--ar-cocoa);font:inherit;font-size:.8rem;
  padding:6px 10px;border-radius:999px;cursor:pointer}
.abiruu-kiired button:hover{background:var(--ar-cream)}

.abiruu-vorm{display:flex;gap:8px;padding:8px 12px;border-top:1px solid var(--ar-beige);background:var(--ar-paper)}
.abiruu-vorm[hidden]{display:none}
.abiruu-vorm textarea{flex:1;resize:none;border:1px solid var(--ar-beige);border-radius:12px;padding:9px 12px;font:inherit;font-size:16px;
  line-height:1.35;background:#fff;color:var(--ar-ink);max-height:120px}
.abiruu-vorm textarea:focus,.abiruu-meile input:focus,.abiruu-meile textarea:focus{outline:2px solid var(--ar-red);outline-offset:1px;border-color:transparent}
.abiruu-vorm button{width:42px;border:0;border-radius:12px;background:var(--ar-red);color:#fff;font-size:1rem;cursor:pointer}
.abiruu-vorm button:disabled{opacity:.5;cursor:default}

.abiruu-meile{padding:12px;border-top:1px solid var(--ar-beige);display:flex;flex-direction:column;gap:8px;background:var(--ar-cream)}
.abiruu-meile[hidden]{display:none}
.abiruu-meile p{margin:0;font-size:.85rem;line-height:1.4}
.abiruu-meile input,.abiruu-meile textarea{border:1px solid var(--ar-beige);border-radius:10px;padding:8px 10px;font:inherit;font-size:16px;background:#fff;color:var(--ar-ink);resize:none}
.abiruu-meile-nupud{display:flex;gap:8px;justify-content:flex-end}
.abiruu-meile-nupud button{border:0;border-radius:10px;padding:8px 14px;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.abiruu-meile-nupud .abiruu-tagasi{background:transparent;color:var(--ar-cocoa)}
.abiruu-meile-nupud [type=submit]{background:var(--ar-red);color:#fff}
.abiruu-meile-nupud [type=submit]:disabled{opacity:.5}

/* color otse: pealehe footer{color:valge} muidu pärandub siia ja märkus on nähtamatu. */
.abiruu-jalus{display:flex;flex-direction:column;gap:4px;padding:6px 12px 10px;font-size:.68rem;line-height:1.35;color:var(--ar-cocoa);background:var(--ar-paper)}
.abiruu-jalus[hidden]{display:none}
.abiruu-meile-ava{align-self:flex-start;border:0;background:transparent;color:var(--ar-red);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:2px 0}
.abiruu-meile-ava:hover{text-decoration:underline}
.abiruu-jalus a{color:inherit}

@media (max-width:480px){
  .abiruu{right:10px;bottom:10px}
  .abiruu-paneel{width:calc(100vw - 20px);height:calc(100dvh - 20px)}
  .abiruu-nupp span{display:none}
  .abiruu-nupp{padding:6px}
  /* Jalus võimalikult õhuke: nupp ja privaatsusmärkus ühel real, et sõnumitele jääks ruumi. */
  .abiruu-jalus{flex-direction:row;align-items:center;gap:8px;padding:2px 12px 4px;font-size:.58rem;line-height:1.15}
  .abiruu-meile-ava{flex:none;font-size:.78rem;padding:0}
}

/* Pealehe mobiilne „Telli" riba (#sticky) tuleb kerides alt sisse (.sticky.on).
   Nupp istub alguses lehe alumises servas ja tõuseb ribaga koos üles, sama
   kiirusega. Vidin lisatakse body lõppu, seepärast toimib ~ ; :has varuks. */
@media (max-width:899px){
  .abiruu{transition:bottom .35s cubic-bezier(.22,1,.36,1)}
  .sticky.on ~ .abiruu,body:has(.sticky.on) .abiruu{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* Taust lukus, kui paneel on mobiilis lahti (JS lisab klassi ja top-nihke). */
@media (max-width:899px){body.abiruu-lukus{position:fixed;left:0;right:0;overflow:hidden;width:100%}}

/* Paneel lahti mobiilis: pealehe „Telli" riba peitu (jäi klaviatuuri ja
   vestluse vahele), nupp/paneel nii madalale kui saab. Klaviatuuri avanedes
   sobitab JS (visualViewport) paneeli kõrguse ja alumise serva. */
@media (max-width:899px){
  body.abiruu-lukus .sticky{display:none}
  body.abiruu-lukus .abiruu{bottom:10px}
}