/* ============================================
   Chat & Exercise Styles
   Shared styles for chat features, exercise modals, and slide panels
   ============================================ */

/* ============================================
   Markdown in Messages
   ============================================ */

.message p {
    margin: 0 0 var(--space-sm) 0;
}

.message p:last-child {
    margin-bottom: 0;
}

.message strong {
    font-weight: var(--font-weight-semibold);
    color: var(--accent-primary);
}

.message ul, .message ol {
    padding-left: var(--space-lg);
    margin: var(--space-sm) 0;
}

.message li {
    margin: var(--space-xs) 0;
}

.message h1, .message h2, .message h3 {
    color: var(--accent-primary);
    margin: var(--space-md) 0 var(--space-sm) 0;
}

.message h1:first-child,
.message h2:first-child,
.message h3:first-child {
    margin-top: 0;
}

/* ============================================
   Welcome Message
   ============================================ */

.welcome-message {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto;
}

.welcome-message h2 {
    color: var(--accent-primary);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-md);
}

/* ============================================
   Quick Prompts
   ============================================ */

.quick-prompts {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-md);
}

.quick-prompts::-webkit-scrollbar {
    display: none;
}

.quick-prompt-btn {
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    background: var(--bg-card);
    border: var(--border-medium) solid var(--border-warm);
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all var(--transition-brutal);
    white-space: nowrap;
}

.quick-prompt-btn:hover {
    background: var(--coral);
    color: var(--bg-primary);
    border-color: var(--coral);
}

.quick-prompt-btn:active {
    transform: scale(0.97);
}

/* ============================================
   Slide Panels
   ============================================ */

.slide-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: calc(100dvh - var(--tab-bar-height) - env(safe-area-inset-bottom));
    background: var(--bg-primary);
    z-index: var(--z-modal);
    transition: right 0.3s var(--transition-smooth);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.slide-panel.active {
    right: 0;
}

.slide-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    padding-top: max(var(--space-md), env(safe-area-inset-top));
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: var(--z-base);
}

.slide-panel-header h2 {
    font-size: var(--font-size-xl);
    margin: 0;
}

.slide-panel-back {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.slide-panel-back:hover {
    background: var(--bg-primary);
    color: var(--accent-primary);
}

.slide-panel-content {
    flex: 1;
    padding: var(--space-lg);
    padding-bottom: var(--space-xl);
}

/* ============================================
   Exercise Modals
   ============================================ */

.exercise-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.exercise-modal.active {
    display: flex;
}

.exercise-modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: 100%;
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease-out;
    text-align: center;
}

.exercise-modal-header {
    margin-bottom: var(--space-lg);
}

.exercise-modal-header h3 {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-sm) 0;
}

.exercise-visual {
    margin: var(--space-xl) 0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exercise-instruction {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin: var(--space-md) 0;
    font-weight: var(--font-weight-medium);
    min-height: 2rem;
}

.exercise-controls {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-lg);
}

/* ============================================
   Breathing Circle Animation
   ============================================ */

.breathing-circle {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3rem;
    transition: transform 4s cubic-bezier(0.45, 0, 0.55, 1);
}

.breathing-circle.inhale {
    transform: scale(1.4);
}

.breathing-circle.exhale {
    transform: scale(1);
}

/* ============================================
   Grounding Exercise
   ============================================ */

.grounding-container {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

.grounding-sense {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s var(--transition-smooth);
}

.grounding-sense.active {
    opacity: 1;
    transform: translateY(0);
}

.grounding-icon {
    font-size: 4rem;
    margin-bottom: var(--space-md);
    animation: gentlePulse 2s ease-in-out infinite;
}

@keyframes gentlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.grounding-number {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary);
    margin-bottom: var(--space-sm);
}

.grounding-label {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.grounding-checklist {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.grounding-check {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    border: 2px solid var(--glass-border);
    transition: all var(--transition-smooth);
}

.grounding-check.completed {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: scale(1.2);
}

/* ============================================
   Multi-Step Exercise Modal Sections
   ============================================ */

/* Generic section show/hide for all multi-step modals */
.bodyreset-section,
.tinywins-section,
.nutrition-section,
.control-section,
.playbreak-section,
.social-section,
.weather-section,
.safety-section,
.trigger-section {
    display: none;
    text-align: center;
}

.bodyreset-section.active,
.tinywins-section.active,
.nutrition-section.active,
.control-section.active,
.playbreak-section.active,
.social-section.active,
.weather-section.active,
.safety-section.active,
.trigger-section.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* Section icons */
.bodyreset-icon,
.tinywins-icon,
.nutrition-icon,
.control-icon,
.playbreak-icon,
.social-icon,
.weather-icon,
.safety-icon,
.trigger-step-icon {
    font-size: 3rem;
    margin-bottom: var(--space-md);
}

/* Section headings */
.bodyreset-section h4,
.tinywins-section h4,
.nutrition-section h4,
.control-section h4,
.playbreak-section h4,
.safety-section h4,
.trigger-section h4 {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-sm) 0;
}

/* Section intros */
.bodyreset-intro,
.tinywins-intro,
.nutrition-intro,
.control-intro,
.playbreak-intro,
.safety-intro,
.trigger-intro {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
}

/* Instructions */
.bodyreset-instruction,
.bodyreset-reflection,
.tinywins-question,
.tinywins-reflection,
.nutrition-question,
.nutrition-reflection,
.control-question,
.control-reflection,
.playbreak-instruction,
.playbreak-reflection,
.safety-question,
.safety-description,
.safety-reflection,
.trigger-question,
.trigger-reflection {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: var(--space-sm) 0 var(--space-md) 0;
}

/* Timer displays */
.bodyreset-timer,
.playbreak-timer {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary);
    margin: var(--space-md) 0;
}

/* Text inputs */
.tinywins-input,
.control-input,
.safety-input,
.trigger-input {
    width: 100%;
    padding: var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-family: inherit;
    resize: none;
    min-height: 80px;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.tinywins-input:focus,
.control-input:focus,
.safety-input:focus,
.trigger-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

/* Option buttons (nutrition, control, playbreak) */
.nutrition-options,
.control-options,
.playbreak-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin: var(--space-md) 0;
}

.nutrition-option,
.control-option,
.playbreak-option {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nutrition-option:hover,
.control-option:hover,
.playbreak-option:hover {
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

.nutrition-option.selected,
.control-option.selected,
.playbreak-option.selected {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

/* Weather options (also used in modal) */
.weather-option {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.weather-option:hover {
    border-color: var(--accent-primary);
}

.weather-option.selected {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.weather-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin: var(--space-md) 0;
}

/* Progress dots */
.bodyreset-progress,
.tinywins-progress,
.nutrition-progress,
.control-progress,
.playbreak-progress,
.social-progress,
.weather-progress,
.safety-progress,
.trigger-progress {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin: var(--space-md) 0;
}

.bodyreset-dot,
.tinywins-dot,
.nutrition-dot,
.control-dot,
.playbreak-dot,
.social-dot,
.weather-dot,
.safety-dot,
.trigger-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    transition: all var(--transition-fast);
}

.bodyreset-dot.active,
.tinywins-dot.active,
.nutrition-dot.active,
.control-dot.active,
.playbreak-dot.active,
.social-dot.active,
.weather-dot.active,
.safety-dot.active,
.trigger-dot.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.bodyreset-dot.current,
.tinywins-dot.current,
.nutrition-dot.current,
.control-dot.current,
.playbreak-dot.current,
.social-dot.current,
.weather-dot.current,
.safety-dot.current,
.trigger-dot.current {
    transform: scale(1.3);
}

/* Summary results */
.tinywins-star,
.nutrition-result,
.control-result,
.playbreak-result {
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

/* Safety Behaviours examples and results */
.safety-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
    text-align: left;
}

.safety-example {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-left: 2px solid var(--accent-primary);
}

.safety-result-card {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-sm) 0;
    text-align: left;
    border-left: 3px solid var(--accent-primary);
}

.safety-result-header {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-base);
}

.safety-result-detail {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: var(--space-xs) 0;
    line-height: 1.5;
}

/* Safety modal needs scrollable content for longer phases */
.safety-content {
    max-height: 85vh;
    overflow-y: auto;
}

/* Slider styles for social modal */
.social-slider-container {
    padding: var(--space-md) 0;
}

.social-slider {
    width: 100%;
    accent-color: var(--accent-primary);
}

.social-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

.social-slider-value {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary);
    margin-top: var(--space-sm);
}

/* Ladder styles */
.ladder-intro,
.social-intro,
.weather-intro {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
}

.ladder-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.ladder-rung {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ladder-rung:hover {
    border-color: var(--accent-primary);
}

.ladder-rung.selected {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.rung-level {
    font-weight: var(--font-weight-bold);
    min-width: 24px;
}

.rung-text {
    flex: 1;
    font-size: var(--font-size-sm);
}

.rung-difficulty {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* ============================================
   On-Demand Prompt Banner
   ============================================ */

.prompt-banner {
    background: linear-gradient(135deg, rgba(47, 40, 35, 0.95) 0%, rgba(58, 50, 40, 0.95) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    border-left: 3px solid var(--accent-primary);
    padding: var(--space-lg);
    position: relative;
    z-index: var(--z-dropdown);
    transition: all 0.4s var(--transition-smooth);
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
    overflow: hidden;
}

.prompt-banner.visible {
    opacity: 1;
    transform: translateY(0);
    max-height: 350px;
}

.prompt-banner.hidden {
    display: none;
}

.prompt-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.prompt-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.prompt-text {
    flex: 1;
}

.prompt-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
    margin-bottom: var(--space-sm);
}

.prompt-message {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.6;
    font-style: italic;
}

.prompt-dismiss {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.prompt-dismiss:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.prompt-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ============================================
   Resource Cards
   ============================================ */

.resource-card {
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    transition: all var(--transition-smooth);
}

.resource-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md), 0 0 20px var(--accent-glow);
}

.resource-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.resource-card-title h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.exercise-title-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.exercise-title-link:hover {
    color: var(--accent-primary, #E88A6A);
    text-decoration-style: solid;
}

.resource-card-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

.resource-card-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}


/* Exercise link buttons in panel */
.exercise-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg, 12px);
    font-weight: 600;
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Inline exercise links in chat messages */
.exercise-chat-link {
    color: var(--accent-primary, #E88A6A);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.exercise-chat-link:hover {
    color: var(--accent-secondary, #d4775a);
    text-decoration-style: solid;
}

/* Exercise action card in chat messages */
.exercise-action-card {
    margin-top: var(--space-md, 0.75rem);
    padding: var(--space-md, 0.75rem);
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid var(--card-accent, #E88A6A);
    border-radius: var(--radius-lg, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 0.5rem);
}

.exercise-action-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
}

.exercise-action-card-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.exercise-action-card-title {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 1rem);
    color: var(--text-primary, #F5F0E8);
}

.exercise-action-card-desc {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, rgba(245, 240, 232, 0.6));
    line-height: 1.4;
}

.exercise-action-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-lg, 12px);
    font-weight: 700;
    font-size: var(--font-size-sm, 0.875rem);
    color: #fff;
    background: var(--card-accent, #E88A6A);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-align: center;
}

.exercise-action-card-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ============================================
   Trigger Mapping Exercise
   ============================================ */

.trigger-body-options,
.trigger-emotion-options,
.trigger-pattern-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin: var(--space-md) 0;
}

.trigger-option {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.trigger-option:hover {
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

.trigger-option.selected {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.trigger-input-small {
    min-height: 50px;
    margin-top: var(--space-sm);
}

.trigger-guidance {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-primary);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    text-align: left;
    animation: fadeIn 0.3s ease-out;
}

.trigger-guidance.hidden {
    display: none;
}

.trigger-summary {
    text-align: left;
}

.trigger-summary-item {
    padding: var(--space-sm) var(--space-md);
    margin: var(--space-sm) 0;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-primary);
    font-size: var(--font-size-sm);
}

.trigger-summary-item strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.trigger-summary-item span {
    color: var(--text-secondary);
}