/* ============================================
   Animated Mockups - Shared Styles
   GHL-inspired light theme with dark chrome/sidebar
   ============================================ */

/* Hide placeholder text when mockup is active */
.placeholder-image.mockup-active::after,
.placeholder-image.mockup-active::before {
    display: none !important;
}

.placeholder-image.mockup-active {
    border: none !important;
    position: relative;
    overflow: hidden;
}

/* Chatbot needs overflow visible so the phone frame isn't clipped */
.placeholder-image.mockup-active[data-feature="ai-chatbot"] {
    overflow: visible;
}

/* ============================================
   MOCKUP BASE
   ============================================ */

.mockup {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: var(--font-primary);
    color: #334155;
    font-size: 12px;
    overflow: hidden;
    border-radius: inherit;
}

/* ============================================
   WINDOW CHROME (top bar with dots) — stays dark
   ============================================ */

.mockup-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #1E293B;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    flex-shrink: 0;
}

.mockup-chrome-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mockup-chrome-dot:nth-child(1) { background: #EF4444; }
.mockup-chrome-dot:nth-child(2) { background: #F59E0B; }
.mockup-chrome-dot:nth-child(3) { background: #10B981; }

.mockup-chrome-title {
    font-size: 10px;
    font-weight: 500;
    color: #94A3B8;
    margin-left: 8px;
    letter-spacing: 0.02em;
}

/* ============================================
   SIDEBAR — stays dark navy
   ============================================ */

.mockup-sidebar {
    width: 44px;
    background: #1E293B;
    border-right: 1px solid #334155;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
    gap: 14px;
    flex-shrink: 0;
}

.mockup-sidebar-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.2);
}

.mockup-sidebar-icon.active {
    background: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

/* ============================================
   BODY & CONTENT — light background
   ============================================ */

.mockup-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.mockup-content {
    flex: 1;
    padding: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #F8FAFC;
}

/* ============================================
   STAT CARDS — white cards on light bg
   ============================================ */

.mockup-stats-row {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.mockup-stats-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mockup-stats-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mockup-stats-row.cols-2 { grid-template-columns: repeat(2, 1fr); }

.mockup-stat-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mockup-stat-label {
    font-size: 8px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
}

.mockup-stat-value.text-blue { color: #3B82F6; }
.mockup-stat-value.text-green { color: #10B981; }
.mockup-stat-value.text-purple { color: #10B981; }
.mockup-stat-value.text-cyan { color: #06B6D4; }

.mockup-stat-change {
    font-size: 9px;
    margin-top: 3px;
    font-weight: 500;
}

.mockup-stat-change.positive { color: #10B981; }
.mockup-stat-change.negative { color: #EF4444; }

/* ============================================
   CHARTS AREA
   ============================================ */

.mockup-charts-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.mockup-charts-row.cols-3 {
    grid-template-columns: 1.2fr 0.8fr 1fr;
}

.mockup-chart-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mockup-chart-title {
    font-size: 9px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.mockup-chart-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

/* SVG Charts */
.mockup-donut { display: block; }
.mockup-line-chart { display: block; width: 100%; }

/* ============================================
   KANBAN BOARD — light cards
   ============================================ */

.mockup-kanban {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

.mockup-kanban-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mockup-kanban-header {
    font-size: 9px;
    font-weight: 600;
    color: #334155;
    padding: 7px 8px 6px;
    border-bottom: 2px solid;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
}

.mockup-kanban-count {
    font-size: 9px;
    font-weight: 700;
    color: #64748B;
}

.mockup-kanban-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 8px 9px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mockup-kanban-card-name {
    font-size: 10px;
    font-weight: 500;
    color: #1E293B;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-kanban-card-badge {
    display: inline-block;
    font-size: 7px;
    padding: 2px 6px;
    border-radius: 8px;
    background: #EFF6FF;
    color: #3B82F6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 500;
}

.mockup-kanban-card-icons {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}

.mockup-kanban-card-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #F1F5F9;
}

/* ============================================
   HORIZONTAL BAR CHART
   ============================================ */

.mockup-hbar-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.mockup-hbar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mockup-hbar-label {
    font-size: 9px;
    color: #64748B;
    width: 70px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-hbar-track {
    flex: 1;
    height: 16px;
    background: #F1F5F9;
    border-radius: 4px;
    overflow: hidden;
}

.mockup-hbar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
}

.mockup-hbar-value {
    font-size: 9px;
    color: #334155;
    width: 30px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 600;
}

/* ============================================
   CHAT / COMMUNICATION — light theme
   ============================================ */

.mockup-inbox {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.mockup-contact-list {
    width: 28%;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    background: #FFFFFF;
}

.mockup-contact-search {
    padding: 8px 10px;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-contact-search-input {
    width: 100%;
    height: 24px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.mockup-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #F1F5F9;
    cursor: default;
}

.mockup-contact-row.active {
    background: #EFF6FF;
}

.mockup-contact-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mockup-contact-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mockup-contact-name {
    font-size: 10px;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-contact-preview {
    font-size: 8px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-contact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.mockup-contact-time {
    font-size: 7px;
    color: #94A3B8;
}

.mockup-channel-badge {
    font-size: 7px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

.mockup-channel-badge.whatsapp { background: #DCFCE7; color: #16A34A; }
.mockup-channel-badge.email { background: #DBEAFE; color: #2563EB; }
.mockup-channel-badge.sms { background: #ECFDF5; color: #059669; }
.mockup-channel-badge.messenger { background: #E8DEFF; color: #7C3AED; }

/* Chat panel */
.mockup-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
}

.mockup-chat-header {
    padding: 10px 12px;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mockup-chat-header-name {
    font-size: 11px;
    font-weight: 600;
    color: #1E293B;
}

.mockup-chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow: hidden;
    background: #F8FAFC;
}

.mockup-chat-msg {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 9px;
    line-height: 1.4;
}

.mockup-chat-msg.incoming {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-bottom-left-radius: 3px;
    align-self: flex-start;
    color: #334155;
}

.mockup-chat-msg.outgoing {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border-bottom-right-radius: 3px;
    align-self: flex-end;
    color: #FFFFFF;
}

.mockup-chat-input {
    padding: 8px 12px;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
    background: #FFFFFF;
}

.mockup-chat-input-bar {
    height: 26px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
}

/* Contact Detail Panel (right sidebar) */
.mockup-contact-detail-panel {
    width: 28%;
    border-left: 1px solid #E2E8F0;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.mockup-detail-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px 10px;
    border-bottom: 1px solid #E2E8F0;
}

.mockup-detail-name {
    font-size: 11px;
    font-weight: 600;
    color: #1E293B;
}

.mockup-detail-status {
    font-size: 8px;
    color: #10B981;
    font-weight: 500;
}

.mockup-detail-section {
    padding: 8px 10px;
    border-bottom: 1px solid #F1F5F9;
}

.mockup-detail-section-title {
    font-size: 8px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.mockup-detail-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 6px;
}

.mockup-detail-label {
    font-size: 7px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mockup-detail-value {
    font-size: 9px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-detail-note {
    font-size: 8px;
    color: #475569;
    line-height: 1.4;
}

.mockup-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.mockup-detail-tag {
    font-size: 7px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
}

.mockup-detail-tag.blue { background: #EFF6FF; color: #3B82F6; }
.mockup-detail-tag.green { background: #ECFDF5; color: #10B981; }

/* ============================================
   PHONE FRAME (AI Chatbot) — keeps dark for contrast
   ============================================ */

.mockup-phone-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 16px;
}

.mockup-phone {
    width: auto;
    max-width: 220px;
    border-radius: 22px;
    border: 3px solid #334155;
    background: #0F172A;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 92%;
    aspect-ratio: 9 / 19.5;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.mockup-phone-notch {
    width: 40%;
    height: 5px;
    background: #1E293B;
    border-radius: 0 0 8px 8px;
    margin: 0 auto;
}

.mockup-phone--school .mockup-phone-notch {
    background: #000000;
}

/* Chatbot mockup — positioned normally so phone sizes the container */
.feature-image[data-feature="ai-chatbot"] .mockup {
    position: relative;
    overflow: visible;
}

.feature-image[data-feature="ai-chatbot"] .mockup-phone-wrapper {
    height: auto;
}

/* Phone modifier — school variant (light bg, 2x size) */
.mockup-phone--school {
    background: #FFFFFF;
    border-color: #000000;
    border-width: 4px;
    border-radius: 26px;
    position: relative;
    width: 224px;
    max-width: 224px;
    height: auto;
}

/* School landing page inside phone */
.mockup-school-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mockup-school-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-school-logo {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--gradient-primary);
    flex-shrink: 0;
}

.mockup-school-name {
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
}

.mockup-school-nav {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.mockup-school-nav-item {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: #CBD5E1;
}

.mockup-school-hero {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    padding: 22px 18px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.mockup-school-hero-img {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59,130,246,0.85), rgba(29,78,216,0.9));
}

.mockup-school-hero-title {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    position: relative;
    z-index: 1;
    margin-bottom: 3px;
}

.mockup-school-hero-subtitle {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}

.mockup-school-hero-btn {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 10px;
    background: #FFFFFF;
    color: #3B82F6;
    font-size: 9px;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.mockup-school-content {
    padding: 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mockup-school-text-line {
    height: 5px;
    border-radius: 2px;
    background: #F1F5F9;
}

.mockup-school-text-line:nth-child(1) { width: 90%; }
.mockup-school-text-line:nth-child(2) { width: 75%; }
.mockup-school-text-line:nth-child(3) { width: 85%; }
.mockup-school-text-line:nth-child(4) { width: 60%; }

/* Chat FAB (floating action button) */
.mockup-chat-fab {
    position: absolute;
    bottom: 14px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3B82F6;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    cursor: pointer;
}

.mockup-chat-fab::after {
    content: '';
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
}

/* Chat widget panel */
.mockup-chat-widget {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 5px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    background: #F8FAFC;
    border-radius: 0 0 19px 19px;
}

.mockup-chat-widget-header {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.mockup-chat-widget-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-chat-widget-avatar::after {
    content: '';
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border-radius: 50%;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
}

.mockup-chat-widget-header-name {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
}

.mockup-chat-widget-header-status {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
}

.mockup-chat-widget-close {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.mockup-chat-widget-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Hide scrollbar but keep scroll */
.mockup-chat-widget-body::-webkit-scrollbar { width: 0; }
.mockup-chat-widget-body { scrollbar-width: none; }

.mockup-chat-widget-input {
    padding: 8px 10px;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
    border-radius: 0 0 19px 19px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mockup-chat-widget-input-bar {
    height: 28px;
    background: #F1F5F9;
    border-radius: 12px;
    flex: 1;
}

.mockup-chat-widget-send {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #3B82F6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-chat-widget-send::after {
    content: '';
    width: 13px;
    height: 13px;
    background: #FFFFFF;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

/* Chat widget messages */
.mockup-chat-widget-msg {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1.45;
}

.mockup-chat-widget-msg.ai {
    background: #FFFFFF;
    align-self: flex-start;
    color: #1E293B;
    border-bottom-left-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mockup-chat-widget-msg.user {
    background: #3B82F6;
    align-self: flex-end;
    color: #FFFFFF;
    border-bottom-right-radius: 3px;
}

/* Confirmation card */
.mockup-chat-widget-card {
    align-self: flex-start;
    max-width: 85%;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    border: 1px solid #A7F3D0;
    font-size: 10px;
    line-height: 1.4;
    color: #065F46;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.mockup-chat-widget-card-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.mockup-chat-widget-card-icon::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
}

.mockup-chat-widget-card-text {
    flex: 1;
}

.mockup-chat-widget-card-title {
    font-weight: 700;
    margin-bottom: 2px;
}

/* Typing indicator (shared) */
.mockup-typing {
    display: flex;
    gap: 3px;
    padding: 10px 14px;
    background: #FFFFFF;
    border-radius: 8px;
    border-bottom-left-radius: 3px;
    width: fit-content;
    align-self: flex-start;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.mockup-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94A3B8;
}

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.mockup-typing.active .mockup-typing-dot:nth-child(1) { animation: typingBounce 1.4s infinite 0s; }
.mockup-typing.active .mockup-typing-dot:nth-child(2) { animation: typingBounce 1.4s infinite 0.2s; }
.mockup-typing.active .mockup-typing-dot:nth-child(3) { animation: typingBounce 1.4s infinite 0.4s; }

/* Email notification variant */
.mockup-notification--email {
    border-color: #93C5FD;
    background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
}

.mockup-notification--email .mockup-notification-dot {
    background: #3B82F6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

/* iOS-style notification banner */
.mockup-ios-notification {
    position: absolute;
    top: 8px;
    left: 6px;
    right: 6px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mockup-ios-notification-icon {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-ios-notification-icon::after {
    content: '';
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
}

.mockup-ios-notification-content {
    flex: 1;
    min-width: 0;
}

.mockup-ios-notification-app {
    font-size: 9px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 1px;
}

.mockup-ios-notification-title {
    font-size: 10px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 1px;
}

.mockup-ios-notification-body {
    font-size: 9px;
    color: #64748B;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   CALENDAR — light theme
   ============================================ */

.mockup-calendar {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.mockup-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.mockup-calendar-month {
    font-size: 12px;
    font-weight: 600;
    color: #1E293B;
}

.mockup-calendar-nav {
    display: flex;
    gap: 8px;
}

.mockup-calendar-nav-btn {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}

.mockup-calendar-grid {
    display: grid;
    grid-template-columns: 36px repeat(5, 1fr);
    flex: 1;
    gap: 1px;
    overflow: hidden;
}

.mockup-calendar-day-header {
    font-size: 9px;
    font-weight: 600;
    color: #334155;
    padding: 5px 3px;
    text-align: center;
    border-bottom: 1px solid #E2E8F0;
}

.mockup-calendar-day-header.today {
    color: #3B82F6;
    font-weight: 700;
}

.mockup-calendar-time {
    font-size: 8px;
    color: #94A3B8;
    padding: 3px 5px 3px 0;
    text-align: right;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.mockup-calendar-cell {
    background: #FFFFFF;
    position: relative;
    min-height: 26px;
    border-bottom: 1px solid #F1F5F9;
}

.mockup-calendar-event {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 1px;
    border-radius: 3px;
    padding: 3px 5px;
    font-size: 7px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-calendar-event.blue {
    background: #DBEAFE;
    border-left: 2px solid #3B82F6;
    color: #1D4ED8;
}

.mockup-calendar-event.green {
    background: #ECFDF5;
    border-left: 2px solid #10B981;
    color: #047857;
}

.mockup-calendar-event.teal {
    background: #CCFBF1;
    border-left: 2px solid #06B6D4;
    color: #0E7490;
}

.mockup-calendar-event.tall {
    bottom: -26px;
}

.mockup-calendar-event.purple {
    background: #F3E8FF;
    border-left: 2px solid #8B5CF6;
    color: #6D28D9;
}

/* New event highlight */
.mockup-calendar-event.new {
    box-shadow: 0 0 0 2px #3B82F6, 0 2px 8px rgba(59, 130, 246, 0.3);
    z-index: 2;
}

/* Calendar UI enhancements */
.mockup-calendar-today-btn {
    font-size: 8px;
    font-weight: 600;
    color: #3B82F6;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 10px;
    padding: 2px 8px;
    cursor: pointer;
}

.mockup-calendar-view-toggle {
    font-size: 8px;
    font-weight: 500;
    color: #475569;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 2px 6px;
}

.mockup-calendar-cell.today-col {
    background: rgba(59, 130, 246, 0.03);
}

.mockup-calendar-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #EF4444;
    z-index: 3;
    pointer-events: none;
}

.mockup-calendar-now-line::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #EF4444;
}

/* ============================================
   CALENDAR BOOKING FORM (overlay)
   ============================================ */

.mockup-booking-form {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #F8FAFC;
    background-image: radial-gradient(circle, #CBD5E1 0.5px, transparent 0.5px);
    background-size: 16px 16px;
    z-index: 10;
    padding: 12px;
    padding-top: 42px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.mockup-booking-form::-webkit-scrollbar { width: 0; }

.mockup-booking-school-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    z-index: 1;
}

.mockup-booking-school-nav {
    display: flex;
    gap: 12px;
    margin-left: auto;
}

.mockup-booking-school-nav span {
    font-size: 8px;
    color: #64748B;
    font-weight: 500;
    cursor: pointer;
}

.mockup-booking-school-nav span.active {
    color: #3B82F6;
    font-weight: 600;
}

.mockup-booking-form-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 14px;
    width: 100%;
    max-width: 240px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.mockup-booking-form-title {
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
    text-align: center;
}

.mockup-booking-form-subtitle {
    font-size: 8px;
    color: #64748B;
    text-align: center;
    margin-top: -4px;
}

/* Mini month calendar */
.mockup-mini-calendar {
    width: 100%;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px;
    background: #FAFBFC;
}

.mockup-mini-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.mockup-mini-calendar-month {
    font-size: 9px;
    font-weight: 600;
    color: #1E293B;
}

.mockup-mini-calendar-nav {
    display: flex;
    gap: 4px;
}

.mockup-mini-calendar-nav-btn {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}

.mockup-mini-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    text-align: center;
}

.mockup-mini-calendar-day {
    font-size: 6px;
    font-weight: 600;
    color: #94A3B8;
    padding: 2px 0;
    text-transform: uppercase;
}

.mockup-mini-calendar-date {
    font-size: 7px;
    color: #475569;
    padding: 3px 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 auto;
}

.mockup-mini-calendar-date.other-month {
    color: #CBD5E1;
}

.mockup-mini-calendar-date.today {
    font-weight: 700;
    color: #3B82F6;
}

.mockup-mini-calendar-date.selected {
    background: #3B82F6;
    color: #FFFFFF;
    font-weight: 600;
}

/* Time slot selector */
.mockup-time-slots {
    width: 100%;
}

.mockup-time-slots-label {
    font-size: 8px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}

.mockup-time-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mockup-time-slot {
    font-size: 7px;
    font-weight: 500;
    color: #475569;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
}

.mockup-time-slot.selected {
    background: #3B82F6;
    color: #FFFFFF;
    border-color: #3B82F6;
    font-weight: 600;
}

/* ============================================
   APPOINTMENT DETAIL PANEL
   ============================================ */

.mockup-appt-detail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 38%;
    background: #FFFFFF;
    border-left: 1px solid #E2E8F0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
}

.mockup-appt-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-appt-detail-title {
    font-size: 10px;
    font-weight: 700;
    color: #1E293B;
}

.mockup-appt-detail-close {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mockup-appt-detail-close::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #64748B;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
}

.mockup-appt-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.mockup-appt-detail-body::-webkit-scrollbar { width: 0; }
.mockup-appt-detail-body { scrollbar-width: none; }

.mockup-appt-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid #F8FAFC;
}

.mockup-appt-detail-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.mockup-appt-detail-icon.blue { background: #EFF6FF; }
.mockup-appt-detail-icon.green { background: #ECFDF5; }
.mockup-appt-detail-icon.purple { background: #F3E8FF; }
.mockup-appt-detail-icon.amber { background: #FFFBEB; }

.mockup-appt-detail-icon::after {
    content: '';
    width: 12px;
    height: 12px;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.mockup-appt-detail-icon.icon-calendar::after {
    background: #3B82F6;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14a2 2 0 002 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11z'/%3E%3C/svg%3E");
}

.mockup-appt-detail-icon.icon-user::after {
    background: #3B82F6;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.mockup-appt-detail-icon.icon-phone::after {
    background: #10B981;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.mockup-appt-detail-icon.icon-email::after {
    background: #3B82F6;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.mockup-appt-detail-icon.icon-advisor::after {
    background: #8B5CF6;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z'/%3E%3C/svg%3E");
}

.mockup-appt-detail-icon.icon-location::after {
    background: #F59E0B;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.mockup-appt-detail-icon.icon-comment::after {
    background: #64748B;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

.mockup-appt-detail-info {
    flex: 1;
    min-width: 0;
}

.mockup-appt-detail-label {
    font-size: 7px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}

.mockup-appt-detail-value {
    font-size: 9px;
    color: #1E293B;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-appt-detail-value.comment {
    white-space: normal;
    font-style: italic;
    color: #475569;
    font-weight: 400;
    line-height: 1.3;
}

.mockup-appt-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-appt-status-badge {
    font-size: 8px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

/* Notification toast */
.mockup-notification {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 9px;
    color: #334155;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 70%;
}

.mockup-notification-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    flex-shrink: 0;
}

/* Won notification - green variant */
.mockup-notification.won {
    border-color: #10B981;
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);
}

.mockup-notification.won .mockup-notification-dot {
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

/* ============================================
   WHATSAPP BUSINESS MOCKUP
   ============================================ */

.mockup-wa-inbox {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Contact list panel */
.mockup-wa-contact-list {
    width: 32%;
    border-right: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    background: #FFFFFF;
}

.mockup-wa-list-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-wa-new-btn {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #25D366;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: default;
    flex-shrink: 0;
}

.mockup-wa-new-btn.active {
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.3);
}

.mockup-wa-search {
    padding: 6px 10px;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-wa-search-input {
    width: 100%;
    height: 22px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

/* Contact row */
.mockup-wa-contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #F1F5F9;
    cursor: default;
}

.mockup-wa-contact-row.active {
    background: #ECFDF5;
}

.mockup-wa-contact-row.unread .mockup-wa-contact-name {
    font-weight: 700;
}

.mockup-wa-contact-row.unread .mockup-wa-contact-preview {
    color: #334155;
    font-weight: 500;
}

/* Avatar */
.mockup-wa-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #FFFFFF;
}

.mockup-wa-contact-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mockup-wa-contact-name {
    font-size: 10px;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-wa-contact-preview {
    font-size: 8px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-wa-contact-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}

.mockup-wa-contact-time {
    font-size: 7px;
    color: #94A3B8;
}

.mockup-wa-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25D366;
}

/* Placeholder */
.mockup-wa-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #F8FAFC;
    color: #94A3B8;
}

.mockup-wa-placeholder-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E2E8F0;
}

.mockup-wa-placeholder-text {
    font-size: 10px;
    color: #94A3B8;
}

/* Chat panel */
.mockup-wa-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #F8FAFC;
}

.mockup-wa-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-wa-chat-header .mockup-wa-avatar {
    width: 24px;
    height: 24px;
    font-size: 9px;
}

.mockup-wa-chat-header-info {
    flex: 1;
    min-width: 0;
}

.mockup-wa-chat-header-name {
    font-size: 10px;
    font-weight: 600;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mockup-wa-chat-header-phone {
    font-size: 7px;
    color: #94A3B8;
}

/* Verified badge */
.mockup-wa-verified {
    flex-shrink: 0;
    vertical-align: middle;
}

/* Chat messages area */
.mockup-wa-chat-messages {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: #ECE5DD;
    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='%23d5cec5' fill-opacity='0.3'%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");
}

.mockup-wa-chat-messages::-webkit-scrollbar {
    width: 0;
}

/* Message bubbles */
.mockup-wa-msg {
    max-width: 78%;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 8px;
    line-height: 1.45;
    word-wrap: break-word;
    position: relative;
}

.mockup-wa-msg.incoming {
    background: #FFFFFF;
    color: #1E293B;
    align-self: flex-start;
    border-top-left-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mockup-wa-msg.outgoing {
    background: #DCF8C6;
    color: #1E293B;
    align-self: flex-end;
    border-top-right-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mockup-wa-msg.template {
    border-left: 3px solid #25D366;
}

/* Template badge */
.mockup-wa-template-badge {
    display: inline-block;
    font-size: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #128C7E;
    background: rgba(37, 211, 102, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    margin-bottom: 3px;
}

/* Message meta (time + checks) */
.mockup-wa-msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 2px;
}

.mockup-wa-msg-time {
    font-size: 6px;
    color: #94A3B8;
}

.mockup-wa-msg-checks {
    font-size: 7px;
    color: #94A3B8;
    letter-spacing: -2px;
}

.mockup-wa-msg-checks.read {
    color: #34B7F1;
}

/* WhatsApp typing indicator */
.mockup-wa-typing {
    display: flex;
    gap: 3px;
    padding: 8px 10px;
    background: #FFFFFF;
    border-radius: 8px;
    border-top-left-radius: 2px;
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mockup-wa-typing.active .mockup-typing-dot:nth-child(1) { animation: typingBounce 1.4s infinite 0s; }
.mockup-wa-typing.active .mockup-typing-dot:nth-child(2) { animation: typingBounce 1.4s infinite 0.2s; }
.mockup-wa-typing.active .mockup-typing-dot:nth-child(3) { animation: typingBounce 1.4s infinite 0.4s; }

/* Chat input bar */
.mockup-wa-chat-input {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-wa-attach {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #94A3B8;
    opacity: 0.4;
    flex-shrink: 0;
}

.mockup-wa-input-bar {
    flex: 1;
    height: 22px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.mockup-wa-send-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #25D366;
    flex-shrink: 0;
}

/* WhatsApp notification variant */
.mockup-notification--whatsapp {
    border-color: #86EFAC;
    background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.2);
}

.mockup-notification--whatsapp .mockup-notification-dot {
    background: #25D366;
    box-shadow: 0 0 6px rgba(37, 211, 102, 0.5);
}

/* Broadcast panel */
.mockup-wa-broadcast-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #F8FAFC;
}

.mockup-wa-broadcast-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
}

.mockup-wa-broadcast-title {
    font-size: 11px;
    font-weight: 700;
    color: #1E293B;
}

.mockup-wa-broadcast-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mockup-wa-broadcast-body::-webkit-scrollbar {
    width: 0;
}

.mockup-wa-broadcast-label {
    font-size: 8px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Template option rows */
.mockup-wa-template-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    cursor: default;
}

.mockup-wa-template-option.selected {
    border-color: #25D366;
    background: #F0FDF4;
}

.mockup-wa-template-option-radio {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    flex-shrink: 0;
}

.mockup-wa-template-option.selected .mockup-wa-template-option-radio {
    border-color: #25D366;
    background: #25D366;
    box-shadow: inset 0 0 0 2px #FFFFFF;
}

.mockup-wa-template-option-info {
    flex: 1;
    min-width: 0;
}

.mockup-wa-template-option-name {
    font-size: 9px;
    font-weight: 600;
    color: #1E293B;
}

.mockup-wa-template-option-preview {
    font-size: 7px;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Preview bubble */
.mockup-wa-broadcast-preview {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px;
}

.mockup-wa-preview-label {
    font-size: 7px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.mockup-wa-preview-bubble {
    background: #DCF8C6;
    border-radius: 8px;
    padding: 8px;
    font-size: 8px;
    line-height: 1.4;
    color: #1E293B;
    border-left: 3px solid #25D366;
}

/* Recipients */
.mockup-wa-broadcast-recipients {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mockup-wa-recipient-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    font-size: 9px;
    color: #334155;
}

.mockup-wa-recipient-checkbox {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 2px solid #CBD5E1;
    flex-shrink: 0;
    position: relative;
}

.mockup-wa-recipient-checkbox.checked {
    background: #25D366;
    border-color: #25D366;
}

.mockup-wa-recipient-checkbox.checked::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 700;
}

.mockup-wa-recipient-count {
    margin-left: auto;
    font-size: 8px;
    font-weight: 700;
    color: #25D366;
}

/* Send button */
.mockup-wa-broadcast-send {
    padding: 8px;
    background: #25D366;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
    margin: 8px 10px;
    flex-shrink: 0;
    cursor: default;
}

.mockup-wa-broadcast-send.sent {
    background: #128C7E;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .mockup {
        font-size: 10px;
    }

    .mockup-sidebar {
        display: none !important;
    }

    .mockup-cursor {
        display: none !important;
    }

    .mockup-chrome {
        padding: 7px 10px;
    }

    .mockup-chrome-dot {
        width: 6px;
        height: 6px;
    }

    .mockup-chrome-title {
        font-size: 8px;
    }

    .mockup-stat-value {
        font-size: 16px;
    }

    .mockup-stats-row.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .mockup-content {
        padding: 10px;
    }

    .mockup-kanban-card-icons {
        display: none;
    }

    .mockup-contact-list {
        width: 30%;
    }

    .mockup-contact-detail-panel {
        display: none;
    }

    .mockup-contact-avatar {
        width: 22px;
        height: 22px;
    }

    .mockup-wa-contact-list {
        width: 30%;
    }

    .mockup-wa-avatar {
        width: 22px;
        height: 22px;
        font-size: 8px;
    }

    .mockup-screen-label {
        display: none !important;
    }

    .mockup-logo-reveal {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .mockup {
        font-size: 9px;
    }

    .mockup-stat-value {
        font-size: 14px;
    }

    .mockup-content {
        padding: 8px;
    }

    .mockup-stats-row.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .mockup-charts-row {
        grid-template-columns: 1fr;
    }

    .mockup-kanban-col:nth-child(n+4) {
        display: none;
    }

    .mockup-contact-list {
        display: none;
    }

    .mockup-wa-contact-list {
        display: none;
    }

    .mockup-phone {
        max-width: 180px;
    }

    .mockup-phone--school {
        width: 172px;
        max-width: 172px;
    }

    .mockup-calendar-grid {
        grid-template-columns: 28px repeat(5, 1fr);
    }

}

/* ============================================
   HERO LOGIN SCREEN
   ============================================ */

.mockup-login {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #F1F5F9;
    background-image: radial-gradient(circle, #CBD5E1 0.5px, transparent 0.5px);
    background-size: 16px 16px;
    z-index: 10;
    padding: 20px;
}

.mockup-login-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    width: 240px;
}

.mockup-login-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
}

.mockup-login-logo {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #3B82F6, #10B981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mockup-login-subtitle {
    font-size: 10px;
    color: #64748B;
    margin-bottom: 4px;
}

.mockup-login-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mockup-login-field-label {
    font-size: 9px;
    color: #475569;
    font-weight: 500;
}

.mockup-login-field-input {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 10px;
    color: #334155;
    height: 32px;
    display: flex;
    align-items: center;
}

.mockup-login-field-input:focus-within,
.mockup-login-field-input.active {
    border-color: #3B82F6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.mockup-login-dots {
    display: flex;
    gap: 3px;
    align-items: center;
}

.mockup-login-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #334155;
    opacity: 0;
}

.mockup-login-options {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mockup-login-remember {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    color: #64748B;
}

.mockup-login-checkbox {
    width: 10px;
    height: 10px;
    border: 1px solid #CBD5E1;
    border-radius: 2px;
    background: #FFFFFF;
}

.mockup-login-forgot {
    font-size: 8px;
    color: #3B82F6;
}

.mockup-login-btn {
    width: 100%;
    padding: 9px 0;
    background: linear-gradient(135deg, #3B82F6, #10B981);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mockup-login-btn.pressed {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.mockup-login-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    color: #94A3B8;
    margin-top: 4px;
}

.mockup-login-footer svg {
    width: 10px;
    height: 10px;
    fill: #94A3B8;
}

.mockup-login-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #3B82F6, #10B981);
    width: 0%;
    border-radius: 0 2px 2px 0;
}

/* ============================================
   HERO CURSOR
   ============================================ */

.mockup-cursor {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    width: 16px;
    height: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    opacity: 0;
}

/* ============================================
   HERO SCREEN PANELS
   ============================================ */

.mockup-screens {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    transform-origin: center center;
}

.mockup-screen {
    position: absolute;
    inset: 0;
    padding: 14px;
    opacity: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F8FAFC;
    transition: opacity 0.3s ease;
}

.mockup-screen.active {
    opacity: 1;
}

/* Simplified bar chart for hero dashboard */
.mockup-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 100%;
    padding: 10px 20px;
}

.mockup-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    min-height: 0;
}

/* Simplified contact rows for hero conversations */
.mockup-simple-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #E2E8F0;
}

.mockup-simple-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mockup-simple-contact-info {
    flex: 1;
    min-width: 0;
}

.mockup-simple-name {
    font-size: 9px;
    font-weight: 600;
    color: #334155;
}

.mockup-simple-preview {
    font-size: 8px;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-simple-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px;
}

.mockup-simple-bubble {
    max-width: 75%;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 8px;
    line-height: 1.4;
}

.mockup-simple-bubble.incoming {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #334155;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}

.mockup-simple-bubble.outgoing {
    background: #3B82F6;
    color: #FFFFFF;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

/* ============================================
   FUNNEL FORM OVERLAY
   ============================================ */

.mockup-funnel-form {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #F1F5F9;
    background-image: radial-gradient(circle, #CBD5E1 0.5px, transparent 0.5px);
    background-size: 16px 16px;
    z-index: 10;
    padding: 20px;
}

.mockup-funnel-form-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px 20px;
    width: 100%;
    max-width: 220px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.mockup-funnel-form-title {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    text-align: center;
}

.mockup-funnel-form-subtitle {
    font-size: 8px;
    color: #64748B;
    text-align: center;
    margin-top: -4px;
}

/* ============================================
   DASHBOARD — Channel Icon Overlay
   ============================================ */

.mockup-channel-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 0;
}

.mockup-channel-icon-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.mockup-channel-icon-circle svg {
    width: 48px;
    height: 48px;
    fill: #FFFFFF;
}

.mockup-channel-icon-label {
    font-size: 9px;
    font-weight: 600;
    color: #475569;
    background: #FFFFFF;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

/* ============================================
   HERO ENRICHMENT — Login extras
   ============================================ */

.mockup-login-divider {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 8px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mockup-login-divider::before,
.mockup-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}

.mockup-login-social-btn {
    width: 100%;
    padding: 7px 0;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    font-size: 9px;
    color: #475569;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
}

.mockup-login-social-icon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(135deg, #EA4335, #FBBC05, #34A853, #4285F4);
}

/* ============================================
   HERO ENRICHMENT — Dashboard extras
   ============================================ */

.mockup-stat-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.mockup-stat-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mockup-stat-sparkline {
    display: block;
    width: 40px;
    height: 16px;
    margin-top: 3px;
}

.mockup-activity-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-top: 8px;
    flex-shrink: 0;
}

.mockup-activity-title {
    font-size: 9px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.mockup-activity-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mockup-activity-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    color: #475569;
}

.mockup-activity-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mockup-activity-time {
    color: #94A3B8;
    font-size: 7px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ============================================
   HERO ENRICHMENT — Pipeline extras
   ============================================ */

.mockup-kanban-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.mockup-kanban-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    font-weight: 700;
    color: #FFFFFF;
    flex-shrink: 0;
}

.mockup-kanban-progress {
    height: 2px;
    background: #F1F5F9;
    border-radius: 1px;
    margin-top: 5px;
    overflow: hidden;
}

.mockup-kanban-progress-fill {
    height: 100%;
    border-radius: 1px;
}

.mockup-kanban-value {
    font-size: 7px;
    color: #94A3B8;
    font-weight: 500;
}

.mockup-kanban-header-meta {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Won column checkmark */
.mockup-won-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #10B981;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-won-icon svg {
    width: 8px;
    height: 8px;
}

/* ============================================
   HERO ENRICHMENT — Conversations extras
   ============================================ */

.mockup-unread-badge {
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    background: #3B82F6;
    color: #FFFFFF;
    font-size: 7px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.mockup-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    border: 1.5px solid #FFFFFF;
    animation: onlinePulse 2s infinite;
}

@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0); }
}

.mockup-contact-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.mockup-msg-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.mockup-msg-time {
    font-size: 6px;
    color: #94A3B8;
}

.mockup-chat-msg.outgoing .mockup-msg-time {
    color: rgba(255, 255, 255, 0.6);
}

.mockup-msg-check {
    display: flex;
    gap: 0;
}

.mockup-msg-check svg {
    width: 8px;
    height: 8px;
}

.mockup-chat-msg.outgoing .mockup-msg-check svg {
    fill: rgba(255, 255, 255, 0.7);
}

.mockup-msg-check.read svg {
    fill: #60A5FA;
}

.mockup-chat-msg.outgoing .mockup-msg-check.read svg {
    fill: rgba(255, 255, 255, 0.9);
}

.mockup-send-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3B82F6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-send-btn svg {
    width: 9px;
    height: 9px;
    fill: #FFFFFF;
}

.mockup-chat-input {
    position: relative;
}

/* ============================================
   HERO ENRICHMENT — Calendar extras
   ============================================ */

.mockup-calendar-attendees {
    display: flex;
    gap: 2px;
    margin-top: 1px;
}

.mockup-calendar-attendee {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mockup-calendar-day-header.today::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #EF4444;
    margin-left: 2px;
    vertical-align: middle;
}

.mockup-calendar-mini {
    display: grid;
    grid-template-columns: repeat(7, 3px);
    gap: 1.5px;
    padding: 3px 5px;
}

.mockup-calendar-mini-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #CBD5E1;
}

.mockup-calendar-mini-dot.active {
    background: #3B82F6;
}

.mockup-calendar-mini-dot.today {
    background: #EF4444;
}

/* Screen Title Overlay — 2x large */
.mockup-screen-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    font-family: var(--font-headings);
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -0.04em;
    pointer-events: none;
    background: linear-gradient(135deg, #3B82F6 0%, #06B6D4 50%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 6px 24px rgba(59, 130, 246, 0.5));
}

/* Logo Reveal — outside .mockup so blur doesn't affect it */
.mockup-logo-reveal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    font-family: var(--font-headings);
    font-size: 84px;
    font-weight: 700;
    letter-spacing: -0.04em;
    pointer-events: none;
    background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 8px 32px rgba(59, 130, 246, 0.6));
}

/* ============================================
   DONUT CHART
   ============================================ */

.mockup-donut-chart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-donut-center {
    position: absolute;
    text-align: center;
}

.mockup-donut-value {
    font-size: 10px;
    font-weight: 700;
    color: #334155;
    line-height: 1.1;
}

.mockup-donut-label {
    font-size: 6px;
    color: #94A3B8;
}

/* ============================================
   TASKS SCREEN
   ============================================ */

.mockup-tasks {
    padding: 10px 12px;
    overflow-y: auto;
    height: 100%;
}

.mockup-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mockup-tasks-title {
    font-size: 11px;
    font-weight: 700;
    color: #0F172A;
}

.mockup-tasks-filters {
    display: flex;
    gap: 4px;
}

.mockup-task-filter {
    font-size: 7px;
    padding: 2px 6px;
    border-radius: 4px;
    color: #64748B;
    background: #F1F5F9;
    cursor: pointer;
}

.mockup-task-filter.active {
    background: #3B82F6;
    color: #fff;
}

.mockup-tasks-section {
    margin-bottom: 10px;
}

.mockup-tasks-section-title {
    font-size: 8px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #E2E8F0;
}

.mockup-task-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 8px;
}

.mockup-task-checkbox {
    width: 12px;
    height: 12px;
    border: 1.5px solid #CBD5E0;
    border-radius: 3px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-task-checkbox.checked {
    background: #10B981;
    border-color: #10B981;
}

.mockup-task-text {
    flex: 1;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-task-text.done {
    text-decoration: line-through;
    color: #94A3B8;
}

.mockup-task-badge {
    font-size: 6px;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 500;
}

.mockup-task-badge.high {
    background: #FEE2E2;
    color: #DC2626;
}

.mockup-task-badge.medium {
    background: #FEF3C7;
    color: #D97706;
}

.mockup-task-badge.low {
    background: #D1FAE5;
    color: #059669;
}

.mockup-task-due {
    font-size: 7px;
    color: #94A3B8;
    white-space: nowrap;
}

.mockup-task-assignee {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}