/* ============================================================
   TVK Makkal Connect — WhatsApp Demo page styles
   ============================================================ */

/* ── Page layout ────────────────────────────────────────────── */
.wa-page {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 20px; gap: 32px; flex-wrap: wrap;
  background: var(--surface);
  background-image: radial-gradient(var(--outline-var) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Controls panel (outside phone) ────────────────────────── */
.wa-controls {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 280px; width: 100%;
}
.wa-controls__title {
  font-family: var(--font-noto); font-size: 22px; font-weight: 700; color: var(--on-surface); margin-bottom: 4px;
}
.wa-controls__sub {
  font-family: var(--font-manrope); font-size: 14px; color: var(--on-surface-var); margin-bottom: 16px; line-height: 1.6;
}
.wa-controls__section {
  background: rgba(255,255,255,.9); border: 1px solid var(--outline-var);
  border-radius: var(--r-2xl); padding: 16px; backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.wa-controls__section-title {
  font-family: var(--font-inter); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--on-surface-var); margin-bottom: 10px;
}
.wa-control-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; border-radius: var(--r-lg); border: none;
  font-family: var(--font-inter); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.wa-control-btn--start  { background: #075E54; color: white; }
.wa-control-btn--start:hover  { background: #054d44; }
.wa-control-btn--reset  { background: var(--surface-high); color: var(--on-surface-var); }
.wa-control-btn--reset:hover  { background: var(--surface-highest); }
.wa-control-btn--ticket { background: var(--cream); color: var(--on-secondary-container); border: 1px solid var(--secondary-container); }
.wa-control-btn--ticket:hover { background: var(--secondary-container); }
.wa-control-btn .material-symbols-outlined { font-size: 18px; }

.wa-ai-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-top: 1px solid var(--outline-var); margin-top: 8px;
}
#ai-assist-label { font-family: var(--font-inter); font-size: 12px; color: var(--on-surface-var); }

/* ── Phone frame ────────────────────────────────────────────── */
.wa-phone {
  width: 390px; max-width: 100%; flex-shrink: 0;
  background: #ECE5DD; border-radius: 40px;
  border: 12px solid var(--surface-highest);
  overflow: hidden; position: relative;
  height: 780px; display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.1);
}

/* Phone notch */
.wa-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100px; height: 18px; background: var(--surface-highest);
  border-radius: 0 0 16px 16px; z-index: 20;
  display: flex; align-items: center; justify-content: center;
}
.wa-notch-bar { width: 50px; height: 4px; background: rgba(0,0,0,.25); border-radius: 2px; }

/* ── WhatsApp header ────────────────────────────────────────── */
.wa-header {
  background: #075E54; color: white;
  padding: 20px 12px 10px; display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; position: relative; z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.wa-header__back  { background: transparent; border: none; color: white; padding: 4px; border-radius: 50%; cursor: pointer; }
.wa-header__back:hover { background: rgba(255,255,255,.1); }
.wa-header__avatar {
  width: 38px; height: 38px; background: rgba(255,255,255,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wa-header__avatar .material-symbols-outlined { font-size: 20px; }
.wa-header__info { flex: 1; min-width: 0; }
.wa-header__name { font-family: var(--font-manrope); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-header__status { font-family: var(--font-inter); font-size: 11px; opacity: .85; }
.wa-header__actions { display: flex; gap: 4px; }
.wa-header__actions button { background: transparent; border: none; color: white; padding: 4px; border-radius: 50%; cursor: pointer; }
.wa-header__actions button:hover { background: rgba(255,255,255,.1); }

/* ── Chat canvas ────────────────────────────────────────────── */
.wa-chat-area {
  flex: 1; overflow-y: auto; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; z-index: 0;
  /* WhatsApp-like subtle pattern */
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='30' fill='none' stroke='%23000' stroke-opacity='.02' stroke-width='1'/%3E%3C/svg%3E");
}
.wa-chat-area::-webkit-scrollbar { width: 3px; }
.wa-chat-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 3px; }

/* ── Start overlay ──────────────────────────────────────────── */
.wa-start-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(236,229,221,.95); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px; text-align: center; padding: 32px;
}
.wa-start-overlay .material-symbols-outlined { font-size: 56px; color: #075E54; display: block; font-variation-settings:'FILL' 1; }
.wa-start-overlay h3 { font-family: var(--font-noto); font-size: 18px; font-weight: 700; color: var(--on-surface); }
.wa-start-overlay p  { font-family: var(--font-manrope); font-size: 13px; color: var(--on-surface-var); }
.wa-start-btn {
  background: #075E54; color: white; border: none;
  padding: 12px 24px; border-radius: var(--r-full);
  font-family: var(--font-inter); font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px; margin: 4px auto 0;
}
.wa-start-btn:hover { background: #054d44; }

/* ── Message rows ───────────────────────────────────────────── */
.wa-row { display: flex; }
.wa-row--bot  { justify-content: flex-start; }
.wa-row--user { justify-content: flex-end; }

@keyframes msgEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-enter { animation: msgEnter .25s ease forwards; }

/* ── Bubbles ────────────────────────────────────────────────── */
.wa-bubble {
  max-width: 80%; padding: 8px 10px;
  border-radius: 8px; font-family: var(--font-manrope); font-size: 14px;
  line-height: 1.5; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.wa-bubble--bot  { background: #ffffff; color: #111B21; border-radius: 8px 8px 8px 0; margin: 2px 4px; }
.wa-bubble--user { background: #DCF8C6; color: #111B21; border-radius: 8px 8px 0 8px; margin: 2px 4px; }
.wa-bubble--success {
  background: white; border-left: 4px solid #4caf50;
  border-radius: 8px 8px 8px 4px;
}

/* ── Time stamp ─────────────────────────────────────────────── */
.wa-time {
  font-family: var(--font-inter); font-size: 10px; color: #667781;
  float: right; margin-top: 4px; margin-left: 8px;
}
.wa-time--menu { position: absolute; bottom: 6px; right: 8px; }

/* ── Menu card ──────────────────────────────────────────────── */
.wa-menu-card { padding: 0; overflow: hidden; }
.wa-menu-header { padding: 10px 12px; border-bottom: 1px solid #e5e5e5; }
.wa-menu-title  { font-family: var(--font-inter); font-size: 13px; font-weight: 600; color: var(--on-surface); }
.wa-menu-options { display: flex; flex-direction: column; }
.wa-menu-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; background: transparent; border: none; border-bottom: 1px solid #f0f0f0;
  font-family: var(--font-inter); font-size: 13px; font-weight: 600; color: #128C7E;
  cursor: pointer; transition: background .15s; text-align: left;
}
.wa-menu-btn:last-child { border-bottom: none; }
.wa-menu-btn:hover { background: #f9f9f9; }

/* ── Chips ──────────────────────────────────────────────────── */
.wa-chips { display: flex; flex-direction: column; gap: 6px; }
.wa-chip  {
  background: var(--surface-container); border: 1px solid #e5e5e5;
  border-radius: var(--r-full); padding: 7px 14px;
  font-family: var(--font-inter); font-size: 12px; font-weight: 600; color: #128C7E;
  cursor: pointer; transition: all .15s; text-align: center;
}
.wa-chip:hover { background: #128C7E; color: white; }

/* ── WA Buttons ─────────────────────────────────────────────── */
.wa-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-lg);
  background: #128C7E; color: white; border: none;
  font-family: var(--font-inter); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.wa-btn:hover { background: #075E54; }
.wa-btn--skip { background: var(--surface-high); color: var(--on-surface-var); }
.wa-btn--skip:hover { background: var(--surface-highest); }
.wa-btn--green { background: #25D366; color: white; }
.wa-btn--green:hover { background: #1ea952; }

/* ── Confirm summary ────────────────────────────────────────── */
.wa-confirm-summary {
  background: var(--surface-low); border: 1px solid #e5e5e5;
  border-radius: var(--r-md); padding: 10px; font-size: 13px; line-height: 1.7;
  color: var(--on-surface);
}

/* ── Location card ──────────────────────────────────────────── */
.wa-location-card { border-radius: 6px; overflow: hidden; background: #eee; }
.wa-location-map  {
  height: 80px; background: linear-gradient(135deg, #c8e6c9, #e8f5e9);
  display: flex; align-items: center; justify-content: center;
}

/* ── Ticket box (success) ───────────────────────────────────── */
.wa-ticket-box {
  background: var(--surface-low); border: 1px solid var(--outline-var);
  border-radius: var(--r-md); padding: 8px 10px;
}

/* ── Date stamp ─────────────────────────────────────────────── */
.wa-date-stamp {
  text-align: center; font-family: var(--font-inter); font-size: 11px;
  color: var(--on-surface-var); background: rgba(255,255,255,.7);
  border-radius: var(--r-full); padding: 3px 12px; margin: 6px auto;
  width: fit-content; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* ── Restart row ────────────────────────────────────────────── */
.wa-restart-row { display: flex; justify-content: center; padding: 8px; }

/* ── Footer ─────────────────────────────────────────────────── */
.wa-footer {
  background: #F0F0F0; padding: 8px; display: flex;
  align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.wa-input-wrap {
  flex: 1; background: white; border-radius: var(--r-full);
  display: flex; align-items: center; padding: 4px 8px;
  border: 1px solid rgba(0,0,0,.08); min-height: 42px;
}
.wa-emoji-btn {
  background: transparent; border: none; color: var(--on-surface-var); padding: 4px; cursor: pointer;
}
.wa-text-input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-manrope); font-size: 14px; color: var(--on-surface);
  padding: 4px 6px; resize: none; height: 32px; outline: none;
  line-height: 24px;
}
.wa-text-input::placeholder { color: #aaa; }
.wa-text-input:disabled { opacity: .5; }
.wa-attach-btn {
  background: transparent; border: none; color: var(--on-surface-var); padding: 4px; cursor: pointer;
}
.wa-send-btn-circle {
  width: 42px; height: 42px; border-radius: 50%; background: #075E54; color: white;
  border: none; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: background .15s;
}
.wa-send-btn-circle:hover { background: #054d44; }
.wa-send-btn-circle:disabled { opacity: .5; cursor: default; }
.wa-send-btn-circle .material-symbols-outlined { font-size: 20px; font-variation-settings:'FILL' 1; margin-left: 2px; }