/* ============================================================================
   chat-widget.css — WhatsApp-style visitor chat for Kladsoft Live Chat.
   Palette: launcher #25D366, header #008069/#075E54, out-bubble #d9fdd3,
   in-bubble #fff, chat bg #efeae2 (with doodle), read-tick #53bdeb.
   All selectors are namespaced with .klc- to avoid theme collisions.
   ========================================================================== */

.klc-launcher{position:fixed;right:22px;bottom:22px;z-index:2147483000;width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .15s,box-shadow .15s}
.klc-launcher:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 26px rgba(0,0,0,.34)}
.klc-launcher svg{width:32px!important;height:32px!important;flex:none;fill:currentColor}
.klc-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:#ef4444;
  color:#fff;font:700 11px/20px -apple-system,Segoe UI,Roboto,sans-serif;text-align:center;padding:0 5px;display:none;
  box-shadow:0 0 0 2px #fff}

.klc-panel{position:fixed;right:22px;bottom:22px;z-index:2147483001;width:370px;max-width:calc(100vw - 24px);
  height:560px;max-height:calc(100vh - 40px);background:#efeae2;border-radius:14px;display:none;flex-direction:column;
  overflow:hidden;box-shadow:0 24px 60px -14px rgba(0,0,0,.5);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left}
.klc-panel.klc-open{display:flex}

/* Header */
.klc-head{display:flex;align-items:center;gap:11px;padding:11px 14px;background:#075E54;color:#fff}
.klc-av{width:40px;height:40px;border-radius:50%;background:#25D366;color:#fff;font-weight:700;display:flex;
  align-items:center;justify-content:center;flex:none;overflow:hidden;font-size:17px}
.klc-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.klc-ht{flex:1;min-width:0}
.klc-ht b{display:block;font-size:16px;font-weight:600;line-height:1.2}
.klc-ht span{display:block;font-size:12px;color:#d5e8e2;margin-top:2px}
.klc-ht .klc-online::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#25D366;margin-right:5px;vertical-align:middle}
.klc-x{background:none;border:none;color:#e8f2ee;cursor:pointer;font-size:26px;line-height:1;padding:2px 6px;border-radius:8px}
.klc-x:hover{background:rgba(255,255,255,.14)}

/* Body — WhatsApp doodle beige */
.klc-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 9px;display:flex;flex-direction:column;gap:4px;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) transparent;
  background-color:#efeae2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23d8cfc4' stroke-width='1.1' opacity='0.5'><circle cx='20' cy='20' r='6'/><path d='M50 12 h14 M57 5 v14'/><path d='M96 22 l8 8 M104 22 l-8 8'/><rect x='116' y='12' width='12' height='12' rx='2'/><path d='M14 66 q8 -10 16 0 t16 0'/><circle cx='78' cy='60' r='7'/><path d='M108 54 h16 M116 54 v14'/><path d='M18 104 l7 7 M25 104 l-7 7'/><rect x='54' y='98' width='13' height='13' rx='3'/><path d='M96 100 q8 -9 15 0'/><circle cx='126' cy='108' r='6'/></g></svg>")}

.klc-note{align-self:center;background:#fef4c9;color:#5a5548;font-size:12.5px;line-height:1.45;
  padding:6px 12px;border-radius:8px;margin:8px 6px;text-align:center;box-shadow:0 1px 1px rgba(0,0,0,.08)}

.klc-body::-webkit-scrollbar{width:6px}
.klc-body::-webkit-scrollbar-track{background:transparent}
.klc-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:3px}
.klc-thread{display:flex;flex-direction:column;gap:4px}
.klc-row{display:flex;max-width:82%;margin-top:3px}
.klc-row.klc-me{align-self:flex-end;justify-content:flex-end}
.klc-row.klc-them{align-self:flex-start}
.klc-bub{position:relative;padding:6px 9px 8px;border-radius:8px;font-size:14.2px;line-height:1.4;white-space:pre-wrap;
  word-wrap:break-word;box-shadow:0 1px .5px rgba(0,0,0,.13);color:#111b21}
.klc-row.klc-me .klc-bub{background:#d9fdd3;border-top-right-radius:2px}
.klc-row.klc-them .klc-bub{background:#fff;border-top-left-radius:2px}
.klc-meta{display:block;text-align:right;font-size:9.5px;color:#667781;margin-top:2px;user-select:none}
.klc-meta .klc-tick{margin-left:3px;color:#53bdeb;font-weight:700}

/* Footer input */
.klc-foot{display:flex;gap:8px;align-items:flex-end;padding:8px 10px;background:#f0f0f0}
.klc-foot textarea{flex:1;resize:none;max-height:96px;min-height:42px;background:#fff;color:#111b21;
  border:none;border-radius:22px;padding:11px 14px;font:inherit;font-size:14.5px;outline:none;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.klc-send{background:#008069;color:#fff;border:none;border-radius:50%!important;width:46px!important;height:46px!important;
  min-width:46px;max-width:46px;padding:0!important;box-sizing:border-box!important;aspect-ratio:1/1;cursor:pointer;flex:0 0 46px;
  display:flex;align-items:center;justify-content:center;transition:transform .12s,opacity .12s}
.klc-send svg{width:22px!important;height:22px!important;flex:none;fill:currentColor}
.klc-send:hover{transform:scale(1.06)}.klc-send:disabled{opacity:.5;cursor:default}

/* Start form (guest) */
.klc-form{padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:#efeae2;flex:1}
.klc-form .klc-hi{color:#3b4a54;font-size:14px;line-height:1.4;background:#fff;border-radius:10px;padding:8px 14px;min-height:52px;box-sizing:border-box;display:flex;align-items:center;margin-bottom:10px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.klc-form label{font-size:12px;color:#54656f;display:flex;flex-direction:column;gap:5px;font-weight:600}
/* Fixed 52px height (with !important to beat the theme's forced input height)
   so the greeting, both inputs and the button are all exactly equal. */
.klc-form input{background:#fff;color:#111b21;border:1px solid #d5d5d5;border-radius:9px;padding:0 14px;font:inherit;font-size:15px;line-height:normal;box-sizing:border-box;height:52px!important;min-height:52px;outline:none;margin-bottom:10px}
.klc-form input:focus{border-color:#008069}
.klc-start{background:#008069;color:#fff;border:none;border-radius:24px;padding:0 12px;height:52px!important;min-height:52px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14.5px;cursor:pointer;transition:opacity .15s}
.klc-start:hover{opacity:.9}
.klc-err{color:#e5484d;font-size:12px;min-height:1em}
.klc-brandline{text-align:center;font-size:11px;color:#8696a0;margin-top:2px}

@media(max-width:480px){
  /* Fill exactly the VISIBLE area. 100dvh (dynamic viewport height) auto-adjusts
     to the phone's URL/menu bar whatever its height — no top gap, no clipped
     header. `100vh` is the fallback for very old browsers that lack dvh. */
  .klc-panel{top:0;left:0;right:0;width:auto;max-width:none;
    height:100vh;height:100dvh;max-height:none;border-radius:0}
}