/* Chat Vidora (vizitatori și utilizatori) */
.vc-btn, .vc-panel, .vc-panel * { box-sizing: border-box; }
.vc-btn { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 45; display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; min-width: 58px; padding: 0 18px; border: 0; border-radius: 99px; background: #2b2118; color: #f4efe8; font: 600 15px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; cursor: pointer; box-shadow: 0 10px 30px rgba(43, 33, 24, 0.32), 0 2px 6px rgba(43, 33, 24, 0.2); transition: transform 0.18s ease, box-shadow 0.18s ease; -webkit-tap-highlight-color: transparent; }
.vc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(43, 33, 24, 0.38), 0 2px 6px rgba(43, 33, 24, 0.2); }
.vc-btn:active { transform: scale(0.96); }
.vc-btn svg { width: 24px; height: 24px; flex: none; }
.vc-btn .vc-lbl { display: none; }
@media (min-width: 640px) { .vc-btn .vc-lbl { display: inline; } .vc-btn { padding: 0 22px 0 18px; } }
.vc-btn.open .vc-lbl { display: none; }
.vc-btn.open { padding: 0; width: 58px; }
.vc-dot { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #d9622b; border: 3px solid #f4efe8; display: none; }
.vc-btn.dot .vc-dot { display: block; }

.vc-panel { position: fixed; right: 20px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 46; width: min(392px, calc(100vw - 24px)); height: min(600px, calc(100vh - 120px)); background: #fbf8f3; border-radius: 22px; box-shadow: 0 24px 64px rgba(43, 33, 24, 0.3), 0 0 0 1px rgba(43, 33, 24, 0.06); display: flex; flex-direction: column; overflow: hidden; color: #2b2118; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transform-origin: bottom right; animation: vc-in 0.2s ease; }
.vc-panel[hidden] { display: none; }
@keyframes vc-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vc-panel { animation: none; } .vc-btn { transition: none; } }
@media (max-width: 520px) { .vc-panel { right: 8px; left: 8px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom)); height: min(76vh, calc(100vh - 110px)); } .vc-btn { right: 14px; } }

.vc-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: #fbf8f3; border-bottom: 1px solid #ece3d4; }
.vc-av { width: 42px; height: 42px; border-radius: 50%; background: #2b2118; color: #f4efe8; display: grid; place-items: center; font: 400 25px/1 'DM Serif Display', Georgia, serif; flex: none; }
.vc-av { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px; gap: 1px; }
.vc-av i { width: 5px; height: 5px; border-radius: 50%; background: #d9622b; margin-bottom: 4px; font-size: 0; }
.vc-ht { flex: 1; min-width: 0; }
.vc-ht b { display: block; font-size: 16px; font-weight: 700; }
.vc-ht span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #7a6a5a; margin-top: 2px; }
.vc-ht span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2e7d4f; flex: none; }
.vc-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f0e8da; color: #2b2118; cursor: pointer; display: grid; place-items: center; flex: none; }
.vc-x:hover { background: #e6dcc9; }
.vc-x svg { width: 16px; height: 16px; }

.vc-body { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 3px; background: #f4efe8; overscroll-behavior: contain; scroll-behavior: smooth; }
.vc-m { max-width: 82%; padding: 10px 14px; font-size: 15px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 18px; }
.vc-m.them { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(43, 33, 24, 0.08); }
.vc-m.me { align-self: flex-end; background: #2b2118; color: #f7f1e8; border-bottom-right-radius: 6px; }
.vc-m.gap { margin-top: 9px; }
.vc-t { font-size: 11px; color: #9a8a79; margin: 2px 6px 4px; }
.vc-t.me { align-self: flex-end; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.vc-chip { border: 1.5px solid #d9622b; color: #bf531f; background: transparent; border-radius: 99px; padding: 8px 14px; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; cursor: pointer; }
.vc-chip:hover { background: #d9622b; color: #fff; }

.vc-foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom) * 0); background: #fbf8f3; border-top: 1px solid #ece3d4; }
.vc-who { display: grid; gap: 8px; margin-bottom: 10px; }
.vc-who input { width: 100%; margin: 0; font: inherit; font-size: 16px; border: 1.5px solid #e3dacb; border-radius: 12px; padding: 11px 14px; background: #fff; color: #2b2118; outline: none; }
.vc-who input:focus, .vc-box:focus-within { border-color: #d9622b; }
.vc-box { display: flex; align-items: flex-end; gap: 8px; border: 1.5px solid #e3dacb; background: #fff; border-radius: 22px; padding: 6px 6px 6px 16px; }
.vc-box textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 16px; line-height: 1.4; padding: 8px 0; margin: 0; max-height: 120px; color: #2b2118; min-height: 24px; }
.vc-send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #d9622b; color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; transition: background 0.15s; }
.vc-send:hover { background: #bf531f; }
.vc-send:disabled { background: #d8cdbd; cursor: default; }
.vc-send svg { width: 18px; height: 18px; }
.vc-err { color: #b3261e; font-size: 13px; padding: 6px 6px 0; }
.vc-err:empty { display: none; }
.vc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.vc-note { align-self: center; text-align: center; font-size: 12.5px; color: #7a6a5a; background: #e9dfce; border-radius: 99px; padding: 6px 14px; margin: 12px 0 6px; max-width: 92%; }
.vc-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: -2px 4px 8px; font-size: 13px; color: #7a6a5a; }
.vc-end[hidden], .vc-done[hidden], .vc-box[hidden], .vc-who[hidden] { display: none; }
.vc-endbtn { border: 0; background: transparent; color: #7a6a5a; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px 2px; }
.vc-endbtn.yes { color: #b3261e; font-weight: 700; }
.vc-done { text-align: center; padding: 6px 0 2px; }
.vc-done p { margin: 0 0 10px; font-size: 14px; color: #7a6a5a; }
.vc-again { border: 0; background: #2b2118; color: #f7f1e8; font-family: inherit; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 99px; cursor: pointer; width: 100%; }
.vc-again:hover { background: #3d2f22; }
.vc-q { font-size: 12.5px; opacity: 0.75; border-left: 3px solid #d9622b; padding: 2px 8px; margin: 0 0 6px; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.vc-typing { align-self: flex-start; font-size: 12.5px; color: #7a6a5a; padding: 4px 6px; }
.vc-typing::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: vcdots 1.2s steps(4, end) infinite; }
@keyframes vcdots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }

.vc-rate { margin: 0 0 12px; text-align: center; }
.vc-rq { margin: 0 0 6px; font-weight: 600; color: #2b2118 !important; }
.vc-stars { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.vc-star { border: 0; background: none; font-size: 34px; line-height: 1; color: #d9ccb8; cursor: pointer; padding: 0 2px; }
.vc-star.on { color: #e8a317; }
.vc-rtxt { width: 100%; box-sizing: border-box; border: 1px solid #e0d4c2; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; resize: none; margin-bottom: 8px; }
.vc-rsend { border: 0; background: #d9622b; color: #fff; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 99px; cursor: pointer; }
.vc-rsend:disabled { opacity: 0.45; cursor: default; }
.vc-rate[hidden], .vc-thx[hidden] { display: none; }
.vc-thx { color: #8a5a12 !important; font-weight: 600; }

/* telefon: fereastra de chat mai mică și mai compactă */
@media (max-width: 520px) {
  .vc-btn { height: 48px; min-width: 48px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .vc-btn.open { width: 48px; }
  .vc-btn svg { width: 21px; height: 21px; }
  .vc-panel { right: 12px; left: auto; width: min(320px, calc(100vw - 24px)); bottom: calc(70px + env(safe-area-inset-bottom)); height: min(440px, calc(100vh - 130px)); border-radius: 18px; }
  .vc-m { font-size: 14px; padding: 8px 12px; }
  .vc-head { padding: 10px 12px; }
  .vc-star { font-size: 28px; }
  .vc-rq { font-size: 14px; }
  .vc-rtxt { font-size: 13.5px; }
  .vc-again { padding: 11px 18px; font-size: 14px; }
}
@media (max-width: 520px) { .vc-av { width: 34px; height: 34px; font-size: 20px; padding-bottom: 7px; } .vc-ht b { font-size: 15px; } .vc-ht span { font-size: 12px; } .vc-x { width: 32px; height: 32px; } }

.emo-btn { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px; border-radius: 10px; flex: none; }
.emo-btn:hover { background: rgba(0, 0, 0, .06); }
.emo-pop { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 30; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; background: #fff; border: 1px solid #e3dacb; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); width: 288px; max-width: 92vw; }
.emo-pop[hidden] { display: none; }
.emo-pop button { border: 0; background: transparent; font-size: 22px; line-height: 1; padding: 5px 0; border-radius: 8px; cursor: pointer; }
.emo-pop button:hover { background: #f3ece3; }
.vc-box { position: relative; }
.vc-m a, .ch-m a { color: inherit; text-decoration: underline; word-break: break-all; }

/* poze în conversație */
.vc-img, .ch-img { display: block; margin: 2px 0; line-height: 0; text-decoration: none; }
.vc-img img, .ch-img img { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; border-radius: 10px; background: rgba(0, 0, 0, .06); }
.vc-m .vc-img + * , .ch-m .ch-img + * { margin-top: 6px; }
.vc-attach, .ch-attach { font-size: 19px; }
.vc-m:has(> .vc-img), .ch-m:has(> .ch-img) { padding: 4px; }
.vc-m:has(> .vc-img) > :not(.vc-img), .ch-m:has(> .ch-img) > :not(.ch-img) { margin-left: 9px; margin-right: 9px; }