/* ============================================================
   WhatsApp Business Integration — chat mock + demo layout
   ============================================================ */
:root {
  --wa-green: #0B6B5A;
  --wa-green-2: #0E7C68;
  --wa-tick: #34B7F1;
  --wa-out: #DCF7C5;
  --wa-paper: #EAE2D9;
  --wa-link: #0E7C68;
}

/* Industry tabs (shared look with the RAG demo tabs) */
.wa-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.wa-tab { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--text-soft); background: var(--white); border: 1px solid var(--line); padding: 11px 17px; border-radius: 999px; cursor: pointer; transition: all .3s var(--ease); }
.wa-tab svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; transition: stroke .3s var(--ease); }
.wa-tab:hover { border-color: var(--line-gold); color: var(--text); }
.wa-tab:hover svg { stroke: var(--gold-deep); }
.wa-tab.on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--shadow); }
.wa-tab.on svg { stroke: var(--gold-light); }

/* Phone + screen */
.wa-phone { width: 100%; max-width: 380px; border-radius: 40px; border: 1px solid rgba(255,255,255,.10); background: #0D0B09; padding: 11px; box-shadow: 0 30px 80px rgba(20,18,12,.28), inset 0 0 0 1px rgba(255,255,255,.06); }
.wa-screen { position: relative; border-radius: 30px; overflow: hidden; background: var(--wa-paper); display: flex; flex-direction: column; height: 720px; }
.wa-status { display: flex; align-items: center; justify-content: space-between; padding: 7px 20px 3px; background: var(--wa-green); color: rgba(255,255,255,.92); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.wa-status .sig { display: flex; align-items: center; gap: 5px; }
.wa-status .sig i { display: block; width: 3px; border-radius: 1px; background: rgba(255,255,255,.85); }
.wa-status .sig i:nth-child(1) { height: 5px; } .wa-status .sig i:nth-child(2) { height: 7px; } .wa-status .sig i:nth-child(3) { height: 9px; }
.wa-status .bat { width: 20px; height: 10px; border: 1.2px solid rgba(255,255,255,.8); border-radius: 3px; position: relative; }
.wa-status .bat::before { content: ""; position: absolute; inset: 1.6px; right: 5px; background: rgba(255,255,255,.85); border-radius: 1px; }
.wa-status .bat::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.8); }

.wa-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px 11px; background: var(--wa-green); }
.wa-bar .arw { width: 17px; height: 17px; stroke: rgba(255,255,255,.9); fill: none; flex: 0 0 auto; }
.wa-av { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-gold); display: grid; place-items: center; flex: 0 0 auto; }
.wa-av svg { width: 19px; height: 19px; stroke: #2A2008; fill: none; }
.wa-who { min-width: 0; flex: 1 1 auto; }
.wa-who b { display: block; font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: #fff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-who span { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: rgba(255,255,255,.75); }
.wa-who span em { width: 6px; height: 6px; border-radius: 50%; background: #6EE7A8; font-style: normal; }
.wa-bar .acts { display: flex; gap: 15px; flex: 0 0 auto; }
.wa-bar .acts svg { width: 17px; height: 17px; stroke: rgba(255,255,255,.85); fill: none; }

.wa-verify { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 14px; background: #FDF3D6; color: #6B5310; font-size: 10.5px; font-weight: 700; text-align: center; }
.wa-verify svg { width: 12px; height: 12px; stroke: #6B5310; fill: none; flex: 0 0 auto; }

.wa-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 7px; scrollbar-width: thin; }
.wa-body::-webkit-scrollbar { width: 5px; }
.wa-body::-webkit-scrollbar-thumb { background: rgba(20,18,12,.16); border-radius: 9px; }
.wa-day { align-self: center; font-size: 10.5px; font-weight: 700; color: #5C5A54; background: rgba(255,255,255,.82); padding: 4px 11px; border-radius: 7px; margin-bottom: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.05); }

.wa-msg { position: relative; max-width: 82%; min-width: 92px; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: #10221C; padding: 6px 9px 7px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.10); animation: waPop .28s var(--ease); word-wrap: break-word; }
.wa-msg b { font-weight: 700; }
.wa-msg .tm { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 5px 0 -1px 12px; font-size: 10px; font-weight: 500; color: rgba(16,34,28,.45); white-space: nowrap; }
.wa-msg .tm svg { width: 15px; height: 11px; stroke: var(--wa-tick); fill: none; }
.wa-msg.bot { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.wa-msg.user { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 0; }
.wa-msg.bot::before, .wa-msg.user::before { content: ""; position: absolute; top: 0; width: 9px; height: 12px; }
.wa-msg.bot::before { left: -8px; background: #fff; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.wa-msg.user::before { right: -8px; background: var(--wa-out); clip-path: polygon(0 0, 0 100%, 100% 0); }
.wa-msg .rows { clear: both; display: flex; flex-direction: column; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(16,34,28,.10); }
.wa-msg .rows i { font-style: normal; font-size: 12.5px; color: #3A4A44; display: flex; justify-content: space-between; gap: 12px; }
.wa-msg .rows i b { color: #10221C; }
.wa-msg .doc { clear: both; display: flex; align-items: center; gap: 9px; margin-top: 6px; padding: 9px 10px; background: rgba(16,34,28,.05); border-radius: 7px; }
.wa-msg .doc svg { width: 20px; height: 20px; stroke: #C0392B; fill: none; flex: 0 0 auto; }
.wa-msg .doc span { font-size: 12px; font-weight: 700; color: #10221C; }
.wa-msg .doc em { font-style: normal; font-size: 10.5px; color: rgba(16,34,28,.5); display: block; font-weight: 500; }

.wa-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 13px; background: #fff; border-radius: 8px; border-top-left-radius: 0; box-shadow: 0 1px 1px rgba(0,0,0,.10); }
.wa-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(16,34,28,.28); animation: waDot 1s infinite; }
.wa-typing i:nth-child(2) { animation-delay: .15s; }
.wa-typing i:nth-child(3) { animation-delay: .3s; }

/* Quick-reply options (selection, never typing) */
.wa-opts { flex: 0 0 auto; max-height: 236px; overflow-y: auto; padding: 6px 12px 8px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.wa-opts::-webkit-scrollbar { width: 4px; }
.wa-opts::-webkit-scrollbar-thumb { background: rgba(20,18,12,.16); border-radius: 9px; }
.wa-opts .lbl { align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5C5A54; background: rgba(255,255,255,.7); padding: 3px 10px; border-radius: 7px; }
.wa-opt { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-family: var(--sans); font-size: 13.5px; font-weight: 700; color: var(--wa-link); background: #fff; border: none; padding: 9px 12px; border-radius: 8px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.10); transition: all .22s var(--ease); }
.wa-opt svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex: 0 0 auto; }
.wa-opt:hover { background: #F2FBF7; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(11,107,90,.16); }
.wa-opt.ghost { color: #5C5A54; background: rgba(255,255,255,.72); box-shadow: none; font-weight: 600; }
.wa-opt.ghost:hover { background: #fff; color: #10221C; }
.wa-opt.tap { background: #E4F5EE; }

.wa-input { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 6px 12px 10px; }
.wa-input .field { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 999px; padding: 8px 14px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-input .field span { font-size: 12.5px; color: rgba(16,34,28,.42); font-weight: 500; }
.wa-input .field svg, .wa-input .send svg { width: 16px; height: 16px; stroke: rgba(16,34,28,.4); fill: none; flex: 0 0 auto; }
.wa-input .send { width: 34px; height: 34px; border-radius: 50%; background: var(--wa-green-2); display: grid; place-items: center; flex: 0 0 auto; }
.wa-input .send svg { stroke: #fff; width: 17px; height: 17px; }

@keyframes waPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes waDot { 0%,60%,100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Side rail: what happens behind the chat */
.wa-rail { display: flex; flex-direction: column; gap: 12px; }
.wa-rail .rail-head { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.wa-rail .rail-head svg { width: 16px; height: 16px; stroke: var(--gold-deep); fill: none; }
.wa-step { display: flex; gap: 13px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); transition: all .3s var(--ease); }
.wa-step.on { border-color: var(--line-gold); background: var(--gold-wash); box-shadow: var(--shadow-sm); }
.wa-step .n { font-family: var(--serif); font-weight: 800; font-size: 15px; color: var(--gold-deep); flex: 0 0 auto; }
.wa-step h4 { font-family: var(--sans); font-size: 14.5px; font-weight: 800; letter-spacing: 0; margin-bottom: 3px; }
.wa-step p { font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.wa-source { margin-top: 4px; padding: 15px 17px; border: 1px dashed var(--line-gold); border-radius: 14px; background: var(--champagne); }
.wa-source .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.wa-source ul { list-style: none; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.wa-source ul li { font-size: 12px; font-weight: 700; color: var(--gold-deep); background: var(--white); border: 1px solid var(--line-gold); padding: 5px 10px; border-radius: 999px; }