/**
 * Magic Ink Styles
 * Organized by component sections for maintainability
 */

/* ========================================
   View Transitions API for smooth page navigation
   ======================================== */
@view-transition {
    navigation: auto;
}

/* Fade out page content during navigation */
::view-transition-old(root) {
    animation: fade-out 0.2s ease-out forwards;
}

::view-transition-new(root) {
    animation: fade-in 0.3s ease-out forwards;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   CSS Variables & Theme Configuration
   ======================================== */
:root {
    /* Light theme colors */
    --bg-primary: #F8F7F5;
    --bg-primary-alpha: rgba(248, 247, 245, 0.95);
    --bg-secondary: #F8F7F5;
    --text-primary: #2A241E;
    --text-secondary: #2A241E;
    --text-muted: #8B7355;
    --border-color: #DDD6C8;
    --border-secondary: #DDD6C8;
    --accent-warm: #B2682E;
    --accent-warm-hover: #9A5625;
    --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}


/* ========================================
   Base Styles & Reset
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f5f1e8;
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    transition: background 0.5s ease, color 0.3s ease;
}

[data-theme="dark"] body {
    background-color: #2A241E;
}

[data-theme="dark"] .footer-links a {
    color: #EDE8DE;
}

[data-theme="dark"] .footer-links a:hover {
    color: #F7F2E8;
    background: rgba(42, 36, 30, 0.3);
}


/* ========================================
   Layout Components
   ======================================== */
.container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.app-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* Always expand to fill app-card, ensuring share section stays at bottom */
    min-height: 336px;
}

/* Desktop spacing */
@media (min-width: 769px) {
    .container {
        margin: 40px auto 0;
    }
}

.app-card {
    background-color: #ECE8DE;
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    transition: all 1s ease, height 1s ease, min-height 1s ease;
    display: flex;
    flex-direction: column;
    /* View transition name for smooth card transitions */
    view-transition-name: app-card;
}

/* ========================================
   Theme Toggle (in footer)
   ======================================== */
.minimal-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: inherit;
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
    margin: 0;
}

.minimal-theme-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

/* ========================================
   Typography
   ======================================== */
h1 {
    color: #2A241E;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: -0.02em;
    /* Keep header stable during transitions */
    view-transition-name: main-header;
}

h1 a {
    color: inherit;
    text-decoration: none;
}

h1 a:hover {
    text-decoration: none;
}

.logo {
    height: 30px;
    width: auto;
    vertical-align: text-bottom;
    margin-right: 6px;
    display: inline-block;
    transform: translateY(-3px);
}

.tagline {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 40px;
    font-size: 15px;
    font-weight: 400;
    /* Keep tagline stable during transitions */
    view-transition-name: tagline;
}

/* Tagline link hover effect */
.tagline-link:hover .tagline-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
    width: 24px !important;
}

.vanishing-text {
    color: var(--text-secondary);
    display: inline-block;
    vertical-align: text-bottom;
}

/* ========================================
   View Management
   ======================================== */
.view {
    display: none;
    opacity: 0;
    flex: 1;
    flex-direction: column;
}

.view.active {
    display: flex;
    opacity: 1;
}

/* Smooth transitions for read/faded views */
.magic-text-container {
    overflow: hidden;
}

/* ========================================
   Button Components (Consistent Design System)
   ======================================== */
/* Base button styles - shared by all buttons */
.button-base {
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    border: 2px solid transparent;
    position: relative; /* Always relative to prevent shift */
}

/* Primary button - filled style */
.button-primary {
    background-color: var(--accent-warm);
    color: white;
    border-color: var(--accent-warm);
}

.button-primary:hover:not(:disabled) {
    background-color: var(--accent-warm-hover);
    border-color: var(--accent-warm-hover);
    transform: translateY(-1px);
}

.button-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Outline button variant */
.button-outline {
    background-color: transparent;
    color: var(--accent-warm);
    border-color: var(--accent-warm);
}

.button-outline:hover:not(:disabled) {
    background-color: var(--accent-warm);
    color: white;
    transform: translateY(-1px);
}

.button-outline:active:not(:disabled) {
    transform: translateY(0);
}

/* Disabled state for all buttons */
.button-base:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.button-base:disabled:hover {
    transform: none;
}

/* Full width modifier */
.button-full {
    width: 100%;
}

/* Flex button for side-by-side layouts */
.button-flex {
    flex: 1;
    min-width: 0;
}

/* Working/loading state */
.button-base.working {
    opacity: 0.5;
    cursor: not-allowed;
    /* position: relative should be on base button */
}

/* ========================================
   Unified Textarea Component
   ======================================== */
.unified-textarea {
    width: 100%;
    min-height: 240px;
    padding: 20px;
    font-size: 18px;
    line-height: 1.5;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    resize: none;
    overflow: auto;
    font-family: inherit;
    margin-bottom: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.2s ease;
    box-sizing: border-box;
    flex: 1;
    outline: none;
}

/* Editable state - for write view */
.unified-textarea.editable {
    cursor: text;
}

/* Read-only state - for encrypted link and read view */
.unified-textarea.readonly {
    cursor: pointer;
    user-select: all;
}

/* Unified focus and hover states */
.unified-textarea:focus {
    border-color: var(--accent-warm);
}

.unified-textarea:hover {
    background-color: #F5F3F0;
    border-color: var(--accent-warm);
}

/* Text content modifiers - applied on top of base */
.unified-textarea.text-default {
    /* Default text styling - inherits from base */
}

.unified-textarea.text-encrypted {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    color: var(--accent-warm);
    font-weight: 600;
}

.unified-textarea.text-blurred {
    color: transparent;
    text-shadow: 0 0 6px var(--text-primary);
}

/* Apply wiggle animation to each character when blurred in read mode */
.unified-textarea.text-blurred.clickable-reveal {
    position: relative;
}

/* Adjust min-height in read mode to account for the label */
.secret-message-container.read-blurred-mode .unified-textarea {
    min-height: 214px; /* 240px - 16px label - 10px margin */
}

/* Make div-based message display look like textarea */
.unified-textarea.animated-blur {
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: inherit; /* Ensure it uses the regular font, not monospace */
}

/* Individual character animation for blurred text - wiggle effect */
.text-blurred-char {
    display: inline-block;
    position: relative;
    animation: floatChar 4s ease-in-out infinite;
    will-change: transform;
    color: transparent;
    text-shadow: 0 0 6px var(--text-primary);
    font-family: inherit; /* Ensure characters don't inherit monospace font */
}

/* Staggered animation variations for organic movement */
.text-blurred-char:nth-child(3n) {
    animation-delay: 0s;
    animation-duration: 3.5s;
}

.text-blurred-char:nth-child(3n+1) {
    animation-delay: 0.5s;
    animation-duration: 4.2s;
}

.text-blurred-char:nth-child(3n+2) {
    animation-delay: 1s;
    animation-duration: 3.8s;
}

.text-blurred-char:nth-child(5n) {
    animation-delay: 0.3s;
    animation-duration: 4.5s;
}

.text-blurred-char:nth-child(5n+1) {
    animation-delay: 0.8s;
    animation-duration: 3.3s;
}

.text-blurred-char:nth-child(5n+2) {
    animation-delay: 1.2s;
    animation-duration: 4.1s;
}

.text-blurred-char:nth-child(5n+3) {
    animation-delay: 0.2s;
    animation-duration: 3.7s;
}

.text-blurred-char:nth-child(5n+4) {
    animation-delay: 0.6s;
    animation-duration: 4.3s;
}

.text-blurred-char:nth-child(7n) {
    animation-delay: 0.1s;
    animation-duration: 3.9s;
}

.text-blurred-char:nth-child(7n+1) {
    animation-delay: 0.9s;
    animation-duration: 4.4s;
}

.text-blurred-char:nth-child(7n+2) {
    animation-delay: 0.4s;
    animation-duration: 3.6s;
}

/* ========================================
   Write View Components
   ======================================== */
.text-input {
    width: 100%;
    min-height: 240px;
    padding: 20px;
    font-size: 18px;
    line-height: 1.5;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    resize: none;
    overflow: auto;
    font-family: inherit;
    margin-bottom: 0;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: color 1.2s ease, background-color 1.2s ease;
    box-sizing: border-box;
    flex: 1;
}

.text-input:focus {
    outline: none;
    border-color: var(--accent-warm);
}

/* Input container that holds both textarea and placeholder */
.input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
}

/* Wrapper for textarea with overlay */
.textarea-wrapper {
    position: relative;
    display: flex;
    /* Remove fixed height - let it shrink with the input */
    width: 100%;
}

/* When textarea shows encrypted text */
.text-input.encrypted {
    color: var(--accent-warm);
    cursor: default;
    max-height: 240px;
    overflow: hidden;
}

.text-input.encrypting {
    color: var(--accent-warm);
    cursor: default;
    max-height: 240px;
    overflow: hidden;
}


.character-count {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 0; /* No margins needed inside flex container */
    flex-shrink: 0;
    min-height: 16px; /* Fixed height to prevent shifts */
    line-height: 16px;
}

.character-count.fade-in-rise {
    animation: fadeInRise 0.4s ease-out forwards;
}

.character-count.fade-out-rise {
    animation: fadeOutRise 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.status-message {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 14px;
    margin-bottom: 0;
    flex-shrink: 0;
    min-height: 16px;
    line-height: 1;
    font-weight: bold;
    text-decoration: none;
    vertical-align: bottom;
}

/* Secret link styling */
.text-input.secret-link {
    font-weight: 600;
    color: var(--accent-warm);
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
}

.text-input.secret-link:hover {
    background-color: #F5F3F0;
    border-color: var(--accent-warm);
}

/* Success overlay for copy feedback */
.copy-success-overlay {
    background: #ECE8DE;
    color: var(--accent-warm);
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    pointer-events: none;
    z-index: 10000; /* Very high z-index to ensure it's above everything */
    opacity: 0;
}

/* Fixed position overlay - attached to body */
.copy-success-overlay.fixed-position {
    position: fixed !important;
    /* transform is set inline via JS */
}

.copy-hint-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ECE8DE;
    color: var(--accent-warm);
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
}

.copy-hint-overlay {
    transition: opacity 0.2s ease-in-out;
}

.copy-hint-overlay.show {
    opacity: 1;
}

.copy-success-overlay.show {
    animation: copySuccessFadeOutFall 2s ease-out forwards;
    pointer-events: none !important; /* Prevent any mouse interaction */
    will-change: transform, opacity; /* Optimize animation performance */
}

/* Animation for fixed position overlay */
.copy-success-overlay.fixed-position.show {
    animation: copySuccessFadeOutFallFixed 2s ease-out forwards;
}

@keyframes copySuccessFadeOutFall {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 20px));
    }
}

@keyframes copySuccessFadeOutFallFixed {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 20px));
    }
}

/* Encryption spinner */
.encryption-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.encryption-spinner.show {
    opacity: 1;
}

.spinner-ring {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--accent-warm);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Blur effect for message text only */
.text-input.blur-text {
    color: transparent;
    text-shadow: 0 0 7px var(--text-primary);
    transition: color 0.3s ease-out, text-shadow 0.3s ease-out;
}

/* Clickable blurred text hover effect */
.text-input.blur-text.clickable-reveal:hover {
    background-color: #F5F3F0;
}

/* Spinner overlay */
.spinner-overlay {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 241, 232, 0.75); /* #F5F1E8 with transparency for light mode */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    z-index: 9999; /* Very high z-index to ensure it's above everything */
    border-radius: 20px;
}

[data-theme="dark"] .spinner-overlay {
    background: rgba(0, 0, 0, 0.5); /* Darker overlay for dark mode */
}

.spinner-overlay.show {
    opacity: 1;
    pointer-events: auto; /* Enable pointer events when shown to block interaction */
}

/* Legacy magic-button - now uses button system */
.magic-button {
    /* Extends button-base button-primary button-full */
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    border: 2px solid var(--accent-warm);
    background-color: var(--accent-warm);
    color: white;
    width: 100%;
    margin: 0;
    flex-shrink: 0;
    position: relative; /* Always relative to prevent shift */
}

.magic-button:hover:not(:disabled) {
    background-color: var(--accent-warm-hover);
    border-color: var(--accent-warm-hover);
    transform: translateY(-1px);
}

.magic-button:active:not(:disabled) {
    transform: translateY(0);
}

.magic-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.magic-button:disabled:hover {
    transform: none;
}

/* ========================================
   Share View Components
   ======================================== */
.share-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.success-message {
    color: var(--text-primary);
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 24px;
}

.success-message h2 {
    font-size: 20px;
    margin-bottom: 12px;
    line-height: 1.3;
    font-weight: 600;
}

.success-message p {
    font-size: 16px;
    line-height: 1.4;
    color: var(--text-muted);
    font-weight: 400;
}

.sparkle {
    display: inline-block;
    animation: sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
}

.link-display {
    background-color: var(--bg-primary);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-secondary);
    margin-bottom: 24px;
    word-break: break-all;
    font-family: monospace;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    line-height: 1.4;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: auto;
    flex-shrink: 0;
}

/* Action buttons using consistent button system */
.action-button {
    /* Base styles */
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    border: 2px solid var(--accent-warm);
    background-color: var(--accent-warm);
    color: white;
    flex: 1;
    min-width: 0;
    margin: 0;
}

.action-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-button:not(:disabled):hover {
    background-color: var(--accent-warm-hover);
    border-color: var(--accent-warm-hover);
    transform: translateY(-1px);
}

.action-button:not(:disabled):active {
    transform: translateY(0);
}

/* Copy button - outline variant */
#copy-button {
    background-color: transparent;
    color: var(--accent-warm);
}

#copy-button:not(:disabled):hover {
    background-color: var(--accent-warm);
    color: white;
}


/* ========================================
   Read View Components
   ======================================== */
.vanished-message {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    cursor: default;
    user-select: none;
    flex: 1;
}

.vanished-message p {
    font-size: 18px;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

.secret-title {
    color: #2A241E;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 24px;
    margin-top: 0;
    opacity: 1; /* Always visible, fades with parent view */
}

.read-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
}

.magic-text-container {
    min-height: 200px;
    padding: 30px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    flex: 1;
    isolation: isolate;
    opacity: 0;
    transform: translateY(20px);
}

.read-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    position: relative;
    z-index: 1;
    opacity: 1; /* Visible by default - parent handles fade */
}

/* Active state styles for read view */
#read-view.active .magic-text-container {
    opacity: 1;
    transform: translateY(0);
}

.info-message {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    margin: 2px 0 24px 0;
    opacity: 1; /* Visible by default - parent handles fade */
}

.timer-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    margin-top: 12px;
    width: 100%;
}

.magic-text {
    font-size: 20px;
    line-height: 1.6;
    color: var(--accent-warm);
    transition: filter 0.3s ease, opacity 3s ease;
    text-align: center;
    word-break: break-all;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.magic-text.blurred {
    filter: blur(8px);
}

.magic-text.fading {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

/* Secret Message Component Styles */
.secret-message-container {
    width: 100%;
    position: relative;
    /* Prevent margin-collapsing between children across mode swaps */
    display: flex;
    flex-direction: column;
}

.secret-message-container.write-mode,
.secret-message-container.encrypting-mode,
.secret-message-container.revealed-mode,
.secret-message-container.read-blurred-mode,
.secret-message-container.revealing-mode,
.secret-message-container.vanishing-mode,
.secret-message-container.vanished-mode,
.secret-message-container.error-mode {
    display: flex;
    flex-direction: column;
}

.secret-message-container.write-mode .unified-textarea,
.secret-message-container.write-mode .text-input,
.secret-message-container.write-mode .encrypted-link-display,
.secret-message-container.write-mode .vanished-message,
.secret-message-container.encrypting-mode .unified-textarea,
.secret-message-container.encrypting-mode .text-input,
.secret-message-container.encrypting-mode .encrypted-link-display,
.secret-message-container.encrypting-mode .vanished-message,
.secret-message-container.revealed-mode .unified-textarea,
.secret-message-container.revealed-mode .text-input,
.secret-message-container.revealed-mode .encrypted-link-display,
.secret-message-container.revealed-mode .vanished-message,
.secret-message-container.read-blurred-mode .unified-textarea,
.secret-message-container.read-blurred-mode .text-input,
.secret-message-container.read-blurred-mode .encrypted-link-display,
.secret-message-container.read-blurred-mode .vanished-message,
.secret-message-container.revealing-mode .unified-textarea,
.secret-message-container.revealing-mode .text-input,
.secret-message-container.revealing-mode .encrypted-link-display,
.secret-message-container.revealing-mode .vanished-message,
.secret-message-container.vanishing-mode .unified-textarea,
.secret-message-container.vanishing-mode .text-input,
.secret-message-container.vanishing-mode .encrypted-link-display,
.secret-message-container.vanishing-mode .vanished-message,
.secret-message-container.vanished-mode .unified-textarea,
.secret-message-container.vanished-mode .text-input,
.secret-message-container.vanished-mode .encrypted-link-display,
.secret-message-container.vanished-mode .vanished-message,
.secret-message-container.error-mode .unified-textarea,
.secret-message-container.error-mode .text-input,
.secret-message-container.error-mode .encrypted-link-display,
.secret-message-container.error-mode .vanished-message {
    height: auto; /* Remove fixed height to allow flex expansion */
}

/* Layout adjustments for main UI modes - app-container now always has flex: 1 */

.secret-message-container.encrypting-mode {
    /* Encrypting mode - temporary state during encryption */
}

@keyframes pulse {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

.secret-message-container.revealed-mode .magic-text {
    color: var(--text-primary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
}

.secret-message-container.vanishing-mode .magic-text {
    transition: opacity 2s ease-out;
}

.vanish-timer {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.vanished-message {
    text-align: center;
    color: var(--text-secondary);
    font-size: 18px;
    padding: 40px 20px;
    font-style: italic;
}

/* Button Container Styles */
.button-container {
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 0;
    width: 100%;
    animation: fadeInFall 0.8s ease-out 0.1s forwards;
    opacity: 0; /* Start invisible until animation begins */
}

.share-container-unified {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 0;
    width: 100%;
    /* No individual animation - inherits from parent */
}

/* Info Container Styles */
.info-container {
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    flex-shrink: 0;
}

.action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 0; /* Spacing handled by character-count margin-bottom */
}

.magic-button.working {
    opacity: 0.5;
    cursor: not-allowed;
    /* position: relative already set on base button */
}

.magic-button.success {
    background: var(--accent-warm);
    border-color: var(--accent-warm);
    color: white;
}

@keyframes workingPulse {
    0% {
        background: #B2682E;
    }
    100% {
        background: #9A5625;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Secondary buttons - same dimensions as primary */
.magic-button-secondary {
    /* Inherits from action-button (filled style) */
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    border: 2px solid var(--accent-warm);
    background-color: var(--accent-warm);
    color: white;
    flex: 1;
    min-width: 0;
    margin: 0;
}

.magic-button-secondary:hover:not(:disabled) {
    background-color: var(--accent-warm-hover);
    border-color: var(--accent-warm-hover);
    transform: translateY(-1px);
}

.magic-button-secondary:active:not(:disabled) {
    transform: translateY(0);
}

.magic-button-outline {
    /* Outline variant - same dimensions */
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    text-decoration: none;
    font-family: inherit;
    border: 2px solid var(--accent-warm);
    background-color: transparent;
    color: var(--accent-warm);
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* Responsive button styles - Mobile first approach */
/* On mobile: Share is primary (filled), Copy is secondary (outlined) */
#share-message-button {
    /* Filled style on mobile */
    background-color: var(--accent-warm);
    color: white;
}

#copy-message-button {
    /* Outlined style on mobile */
    background-color: transparent;
    color: var(--accent-warm);
}

/* Desktop styles - swap the button appearances */
@media (min-width: 768px) {
    #share-message-button {
        /* Outlined style on desktop */
        background-color: transparent;
        color: var(--accent-warm);
    }
    
    #copy-message-button {
        /* Filled style on desktop */
        background-color: var(--accent-warm);
        color: white;
    }
    
    /* Update hover states for desktop */
    #share-message-button:hover:not(:disabled) {
        background-color: var(--accent-warm);
        color: white;
        transform: translateY(-1px);
    }
    
    #copy-message-button:hover:not(:disabled) {
        background-color: var(--accent-warm-hover);
        border-color: var(--accent-warm-hover);
        transform: translateY(-1px);
    }
}

/* Apply hover styles only on devices with precise pointing (mouse) */
@media (hover: hover) and (pointer: fine) {
    .magic-button-outline:hover:not(:disabled):not(.no-hover) {
        background-color: var(--accent-warm);
        color: white;
        transform: translateY(-1px);
    }
}

/* On touch devices, prevent sticky hover */
@media (hover: none), (pointer: coarse) {
    .magic-button-outline:hover {
        /* Don't apply hover styles on touch */
        background-color: transparent;
        color: var(--accent-warm);
    }
}

.magic-button-outline:focus {
    /* Maintain outline appearance when focused */
    outline: none; /* Remove browser default outline */
    background-color: transparent;
    color: var(--accent-warm);
    border-color: var(--accent-warm);
}

.magic-button-outline:active:not(:disabled) {
    transform: translateY(0);
    /* Active state provides visual feedback on touch */
    background-color: var(--accent-warm);
    color: white;
}

/* Prevent hover state on initial creation to avoid inheritance from pointer position */
.magic-button-outline.no-hover:hover {
    background-color: transparent !important;
    color: var(--accent-warm) !important;
    transform: none !important;
}

.reset-link {
    color: var(--accent-warm);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-top: 16px;
    display: inline-block;
}

.reset-link:hover {
    color: var(--accent-warm-hover);
    text-decoration: underline;
    transform: translateX(2px);
}

.secret-header {
    text-align: center;
    margin-bottom: 24px;
    color: var(--text-primary);
}

/* Button transition animations */
@keyframes fadeInRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInFall {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutFall {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes fadeOutRise {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}


@keyframes hideInputSequence {
    0% {
        height: 240px;
        width: 100%;
        margin: 0 auto;
        background-color: var(--bg-primary);
        border-color: var(--border-color);
        border-radius: 12px;
        opacity: 1;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
    }
    100% {
        height: 145px;
        width: 145px;
        margin: 0 auto;
        background-color: var(--accent-warm);
        border-color: var(--accent-warm);
        border-radius: 50%;
        opacity: 1;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
    }
}

.text-input.hide-sequence {
    min-height: 0 !important;
    padding: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    /* No animation on textarea - let wrapper handle it */
    font-size: 18px !important;
    border: none !important;
    background: transparent !important;
}

.textarea-wrapper.hide-sequence {
    min-height: 0 !important;
    animation: hideInputSequence 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) forwards,
               pulseBounce 3s ease-in-out 0.5s infinite,
               floatRandom 7s ease-in-out 0.5s infinite;
    transform-origin: center center;
    position: absolute;
}





.magic-button.fade-in-rise {
    animation: fadeInRise 0.3s ease-out forwards;
}


.fade-in-fall {
    animation: fadeInFall 0.3s ease-out forwards;
}

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

.fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

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

.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.fade-out-fall {
    animation: fadeOutFall 0.3s ease-out forwards;
}

.magic-button.fade-out-rise {
    animation: fadeOutRise 0.3s ease-out forwards;
}


.reveal-hint {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 20px;
}

.reveal-hint span {
    display: inline-block;
    animation: charWave 3s ease-in-out infinite;
}

@keyframes charWave {
    0%, 100% { 
        transform: translateY(0);
    }
    25% {
        transform: translateY(-4px);
    }
    50% {
        transform: translateY(0);
    }
}

/* Timer indicator */
.timer {
    color: var(--accent-warm);
    font-size: 14px;
    font-weight: 500;
    display: none;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.timer.show {
    display: inline;
    opacity: 1;
}

/* Copyable revealed text styles */
.magic-text.revealed {
    user-select: text;
}

/* Make entire container clickable when message is revealed */
.magic-text-container:has(.magic-text.revealed) {
    cursor: pointer;
}

.magic-text-container:has(.magic-text.revealed):hover .magic-text {
    opacity: 0.8;
}

/* Copy overlay notification */
.copy-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.copy-overlay.show {
    opacity: 1;
}

/* ========================================
   Shared Components
   ======================================== */
.write-new-link {
    color: var(--accent-warm);
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    margin-top: auto;
    padding-top: 20px;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.write-new-link:hover {
    color: var(--accent-warm-hover);
    text-decoration: none;
}


/* ========================================
   Examples Section
   ======================================== */
.examples {
    margin-top: 60px;
    text-align: center;
    color: var(--text-secondary);
}

.examples-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.example-item {
    margin: 10px 0;
    font-size: 14px;
}

/* ========================================
   Animations
   ======================================== */
@keyframes writing {
    0% { width: 0; }
    100% { width: 100%; }
}

.writing-animation {
    overflow: hidden;
    white-space: nowrap;
    animation: writing 2s ease-out;
}

/* ========================================
   Share Section
   ======================================== */
.share-section {
    margin-top: auto; /* Push to bottom of flex container */
    padding-top: 20px;
    position: relative;
    flex-shrink: 0; /* Never shrink */
}

.share-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: var(--border-color);
    opacity: 0.5;
}

.share-prompt {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 12px;
    margin-bottom: 12px;
    font-weight: 500;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: inherit;
}

.share-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.share-btn:active {
    transform: translateY(0);
}

.share-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.share-btn.copied {
    background: var(--accent-warm);
    color: white;
}

.share-btn.copied:hover {
    background: var(--accent-warm-hover);
}

@media (max-width: 480px) {
    .share-section {
        margin-top: 16px;
        padding-top: 16px;
    }
    
    .share-buttons {
        gap: 6px;
    }
    
    .share-btn {
        width: 32px;
        height: 32px;
    }
    
    .share-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* ========================================
   Trust Footer
   ======================================== */
.trust-footer {
    padding: 12px 0 30px 0;
    text-align: center;
}

.security-notice {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.footer-links a {
    color: var(--accent-warm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.footer-links a:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    transform: translateY(-1px);
}

.footer-links .minimal-theme-toggle:hover {
    background: none;
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .container {
        margin: 0;
        padding: 0;
    }
    
    .app-card {
        padding: 24px 16px;
        margin: 0;
    }
    
    .tagline {
        margin-bottom: 32px;
    }
    
    .character-count {
        margin-bottom: 16px;
    }
    
    .magic-button {
        margin-bottom: 0;
    }
    
    .success-message {
        margin-bottom: 32px;
    }
    
    .link-display {
        margin-bottom: 32px;
    }
    
    .action-buttons {
        margin-bottom: 24px;
    }
    
    .trust-footer {
        padding: 8px 0 20px 0;
    }
    
    .footer-links {
        gap: 16px;
    }
    
    .footer-links a {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* Animated encrypted link characters - matches text-input styling exactly */
.encrypted-link-display {
    display: block;
    width: 100%;
    padding: 20px;
    font-size: 18px;
    line-height: 1.5;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    background-color: var(--bg-primary);
    color: var(--accent-warm);
    position: relative; /* Prevent position change flash when overlays are added */
    font-weight: 600;
    cursor: pointer;
    user-select: all;
    box-sizing: border-box;
    word-break: break-all;
    overflow: auto;
    outline: none;
    flex: 1;
    transition: background-color 0.2s ease, flex 0.5s ease-out, height 0.5s ease-out;
}

/* When the link is fully displayed, remove flex to shrink to content size */
.encrypted-link-display.shrink-to-content {
    flex: none;
    height: auto;
}

.encrypted-link-display:hover {
    background-color: #F5F3F0;
    border-color: var(--accent-warm);
}

.encrypted-char {
    display: inline-block;
    position: relative;
    animation: floatChar 4s ease-in-out infinite;
    will-change: transform; /* Optimize for animation performance */
}

/* Create unique animation delays for randomized motion */
.encrypted-char:nth-child(3n) {
    animation-delay: 0s;
    animation-duration: 3.5s;
}

.encrypted-char:nth-child(3n+1) {
    animation-delay: 0.5s;
    animation-duration: 4.2s;
}

.encrypted-char:nth-child(3n+2) {
    animation-delay: 1s;
    animation-duration: 3.8s;
}

.encrypted-char:nth-child(5n) {
    animation-delay: 0.3s;
    animation-duration: 4.5s;
}

.encrypted-char:nth-child(5n+1) {
    animation-delay: 0.8s;
    animation-duration: 3.3s;
}

.encrypted-char:nth-child(5n+2) {
    animation-delay: 1.2s;
    animation-duration: 4.1s;
}

.encrypted-char:nth-child(5n+3) {
    animation-delay: 0.2s;
    animation-duration: 3.7s;
}

.encrypted-char:nth-child(5n+4) {
    animation-delay: 0.6s;
    animation-duration: 4.3s;
}

.encrypted-char:nth-child(7n) {
    animation-delay: 0.1s;
    animation-duration: 3.9s;
}

.encrypted-char:nth-child(7n+1) {
    animation-delay: 0.7s;
    animation-duration: 4.4s;
}

.encrypted-char:nth-child(7n+2) {
    animation-delay: 1.1s;
    animation-duration: 3.6s;
}

.encrypted-char:nth-child(7n+3) {
    animation-delay: 0.4s;
    animation-duration: 4s;
}

@keyframes floatChar {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-2px) translateX(1px) rotate(0.5deg) scale(1.05);
    }
    50% {
        transform: translateY(1px) translateX(-1px) rotate(-0.3deg) scale(0.97);
    }
    75% {
        transform: translateY(-1px) translateX(0.5px) rotate(0.2deg) scale(1.02);
    }
}

/* ========================================
   Reusable Floating Text Animation
   Apply to any text for magical floating effect
   ======================================== */
.floating-text {
    display: inline-block;
    position: relative;
    font-weight: 600;
    color: #B2682E;
    white-space: break-spaces; /* Preserve spaces, allow wrapping */
}

.floating-text .float-char {
    display: inline-block;
    position: relative;
    animation: floatChar 4s ease-in-out infinite;
    will-change: transform; /* Optimize for animation performance */
}

/* Staggered animation variations for organic movement */
.floating-text .float-char:nth-child(3n) {
    animation-delay: 0s;
    animation-duration: 3.5s;
}

.floating-text .float-char:nth-child(3n+1) {
    animation-delay: 0.5s;
    animation-duration: 4.2s;
}

.floating-text .float-char:nth-child(3n+2) {
    animation-delay: 1s;
    animation-duration: 3.8s;
}

.floating-text .float-char:nth-child(5n) {
    animation-delay: 0.3s;
    animation-duration: 4.5s;
}

.floating-text .float-char:nth-child(5n+1) {
    animation-delay: 0.8s;
    animation-duration: 3.3s;
}

.floating-text .float-char:nth-child(5n+2) {
    animation-delay: 1.2s;
    animation-duration: 4.1s;
}

.floating-text .float-char:nth-child(5n+3) {
    animation-delay: 0.2s;
    animation-duration: 3.7s;
}

.floating-text .float-char:nth-child(5n+4) {
    animation-delay: 0.6s;
    animation-duration: 4.3s;
}

.floating-text .float-char:nth-child(7n) {
    animation-delay: 0.1s;
    animation-duration: 3.9s;
}

.floating-text .float-char:nth-child(7n+1) {
    animation-delay: 0.9s;
    animation-duration: 4.4s;
}

.floating-text .float-char:nth-child(7n+2) {
    animation-delay: 0.4s;
    animation-duration: 3.6s;
}

/* Optional: Fade-in effect for floating text */
.floating-text.fade-in .float-char {
    opacity: 0;
    animation-fill-mode: both;
}

.floating-text.fade-in.active .float-char {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* Utility classes for different float intensities */
.floating-text.subtle .float-char {
    animation-name: floatCharSubtle;
}

.floating-text.intense .float-char {
    animation-name: floatCharIntense;
}

@keyframes floatCharSubtle {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-1px) translateX(0.5px) rotate(0.2deg) scale(1.02);
    }
    50% {
        transform: translateY(0.5px) translateX(-0.5px) rotate(-0.1deg) scale(0.99);
    }
    75% {
        transform: translateY(-0.5px) translateX(0.2px) rotate(0.1deg) scale(1.01);
    }
}

@keyframes floatCharIntense {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-4px) translateX(2px) rotate(1deg) scale(1.08);
    }
    50% {
        transform: translateY(2px) translateX(-2px) rotate(-0.6deg) scale(0.94);
    }
    75% {
        transform: translateY(-2px) translateX(1px) rotate(0.4deg) scale(1.04);
    }
}

/* Email button for contact page */
.email-button {
    display: inline-block;
    padding: 16px 32px;
    background-color: var(--accent-warm);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.email-button:hover {
    background-color: var(--accent-warm);
    transform: translateY(-1px);
    filter: brightness(1.1);
}

/* ========================================
   Notification/Toast System
   ======================================== */
.notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    z-index: 10000;
    animation: slideInTop 0.3s ease;
    max-width: 320px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.notification-success {
    background: #22c55e;
    color: white;
    border: 1px solid #16a34a;
}

.notification-error {
    background: #ef4444;
    color: white;
    border: 1px solid #dc2626;
}

.notification-info {
    background: var(--accent-warm);
    color: white;
    border: 1px solid var(--accent-warm-hover);
}

.notification-warning {
    background: #f59e0b;
    color: white;
    border: 1px solid #d97706;
}

@keyframes slideInTop {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutTop {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
}

/* ========================================
   Error State Styling
   ======================================== */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    min-height: 300px;
    flex: 1;
}

.error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 400px;
    width: 100%;
}

.error-title {
    color: var(--text-primary);
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.02em;
    opacity: 0;
    animation: fadeInFall 0.5s ease-out 0.1s forwards;
}

.error-message {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    opacity: 0;
    animation: fadeInFall 0.5s ease-out 0.2s forwards;
}

.error-action {
    margin-top: 12px;
    width: 100%;
    max-width: 280px;
    opacity: 0;
    animation: fadeInFall 0.5s ease-out 0.3s forwards;
}

.error-action .magic-button {
    width: 100%;
}