/* styles.css — SaaS modern + WhatsApp vibe */
:root{
  --bg:#f6fbff;
  --ink:#0f172a;
  --muted:#64748b;
  --brand:#10b981; /* greenish like WhatsApp */
  --brand2:#22c55e;
  --accent:#0ea5e9;
  --white:#fff;
  --card:#ffffffcc;
  --shadow:0 10px 30px rgba(2,6,23,.08);
}

/* Typing indicator animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.animate-bounce {
  animation: bounce 1.4s ease-in-out infinite;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans, Heebo),system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg-app, var(--bg))}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);backdrop-filter:saturate(1.8) blur(8px);border-bottom:1px solid #eef2ff}
.nav__inner{display:flex;align-items:center;gap:16px;padding:10px 0}
.brand{font-weight:800;text-decoration:none;color:var(--ink);font-size:20px}
.brand span{color:var(--brand)}
.nav__links{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.nav__links a{color:var(--ink);text-decoration:none;font-weight:500}
.btn{background:var(--brand);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none;display:inline-block;box-shadow:var(--shadow);border:none;cursor:pointer;font-weight:500}
.btn:hover{background:var(--brand2)}
.btn-outline{border:1px solid #cbd5e1;padding:9px 15px;border-radius:12px;text-decoration:none;color:var(--ink);background:#fff;cursor:pointer}
.btn-lg{font-size:18px;padding:12px 18px}
.w-100{width:100%}
.hero{padding:60px 0 40px}
.hero__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hero__copy h1{font-size:40px;line-height:1.2;margin:0 0 8px}
.hero__copy h1 span{color:var(--brand)}
.hero__copy p{color:var(--muted);margin:0 0 16px}
.cta{display:flex;gap:10px;margin:12px 0 8px}
.bullets{list-style:none;padding:0;margin:8px 0 0;color:var(--muted);display:grid;gap:4px}
.hero__visual{position:relative}
.hero__badge{position:absolute;inset-inline-start:-8px;bottom:-10px;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:6px 12px;font-size:12px;color:var(--muted);box-shadow:var(--shadow)}
.phone{width:320px;height:560px;background:#e5f7ee;border:12px solid #0d0f10;border-radius:38px;margin:0 auto;box-shadow:0 20px 50px rgba(2,6,23,.15);display:flex;flex-direction:column;overflow:hidden}
.statusbar{color:#fff;background:#0d0f10;padding:8px 12px;display:flex;justify-content:space-between;font-size:12px}
.chat{flex:1;background:#eefcf5;padding:12px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.bubble{max-width:85%;padding:10px 12px;border-radius:18px;font-size:14px;box-shadow:var(--shadow)}
.bubble--in{align-self:flex-start;background:#fff}
.bubble--out{align-self:flex-end;background:#dcf8c6}
.features{padding:50px 0}
.features h2,.pricing h2,.faq h2{font-size:28px;text-align:center;margin:0 0 10px}
.features .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}
.pricing{padding:50px 0;background:#fff}
.pricing .sub{text-align:center;color:var(--muted);margin:0 0 16px}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.plan{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow:var(--shadow);position:relative}
.plan__hdr{font-weight:700;margin-bottom:4px}
.plan .price{font-size:28px;font-weight:800;margin-bottom:6px}
.plan .price span{font-size:12px;color:var(--muted);font-weight:500}
.plan .cap{font-size:13px;color:var(--muted);margin-bottom:8px}
.plan ul{margin:0 0 12px 0;padding:0 0 0 16px;color:var(--muted)}
.plan--pro{border-color:var(--brand)}
.plan--pro .badge{position:absolute;top:10px;inset-inline-end:10px;background:var(--brand);color:#fff;font-size:11px;padding:4px 8px;border-radius:999px}
.faq{padding:50px 0}
details{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);margin:10px 0}
summary{cursor:pointer;font-weight:700}
.footer{padding:14px 0;border-top:1px solid #e2e8f0;background:#fff;color:var(--muted)}
.footer__inner{display:flex;align-items:center;gap:12px}
.footer nav{margin-inline-start:auto;display:flex;gap:10px}
@media (max-width: 960px){
  .hero__inner{grid-template-columns:1fr}
  .features .grid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .features .grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
}

.templates{padding:50px 0;background:#f8fffb}
.templates .sub{text-align:center;color:var(--muted);margin:0 0 16px}
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.tpl-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.tpl-cat{font-size:12px;color:#16a34a;background:#ecfdf5;border:1px solid #d1fae5;border-radius:999px;display:inline-block;padding:3px 8px;width:max-content}
.tpl-name{font-weight:800;font-size:18px}
.tpl-sum{margin:0;color:var(--muted)}
.tpl-actions{display:flex;gap:8px;margin-top:auto}
.btn-sm{font-size:13px;padding:8px 12px}
@media (max-width: 960px){ .tpl-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .tpl-grid{grid-template-columns:1fr} }

/* Templates modal */
.tpl-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:50}
.tpl-modal[hidden]{display:none}
.tpl-modal__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.5);backdrop-filter:blur(2px)}
.tpl-modal__box{position:relative;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(2,6,23,.35);max-width:780px;width:92%;padding:16px}
.tpl-modal__close{position:absolute;inset-inline-end:8px;top:6px;border:0;background:#f1f5f9;width:32px;height:32px;border-radius:8px;font-size:18px;cursor:pointer}
.tpl-modal__summary{color:#64748b;margin-top:-6px}
.tpl-modal__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.tpl-modal__grid ul{margin:0;padding-inline-start:18px;max-height:220px;overflow:auto}
.tpl-modal__actions{display:flex;justify-content:flex-end;margin-top:14px}
@media (max-width: 640px){
  .tpl-modal__grid{grid-template-columns:1fr}
}

/* Additional utility classes for app integration */
.bg-brand{background:var(--brand)}
.bg-brand2{background:var(--brand2)}
.text-brand{color:var(--brand)}
.text-muted{color:var(--muted)}
.shadow-design{box-shadow:var(--shadow)}
.border-design{border:1px solid #e2e8f0}
.rounded-design{border-radius:16px}

/* WhatsApp-Style Dashboard Layout */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap');

:root {
  /* WhatsApp Color Palette */
  --whatsapp-beige: #ECE5DD;
  --whatsapp-dark-green: #075E54;
  --whatsapp-green: #25D366;
  --whatsapp-blue: #34B7F1;
  --whatsapp-chat-bg: #DCF8C6;
  --whatsapp-sidebar-bg: #F0F2F5;
  
  /* Primary Colors */
  --primary: #25D366;
  --primary-dark: #075E54;
  --secondary: #34B7F1;
  
  /* Background Colors */
  --bg-app: #ECE5DD;
  --bg-sidebar: #FFFFFF;
  --bg-sidebar-header: #075E54;
  --bg-chat: #DCF8C6;
  --bg-white: #FFFFFF;
  
  /* Text Colors */
  --text-primary: #111B21;
  --text-secondary: #667781;
  --text-white: #FFFFFF;
  --text-muted: #8696A0;
  
  /* Border Colors */
  --border-light: #E9EDEF;
  --border-medium: #D1D7DB;
  
  /* Typography */
  --font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
}

/* WaFlow App Container */
.waflow-app {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: #f3f4f6;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* WaFlow Sidebar (Dark) */
.waflow-sidebar {
  width: 256px;
  min-width: 256px;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.waflow-sidebar__header {
  padding: 24px;
  border-bottom: 1px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.waflow-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.waflow-sidebar__logo-icon {
  width: 32px;
  height: 32px;
  background: #10b981;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.waflow-sidebar__logo-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 1.5;
}

.waflow-sidebar__logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.waflow-sidebar__agent-select {
  padding: 0 16px 16px 16px;
  border-bottom: 1px solid #1e293b;
}

.waflow-sidebar__agent-dropdown {
  position: relative;
}

.waflow-sidebar__agent-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.waflow-sidebar__agent-dropdown-btn:hover {
  background: #334155;
  border-color: #475569;
}

.waflow-sidebar__agent-dropdown-btn.open {
  border-color: #10b981;
  background: #1e293b;
}

.waflow-sidebar__agent-dropdown-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waflow-sidebar__agent-dropdown-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.2s;
  color: #94a3b8;
}

.waflow-sidebar__agent-dropdown-arrow.open {
  transform: rotate(180deg);
  color: #10b981;
}

.waflow-sidebar__agent-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 4px;
}

.waflow-sidebar__agent-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-family: inherit;
  border-bottom: 1px solid #334155;
}

.waflow-sidebar__agent-dropdown-item:last-child {
  border-bottom: none;
}

.waflow-sidebar__agent-dropdown-item:hover {
  background: #334155;
  color: #ffffff;
}

.waflow-sidebar__agent-dropdown-item.active {
  background: #10b981;
  color: #ffffff;
}

.waflow-sidebar__agent-dropdown-item.active svg {
  color: #ffffff;
}

.waflow-sidebar__nav {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.waflow-sidebar__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-family: inherit;
}

.waflow-sidebar__item:hover {
  background: #1e293b;
  color: #ffffff;
}

.waflow-sidebar__item.active {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2);
}

.waflow-sidebar__item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.waflow-sidebar__item-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.waflow-sidebar__item-label {
  flex: 1;
  font-size: 14px;
}

.waflow-sidebar__profile {
  padding: 16px;
  border-top: 1px solid #1e293b;
}

.waflow-sidebar__profile-card {
  background: #1e293b;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.waflow-sidebar__profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  border: 2px solid #334155;
  flex-shrink: 0;
  object-fit: cover;
}

.waflow-sidebar__profile-info {
  flex: 1;
  min-width: 0;
}

.waflow-sidebar__profile-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waflow-sidebar__profile-plan {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* WaFlow Main Content Area */
.waflow-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.content-header-bar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.content-header-bar__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.content-header-bar__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.content-header-bar__breadcrumb {
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s;
}

.content-header-bar__breadcrumb:hover,
.content-header-bar__breadcrumb.active {
  color: #0f172a;
}

.content-header-bar__separator {
  color: #64748b;
}

.content-header-bar__title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
}

.content-header-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.waflow-content {
  flex: 1;
  overflow-y: auto;
  background: #f3f4f6;
  padding: 24px;
}

/* WaFlow Editor */
.waflow-editor {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
}

.waflow-editor__header {
  padding: 20px 32px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  flex-shrink: 0;
}

.waflow-editor__title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.waflow-editor__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.waflow-editor__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}

.waflow-editor__status-dot.active {
  background: #10b981;
}

.waflow-editor__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.waflow-editor__tabs {
  padding: 0 32px;
  margin-top: 8px;
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.waflow-editor__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  font-family: inherit;
}

.waflow-editor__tab:hover {
  color: #0f172a;
}

.waflow-editor__tab.active {
  color: #10b981;
}

.waflow-editor__tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #10b981;
  border-radius: 2px 2px 0 0;
}

.waflow-editor__tab-icon {
  font-size: 16px;
}

.waflow-editor__content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

.waflow-editor__form {
  max-width: 896px;
  margin: 0 auto;
}

.waflow-editor__identity {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  align-items: flex-start;
}

.waflow-editor__avatar-container {
  display: flex;
  justify-content: center;
}

.waflow-editor__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.waflow-editor__avatar:hover {
  border-color: #10b981;
}

.waflow-editor__avatar-icon {
  font-size: 48px;
}

.waflow-editor__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.waflow-editor__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.waflow-editor__label {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}

.waflow-editor__input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1e293b;
  background: #ffffff;
  transition: all 0.2s;
}

.waflow-editor__input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.waflow-editor__input::placeholder {
  color: #94a3b8;
}

.waflow-editor__textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Courier New', Consolas, monospace;
  color: #1e293b;
  background: #ffffff;
  transition: all 0.2s;
  resize: vertical;
  line-height: 1.6;
}

.waflow-editor__textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.waflow-editor__textarea::placeholder {
  color: #94a3b8;
}

.waflow-tone-btn {
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: #475569;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.waflow-tone-btn:hover {
  border-color: #cbd5e1;
}

.waflow-tone-btn.active {
  border-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
  box-shadow: 0 0 0 1px #10b981;
}

/* WaFlow Buttons */
.waflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}

.waflow-btn--primary {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
}

.waflow-btn--primary:hover {
  background: #059669;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.waflow-btn--outline {
  background: transparent;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.waflow-btn--outline:hover {
  background: #f8fafc;
}

/* WaFlow Card */
.waflow-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* App Container (Legacy) */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-app);
}

/* Top Global Bar */
.top-bar {
  height: 60px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
}

.top-bar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.top-bar__logo {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  margin-right: 8px;
}

.top-bar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
}

.top-bar__nav-link {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.top-bar__nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.top-bar__nav-link.active {
  color: var(--primary);
  background: rgba(37, 211, 102, 0.1);
}

.top-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-bar__language {
  padding: 6px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  background: var(--bg-white);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-sans);
}

.top-bar__logout {
  padding: 6px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  background: var(--bg-white);
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.top-bar__logout:hover {
  background: var(--border-light);
}

/* Main Layout - Split View */
.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 60px);
}

/* Left Sidebar (30%) */
.sidebar {
  width: 30%;
  min-width: 300px;
  max-width: 400px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar__header {
  background: var(--bg-sidebar-header);
  color: var(--text-white);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
}

.sidebar__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-white);
  margin: 0;
}

.sidebar__new-btn {
  background: var(--primary);
  color: var(--text-white);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.2s;
}

.sidebar__new-btn:hover {
  background: #20BA5A;
}

.sidebar__search {
  padding: 8px 16px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.sidebar__search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: none;
  border-radius: 8px;
  background: var(--whatsapp-sidebar-bg);
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.sidebar__search-input:focus {
  outline: none;
  background: var(--bg-white);
}

.sidebar__search-input::placeholder {
  color: var(--text-muted);
}

.sidebar__list {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-white);
}

.sidebar__section {
  padding: 8px 0;
}

.sidebar__section-title {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.sidebar__list-item:hover {
  background: var(--whatsapp-sidebar-bg);
}

.sidebar__list-item.active {
  background: var(--whatsapp-sidebar-bg);
  border-left: 3px solid var(--primary);
}

.sidebar__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: 18px;
  flex-shrink: 0;
}

.sidebar__item-info {
  flex: 1;
  min-width: 0;
}

.sidebar__item-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__item-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  margin-top: 4px;
}

.sidebar__badge--active {
  background: #D4EDDA;
  color: #155724;
}

.sidebar__badge--draft {
  background: var(--border-light);
  color: var(--text-secondary);
}

.sidebar__menu-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.sidebar__list-item:hover .sidebar__menu-btn {
  opacity: 1;
}

.sidebar__menu {
  position: absolute;
  right: 8px;
  top: 100%;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
  min-width: 120px;
  padding: 4px 0;
}

.sidebar__menu-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  text-align: left;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s;
}

.sidebar__menu-item:hover {
  background: var(--whatsapp-sidebar-bg);
}

.sidebar__menu-item--danger {
  color: #dc3545;
}

.sidebar__menu-item--danger:hover {
  background: #f8d7da;
}

/* Right Main Panel (70%) */
.main-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-white);
}

/* Tabs Navigation */
.main-panel__tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-white);
  padding: 0 16px;
}

.main-panel__tab {
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-family: var(--font-sans);
  position: relative;
  transition: color 0.2s;
}

.main-panel__tab:hover {
  color: var(--text-primary);
  background: var(--whatsapp-sidebar-bg);
}

.main-panel__tab.active {
  color: var(--primary);
}

.main-panel__tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary);
}

/* Breadcrumbs */
.main-panel__breadcrumbs {
  padding: 12px 24px;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.main-panel__breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.main-panel__breadcrumb-link:hover {
  color: var(--primary);
}

.main-panel__breadcrumb-separator {
  color: var(--text-muted);
}

.main-panel__breadcrumb-current {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}

/* Main Content Area */
.main-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg-app);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .top-bar__nav {
    display: none;
  }
  
  .sidebar {
    width: 35%;
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .main-layout {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    max-width: 100%;
    height: 40%;
    min-height: 300px;
  }
  
  .main-panel {
    height: 60%;
  }
}

.overview {
  min-height: 100%;
  background: #f5f7fb;
  padding: 24px;
}

.overview__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.overview__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.overview__stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.overview__stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.overview__stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.overview__stat-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.overview__stat-change.positive {
  background: #ecfdf3;
  color: #059669;
}

.overview__stat-change.negative {
  background: #fef2f2;
  color: #dc2626;
}

.overview__stat-label {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 4px;
  font-weight: 600;
}

.overview__stat-value {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
}

.overview__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
}

@media (max-width: 1024px) {
  .overview__grid {
    grid-template-columns: 1fr;
  }
}

.overview__card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.overview__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.overview__card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.overview__select {
  border: none;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.overview__chart {
  height: 240px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.overview__bar-wrapper {
  flex: 1;
  position: relative;
  background: #f8fafc;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
}

.overview__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-radius: 3px 3px 0 0;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.overview__bar-wrapper:hover .overview__bar {
  opacity: 1;
}

.overview__bar-tooltip {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.overview__bar-wrapper:hover .overview__bar-tooltip {
  opacity: 1;
}

.overview__chart-labels {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 14px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}

.overview__chart-labels span {
  text-align: center;
}

.overview__activity-card {
  display: flex;
  flex-direction: column;
}

.overview__live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.overview__activity-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.overview__activity-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  position: relative;
  padding-bottom: 12px;
}

.overview__activity-line {
  position: absolute;
  left: 14px;
  top: 18px;
  bottom: -6px;
  width: 2px;
  background: #e2e8f0;
}

.overview__activity-item:last-child .overview__activity-line {
  display: none;
}

.overview__activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #eef2ff;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  font-size: 12px;
  z-index: 1;
}

.overview__activity-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.overview__activity-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.overview__activity-action {
  font-weight: 500;
  color: #64748b;
}

.overview__activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}

.overview__activity-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 4px 8px;
  border-radius: 10px;
}

.overview__button {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: #475569;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.overview__button:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}