/* ==========================================================================
   LooksApp - Production Chat App Styles
   WhatsApp-inspired layout with blue color scheme
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES - Design Tokens
   ========================================================================== */

:root {
    /* Light Theme Colors */
    --bg-primary: #FFFFFF;
    --bg-chat: #E8EFF5;
    --bg-chat-pattern: rgba(0, 0, 0, 0.04);
    --bg-header: #1F5C94;
    --bg-header-text: #FFFFFF;
    --bubble-outgoing: #D6E8FF;
    --bubble-incoming: #FFFFFF;
    --text-primary: #111B21;
    --text-secondary: #667781;
    --text-timestamp: rgba(0, 0, 0, 0.45);
    --text-header: #FFFFFF;
    --divider: #E9EDEF;
    --badge-unread: #3073AB;
    --badge-text: #FFFFFF;
    --accent: #1F5C94;
    --selfie-accent: #1F5C94;
    --interest-accent: #396E3E;
    --check-sent: rgba(0, 0, 0, 0.4);
    --check-read: #53BDEB;
    --typing-text: #3073AB;
    --input-bg: #FFFFFF;
    --input-border: #E9EDEF;
    --dropdown-bg: #FFFFFF;
    --dropdown-shadow: rgba(0, 0, 0, 0.15);
    --ripple: rgba(0, 0, 0, 0.05);

    /* Spacing System (8px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;

    /* Typography - WhatsApp uses Segoe UI / SF Pro / Roboto */
    --font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
    --font-xs: 11px;
    --font-sm: 14px;
    --font-md: 15px;
    --font-lg: 17px;
    --font-xl: 19px;
    --font-weight-normal: 450;
    --font-weight-medium: 550;
    --font-weight-bold: 650;
    --line-height-tight: 1.2;
    --line-height-normal: 1.35;

    /* Component Dimensions */
    --header-height: 56px;
    --chatlist-item-height: 72px;
    --avatar-size-list: 54px;
    --avatar-size-chat: 40px;
    --avatar-size-header: 40px;
    --input-bar-height: 60px;
    --bubble-max-width: 75%;
    --bubble-radius: 10px;
    --unread-badge-size: 20px;
    --min-touch-target: 44px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease-out;

    /* Spring animation timing */
    --photo-spring: linear(
        0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
        0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
        1.001
    );
}

@supports not (animation-timing-function: linear(0, 1)) {
    :root {
        --photo-spring: cubic-bezier(0.32, 0.72, 0, 1);
    }
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #111B21;
    --bg-chat: #0B141A;
    --bg-chat-pattern: rgba(255, 255, 255, 0.03);
    --bg-header: #1E3A5F;
    --bg-header-text: #E9EDEF;
    --bubble-outgoing: #1E3A5F;
    --bubble-incoming: #202C33;
    --text-primary: #E9EDEF;
    --text-secondary: #8696A0;
    --text-timestamp: rgba(255, 255, 255, 0.5);
    --text-header: #E9EDEF;
    --divider: #222D34;
    --badge-unread: #5C9AC7;
    --badge-text: #FFFFFF;
    --accent: #5C9AC7;
    --selfie-accent: #5C9AC7;
    --interest-accent: #72AD77;
    --check-sent: rgba(255, 255, 255, 0.5);
    --check-read: #64B5F6;
    --typing-text: #5C9AC7;
    --input-bg: #202C33;
    --input-border: #2A3942;
    --dropdown-bg: #233138;
    --dropdown-shadow: rgba(0, 0, 0, 0.3);
    --ripple: rgba(255, 255, 255, 0.05);
}

/* Dark mode wallpaper override */
[data-theme="dark"] .chat-messages {
    background-image: url("data:image/svg+xml,%3Csvg width='250' height='250' viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.06' stroke-width='1.2'%3E%3C!-- Circles --%3E%3Ccircle cx='25' cy='35' r='14'/%3E%3Ccircle cx='180' cy='25' r='10'/%3E%3Ccircle cx='95' cy='100' r='18'/%3E%3Ccircle cx='210' cy='120' r='12'/%3E%3Ccircle cx='50' cy='190' r='16'/%3E%3Ccircle cx='160' cy='200' r='11'/%3E%3Ccircle cx='130' cy='60' r='8'/%3E%3C!-- Squares --%3E%3Crect x='120' y='150' width='20' height='20' rx='3'/%3E%3Crect x='15' y='120' width='16' height='16' rx='2'/%3E%3Crect x='200' cy='170' width='22' height='22' rx='3'/%3E%3Crect x='70' y='220' width='14' height='14' rx='2'/%3E%3Crect x='230' y='50' width='12' height='12' rx='2'/%3E%3C!-- Triangles --%3E%3Cpath d='M65 25 L78 50 L52 50 Z'/%3E%3Cpath d='M220 75 L238 105 L202 105 Z'/%3E%3Cpath d='M30 80 L42 102 L18 102 Z'/%3E%3Cpath d='M140 135 L158 165 L122 165 Z'/%3E%3Cpath d='M105 215 L118 240 L92 240 Z'/%3E%3Cpath d='M185 230 L195 248 L175 248 Z'/%3E%3C!-- Diamonds --%3E%3Cpath d='M170 90 L182 108 L170 126 L158 108 Z'/%3E%3Cpath d='M85 65 L95 78 L85 91 L75 78 Z'/%3E%3Cpath d='M225 195 L235 208 L225 221 L215 208 Z'/%3E%3Cpath d='M40' y='145 L48 155 L40 165 L32 155 Z'/%3E%3C!-- Spirals --%3E%3Cpath d='M55 140 Q60 135 65 140 Q70 145 65 150 Q58 155 52 148 Q48 142 55 138'/%3E%3Cpath d='M195 145 Q202 138 210 145 Q218 152 210 160 Q200 168 192 158 Q186 150 195 143'/%3E%3Cpath d='M110 20 Q115 15 120 20 Q125 25 120 30 Q113 35 108 28 Q104 22 110 18'/%3E%3C!-- Wiggles --%3E%3Cpath d='M10 50 Q20 45 30 50 Q40 55 50 50 Q60 45 70 50'/%3E%3Cpath d='M150 5 Q160 0 170 5 Q180 10 190 5 Q200 0 210 5'/%3E%3Cpath d='M5 200 Q15 195 25 200 Q35 205 45 200'/%3E%3Cpath d='M240 130 Q245 125 250 130 Q245 135 240 130'/%3E%3C!-- Small hexagons --%3E%3Cpath d='M40 230 L48 224 L56 230 L56 242 L48 248 L40 242 Z'/%3E%3Cpath d='M145 85 L153 79 L161 85 L161 97 L153 103 L145 97 Z'/%3E%3C!-- Plus signs --%3E%3Cpath d='M235 25 L235 35 M230 30 L240 30'/%3E%3Cpath d='M75 175 L75 185 M70 180 L80 180'/%3E%3Cpath d='M15 165 L15 175 M10 170 L20 170'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   2. BASE RESET & TYPOGRAPHY
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: clip;
    overscroll-behavior: none;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-md);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   3. APP CONTAINER
   ========================================================================== */

.app-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: clip;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.header {
    height: var(--header-height);
    background-color: var(--bg-header);
    color: var(--text-header);
    display: flex;
    align-items: center;
    padding: 0 var(--space-sm);
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}

.header-title {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    flex: 1;
    padding-left: var(--space-sm);
}

/* Tab header — two equal halves */
.tab-half {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    opacity: 0.45;
    transition: opacity 200ms ease;
}

.tab-half.active {
    opacity: 1;
}

.tab-star-icon {
    width: 30px;
    height: 30px;
    color: var(--text-header);
    transition: color 200ms ease;
}

.tab-logo-icon {
    width: 26px;
    height: 26px;
    filter: brightness(0) invert(1);
    transition: filter 200ms ease;
}


/* Underline per tab half — 72% width centered, slightly inside header, soft color */
.tab-half-underline {
    position: absolute;
    bottom: 4px;
    left: 14%;
    width: 72%;
    height: 2.5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 300ms ease;
}

.tab-half.active .tab-half-underline {
    opacity: 1;
}


.header-back {
    width: var(--min-touch-target);
    height: var(--min-touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--transition-fast);
}

.header-back:active {
    background-color: rgba(255, 255, 255, 0.1);
}

.header-back svg {
    width: 24px;
    height: 24px;
    fill: var(--text-header);
}

/* Chat header with avatar */
.header-chat-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    margin-left: var(--space-sm);
}

.header-avatar {
    width: var(--avatar-size-header);
    height: var(--avatar-size-header);
    border-radius: 50%;
    object-fit: cover;
    margin-right: var(--space-md);
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Square avatar for Look chats */
.header-avatar.square-avatar {
    border-radius: 8px;
    border: 2px solid var(--selfie-accent, #4A8CB8);
}

/* Green border for interest Look avatar */
.header-avatar.square-avatar.interest-avatar {
    border-color: var(--interest-accent, #5A9E60);
}

.header-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.header-name {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-header);
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.header-name-input {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-header);
    background: var(--surface);
    border: 2px solid var(--primary);
    border-radius: 6px;
    padding: 4px 8px;
    flex: 1;
    min-width: 0;
    outline: none;
    line-height: 1.2;
}

.header-edit-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.header-edit-btn:hover {
    opacity: 1;
}

.header-edit-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--text-header);
}

.header-status {
    font-size: var(--font-xs);
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-header);
    line-height: 1.2;
}

.header-status.typing {
    opacity: 1;
}

.header-status.processing {
    opacity: 1;
    color: var(--accent);
    animation: pulse 2s ease-in-out infinite;
}

.header-status.error {
    opacity: 1;
    color: #f44336;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Menu button */
.header-menu-btn {
    width: var(--min-touch-target);
    height: var(--min-touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--transition-fast);
}

.header-menu-btn:active {
    background-color: rgba(255, 255, 255, 0.1);
}

.header-menu-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-header);
}

/* ==========================================================================
   5. DROPDOWN MENU
   ========================================================================== */

.dropdown-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background-color: transparent;
}

.dropdown-overlay.active {
    display: block;
}

.dropdown-menu {
    position: absolute;
    top: calc(var(--header-height) - 4px);
    right: 8px;
    background-color: var(--dropdown-bg);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26), 0 2px 10px rgba(0, 0, 0, 0.16);
    min-width: 200px;
    z-index: 201;
    opacity: 0;
    transform: scale(0.9) translateY(-8px);
    transform-origin: top right;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow: hidden;
}

.dropdown-menu.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 100ms ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item:active {
    background-color: var(--ripple);
}

.dropdown-item svg {
    width: 22px;
    height: 22px;
    margin-right: 16px;
    fill: var(--text-secondary);
    flex-shrink: 0;
}

.dropdown-item span {
    flex: 1;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--divider);
    margin: 8px 0;
}

/* ==========================================================================
   6. CHAT LIST VIEW
   ========================================================================== */

.chatlist-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.chatlist-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 8px;
    padding-bottom: 330px; /* Space for composer panel so last items aren't hidden */
}

/* Chat list item - NO DIVIDER LINES */
.chatlist-item {
    height: var(--chatlist-item-height);
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg) 0 6px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
    margin-bottom: 2px;
}

.chatlist-item:active {
    background-color: var(--ripple);
}

/* Avatar */
.chatlist-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: var(--space-md);
}

/* Content area */
.chatlist-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chatlist-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.chatlist-name-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-right: var(--space-sm);
}

.chatlist-name {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unread indicator is the badge only — no bold name */

.chatlist-look-date {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    opacity: 0.8;
    margin-top: 2px;
}

.chatlist-time-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Right column: time row + icon stacked vertically, aligned top-right */
.chatlist-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: flex-start;
    flex-shrink: 0;
    margin-left: 8px;
    padding-top: 8px;
    gap: 4px;
}

/* Time row: time + pin + mute icons inline */
.chatlist-time-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.chatlist-time {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Unread indicator is the badge only — no colored time */

.chatlist-pin-icon {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    opacity: 0.55;
}

.chatlist-pin-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Latest selfie pin stays blue */
.chatlist-pin-icon.selfie-pin {
    color: var(--selfie-accent, #4A8CB8);
    opacity: 0.8;
}

/* Message preview row */
.chatlist-preview-row {
    display: flex;
    align-items: center;
    margin-top: 3px;
}

.chatlist-preview {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: var(--space-sm);
}

/* Checkmarks tighter together */
.chatlist-preview .check {
    color: var(--check-sent);
    letter-spacing: -3px;
    margin-right: 4px;
}

.chatlist-preview .check.read {
    color: var(--check-read);
}

.chatlist-preview.typing {
    color: var(--typing-text);
    font-style: italic;
}

.chatlist-preview .preview-sender {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* Unread badge */
.chatlist-badge {
    min-width: var(--unread-badge-size);
    height: var(--unread-badge-size);
    border-radius: calc(var(--unread-badge-size) / 2);
    background-color: var(--badge-unread);
    color: var(--badge-text);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* ==========================================================================
   7. CHAT VIEW (Slides in from right)
   ========================================================================== */

.chat-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-normal), visibility 0s var(--transition-normal);
    z-index: 150;
    overflow: hidden;
    visibility: hidden;
}

.chat-view.active {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--transition-normal), visibility 0s 0s;
}

/* Messages container with geometric wallpaper pattern */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background-color: var(--bg-chat);
    background-image: url("data:image/svg+xml,%3Csvg width='250' height='250' viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.08' stroke-width='1.2'%3E%3C!-- Circles --%3E%3Ccircle cx='25' cy='35' r='14'/%3E%3Ccircle cx='180' cy='25' r='10'/%3E%3Ccircle cx='95' cy='100' r='18'/%3E%3Ccircle cx='210' cy='120' r='12'/%3E%3Ccircle cx='50' cy='190' r='16'/%3E%3Ccircle cx='160' cy='200' r='11'/%3E%3Ccircle cx='130' cy='60' r='8'/%3E%3C!-- Squares --%3E%3Crect x='120' y='150' width='20' height='20' rx='3'/%3E%3Crect x='15' y='120' width='16' height='16' rx='2'/%3E%3Crect x='200' cy='170' width='22' height='22' rx='3'/%3E%3Crect x='70' y='220' width='14' height='14' rx='2'/%3E%3Crect x='230' y='50' width='12' height='12' rx='2'/%3E%3C!-- Triangles --%3E%3Cpath d='M65 25 L78 50 L52 50 Z'/%3E%3Cpath d='M220 75 L238 105 L202 105 Z'/%3E%3Cpath d='M30 80 L42 102 L18 102 Z'/%3E%3Cpath d='M140 135 L158 165 L122 165 Z'/%3E%3Cpath d='M105 215 L118 240 L92 240 Z'/%3E%3Cpath d='M185 230 L195 248 L175 248 Z'/%3E%3C!-- Diamonds --%3E%3Cpath d='M170 90 L182 108 L170 126 L158 108 Z'/%3E%3Cpath d='M85 65 L95 78 L85 91 L75 78 Z'/%3E%3Cpath d='M225 195 L235 208 L225 221 L215 208 Z'/%3E%3Cpath d='M40' y='145 L48 155 L40 165 L32 155 Z'/%3E%3C!-- Spirals --%3E%3Cpath d='M55 140 Q60 135 65 140 Q70 145 65 150 Q58 155 52 148 Q48 142 55 138'/%3E%3Cpath d='M195 145 Q202 138 210 145 Q218 152 210 160 Q200 168 192 158 Q186 150 195 143'/%3E%3Cpath d='M110 20 Q115 15 120 20 Q125 25 120 30 Q113 35 108 28 Q104 22 110 18'/%3E%3C!-- Wiggles --%3E%3Cpath d='M10 50 Q20 45 30 50 Q40 55 50 50 Q60 45 70 50'/%3E%3Cpath d='M150 5 Q160 0 170 5 Q180 10 190 5 Q200 0 210 5'/%3E%3Cpath d='M5 200 Q15 195 25 200 Q35 205 45 200'/%3E%3Cpath d='M240 130 Q245 125 250 130 Q245 135 240 130'/%3E%3C!-- Small hexagons --%3E%3Cpath d='M40 230 L48 224 L56 230 L56 242 L48 248 L40 242 Z'/%3E%3Cpath d='M145 85 L153 79 L161 85 L161 97 L153 103 L145 97 Z'/%3E%3C!-- Plus signs --%3E%3Cpath d='M235 25 L235 35 M230 30 L240 30'/%3E%3Cpath d='M75 175 L75 185 M70 180 L80 180'/%3E%3Cpath d='M15 165 L15 175 M10 170 L20 170'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 250px 250px;
    background-attachment: local; /* Wallpaper scrolls with content */
    padding: var(--space-sm) var(--space-lg);
    padding-bottom: 330px; /* Space for composer panel (300px content + 30px handle/margins) */
}


/* Look Photo Display in Chat - Slideable Panel with Spring Animation */
.look-photo-display {
    position: absolute;
    top: 56px; /* Below header */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-primary);
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Spring animation timing */
    --photo-spring: linear(
        0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
        0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
        1.001
    );
}

/* Fallback for browsers without linear() */
@supports not (animation-timing-function: linear(0, 1)) {
    .look-photo-display {
        --photo-spring: cubic-bezier(0.32, 0.72, 0, 1);
    }
}

.look-photo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    width: 100%;
    transition:
        max-height 400ms var(--photo-spring),
        padding 400ms var(--photo-spring),
        opacity 250ms ease;
    max-height: 60vh; /* Max 60% of viewport height — matches P2P panel */
    will-change: max-height, padding;
}

.look-photo-display.collapsed .look-photo-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.look-photo-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    object-fit: contain;
    border: 4px solid var(--selfie-accent, #4A8CB8); /* Default: blue for selfie */
}

/* Green border for interest Look photos */
.look-photo-display.interest .look-photo-img {
    border-color: var(--interest-accent, #5A9E60);
}

/* Slide handle for photo panel - iOS style */
.photo-slide-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    touch-action: none;
    width: 100%;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--divider);
    -webkit-tap-highlight-color: transparent;
}

.photo-handle-bar {
    width: 36px;
    height: 5px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 2.5px;
    transition: transform 0.15s ease, background 0.15s ease;
}

.photo-slide-handle:active .photo-handle-bar {
    transform: scaleX(1.08);
    background: rgba(0, 0, 0, 0.2);
}

/* Dark mode handle */
[data-theme="dark"] .photo-handle-bar {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .photo-slide-handle:active .photo-handle-bar {
    background: rgba(255, 255, 255, 0.35);
}

/* Chevron indicator */
.photo-slide-chevron {
    width: 12px;
    height: 12px;
    margin-left: 6px;
    color: var(--text-secondary);
    opacity: 0.4;
    transition: transform 400ms var(--photo-spring), opacity 0.15s ease;
}

.photo-slide-handle:active .photo-slide-chevron {
    opacity: 0.6;
}

.look-photo-display.collapsed .photo-slide-chevron {
    transform: rotate(180deg);
}

/* Pulsating animation for processing photos */
.look-photo-img.processing {
    animation: photo-pulse 1.5s ease-in-out infinite;
}

@keyframes photo-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* P2P Profile Photo Display in Chat - Slideable Panel with Spring Animation */
.p2p-photo-display {
    position: fixed;
    top: 56px; /* Below header */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-primary);
    z-index: 1000; /* Above composer panel (900) */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    /* Uses same spring timing as Look photo */
    --photo-spring: linear(
        0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
        0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
        1.001
    );
}

@supports not (animation-timing-function: linear(0, 1)) {
    .p2p-photo-display {
        --photo-spring: cubic-bezier(0.32, 0.72, 0, 1);
    }
}

.p2p-photo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    width: 100%;
    transition:
        max-height 400ms var(--photo-spring),
        padding 400ms var(--photo-spring),
        opacity 250ms ease;
    max-height: 60vh; /* Max 60% of viewport height */
    will-change: max-height, padding;
}

.p2p-photo-display.collapsed .p2p-photo-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.p2p-photo-display.collapsed .photo-slide-chevron {
    transform: rotate(180deg);
}

.p2p-photo-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    object-fit: contain;
}

/* Message wrapper for alignment - more spacing like WhatsApp */
.message-wrapper {
    display: flex;
    margin-bottom: 2px;
}

.message-wrapper.outgoing {
    justify-content: flex-end;
}

.message-wrapper.incoming {
    justify-content: flex-start;
}

/* Add more spacing between different senders */
.message-wrapper.outgoing + .message-wrapper.incoming,
.message-wrapper.incoming + .message-wrapper.outgoing {
    margin-top: var(--space-sm);
}

/* System messages (e.g., "Match created") */
.message-wrapper.system {
    display: flex;
    justify-content: center;
    margin: var(--space-sm) 0;
}

.message-system {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-sm);
    padding: 4px var(--space-lg);
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
}

[data-theme="dark"] .message-system {
    background: rgba(255, 255, 255, 0.06);
}


/* Message bubble - more rounded */
.message-bubble {
    max-width: var(--bubble-max-width);
    padding: 6px 8px;
    border-radius: var(--bubble-radius);
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.08);
    font-size: 16px;
}

/* Outgoing bubble with tail */
.message-wrapper.outgoing .message-bubble {
    background-color: var(--bubble-outgoing);
    border-top-right-radius: 2px;
    margin-right: 12px;
}

.message-wrapper.outgoing .message-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 12px 10px;
    border-color: transparent transparent transparent var(--bubble-outgoing);
}

/* Incoming bubble with tail */
.message-wrapper.incoming .message-bubble {
    background-color: var(--bubble-incoming);
    border-top-left-radius: 2px;
    margin-left: 12px;
}

.message-wrapper.incoming .message-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 12px 0;
    border-color: transparent var(--bubble-incoming) transparent transparent;
}

/* Message text with inline timestamp */
.message-text {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.4;
    display: inline;
}

/* Message meta (timestamp + status) - inline with text */
.message-meta {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-sm);
    vertical-align: bottom;
    position: relative;
    top: 3px;
    float: right;
    padding-left: var(--space-sm);
}

.message-time {
    font-size: var(--font-xs);
    color: var(--text-timestamp);
}

/* Checkmarks tighter together */
.message-status {
    font-size: 14px;
    color: var(--check-sent);
    letter-spacing: -4px;
    margin-left: 1px;
    padding-right: 2px;
}

.message-status.read {
    color: var(--check-read);
}

/* ==========================================================================
   8. INPUT BAR
   ========================================================================== */

.input-bar {
    min-height: var(--input-bar-height);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    flex-shrink: 0;
}

/* Input field container with emoji inside */
.input-field-container {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: var(--bubble-incoming);
    border: 1px solid var(--input-border);
    border-radius: 24px;
    padding: 0 var(--space-sm);
    margin-right: var(--space-sm);
    height: 46px;
}

.input-emoji {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-secondary);
    padding: 0;
}

.input-emoji svg {
    width: 24px;
    height: 24px;
    fill: var(--text-secondary);
}

.input-field {
    flex: 1;
    height: 46px;
    line-height: 46px;
    border: none;
    padding: 0 var(--space-sm);
    font-size: 16px;
    font-family: var(--font-family);
    color: var(--text-primary);
    background-color: transparent;
    outline: none;
}

.input-field::placeholder {
    color: var(--text-secondary);
}

.input-send {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--accent);
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

.input-send:active {
    opacity: 0.8;
}

.input-send svg {
    width: 20px;
    height: 20px;
    fill: #FFFFFF;
    margin-left: 2px;
}

/* ==========================================================================
   9. UTILITY CLASSES
   ========================================================================== */

.hidden {
    display: none !important;
}

/* Prevent text selection on interactive elements */
.no-select {
    -webkit-user-select: none;
    user-select: none;
}

/* ==========================================================================
   LOADING SCREEN (shown after auth, hidden when content is ready)
   ========================================================================== */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    transition: opacity 0.3s ease-out;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-logo {
    width: 80px;
    height: 80px;
    animation: pulse-logo 1.5s ease-in-out infinite;
}

@keyframes pulse-logo {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

/* ==========================================================================
   10. SIGN-IN SCREEN
   ========================================================================== */

.signin-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1F5C94 0%, #153D6B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.signin-content {
    text-align: center;
    padding: var(--space-2xl);
    max-width: 400px;
}

.signin-logo {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.signin-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.signin-title {
    font-size: 32px;
    font-weight: var(--font-weight-semibold);
    color: #FFFFFF;
    margin: 0 0 var(--space-md);
    font-family: var(--font-family);
}

.signin-subtitle {
    font-size: var(--font-md);
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 var(--space-2xl);
    font-family: var(--font-family);
}

.signin-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    background-color: #FFFFFF;
    color: #5f6368;
    border: none;
    border-radius: 24px;
    padding: 14px 28px;
    font-size: var(--font-md);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    cursor: pointer;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    user-select: none;
}

.signin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.signin-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.signin-btn svg {
    width: 20px;
    height: 20px;
    color: #1F5C94;
}

.signin-footer {
    margin-top: var(--space-lg);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-family);
}

/* ==========================================================================
   11. FAB (Floating Action Button)
   ========================================================================== */

.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent);
    border: none;
    box-shadow: 0 4px 12px rgba(31, 92, 148, 0.4);
    cursor: pointer;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(31, 92, 148, 0.5);
}

.fab:active {
    transform: scale(0.95);
}

.fab svg {
    width: 28px;
    height: 28px;
    fill: #FFFFFF;
}

.fab.active {
    transform: rotate(45deg);
}

/* FAB positioning based on tab */
.fab.looks-tab {
    bottom: 38px; /* Slightly higher to sit above collapsed composer panel handle (~14px difference) */
}

.fab.promoted-tab {
    bottom: 24px; /* Standard position */
}

/* FAB Menu */
.fab-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 89;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.fab-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.fab-menu {
    position: fixed;
    bottom: 96px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 91;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.fab-menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.fab-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--bg-primary);
    border-radius: 20px;
    padding: 8px 14px 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 150ms ease;
    white-space: nowrap;
}

.fab-menu-item:hover {
    transform: scale(1.02);
}

.fab-menu-item:active {
    transform: scale(0.98);
}

.fab-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-menu-icon.selfie {
    background-color: #E3F2FD;
}

.fab-menu-icon.interest {
    background-color: #FFF3E0;
}

[data-theme="dark"] .fab-menu-icon.selfie {
    background-color: #1E3A5F;
}

[data-theme="dark"] .fab-menu-icon.interest {
    background-color: #3E2723;
}

.fab-menu-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--accent);
}

.fab-menu-icon.interest svg {
    fill: #5A9E60;
}

.fab-menu-item span {
    font-size: var(--font-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

/* ==========================================================================
   12. COMPOSE SHEET
   ========================================================================== */

.compose-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: 500;
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.compose-sheet.active {
    transform: translateY(0);
}

.compose-sheet-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.compose-header {
    height: var(--header-height);
    background-color: var(--bg-header);
    display: flex;
    align-items: center;
    padding: 0 var(--space-sm);
}

.compose-close {
    width: var(--min-touch-target);
    height: var(--min-touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
}

.compose-close svg {
    width: 24px;
    height: 24px;
    fill: var(--text-header);
}

.compose-title {
    flex: 1;
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-header);
    margin-left: var(--space-sm);
}

.compose-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-chat);
    position: relative;
    overflow: hidden;
}

.compose-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
}

.compose-preview-img.visible {
    display: block;
}

.compose-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 60px var(--space-lg) var(--space-2xl);
}

.compose-preview-placeholder.hidden {
    display: none;
}

.compose-photo-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    max-width: 280px;
}

.compose-photo-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 12px;
    background: linear-gradient(135deg, #1F5C94 0%, #153D6B 100%);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(31, 92, 148, 0.2);
    position: relative;
}

.compose-photo-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(31, 92, 148, 0.3);
}

.compose-photo-option:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(31, 92, 148, 0.2);
}

.compose-photo-option-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    margin-bottom: 2px;
}

.compose-photo-option-icon svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.compose-photo-option-label {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: white;
}

.compose-photo-option-dev {
    font-size: var(--font-xs);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 12px;
    margin-top: 4px;
}


/* ==========================================================================
   13. LOOK CHAT VIEW (Card-style messages)
   ========================================================================== */

/* Look chat header shows Look photo + timestamp */
.header-look-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.header-look-timestamp {
    font-size: var(--font-xs);
    color: var(--text-header);
    opacity: 0.8;
}

/* Look chat messages container */
.look-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background-color: var(--bg-chat);
    padding: var(--space-md);
}

/* Look items with embedded chat heads */
.chatlist-item.look-chat {
    height: auto;
    min-height: var(--chatlist-item-height);
    align-items: center;
    padding: 0 5px 0 0;
    background: #EBEBEB;
    margin: 0 12px 6px 6px;
    border-radius: 8px 999px 999px 8px;
    overflow: hidden;
    width: fit-content;
    max-width: calc(100% - 18px);
    position: relative;
}

[data-theme="dark"] .chatlist-item.look-chat {
    background: #163550;
}

/* Pin badge for latest selfie look — top-right corner */
.look-pin-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    z-index: 2;
    color: var(--selfie-accent, #4A8CB8);
    line-height: 0;
    transform: rotate(25deg);
}

/* Left column: Look avatar */
.look-left-col {
    width: 62px;
    flex-shrink: 0;
    margin-right: var(--space-md);
    position: relative;
    align-self: stretch;
}

/* Look avatar — portrait rectangle with coloured border, fills row */
.look-item-avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 4px solid #4A8CB8;
    object-fit: cover;
    display: block;
}

.chatlist-item.look-chat.interest .look-item-avatar {
    border-color: #5A9E60;
}

[data-theme="dark"] .look-item-avatar {
    border-color: #5C9AC7;
}

[data-theme="dark"] .chatlist-item.look-chat.interest .look-item-avatar {
    border-color: #72AD77;
}

/* Timestamp above avatar */
.look-item-time {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Body */
.look-item-body {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.look-item-name {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    color: var(--selfie-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatlist-item.look-chat.interest .look-item-name {
    color: var(--interest-accent);
}

/* Chat heads row — fills from left; grows rightward */
.look-item-heads {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 11px;
    padding-right: 0;
}

/* Fade right edge only when heads actually overflow */
.look-item-heads.has-overflow {
    mask-image: linear-gradient(to left, transparent 0, black 20px);
    -webkit-mask-image: linear-gradient(to left, transparent 0, black 20px);
}

.look-item-heads::-webkit-scrollbar {
    display: none;
}

.look-chat-head {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.look-chat-head-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.chatlist-avatar-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    margin-right: var(--space-md);
    gap: 5px;
}

.chatlist-avatar-wrap .chatlist-avatar {
    margin-right: 0;
    position: relative;
    z-index: 1;
}

.chatlist-look-thumb {
    width: 42px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    margin-left: -5px;
    box-shadow: -2px 0 6px rgba(0,0,0,0.25);
    cursor: pointer;
    flex-shrink: 0;
}

/* Favourites tab: Look behind profile image in z-order */
.chatlist-avatar-wrap.look-behind .chatlist-avatar {
    position: relative;
    z-index: 1;
}

.chatlist-avatar-wrap.look-behind .chatlist-look-thumb {
    z-index: 0;
    box-shadow: none;
}

/* Empty state: no match yet */
.look-no-matches-text {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    opacity: 0.7;
    white-space: nowrap;
    align-self: center;
    margin-right: 8px;
}

/* Dark mode: light grey for both pill types */
[data-theme="dark"] .chatlist-item.look-chat .look-no-matches-text,
[data-theme="dark"] .chatlist-item.look-chat.interest .look-no-matches-text {
    color: #B0BAC4;
    opacity: 1;
}

/* New match notification dot */
.look-match-dot {
    display: none;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--selfie-accent);
    border: 2px solid var(--bg-primary);
}

.look-chat-head.new-match .look-match-dot {
    display: block;
}

.chatlist-item.look-chat.interest .look-match-dot {
    background: var(--interest-accent);
}

/* Processing subtitle on Look items — animated dots */
.chatlist-look-processing {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: 500;
}
.chatlist-look-processing::after {
    display: inline-block;
    width: 1.2em;
    text-align: left;
    content: '';
    animation: processing-dots 1.5s steps(4, end) infinite;
}
@keyframes processing-dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

/* Hint cards shown below chat list when few items */
.chatlist-hint-cards {
    display: flex;
    justify-content: center;
    padding: 24px 24px 16px;
}

/* Chat avatar border removed — pill color differentiates selfie vs interest */

/* Look rows inside the composer history panel — tighter margins */
.history-panel .chatlist-item.look-chat {
    margin: 0 4px 6px 4px;
    max-width: calc(100% - 8px);
}

/* ==========================================================================
   14. SAFE AREA INSETS (for notched devices)
   ========================================================================== */

@supports (padding-top: env(safe-area-inset-top)) {
    .header {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-height) + env(safe-area-inset-top));
    }

    .input-bar {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--input-bar-height) + env(safe-area-inset-bottom));
    }

    .fab {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .fab-menu {
        bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .compose-header {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-height) + env(safe-area-inset-top));
    }
}

/* =============================================
   PROFILE EDITOR PANEL
   ============================================= */

.profile-editor-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.profile-editor-panel.active {
    transform: translateX(0);
}

.profile-editor-header {
    height: var(--header-height);
    background: var(--header-bg);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border-color);
}

.profile-editor-back {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-color);
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-editor-back:hover {
    background: var(--hover-bg);
}

.profile-editor-back svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.profile-editor-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.profile-editor-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px;
}

.profile-editor-photo-section {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.profile-editor-photo-container {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

.profile-editor-photo-container:hover {
    transform: scale(1.05);
}

.profile-editor-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-editor-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    opacity: 1;
    border-radius: 50%;
}

.profile-editor-photo-overlay svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.profile-editor-photo-overlay span {
    font-size: 14px;
    font-weight: 500;
}

.profile-editor-name-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-editor-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.profile-editor-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 16px;
    transition: border-color 0.2s, background 0.2s;
}

.profile-editor-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-color);
}

.profile-editor-google-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.profile-editor-google-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.profile-editor-google-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-editor-google-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    flex: 1;
}

.profile-editor-google-reset {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.profile-editor-google-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-editor-google-email {
    font-size: 14px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================
   NOTIFICATION SETTINGS TOGGLES
   ============================================= */

/* =============================================
   LANGUAGE SELECTOR
   ============================================= */

.profile-editor-language-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.language-selector { position: relative; margin-top: 8px; }

.language-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--divider);
    background: var(--bg-primary);
    cursor: pointer;
    transition: border-color 0.2s;
}
.language-selected:active { border-color: var(--accent); }
.language-selected .language-flag { width: 24px; height: 16px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.language-selected .language-name { flex: 1; font-size: 15px; font-weight: 500; color: var(--text-primary); text-align: left; }
.language-chevron { width: 18px; height: 18px; color: var(--text-secondary); transition: transform 0.25s ease; }
.language-selector.open .language-chevron { transform: rotate(180deg); }

.language-dropdown {
    display: none;
    flex-direction: column;
    margin-top: 6px;
    border-radius: 10px;
    border: 1px solid var(--divider);
    background: var(--bg-primary);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.language-selector.open .language-dropdown { display: flex; }

.language-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: none;
    background: none;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
    width: 100%;
}
.language-item + .language-item { border-top: 1px solid var(--divider); }
.language-item:active:not(.disabled) { background: var(--ripple); }
.language-item .language-flag { width: 24px; height: 16px; border-radius: 2px; object-fit: cover; flex-shrink: 0; }
.language-item .language-name { font-size: 15px; color: var(--text-primary); }
.language-item.selected { background: rgba(74, 140, 184, 0.12); }
.language-item.selected .language-name { color: var(--accent); font-weight: 600; }
.language-item.disabled { cursor: default; }
.language-item.disabled .language-flag { opacity: 0.35; filter: grayscale(0.6); }
.language-item.disabled .language-name { color: var(--text-secondary); opacity: 0.55; }

/* =============================================
   NOTIFICATION SETTINGS TOGGLES
   ============================================= */

.profile-editor-notifications-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.notification-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.notification-toggle-label {
    font-size: 15px;
    color: var(--text-color);
}

.notification-toggle {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

.notification-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 28px;
    cursor: pointer;
    transition: background 0.3s;
}

.notification-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.notification-toggle input:checked + .notification-slider {
    background: #5A9E60;
}

.notification-toggle input:checked + .notification-slider::before {
    transform: translateX(20px);
}

/* =============================================
   PROFILE CROP MODAL
   ============================================= */

.profile-crop-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10001;
    display: none;
    flex-direction: column;
}

.profile-crop-modal.active {
    display: flex;
}

.profile-crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
}

.profile-crop-title {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin: 0;
}

.profile-crop-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: white;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-crop-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.profile-crop-close svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.profile-crop-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}

#profileCropCanvas {
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
    cursor: move;
}

.profile-crop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

.profile-crop-controls {
    display: flex;
    gap: 12px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
}

.profile-crop-btn {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-crop-choose {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    text-align: center;
}

.profile-crop-choose:hover {
    background: rgba(255, 255, 255, 0.15);
}

.profile-crop-save {
    background: var(--accent);
    color: white;
}

.profile-crop-save:hover {
    background: #153D6B;
}

.profile-crop-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   Interest Photo Crop Modal
   ========================================================================== */

.interest-crop-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.interest-crop-content {
    width: 100%;
    max-width: min(95vw, 900px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.interest-crop-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, #1F5C94 0%, #153D6B 100%);
    color: white;
}

.interest-crop-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: white;
}

.interest-crop-subtitle {
    font-size: 13px;
    margin: 0;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9);
}

.interest-crop-container {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    padding: 20px;
    min-height: 300px;
}

#interestCropCanvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    cursor: move;
}

#interestCropCanvas.dragging {
    cursor: grabbing;
}

.interest-crop-controls {
    padding: 16px 24px;
    display: flex;
    gap: 12px;
    background: #1a1a1a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.interest-crop-btn {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.interest-crop-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.interest-crop-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.interest-crop-cancel:active {
    transform: scale(0.98);
}

.interest-crop-use {
    background: linear-gradient(135deg, #1F5C94 0%, #153D6B 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(31, 92, 148, 0.3);
}

.interest-crop-use:hover {
    box-shadow: 0 4px 12px rgba(31, 92, 148, 0.4);
    transform: translateY(-1px);
}

.interest-crop-use:active {
    transform: translateY(0) scale(0.98);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Mobile optimizations */
@media (max-width: 600px) {
    .interest-crop-content {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .interest-crop-header {
        padding: 16px 20px;
    }
    
    .interest-crop-title {
        font-size: 18px;
    }
    
    .interest-crop-subtitle {
        font-size: 12px;
    }
    
    .interest-crop-controls {
        padding: 12px 16px;
    }
    
    .interest-crop-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ==========================================================================
   SELECTION MODE
   ========================================================================== */

.selection-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    z-index: 200;
}

.selection-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selection-toolbar-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 50%;
}

.selection-toolbar-btn svg {
    width: 24px;
    height: 24px;
    fill: var(--text-header);
}

.selection-toolbar-btn:active {
    background: rgba(255, 255, 255, 0.15);
}

.selection-count {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-medium);
    color: var(--text-header);
}

.selection-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Selected chat list item highlight */
.chatlist-item.selected {
    background-color: rgba(31, 92, 148, 0.12);
}

[data-theme="dark"] .chatlist-item.selected {
    background-color: rgba(30, 58, 95, 0.35);
}


/* Mute icon in chatlist */
.chatlist-mute-icon {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    opacity: 0.55;
}

.chatlist-mute-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.chatlist-star-icon {
    display: flex;
    align-items: center;
    color: #F5A623;
}

.chatlist-star-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Archive row at top of chat list */
.archive-row {
    height: 46px;
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
    gap: 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--divider);
}

.archive-row:active {
    background-color: var(--ripple);
}

.archive-row svg {
    width: 22px;
    height: 22px;
    fill: var(--text-secondary);
}

.archive-row-label {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    flex: 1;
}

.archive-row-count {
    font-size: var(--font-xs);
    color: var(--badge-text);
    background: var(--badge-unread);
    border-radius: 10px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-weight: var(--font-weight-bold);
}

/* Star button in chat header */
.header-star-btn {
    background: none;
    border: none;
    padding: 4px;
    margin-left: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.header-star-btn .star-fill {
    fill: #999;
    opacity: 0.4;
    transition: fill 300ms ease, opacity 300ms ease;
}

.header-star-btn .plus-badge {
    opacity: 1;
    transition: opacity 300ms ease;
}

.header-star-btn .minus-badge {
    opacity: 0;
    transition: opacity 300ms ease;
}

.header-star-btn.starred .star-fill {
    fill: #F5A623;
    opacity: 0.95;
}

.header-star-btn.starred .plus-badge {
    opacity: 0;
}

.header-star-btn.starred .minus-badge {
    opacity: 1;
}

.header-star-btn:active .star-fill {
    opacity: 0.6;
}

/* Selection toolbar promote icon */
.selection-promote-icon {
    width: 22px;
    height: 22px;
}

/* Promoted chat items */
.promoted-chat-item {
    position: relative;
}

.promoted-item-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0.12;
    pointer-events: none;
}

/* Promoted tab empty state */
.promoted-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.promoted-empty-icon {
    width: 64px;
    height: 64px;
    opacity: 0.15;
    margin-bottom: 16px;
}

.promoted-empty-hint {
    font-size: var(--font-sm);
    margin-top: 8px;
    opacity: 0.7;
}


/* ==========================================================================
   AVATAR POPUP SYSTEM
   ========================================================================== */

/* Make avatars clickable for popup */
.avatar-clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.avatar-clickable:active {
    opacity: 0.7;
    transition: opacity 0.1s ease;
}

/* Transparent overlay to catch outside clicks */
.avatar-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    background: transparent;
}

.avatar-popup-overlay.active {
    display: block;
}

/* Small popup near avatar */
.avatar-popup {
    position: fixed;
    z-index: 2000;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 8px;
    opacity: 0;
    transform: scale(0.3);
    transition: transform 350ms var(--photo-spring), opacity 150ms ease;
    will-change: transform, opacity;
    pointer-events: none;
}

.avatar-popup.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.avatar-popup-img {
    max-width: min(60vw, 280px);
    max-height: 50vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    cursor: pointer;
}

.avatar-popup-img.selfie-border {
    border: 3px solid var(--selfie-accent, #4A8CB8);
}

.avatar-popup-img.interest-border {
    border: 3px solid var(--interest-accent, #5A9E60);
}

.avatar-popup-name {
    text-align: center;
    padding: 8px 4px 4px;
    font-size: var(--font-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

/* Full screen photo viewer */
.fullscreen-photo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.85);
    transition: transform 400ms var(--photo-spring), opacity 200ms ease;
    will-change: transform, opacity;
}

.fullscreen-photo.visible {
    opacity: 1;
    transform: scale(1);
}

.fullscreen-photo-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 12px));
}

.fullscreen-photo-back {
    background: none;
    border: none;
    color: white;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.fullscreen-photo-back svg {
    width: 24px;
    height: 24px;
}

.fullscreen-photo-name {
    color: white;
    font-size: var(--font-lg);
    font-weight: var(--font-weight-medium);
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fullscreen-photo-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}

.fullscreen-photo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}