/* Corner support chat widget. Uses the theme's own custom properties so it
   follows light/dark mode and the Vazirmatn stack without extra work. */

.lk-chat {
  position: fixed;
  z-index: 9800;
  bottom: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  /* The container must stay LTR so flex-end means the physical right edge;
     the panel and launcher restore RTL for their Persian content. */
  direction: ltr;
  font-family: Vazirmatn, Tahoma, sans-serif;
  line-height: 1.75;
}
.lk-chat-panel,
.lk-chat-launcher { direction: rtl; }

/* While closed the hidden panel still occupies layout, which would make this
   fixed container swallow every tap on the page (especially on phones where
   the panel is nearly full screen). Let clicks pass through except the launcher. */
.lk-chat:not(.is-open) { pointer-events: none; }
.lk-chat:not(.is-open) .lk-chat-launcher { pointer-events: auto; }

/* Launcher */
.lk-chat-launcher {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 164px;
  min-width: 164px;
  max-width: 164px;
  justify-content: center;
  min-height: 56px;
  padding: 0 20px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--orange, #ff5c24);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 44px rgba(255, 92, 36, .32);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s, background .25s;
}
.lk-chat-launcher:hover {
  background: var(--orange-bright, #ff7a42);
  transform: translateY(-2px);
  box-shadow: 0 20px 54px rgba(255, 92, 36, .42);
}
.lk-chat-launcher:active { transform: translateY(0) scale(.94); }
.lk-chat.is-open .lk-chat-launcher { width: 56px; min-width: 56px; max-width: 56px; animation: lk-chat-pop .32s cubic-bezier(.16, 1, .3, 1); }
.lk-chat-launcher-icon,
.lk-chat-launcher-close { display: grid; place-items: center; line-height: 0; }
.lk-chat-launcher-close { display: none; }
.lk-chat.is-open .lk-chat-launcher-icon { display: none; }
.lk-chat.is-open .lk-chat-launcher-close { display: grid; }
.lk-chat.is-open .lk-chat-launcher-copy,
.lk-chat.is-open .lk-chat-launcher-unread { display: none; }
.lk-chat.is-open .lk-chat-launcher { padding-inline: 17px; }
.lk-chat-launcher-icon svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.lk-chat-launcher:hover .lk-chat-launcher-icon svg { transform: rotate(8deg) scale(1.08); }
@keyframes lk-chat-pop {
  0% { transform: scale(.88); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Numeric visitor-side unread state for staff replies. */
.lk-chat-launcher { position: relative; }
.lk-chat-launcher-copy { min-width: 0; display: grid; gap: 1px; text-align: right; line-height: 1.45; }
.lk-chat-launcher-copy small { color: #fff; font-size: 10px; font-weight: 900; }
.lk-chat-launcher-unread {
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  padding-inline: 5px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: #d92d20;
  color: #fff;
  box-shadow: 0 7px 20px rgba(160, 19, 19, .42);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}
.lk-chat-launcher-unread[hidden],
.lk-chat-launcher-copy small[hidden] { display: none; }
.lk-chat.has-unread .lk-chat-launcher { animation: lk-chat-unread-pulse 2.2s ease-in-out infinite; }
@keyframes lk-chat-unread-pulse { 50% { box-shadow: 0 17px 54px rgba(217,45,32,.52), 0 0 0 8px rgba(217,45,32,0); } }

.lk-chat-toast {
  position: fixed;
  z-index: 10025;
  right: 22px;
  bottom: 92px;
  width: min(330px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255,92,36,.36);
  border-radius: 16px;
  background: var(--surface, #111719);
  background: color-mix(in srgb, var(--surface, #111719) 92%, transparent);
  color: var(--text, #fff);
  box-shadow: 0 22px 65px rgba(0,0,0,.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.97);
  backdrop-filter: blur(18px) saturate(130%);
  text-align: right;
  transition: opacity .22s, visibility .22s, transform .32s cubic-bezier(.16,1,.3,1);
}
.lk-chat-toast.is-visible { opacity: 1; visibility: visible; transform: none; }
.lk-chat-toast>span:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #d92d20; color: #fff; font-weight: 950; }
.lk-chat-toast>span:last-child { min-width: 0; display: grid; gap: 2px; }
.lk-chat-toast strong { font-size: 11px; }
.lk-chat-toast small { overflow: hidden; color: var(--text-soft, #98a3a7); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

/* Panel */
.lk-chat-panel {
  order: 1;
  width: min(var(--lk-chat-panel-width, 400px), calc(100vw - 44px));
  height: min(var(--lk-chat-panel-height, 620px), calc(100vh - 108px));
  height: min(var(--lk-chat-panel-height, 620px), calc(100dvh - 108px));
  max-height: calc(100vh - 108px);
  max-height: calc(100dvh - 108px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--dark-line, rgba(8, 12, 14, .12));
  border-radius: 22px;
  background: var(--surface, #fff);
  color: var(--text, #090c0e);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transform-origin: bottom center;
  transition: opacity .22s ease, transform .34s cubic-bezier(.16, 1, .3, 1), visibility .22s;
}
.lk-chat-panel[hidden] { display: none; }
.lk-chat.is-open .lk-chat-panel { opacity: 1; visibility: visible; transform: none; }
.lk-chat:not(.is-open) .lk-chat-panel { pointer-events: none; }

.lk-chat-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ink, #090c0e);
  color: #fff;
}
.lk-chat-eyebrow { color: var(--orange-bright, #ff7a42); font-size: 11px; font-weight: 700; }
.lk-chat-head h2 { margin: 3px 0 0; font-size: 17px; letter-spacing: -.02em; }
.lk-chat-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transition: background .22s, border-color .22s;
}
.lk-chat-close:hover { border-color: rgba(255, 92, 36, .5); background: rgba(255, 92, 36, .16); }

/* Transcript */
.lk-chat-log {
  flex: 1 1 0;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  background: var(--paper, #f0f1ed);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lk-chat-bubble {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 15px;
  background: var(--surface, #fff);
  border: 1px solid var(--dark-line, rgba(8, 12, 14, .12));
  font-size: 13px;
}
.lk-chat-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lk-chat-bubble.is-admin { align-self: flex-start; border-start-start-radius: 5px; }
.lk-chat-bubble.is-visitor {
  align-self: flex-end;
  border: 0;
  border-end-end-radius: 5px;
  background: var(--orange, #ff5c24);
  color: #fff;
}
.lk-chat-media {
  display: block;
  margin: -10px -13px 8px;
  border-radius: 14px 14px 4px 4px;
  overflow: hidden;
  background: #0c1012;
  line-height: 0;
}
.lk-chat-bubble.is-admin .lk-chat-media { margin: -10px -13px 8px; }
.lk-chat-media img { display: block; width: 100%; max-width: 300px; max-height: 260px; object-fit: cover; }
.lk-chat-media video { display: block; width: 100%; max-width: 300px; max-height: 260px; background: #000; }
[data-lk-chat-entry] { animation: lk-chat-bubble-in .3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes lk-chat-bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.lk-chat-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.lk-chat-bubble time { font-size: 10px; opacity: .68; white-space: nowrap; }
.lk-chat-edited { font-size: 9px; opacity: .6; }
.lk-chat-ticks { font-size: 11px; line-height: 1; opacity: .75; }
.lk-chat-ticks::before { content: "✓"; }
.lk-chat-ticks.is-read { opacity: 1; }
.lk-chat-ticks.is-read::before { content: "✓✓"; }
.lk-chat-note {
  margin: 2px 0 0;
  color: var(--text-soft, #596266);
  font-size: 11px;
}

/* Direct contact shortcuts */
.lk-chat-direct {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--dark-line, rgba(8, 12, 14, .12));
  background: var(--surface, #fff);
}
.lk-chat-direct a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border-radius: 11px;
  border: 1px solid var(--dark-line, rgba(8, 12, 14, .12));
  font-size: 12px;
  font-weight: 600;
  transition: border-color .22s, background .22s, transform .22s;
}
.lk-chat-direct a:hover { transform: translateY(-1px); }
.lk-chat-direct-whatsapp { color: #128c7e; }
.lk-chat-direct-whatsapp:hover { border-color: rgba(18, 140, 126, .45); background: rgba(18, 140, 126, .09); }
.lk-chat-direct-phone { color: var(--orange, #ff5c24); }
.lk-chat-direct-phone:hover { border-color: rgba(255, 92, 36, .45); background: rgba(255, 92, 36, .09); }

/* Composer */
.lk-chat-form {
  flex: 0 0 auto;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--dark-line, rgba(8, 12, 14, .12));
  background: var(--surface, #fff);
}
.lk-chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lk-chat-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.lk-chat-identity[hidden] { display: none; }
.lk-chat-identity label { display: flex; flex-direction: column; gap: 4px; }
.lk-chat-identity span { color: var(--text-soft, #596266); font-size: 11px; font-weight: 600; }
.lk-chat-form input,
.lk-chat-form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--dark-line, rgba(8, 12, 14, .12));
  border-radius: 11px;
  background: var(--paper, #f0f1ed);
  color: var(--text, #090c0e);
  font-size: 13px;
  transition: border-color .2s, background .2s;
}
.lk-chat-form input:focus,
.lk-chat-form textarea:focus {
  border-color: var(--orange, #ff5c24);
  background: var(--surface, #fff);
  outline: none;
}
.lk-chat-form textarea { resize: vertical; min-height: 46px; max-height: 160px; }
.lk-chat-message-field { display: block; }

/* Attachment */
.lk-chat-attach { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.lk-chat-attach-button {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--dark-line, rgba(8, 12, 14, .12));
  border-radius: 11px;
  background: var(--paper, #f0f1ed);
  color: var(--text-soft, #596266);
  cursor: pointer;
  transition: border-color .22s, background .22s, transform .22s, color .22s;
}
.lk-chat-attach-button:hover { border-color: var(--orange, #ff5c24); color: var(--orange, #ff5c24); }
.lk-chat-attach-button:active { transform: scale(.92); }
.lk-chat-attach-hint { color: var(--text-soft, #596266); font-size: 10px; }
.lk-chat-progress { flex: 1 1 auto; height: 5px; border-radius: 99px; background: var(--dark-line, rgba(8, 12, 14, .12)); overflow: hidden; }
.lk-chat-progress[hidden] { display: none; }
.lk-chat-progress span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--orange, #ff5c24); transition: width .2s; }
.lk-chat-attach.is-uploading .lk-chat-attach-button { pointer-events: none; opacity: .55; }

.lk-chat-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.lk-chat-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding-inline: 16px;
  border: 0;
  border-radius: 12px;
  background: var(--orange, #ff5c24);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background .22s, transform .22s;
}
.lk-chat-submit:hover:not(:disabled) { background: var(--orange-bright, #ff7a42); transform: translateY(-1px); }
.lk-chat-submit:active:not(:disabled) { transform: translateY(0) scale(.95); }
.lk-chat-submit:disabled { opacity: .62; cursor: progress; }
.lk-chat-submit svg { transform: scaleX(-1); }

.lk-chat-status { margin: 0; font-size: 11px; color: var(--text-soft, #596266); }
.lk-chat-status.is-error { color: #d63638; }
.lk-chat-status.is-success { color: #0a7d33; }
.lk-chat-privacy { display: block; margin-top: 7px; color: var(--text-soft, #596266); font-size: 10px; }

/* Compact is the safe default for laptop/short desktop viewports. The message
   transcript remains the flexible area and the composer never overlays it. */
.lk-chat.is-compact .lk-chat-head { padding: 12px 15px; }
.lk-chat.is-compact .lk-chat-head h2 { margin-top: 1px; font-size: 15px; }
.lk-chat.is-compact .lk-chat-eyebrow { font-size: 10px; }
.lk-chat.is-compact .lk-chat-log { padding: 11px 12px; gap: 7px; }
.lk-chat.is-compact .lk-chat-bubble { padding: 8px 11px; border-radius: 13px; font-size: 12px; }
.lk-chat.is-compact .lk-chat-bubble time { font-size: 9px; }
.lk-chat.is-compact .lk-chat-note { font-size: 9px; line-height: 1.65; }
.lk-chat.is-compact .lk-chat-direct { padding: 7px 11px; }
.lk-chat.is-compact .lk-chat-direct a { min-height: 33px; font-size: 11px; }
.lk-chat.is-compact .lk-chat-form { padding: 9px 11px 10px; }
.lk-chat.is-compact .lk-chat-identity { gap: 6px; margin-bottom: 6px; }
.lk-chat.is-compact .lk-chat-identity label { gap: 2px; }
.lk-chat.is-compact .lk-chat-identity span { font-size: 10px; }
.lk-chat.is-compact .lk-chat-form input,
.lk-chat.is-compact .lk-chat-form textarea { padding: 7px 9px; border-radius: 10px; font-size: 12px; }
.lk-chat.is-compact .lk-chat-form textarea { min-height: 40px; max-height: 100px; }
.lk-chat.is-compact .lk-chat-attach { margin-top: 6px; }
.lk-chat.is-compact .lk-chat-attach-button { width: 31px; height: 31px; border-radius: 10px; }
.lk-chat.is-compact .lk-chat-attach-hint { font-size: 9px; }
.lk-chat.is-compact .lk-chat-actions { gap: 8px; margin-top: 6px; }
.lk-chat.is-compact .lk-chat-submit { min-height: 36px; padding-inline: 13px; border-radius: 10px; font-size: 12px; }
.lk-chat.is-compact .lk-chat-status { font-size: 9px; line-height: 1.5; }
.lk-chat.is-compact .lk-chat-privacy { margin-top: 4px; font-size: 8px; line-height: 1.55; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keep the widget clear of the WooCommerce mobile bar and small screens.
   On phones the panel is deliberately compact so it reads like a small chat
   bubble instead of a full-screen dialog. */
@media (max-width: 640px) {
  .lk-chat { bottom: 16px; gap: 10px; right: 8px; }
  .lk-chat-launcher { width: 52px; min-width: 52px; max-width: 52px; height: 48px; min-height: 48px; max-height: 48px; justify-content: center; gap: 0; padding: 0; border-radius: 999px; }
  .lk-chat-launcher-copy { display: none; }
  .lk-chat-launcher-label { display: none; }
  .lk-chat.has-unread .lk-chat-launcher { width: auto; min-width: 176px; max-width: none; justify-content: center; gap: 8px; padding-inline: 12px; }
  .lk-chat.is-open .lk-chat-launcher { width: 52px; min-width: 52px; max-width: 52px; }
  .lk-chat.has-unread .lk-chat-launcher-copy { display: grid; }
  .lk-chat.has-unread .lk-chat-launcher-copy small { display: block; font-size: 9px; }
  .lk-chat-toast { right: 8px; bottom: 78px; }
  .lk-chat-panel { width: min(var(--lk-chat-panel-width, 400px), calc(100vw - 16px)); height: min(var(--lk-chat-panel-height, 620px), calc(100vh - 84px)); height: min(var(--lk-chat-panel-height, 620px), calc(100dvh - 84px)); max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); border-radius: 18px; }
  .lk-chat-head { padding: 12px 14px; }
  .lk-chat-head h2 { font-size: 15px; }
  .lk-chat-eyebrow { font-size: 10px; }
  .lk-chat-log { padding: 12px; gap: 8px; }
  .lk-chat-bubble { padding: 8px 11px; font-size: 12px; border-radius: 13px; }
  .lk-chat-media { margin: -8px -11px 7px; }
  .lk-chat-media img,
  .lk-chat-media video { max-width: 230px; max-height: 200px; }
  .lk-chat-note { font-size: 10px; }
  .lk-chat-direct { padding: 8px 12px; }
  .lk-chat-direct a { min-height: 34px; font-size: 11px; }
  .lk-chat-form { padding: 10px 12px 12px; }
  .lk-chat-form input,
  .lk-chat-form textarea { padding: 8px 10px; font-size: 12px; }
  .lk-chat-submit { min-height: 38px; font-size: 12px; }
  .lk-chat-identity { grid-template-columns: 1fr; }
  .lk-chat-status { font-size: 10px; }
  .lk-chat-privacy { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-chat-launcher,
  .lk-chat-submit,
  .lk-chat-direct a,
  .lk-chat-close,
  .lk-chat-panel,
  .lk-chat-panel .lk-chat-bubble,
  .lk-chat-launcher-icon svg { transition: none; animation: none; }
  .lk-chat.has-unread .lk-chat-launcher { animation: none; }
  .lk-chat-launcher:hover,
  .lk-chat-submit:hover:not(:disabled),
  .lk-chat-direct a:hover { transform: none; }
}