/* ═══════════════════════════════════════════════════════════════════════
   PHONE MOCKUP — UNIFIED ep-* CLASSES
   ═══════════════════════════════════════════════════════════════════════
   Source of truth: BoardApi/wwwroot/assets/css/templateEngine/templateStudio.css
   (lines 3796-4379). Replicat 1:1 pe Website pentru consistență vizuală
   între Template Studio și landing.

   Reguli:
   - Dark forțat (#0b141a screen, #1f2c34 bubble, #00a884 mic) — IGNORĂ
     light/dark toggle al site-ului. WhatsApp e mereu dark.
   - 250×540 default (.ep-phone) și .ep-phone-lg = aliniat (250×auto).
   - Wrapper site-specific: .website-phone (responsive scale + tilt).
   - NU edita aici fără să sincronizezi cu templateStudio.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PHONE FRAME ──────────────────────────────────────────────── */
.ep-phone {
    width: 250px;
    height: 540px;
    padding: 7px;
    border-radius: 34px;
    background: #0a0a0c;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 0 0 4px #18181d,
        0 0 0 4.5px rgba(255,255,255,.04),
        0 24px 50px -16px rgba(0,0,0,.65),
        0 0 60px -10px rgba(0,168,132,.18);
    /* Forțat font system (WhatsApp-like), independent de site */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
/* Z-index pentru copiii care au nevoie să fie peste side buttons (::before/::after au z-index:0).
   NU forța position:relative — overlay-urile (.ep-browser-overlay) și notch-ul (.ep-phone-notch)
   au position:absolute proprie și trebuie să rămână în afara flow-ului flex. */
.ep-phone-statusbar,
.ep-wa-header,
.ep-chat,
.ep-chat-list,
.ep-input-bar,
.ep-home-ind,
.ep-phone > #bc-header-list,
.ep-phone > #bc-header-chat { z-index: 1; }
/* Forțează font system pe TOATE elementele interne (override Tailwind / body font Manrope / Outfit).
   Fără asta, body-ul (Manrope) leak-uiește în bubble bodies și names, iar headings (Outfit) ar putea
   nimeri în <strong>-uri la unele rezolutii. WhatsApp folosește native -apple-system / Segoe UI / Roboto. */
.ep-phone, .ep-phone * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Dynamic Island — absolute pill floating over status bar */
.ep-phone-notch {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 22px;
    background: #000;
    border-radius: 999px;
    z-index: 10;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    pointer-events: none;
}
.ep-phone-notch::after { display: none; }

/* Side buttons via pseudo-elements on .ep-phone — left rail = silent + volume up/down, right rail = power */
.ep-phone::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 60px;
    width: 4px;
    height: 16px;
    background: linear-gradient(90deg, #1a1a1f, #2a2a30);
    border-radius: 2px 0 0 2px;
    box-shadow:
        0 30px 0 0 #1a1a1f,
        0 64px 0 0 #1a1a1f;
    z-index: 0;
}
.ep-phone::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 88px;
    width: 4px;
    height: 42px;
    background: linear-gradient(270deg, #1a1a1f, #2a2a30);
    border-radius: 0 2px 2px 0;
    z-index: 0;
}
.ep-phone::before { z-index: 0; }

/* Round inner screen corners by clipping first / last child */
.ep-phone .ep-phone-statusbar {
    border-radius: 26px 26px 0 0;
}
.ep-phone .ep-home-ind {
    border-radius: 0 0 26px 26px;
}

/* ── FLEX LAYOUT FIX — fixed-height children NU shrink (chat fills) ── */
.ep-phone-statusbar,
.ep-wa-header,
.ep-input-bar,
.ep-home-ind,
.ep-phone > #bc-header-list,
.ep-phone > #bc-header-chat {
    flex-shrink: 0;
}
/* Broadcast list-mode header: same WhatsApp panel color as standard header */
.ep-phone > #bc-header-list {
    background: #1f2c34;
}

/* ── STATUS BAR ───────────────────────────────────────────────── */
.ep-phone-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 5px;
    background: #0b141a;
    position: relative;
    z-index: 1;
}

.ep-phone-time {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    font-family: inherit;
}
/* Site uses <span> direct in statusbar — apply same time styling */
.ep-phone-statusbar > span:first-child {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.ep-phone-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ep-battery { display: flex; align-items: center; gap: 1px; }
.ep-battery-body { width: 16px; height: 8px; border: 1.2px solid #fff; border-radius: 2px; overflow: hidden; }
.ep-battery-fill { height: 100%; width: 75%; background: #4cd964; }
.ep-battery-tip { width: 2px; height: 4px; background: #fff; border-radius: 0 1px 1px 0; }

/* ── WA HEADER ────────────────────────────────────────────────── */
.ep-wa-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #1f2c34;
}

.ep-wa-back { cursor: default; opacity: .7; color: #e9edef; display: flex; }
.ep-wa-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #2a3942 !important; /* uniform pe toate emulatoarele — override inline gradients (cyan/violet, orange/yellow, tint verde) */
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #e9edef; /* iconițe SVG cu fill="currentColor" → gri-deschis uniform; inițiale text → gri-deschis */
}
/* Inițiale text în avatar (ex: "PR" în Broadcast) — override inline color verde/etc */
.ep-wa-avatar > span {
    color: #e9edef !important;
}
.ep-wa-contact { flex: 1; min-width: 0; }
/* Site uses .ep-wa-info instead of .ep-wa-contact — alias both */
.ep-wa-info { flex: 1; min-width: 0; }
.ep-wa-name { font-size: 11px; font-weight: 600; color: #e9edef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-wa-status { font-size: 9px; color: #8696a0; transition: color 0.3s ease; }
.ep-wa-status.ep-is-typing { color: #00a884; }
.ep-wa-dots { opacity: .6; flex-shrink: 0; }
.ep-wa-actions { display: flex; gap: 12px; color: #aebac1; opacity: .65; flex-shrink: 0; }

/* ── CHAT AREA ────────────────────────────────────────────────── */
.ep-chat,
.ep-chat-list {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    background: #0b141a;
    scroll-behavior: smooth;
}
.ep-chat {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ep-chat::-webkit-scrollbar,
.ep-chat-list::-webkit-scrollbar { width: 0; }
.ep-chat,
.ep-chat-list { scrollbar-width: none; }

.ep-date-chip {
    align-self: center;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(32,44,51,.9);
    color: #8696a0;
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ── BUBBLE ───────────────────────────────────────────────────── */
.ep-bubble-wrap {
    align-self: flex-start;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
/* Site variants — incoming/outgoing alignment */
.ep-bubble-wrap.incoming { align-self: flex-start; }
.ep-bubble-wrap.outgoing { align-self: flex-end; }

.ep-bubble {
    background: #1f2c34;
    border-radius: 0 8px 8px 8px;
    padding: 6px 8px;
    position: relative;
    transition: max-width 0.25s ease, width 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
    .ep-bubble { transition: none; }
}
/* Site outgoing — verde WhatsApp #005c4b */
.ep-bubble-wrap.outgoing .ep-bubble {
    background: #005c4b;
    border-radius: 8px 0 8px 8px;
}
/* Consecutive messages (not first) — full rounded */
.ep-bubble-wrap.incoming.ep-cont .ep-bubble { border-radius: 8px; }
.ep-bubble-wrap.outgoing.ep-cont .ep-bubble { border-radius: 8px; }

/* Bubble tail — only on first message of group */
.ep-bubble-wrap.incoming:not(.ep-cont) .ep-bubble::before {
    content: '';
    position: absolute;
    top: 0; left: -7px;
    width: 0; height: 0;
    border-right: 7px solid #1f2c34;
    border-bottom: 7px solid transparent;
}
.ep-bubble-wrap.outgoing:not(.ep-cont) .ep-bubble::before {
    content: '';
    position: absolute;
    top: 0; right: -7px;
    width: 0; height: 0;
    border-left: 7px solid #005c4b;
    border-bottom: 7px solid transparent;
}

/* Adaptive widths per media aspect (Template Studio) */
.ep-bubble.ep-bubble-aspect-portrait-extreme { max-width: 100%; width: 220px; }
.ep-bubble.ep-bubble-aspect-portrait { max-width: 100%; width: 260px; }
.ep-bubble.ep-bubble-aspect-square { max-width: 100%; width: 280px; }
.ep-bubble.ep-bubble-aspect-landscape,
.ep-bubble.ep-bubble-aspect-landscape-wide,
.ep-bubble.ep-bubble-aspect-landscape-ultrawide { max-width: 100%; width: 320px; }
.ep-bubble.ep-bubble-aspect-unknown { max-width: 100%; width: 280px; }

@media (max-width: 380px) {
    .ep-bubble.ep-bubble-aspect-portrait-extreme { width: 200px; }
    .ep-bubble.ep-bubble-aspect-portrait { width: 240px; }
    .ep-bubble.ep-bubble-aspect-square { width: 260px; }
    .ep-bubble.ep-bubble-aspect-landscape,
    .ep-bubble.ep-bubble-aspect-landscape-wide,
    .ep-bubble.ep-bubble-aspect-landscape-ultrawide { width: 300px; }
}

.ep-bubble[class*="ep-bubble-aspect-"] .ep-bubble-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Sibling buttons — match bubble width */
.ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-portrait-extreme) .ep-bubble-btns { max-width: 100%; width: 220px; }
.ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-portrait) .ep-bubble-btns { max-width: 100%; width: 260px; }
.ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-square) .ep-bubble-btns { max-width: 100%; width: 280px; }
.ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-landscape) .ep-bubble-btns,
.ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-landscape-wide) .ep-bubble-btns,
.ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-landscape-ultrawide) .ep-bubble-btns { max-width: 100%; width: 320px; }
.ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-unknown) .ep-bubble-btns { max-width: 100%; width: 280px; }

@media (max-width: 380px) {
    .ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-portrait-extreme) .ep-bubble-btns { width: 200px; }
    .ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-portrait) .ep-bubble-btns { width: 240px; }
    .ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-square) .ep-bubble-btns { width: 260px; }
    .ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-landscape) .ep-bubble-btns,
    .ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-landscape-wide) .ep-bubble-btns,
    .ep-bubble-wrap:has(.ep-bubble.ep-bubble-aspect-landscape-ultrawide) .ep-bubble-btns { width: 300px; }
}

.ep-bubble-header {
    font-size: 11px;
    font-weight: 700;
    color: #e9edef;
    margin-bottom: 4px;
}

.ep-bubble-img { border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.ep-bubble-img img { width: 100%; height: auto; display: block; }

.ep-bubble-video { border-radius: 4px; overflow: hidden; margin-bottom: 4px; background: #000; }
.ep-bubble-video video { width: 100%; height: auto; display: block; max-height: 220px; }

.ep-img-ph, .ep-doc-header {
    height: 80px;
    background: #111b21;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    margin-bottom: 4px;
}
.ep-doc-header { height: auto; padding: 8px 10px; gap: 6px; font-size: 10px; color: #8696a0; justify-content: flex-start; }
.ep-doc-header .ep-doc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 2px 5px;
    border-radius: 3px;
    background: var(--doc-color, #8a97a4);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .3px;
}
.ep-loc-header { background: #1a2c25; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.ep-loc-map { height: 70px; background: #0d1f17; display: flex; align-items: center; justify-content: center; }
.ep-loc-name { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; color: #e9edef; }
.ep-loc-addr { padding: 0 10px 6px; font-size: 10px; color: #8696a0; }

.ep-bubble-body {
    font-size: 11px;
    color: #e9edef;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.ep-bubble-body strong { font-weight: 700; }

.ep-bubble-footer {
    font-size: 9px;
    color: #8696a0;
    margin-top: 4px;
}

.ep-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 2px;
    font-size: 9px;
    color: #8696a0;
}
.ep-bubble-wrap.outgoing .ep-bubble-meta { color: rgba(255,255,255,0.5); }

/* Ticks — single/double, read=blue */
.ep-ticks { display: inline-flex; color: #8696a0; transition: color 0.5s ease; }
.ep-ticks.ep-read { color: #53bdeb; }
.ep-bubble-wrap.outgoing .ep-ticks { color: rgba(255,255,255,0.5); }
.ep-bubble-wrap.outgoing .ep-ticks.ep-read { color: #53bdeb; }

.ep-bubble-btns {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 1px;
}

.ep-bubble-btn {
    background: #1f2c34;
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    color: #00a884;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: default;
}

/* ── INPUT BAR ────────────────────────────────────────────────── */
.ep-input-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: #0b141a;
    border-radius: 0 0 26px 26px;
}
/* Când home-ind e prezent, composer rămâne dreptunghi (home-ind preia jos) */
.ep-phone:has(.ep-home-ind) .ep-input-bar {
    border-radius: 0;
}

.ep-input-field {
    flex: 1;
    height: 28px;
    border-radius: 16px;
    background: #1f2c34;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
}

.ep-input-ph {
    font-size: 10px;
    color: #8696a0;
}

.ep-mic {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #00a884;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    /* Pulse subtil la idle (dezactivat dacă reduced motion) */
    animation: epMicPulse 2.6s ease-in-out infinite;
}
@keyframes epMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,168,132,0); }
    50% { box-shadow: 0 0 0 6px rgba(0,168,132,0); }
    25% { box-shadow: 0 0 0 0 rgba(0,168,132,0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .ep-mic { animation: none; }
}

.ep-home-ind {
    height: 16px;
    background: #0b141a;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 26px 26px;
}
.ep-home-ind::after {
    content: '';
    width: 78px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255,255,255,.55);
}

/* ── VAR-CHIP (template variables {{N}}) ─────────────────────── */
.ep-bubble .var-chip,
.var-chip {
    display: inline;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(0,168,132,.2);
    color: #00a884;
    font-size: 10px;
    font-family: inherit;
    font-weight: 700;
}
.var-chip { font-size: inherit; }

/* ── LARGER PHONE VARIANT ─────────────────────────────────────── */
.ep-phone-lg {
    width: 250px;
    padding: 7px;
    border-radius: 34px;
}
.ep-phone-lg::before {
    left: -8px;
    top: 74px;
    width: 4.5px;
    height: 20px;
    box-shadow:
        0 36px 0 0 #1a1a1f,
        0 78px 0 0 #1a1a1f;
}
.ep-phone-lg::after {
    right: -8px;
    top: 108px;
    width: 4.5px;
    height: 52px;
}
.ep-phone-lg .ep-phone-notch { top: 16px; width: 92px; height: 26px; }
.ep-phone-lg .ep-phone-statusbar { padding: 18px 18px 6px; border-radius: 32px 32px 0 0; }
.ep-phone-lg .ep-home-ind { height: 18px; border-radius: 0 0 32px 32px; }
.ep-phone-lg .ep-home-ind::after { width: 96px; height: 5px; }
.ep-phone-lg .ep-chat { min-height: 260px; }
.ep-phone-lg .ep-wa-name { font-size: 13px; }
.ep-phone-lg .ep-bubble-body { font-size: 12.5px; }
.ep-phone-lg .ep-bubble-btn { font-size: 12px; padding: 8px 10px; }

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.ep-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 180px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATIONS — bubble reveal, typing indicator
   ═══════════════════════════════════════════════════════════════════════ */

/* Bubble stagger reveal (driven de JS prin .ep-show, fallback CSS dacă lipsește) */
.ep-bubble-wrap.ep-hidden { display: none; }
.ep-bubble-wrap.ep-show {
    animation: epBubbleIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes epBubbleIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ep-bubble-wrap.ep-show { animation: none; opacity: 1; }
}

/* Typing indicator — incoming bubble cu 3 dots */
.ep-typing {
    align-self: flex-start;
    background: #1f2c34;
    border-radius: 0 8px 8px 8px;
    padding: 8px 12px;
    display: flex;
    gap: 4px;
    position: relative;
    max-width: 52px;
    margin: 1px 0;
}
.ep-typing::before {
    content: '';
    position: absolute;
    top: 0; left: -7px;
    width: 0; height: 0;
    border-right: 7px solid #1f2c34;
    border-bottom: 7px solid transparent;
}
.ep-typing-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #8696a0;
    animation: epTypingBounce 1.4s ease-in-out infinite;
}
.ep-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ep-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes epTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ep-typing-dot { animation: none; opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — keep 250×540 across viewports (Studio policy)
   Hide side buttons on narrow screens (would overflow tight column).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    .ep-phone, .ep-phone-lg {
        width: 250px;
        padding: 7px;
        border-radius: 34px;
    }
    .ep-phone-lg .ep-phone-statusbar { padding: 14px 16px 5px; border-radius: 26px 26px 0 0; }
    .ep-phone-lg .ep-home-ind { height: 16px; border-radius: 0 0 26px 26px; }
    .ep-phone-lg .ep-phone-notch { top: 13px; width: 76px; height: 22px; }
    .ep-phone::before, .ep-phone::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   .website-phone — site wrapper helper (scale + tilt)
   ═══════════════════════════════════════════════════════════════════════
   Folosit ca <div class="website-phone"><div class="ep-phone ep-phone-lg">…</div></div>.
   Permite scale responsiv + variante tilt fără să atingă internals ep-*. */
.website-phone {
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
    will-change: transform;
}
.website-phone.tilt-left { transform: rotate(-3deg); }
.website-phone.tilt-right { transform: rotate(3deg); }
.website-phone:hover { transform: scale(1.02); }
.website-phone.tilt-left:hover { transform: rotate(-3deg) scale(1.02); }
.website-phone.tilt-right:hover { transform: rotate(3deg) scale(1.02); }

@media (max-width: 768px) {
    .website-phone { transform: scale(0.85); }
    .website-phone:hover { transform: scale(0.87); }
    .website-phone.tilt-left { transform: rotate(-3deg) scale(0.85); }
    .website-phone.tilt-right { transform: rotate(3deg) scale(0.85); }
    .website-phone.tilt-left:hover { transform: rotate(-3deg) scale(0.87); }
    .website-phone.tilt-right:hover { transform: rotate(3deg) scale(0.87); }
}
@media (prefers-reduced-motion: reduce) {
    .website-phone { transition: none; }
    .website-phone:hover,
    .website-phone.tilt-left:hover,
    .website-phone.tilt-right:hover { transform: none; }
}