/* === main.css - Sankalp Static Prototype ===
* Task 1.2: Resets, typography, utility classes, and all R7 shared components.
*
* FONT LOADING (add to every HTML ):
*
*
*
*
* All colours use CSS custom properties from tokens.css - NO raw hex values.
* Requirements: R3.1, R3.2, R3.3, R3.4, R7.1-R7.11
*/
/* =============================================================================
1. CSS RESET
============================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
min-height: 100vh;
line-height: 1.5;
color: var(--sankalp-text-primary);
background: var(--sankalp-surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
ul,
ol {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
button {
cursor: pointer;
border: none;
background: none;
}
/* =============================================================================
2. TYPOGRAPHY - R3.1, R3.2, R3.3, R3.4
============================================================================= */
/* Language-driven font switching via body class (set by shell.js) */
body.lang-en {
font-family: var(--sankalp-font-english);
}
body.lang-hi {
font-family: var(--sankalp-font-hindi);
}
/* Default fallback when no lang class is set */
body {
font-family: var(--sankalp-font-hindi);
}
/* Mobile type scale: max-width 480px */
@media (max-width: 480px) {
body {
font-size: 16px;
}
.text-secondary {
font-size: 14px;
}
}
/* Web type scale: min-width 481px */
@media (min-width: 481px) {
body {
font-size: 14px;
}
.text-secondary {
font-size: 12px;
}
}
/* Typography utility classes */
.text-primary {
color: var(--sankalp-text-primary);
}
.text-secondary {
color: var(--sankalp-text-secondary);
}
.text-brand {
color: var(--sankalp-brand);
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
/* =============================================================================
3. BILINGUAL CONTENT PATTERN - R9.3
============================================================================= */
/* Hide inactive language spans ONLY after body lang class is applied.
Scoped to body.lang-* so content is visible before JS runs (no flash).
Usage: हिंदीEnglish */
body.lang-hi [data-lang="en"] { display: none; }
body.lang-en [data-lang="hi"] { display: none; }
/* SVG tspan elements don't support display:none — use visibility instead */
body.lang-hi tspan[data-lang="en"] { visibility: hidden; font-size: 0; }
body.lang-en tspan[data-lang="hi"] { visibility: hidden; font-size: 0; }
/* =============================================================================
4. UTILITY CLASSES
============================================================================= */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-xs {
gap: var(--sankalp-space-xs);
}
.gap-sm {
gap: var(--sankalp-space-sm);
}
.gap-md {
gap: var(--sankalp-space-md);
}
.w-full {
width: 100%;
}
.opacity-40 {
opacity: 0.4;
}
.cursor-not-allowed {
cursor: not-allowed;
}
/* =============================================================================
5. R7.1 - RISK BADGE
============================================================================= */
/* Large badge - pill shape with background and text colour from risk tokens */
.risk-badge {
display: inline-flex;
align-items: center;
gap: var(--sankalp-space-xs);
padding: 4px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
.risk-badge.risk-red {
background: var(--sankalp-risk-red-bg);
color: var(--sankalp-risk-red);
}
.risk-badge.risk-yellow {
background: var(--sankalp-risk-yellow-bg);
color: var(--sankalp-risk-yellow);
}
.risk-badge.risk-green {
background: var(--sankalp-risk-green-bg);
color: var(--sankalp-risk-green);
}
/* Small chip - compact version for case list items */
.risk-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.risk-chip.risk-red {
background: var(--sankalp-risk-red-bg);
color: var(--sankalp-risk-red);
}
.risk-chip.risk-yellow {
background: var(--sankalp-risk-yellow-bg);
color: var(--sankalp-risk-yellow);
}
.risk-chip.risk-green {
background: var(--sankalp-risk-green-bg);
color: var(--sankalp-risk-green);
}
/* Icon-only map pin variant */
.risk-pin {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 10px;
}
.risk-pin.risk-red {
background: var(--sankalp-risk-red-bg);
color: var(--sankalp-risk-red);
}
.risk-pin.risk-yellow {
background: var(--sankalp-risk-yellow-bg);
color: var(--sankalp-risk-yellow);
}
.risk-pin.risk-green {
background: var(--sankalp-risk-green-bg);
color: var(--sankalp-risk-green);
}
/* =============================================================================
6. R7.2 - LANGUAGE TOGGLE
============================================================================= */
.lang-toggle {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid var(--sankalp-border);
overflow: hidden;
background: var(--sankalp-surface);
}
.lang-btn {
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
color: var(--sankalp-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
min-width: 36px;
text-align: center;
}
.lang-btn:hover {
background: var(--sankalp-surface-secondary);
color: var(--sankalp-text-primary);
}
.lang-btn.active {
background: var(--sankalp-brand);
color: var(--sankalp-surface);
}
/* =============================================================================
7. R7.3 - CASE SWITCHER (PRESENTER OVERLAY)
============================================================================= */
/* Presenter-only overlay - not part of product UI */
.presenter-overlay {
position: fixed;
bottom: 8px;
left: 8px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: 6px 12px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.75);
color: var(--sankalp-surface);
font-size: 12px;
font-weight: 500;
backdrop-filter: blur(4px);
}
.presenter-overlay label {
opacity: 0.8;
white-space: nowrap;
}
#case-switcher select,
.presenter-overlay select {
background: transparent;
color: var(--sankalp-surface);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
padding: 2px 6px;
font-size: 12px;
cursor: pointer;
}
#case-switcher select option,
.presenter-overlay select option {
background: var(--sankalp-text-primary);
color: var(--sankalp-surface);
}
/* =============================================================================
8. R7.4 - SYNC STATE INDICATOR
============================================================================= */
.sync-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 500;
}
.sync-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.sync-online .sync-dot {
background: var(--sankalp-sync-online);
}
.sync-offline .sync-dot {
background: var(--sankalp-sync-offline);
}
.sync-online {
color: var(--sankalp-sync-online);
}
.sync-offline {
color: var(--sankalp-sync-offline);
}
/* =============================================================================
9. R7.5 - ALERT BANNER
============================================================================= */
.alert-banner {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
width: 100%;
min-height: 48px;
padding: 10px var(--sankalp-space-md);
font-size: 13px;
font-weight: 500;
border-left: 4px solid transparent;
}
.alert-banner.alert-red {
background: var(--sankalp-risk-red-bg);
border-left-color: var(--sankalp-risk-red);
color: var(--sankalp-risk-red);
}
.alert-banner.alert-yellow {
background: var(--sankalp-risk-yellow-bg);
border-left-color: var(--sankalp-risk-yellow);
color: var(--sankalp-risk-yellow);
}
.alert-banner.alert-green {
background: var(--sankalp-risk-green-bg);
border-left-color: var(--sankalp-risk-green);
color: var(--sankalp-risk-green);
}
/* =============================================================================
10. R7.6 - CARD
============================================================================= */
.sankalp-card {
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-border);
border-radius: 8px;
overflow: hidden;
}
.card-header {
padding: var(--sankalp-space-md);
border-bottom: 1px solid var(--sankalp-border);
font-weight: 600;
font-size: 14px;
color: var(--sankalp-text-primary);
}
.card-body {
padding: var(--sankalp-space-md);
color: var(--sankalp-text-primary);
}
.card-footer {
padding: var(--sankalp-space-sm) var(--sankalp-space-md);
border-top: 1px solid var(--sankalp-border);
background: var(--sankalp-surface-secondary);
font-size: 13px;
color: var(--sankalp-text-secondary);
}
/* =============================================================================
11. R7.7 - AVATAR
============================================================================= */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
font-weight: 600;
color: var(--sankalp-surface);
background: var(--sankalp-brand);
object-fit: cover;
}
.avatar-sm {
width: 32px;
height: 32px;
font-size: 11px;
}
.avatar-md {
width: 40px;
height: 40px;
font-size: 13px;
}
.avatar-lg {
width: 48px;
height: 48px;
font-size: 16px;
}
/* =============================================================================
12. R7.8 - BUTTON
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sankalp-space-xs);
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
cursor: pointer;
border: 1px solid transparent;
transition: opacity 0.15s, background 0.15s, border-color 0.15s;
white-space: nowrap;
}
/* Primary - brand green fill */
.btn-primary {
background: var(--sankalp-brand);
color: var(--sankalp-surface);
border-color: var(--sankalp-brand);
}
.btn-primary:hover:not(:disabled) {
background: var(--sankalp-brand-dark);
border-color: var(--sankalp-brand-dark);
}
/* Secondary - outlined brand */
.btn-secondary {
background: transparent;
color: var(--sankalp-brand);
border-color: var(--sankalp-brand);
}
.btn-secondary:hover:not(:disabled) {
background: var(--sankalp-brand-light);
}
/* Destructive - red fill */
.btn-destructive {
background: var(--sankalp-risk-red);
color: var(--sankalp-surface);
border-color: var(--sankalp-risk-red);
}
.btn-destructive:hover:not(:disabled) {
opacity: 0.85;
}
/* Ghost - no border, no background */
.btn-ghost {
background: transparent;
color: var(--sankalp-brand);
border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
background: var(--sankalp-brand-light);
}
/* Disabled state - applies to all variants */
.btn:disabled,
.btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* =============================================================================
13. R7.9 - FAB (FLOATING ACTION BUTTON)
============================================================================= */
.fab {
position: fixed;
bottom: 72px;
right: 16px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--sankalp-brand);
color: var(--sankalp-surface);
font-size: 24px;
font-weight: 300;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
cursor: pointer;
border: none;
z-index: 100;
transition: background 0.15s, box-shadow 0.15s;
}
.fab:hover {
background: var(--sankalp-brand-dark);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.fab:active {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* =============================================================================
14. R7.10 - FAMILY ENGAGEMENT CHIP
============================================================================= */
.engagement-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
/* High engagement: score >= 70 */
.engagement-high {
background: var(--sankalp-risk-green-bg);
color: var(--sankalp-risk-green);
}
/* Medium engagement: score 40-69 */
.engagement-medium {
background: var(--sankalp-risk-yellow-bg);
color: var(--sankalp-risk-yellow);
}
/* Low engagement: score < 40 */
.engagement-low {
background: var(--sankalp-risk-red-bg);
color: var(--sankalp-risk-red);
}
/* =============================================================================
15. R7.11 - VOICE PLAY BUTTON
============================================================================= */
.voice-player {
display: inline-flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: 8px 12px;
border-radius: 24px;
background: var(--sankalp-surface-secondary);
border: 1px solid var(--sankalp-border);
}
.voice-player.voice-unavailable {
opacity: 0.5;
pointer-events: none;
}
.voice-play-btn {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: var(--sankalp-brand);
color: var(--sankalp-surface);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.voice-play-btn:hover {
background: var(--sankalp-brand-dark);
}
.voice-play-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.voice-waveform {
display: flex;
align-items: center;
gap: 2px;
height: 20px;
}
.voice-waveform .bar {
width: 3px;
background: var(--sankalp-text-secondary);
border-radius: 2px;
height: var(--bar-h, 8px);
transition: height 0.2s;
}
.voice-player.playing .voice-waveform .bar {
animation: voice-waveform-pulse 0.8s ease-in-out infinite alternate;
}
.voice-player.playing .voice-waveform .bar:nth-child(2) { animation-delay: 0.1s; }
.voice-player.playing .voice-waveform .bar:nth-child(3) { animation-delay: 0.2s; }
.voice-player.playing .voice-waveform .bar:nth-child(4) { animation-delay: 0.3s; }
.voice-player.playing .voice-waveform .bar:nth-child(5) { animation-delay: 0.4s; }
.voice-player.playing .voice-waveform .bar:nth-child(6) { animation-delay: 0.5s; }
@keyframes voice-waveform-pulse {
0% { transform: scaleY(0.4); }
100% { transform: scaleY(1.2); }
}
.voice-duration {
font-size: 12px;
color: var(--sankalp-text-secondary);
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.voice-player.playing .voice-waveform .bar {
animation: none;
}
}
/* =============================================================================
16. MOBILE SHELL CSS - R4.1, R4.2, R4.3
============================================================================= */
/* App header - sticky within the 360px mobile frame */
.app-header {
position: sticky;
top: 0;
width: 100%;
height: 56px;
background: var(--sankalp-brand);
color: var(--sankalp-surface);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--sankalp-space-md);
z-index: 200;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
flex-shrink: 0;
}
/* Phone frame: grey page background + shadow so 360px body looks like a device */
@media (min-width: 400px) {
html {
background: var(--sankalp-surface-secondary);
overflow-x: hidden;
}
body {
box-shadow: 0 0 0 1px var(--sankalp-border), 0 8px 32px rgba(0,0,0,0.12);
overflow-x: hidden;
}
}
.app-header .header-title {
font-size: 16px;
font-weight: 600;
color: var(--sankalp-surface);
}
.app-header .header-left,
.app-header .header-right {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
}
/* Bottom tab bar - fixed, constrained to 360px mobile frame */
.bottom-tabs {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 360px;
max-width: 360px;
height: 56px;
background: var(--sankalp-surface);
border-top: 1px solid var(--sankalp-border);
display: flex;
align-items: stretch;
z-index: 200;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 44px;
min-height: 44px;
padding: 4px 0;
cursor: pointer;
color: var(--sankalp-text-secondary);
font-size: 10px;
font-weight: 500;
transition: color 0.15s;
border: none;
background: none;
text-decoration: none;
}
.tab-item .tab-icon {
font-size: 20px;
line-height: 1;
}
.tab-item:hover {
color: var(--sankalp-brand);
}
.tab-item.active {
color: var(--sankalp-brand);
}
/* Main content area - only bottom padding to clear fixed tab bar */
.mobile-main {
padding-top: 0;
padding-bottom: 56px;
min-height: 100vh;
overflow-y: auto;
}
/* =============================================================================
17. WEB SHELL CSS - R5.1, R5.2, R5.3
============================================================================= */
/* Sidebar - 240px fixed left panel */
.sidebar {
width: 240px;
flex-shrink: 0;
background: var(--sankalp-surface);
border-right: 1px solid var(--sankalp-border);
display: flex;
flex-direction: column;
height: 100vh;
position: sticky;
top: 0;
overflow-y: auto;
}
.sidebar-logo {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: var(--sankalp-space-md);
border-bottom: 1px solid var(--sankalp-border);
font-size: 16px;
font-weight: 700;
color: var(--sankalp-brand);
}
.sidebar-nav {
flex: 1;
padding: var(--sankalp-space-sm) 0;
}
.nav-item {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
height: 40px;
padding: 0 var(--sankalp-space-md);
font-size: 14px;
font-weight: 500;
color: var(--sankalp-text-secondary);
cursor: pointer;
border-left: 3px solid transparent;
transition: background 0.15s, color 0.15s;
text-decoration: none;
}
.nav-item:hover {
background: var(--sankalp-brand-light);
color: var(--sankalp-text-primary);
}
.nav-item.active {
color: var(--sankalp-brand);
border-left-color: var(--sankalp-brand);
background: var(--sankalp-brand-light);
}
.nav-item .nav-icon {
font-size: 18px;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.sidebar-footer {
padding: var(--sankalp-space-md);
border-top: 1px solid var(--sankalp-border);
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
}
.sidebar-footer .user-info {
flex: 1;
min-width: 0;
}
.sidebar-footer .user-name {
font-size: 13px;
font-weight: 600;
color: var(--sankalp-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-footer .user-role {
font-size: 11px;
color: var(--sankalp-text-secondary);
}
/* Top bar - 56px fixed top, right of sidebar */
.top-bar {
height: 56px;
background: var(--sankalp-surface);
border-bottom: 1px solid var(--sankalp-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--sankalp-space-lg);
flex-shrink: 0;
}
.top-bar .page-title {
font-size: 16px;
font-weight: 600;
color: var(--sankalp-text-primary);
}
.top-bar .top-bar-right {
display: flex;
align-items: center;
gap: var(--sankalp-space-md);
}
/* =============================================================================
18. WHATSAPP SIMULATOR CSS - R6.1, R6.2, R6.3, R6.5
============================================================================= */
/* Outer wrapper - fixed 360×640px phone frame, centred on page */
.wa-container {
width: 360px;
height: 640px;
margin: auto;
display: flex;
flex-direction: column;
background: var(--wa-wallpaper);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
border-radius: 8px;
position: relative;
overflow: hidden;
}
/* WA Header */
.wa-header {
height: 56px;
background: var(--wa-header);
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: 0 var(--sankalp-space-md);
flex-shrink: 0;
color: var(--sankalp-surface);
}
.wa-header .wa-back {
font-size: 20px;
opacity: 0.9;
cursor: pointer;
}
.wa-header .wa-contact-info {
flex: 1;
min-width: 0;
}
.wa-header .wa-contact-name {
font-size: 15px;
font-weight: 600;
color: var(--sankalp-surface);
display: flex;
align-items: center;
gap: 4px;
}
.wa-header .wa-contact-status {
font-size: 12px;
opacity: 0.85;
}
.wa-header .wa-actions {
display: flex;
align-items: center;
gap: var(--sankalp-space-md);
font-size: 20px;
opacity: 0.9;
}
/* Verified business badge - green checkmark SVG inline */
.wa-verified-badge {
display: inline-flex;
align-items: center;
color: var(--sankalp-risk-green);
font-size: 14px;
}
/* Conversation area - scrollable */
.wa-conversation {
flex: 1;
overflow-y: auto;
padding: var(--sankalp-space-sm) var(--sankalp-space-sm);
display: flex;
flex-direction: column;
gap: 4px;
}
/* Base bubble */
.wa-bubble {
max-width: 80%;
padding: 6px 10px 18px;
border-radius: 8px;
font-size: 14px;
line-height: 1.45;
position: relative;
word-break: break-word;
}
/* Incoming bubble - left aligned, white */
.wa-incoming {
align-self: flex-start;
background: var(--wa-bubble-in);
border-radius: 0 8px 8px 8px;
color: var(--sankalp-text-primary);
}
/* Outgoing bubble - right aligned, green */
.wa-outgoing {
align-self: flex-end;
background: var(--wa-bubble-out);
border-radius: 8px 0 8px 8px;
color: var(--sankalp-text-primary);
}
/* Timestamp inside bubble */
.wa-bubble .wa-time {
position: absolute;
bottom: 4px;
right: 8px;
font-size: 10px;
color: var(--sankalp-text-secondary);
display: flex;
align-items: center;
gap: 2px;
}
/* Tick indicators */
.wa-tick {
font-size: 12px;
color: var(--sankalp-text-secondary);
}
.wa-tick.wa-tick-read {
color: var(--wa-tick-blue);
}
/* Image bubble */
.wa-bubble-image {
padding: 4px 4px 18px;
}
.wa-bubble-image img {
width: 100%;
border-radius: 6px;
display: block;
}
.wa-bubble-image .wa-caption {
padding: 4px 6px 0;
font-size: 13px;
}
/* Document stub */
.wa-document {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: 8px 10px 20px;
min-width: 200px;
}
.wa-document .wa-doc-icon {
font-size: 28px;
flex-shrink: 0;
}
.wa-document .wa-doc-info {
flex: 1;
min-width: 0;
}
.wa-document .wa-doc-name {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wa-document .wa-doc-size {
font-size: 11px;
color: var(--sankalp-text-secondary);
}
/* Voice note */
.wa-voice {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: 8px 10px 20px;
min-width: 180px;
}
.wa-voice .wa-voice-play {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--wa-header);
color: var(--sankalp-surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
cursor: pointer;
}
.wa-voice .wa-voice-waveform {
flex: 1;
display: flex;
align-items: center;
gap: 2px;
height: 24px;
}
.wa-voice .wa-voice-waveform .bar {
width: 3px;
background: var(--sankalp-text-secondary);
border-radius: 2px;
height: var(--bar-h, 8px);
}
.wa-voice .wa-voice-duration {
font-size: 11px;
color: var(--sankalp-text-secondary);
white-space: nowrap;
}
/* Location pin */
.wa-location {
padding: 4px 4px 20px;
}
.wa-location .wa-map-placeholder {
width: 100%;
height: 120px;
background: var(--sankalp-surface-secondary);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: var(--sankalp-text-secondary);
}
.wa-location .wa-location-label {
padding: 4px 6px 0;
font-size: 13px;
color: var(--wa-header);
font-weight: 500;
}
/* List-button message */
.wa-list-message {
padding: 8px 10px 8px;
min-width: 220px;
}
.wa-list-message .wa-list-title {
font-size: 14px;
font-weight: 600;
margin-bottom: var(--sankalp-space-sm);
}
.wa-list-message .wa-list-divider {
height: 1px;
background: var(--sankalp-border);
margin: var(--sankalp-space-xs) 0;
}
.wa-list-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 0;
font-size: 14px;
color: var(--wa-header);
font-weight: 500;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.wa-list-btn:hover {
opacity: 0.75;
}
/* Reply-button message */
.wa-reply-message {
padding: 4px 10px 20px;
min-width: 220px;
}
.wa-quoted {
border-left: 3px solid var(--wa-header);
background: rgba(0, 0, 0, 0.05);
border-radius: 0 4px 4px 0;
padding: 4px 8px;
margin-bottom: var(--sankalp-space-sm);
font-size: 12px;
color: var(--sankalp-text-secondary);
}
.wa-reply-buttons {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: var(--sankalp-space-sm);
}
.wa-reply-btn {
display: block;
width: 100%;
padding: 8px;
text-align: center;
font-size: 14px;
color: var(--wa-header);
font-weight: 500;
border: 1px solid var(--sankalp-border);
border-radius: 6px;
background: var(--sankalp-surface);
cursor: pointer;
}
.wa-reply-btn:hover {
background: var(--sankalp-surface-secondary);
}
/* Carousel */
.wa-carousel {
overflow-x: auto;
display: flex;
gap: var(--sankalp-space-sm);
padding: 4px 4px 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.wa-carousel::-webkit-scrollbar {
height: 4px;
}
.wa-carousel::-webkit-scrollbar-track {
background: transparent;
}
.wa-carousel::-webkit-scrollbar-thumb {
background: var(--sankalp-border);
border-radius: 2px;
}
.wa-carousel-card {
flex-shrink: 0;
width: 200px;
border-radius: 8px;
overflow: hidden;
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-border);
scroll-snap-align: start;
}
.wa-carousel-card img {
width: 100%;
height: 100px;
object-fit: cover;
}
.wa-carousel-card .wa-card-body {
padding: var(--sankalp-space-sm);
}
.wa-carousel-card .wa-card-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
}
.wa-carousel-card .wa-card-btn {
display: block;
width: 100%;
padding: 6px;
text-align: center;
font-size: 13px;
color: var(--wa-header);
font-weight: 500;
border: 1px solid var(--sankalp-border);
border-radius: 4px;
background: none;
cursor: pointer;
margin-top: 4px;
}
/* Typing indicator */
.wa-typing {
display: flex;
align-items: center;
gap: 4px;
padding: 10px 14px 10px;
min-width: 60px;
}
.wa-typing .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sankalp-text-secondary);
animation: wa-bounce 1.2s infinite ease-in-out;
}
.wa-typing .dot:nth-child(1) {
animation-delay: 0s;
}
.wa-typing .dot:nth-child(2) {
animation-delay: 0.2s;
}
.wa-typing .dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes wa-bounce {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.5;
}
30% {
transform: translateY(-5px);
opacity: 1;
}
}
/* Input bar - decorative, no real input */
.wa-input-bar {
height: 56px;
background: var(--wa-input-bar);
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: 0 var(--sankalp-space-sm);
flex-shrink: 0;
border-top: 1px solid var(--sankalp-border);
}
.wa-input-bar .wa-emoji-btn {
font-size: 22px;
cursor: default;
opacity: 0.7;
}
.wa-input-bar .wa-input-field {
flex: 1;
height: 36px;
background: var(--sankalp-surface);
border-radius: 18px;
padding: 0 var(--sankalp-space-md);
font-size: 14px;
color: var(--sankalp-text-secondary);
display: flex;
align-items: center;
pointer-events: none;
user-select: none;
}
.wa-input-bar .wa-mic-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--wa-header);
color: var(--sankalp-surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: default;
flex-shrink: 0;
}
/* Date separator in conversation */
.wa-date-separator {
display: flex;
align-items: center;
justify-content: center;
margin: var(--sankalp-space-sm) 0;
}
.wa-date-separator span {
background: rgba(0, 0, 0, 0.12);
color: var(--sankalp-text-primary);
font-size: 11px;
padding: 3px 10px;
border-radius: 999px;
}
/* =============================================================================
19. SHOWCASE PAGE UTILITIES
============================================================================= */
/* Section wrapper for showcase page */
.showcase-section {
margin-bottom: var(--sankalp-space-xl);
}
.showcase-section h2 {
font-size: 16px;
font-weight: 700;
color: var(--sankalp-text-primary);
margin-bottom: var(--sankalp-space-md);
padding-bottom: var(--sankalp-space-xs);
border-bottom: 2px solid var(--sankalp-brand);
}kalp-space-xs);
border-bottom: 2px solid var(--sankalp-brand);
}
.showcase-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sankalp-space-md);
margin-bottom: var(--sankalp-space-sm);
}
/* Token swatch for design token showcase */
.token-swatch {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
font-size: 12px;
}
.token-swatch .swatch-box {
width: 32px;
height: 32px;
border-radius: 4px;
border: 1px solid var(--sankalp-border);
flex-shrink: 0;
}
.token-swatch .swatch-name {
font-family: monospace;
color: var(--sankalp-text-secondary);
}
/* =============================================================================
20. INDEX PAGE UTILITIES
============================================================================= */
/* Link card for index.html shell demos */
.demo-card {
display: block;
padding: var(--sankalp-space-md);
border: 1px solid var(--sankalp-border);
border-radius: 8px;
background: var(--sankalp-surface);
text-decoration: none;
color: var(--sankalp-text-primary);
transition: border-color 0.15s, box-shadow 0.15s;
}
.demo-card:hover {
border-color: var(--sankalp-brand);
box-shadow: 0 2px 8px rgba(19, 136, 8, 0.12);
}
.demo-card .demo-card-title {
font-size: 15px;
font-weight: 600;
color: var(--sankalp-brand);
margin-bottom: 4px;
}
.demo-card .demo-card-desc {
font-size: 13px;
color: var(--sankalp-text-secondary);
}
/* Greyed-out placeholder rows for Phase 1+ screens */
.screen-placeholder {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* =============================================================================
21. RESPONSIVE HELPERS
============================================================================= */
/* Mobile-only: hide on web */
@media (min-width: 481px) {
.mobile-only {
display: none !important;
}
}
/* Web-only: hide on mobile */
@media (max-width: 480px) {
.web-only {
display: none !important;
}
}
/* =============================================================================
22. PRINT RESET
============================================================================= */
@media print {
.fab,
.bottom-tabs,
.presenter-overlay,
#case-switcher {
display: none !important;
}
}
/* =============================================================================
23. PHASE 1 — DEMO NAVIGATION (fixed bottom-right)
Requirements: 16.1, 16.2, 16.3, 16.4
============================================================================= */
/* Fixed navigation bar — bottom-right, above presenter overlay (z-index 9999) */
.demo-nav {
position: fixed;
bottom: 48px;
right: var(--sankalp-space-md);
z-index: 9998;
display: inline-flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: 6px 12px;
border-radius: 999px;
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
font-size: 13px;
}
/* Navigation buttons (prev/next) */
.demo-nav-btn {
display: inline-flex;
align-items: center;
gap: var(--sankalp-space-xs);
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--sankalp-brand);
text-decoration: none;
transition: background 0.15s;
min-height: 32px;
}
.demo-nav-btn:hover {
background: var(--sankalp-brand-light);
}
/* Disabled state for first/last screen links */
.demo-nav-btn[aria-disabled="true"],
.demo-nav-btn.disabled {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
/* Tier 2 links (not yet built) */
.demo-nav-btn.tier2 {
opacity: 0.4;
cursor: not-allowed;
}
/* Counter showing current position (e.g. "3 / 13") */
.demo-nav-counter {
font-size: 12px;
font-weight: 600;
color: var(--sankalp-text-secondary);
padding: 0 var(--sankalp-space-xs);
white-space: nowrap;
}
/* =============================================================================
24. PHASE 1 — HRP TRACE TIMELINE (vertical)
Requirements: 7.3, 7.4
============================================================================= */
/* Vertical timeline container */
.hrp-trace-timeline {
display: flex;
flex-direction: column;
gap: 0;
padding: var(--sankalp-space-md) 0;
position: relative;
}
/* Vertical line connecting visit cards */
.hrp-trace-timeline::before {
content: '';
position: absolute;
left: 15px;
top: var(--sankalp-space-md);
bottom: var(--sankalp-space-md);
width: 2px;
background: var(--sankalp-border);
}
/* Individual visit card in the timeline */
.visit-card {
position: relative;
margin-left: 36px;
padding: var(--sankalp-space-sm) var(--sankalp-space-md);
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-border);
border-radius: 8px;
margin-bottom: var(--sankalp-space-sm);
}
/* Timeline dot marker */
.visit-card::before {
content: '';
position: absolute;
left: -27px;
top: 14px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sankalp-brand);
border: 2px solid var(--sankalp-surface);
box-shadow: 0 0 0 2px var(--sankalp-border);
}
/* Red-flagged visit dot */
.visit-card.visit-red::before {
background: var(--sankalp-risk-red);
box-shadow: 0 0 0 2px var(--sankalp-risk-red-bg);
}
/* Yellow-flagged visit dot */
.visit-card.visit-yellow::before {
background: var(--sankalp-risk-yellow);
box-shadow: 0 0 0 2px var(--sankalp-risk-yellow-bg);
}
/* Green-flagged visit dot */
.visit-card.visit-green::before {
background: var(--sankalp-risk-green);
box-shadow: 0 0 0 2px var(--sankalp-risk-green-bg);
}
/* Visit card header (visit name + date) */
.visit-card .visit-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sankalp-space-xs);
}
.visit-card .visit-name {
font-size: 13px;
font-weight: 600;
color: var(--sankalp-text-primary);
}
.visit-card .visit-date {
font-size: 11px;
color: var(--sankalp-text-secondary);
}
/* Visit card body (factors list) */
.visit-card .visit-factors {
font-size: 12px;
color: var(--sankalp-text-secondary);
line-height: 1.5;
}
/* =============================================================================
25. PHASE 1 — FAN-OUT GRID (8-pane layout)
Requirements: 9.1, 9.2, 17.2
============================================================================= */
/* 8-pane CSS Grid — 4 columns x 2 rows on desktop, 2 columns on mobile */
.fan-out-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sankalp-space-md);
padding: var(--sankalp-space-lg);
width: 100%;
}
@media (max-width: 768px) {
.fan-out-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Individual pane in the fan-out grid */
.fan-out-pane {
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-border);
border-radius: 8px;
padding: var(--sankalp-space-md);
display: flex;
flex-direction: column;
gap: var(--sankalp-space-sm);
opacity: 0;
transform: translateY(12px);
animation: fan-out-entrance 0.4s ease-out forwards;
}
/* Staggered entrance delays — 250ms apart, ~2s total for 8 panes */
.fan-out-pane:nth-child(1) { animation-delay: 0ms; }
.fan-out-pane:nth-child(2) { animation-delay: 250ms; }
.fan-out-pane:nth-child(3) { animation-delay: 500ms; }
.fan-out-pane:nth-child(4) { animation-delay: 750ms; }
.fan-out-pane:nth-child(5) { animation-delay: 1000ms; }
.fan-out-pane:nth-child(6) { animation-delay: 1250ms; }
.fan-out-pane:nth-child(7) { animation-delay: 1500ms; }
.fan-out-pane:nth-child(8) { animation-delay: 1750ms; }
@keyframes fan-out-entrance {
0% {
opacity: 0;
transform: translateY(12px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Pane header (recipient name + role) */
.fan-out-pane .pane-header {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
}
.fan-out-pane .pane-name {
font-size: 13px;
font-weight: 600;
color: var(--sankalp-text-primary);
}
.fan-out-pane .pane-role {
font-size: 11px;
color: var(--sankalp-text-secondary);
}
/* Pane alert snippet */
.fan-out-pane .pane-snippet {
font-size: 12px;
color: var(--sankalp-text-secondary);
line-height: 1.4;
}
/* Channel indicator (WhatsApp / Mobile / Web) */
.fan-out-pane .pane-channel {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sankalp-brand);
}
/* =============================================================================
26. PHASE 1 — FLIP ANIMATION (GREEN to RED badge transition)
Requirements: 8.3, 17.3
============================================================================= */
/* 500ms scale pulse + colour transition for risk badge flip */
@keyframes flip-animation {
0% {
transform: scale(1);
}
30% {
transform: scale(1.3);
}
60% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
/* Applied to risk badge during GREEN to RED transition */
.risk-badge.flipping,
.risk-chip.flipping {
animation: flip-animation 500ms ease-in-out;
}
/* Transition for colour change during flip */
.risk-badge.flip-transition,
.risk-chip.flip-transition {
transition: background 500ms ease-in-out, color 500ms ease-in-out;
}
/* =============================================================================
27. PHASE 1 — MAP CONTAINER & ZOOM ANIMATION
Requirements: 1.1, 1.5, 17.1
============================================================================= */
/* Full-screen map container (standalone, no shell) */
.map-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: var(--sankalp-surface);
display: flex;
align-items: center;
justify-content: center;
}
/* Map SVG element with zoom animation */
.map-container .map-svg {
width: 100%;
height: 100%;
animation: map-zoom 4s ease-in-out forwards;
}
/* 4-second zoom animation: starts at full UP state, ends zoomed into Shrawasti */
@keyframes map-zoom {
0% {
transform: scale(1) translate(0, 0);
opacity: 0.8;
}
20% {
opacity: 1;
}
100% {
transform: scale(3.5) translate(-15%, -10%);
opacity: 1;
}
}
/* Shrawasti district highlight */
.map-container .district-highlight {
stroke: var(--sankalp-brand);
stroke-width: 2;
fill: var(--sankalp-brand-light);
opacity: 0;
animation: district-reveal 0.6s ease-out 3.4s forwards;
}
@keyframes district-reveal {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Map labels (state name, district name, tagline) */
.map-container .map-label {
position: absolute;
font-weight: 600;
color: var(--sankalp-text-primary);
text-align: center;
pointer-events: none;
}
.map-container .map-label-state {
top: var(--sankalp-space-lg);
left: 50%;
transform: translateX(-50%);
font-size: 20px;
opacity: 0;
animation: label-fade-in 0.8s ease-out 0.5s forwards;
}
.map-container .map-label-district {
font-size: 16px;
color: var(--sankalp-brand);
opacity: 0;
animation: label-fade-in 0.8s ease-out 3.5s forwards;
}
@keyframes label-fade-in {
0% {
opacity: 0;
transform: translateX(-50%) translateY(8px);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* Pin marker for Shrawasti */
.map-container .map-pin {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50% 50% 50% 0;
background: var(--sankalp-risk-red);
transform: rotate(-45deg);
opacity: 0;
animation: pin-drop 0.4s ease-out 3.8s forwards;
}
@keyframes pin-drop {
0% {
opacity: 0;
transform: rotate(-45deg) translateY(-20px);
}
100% {
opacity: 1;
transform: rotate(-45deg) translateY(0);
}
}
/* "Next" navigation affordance on map screen */
.map-container .map-next {
position: absolute;
bottom: var(--sankalp-space-xl);
right: var(--sankalp-space-xl);
font-size: 14px;
font-weight: 500;
color: var(--sankalp-brand);
text-decoration: none;
opacity: 0;
animation: label-fade-in 0.6s ease-out 4.2s forwards;
cursor: pointer;
}
.map-container .map-next:hover {
color: var(--sankalp-brand-dark);
}
/* =============================================================================
28. PHASE 1 — ACCESSIBILITY: REDUCED MOTION
Requirements: 17.6
============================================================================= */
@media (prefers-reduced-motion: reduce) {
/* Disable all Phase 1 animations */
.voice-player.playing .voice-waveform .bar,
.fan-out-pane,
.map-container .map-svg,
.map-container .district-highlight,
.map-container .map-label-state,
.map-container .map-label-district,
.map-container .map-pin,
.map-container .map-next,
.risk-badge.flipping,
.risk-chip.flipping {
animation: none !important;
}
/* Remove transitions */
.risk-badge.flip-transition,
.risk-chip.flip-transition {
transition: none !important;
}
/* Make fan-out panes visible immediately (no entrance animation) */
.fan-out-pane {
opacity: 1 !important;
transform: none !important;
}
/* Make map elements visible immediately */
.map-container .district-highlight,
.map-container .map-label-state,
.map-container .map-label-district,
.map-container .map-pin,
.map-container .map-next {
opacity: 1 !important;
transform: none !important;
}
.map-container .map-svg {
transform: scale(3.5) translate(-15%, -10%) !important;
opacity: 1 !important;
}
/* Disable Phase 0 animations too */
.wa-typing .dot {
animation: none !important;
}
}
/* =============================================================================
23. PHASE 1 — DEMO NAVIGATION (fixed bottom-right)
Requirements: 16.1, 16.2, 16.3, 16.4
============================================================================= */
.demo-nav {
position: fixed;
bottom: 48px;
right: var(--sankalp-space-md);
z-index: 9998;
display: inline-flex;
align-items: center;
gap: var(--sankalp-space-sm);
padding: 6px 12px;
border-radius: 999px;
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-border);
box-shadow: 0 2px 8px var(--sankalp-shadow-12, rgba(0,0,0,0.12));
font-size: 13px;
}
.demo-nav-btn {
display: inline-flex;
align-items: center;
gap: var(--sankalp-space-xs);
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--sankalp-brand);
text-decoration: none;
transition: background 0.15s;
min-height: 32px;
}
.demo-nav-btn:hover {
background: var(--sankalp-brand-light);
}
.demo-nav-btn.tier2 {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.demo-nav-counter {
font-size: 12px;
font-weight: 600;
color: var(--sankalp-text-secondary);
padding: 0 var(--sankalp-space-xs);
white-space: nowrap;
}
/* =============================================================================
24. PHASE 1 — HRP TRACE TIMELINE
Requirements: 7.3, 7.4
============================================================================= */
.hrp-trace-timeline {
position: relative;
padding-left: 24px;
}
.hrp-trace-timeline::before {
content: '';
position: absolute;
left: 8px;
top: 12px;
bottom: 12px;
width: 2px;
background: var(--sankalp-border);
}
.visit-card {
position: relative;
margin-bottom: 16px;
padding: 12px;
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-border);
border-radius: 8px;
}
.visit-card::before {
content: '';
position: absolute;
left: -20px;
top: 16px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--sankalp-border);
background: var(--sankalp-surface);
}
.visit-card.flag-red::before,
.visit-card.visit-red::before {
border-color: var(--sankalp-risk-red);
background: var(--sankalp-risk-red);
}
.visit-card.flag-yellow::before,
.visit-card.visit-yellow::before {
border-color: var(--sankalp-risk-yellow);
background: var(--sankalp-risk-yellow);
}
.visit-card.flag-green::before,
.visit-card.visit-green::before {
border-color: var(--sankalp-risk-green);
background: var(--sankalp-risk-green);
}
.visit-card .visit-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.visit-card .visit-name {
font-size: 13px;
font-weight: 600;
color: var(--sankalp-text-primary);
}
.visit-card .visit-date {
font-size: 11px;
color: var(--sankalp-text-secondary);
}
.visit-card .visit-factors {
font-size: 12px;
color: var(--sankalp-text-secondary);
line-height: 1.5;
margin-top: 4px;
}
.visit-label {
font-size: 13px;
font-weight: 600;
color: var(--sankalp-text-primary);
}
/* =============================================================================
25. PHASE 1 — FAN-OUT GRID (8-pane)
Requirements: 9.1, 9.2, 17.2
============================================================================= */
.fan-out-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sankalp-space-md);
padding: var(--sankalp-space-lg);
width: 100%;
}
@media (max-width: 768px) {
.fan-out-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.fan-out-pane {
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-border);
border-radius: 8px;
padding: var(--sankalp-space-md);
display: flex;
flex-direction: column;
gap: var(--sankalp-space-sm);
opacity: 0;
transform: translateY(12px);
animation: fan-out-entrance 0.4s ease-out forwards;
}
.fan-out-pane:nth-child(1) { animation-delay: 0ms; }
.fan-out-pane:nth-child(2) { animation-delay: 250ms; }
.fan-out-pane:nth-child(3) { animation-delay: 500ms; }
.fan-out-pane:nth-child(4) { animation-delay: 750ms; }
.fan-out-pane:nth-child(5) { animation-delay: 1000ms; }
.fan-out-pane:nth-child(6) { animation-delay: 1250ms; }
.fan-out-pane:nth-child(7) { animation-delay: 1500ms; }
.fan-out-pane:nth-child(8) { animation-delay: 1750ms; }
@keyframes fan-out-entrance {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
.fan-out-pane .pane-header {
display: flex;
align-items: center;
gap: var(--sankalp-space-sm);
}
.fan-out-pane .pane-name {
font-size: 13px;
font-weight: 600;
color: var(--sankalp-text-primary);
}
.fan-out-pane .pane-role {
font-size: 11px;
color: var(--sankalp-text-secondary);
}
/* =============================================================================
26. PHASE 1 — FLIP ANIMATION (GREEN→RED badge)
Requirements: 8.3, 17.3
============================================================================= */
@keyframes flip-animation {
0% { transform: scale(1); }
30% { transform: scale(1.3); }
60% { transform: scale(0.9); }
100% { transform: scale(1); }
}
.risk-badge.flipping,
.risk-chip.flipping {
animation: flip-animation 500ms ease-in-out;
}
.risk-badge.flip-transition,
.risk-chip.flip-transition {
transition: background 500ms ease-in-out, color 500ms ease-in-out;
}
/* =============================================================================
27. PHASE 1 — MAP CONTAINER & ZOOM ANIMATION
Requirements: 1.1, 1.5, 17.1
============================================================================= */
.map-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: var(--sankalp-surface);
display: flex;
align-items: center;
justify-content: center;
}
.map-container .map-svg {
width: 100%;
height: 100%;
animation: map-zoom 4s ease-in-out forwards;
}
@keyframes map-zoom {
0% { transform: scale(1) translate(0, 0); opacity: 0.8; }
20% { opacity: 1; }
100% { transform: scale(3.5) translate(-15%, -10%); opacity: 1; }
}
.map-container .district-highlight {
stroke: var(--sankalp-brand);
stroke-width: 2;
fill: var(--sankalp-brand-light);
opacity: 0;
animation: district-reveal 0.6s ease-out 3.4s forwards;
}
@keyframes district-reveal {
0% { opacity: 0; }
100% { opacity: 1; }
}
.map-container .map-label {
position: absolute;
font-weight: 600;
color: var(--sankalp-text-primary);
text-align: center;
pointer-events: none;
}
.map-container .map-label-state {
top: var(--sankalp-space-lg);
left: 50%;
transform: translateX(-50%);
font-size: 20px;
opacity: 0;
animation: label-fade-in 0.8s ease-out 0.5s forwards;
}
.map-container .map-label-district {
font-size: 16px;
color: var(--sankalp-brand);
opacity: 0;
animation: label-fade-in 0.8s ease-out 3.5s forwards;
}
@keyframes label-fade-in {
0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.map-container .map-pin {
position: absolute;
width: 24px;
height: 24px;
border-radius: 50% 50% 50% 0;
background: var(--sankalp-risk-red);
transform: rotate(-45deg);
opacity: 0;
animation: pin-drop 0.4s ease-out 3.8s forwards;
}
@keyframes pin-drop {
0% { opacity: 0; transform: rotate(-45deg) translateY(-20px); }
100% { opacity: 1; transform: rotate(-45deg) translateY(0); }
}
.map-container .map-next {
position: absolute;
bottom: var(--sankalp-space-xl);
right: var(--sankalp-space-xl);
font-size: 14px;
font-weight: 500;
color: var(--sankalp-brand);
background: var(--sankalp-surface);
border: 1px solid var(--sankalp-brand);
border-radius: 6px;
padding: 8px 16px;
text-decoration: none;
opacity: 0;
animation: label-fade-in 0.6s ease-out 4.2s forwards;
cursor: pointer;
}
.map-container .map-next:hover {
background: var(--sankalp-brand-light);
}
/* =============================================================================
28. PHASE 1 — RISK CHIP DENSITY ALIASES (for War Room district list)
============================================================================= */
/* Alias: risk-high → yellow (6–9 cases) */
.risk-chip.risk-high {
background: var(--sankalp-risk-yellow-bg);
color: var(--sankalp-risk-yellow);
}
/* Alias: risk-critical → red (10+ cases) */
.risk-chip.risk-critical {
background: var(--sankalp-risk-red-bg);
color: var(--sankalp-risk-red);
}
/* =============================================================================
29. PHASE 1 — REDUCED MOTION (global override)
Requirements: 17.6
============================================================================= */
@media (prefers-reduced-motion: reduce) {
.voice-player.playing .voice-waveform .bar,
.fan-out-pane,
.map-container .map-svg,
.map-container .district-highlight,
.map-container .map-label-state,
.map-container .map-label-district,
.map-container .map-pin,
.map-container .map-next,
.risk-badge.flipping,
.risk-chip.flipping {
animation: none !important;
}
.risk-badge.flip-transition,
.risk-chip.flip-transition {
transition: none !important;
}
.fan-out-pane {
opacity: 1 !important;
transform: none !important;
}
.map-container .district-highlight,
.map-container .map-label-state,
.map-container .map-label-district,
.map-container .map-pin,
.map-container .map-next {
opacity: 1 !important;
transform: none !important;
}
.map-container .map-svg {
transform: scale(3.5) translate(-15%, -10%) !important;
opacity: 1 !important;
}
.wa-typing .dot {
animation: none !important;
}
}